HAR-9459 Fonts formatting: Dropcaps

packages/super-editor/src/assets/styles/elements/prosemirror.css

@@ -303,3 +303,10 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
 }
+
+.super-doc-dropcap {
+  float: left;
+  display: flex;
+  align-items: baseline;
+  margin-top: -5px;
+}

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

@@ -172,7 +172,7 @@ function generateParagraphProperties(node) {
   const { styleId } = attrs;
   if (styleId) pPrElements.push({ name: 'w:pStyle', attributes: { 'w:val': styleId } });
 
-  const { spacing, indent, textAlign, textIndent, lineHeight, marksAttrs, keepLines, keepNext } = attrs;
+  const { spacing, indent, textAlign, textIndent, lineHeight, marksAttrs, keepLines, keepNext, dropcap } = attrs;
   if (spacing) {
     const { lineSpaceBefore, lineSpaceAfter, line, lineRule } = spacing;
 
@@ -262,6 +262,19 @@ function generateParagraphProperties(node) {
     });
   }
 
+  if (dropcap) {
+    pPrElements.push({
+      name: 'w:framePr',
+      attributes: { 
+        'w:dropCap': dropcap.type,
+        'w:lines': dropcap.lines,
+        'w:wrap': dropcap.wrap,
+        'w:vAnchor': dropcap.vAnchor,
+        'w:hAnchor': dropcap.hAnchor,
+      },
+    });
+  }
+
   if (!pPrElements.length) return null;
 
   return {

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

@@ -51,6 +51,7 @@ 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');
+  const framePr = pPr?.elements?.find((el) => el.name === 'w:framePr');
 
   if (nestedRPr) {
     schemaNode.attrs.marksAttrs = parseMarks(nestedRPr, []);
@@ -67,13 +68,13 @@ export const handleParagraphNode = (params) => {
       schemaNode.attrs.indent = {};
     }
 
-    if (indent.left) {
+    if (indent.left || indent.left === 0) {
       schemaNode.attrs.indent.left = indent.left;
     }
-    if (indent.right) {
+    if (indent.right || indent.right === 0) {
       schemaNode.attrs.indent.right = indent.right;
     }
-    if (indent.firstLine) {
+    if (indent.firstLine || indent.firstLine === 0) {
       schemaNode.attrs.indent.firstLine = indent.firstLine;
     }
     if (indent.hanging) {
@@ -104,6 +105,16 @@ export const handleParagraphNode = (params) => {
     schemaNode.attrs['spacing'] = getParagraphSpacing(node, docx, schemaNode.attrs['styleId'], schemaNode.attrs.marksAttrs);
     schemaNode.attrs['rsidRDefault'] = defaultStyleId;
   }
+
+  if (framePr && framePr.attributes['w:dropCap']) {
+    schemaNode.attrs.dropcap = {
+      type: framePr.attributes['w:dropCap'],
+      lines: framePr.attributes['w:lines'],
+      wrap: framePr.attributes['w:wrap'],
+      hAnchor: framePr.attributes['w:hAnchor'],
+      vAnchor: framePr.attributes['w:vAnchor'],
+    }
+  }
 
   schemaNode.attrs['filename'] = filename;
 
@@ -322,13 +333,13 @@ export function getDefaultStyleDefinition(defaultStyleId, docx) {
   if (pageBreakBefore) {
      if (!pageBreakBefore.attributes?.['w:val']) pageBreakBeforeVal = 1;
      else pageBreakBeforeVal = Number(pageBreakBefore?.attributes?.['w:val'])
-  };
+  }
   const pageBreakAfter = pPr?.elements?.find((el) => el.name === 'w:pageBreakAfter');
   let pageBreakAfterVal;
   if (pageBreakAfter) {
     if (!pageBreakAfter.attributes?.['w:val']) pageBreakAfterVal = 1;
     else pageBreakAfterVal = Number(pageBreakAfter?.attributes?.['w:val'])
- };
+ }
 
   const parsedAttrs = {
     name,
@@ -356,7 +367,7 @@ export function getDefaultStyleDefinition(defaultStyleId, docx) {
         parsedStyles[kebabCase(key)] = value
       });
       return;
-    };
+    }
 
     parsedStyles[type] = attrs;
   });
@@ -414,7 +425,7 @@ export function preProcessNodesForFldChar(nodes) {
   });
 
   return processedNodes;
