fix(line-height): clear_format shuold reset line_height

Leecason · Jan 9, 2020 · 2158ad6 · 2158ad6
1 parent 9949163
commit 2158ad6
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 63 deletions.
diff --git a/src/extensions/format_clear.js b/src/extensions/format_clear.js
@@ -1,5 +1,6 @@
 import { Extension } from 'tiptap';
 import { setTextAlign } from '../utils/text_align';
+import { setTextLineHeight } from '../utils/line_height';
 import CommandButton from '../components/MenuCommands/CommandButton.vue';
 
 const FORMAT_MARK_NAMES = [
@@ -60,6 +61,7 @@ export default class FormatClear extends Extension {
     });
 
     tr = setTextAlign(tr, null);
+    tr = setTextLineHeight(tr, null);
 
     return tr;
   }

diff --git a/src/extensions/line_height.js b/src/extensions/line_height.js
@@ -1,13 +1,7 @@
 import { Extension } from 'tiptap';
-import { TextSelection, AllSelection } from 'prosemirror-state';
+import { setTextLineHeight } from '../utils/line_height';
 import LineHeightDropdown from '../components/MenuCommands/LineHeightDropdown.vue';
 
-const ALLOWED_NODE_TYPES = [
-  'paragraph',
-  'heading',
-  'list_item',
-];
-
 const LINE_HEIGHT_100 = '100%';
 const LINE_HEIGHT_125 = '125%';
 const LINE_HEIGHT_150 = '150%';
@@ -58,7 +52,7 @@ export default class LineHeight extends Extension {
       let { tr } = state;
       tr = tr.setSelection(selection);
 
-      tr = this.setTextLineHeight(tr, lineHeight);
+      tr = setTextLineHeight(tr, lineHeight);
 
       if (tr.docChanged) {
         dispatch && dispatch(tr);
@@ -68,57 +62,4 @@ export default class LineHeight extends Extension {
       return false;
     };
   }
-
-  setTextLineHeight (tr, lineHeight) {
-    const { selection, doc } = tr;
-
-    if (!selection || !doc) return tr;
-
-    if (!(selection instanceof TextSelection || selection instanceof AllSelection)) {
-      return tr;
-    }
-
-    const { from, to } = selection;
-
-    const jobs = [];
-    const lineHeightValue = lineHeight || null;
-
-    doc.nodesBetween(from, to, (node, pos) => {
-      const nodeType = node.type;
-      if (ALLOWED_NODE_TYPES.includes(nodeType.name)) {
-        const lineHeight = node.attrs.lineHeight || null;
-        if (lineHeight !== lineHeightValue) {
-          jobs.push({
-            node,
-            pos,
-            nodeType,
-          });
-        }
-        return nodeType.name === 'list_item';
-      }
-      return true;
-    });
-
-    if (!jobs.length) return tr;
-
-    jobs.forEach(job => {
-      const { node, pos, nodeType } = job;
-      let { attrs } = node;
-
-      if (lineHeightValue) {
-        attrs = {
-          ...attrs,
-          lineHeight: lineHeightValue,
-        };
-      } else {
-        attrs = {
-          ...attrs,
-          lineHeight: null,
-        };
-      }
-      tr = tr.setNodeMarkup(pos, nodeType, attrs, node.marks);
-    });
-
-    return tr;
-  }
 }
diff --git a/src/extensions/paragraph.js b/src/extensions/paragraph.js
@@ -7,7 +7,7 @@ export const ParagraphNodeSpec = {
   attrs: {
     textAlign: { default: null },
     indent: { default: null },
-    lineHeight: { default: '100%' },
+    lineHeight: { default: null },
   },
   content: 'inline*',
   group: 'block',

diff --git a/src/utils/line_height.js b/src/utils/line_height.js
@@ -1,3 +1,10 @@
+import { TextSelection, AllSelection } from 'prosemirror-state';
+
+const ALLOWED_NODE_TYPES = [
+  'paragraph',
+  'heading',
+];
+
 export function isLineHeightActive (state, lineHeight) {
   const { selection, doc } = state;
   const { from, to } = selection;
@@ -7,10 +14,11 @@ export function isLineHeightActive (state, lineHeight) {
 
   doc.nodesBetween(from, to, (node, _pos) => {
     const nodeType = node.type;
+    const lineHeightValue = node.attrs.lineHeight || '100%';
     if (
       keepLooking &&
       (nodeType.name === 'paragraph' || nodeType.name === 'heading') &&
-      node.attrs.lineHeight === lineHeight
+      lineHeightValue === lineHeight
     ) {
       keepLooking = false;
       active = true;
@@ -35,3 +43,50 @@ export function transformLineHeightToCSS (value) {
 
   return strValue;
 }
+
+export function setTextLineHeight (tr, lineHeight) {
+  const { selection, doc } = tr;
+
+  if (!selection || !doc) return tr;
+
+  if (!(selection instanceof TextSelection || selection instanceof AllSelection)) {
+    return tr;
+  }
+
+  const { from, to } = selection;
+
+  const jobs = [];
+  const lineHeightValue = lineHeight || null;
+
+  doc.nodesBetween(from, to, (node, pos) => {
+    const nodeType = node.type;
+    if (ALLOWED_NODE_TYPES.includes(nodeType.name)) {
+      const lineHeight = node.attrs.lineHeight || null;
+      if (lineHeight !== lineHeightValue) {
+        jobs.push({
+          node,
+          pos,
+          nodeType,
+        });
+      }
+      return nodeType.name === 'list_item';
+    }
+    return true;
+  });
+
+  if (!jobs.length) return tr;
+
+  jobs.forEach(job => {
+    const { node, pos, nodeType } = job;
+    let { attrs } = node;
+
+    attrs = {
+      ...attrs,
+      lineHeight: lineHeightValue,
+    };
+
+    tr = tr.setNodeMarkup(pos, nodeType, attrs, node.marks);
+  });
+
+  return tr;
+}