@crystallize/design-system 1.4.3 → 1.6.1

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

@@ -19,8 +19,8 @@ import type {
   CrystallizeRichTextNode,
   CrystallizeRichText,
   CrystallizeRichTextCodeNodes,
-} from './crystallize-rich-text-types';
-import type { CrystallizeRichTextHeadingTypes } from './crystallize-rich-text-types/headings';
+} from '../types/crystallize-rich-text-types';
+import type { CrystallizeRichTextHeadingTypes } from '../types/crystallize-rich-text-types/headings';
 
 const headingMapper: Record<HeadingTagType, CrystallizeRichTextHeadingTypes> = {
   h1: 'heading1',

package/src/rich-text-editor/model/to-text.test.ts

@@ -0,0 +1,97 @@
+/* eslint-disable no-console */
+
+import { toText } from './to-text';
+
+describe('RichTextEditor toText', () => {
+  it('can convert very simple models', async () => {
+    expect(
+      toText({
+        kind: 'block',
+        type: 'paragraph',
+        textContent: 'Hi there!',
+      }),
+    ).toBe('Hi there!');
+
+    expect(
+      toText({
+        kind: 'block',
+        type: 'paragraph',
+        textContent: 'Hi \nthere!',
+      }),
+    ).toBe('Hi \nthere!');
+  });
+
+  it('will trim the start and end new lines of the text', async () => {
+    expect(
+      toText({
+        kind: 'block',
+        type: 'paragraph',
+        textContent: '\nHi there!\n',
+      }),
+    ).toBe('Hi there!');
+  });
+
+  it('Will preserve line break nodes if told to', async () => {
+    expect(
+      toText(
+        {
+          kind: 'block',
+          type: 'paragraph',
+          children: [
+            {
+              kind: 'inline',
+              textContent: 'Hi ',
+            },
+            {
+              kind: 'inline',
+              type: 'line-break',
+            },
+            {
+              kind: 'inline',
+              textContent: 'there!',
+            },
+          ],
+        },
+        {
+          keepLineBreaks: true,
+        },
+      ),
+    ).toBe('Hi \nthere!');
+
+    expect(
+      toText({
+        kind: 'block',
+        type: 'paragraph',
+        textContent: 'Hi \nthere!',
+      }),
+    ).toBe('Hi \nthere!');
+  });
+
+  it('Will remove line break nodes if told to', async () => {
+    expect(
+      toText(
+        {
+          kind: 'block',
+          type: 'paragraph',
+          children: [
+            {
+              kind: 'inline',
+              textContent: 'Hi ',
+            },
+            {
+              kind: 'inline',
+              type: 'line-break',
+            },
+            {
+              kind: 'inline',
+              textContent: 'there!',
+            },
+          ],
+        },
+        {
+          keepLineBreaks: false,
+        },
+      ),
+    ).toBe('Hi there!');
+  });
+});

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

@@ -0,0 +1,47 @@
+/**
+ * This is pretty much a direct copy from:
+ * https://github.com/CrystallizeAPI/crystallize-content-transformer/blob/main/src/converters/text/to-text.js
+ * I could not/did not want to import it since then original package is not in Typescript
+ */
+
+import type { CrystallizeRichText, CrystallizeRichTextNode } from '../types/crystallize-rich-text-types';
+
+// Remove first and last new lines
+function trim(str: string) {
+  if (!str) {
+    return '';
+  }
+
+  return str.replace(/^(\r|\n)+/, '').replace(/(\r|\n)+$/, '');
+}
+
+export function toText(model: CrystallizeRichText, options?: { keepLineBreaks: boolean }) {
+  function getTextFromNode(node: CrystallizeRichTextNode) {
+    if (!node) {
+      return '';
+    }
+
+    let childrenText = '';
+    if (node.children) {
+      childrenText = node.children.reduce((acc, n) => acc + getTextFromNode(n), '');
+    }
+
+    let content = '';
+
+    content += node.textContent || childrenText || '';
+
+    if (node.kind === 'block') {
+      content = `\n${content}\n`;
+    } else if (options?.keepLineBreaks && node.type === 'line-break') {
+      content += '\n';
+    }
+
+    return content;
+  }
+
+  if (Array.isArray(model)) {
+    return model.map(getTextFromNode).join('').trimStart().trimEnd();
+  }
+
+  return trim(getTextFromNode(model));
+}

package/src/rich-text-editor/nodes/BaseNodes.ts

@@ -17,8 +17,6 @@ import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
 
-// import { AutocompleteNode } from './AutocompleteNode';
-
 import { KeywordNode } from './KeywordNode';
 import { TableNode as NewTableNode } from './TableNode';
 
@@ -37,7 +35,6 @@ export const BaseNodes: Array<Klass<LexicalNode>> = [
   AutoLinkNode,
   LinkNode,
   OverflowNode,
-  // AutocompleteNode,
   KeywordNode,
   HorizontalRuleNode,
   MarkNode,

package/src/rich-text-editor/plugins/ActionsPlugin/index.tsx

@@ -12,7 +12,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 
 import { ActionMenu } from '../../../action-menu';
 import { lexicalToCrystallizeRichText } from '../../model/lexical-to-crystallize';
-import type { CrystallizeRichTextActionMenuItem } from '../../types';
+import type { CrystallizeRichTextActionMenuItem } from '../../types/types';
 
 async function exportFile(editor: LexicalEditor) {
   const json = lexicalToCrystallizeRichText({ editorState: editor.getEditorState() });

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx

@@ -137,7 +137,7 @@ function getMouseInfo(event: MouseEvent): {
   const target = event.target;
 
   if (target && target instanceof HTMLElement) {
-    const codeDOMNode = target.closest<HTMLElement>('code.PlaygroundEditorTheme__code');
+    const codeDOMNode = target.closest<HTMLElement>('code.CrystallizeRTEditorTheme__code');
     const isOutside = !(codeDOMNode || target.closest<HTMLElement>('div.code-action-menu-container'));
 
     return { codeDOMNode, isOutside };

package/src/rich-text-editor/plugins/ComponentPickerPlugin/index.tsx

@@ -20,7 +20,7 @@ import {
   useBasicTypeaheadTriggerMatch,
 } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
-import { $setBlocksType_experimental } from '@lexical/selection';
+import { $setBlocksType } from '@lexical/selection';
 import { INSERT_TABLE_COMMAND } from '@lexical/table';
 
 // import { InsertNewTableDialog } from '../TablePlugin';
@@ -152,7 +152,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
           editor.update(() => {
             const selection = $getSelection();
             if ($isRangeSelection(selection)) {
-              $setBlocksType_experimental(selection, () => $createParagraphNode());
+              $setBlocksType(selection, () => $createParagraphNode());
             }
           }),
       }),
@@ -165,7 +165,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
               editor.update(() => {
                 const selection = $getSelection();
                 if ($isRangeSelection(selection)) {
-                  $setBlocksType_experimental(selection, () =>
+                  $setBlocksType(selection, () =>
                     // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
                     $createHeadingNode(`h${n}`),
                   );
@@ -207,7 +207,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
           editor.update(() => {
             const selection = $getSelection();
             if ($isRangeSelection(selection)) {
-              $setBlocksType_experimental(selection, () => $createQuoteNode());
+              $setBlocksType(selection, () => $createQuoteNode());
             }
           }),
       }),
@@ -220,7 +220,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
 
             if ($isRangeSelection(selection)) {
               if (selection.isCollapsed()) {
-                $setBlocksType_experimental(selection, () => $createCodeNode());
+                $setBlocksType(selection, () => $createCodeNode());
               } else {
                 // Will this ever happen?
                 const textContent = selection.getTextContent();

package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.tsx

@@ -6,10 +6,8 @@
  *
  */
 import './index.css';
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {eventFiles} from '@lexical/rich-text';
-import {mergeRegister} from '@lexical/utils';
+import * as React from 'react';
+import { DragEvent as ReactDragEvent, useEffect, useRef, useState } from 'react';
 import {
   $getNearestNodeFromDOMNode,
   $getNodeByKey,
@@ -20,13 +18,14 @@ import {
   DROP_COMMAND,
   LexicalEditor,
 } from 'lexical';
-import * as React from 'react';
-import {DragEvent as ReactDragEvent, useEffect, useRef, useState} from 'react';
-import {createPortal} from 'react-dom';
+import { createPortal } from 'react-dom';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { eventFiles } from '@lexical/rich-text';
+import { mergeRegister } from '@lexical/utils';
 
-import {isHTMLElement} from '../../utils/guard';
-import {Point} from '../../utils/point';
-import {Rect} from '../../utils/rect';
+import { isHTMLElement } from '../../utils/guard';
+import { Point } from '../../utils/point';
+import { Rect } from '../../utils/rect';
 
 const SPACE = 4;
 const TARGET_LINE_HALF_HEIGHT = 2;
@@ -55,11 +54,7 @@ function getTopLevelNodeKeys(editor: LexicalEditor): string[] {
   return editor.getEditorState().read(() => $getRoot().getChildrenKeys());
 }
 
-function getBlockElement(
-  anchorElem: HTMLElement,
-  editor: LexicalEditor,
-  event: MouseEvent,
-): HTMLElement | null {
+function getBlockElement(anchorElem: HTMLElement, editor: LexicalEditor, event: MouseEvent): HTMLElement | null {
   const anchorElementRect = anchorElem.getBoundingClientRect();
   const topLevelNodeKeys = getTopLevelNodeKeys(editor);
 
@@ -77,7 +72,7 @@ function getBlockElement(
       }
       const point = new Point(event.x, event.y);
       const domRect = Rect.fromDOM(elem);
-      const {marginTop, marginBottom} = window.getComputedStyle(elem);
+      const { marginTop, marginBottom } = window.getComputedStyle(elem);
 
       const rect = domRect.generateNewRect({
         bottom: domRect.bottom + parseFloat(marginBottom),
@@ -88,7 +83,7 @@ function getBlockElement(
 
       const {
         result,
-        reason: {isOnTopSide, isOnBottomSide},
+        reason: { isOnTopSide, isOnBottomSide },
       } = rect.contains(point);
 
       if (result) {
@@ -119,11 +114,7 @@ function isOnMenu(element: HTMLElement): boolean {
   return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
 }
 
-function setMenuPosition(
-  targetElem: HTMLElement | null,
-  floatingElem: HTMLElement,
-  anchorElem: HTMLElement,
-) {
+function setMenuPosition(targetElem: HTMLElement | null, floatingElem: HTMLElement, anchorElem: HTMLElement) {
   if (!targetElem) {
     floatingElem.style.opacity = '0';
     floatingElem.style.transform = 'translate(-10000px, -10000px)';
@@ -136,9 +127,7 @@ function setMenuPosition(
   const anchorElementRect = anchorElem.getBoundingClientRect();
 
   const top =
-    targetRect.top +
-    (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 -
-    anchorElementRect.top;
+    targetRect.top + (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 - anchorElementRect.top;
 
   const left = SPACE;
 
@@ -146,11 +135,8 @@ function setMenuPosition(
   floatingElem.style.transform = `translate(${left}px, ${top}px)`;
 }
 
-function setDragImage(
-  dataTransfer: DataTransfer,
-  draggableBlockElem: HTMLElement,
-) {
-  const {transform} = draggableBlockElem.style;
+function setDragImage(dataTransfer: DataTransfer, draggableBlockElem: HTMLElement) {
+  const { transform } = draggableBlockElem.style;
 
   // Remove dragImage borders
   draggableBlockElem.style.transform = 'translateZ(0)';
@@ -168,10 +154,8 @@ function setTargetLine(
   anchorElem: HTMLElement,
 ) {
   const targetStyle = window.getComputedStyle(targetBlockElem);
-  const {top: targetBlockElemTop, height: targetBlockElemHeight} =
-    targetBlockElem.getBoundingClientRect();
-  const {top: anchorTop, width: anchorWidth} =
-    anchorElem.getBoundingClientRect();
+  const { top: targetBlockElemTop, height: targetBlockElemHeight } = targetBlockElem.getBoundingClientRect();
+  const { top: anchorTop, width: anchorWidth } = anchorElem.getBoundingClientRect();
 
   let lineTop = targetBlockElemTop;
   // At the bottom of the target
@@ -185,9 +169,7 @@ function setTargetLine(
   const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
 
   targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
-  targetLineElem.style.width = `${
-    anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2
-  }px`;
+  targetLineElem.style.width = `${anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2}px`;
   targetLineElem.style.opacity = '.4';
 }
 
@@ -198,17 +180,12 @@ function hideTargetLine(targetLineElem: HTMLElement | null) {
   }
 }
 
-function useDraggableBlockMenu(
-  editor: LexicalEditor,
-  anchorElem: HTMLElement,
-  isEditable: boolean,
-): JSX.Element {
+function useDraggableBlockMenu(editor: LexicalEditor, anchorElem: HTMLElement, isEditable: boolean): JSX.Element {
   const scrollerElem = anchorElem.parentElement;
 
   const menuRef = useRef<HTMLDivElement>(null);
   const targetLineRef = useRef<HTMLDivElement>(null);
-  const [draggableBlockElem, setDraggableBlockElem] =
-    useState<HTMLElement | null>(null);
+  const [draggableBlockElem, setDraggableBlockElem] = useState<HTMLElement | null>(null);
 
   useEffect(() => {
     function onMouseMove(event: MouseEvent) {
@@ -252,7 +229,7 @@ function useDraggableBlockMenu(
       if (isFileTransfer) {
         return false;
       }
-      const {pageY, target} = event;
+      const { pageY, target } = event;
       if (!isHTMLElement(target)) {
         return false;
       }
@@ -272,7 +249,7 @@ function useDraggableBlockMenu(
       if (isFileTransfer) {
         return false;
       }
-      const {target, dataTransfer, pageY} = event;
+      const { target, dataTransfer, pageY } = event;
       const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || '';
       const draggedNode = $getNodeByKey(dragData);
       if (!draggedNode) {
@@ -292,7 +269,7 @@ function useDraggableBlockMenu(
       if (targetNode === draggedNode) {
         return true;
       }
-      const {top, height} = targetBlockElem.getBoundingClientRect();
+      const { top, height } = targetBlockElem.getBoundingClientRect();
       const shouldInsertAfter = pageY - top > height / 2;
       if (shouldInsertAfter) {
         targetNode.insertAfter(draggedNode);
@@ -307,14 +284,14 @@ function useDraggableBlockMenu(
     return mergeRegister(
       editor.registerCommand(
         DRAGOVER_COMMAND,
-        (event) => {
+        event => {
           return onDragover(event);
         },
         COMMAND_PRIORITY_LOW,
       ),
       editor.registerCommand(
         DROP_COMMAND,
-        (event) => {
+        event => {
           return onDrop(event);
         },
         COMMAND_PRIORITY_HIGH,
@@ -324,6 +301,7 @@ function useDraggableBlockMenu(
 
   function onDragStart(event: ReactDragEvent<HTMLDivElement>): void {
     const dataTransfer = event.dataTransfer;
+
     if (!dataTransfer || !draggableBlockElem) {
       return;
     }
@@ -349,7 +327,8 @@ function useDraggableBlockMenu(
         ref={menuRef}
         draggable={true}
         onDragStart={onDragStart}
-        onDragEnd={onDragEnd}>
+        onDragEnd={onDragEnd}
+      >
         <div className={isEditable ? 'icon' : ''} />
       </div>
       <div className="draggable-block-target-line" ref={targetLineRef} />

package/src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { $getSelection, $isRangeSelection, EditorState, RootNode } from 'lexical';
+import { $getSelection, $isRangeSelection, EditorState } from 'lexical';
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -12,36 +12,47 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { trimTextContentFromAnchor } from '@lexical/selection';
 import { $restoreEditorState } from '@lexical/utils';
 
+import { lexicalToCrystallizeRichText } from '../../model/lexical-to-crystallize';
+import { toText } from '../../model/to-text';
+
 export function MaxLengthPlugin({ maxLength }: { maxLength: number }): null {
   const [editor] = useLexicalComposerContext();
 
   useEffect(() => {
     let lastRestoredEditorState: EditorState | null = null;
 
-    return editor.registerNodeTransform(RootNode, (rootNode: RootNode) => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
-        return;
-      }
-      const prevEditorState = editor.getEditorState();
-      const prevTextContent = prevEditorState.read(() => rootNode.getTextContent());
-      const textContent = rootNode.getTextContent();
-      if (prevTextContent !== textContent) {
-        const textLength = textContent.length;
-        const delCount = textLength - maxLength;
-        const anchor = selection.anchor;
-
-        if (delCount > 0) {
-          // Restore the old editor state instead if the last
-          // text content was already at the limit.
-          if (prevTextContent.length === maxLength && lastRestoredEditorState !== prevEditorState) {
-            lastRestoredEditorState = prevEditorState;
-            $restoreEditorState(editor, prevEditorState);
-          } else {
-            trimTextContentFromAnchor(editor, anchor, delCount);
+    return editor.registerUpdateListener(({ editorState, prevEditorState }) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          return;
+        }
+
+        const prevTextContent = toText(lexicalToCrystallizeRichText({ editorState: prevEditorState }));
+
+        // const editorState = rootNode.get
+        // createState
+        const textContent = toText(lexicalToCrystallizeRichText({ editorState }));
+
+        // const prevTextContent = prevEditorState.read(() => rootNode.getTextContent());
+        // const textContent = rootNode.getTextContent();
+        if (prevTextContent !== textContent) {
+          const textLength = textContent.length;
+          const delCount = textLength - maxLength;
+          const anchor = selection.anchor;
+
+          if (delCount > 0) {
+            // Restore the old editor state instead if the last
+            // text content was already at the limit.
+            if (prevTextContent.length === maxLength && lastRestoredEditorState !== prevEditorState) {
+              lastRestoredEditorState = prevEditorState;
+              $restoreEditorState(editor, prevEditorState);
+            } else {
+              trimTextContentFromAnchor(editor, anchor, delCount);
+            }
           }
         }
-      }
+      });
     });
   }, [editor, maxLength]);
 

package/src/rich-text-editor/plugins/ToolbarPlugin/index.tsx

@@ -45,7 +45,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
 import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, HeadingTagType } from '@lexical/rich-text';
-import { $selectAll, $setBlocksType_experimental } from '@lexical/selection';
+import { $selectAll, $setBlocksType } from '@lexical/selection';
 import {
   $findMatchingParent,
   $getNearestBlockElementAncestorOrThrow,
@@ -58,7 +58,7 @@ import { Dialog } from '../../../dialog';
 import { DropdownMenu } from '../../../dropdown-menu';
 import { IconButton } from '../../../icon-button';
 import { Icon } from '../../../iconography';
-import type { CrystallizeRichTextActionMenuItem } from '../../types';
+import type { CrystallizeRichTextActionMenuItem } from '../../types/types';
 import { IS_APPLE } from '../../utils/environment';
 import { getSelectedNode } from '../../utils/getSelectedNode';
 import { sanitizeUrl } from '../../utils/url';
@@ -111,7 +111,7 @@ function BlockFormatDropDown({
       editor.update(() => {
         const selection = $getSelection();
         if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection))
-          $setBlocksType_experimental(selection, () => $createParagraphNode());
+          $setBlocksType(selection, () => $createParagraphNode());
       });
     }
   };
@@ -121,7 +121,7 @@ function BlockFormatDropDown({
       editor.update(() => {
         const selection = $getSelection();
         if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
-          $setBlocksType_experimental(selection, () => $createHeadingNode(headingSize));
+          $setBlocksType(selection, () => $createHeadingNode(headingSize));
         }
       });
     }
@@ -148,13 +148,13 @@ function BlockFormatDropDown({
       editor.update(() => {
         const selection = $getSelection();
         if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
-          $setBlocksType_experimental(selection, () => $createQuoteNode());
+          $setBlocksType(selection, () => $createQuoteNode());
         } else {
           /**
            * Will select the entire editor, in case it is not selected. This is added
            * to get the unit tests working
            */
-          $setBlocksType_experimental($getRoot().select(), () => $createQuoteNode());
+          $setBlocksType($getRoot().select(), () => $createQuoteNode());
         }
       });
     }
@@ -167,7 +167,7 @@ function BlockFormatDropDown({
 
         if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
           if (selection.isCollapsed()) {
-            $setBlocksType_experimental(selection, () => $createCodeNode());
+            $setBlocksType(selection, () => $createCodeNode());
           } else {
             const textContent = selection.getTextContent();
             const codeNode = $createCodeNode();
@@ -180,7 +180,7 @@ function BlockFormatDropDown({
            * Will select the entire editor, in case it is not selected. This is added
            * to get the unit tests working
            */
-          $setBlocksType_experimental($getRoot().select(), () => $createCodeNode());
+          $setBlocksType($getRoot().select(), () => $createCodeNode());
         }
       });
     }

package/src/rich-text-editor/rich-text-editor.css

@@ -1333,17 +1333,17 @@
     z-index: 3;
   }
 
-  .TableNode__contentEditable .PlaygroundEditorTheme__paragraph {
+  .TableNode__contentEditable .CrystallizeRTEditorTheme__paragraph {
     @apply mt-0;
   }
 
-  .PlaygroundEditorTheme__blockCursor {
+  .CrystallizeRTEditorTheme__blockCursor {
     display: block;
     pointer-events: none;
     position: absolute;
   }
 
-  .PlaygroundEditorTheme__blockCursor:after {
+  .CrystallizeRTEditorTheme__blockCursor:after {
     content: '';
     display: block;
     position: absolute;

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

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import type { Meta, StoryObj } from '@storybook/react';
 
-import type { CrystallizeRichText, CrystallizeRichTextNode } from './model/crystallize-rich-text-types';
 import { RichTextEditor } from './rich-text-editor';
+import type { CrystallizeRichText, CrystallizeRichTextNode } from './types/crystallize-rich-text-types';
 
 const meta: Meta<typeof RichTextEditor> = {
   title: 'Components/RichTextEditor',
@@ -218,6 +218,14 @@ export const BlankSheet: Story = {
   },
 };
 
+export const MaxLength: Story = {
+  args: {
+    initialData: [],
+    placeholder: 'You can only write 10 characters in here',
+    maxLength: 10,
+  },
+};
+
 export const CodeInlined: Story = {
   args: {
     initialData: [