feat: format clean

src/lib/components/QuasarTiptap.vue

@@ -59,7 +59,8 @@ import {
   OIframe,
   ODiagram,
   OKatexBlock,
-  OKatexInline
+  OKatexInline,
+  OFormatClear
 } from 'src/lib/extentions'
 
 import OEditorMenuBar from './menubars/OEditorMenuBar'
@@ -172,7 +173,8 @@ export default {
         new OIframe(),
         new ODiagram(),
         new OKatexBlock(),
-        new OKatexInline()
+        new OKatexInline(),
+        new OFormatClear()
       ]
 
       this.editor = new Editor({

src/lib/components/buttons/OMenubarBtn.vue

@@ -58,9 +58,9 @@ export default {
 
 <style lang="stylus">
   .o-menubar-btn {
-    padding 4px
+    padding 0px
     font-weight 400
-    min-width 32px
+    min-width 30px
     min-height unset
   }
   .o-menubar-btn.is-active {

src/lib/components/buttons/OSimpleCommandBtn.vue

@@ -56,6 +56,7 @@ export default {
         redo: { icon: 'redo', tooltip: 'redo', isActive: false, command: this.commands.redo },
         indent: { icon: 'format_indent_increase', tooltip: 'indent', isActive: false, command: this.commands.indent },
         outdent: { icon: 'format_indent_decrease', tooltip: 'outdent', isActive: false, command: this.commands.outdent },
+        format_clear: { icon: 'format_clear', tooltip: 'formatClear', isActive: false, command: this.commands.formatClear },
       }
     },
     config () {

src/lib/components/menubars/OEditorMenuBar.vue

@@ -79,6 +79,7 @@ export default {
         'redo',
         'indent',
         'outdent',
+        'format_clear',
       ],
       tableToolbar: [
         'bold',

src/lib/css/tiptap.styl

@@ -129,7 +129,7 @@
 
     .o-menubar-btn {
       height 40px
-      margin 0 2px
+      margin 0 1px
       border-radius 0
     }
     .o-menubar-btn.is-active {

src/lib/extentions/FormatClear.js

@@ -0,0 +1,20 @@
+import { Extension } from 'tiptap'
+import { clearMarks } from '../utils/format_clear'
+
+export default class FormatClear extends Extension {
+  get name () {
+    return 'formatClear'
+  }
+
+  commands () {
+    return () => (state, dispatch) => {
+      const tr = clearMarks(state.tr.setSelection(state.selection), state.schema)
+
+      if (dispatch && tr.docChanged) {
+        dispatch(tr)
+        return true
+      }
+      return false
+    }
+  }
+}

src/lib/extentions/index.js

@@ -19,7 +19,6 @@ export { default as OKatexBlock } from './KatexBlock'
 export { default as OKatexInline } from './KatexInline'
 
 // Marks
-export { default as OAlign } from './Align'
 export { default as OBackColor } from './BackColor'
 export { default as OForeColor } from './ForeColor'
 export { default as OFontFamily } from './FontFamily'
@@ -28,3 +27,4 @@ export { default as OFontFamily } from './FontFamily'
 export { default as OAlignment } from './Alignment'
 export { default as OIndent } from './Indent'
 export { default as OLineHeight } from './LineHeight'
+export { default as OFormatClear } from './FormatClear'

src/lib/utils/format_clear.js

@@ -0,0 +1,57 @@
+/**
+ * Utils: clear formats
+ * @see https://github.com/Leecason/element-tiptap/blob/master/src/utils/format_clear.ts
+ */
+import { setAlignment } from './alignment'
+import { setLineHeight } from './line_height'
+import { cleanIndent } from './indent'
+
+const FORMAT_MARK_NAMES = [
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  'link',
+  'foreColor',
+  'backColor',
+  'fontFamily',
+  'indent',
+]
+
+export function clearMarks (tr, schema) {
+  const { doc, selection } = tr
+  if (!selection || !doc) return tr
+
+  const { from, to, empty } = selection
+  if (empty) return tr
+
+  const markTypesToRemove = new Set(
+    FORMAT_MARK_NAMES.map(n => schema.marks[n]).filter(Boolean)
+  )
+
+  if (!markTypesToRemove.size) return tr
+
+  const tasks = []
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (node.marks && node.marks.length) {
+      node.marks.some(mark => {
+        if (markTypesToRemove.has(mark.type)) {
+          tasks.push({ node, pos, mark })
+        }
+      })
+      return true
+    }
+    return true
+  })
+
+  tasks.forEach(job => {
+    const { node, mark, pos } = job
+    tr = tr.removeMark(pos, pos + node.nodeSize, mark.type)
+  })
+
+  tr = setAlignment(tr, null)
+  tr = setLineHeight(tr, null)
+  tr = cleanIndent(tr)
+
+  return tr
+}

src/lib/utils/indent.js

@@ -77,3 +77,36 @@ export function createIndentCommand (delta) {
     return false
   }
 }
+
+export function cleanIndent (tr) {
+  const { doc, selection } = tr
+
+  if (!doc || !selection) return tr
+
+  if (!(selection instanceof TextSelection || selection instanceof AllSelection)) {
+    return tr
+  }
+
+  const { from, to } = selection
+
+  doc.nodesBetween(from, to, (node, pos) => {
+    const nodeType = node.type
+
+    if (
+      nodeType.name === 'paragraph' ||
+      nodeType.name === 'heading' ||
+      nodeType.name === 'blockquote'
+    ) {
+      const nodeAttrs = {
+        ...node.attrs,
+        indent: 0,
+      }
+      return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks)
+    } else if (isListNode(node)) {
+      return false
+    }
+    return true
+  })
+
+  return tr
+}

src/lib/utils/line_height.js

@@ -1,6 +1,6 @@
 /**
  * Utils: alignment
- * @see https://github.com/Leecason/element-tiptap/blob/master/src/extensions/text_align.ts
+ * @see https://github.com/Leecason/element-tiptap/blob/master/src/extensions/line_height.ts
  * @todo Table
  */
 
@@ -12,7 +12,6 @@ const ALLOWED_NODE_TYPES = [
 ]
 
 export function setLineHeight (tr, lineHeight) {
-  console.log('line-height', lineHeight)
   const { selection, doc } = tr
 
   if (!selection || !doc) {

src/pages/quasar-tiptap/basic.vue

@@ -34,6 +34,7 @@ export default {
         'font-family',
         'fore-color',
         'back-color',
+        'format_clear',
         'separator',
         'align-dropdown',
         'align-group',