@crystallize/design-system 1.6.1 → 1.8.0

package/package.json

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

package/src/action-menu/action-item-separator.tsx

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import { cx } from 'class-variance-authority';
+
+import { DropdownMenu } from '../dropdown-menu';
+
+type SeparatorProps = HTMLAttributes<HTMLLIElement>;
+
+export function Separator({ className }: SeparatorProps) {
+  return (
+    <DropdownMenu.Item className={cx(className, 'c-action-menu-item-separator')}>
+      <hr />
+    </DropdownMenu.Item>
+  );
+}

package/src/action-menu/action-item.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'class-variance-authority';
 import type { HTMLAttributes } from 'react';
+import { cx } from 'class-variance-authority';
 
 import { DropdownMenu } from '../dropdown-menu';
 
@@ -9,7 +9,7 @@ type ItemProps = HTMLAttributes<HTMLLIElement> & {
 
 export function Item({ children, className, onSelect }: ItemProps) {
   return (
-    <DropdownMenu.Item onClick={onSelect} className={cx(className, 'c-action-menu-item')}>
+    <DropdownMenu.Item onClick={onSelect} className={cx(className, ['c-action-menu-item'])}>
       {children}
     </DropdownMenu.Item>
   );

package/src/action-menu/action-menu.css

@@ -36,3 +36,11 @@
     @apply text-pink-600-300;
   }
 }
+
+.c-action-menu-item-separator {
+  @apply m-0 h-px cursor-default p-0;
+
+  hr {
+    @apply h-px w-full bg-gray-700-200 p-0;
+  }
+}

package/src/action-menu/action-menu.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 
 import { DropdownMenu } from '../dropdown-menu';
-
 import { Item } from './action-item';
