HAR-9432 Formatting - Line spacing

Author: VladaHarbour

packages/super-editor/src/components/toolbar/super-toolbar.js

@@ -349,7 +349,7 @@ export class SuperToolbar extends EventEmitter {
         } else {
           return item.activate();
         }
-      };
+      }
 
       const activeMark = marks.find((mark) => mark.name === item.name.value);
 

packages/super-editor/src/core/helpers/getActiveFormatting.js

@@ -4,8 +4,9 @@ import { findMark } from './findMark.js';
 export function getActiveFormatting(editor) {
   const { state } = editor;
   const { selection } = state;
-
+  
   const marks = getMarksFromSelection(state);
+  const markAttrs = selection.$head.parent.attrs.marksAttrs;
 
   const marksToProcess = marks
     .filter((mark) =>  !['textStyle', 'link'].includes(mark.type.name))
@@ -14,6 +15,18 @@ export function getActiveFormatting(editor) {
   const textStyleMarks = marks.filter((mark) => mark.type.name === 'textStyle');
   marksToProcess.push(...textStyleMarks.flatMap(unwrapTextMarks));
 
+  // Empty paragraphs could have marks defined as attributes
+  if (markAttrs) {
+    const marksFromAttrs = markAttrs
+      .filter((mark) =>  !['textStyle', 'link'].includes(mark.type))
+      .map((mark) => ({ name: mark.type, attrs: mark.attrs || {} }));
+
+    const textStyleMarksFromAttrs = markAttrs.filter((mark) => mark.type === 'textStyle');
+    
+    marksToProcess.push(...marksFromAttrs);
+    marksToProcess.push(...textStyleMarksFromAttrs.flatMap(unwrapTextMarks));
+  }
+
   const linkMarkType = state.schema.marks['link'];
   const linkMark = findMark(state, linkMarkType);
 

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

@@ -167,7 +167,7 @@ function generateParagraphProperties(node) {
   const { styleId } = attrs;
   if (styleId) pPrElements.push({ name: 'w:pStyle', attributes: { 'w:val': styleId } });
 
-  const { spacing, indent, textAlign } = attrs;
+  const { spacing, indent, textAlign, marksAttrs, keepLines, keepNext } = attrs;
   if (spacing) {
     const { lineSpaceBefore, lineSpaceAfter, line, lineRule } = spacing;
 
@@ -187,11 +187,12 @@ function generateParagraphProperties(node) {
   }
 
   if (indent) {
-    const { left, right, firstLine } = indent;
+    const { left, right, firstLine, hanging } = indent;
     const attributes = {};
     if (left || left === 0) attributes['w:left'] = pixelsToTwips(left);
     if (right || right === 0) attributes['w:right'] = pixelsToTwips(right);
     if (firstLine || firstLine === 0) attributes['w:firstLine'] = pixelsToTwips(firstLine);
+    if (hanging || hanging === 0) attributes['w:hanging'] = pixelsToTwips(hanging);
 
     const indentElement = {
       name: 'w:ind',
@@ -208,8 +209,28 @@ function generateParagraphProperties(node) {
     pPrElements.push(textAlignElement);
   }
 
-  if (!pPrElements.length) return null;
+  if (marksAttrs) {
+    const outputMarks = processOutputMarks(marksAttrs);
+    const rPrElement = generateRunProps(outputMarks);
+    pPrElements.push(rPrElement);
+  }
+  
+  if (keepLines) {
+    pPrElements.push({
+      name: 'w:keepLines',
+      attributes: { 'w:val': keepLines },
+    });
+  }
+
+  if (keepNext) {
+    pPrElements.push({
+      name: 'w:keepNext',
+      attributes: { 'w:val': keepNext },
+    });
+  }
 
+  if (!pPrElements.length) return null;
+
   return {
     name: 'w:pPr',
     elements: pPrElements,
@@ -533,16 +554,16 @@ function translateList(params) {
         ...paragraphNode.attrs,
         ...listNode.attrs
       };
-      
+
       const outputNode = exportSchemaToJson({ ...params, node: paragraphNode });
       if (!outputNode.elements) {
         outputNode.elements = [];
       }
       const propsElementIndex = outputNode.elements.findIndex((e) => e.name === 'w:pPr');
-      
+
       const listProps = getListParagraphProperties(listNode, level, type, propsElementIndex > -1);
       const content = outputNode.elements.filter((e) => e.name !== 'w:pPr');
-      
+
       if (!content.length) {
         // Some empty nodes could have spacing defined
         const spacingProp = outputNode.elements[propsElementIndex]?.elements.find((e) => e.name === 'w:spacing');
@@ -562,9 +583,11 @@ function translateList(params) {
       if (propsElementIndex === -1) {
         outputNode.elements.unshift(listProps);
       } else {
-        outputNode.elements[propsElementIndex].elements.push(listProps);
+        outputNode.elements[propsElementIndex].elements = [
+          ...outputNode.elements[propsElementIndex].elements,
+          ...listProps
+        ];
       }
-      
       listNodes.push(outputNode);
     });
   });
@@ -603,15 +626,24 @@ function getListParagraphProperties(node, level, type, hasParentProps) {
       },
     ],
   };
+  const resultElements = [numPr];
+  
+  let indent;
+  if (node.attrs.attributes?.parentAttributes) {
+    // Keep original list indent
+    indent = node.attrs.attributes.parentAttributes.paragraphProperties.elements.find(e => e.name === 'w:ind');
+  }
+  
+  indent && resultElements.push(indent);
 
   if (hasParentProps) {
-    return numPr;
+    return resultElements;
   }
 
   return {
     name: 'w:pPr',
     type: 'element',
-    elements: [numPr],
+    elements: resultElements
   };
 }
 

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

@@ -16,7 +16,9 @@ export function parseProperties(node, docx) {
   const unknownMarks = [];
   const { attributes = {}, elements = [] } = node;
   const { nodes, paragraphProperties = {}, runProperties = {} } = splitElementsAndProperties(elements);
-  paragraphProperties.elements = paragraphProperties?.elements?.filter((el) => el.name !== 'w:rPr');
+  const hasRun = elements.find(element => element.name === 'w:r');
+
+  if (hasRun) paragraphProperties.elements = paragraphProperties?.elements?.filter((el) => el.name !== 'w:rPr');
 
   // Get the marks from the run properties
   if (runProperties && runProperties?.elements?.length) {
@@ -58,7 +60,7 @@ function splitElementsAndProperties(elements) {
   const rPr = elements.find((el) => el.name === 'w:rPr');
   const sectPr = elements.find((el) => el.name === 'w:sectPr');
   const els = elements.filter((el) => el.name !== 'w:pPr' && el.name !== 'w:rPr' && el.name !== 'w:sectPr');
-
+  
   return {
     nodes: els,
     paragraphProperties: pPr,

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

@@ -515,7 +515,7 @@ function _processListRunProperties(data) {
   elements.forEach((item) => {
     if (!expectedTypes.includes(item.name)) {
       // console.warn(`[numbering.xml] Unexpected list run prop found: ${item.name}`);
-    };
+    }
     const { attributes = {} } = item;
     Object.keys(attributes).forEach((key) => {
       runProperties[key] = attributes[key];

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

@@ -1,4 +1,4 @@
-import { twipsToInches, twipsToPixels, twipsToLines } from '../../helpers.js';
+import { twipsToInches, twipsToLines, twipsToPixels } from '../../helpers.js';
 import { testForList } from './listImporter.js';
 import { carbonCopy } from '../../../utilities/carbonCopy.js';
 import { mergeTextNodes } from './mergeTextNodes.js';
@@ -49,33 +49,50 @@ export const handleParagraphNode = (params) => {
 
   const pPr = node.elements?.find((el) => el.name === 'w:pPr');
   const styleTag = pPr?.elements?.find((el) => el.name === 'w:pStyle');
+  const nestedRPr = pPr?.elements?.find((el) => el.name === 'w:rPr');
+  
+  if (nestedRPr) {
+    schemaNode.attrs.marksAttrs = parseMarks(nestedRPr, []);
+  }
+  
   if (styleTag) {
     schemaNode.attrs['styleId'] = styleTag.attributes['w:val'];
   }
 
   const indent = pPr?.elements?.find((el) => el.name === 'w:ind');
   if (indent && indent.attributes) {
-    const { 'w:left': left, 'w:right': right, 'w:firstLine': firstLine } = indent?.attributes;
+    const { 'w:left': left, 'w:right': right, 'w:firstLine': firstLine, 'w:hanging': hanging } = indent?.attributes;
 
     if (schemaNode.attrs) {
       if (!schemaNode.attrs.indent) schemaNode.attrs.indent = {};
       if (left) schemaNode.attrs['indent'].left = twipsToPixels(left);
       if (right) schemaNode.attrs['indent'].right = twipsToPixels(right);
       if (firstLine) schemaNode.attrs['indent'].firstLine = twipsToPixels(firstLine);
+      if (hanging) schemaNode.attrs['indent'].hanging = twipsToPixels(hanging);
     }
 
-    const textIndentVal = left || firstLine || 0;
+    const textIndentVal = left - parseInt(hanging || 0) || 0;
     schemaNode.attrs['textIndent'] = `${twipsToInches(textIndentVal)}in`;
   }
 
   const justify = pPr?.elements?.find((el) => el.name === 'w:jc');
   if (justify && justify.attributes) {
     schemaNode.attrs['textAlign'] = justify.attributes['w:val'];
   }
+  
+  const keepLines = pPr?.elements?.find((el) => el.name === 'w:keepLines');
+  if (keepLines && keepLines.attributes) {
+    schemaNode.attrs['keepLines'] = keepLines.attributes['w:val'];
+  }
+
+  const keepNext = pPr?.elements?.find((el) => el.name === 'w:keepNext');
+  if (keepNext && keepNext.attributes) {
+    schemaNode.attrs['keepNext'] = keepNext.attributes['w:val'];
+  }
 
   if (docx) {
     const defaultStyleId = node.attributes?.['w:rsidRDefault'];
-    schemaNode.attrs['spacing'] = getParagraphSpacing(node, docx);
+    schemaNode.attrs['spacing'] = getParagraphSpacing(node, docx, schemaNode.attrs['styleId'], schemaNode.attrs.marksAttrs);
     schemaNode.attrs['rsidRDefault'] = defaultStyleId;
   }
 
@@ -92,21 +109,24 @@ export const handleParagraphNode = (params) => {
   return { nodes: schemaNode ? [schemaNode] : [], consumed: 1 };
 };
 
-export const getParagraphSpacing = (node, docx) => {
+export const getParagraphSpacing = (node, docx, styleId = '', marks = []) => {
   // Check if we have default paragraph styles to override
   const spacing = {
     lineSpaceAfter: 0,
     lineSpaceBefore: 0,
     line: 0,
     lineRule: null,
   }
-
-  const { spacing: pDefaultSpacing = {} } = getDefaultParagraphStyle(docx);
+  
+  const { spacing: pDefaultSpacing = {} } = getDefaultParagraphStyle(docx, styleId);
   let lineSpaceAfter, lineSpaceBefore, line, lineRuleStyle;
 
   const pPr = node.elements?.find((el) => el.name === 'w:pPr');
   const inLineSpacingTag = pPr?.elements?.find((el) => el.name === 'w:spacing');
   const inLineSpacing = inLineSpacingTag?.attributes || {};
+  
+  const textStyleMark = marks.find((el) => el.type === 'textStyle');
+  const fontSize = textStyleMark?.attrs?.fontSize;
 
   // These styles are taken in order of precedence
   // 1. Inline spacing
@@ -117,17 +137,27 @@ export const getParagraphSpacing = (node, docx) => {
 
   const beforeSpacing = inLineSpacing?.['w:before'] || lineSpaceBefore || pDefaultSpacing?.['w:before'];
   if (beforeSpacing) spacing.lineSpaceBefore = twipsToPixels(beforeSpacing);
+  
+  const beforeAutospacing = inLineSpacing?.['w:beforeAutospacing'];
+  if (beforeAutospacing === '1' && fontSize) {
+    spacing.lineSpaceBefore += Math.round((parseInt(fontSize) * 0.5) * 96 / 72);
+  }
 
   const afterSpacing = inLineSpacing?.['w:after'] || lineSpaceAfter || pDefaultSpacing?.['w:after'];
   if (afterSpacing) spacing.lineSpaceAfter = twipsToPixels(afterSpacing);
 
+  const afterAutospacing = inLineSpacing?.['w:afterAutospacing'];
+  if (afterAutospacing === '1' && fontSize) {
+    spacing.lineSpaceAfter += Math.round((parseInt(fontSize) * 0.5) * 96 / 72);
+  }
+
   const lineRule = inLineSpacing?.['w:lineRule'] || lineRuleStyle || pDefaultSpacing?.['w:lineRule'];
   if (lineRule) spacing.lineRule = lineRule;
 
   return spacing;
 };
 
-const getDefaultParagraphStyle = (docx) => {
+const getDefaultParagraphStyle = (docx, styleId = '') => {
   const styles = docx['word/styles.xml'];
   if (!styles) {
     return {};
@@ -136,10 +166,26 @@ const getDefaultParagraphStyle = (docx) => {
   const pDefault = defaults.elements.find((el) => el.name === 'w:pPrDefault');
   const pPrDefault = pDefault?.elements?.find((el) => el.name === 'w:pPr');
   const pPrDefaultSpacingTag = pPrDefault?.elements?.find((el) => el.name === 'w:spacing') || {};
+  
+  // Paragraph 'Normal' styles
+  const stylesNormal = styles.elements[0].elements?.find((el) => el.name === 'w:style' && el.attributes['w:styleId'] === 'Normal');
+  const pPrNormal = stylesNormal?.elements?.find((el) => el.name === 'w:pPr');
+  const pPrNormalSpacingTag = pPrNormal?.elements?.find((el) => el.name === 'w:spacing') || {};
+  
+  // Styles based on styleId
+  let pPrStyleIdSpacingTag = {};
+  if (styleId) {
+    const stylesById = styles.elements[0].elements?.find((el) => el.name === 'w:style' && el.attributes['w:styleId'] === styleId);
+    const pPrById = stylesById?.elements?.find((el) => el.name === 'w:pPr');
+    pPrStyleIdSpacingTag = pPrById?.elements?.find((el) => el.name === 'w:spacing') || {};
+  }
+  
   const { attributes: pPrDefaultSpacingAttr } = pPrDefaultSpacingTag;
+  const { attributes: pPrNormalSpacingAttr } = pPrNormalSpacingTag;
+  const { attributes: pPrByIdSpacingAttr } = pPrStyleIdSpacingTag;
 
   return {
-    spacing: pPrDefaultSpacingAttr,
+    spacing: pPrByIdSpacingAttr || pPrDefaultSpacingAttr || pPrNormalSpacingAttr,
   }
 };
 
@@ -323,6 +369,6 @@ export function preProcessNodesForFldChar(nodes) {
       });
     }
   });
-
+  
   return processedNodes;
 }

packages/super-editor/src/extensions/linked-styles/linked-styles.js

@@ -196,6 +196,31 @@ export const getSpacingStyleString = (spacing) => {
   `.trim();
 };
 
+export const getMarksStyle = (attrs) => {
+  let styles = '';
+  for (const attr of attrs) {
+    switch (attr.type) {
+      case 'bold': 
+        styles += `font-weight: bold; `;
+        break;
+      case 'italic':
+        styles += `font-style: italic; `;
+        break;
+      case 'underline':
+        styles += `text-decoration: underline; `;
+        break;
+      case 'highlight':
+        styles += `background-color: ${attr.attrs.color}; `;
+        break;
+      case 'textStyle':
+        const { fontFamily, fontSize } = attr.attrs;
+        styles += `${fontFamily ? `font-family: ${fontFamily};` : ''} ${fontSize ? `font-size: ${fontSize};` : ''}`;
+    }
+  }
+  
+  return styles.trim();
+}
+
 export const getQuickFormatList = (editor) => {
   if (!editor?.converter) return [];
   const styles = editor.converter.linkedStyles || [];
@@ -206,4 +231,4 @@ export const getQuickFormatList = (editor) => {
     .sort((a, b) => {
       return a.definition.attrs?.name.localeCompare(b.definition.attrs?.name);
     });
-};
+};