@crystallize/design-system 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @crystallize/design-system
 
+## 1.10.0
+
+### Minor Changes
+
+- 99dbdae: Added support for multiple inline text formats on the same text. This will give you the following model back for a string that is both `strong` and `emphasized`:
+
+  ```json
+  {
+    "kind": "inline",
+    "type": "strong",
+    "children": [
+      {
+        "kind": "inline",
+        "type": "emphasized",
+        "textContent": "Hello there!"
+      }
+    ]
+  }
+  ```
+
 ## 1.9.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -372,11 +372,11 @@ type CrystallizeRichTextHorizontalLineNode = {
 };
 type CrystallizeRichTextGenericNode = {
     kind: 'block' | 'inline';
-    type?: null | 'abbrevition' | 'address' | 'article' | 'aside' | 'container' | 'details' | 'emphasized' | 'figcaption' | 'figure' | 'highlight' | 'image' | 'line-break' | 'unordered-list' | 'ordered-list' | 'list-item' | 'picture' | 'preformatted' | 'quote' | 'section' | 'time' | 'title-of-a-work';
+    type?: null | 'abbrevition' | 'address' | 'article' | 'aside' | 'container' | 'details' | 'figcaption' | 'figure' | 'image' | 'line-break' | 'unordered-list' | 'ordered-list' | 'list-item' | 'picture' | 'preformatted' | 'quote' | 'section' | 'time' | 'title-of-a-work';
 };
 type CrystallizeRichTextInlineFormattedNodes = {
     kind: 'inline';
-    type: 'deleted' | 'strong' | 'subscripted' | 'superscripted' | 'underlined';
+    type: 'deleted' | 'strong' | 'subscripted' | 'superscripted' | 'underlined' | 'emphasized' | 'code' | 'highlight';
 };
 type CrystallizeRichTextNode = CrystallizeRichTextNodeBase & (CrystallizeRichTextParagraphNode | CrystallizeRichTextHeadingNodes | CrystallizeRichTextCodeNodes | CrystallizeRichTextGenericNode | CrystallizeRichTextLinkNode | CrystallizeRichTextTableNodes | CrystallizeRichTextHorizontalLineNode | CrystallizeRichTextInlineFormattedNodes);
 

package/dist/index.js

@@ -3761,7 +3761,25 @@ function composeInitialState({ richText }) {
       }
       if (lexicalNode) {
         if (Array.isArray(children)) {
-          children.forEach((n) => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode }));
+          if ((0, import_lexical.$isTextNode)(lexicalNode)) {
+            const handleInlineTextChild = (child) => {
+              if ((0, import_lexical.$isTextNode)(lexicalNode)) {
+                const textFormat = getLexicalTextFormat(child);
+                if (textFormat && !lexicalNode.hasFormat(textFormat)) {
+                  lexicalNode.toggleFormat(textFormat);
+                }
+                if (child.textContent) {
+                  lexicalNode.setTextContent(child.textContent);
+                }
+              }
+              if ("children" in child) {
+                child.children?.forEach(handleInlineTextChild);
+              }
+            };
+            children.forEach(handleInlineTextChild);
+          } else {
+            children.forEach((n) => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode }));
+          }
         }
         lexicalParent.append(lexicalNode);
       }
@@ -3928,10 +3946,8 @@ function lexicalToCrystallizeRichText({
                   kind: "block",
                   type: "horizontal-line"
                 });
-              } else {
-                if ((0, import_lexical2.$isTextNode)(childNode)) {
-                  parentChildrenToUse.push(getTextChild(childNode));
-                }
+              } else if ((0, import_lexical2.$isTextNode)(childNode)) {
+                parentChildrenToUse.push(getTextChild(childNode));
               }
             });
           }
@@ -3941,32 +3957,47 @@ function lexicalToCrystallizeRichText({
   });
   return crystallizeRichText;
 }