+import { Separator } from './action-item-separator';
 
 type ActionMenuProps = {
   children: ReactNode;
@@ -23,3 +23,4 @@ export function ActionMenu({ children, tabIndex }: ActionMenuProps) {
 }
 
 ActionMenu.Item = Item;
+ActionMenu.Separator = Separator;

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -6,6 +6,7 @@ type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
   content: ReactNode;
   alignContent?: 'start' | 'center' | 'end';
   disabled?: boolean;
+  onOpenChange?: (open: boolean) => void;
 };
 
 export function DropdownMenuRoot({
@@ -13,10 +14,11 @@ export function DropdownMenuRoot({
   content,
   alignContent = 'start',
   disabled,
+  onOpenChange,
   ...delegated
 }: DropdownMenuRootProps) {
   return (
-    <DropdownMenuPrimitive.Root>
+    <DropdownMenuPrimitive.Root onOpenChange={onOpenChange}>
       <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
         {children}
       </DropdownMenuPrimitive.Trigger>

package/src/dropdown-menu/index.ts

@@ -1,11 +1,14 @@
-import { DropdownMenuRoot } from './dropdown-menu-root';
+import { Portal, Separator } from '@radix-ui/react-dropdown-menu';
+
 import { DropdownMenuItem } from './dropdown-menu-item';
 import { DropdownMenuLabel } from './dropdown-menu-label';
-
+import { DropdownMenuRoot } from './dropdown-menu-root';
 import './dropdown-menu.css';
 
 export const DropdownMenu = {
   Root: DropdownMenuRoot,
   Item: DropdownMenuItem,
   Label: DropdownMenuLabel,
+  Separator,
+  Portal,
 };

package/src/iconography/subscription-contracts.tsx

@@ -16,13 +16,13 @@ export const SubscriptionContracts = forwardRef<SubscriptionContractsRef, Subscr
           fill="#528693"
           fillRule="evenodd"
           d="m17.908 6.324.425-.424a1.2 1.2 0 0 1 .351.848V18.5a1.2 1.2 0 0 1-1.2 1.2h-10.8a1.2 1.2 0 0 1-1.2-1.2V3.7a1.2 1.2 0 0 1 1.2-1.2h7.751a1.2 1.2 0 0 1 .85.351L18.332 5.9l-.425.424ZM17.484 19.1h-10.8a.6.6 0 0 1-.6-.6V3.7a.6.6 0 0 1 .6-.6h7.751a.6.6 0 0 1 .425.176l3.048 3.048a.6.6 0 0 1 .176.424V18.5a.6.6 0 0 1-.6.6Z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         />
         <path
           fill="#528693"
           fillRule="evenodd"
           d="M14.784 2.9v2.6a.7.7 0 0 0 .7.7h3v.6h-3a1.3 1.3 0 0 1-1.3-1.3V2.9h.6Z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         />
         <path
           fill="#fff"
@@ -32,7 +32,7 @@ export const SubscriptionContracts = forwardRef<SubscriptionContractsRef, Subscr
           fill="#528693"
           fillRule="evenodd"
           d="M18.784 8.7c.633.738.8 2.173-.702 1.857l-4.498-1.256.02-.068c.044-.157.095-.31.146-.463l.014-.042.022-.065c.066-.195.133-.39.191-.595l-.698.222h-.002l-2.17.689-.603.19a1328.391 1328.391 0 0 1 1.109 1.528l.592.816.434.597.387-1.163c.412.092.893.223 1.408.364 2.386.653 5.528 1.513 6.178-.438.267-.803-.066-1.58-1.228-2.678-.18-.17-.38-.348-.6-.534V8.7Zm-5.363 2.96-.213.64a.6.6 0 0 1-1.055.163 3823.073 3823.073 0 0 1-2.135-2.94.6.6 0 0 1 .304-.925l2.772-.88.702-.222a.6.6 0 0 1 .758.736c-.062.22-.133.429-.198.62l-.01.029-.003.009 3.88 1.084c.287.057.391.01.403.004a.153.153 0 0 0 .015-.05.84.84 0 0 0-.055-.385 1.44 1.44 0 0 0-.257-.453l-.145-.168V6.367l.988.836c.836.707 1.437 1.334 1.78 1.943.364.643.443 1.273.229 1.917-.272.817-.88 1.271-1.6 1.473-.687.192-1.49.162-2.272.05-.791-.111-1.622-.316-2.384-.52-.23-.061-.453-.122-.666-.18-.297-.082-.577-.159-.838-.226Z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         />
         <path
           fill="#fff"
@@ -42,7 +42,7 @@ export const SubscriptionContracts = forwardRef<SubscriptionContractsRef, Subscr
           fill="#528693"
           fillRule="evenodd"
           d="M5.394 11.779c-.55.463-.755 1.17.298 1.563l4.473 1.343.02-.068c.046-.157.085-.313.123-.47l.01-.043.017-.067c.048-.2.096-.4.156-.604l.472.56.003.003c.49.582.975 1.16 1.465 1.74l.407.485-.587.233-1.167.464-.937.373-.685.273.294-1.19c-.397-.143-.873-.288-1.384-.445-2.366-.724-5.48-1.677-4.987-3.673.15-.606.57-1.026 1.409-1.328.18-.064.38-.124.6-.178v1.029Zm3.647 4.987-.162.654a.6.6 0 0 0 .804.701 3603.743 3603.743 0 0 0 3.377-1.343.6.6 0 0 0 .237-.944l-1.872-2.224-.474-.564a.6.6 0 0 0-1.035.216c-.065.22-.116.434-.164.63l-.007.03-.002.01-3.859-1.159c-.195-.075-.285-.146-.322-.185a.133.133 0 0 1-.02-.028v-.003a.335.335 0 0 1 .037-.092.913.913 0 0 1 .201-.227l.214-.18V9.984l-.744.184c-.662.163-1.208.38-1.623.697-.434.33-.7.747-.824 1.247-.207.836.063 1.545.564 2.1.478.53 1.174.934 1.893 1.258.729.328 1.54.6 2.293.835l.66.203c.294.09.572.175.828.258Z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         />
       </svg>
     );

package/src/iconography/subscription-plans.tsx

@@ -15,20 +15,20 @@ export const SubscriptionPlans = forwardRef<SubscriptionPlansRef, SubscriptionPl
         fill="#528693"
         fillRule="evenodd"
         d="M6.397 4.627h11.09a1.6 1.6 0 0 1 1.6 1.6v11a1.6 1.6 0 0 1-1.6 1.6H6.398a1.6 1.6 0 0 1-1.6-1.6v-11a1.6 1.6 0 0 1 1.6-1.6Zm0 .6h11.09a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H6.398a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1Z"
-        clip-rule="evenodd"
+        clipRule="evenodd"
       />
       <path fill="#fff" d="M5.397 6.227a1 1 0 0 1 1-1h11.09a1 1 0 0 1 1 1v1.455H5.398V6.227Z" />
       <path
         fill="#528693"
         fillRule="evenodd"
         d="M19.088 8.282H4.797V6.227a1.6 1.6 0 0 1 1.6-1.6h11.09a1.6 1.6 0 0 1 1.6 1.6v2.055ZM6.397 5.227a1 1 0 0 0-1 1v1.455h13.09V6.227a1 1 0 0 0-1-1H6.398Z"
-        clip-rule="evenodd"
+        clipRule="evenodd"
       />
       <path
         fill="#528693"
         fillRule="evenodd"
         d="M8.352 4v1.227h-1V4a.5.5 0 0 1 1 0ZM16.533 4v1.227h-1V4a.5.5 0 1 1 1 0ZM12.443 4v1.227h-1V4a.5.5 0 1 1 1 0Z"
-        clip-rule="evenodd"
+        clipRule="evenodd"
       />
       <path
         fill="#fff"
@@ -38,7 +38,7 @@ export const SubscriptionPlans = forwardRef<SubscriptionPlansRef, SubscriptionPl
         fill="#528693"
         fillRule="evenodd"
         d="M19.076 10.782c.633.738.8 2.173-.702 1.857l-4.498-1.256.02-.068c.044-.157.095-.31.146-.463l.014-.042.023-.065c.066-.194.132-.39.19-.595l-.697.221-.003.001-2.17.689-.603.19a1504.34 1504.34 0 0 1 1.109 1.528l.593.816.433.597.388-1.163c.412.092.892.223 1.407.364 2.387.653 5.528 1.513 6.178-.438.267-.803-.066-1.58-1.228-2.678-.18-.17-.38-.348-.6-.534v1.039Zm-5.363 2.96-.213.64a.6.6 0 0 1-1.054.163l-1.027-1.414-1.109-1.527a.6.6 0 0 1 .305-.924l2.771-.88.702-.222a.6.6 0 0 1 .759.736c-.063.22-.134.429-.199.62l-.01.029-.003.009 3.88 1.084c.287.058.392.01.403.004a.156.156 0 0 0 .015-.05.84.84 0 0 0-.055-.385 1.44 1.44 0 0 0-.257-.453l-.145-.168V8.449l.988.836c.836.707 1.437 1.334 1.781 1.943.363.643.442 1.273.228 1.917-.272.816-.879 1.271-1.6 1.473-.686.192-1.49.162-2.272.05-.791-.111-1.622-.316-2.384-.52-.23-.061-.452-.122-.666-.18a59.482 59.482 0 0 0-.838-.226Z"
-        clip-rule="evenodd"
+        clipRule="evenodd"
       />
       <path
         fill="#fff"
@@ -48,7 +48,7 @@ export const SubscriptionPlans = forwardRef<SubscriptionPlansRef, SubscriptionPl
         fill="#528693"
         fillRule="evenodd"
         d="M4.806 11.607c-.55.462-.756 1.17.298 1.562l4.472 1.343.02-.068a10.141 10.141 0 0 0 .15-.58c.049-.199.097-.4.157-.604l.472.56.002.003 1.465 1.741.408.484-.588.234-1.166.464-.937.373-.686.272.295-1.19c-.398-.143-.874-.288-1.384-.444-2.367-.724-5.48-1.677-4.987-3.673.15-.607.569-1.027 1.409-1.328.18-.065.38-.124.6-.179v1.03Zm3.647 4.986-.162.654a.6.6 0 0 0 .804.702l1.624-.646 1.753-.698a.6.6 0 0 0 .237-.944l-1.873-2.224-.474-.563a.6.6 0 0 0-1.034.216c-.065.219-.117.434-.164.63l-.007.03-.002.009-3.859-1.158c-.195-.075-.286-.147-.322-.186a.136.136 0 0 1-.021-.027v-.004l.004-.018a.333.333 0 0 1 .033-.073.913.913 0 0 1 .202-.227l.214-.18V9.81l-.744.184c-.662.164-1.208.381-1.624.697-.433.33-.7.748-.824 1.248-.206.835.063 1.544.565 2.1.478.529 1.173.934 1.893 1.258.728.328 1.54.599 2.293.834.227.071.448.139.66.203.294.09.571.175.828.258Z"
-        clip-rule="evenodd"
+        clipRule="evenodd"
       />
     </svg>
   );

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

@@ -118,7 +118,8 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
             lexicalNode = $createTableRowNode();
             break;
           }
-          case 'table-cell': {
+          case 'table-cell':
+          case 'table-head-cell': {
             // ** colSpan / rowSpan has not yet been implemented **
             // const colSpanFromMeta = metadata?.colSpan;
             // const colSpanParsed =
@@ -136,6 +137,16 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
             );
             break;
           }
+          case 'preformatted': {
+            /**
+             * We do not deal with this tag. It should just be skipped.
+             */
+            lexicalNode = lexicalParent;
+            if (children) {
+              children.forEach(n => handleNode({ crystallizeContentNode: n, lexicalParent }));
+            }
+            return;
+          }
         }
 
         if (!insertedTextContent && typeof textContent === 'string') {

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

@@ -4,9 +4,10 @@ import {
   $isLineBreakNode,
   $isParagraphNode,
   $isTextNode,
-  EditorState,
-  ElementNode,
   TextNode,
+  type ElementNode,
+  type EditorState,
+  LexicalEditor,
 } from 'lexical';
 import { $isCodeNode } from '@lexical/code';
 import { $isLinkNode } from '@lexical/link';
@@ -15,11 +16,7 @@ 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,
-  CrystallizeRichTextCodeNodes,
-} from '../types/crystallize-rich-text-types';
+import type { CrystallizeRichTextNode, CrystallizeRichText } from '../types/crystallize-rich-text-types';
 import type { CrystallizeRichTextHeadingTypes } from '../types/crystallize-rich-text-types/headings';
 
 const headingMapper: Record<HeadingTagType, CrystallizeRichTextHeadingTypes> = {
@@ -31,7 +28,12 @@ const headingMapper: Record<HeadingTagType, CrystallizeRichTextHeadingTypes> = {
   h6: 'heading6',
 };
 
-export function lexicalToCrystallizeRichText({ editorState }: { editorState: EditorState }): CrystallizeRichText {
+export function lexicalToCrystallizeRichText({
+  editorState,
+}: {
+  editor?: LexicalEditor;
+  editorState: EditorState;
+}): CrystallizeRichText {
   const crystallizeRichText: CrystallizeRichTextNode['children'] = [];
 
   editorState.read(() => {
@@ -96,27 +98,6 @@ export function lexicalToCrystallizeRichText({ editorState }: { editorState: Edi
           type: 'quote',
         };
       }
-      // Table
-      else if ($isTableNode(lexicalNode)) {
-        crystallizeNode = {
-          kind: 'block',
-          type: 'table',
-        };
-      }
-      // Table row
-      else if ($isTableRowNode(lexicalNode)) {
-        crystallizeNode = {
-          kind: 'block',
-          type: 'table-row',
-        };
-      }
-      // Table cell
-      else if ($isTableCellNode(lexicalNode)) {
-        crystallizeNode = {
-          kind: 'inline',
-          type: 'table-cell',
-        };
-      }
       // Line break
       else if ($isLineBreakNode(lexicalNode)) {
         crystallizeNode = {
@@ -126,17 +107,37 @@ export function lexicalToCrystallizeRichText({ editorState }: { editorState: Edi
       }
       // Code
       else if ($isCodeNode(lexicalNode)) {
-        const language = lexicalNode.getLanguage();
         crystallizeNode = {
           kind: 'block',
-          type: 'code',
-          textContent: lexicalNode.getTextContent(),
-          metadata: {
-            language,
-          },
-        } as CrystallizeRichTextCodeNodes;
+          type: 'preformatted',
+          children: [
+            {
+              type: 'code',
+              kind: 'block',
+              textContent: lexicalNode.getTextContent(),
+              metadata: {
+                language: lexicalNode.getLanguage(),
+              },
+            },
+          ],
+        } as CrystallizeRichTextNode;
 
         innerContentsIsTakenCareOf = true;
+      } else if ($isTableNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'block',
+          type: 'table',
+        };
+      } else if ($isTableRowNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'block',
+          type: 'table-row',
+        };
+      } else if ($isTableCellNode(lexicalNode)) {
+        crystallizeNode = {
+          kind: 'inline',
+          type: lexicalNode.hasHeader() ? 'table-head-cell' : 'table-cell',
+        };
       }
 
       if (crystallizeNode) {
@@ -176,8 +177,7 @@ export function lexicalToCrystallizeRichText({ editorState }: { editorState: Edi
             children.forEach(childNode => {
               if ($isElementNode(childNode)) {
                 handleNode(childNode, parentChildrenToUse);
-              }
-              if ($isHorizontalRuleNode(childNode)) {
+              } else if ($isHorizontalRuleNode(childNode)) {
                 parentChildrenToUse.push({
                   kind: 'block',
                   type: 'horizontal-line',

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

@@ -8,7 +8,6 @@
 
 import { Klass, LexicalNode, LineBreakNode } from 'lexical';
 import { CodeHighlightNode, CodeNode } from '@lexical/code';
-import { HashtagNode } from '@lexical/hashtag';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
 import { MarkNode } from '@lexical/mark';
@@ -17,25 +16,19 @@ import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
 
-import { KeywordNode } from './KeywordNode';
-import { TableNode as NewTableNode } from './TableNode';
-
 export const BaseNodes: Array<Klass<LexicalNode>> = [
   HeadingNode,
   ListNode,
   ListItemNode,
   QuoteNode,
   CodeNode,
-  NewTableNode,
   TableNode,
   TableCellNode,
   TableRowNode,
-  HashtagNode,
   CodeHighlightNode,
   AutoLinkNode,
   LinkNode,
   OverflowNode,
-  KeywordNode,
   HorizontalRuleNode,
   MarkNode,
   LineBreakNode,

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

@@ -8,24 +8,17 @@
 
 import type { Klass, LexicalNode } from 'lexical';
 import { CodeHighlightNode, CodeNode } from '@lexical/code';
-import { HashtagNode } from '@lexical/hashtag';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 
-// import { AutocompleteNode } from './AutocompleteNode';
-import { KeywordNode } from './KeywordNode';
-
 export const BaseNodes: Array<Klass<LexicalNode>> = [
   HeadingNode,
   ListNode,
   ListItemNode,
   QuoteNode,
   CodeNode,
-  HashtagNode,
   CodeHighlightNode,
   AutoLinkNode,
   LinkNode,
-  // AutocompleteNode,
-  KeywordNode,
 ];

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

@@ -14,7 +14,17 @@ import { ActionMenu } from '../../../action-menu';
 import { lexicalToCrystallizeRichText } from '../../model/lexical-to-crystallize';
 import type { CrystallizeRichTextActionMenuItem } from '../../types/types';
 
-async function exportFile(editor: LexicalEditor) {
+async function copyJson(editor: LexicalEditor) {
+  const json = lexicalToCrystallizeRichText({ editor, editorState: editor.getEditorState() });
+
+  try {
+    await navigator.clipboard.writeText(JSON.stringify(json, null, 1));
+  } catch (error) {
+    console.warn('Copy failed', error);
+  }
+}
+
+async function exportJson(editor: LexicalEditor) {
   const json = lexicalToCrystallizeRichText({ editorState: editor.getEditorState() });
 
   const blob = new Blob([JSON.stringify(json, null, 1)], {
@@ -56,7 +66,8 @@ export default function ActionsPlugin({
                 {actionItem.title}
               </ActionMenu.Item>
             ))}
-        <ActionMenu.Item onSelect={() => exportFile(editor)}>Export to JSON</ActionMenu.Item>
+        <ActionMenu.Item onSelect={() => copyJson(editor)}>Copy JSON</ActionMenu.Item>
+        <ActionMenu.Item onSelect={() => exportJson(editor)}>Export JSON</ActionMenu.Item>
         <ActionMenu.Item
           className="danger"
           onSelect={() => {

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

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { $isCodeNode } from '@lexical/code';
-import { $getNearestNodeFromDOMNode, $getSelection, $setSelection, LexicalEditor } from 'lexical';
+
 import * as React from 'react';
 import { useState } from 'react';
+import { $getNearestNodeFromDOMNode, $getSelection, $setSelection, LexicalEditor } from 'lexical';
 import { useDebouncedCallback } from 'use-debounce';
+import { $isCodeNode } from '@lexical/code';
 
 interface Props {
   editor: LexicalEditor;

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

@@ -22,7 +22,6 @@ const PRETTIER_PARSER_MODULES = {
   css: () => import('prettier/parser-postcss'),
   html: () => import('prettier/parser-html'),
   js: () => import('prettier/parser-babel'),
-  markdown: () => import('prettier/parser-markdown'),
 } as const;
 
 type LanguagesType = keyof typeof PRETTIER_PARSER_MODULES;

package/src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.css

@@ -1,4 +1,4 @@
-.floating-text-format-popup {
+.c-floating-text-format-popup {
   vertical-align: middle;
   background-color: #fff;
   transition: opacity 0.5s;
@@ -8,7 +8,7 @@
   @apply absolute top-0 left-0 z-10 flex rounded-md bg-white p-1 opacity-0 shadow-md;
 }
 
-.floating-text-format-popup button.popup-item {
+.c-floating-text-format-popup button.popup-item {
   border: 0;
   display: flex;
   background: none;
@@ -18,15 +18,15 @@
   vertical-align: middle;
 }
 
-.floating-text-format-popup button.popup-item:disabled {
+.c-floating-text-format-popup button.popup-item:disabled {
   cursor: not-allowed;
 }
 
-.floating-text-format-popup button.popup-item.spaced {
+.c-floating-text-format-popup button.popup-item.spaced {
   margin-right: 2px;
 }
 
-.floating-text-format-popup button.popup-item i.format {
+.c-floating-text-format-popup button.popup-item i.format {
   background-size: contain;
   display: inline-block;
   height: 18px;
@@ -37,23 +37,23 @@
   opacity: 0.6;
 }
 
-.floating-text-format-popup button.popup-item:disabled i.format {
+.c-floating-text-format-popup button.popup-item:disabled i.format {
   opacity: 0.2;
 }
 
-.floating-text-format-popup button.popup-item.active {
+.c-floating-text-format-popup button.popup-item.active {
   background-color: rgba(223, 232, 250, 0.3);
 }
 
-.floating-text-format-popup button.popup-item.active i {
+.c-floating-text-format-popup button.popup-item.active i {
   opacity: 1;
 }
 
-.floating-text-format-popup .popup-item:hover:not([disabled]) {
+.c-floating-text-format-popup .popup-item:hover:not([disabled]) {
   background-color: #eee;
 }
 
-.floating-text-format-popup select.popup-item {
+.c-floating-text-format-popup select.popup-item {
   border: 0;
   display: flex;
   background: none;
@@ -68,12 +68,12 @@
   text-overflow: ellipsis;
 }
 
-.floating-text-format-popup select.code-language {
+.c-floating-text-format-popup select.code-language {
   text-transform: capitalize;
   width: 130px;
 }
 
-.floating-text-format-popup .popup-item .text {
+.c-floating-text-format-popup .popup-item .text {
   display: flex;
   line-height: 20px;
   width: 200px;
@@ -87,7 +87,7 @@
   text-align: left;
 }
 
-.floating-text-format-popup .popup-item .icon {
+.c-floating-text-format-popup .popup-item .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -97,7 +97,7 @@
   background-size: contain;
 }
 
-.floating-text-format-popup i.chevron-down {
+.c-floating-text-format-popup i.chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
@@ -105,7 +105,7 @@
   user-select: none;
 }
 
-.floating-text-format-popup i.chevron-down.inside {
+.c-floating-text-format-popup i.chevron-down.inside {
   width: 16px;
   height: 16px;
   display: flex;
@@ -115,14 +115,14 @@
   pointer-events: none;
 }
 
-.floating-text-format-popup .divider {
+.c-floating-text-format-popup .divider {
   width: 1px;
   background-color: #eee;
   margin: 0 4px;
 }
 
 @media (max-width: 1024px) {
-  .floating-text-format-popup button.insert-comment {
+  .c-floating-text-format-popup button.insert-comment {
     display: none;
   }
 }

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

@@ -131,7 +131,7 @@ function TextFormatFloatingToolbar({
   }, [editor, updateTextFormatFloatingToolbar]);
 
   return (
-    <div ref={popupCharStylesEditorRef} className="floating-text-format-popup gap-0.5">
+    <div ref={popupCharStylesEditorRef} className="c-floating-text-format-popup gap-0.5">
       {editor.isEditable() && (
         <>
           <IconButton

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

@@ -28,14 +28,9 @@ export function MaxLengthPlugin({ maxLength }: { maxLength: number }): null {
           return;
         }
 
-        const prevTextContent = toText(lexicalToCrystallizeRichText({ editorState: prevEditorState }));
+        const prevTextContent = toText(lexicalToCrystallizeRichText({ editor, editorState: prevEditorState }));
+        const textContent = toText(lexicalToCrystallizeRichText({ editor, editorState }));
 
-        // 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;