@crystallize/design-system 1.5.0 → 1.7.0

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: [

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

@@ -1,7 +1,6 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
 import type { EditorState } from 'lexical';
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { CharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin';
 import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
@@ -14,20 +13,18 @@ import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin
 import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 
 import './rich-text-editor.css';
-import { useSettings } from './context/SettingsContext';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+
 import { SharedHistoryContext, useSharedHistoryContext } from './context/SharedHistoryContext';
-import type { CrystallizeRichText } from './model/crystallize-rich-text-types';
 import { composeInitialState } from './model/crystallize-to-lexical';
 import { lexicalToCrystallizeRichText } from './model/lexical-to-crystallize';
 import { BaseNodes } from './nodes/BaseNodes';
 import { BaseNodes as TableCellNodes } from './nodes/TableCellNodes';
 import AutoLinkPlugin from './plugins/AutoLinkPlugin';
-import AutocompletePlugin from './plugins/AutocompletePlugin';
 import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
 import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
 import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';
 import DragDropPaste from './plugins/DragDropPastePlugin';
-import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
 import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin';
 import LinkPlugin from './plugins/LinkPlugin';
@@ -40,13 +37,21 @@ import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
 import TableCellResizer from './plugins/TableCellResizer';
 import { TableContext, TablePlugin as NewTablePlugin } from './plugins/TablePlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
-import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
-import type { CrystallizeRichTextActionMenuItem } from './types';
+import CrystallizeRTEditorTheme from './themes/CrystallizeRTEditorTheme';
+import type { CrystallizeRichText } from './types/crystallize-rich-text-types';
+import type { CrystallizeRichTextActionMenuItem } from './types/types';
 import ContentEditable from './ui/ContentEditable';
 
-// Types
-export type { CrystallizeRichText } from './model/crystallize-rich-text-types';
-export * from './types';
+/**
+ * Currently disabling this as there is a conflict with someting within
+ * the app. @hk have done 15minutes of debugging without finding out what
+ * causes the conflict. We can re-visit this at some later time.
+ */
+// import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
+
+// Export types
+export type { CrystallizeRichText } from './types/crystallize-rich-text-types';
+export * from './types/types';
 
 type TRichTextBase = {
   placeholder?: string;
@@ -56,6 +61,8 @@ type TRichTextBase = {
   actionsMenuPrepend?: CrystallizeRichTextActionMenuItem[];
   actionsMenuAppend?: CrystallizeRichTextActionMenuItem[];
   slotPreContent?: ReactNode;
+  maxLength?: number;
+  editable?: boolean;
 };
 
 export function RichTextEditor({
@@ -64,7 +71,6 @@ export function RichTextEditor({
   ...rest
 }: TRichTextBase & {
   initialData?: CrystallizeRichText;
-  editable?: boolean;
 }) {
   return (
     <LexicalComposer
@@ -75,7 +81,7 @@ export function RichTextEditor({
         onError: (error: Error) => {
           throw error;
         },
-        theme: PlaygroundEditorTheme,
+        theme: CrystallizeRTEditorTheme,
         editorState: initialData
           ? composeInitialState({
               richText: initialData,
@@ -86,7 +92,7 @@ export function RichTextEditor({
       <SharedHistoryContext>
         <TableContext>
           <div className="c-rich-text-editor">
-            <RichTextEditorWithoutContext {...rest} />
+            <RichTextEditorWithoutContext {...rest} editable={editable} />
           </div>
         </TableContext>
       </SharedHistoryContext>
@@ -102,17 +108,17 @@ function RichTextEditorWithoutContext({
   actionsMenuPrepend,
   actionsMenuAppend,
   slotPreContent,
+  maxLength,
+  editable,
 }: TRichTextBase): JSX.Element {
   const { historyState } = useSharedHistoryContext();
-  const {
-    settings: { isAutocomplete, isMaxLength, isCharLimit, isCharLimitUtf8 },
-  } = useSettings();
   const placeholder = (
     <div className="text-[14px] font-normal text-gray-300-600 italic absolute overflow-hidden text-ellipsis top-0 left-6 right-10 select-none whitespace-nowrap inline-block pointer-events-none ">
       {placeholderText ?? ''}
     </div>
   );
 
+  const [editor] = useLexicalComposerContext();
   const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
   const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false);
   const firstOnChangeTriggeredRef = useRef(!autoFocus);
@@ -123,6 +129,11 @@ function RichTextEditorWithoutContext({
     }
   };
 
+  // Listen for editable change
+  useEffect(() => {
+    editor.setEditable(editable || false);
+  }, [editable, editor]);
+
   // Deal with different window sizes
   useEffect(() => {
     const updateViewPortWidth = () => {
@@ -156,7 +167,7 @@ function RichTextEditorWithoutContext({
       <ToolbarPlugin actionsMenuPrepend={actionsMenuPrepend} actionsMenuAppend={actionsMenuAppend} />
       {slotPreContent}
       <div className="editor-container">
-        {isMaxLength && <MaxLengthPlugin maxLength={30} />}
+        {maxLength != null ? <MaxLengthPlugin maxLength={maxLength} /> : null}
         <DragDropPaste />
         {!autoFocus ? null : <AutoFocusPlugin />}
         <ClearEditorPlugin />
@@ -190,7 +201,7 @@ function RichTextEditorWithoutContext({
             onError: (error: Error) => {
               throw error;
             },
-            theme: PlaygroundEditorTheme,
+            theme: CrystallizeRTEditorTheme,
           }}
         >
           {!autoFocus ? <></> : <AutoFocusPlugin />}
@@ -210,18 +221,13 @@ function RichTextEditorWithoutContext({
         <TabIndentationPlugin />
         {floatingAnchorElem && !isSmallWidthViewport && (
           <>
-            <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
+            {/* <DraggableBlockPlugin anchorElem={floatingAnchorElem} /> */}
             <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />
             <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} />
             <TableCellActionMenuPlugin anchorElem={floatingAnchorElem} />
             <FloatingTextFormatToolbarPlugin anchorElem={floatingAnchorElem} />
           </>
         )}
-
-        {(isCharLimit || isCharLimitUtf8) && (
-          <CharacterLimitPlugin charset={isCharLimit ? 'UTF-16' : 'UTF-8'} maxLength={5} />
-        )}
-        {isAutocomplete && <AutocompletePlugin />}
       </div>
     </>
   );

package/src/rich-text-editor/tests/rich-text-editor-basic-rendering.test.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import { render, screen } from '@testing-library/react';
 
-import type { CrystallizeRichText } from '../model/crystallize-rich-text-types';
 import { RichTextEditor } from '../rich-text-editor';
+import type { CrystallizeRichText } from '../types/crystallize-rich-text-types';
 import { sleep } from './utils';
 
 const emptyParagraph: CrystallizeRichText = [{ kind: 'block', type: 'paragraph', textContent: 'rabbit' }];

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

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 
-import type { CrystallizeRichText } from '../model/crystallize-rich-text-types';
 import { RichTextEditor } from '../rich-text-editor';
+import type { CrystallizeRichText } from '../types/crystallize-rich-text-types';
 import { sleep } from './utils';
 
 describe('RichTextEditor model basics', () => {

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

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/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';
 import { sleep } from './utils';
 
 /**

package/src/rich-text-editor/tests/rich-text-editor-text-formats.test.tsx

@@ -2,8 +2,8 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import type { CrystallizeRichText } from '../model/crystallize-rich-text-types';
 import { RichTextEditor } from '../rich-text-editor';
+import type { CrystallizeRichText } from '../types/crystallize-rich-text-types';
 import { selectTextInElement } from './utils';
 
 describe('RichTextEditor text formats', () => {