+var lexicalFormatToCrystallizeType = {
+  bold: "strong",
+  italic: "emphasized",
+  underline: "underlined",
+  strikethrough: "deleted",
+  subscript: "subscripted",
+  superscript: "superscripted",
+  highlight: "emphasized",
+  code: "code"
+};
 function getTextChild(n) {
-  const textContent = n.getTextContent();
-  if (n.hasFormat("code")) {
-    return {
-      type: "code",
-      kind: "inline",
-      textContent
-    };
-  }
-  const textChild = {
-    kind: "inline",
-    textContent
+  let currentChild = {
+    kind: "inline"
   };
-  if (n.hasFormat("bold")) {
-    textChild.type = "strong";
-  } else if (n.hasFormat("italic")) {
-    textChild.type = "emphasized";
-  } else if (n.hasFormat("underline")) {
-    textChild.type = "underlined";
-  } else if (n.hasFormat("strikethrough")) {
-    textChild.type = "deleted";
-  } else if (n.hasFormat("subscript")) {
-    textChild.type = "subscripted";
-  } else if (n.hasFormat("superscript")) {
-    textChild.type = "superscripted";
+  let textChild = null;
+  function checkFormat(format) {
+    const type = lexicalFormatToCrystallizeType[format];
+    if (n.hasFormat(format) && type) {
+      if (!textChild) {
+        currentChild = textChild = {
+          kind: "inline",
+          type
+        };
+      } else {
+        currentChild.children = [
+          {
+            kind: "inline",
+            type
+          }
+        ];
+        currentChild = currentChild.children[0];
+      }
+    }
+  }
+  Object.keys(lexicalFormatToCrystallizeType).forEach(checkFormat);
+  if (!textChild) {
+    currentChild = textChild = {
+      kind: "inline"
+    };
   }
+  currentChild.textContent = n.getTextContent();
   return textChild;
 }
 

package/dist/index.mjs

@@ -3576,7 +3576,8 @@ import {
   $createLineBreakNode,
   $createParagraphNode,
   $createTextNode,
-  $getRoot
+  $getRoot,
+  $isTextNode
 } from "lexical";
 import { $createCodeHighlightNode, $createCodeNode } from "@lexical/code";
 import { $createLinkNode } from "@lexical/link";
@@ -3706,7 +3707,25 @@ function composeInitialState({ richText }) {
       }
       if (lexicalNode) {
         if (Array.isArray(children)) {
-          children.forEach((n) => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode }));
+          if ($isTextNode(lexicalNode)) {
+            const handleInlineTextChild = (child) => {
+              if ($isTextNode(lexicalNode)) {
+                const textFormat = getLexicalTextFormat(child);
+                if (textFormat && !lexicalNode.hasFormat(textFormat)) {
+                  lexicalNode.toggleFormat(textFormat);
+                }
+                if (child.textContent) {
+                  lexicalNode.setTextContent(child.textContent);
+                }
+              }
+              if ("children" in child) {
+                child.children?.forEach(handleInlineTextChild);
+              }
+            };
+            children.forEach(handleInlineTextChild);
+          } else {
+            children.forEach((n) => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode }));
+          }
         }
         lexicalParent.append(lexicalNode);
       }
@@ -3744,7 +3763,7 @@ import {
   $isElementNode,
   $isLineBreakNode,
   $isParagraphNode,
-  $isTextNode
+  $isTextNode as $isTextNode2
 } from "lexical";
 import { $isCodeNode } from "@lexical/code";
 import { $isLinkNode } from "@lexical/link";