-};
+}
 
 
 /**

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

@@ -189,10 +189,11 @@ export const getSpacingStyle = (spacing) => {
  * @returns {String} The style string
  */
 export const getSpacingStyleString = (spacing) => {
-  const { lineSpaceBefore, lineSpaceAfter } = spacing;
+  const { lineSpaceBefore, lineSpaceAfter, line } = spacing;
   return `
     ${lineSpaceBefore ? `margin-top: ${lineSpaceBefore}px;` : ''}
     ${lineSpaceAfter ? `margin-bottom: ${lineSpaceAfter}px;` : ''}
+    ${line ? getLineHeightValueString(line, '') : ''}
   `.trim();
 };
 

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

@@ -1,3 +1,5 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
 import { Node, Attribute, Schema } from '@core/index.js';
 import { getSpacingStyleString, getMarksStyle } from '@extensions/linked-styles/index.js';
 
@@ -68,6 +70,14 @@ export const Paragraph = Node.create({
           return { style };
         },
       },
+      class: {
+        renderDOM: (attributes) => {
+          if (attributes.dropcap) {
+            return { class: `super-doc-dropcap`};
+          }
+          return null;
+        }
+      },
       styleId: { rendered: false },
       attributes: {
         rendered: false,
@@ -77,6 +87,7 @@ export const Paragraph = Node.create({
       keepLines: { rendered: false },
       keepNext: { rendered: false },
       paragraphProperties: { rendered: false },
+      dropcap: { rendered: false },
     };
   },
 
@@ -96,4 +107,54 @@ export const Paragraph = Node.create({
   renderDOM({ htmlAttributes }) {
     return ['p', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
   },
+
+  addPmPlugins() {
+    const { view } = this.editor;
+    const dropcapPlugin = new Plugin({
+      name: 'dropcapPlugin',
+      key: new PluginKey('dropcapPlugin'),
+      state: {
+        init(_, state) {
+          let decorations = getDropcapDecorations(state, view);
+          return DecorationSet.create(state.doc, decorations);
+        },
+
+        apply(tr, oldDecorationSet, oldState, newState) {
+          const decorations = getDropcapDecorations(newState, view);
+          return DecorationSet.create(newState.doc, decorations);
+        },
+      },
+      props: {
+        decorations(state) {
+          return this.getState(state);
+        },
+      },
+    });
+
+    return [dropcapPlugin];
+  }
 });
+
+const getDropcapDecorations = (state, view) => {
+  let decorations = [];
+  state.doc.descendants((node, pos) => {
+    if (node.attrs.dropcap?.type === 'margin') {
+      const width = getDropcapWidth(view, pos);
+
+      decorations.push(
+        Decoration.node(pos, pos + node.nodeSize, { style: `margin-left: -${width}px;` }),
+      );
+    }
+  });
+  return decorations;
+};
+
+function getDropcapWidth(view, pos) {
+  const domNode = view.nodeDOM(pos);
+  if (domNode) {
+    const range = document.createRange();
+    range.selectNodeContents(domNode);
+    return range.getBoundingClientRect().width;
+  }
+  return 0;
+}

packages/super-editor/src/tests/import/paragraphNodeImporter.test.js

@@ -274,3 +274,25 @@ describe('paragraph tests to check indentation', () => {
     expect(indent.firstLine).toBe(29);
   });
 });
+
+describe('paragraph with dropcaps', () => {
+
+  it('correctly gets dropcaps data', async () => {
+    const dataName = 'dropcaps.docx';
+    const docx = await getTestDataByFileName(dataName);
+    const documentXml = docx['word/document.xml'];
+
+    const doc = documentXml.elements[0];
+    const body = doc.elements[0];
+    const content = body.elements;
+
+    const { nodes } = handleParagraphNode({ nodes: [content[1]], docx, nodeListHandler: defaultNodeListHandler() });
+
+    const node = nodes[0];
+    expect(node.type).toBe('paragraph');
+
+    const { attrs } = node;
+    const { dropcap } = attrs;
+    expect(dropcap.type).toBe('drop');
+  });
+});