fix: prefer text-align instead of align

sibiraj-s · Dec 24, 2020 · ee03ee7 · ee03ee7
1 parent b1e85bb
commit ee03ee7
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 10 deletions.
diff --git a/src/lib/schema/nodes.ts b/src/lib/schema/nodes.ts
@@ -1,6 +1,8 @@
 import { DOMOutputSpec, Node as ProsemirrorNode, NodeSpec } from 'prosemirror-model';
 import * as sl from 'prosemirror-schema-list';
 
+import toStyleString from '../utils/toStyleString';
+
 type GetAttrsSpec = { [key: string]: any };
 
 const doc: NodeSpec = {
@@ -26,15 +28,24 @@ const paragraph: NodeSpec = {
     {
       tag: 'p',
       getAttrs(dom: HTMLElement): GetAttrsSpec {
+        const { textAlign } = dom.style;
+        const align = dom.getAttribute('align') || textAlign || null;
+
         return {
-          align: dom.getAttribute('align') || null
+          align
         };
       }
     }
   ],
   toDOM(node): DOMOutputSpec {
     const { align } = node.attrs;
-    return ['p', { align }, 0];
+
+    const styles: Partial<CSSStyleDeclaration> = {
+      textAlign: align !== 'left' ? align : null
+    };
+    const style = toStyleString(styles) || null;
+
+    return ['p', { style }, 0];
   }
 };
 
@@ -77,61 +88,85 @@ const heading: NodeSpec = {
     {
       tag: 'h1',
       getAttrs(dom: HTMLElement): GetAttrsSpec {
+        const { textAlign } = dom.style;
+        const align = dom.getAttribute('align') || textAlign || null;
+
         return {
           level: 1,
-          align: dom.getAttribute('align') || null
+          align
         };
       }
     },
     {
       tag: 'h2',
       getAttrs(dom: HTMLElement): GetAttrsSpec {
+        const { textAlign } = dom.style;
+        const align = dom.getAttribute('align') || textAlign || null;
+
         return {
           level: 2,
-          align: dom.getAttribute('align') || null
+          align
         };
       }
     },
     {
       tag: 'h3',
       getAttrs(dom: HTMLElement): GetAttrsSpec {
+        const { textAlign } = dom.style;
+        const align = dom.getAttribute('align') || textAlign || null;
+
         return {
           level: 3,
-          align: dom.getAttribute('align') || null
+          align
         };
       }
     },
     {
       tag: 'h4',
       getAttrs(dom: HTMLElement): GetAttrsSpec {
+        const { textAlign } = dom.style;
+        const align = dom.getAttribute('align') || textAlign || null;
+
         return {
           level: 4,
-          align: dom.getAttribute('align') || null
+          align
         };
       }
     },
     {
       tag: 'h5',
       getAttrs(dom: HTMLElement): GetAttrsSpec {
+        const { textAlign } = dom.style;
+        const align = dom.getAttribute('align') || textAlign || null;
+
         return {
           level: 5,
-          align: dom.getAttribute('align') || null
+          align
         };
       }
     },
     {
       tag: 'h6',
       getAttrs(dom: HTMLElement): GetAttrsSpec {
+        const { textAlign } = dom.style;
+        const align = dom.getAttribute('align') || textAlign || null;
+
         return {
           level: 6,
-          align: dom.getAttribute('align') || null
+          align
         };
       }
     },
   ],
   toDOM(node): DOMOutputSpec {
-    const { align } = node.attrs;
-    return ['h' + node.attrs.level, { align }, 0];
+    const { level, align } = node.attrs;
+
+    const styles: Partial<CSSStyleDeclaration> = {
+      textAlign: align !== 'left' ? align : null
+    };
+    const style = toStyleString(styles) || null;
+
+    return ['h' + level, { style }, 0];
   }
 };
 

diff --git a/src/lib/utils/toStyleString.ts b/src/lib/utils/toStyleString.ts
@@ -0,0 +1,22 @@
+const camelToDashed = (str: string): string => {
+  return str.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+};
+
+const cleanObject = (obj: { [key: string]: any }): { [key: string]: any } => {
+  const cleanObj = {};
+
+  Object.keys(obj).forEach((prop) => {
+    if (obj[prop]) {
+      cleanObj[prop] = obj[prop];
+    }
+  });
+
+  return cleanObj;
+};
+
+const toStyleString = (obj: Partial<CSSStyleDeclaration>): string => {
+  const styles = cleanObject(obj);
+  return Object.entries(styles).map(([k, v]) => `${camelToDashed(k)}:${v}`).join(';');
+};
+
+export default toStyleString;