@crystallize/design-system 1.5.0 → 1.6.1

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', () => {