@squiz/formatted-text-editor 1.66.4 → 1.67.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 1.67.1
+
+### Patch Changes
+
+- 928cc88: Made children optional for formatted text nodes/tags
+- Updated dependencies [928cc88]
+  - @squiz/dx-json-schema-lib@1.65.1
+
+## 1.67.0
+
+### Minor Changes
+
+- 6867717: Changed output of FTE to use semantic HTML where applicable
+
 ## 1.66.4
 
 ### Patch Changes

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -48,12 +48,6 @@ const resolveFontOptions = (node) => {
     const fontOptions = {};
     node.marks.forEach((mark) => {
         switch (mark.type.name) {
-            case 'bold':
-                fontOptions.bold = true;
-                break;
-            case 'italic':
-                fontOptions.italics = true;
-                break;
             case 'underline':
                 fontOptions.underline = true;
                 break;
@@ -109,14 +103,7 @@ const transformNode = (node) => {
         };
     }
     node.marks.forEach((mark) => {
-        switch (mark.type.name) {
-            case 'bold':
-            case 'italic':
-            case 'underline':
-                break;
-            default:
-                transformedNode = transformMark(mark, transformedNode);
-        }
+        transformedNode = transformMark(mark, transformedNode);
     });
     if (node.type.name === Extensions_1.NodeName.Unsupported) {
         const unsupportedNode = node.attrs?.originalNode;
@@ -133,8 +120,10 @@ const transformNode = (node) => {
  *
  * @return {FormattedNode}
  */
-const wrapNodeIfNeeded = (node, wrappingNode) => {
+const wrapNodeIfNeeded = (node, wrappingNode, copyFont = true) => {
+    const wrappingNodeChildren = wrappingNode.children || [];
     if (node.type === 'tag' && wrappingNode.type === 'tag' && (node.tag === 'span' || node.tag === wrappingNode.tag)) {
+        const nodeChildren = node.children || [];
         // if the node we are wrapping with is a DOM node, and the node being wrapped is
         // a plain looking DOM node merge the 2 nodes.
         return {
@@ -148,28 +137,51 @@ const wrapNodeIfNeeded = (node, wrappingNode) => {
                 ...node.attributes,
                 ...wrappingNode.attributes,
             }),
-            font: (0, undefinedIfEmpty_1.undefinedIfEmpty)({
-                ...node.font,
-                ...wrappingNode.font,
-            }),
-            children: [...node.children, ...wrappingNode.children],
+            font: (0, undefinedIfEmpty_1.undefinedIfEmpty)(copyFont
+                ? {
+                    ...node.font,
+                    ...wrappingNode.font,
+                }
+                : {}),
+            children: [...nodeChildren, ...wrappingNodeChildren],
         };
     }
     // if the node we are wrapping or the wrapping nodes are not compatible merge them.
     return {
         ...wrappingNode,
-        children: [node, ...wrappingNode.children],
+        children: [node, ...wrappingNodeChildren],
     };
 };
 const transformMark = (mark, node) => {
     switch (mark.type.name) {
+        case 'bold':
+            return wrapNodeIfNeeded(node, {
+                type: 'tag',
+                tag: 'strong',
+                children: [],
+            }, false);
+        case 'italic':
+            return wrapNodeIfNeeded(node, {
+                type: 'tag',
+                tag: 'em',
+                children: [],
+            }, false);
+        case 'underline':
+            return wrapNodeIfNeeded(node, {
+                type: 'tag',
+                tag: 'span',
+                children: [],
+                font: {
+                    underline: mark.type.name === 'underline',
+                },
+            });
         case 'link':
             return wrapNodeIfNeeded(node, {
                 type: 'tag',
                 tag: 'a',
                 attributes: transformAttributes(mark.attrs),
                 children: [],
-            });
+            }, false);
         case 'assetLink':
             return wrapNodeIfNeeded(node, {
                 type: 'link-to-matrix-asset',

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -24,7 +24,9 @@ const getNodeType = (node) => {
         ul: 'bulletList',
         hr: 'horizontalRule',
         a: Extensions_1.NodeName.Text,
+        em: Extensions_1.NodeName.Text,
         span: Extensions_1.NodeName.Text,
+        strong: Extensions_1.NodeName.Text,
         code: Extensions_1.NodeName.CodeBlock,
     };
     if (typeMap[node.type]) {
@@ -96,6 +98,12 @@ const getNodeMarks = (node) => {
             },
         });
     }
+    else if (node.type === 'tag' && node.tag === 'strong') {
+        marks.push({ type: 'bold' });
+    }
+    else if (node.type === 'tag' && node.tag === 'em') {
+        marks.push({ type: 'italic' });
+    }
     // Handle font formatting
     if ('font' in node && node.font !== undefined) {
         for (const [type, enabled] of Object.entries(node.font)) {
@@ -125,7 +133,7 @@ const unwrapNodeIfNeeded = (node) => {
 const formatNode = (node) => {
     const children = [];
     if ('children' in node) {
-        node.children.forEach((child) => {
+        node.children?.forEach((child) => {
             children.push(...formatNode(child));
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.66.4",
+  "version": "1.67.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -23,7 +23,7 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "^1.65.0",
+    "@squiz/dx-json-schema-lib": "^1.65.1",
     "@squiz/resource-browser": "^1.66.3",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",

package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.spec.ts

@@ -74,16 +74,13 @@ describe('htmlToSquizNode', () => {
           children: [
             {
               type: 'tag',
-              tag: 'span',
+              tag: 'em',
               children: [
                 {
                   type: 'text',
                   value: 'Italicised text',
                 },
               ],
-              font: {
-                italics: true,
-              },
             },
             {
               type: 'text',
@@ -91,16 +88,13 @@ describe('htmlToSquizNode', () => {
             },
             {
               type: 'tag',
-              tag: 'span',
+              tag: 'strong',
               children: [
                 {
                   type: 'text',
                   value: 'Bold text',
                 },
               ],
-              font: {
-                bold: true,
-              },
             },
           ],
           tag: 'p',

package/src/utils/converters/mocks/squizNodeJson.mock.ts

@@ -116,7 +116,6 @@ export const sharedNodeExamples: NodeExample[] = [
       type: 'text',
       text: 'Hello',
       marks: [
-        { type: 'bold' },
         {
           type: 'assetLink',
           attrs: {
@@ -126,20 +125,20 @@ export const sharedNodeExamples: NodeExample[] = [
             matrixIdentifier: 'matrix-api-identifier',
           },
         },
+        { type: 'bold' },
       ],
     },
     squizNode: [
       {
-        type: 'link-to-matrix-asset',
-        target: '_blank',
-        matrixAssetId: '123',
-        matrixDomain: 'https://my-matrix.squiz.net',
-        matrixIdentifier: 'matrix-api-identifier',
+        type: 'tag',
+        tag: 'strong',
         children: [
           {
-            type: 'tag',
-            tag: 'span',
-            font: { bold: true },
+            type: 'link-to-matrix-asset',
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
             children: [{ type: 'text', value: 'Hello' }],
           },
         ],

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts

@@ -329,10 +329,7 @@ describe('remirrorNodeToSquizNode', () => {
                 value: ' click',
               },
             ],
-            font: {
-              bold: true,
-            },
-            tag: 'span',
+            tag: 'strong',
             type: 'tag',
           },
           {
@@ -342,18 +339,22 @@ describe('remirrorNodeToSquizNode', () => {
           {
             children: [
               {
-                type: 'text',
-                value: 'here',
+                type: 'tag',
+                tag: 'a',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'here',
+                  },
+                ],
+                attributes: {
+                  href: 'https://www.google.com/',
+                  title: '',
+                },
               },
             ],
-            attributes: {
-              href: 'https://www.google.com/',
-              title: '',
-            },
-            font: {
-              italics: true,
-            },
-            tag: 'a',
+
+            tag: 'em',
             type: 'tag',
           },
           {
@@ -363,10 +364,7 @@ describe('remirrorNodeToSquizNode', () => {
                 value: ' ',
               },
             ],
-            font: {
-              italics: true,
-            },
-            tag: 'span',
+            tag: 'em',
             type: 'tag',
           },
           {
@@ -376,13 +374,23 @@ describe('remirrorNodeToSquizNode', () => {
           {
             children: [
               {
-                type: 'text',
-                value: ' GOOGLE!',
+                type: 'tag',
+                tag: 'em',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'strong',
+                    children: [
+                      {
+                        type: 'text',
+                        value: ' GOOGLE!',
+                      },
+                    ],
+                  },
+                ],
               },
             ],
             font: {
-              bold: true,
-              italics: true,
               underline: true,
             },
             tag: 'span',

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts

@@ -13,7 +13,7 @@ type FontOptions = FormattedTextModels.v1.FormattedNodeFontProperties;
 type FormattedText = FormattedTextModels.v1.FormattedText;
 type FormattedNode = FormattedTextModels.v1.FormattedNodes;
 type FormattedNodeFontProperties = FormattedTextModels.v1.FormattedNodeFontProperties;
-type FormattedNodeWithChildren = Extract<FormattedNode, { children: FormattedNode[] }>;
+type FormattedNodeWithChildren = Extract<FormattedNode, { children?: FormattedNode[] }>;
 type RemirrorTextAlignment = Exclude<Remirror.Attributes['nodeTextAlignment'], undefined>;
 type FormattedTextAlignment = FormattingOptions['alignment'];
 
@@ -71,12 +71,6 @@ const resolveFontOptions = (node: ProsemirrorNode): FormattedNodeFontProperties
 
   node.marks.forEach((mark) => {
     switch (mark.type.name) {
-      case 'bold':
-        fontOptions.bold = true;
-        break;
-      case 'italic':
-        fontOptions.italics = true;
-        break;
       case 'underline':
         fontOptions.underline = true;
         break;
@@ -145,14 +139,7 @@ const transformNode = (node: ProsemirrorNode): FormattedNode => {
   }
 
   node.marks.forEach((mark) => {
-    switch (mark.type.name) {
-      case 'bold':
-      case 'italic':
-      case 'underline':
-        break;
-      default:
-        transformedNode = transformMark(mark, transformedNode);
-    }
+    transformedNode = transformMark(mark, transformedNode);
   });
 
   if (node.type.name === NodeName.Unsupported) {
@@ -172,8 +159,16 @@ const transformNode = (node: ProsemirrorNode): FormattedNode => {
  *
  * @return {FormattedNode}
  */
-const wrapNodeIfNeeded = (node: FormattedNode, wrappingNode: FormattedNodeWithChildren): FormattedNode => {
+const wrapNodeIfNeeded = (
+  node: FormattedNode,
+  wrappingNode: FormattedNodeWithChildren,
+  copyFont: boolean = true,
+): FormattedNode => {
+  const wrappingNodeChildren = wrappingNode.children || [];
+
   if (node.type === 'tag' && wrappingNode.type === 'tag' && (node.tag === 'span' || node.tag === wrappingNode.tag)) {
+    const nodeChildren = node.children || [];
+
     // if the node we are wrapping with is a DOM node, and the node being wrapped is
     // a plain looking DOM node merge the 2 nodes.
     return {
@@ -187,30 +182,67 @@ const wrapNodeIfNeeded = (node: FormattedNode, wrappingNode: FormattedNodeWithCh
         ...node.attributes,
         ...wrappingNode.attributes,
       }),
-      font: undefinedIfEmpty({
-        ...node.font,
-        ...wrappingNode.font,
-      }),
-      children: [...node.children, ...wrappingNode.children],
+      font: undefinedIfEmpty(
+        copyFont
+          ? {
+              ...node.font,
+              ...wrappingNode.font,
+            }
+          : {},
+      ),
+      children: [...nodeChildren, ...wrappingNodeChildren],
     };
   }
 
   // if the node we are wrapping or the wrapping nodes are not compatible merge them.
   return {
     ...wrappingNode,
-    children: [node, ...wrappingNode.children],
+    children: [node, ...wrappingNodeChildren],
   };
 };
 
 const transformMark = (mark: Mark, node: FormattedNode): FormattedNode => {
   switch (mark.type.name) {
-    case 'link':
+    case 'bold':
+      return wrapNodeIfNeeded(
+        node,
+        {
+          type: 'tag',
+          tag: 'strong',
+          children: [],
+        },
+        false,
+      );
+    case 'italic':
+      return wrapNodeIfNeeded(
+        node,
+        {
+          type: 'tag',
+          tag: 'em',
+          children: [],
+        },
+        false,
+      );
+    case 'underline':
       return wrapNodeIfNeeded(node, {
         type: 'tag',
-        tag: 'a',
-        attributes: transformAttributes(mark.attrs),
+        tag: 'span',
         children: [],
+        font: {
+          underline: mark.type.name === 'underline',
+        },
       });
+    case 'link':
+      return wrapNodeIfNeeded(
+        node,
+        {
+          type: 'tag',
+          tag: 'a',
+          attributes: transformAttributes(mark.attrs),
+          children: [],
+        },
+        false,
+      );
     case 'assetLink':
       return wrapNodeIfNeeded(node, {
         type: 'link-to-matrix-asset',

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts

@@ -29,7 +29,9 @@ const getNodeType = (node: FormattedNodes): string => {
     ul: 'bulletList',
     hr: 'horizontalRule',
     a: NodeName.Text,
+    em: NodeName.Text,
     span: NodeName.Text,
+    strong: NodeName.Text,
     code: NodeName.CodeBlock,
   };
 
@@ -105,6 +107,10 @@ const getNodeMarks = (node: FormattedNodes): ObjectMark[] => {
         target: node.target,
       },
     });
+  } else if (node.type === 'tag' && node.tag === 'strong') {
+    marks.push({ type: 'bold' });
+  } else if (node.type === 'tag' && node.tag === 'em') {
+    marks.push({ type: 'italic' });
   }
 
   // Handle font formatting
@@ -140,7 +146,7 @@ const formatNode = (node: FormattedNodes): RemirrorJSON[] => {
   const children: RemirrorJSON[] = [];
 
   if ('children' in node) {
-    node.children.forEach((child: FormattedNodes) => {
+    node.children?.forEach((child: FormattedNodes) => {
       children.push(...formatNode(child));
     });
   }