@@ -3857,7 +3876,7 @@ function lexicalToCrystallizeRichText({
           if (crystallizeNode) {
             if (children.length === 1 && parent) {
               const [first] = children;
-              if ($isTextNode(first)) {
+              if ($isTextNode2(first)) {
                 const childTextNode = getTextChild(first);
                 if (!childTextNode.type) {
                   crystallizeNode.textContent = childTextNode.textContent;
@@ -3879,10 +3898,8 @@ function lexicalToCrystallizeRichText({
                   kind: "block",
                   type: "horizontal-line"
                 });
-              } else {
-                if ($isTextNode(childNode)) {
-                  parentChildrenToUse.push(getTextChild(childNode));
-                }
+              } else if ($isTextNode2(childNode)) {
+                parentChildrenToUse.push(getTextChild(childNode));
               }
             });
           }
@@ -3892,32 +3909,47 @@ function lexicalToCrystallizeRichText({
   });
   return crystallizeRichText;
 }
+var lexicalFormatToCrystallizeType = {
+  bold: "strong",
+  italic: "emphasized",
+  underline: "underlined",
+  strikethrough: "deleted",
+  subscript: "subscripted",
+  superscript: "superscripted",
+  highlight: "emphasized",
+  code: "code"
+};
 function getTextChild(n) {
-  const textContent = n.getTextContent();
-  if (n.hasFormat("code")) {
-    return {
-      type: "code",
-      kind: "inline",
-      textContent
-    };
-  }
-  const textChild = {
-    kind: "inline",
-    textContent
+  let currentChild = {
+    kind: "inline"
   };
-  if (n.hasFormat("bold")) {
-    textChild.type = "strong";
-  } else if (n.hasFormat("italic")) {
-    textChild.type = "emphasized";
-  } else if (n.hasFormat("underline")) {
-    textChild.type = "underlined";
-  } else if (n.hasFormat("strikethrough")) {
-    textChild.type = "deleted";
-  } else if (n.hasFormat("subscript")) {
-    textChild.type = "subscripted";
-  } else if (n.hasFormat("superscript")) {
-    textChild.type = "superscripted";
+  let textChild = null;
+  function checkFormat(format) {
+    const type = lexicalFormatToCrystallizeType[format];
+    if (n.hasFormat(format) && type) {
+      if (!textChild) {
+        currentChild = textChild = {
+          kind: "inline",
+          type
+        };
+      } else {
+        currentChild.children = [
+          {
+            kind: "inline",
+            type
+          }
+        ];
+        currentChild = currentChild.children[0];
+      }
+    }
+  }
+  Object.keys(lexicalFormatToCrystallizeType).forEach(checkFormat);
+  if (!textChild) {
+    currentChild = textChild = {
+      kind: "inline"
+    };
   }
+  currentChild.textContent = n.getTextContent();
   return textChild;
 }
 
@@ -4300,7 +4332,7 @@ import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 
 // src/rich-text-editor/ui/LinkPreview.tsx
 import { Suspense, useEffect as useEffect3, useState as useState4 } from "react";
-import { $getSelection as $getSelection2, $isTextNode as $isTextNode2 } from "lexical";
+import { $getSelection as $getSelection2, $isTextNode as $isTextNode3 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
 import { Fragment as Fragment3, jsx as jsx81, jsxs as jsxs60 } from "react/jsx-runtime";
 var PREVIEW_CACHE = {};
@@ -4336,7 +4368,7 @@ function LinkPreviewContent({
       const nodes = sel?.getNodes();
       if (hasPreview && nodes?.length === 1) {
         const [firstNode] = nodes;
-        if ($isTextNode2(firstNode)) {
+        if ($isTextNode3(firstNode)) {
           setTextContent(firstNode.getTextContent());
         }
       }
@@ -4348,7 +4380,7 @@ function LinkPreviewContent({
       const nodes = sel?.getNodes();
       if (hasPreview && nodes?.length === 1) {
         const [firstNode] = nodes;
-        if ($isTextNode2(firstNode)) {
+        if ($isTextNode3(firstNode)) {
           firstNode.setTextContent(preview.google.title);
           setTextContent(preview.google.title);
         }
@@ -4754,7 +4786,7 @@ import "react";
 import {
   $getSelection as $getSelection4,
   $isRangeSelection as $isRangeSelection2,
-  $isTextNode as $isTextNode3,
+  $isTextNode as $isTextNode4,
   COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW2,
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
@@ -4996,7 +5028,7 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
         setIsLink(false);
       }
       if (!$isCodeHighlightNode(selection.anchor.getNode()) && selection.getTextContent() !== "") {
-        setIsText($isTextNode3(node));
+        setIsText($isTextNode4(node));
       } else {
         setIsText(false);
       }
@@ -5584,7 +5616,7 @@ import {
   $getSelection as $getSelection9,
   $isRangeSelection as $isRangeSelection7,
   $isRootOrShadowRoot,
-  $isTextNode as $isTextNode4,
+  $isTextNode as $isTextNode5,
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
   COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL3,
@@ -6073,7 +6105,7 @@ function ToolbarPlugin({
       if ($isRangeSelection7(selection)) {
         $selectAll(selection);
         selection.getNodes().forEach((node) => {
-          if ($isTextNode4(node)) {
+          if ($isTextNode5(node)) {
             node.setFormat(0);
             node.setStyle("");
             $getNearestBlockElementAncestorOrThrow(node).setFormat("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/rich-text-editor/model/crystallize-to-lexical.ts

@@ -3,6 +3,7 @@ import {
   $createParagraphNode,
   $createTextNode,
   $getRoot,
+  $isTextNode,
   LexicalNode,
   TextFormatType,
 } from 'lexical';
@@ -161,7 +162,34 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
 
       if (lexicalNode) {
         if (Array.isArray(children)) {
-          children.forEach(n => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode as LexicalNode }));
+          /**
+           * Support multiple nested inline text formats. A text can have both
+           * a strong _and_ underlined (and more) formats applied.
+           */
+          if ($isTextNode(lexicalNode)) {
+            const handleInlineTextChild = (child: CrystallizeRichTextNode) => {
+              if ($isTextNode(lexicalNode)) {
+                const textFormat = getLexicalTextFormat(child);
+
+                if (textFormat && !lexicalNode.hasFormat(textFormat)) {
+                  lexicalNode.toggleFormat(textFormat);
+                }
+
+                // Text content will be stored at the deepest nested child
+                if (child.textContent) {
+                  lexicalNode.setTextContent(child.textContent);
+                }
+              }
+
+              if ('children' in child) {
+                child.children?.forEach(handleInlineTextChild);
+              }
+            };
+
+            children.forEach(handleInlineTextChild);
+          } else {
+            children.forEach(n => handleNode({ crystallizeContentNode: n, lexicalParent: lexicalNode as LexicalNode }));
+          }
         }
 
         lexicalParent.append(lexicalNode);

package/src/rich-text-editor/model/lexical-to-crystallize.ts

@@ -8,6 +8,7 @@ import {
   type ElementNode,
   type EditorState,
   LexicalEditor,
+  TextFormatType,
 } from 'lexical';
 import { $isCodeNode } from '@lexical/code';
 import { $isLinkNode } from '@lexical/link';
@@ -16,7 +17,11 @@ import { $isHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode'
 import { $isHeadingNode, $isQuoteNode, HeadingTagType } from '@lexical/rich-text';
 import { $isTableCellNode, $isTableNode, $isTableRowNode } from '@lexical/table';
 
-import type { CrystallizeRichTextNode, CrystallizeRichText } from '../types/crystallize-rich-text-types';
+import type {
+  CrystallizeRichTextNode,
+  CrystallizeRichText,
+  CrystallizeRichTextInlineFormattedNodes,
+} from '../types/crystallize-rich-text-types';
 import type { CrystallizeRichTextHeadingTypes } from '../types/crystallize-rich-text-types/headings';
 
 const headingMapper: Record<HeadingTagType, CrystallizeRichTextHeadingTypes> = {
@@ -182,10 +187,8 @@ export function lexicalToCrystallizeRichText({
                   kind: 'block',
                   type: 'horizontal-line',
                 });
-              } else {
-                if ($isTextNode(childNode)) {
-                  parentChildrenToUse.push(getTextChild(childNode));
-                }
+              } else if ($isTextNode(childNode)) {
+                parentChildrenToUse.push(getTextChild(childNode));
               }
             });
           }
@@ -197,36 +200,58 @@ export function lexicalToCrystallizeRichText({
   return crystallizeRichText;
 }
 
+const lexicalFormatToCrystallizeType: Record<TextFormatType, CrystallizeRichTextInlineFormattedNodes['type']> = {
+  bold: 'strong',
+  italic: 'emphasized',
+  underline: 'underlined',
+  strikethrough: 'deleted',
+  subscript: 'subscripted',
+  superscript: 'superscripted',
+  highlight: 'emphasized',
+  code: 'code',
+};
+
+/**
+ * Creates a rich text node with the ability to have
+ * nested inline text nodes.
+ */
 function getTextChild(n: TextNode): CrystallizeRichTextNode {
-  const textContent = n.getTextContent();
+  let currentChild: CrystallizeRichTextNode = {
+    kind: 'inline',
+  };
+  let textChild: CrystallizeRichTextNode | null = null;
+
+  function checkFormat(format: TextFormatType) {
+    const type = lexicalFormatToCrystallizeType[format];
+    if (n.hasFormat(format) && type) {
+      if (!textChild) {
+        currentChild = textChild = {
+          kind: 'inline',
+          type,
+        } as CrystallizeRichTextNode;
+      } else {
+        currentChild.children = [
+          {
+            kind: 'inline',
+            type,
+          },
+        ];
 
-  // Deal with code seperately, since it can be both "inline" and "block"
-  if (n.hasFormat('code')) {
-    return {
-      type: 'code',
+        currentChild = currentChild.children[0];
+      }
+    }
+  }
+
+  (Object.keys(lexicalFormatToCrystallizeType) as TextFormatType[]).forEach(checkFormat);
+
+  // Safe guard for unknown lexical types
+  if (!textChild) {
+    currentChild = textChild = {
       kind: 'inline',
-      textContent,
     };
   }
 
-  const textChild = {
-    kind: 'inline',
-    textContent,
-  } as CrystallizeRichTextNode;
-
-  if (n.hasFormat('bold')) {
-    textChild.type = 'strong';
-  } else if (n.hasFormat('italic')) {
-    textChild.type = 'emphasized';
-  } else if (n.hasFormat('underline')) {
-    textChild.type = 'underlined';
-  } else if (n.hasFormat('strikethrough')) {
-    textChild.type = 'deleted';
-  } else if (n.hasFormat('subscript')) {
-    textChild.type = 'subscripted';
-  } else if (n.hasFormat('superscript')) {
-    textChild.type = 'superscripted';
-  }
+  currentChild.textContent = n.getTextContent();
 
   return textChild;
 }

package/src/rich-text-editor/rich-text-editor.stories.tsx

@@ -421,3 +421,31 @@ export const Quote: Story = {
     },
   },
 };
+
+export const MultipleInlineFormats: Story = {
+  args: {
+    initialData: [
+      {
+        type: 'paragraph',
+        kind: 'block',
+        children: [
+          {
+            kind: 'inline',
+            type: 'strong',
+            children: [
+              {
+                kind: 'inline',
+                textContent: 'placed',
+                type: 'emphasized',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};

package/src/rich-text-editor/tests/rich-text-editor-model-conversions.test.tsx

@@ -189,11 +189,33 @@ const dataTypes: { name: string; model: CrystallizeRichText }[] = [
       },
     ],
   },
+  {
+    name: 'Multiple inline formats',
+    model: [
+      {
+        type: 'paragraph',
+        kind: 'block',
+        children: [
+          {
+            kind: 'inline',
+            type: 'strong',
+            children: [
+              {
+                kind: 'inline',
+                textContent: 'placed',
+                type: 'emphasized',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
 ];
 
 describe('RichTextEditor model conversions', () => {
   dataTypes.forEach(dataType => {
-    it('correctly converts an ' + dataType.name, async () => {
+    it('correctly converts ' + dataType.name, async () => {
       const onChange = vi.fn();
 
       render(<RichTextEditor initialData={dataType.model} onChange={onChange} triggerOnChangeOnAutoFocus autoFocus />);

package/src/rich-text-editor/types/crystallize-rich-text-types/index.ts

@@ -34,10 +34,8 @@ type CrystallizeRichTextGenericNode = {
     | 'aside'
     | 'container'
     | 'details'
-    | 'emphasized'
     | 'figcaption'
     | 'figure'
-    | 'highlight'
     | 'image'
     | 'line-break'
     | 'unordered-list'
@@ -51,9 +49,9 @@ type CrystallizeRichTextGenericNode = {
     | 'title-of-a-work';
 };
 
-type CrystallizeRichTextInlineFormattedNodes = {
+export type CrystallizeRichTextInlineFormattedNodes = {
   kind: 'inline';
-  type: 'deleted' | 'strong' | 'subscripted' | 'superscripted' | 'underlined';
+  type: 'deleted' | 'strong' | 'subscripted' | 'superscripted' | 'underlined' | 'emphasized' | 'code' | 'highlight';
 };
 
 export type CrystallizeRichTextNode = CrystallizeRichTextNodeBase &