HAR-10180 - formatting, import/export fixes

packages/super-editor/src/core/super-converter/exporter.js

@@ -1305,7 +1305,16 @@ function generateTableProperties(node) {
   const elements = [];
 
   const { attrs } = node;
-  const { tableWidth, tableWidthType, tableStyleId, borders, tableIndent, tableLayout, tableCellSpacing } = attrs;
+  const { 
+    tableWidth, 
+    tableWidthType, 
+    tableStyleId, 
+    borders, 
+    tableIndent, 
+    tableLayout, 
+    tableCellSpacing, 
+    justification, 
+  } = attrs;
 
   if (tableStyleId) {
     const tableStyleElement = {
@@ -1355,6 +1364,14 @@ function generateTableProperties(node) {
     });
   }
 
+  if (justification) {
+    const justificationElement = {
+      name: 'w:jc',
+      attributes: { 'w:val': justification },
+    };
+    elements.push(justificationElement);
+  }
+
   return {
     name: 'w:tblPr',
     elements,

packages/super-editor/src/core/super-converter/v2/importer/markImporter.js

@@ -11,6 +11,9 @@ export function parseMarks(property, unknownMarks = [], docx = null) {
   const marks = [];
   const seen = new Set();
 
+  const lang = property?.elements?.find((el) => el.name === 'w:lang');
+  const langAttrs = lang?.attributes || {};
+
   property?.elements?.forEach((element) => {
     const marksForType = SuperConverter.markTypes.filter((mark) => mark.name === element.name);
     if (!marksForType.length) {
@@ -44,6 +47,11 @@ export function parseMarks(property, unknownMarks = [], docx = null) {
         return;
       }
 
+      // this probably requires a more thorough check.
+      if (['w:bCs'].includes(m.name) && langAttrs['w:eastAsia']) {
+        return;
+      }
+
       // Use the parent mark (ie: textStyle) if present
       if (m.mark) newMark.type = m.mark;
 

packages/super-editor/src/core/super-converter/v2/importer/paragraphNodeImporter.js

@@ -264,6 +264,7 @@ const getDefaultParagraphStyle = (docx, styleId = '') => {
   const pPrNormal = stylesNormal?.elements?.find((el) => el.name === 'w:pPr');
   const pPrNormalSpacingTag = pPrNormal?.elements?.find((el) => el.name === 'w:spacing') || {};
   const pPrNormalIndentTag = pPrNormal?.elements?.find((el) => el.name === 'w:ind') || {};
+  const isNormalAsDefault = stylesNormal?.attributes?.['w:default'] === '1';
 
   // Styles based on styleId
   let pPrStyleIdSpacingTag = {};
@@ -299,9 +300,17 @@ const getDefaultParagraphStyle = (docx, styleId = '') => {
   const { attributes: pPrNormalIndentAttr } = pPrNormalIndentTag;
   const { attributes: pPrByIdIndentAttr } = pPrStyleIdIndentTag;
 
+  const spacingRest = isNormalAsDefault 
+    ? (pPrNormalSpacingAttr || pPrDefaultSpacingAttr)
+    : (pPrDefaultSpacingAttr || pPrNormalSpacingAttr);
+
+  const indentRest = isNormalAsDefault
+    ? (pPrNormalIndentAttr || pPrDefaultIndentAttr)
+    : (pPrDefaultIndentAttr || pPrNormalIndentAttr);
+
   return {
-    spacing: pPrByIdSpacingAttr || pPrDefaultSpacingAttr || pPrNormalSpacingAttr,
-    indent: pPrByIdIndentAttr || pPrDefaultIndentAttr || pPrNormalIndentAttr,
+    spacing: pPrByIdSpacingAttr || spacingRest,
+    indent: pPrByIdIndentAttr || indentRest,
     justify: pPrByIdJcAttr,
     textCase,
   };

packages/super-editor/src/core/super-converter/v2/importer/tableImporter.js

@@ -80,6 +80,11 @@ export function handleTableNode(node, params) {
     attrs['borderCollapse'] = 'separate';
   }
 
+  const tblJustification = tblPr.elements.find((el) => el.name === 'w:jc');
+  if (tblJustification?.attributes) {
+    attrs['justification'] = tblJustification.attributes['w:val'];
+  }
+
   // TODO: What does this do?
   // const tblLook = tblPr.elements.find((el) => el.name === 'w:tblLook');
 

packages/super-editor/src/extensions/table/table.js

@@ -108,6 +108,22 @@ export const Table = Node.create({
         },
       },
 
+      justification: {
+        default: null,
+        renderDOM: (attrs) => {
+          if (!attrs.justification) return {};
+
+          if (attrs.justification === 'center') {
+            return { style: `margin: 0 auto` };
+          }
+          if (attrs.justification === 'right') {
+            return  { style: `margin-left: auto` };
+          }
+
+          return {};
+        },
+      },
+
       tableStyleId: {
         rendered: false,
       },