@crystallize/design-system 1.17.0 → 1.17.1

package/package.json

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

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

@@ -1,15 +1,15 @@
-import type { HTMLAttributes } from 'react';
 import { cx } from 'class-variance-authority';
+import type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
 
 import { DropdownMenu } from '../dropdown-menu';
 
-type ItemProps = HTMLAttributes<HTMLLIElement> & {
+type ItemProps = DropdownMenuItemProps & {
   onSelect?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 
-export function Item({ children, className, onSelect }: ItemProps) {
+export function Item({ children, className, onSelect, ...delegated }: ItemProps) {
   return (
-    <DropdownMenu.Item onClick={onSelect} className={cx(className, ['c-action-menu-item'])}>
+    <DropdownMenu.Item {...delegated} onClick={onSelect} className={cx(className, ['c-action-menu-item'])}>
       {children}
     </DropdownMenu.Item>
   );

package/src/rich-text-editor/i18n/translations/en.ts

@@ -18,6 +18,7 @@ const translations: I18N = {
   actionFormatWithSubscriptTitle: 'Subscript',
   actionFormatWithSuperscriptLabel: 'Format text as superscript',
   actionFormatWithSuperscriptTitle: 'Superscript',
+  actionFormatClear: 'Clear formatting',
   actionInsertCodeBlock: 'Insert code block',
   actionInsertlink: 'Insert link',
   actionCopyJSON: 'Copy JSON',

package/src/rich-text-editor/i18n/types.ts

@@ -16,6 +16,7 @@ export type I18NKeys =
   | 'actionFormatWithSubscriptTitle'
   | 'actionFormatWithSuperscriptLabel'
   | 'actionFormatWithSuperscriptTitle'
+  | 'actionFormatClear'
   | 'actionCopyJSON'
   | 'actionClear'
   | 'actionFormatCode'

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

@@ -7,7 +7,6 @@
  *
  */
 
-import { useRef } from 'react';
 import { CLEAR_EDITOR_COMMAND, LexicalEditor } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 
@@ -35,44 +34,41 @@ export default function ActionsPlugin({
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
   const tr = useTr();
-  const actionMenuAnchorRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div ref={actionMenuAnchorRef} className="c-rte-actions-plugin">
-      <ActionMenu container={actionMenuAnchorRef.current}>
-        {!prepend
-          ? null
-          : prepend.map(actionItem => (
-              <ActionMenu.Item
-                key={actionItem.title}
-                onSelect={actionItem.action}
-                className={actionItem.type === 'danger' ? 'danger' : ''}
-              >
-                {actionItem.title}
-              </ActionMenu.Item>
-            ))}
-        <ActionMenu.Item onSelect={() => copyJson(editor)}>{tr('actionCopyJSON')}</ActionMenu.Item>
-        <ActionMenu.Item
-          className="danger"
-          onSelect={() => {
-            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
-            editor.focus();
-          }}
-        >
-          {tr('actionClear')}
-        </ActionMenu.Item>
-        {!append
-          ? null
-          : append.map(actionItem => (
-              <ActionMenu.Item
-                key={actionItem.title}
-                onSelect={actionItem.action}
-                className={actionItem.type === 'danger' ? 'danger' : ''}
-              >
-                {actionItem.title}
-              </ActionMenu.Item>
-            ))}
-      </ActionMenu>
-    </div>
+    <ActionMenu>
+      {!prepend
+        ? null
+        : prepend.map(actionItem => (
+            <ActionMenu.Item
+              key={actionItem.title}
+              onSelect={actionItem.action}
+              className={actionItem.type === 'danger' ? 'danger' : ''}
+            >
+              {actionItem.title}
+            </ActionMenu.Item>
+          ))}
+      <ActionMenu.Item onSelect={() => copyJson(editor)}>{tr('actionCopyJSON')}</ActionMenu.Item>
+      <ActionMenu.Item
+        className="danger"
+        onSelect={() => {
+          editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+          editor.focus();
+        }}
+      >
+        {tr('actionClear')}
+      </ActionMenu.Item>
+      {!append
+        ? null
+        : append.map(actionItem => (
+            <ActionMenu.Item
+              key={actionItem.title}
+              onSelect={actionItem.action}
+              className={actionItem.type === 'danger' ? 'danger' : ''}
+            >
+              {actionItem.title}
+            </ActionMenu.Item>
+          ))}
+    </ActionMenu>
   );
 }

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

@@ -185,7 +185,7 @@ function FloatingLinkEditor({
   }, [isEditMode]);
 
   return (
-    <div ref={editorRef} className="c-rte-link-editor">
+    <div ref={editorRef} className="c-rte-link-editor" data-testid="rich-text-link-editor">
       {isEditMode ? (
         <div>
           <div className="c-rte-link-editor-input-group">
@@ -215,6 +215,7 @@ function FloatingLinkEditor({
           </div>
           <div className="c-rte-link-editor-button-wrap">
             <Button
+              data-testid="link-editor-save-button"
               onClick={() => {
                 if (lastSelection !== null) {
                   if (linkUrl !== '') {
@@ -253,6 +254,7 @@ function FloatingLinkEditor({
                 onMouseDown={event => event.preventDefault()}
                 onClick={() => setEditMode(true)}
                 aria-label={tr('linkEditorEdit')}
+                data-testid="link-editor-edit"
               >
                 <Icon.Edit />
               </IconButton>

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

@@ -179,6 +179,22 @@ function TextFormatFloatingToolbar({
           }`}
         />
       </IconButton>
+      <IconButton
+        style={{ padding: 0, overflow: 'hidden' }}
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+        }}
+        aria-label={tr('actionInsertCodeBlock')}
+      >
+        <i
+          className={`c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${isCode ? 'selected' : ''}`}
+        />
+      </IconButton>
+      <IconButton style={{ padding: 0, overflow: 'hidden' }} onClick={insertLink} aria-label={tr('actionInsertlink')}>
+        <i
+          className={`c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${isLink ? 'selected' : ''}`}
+        />
+      </IconButton>
       <IconButton
         style={{ padding: 0, overflow: 'hidden' }}
         onClick={() => {
@@ -221,22 +237,6 @@ function TextFormatFloatingToolbar({
           }`}
         />
       </IconButton>
-      <IconButton
-        style={{ padding: 0, overflow: 'hidden' }}
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
-        }}
-        aria-label={tr('actionInsertCodeBlock')}
-      >
-        <i
-          className={`c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${isCode ? 'selected' : ''}`}
-        />
-      </IconButton>
-      <IconButton style={{ padding: 0, overflow: 'hidden' }} onClick={insertLink} aria-label={tr('actionInsertlink')}>
-        <i
-          className={`c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${isLink ? 'selected' : ''}`}
-        />
-      </IconButton>
     </div>
   );
 }

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

@@ -6,6 +6,15 @@
   padding-left: var(--c-rte-toolbar-pl, 0.5rem);
   padding-right: var(--c-rte-toolbar-pr, 0.5rem);
 
+  container-type: inline-size;
+  container-name: rich-text-toolbar;
+
+  @container rich-text-toolbar (max-width: 600px) {
+    .c-rte-toolbar__icon-btn {
+      display: none;
+    }
+  }
+
   &__inner {
     @apply flex;
   }

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

@@ -456,6 +456,7 @@ export default function ToolbarPlugin({
           type="button"
           title={tr(IS_APPLE ? 'actionUndoTitleApple' : 'actionUndoTitle')}
           aria-label={tr('actionUndoLabel')}
+          data-testid="rich-text-undo-button"
         >
           <i
             className={`c-rte-icon-undo c-rte-toolbar__icon ${!canUndo ? 'disabled' : ''}
@@ -563,6 +564,7 @@ export default function ToolbarPlugin({
                 type="button"
                 title={tr('actionInsertCodeBlock')}
                 aria-label={tr('actionInsertCodeBlock')}
+                data-testid="toggle-format-code"
               >
                 <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-code`} />
               </IconButton>
@@ -582,9 +584,8 @@ export default function ToolbarPlugin({
                 content={
                   <>
                     <DropdownMenu.Item
-                      onClick={() => {
-                        activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
-                      }}
+                      disabled={!isEditable}
+                      onClick={() => activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
                       title={tr('actionFormatWithStrikethroughTitle')}
                       aria-label={tr('actionFormatWithStrikethroughLabel')}
                     >
@@ -594,13 +595,12 @@ export default function ToolbarPlugin({
                         }`}
                       />
                       <span className={`c-rte-toolbar__dd-item__text ${isStrikethrough ? 'selected' : ''}`}>
-                        {tr('actionFormatAsStrongTitle')}
+                        {tr('actionFormatWithStrikethroughTitle')}
                       </span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
-                      onClick={() => {
-                        activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
-                      }}
+                      disabled={!isEditable}
+                      onClick={() => activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript')}
                       title={tr('actionFormatWithSubscriptTitle')}
                       aria-label={tr('actionFormatWithSubscriptLabel')}
                     >
@@ -612,9 +612,8 @@ export default function ToolbarPlugin({
                       </span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
-                      onClick={() => {
-                        activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
-                      }}
+                      disabled={!isEditable}
+                      onClick={() => activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript')}
                       title={tr('actionFormatWithSuperscriptTitle')}
                       aria-label={tr('actionFormatWithSuperscriptLabel')}
                     >
@@ -628,13 +627,14 @@ export default function ToolbarPlugin({
                       </span>
                     </DropdownMenu.Item>
                     <DropdownMenu.Item
+                      disabled={!isEditable}
                       onClick={clearFormatting}
                       className="item"
                       title={tr('actionClearTextFormatting')}
                       aria-label={tr('actionClearTextFormatting')}
                     >
                       <i className="c-rte-icon-clear c-rte-toolbar__dd-item__icon" />
-                      <span className="c-rte-toolbar__dd-item__text--clear">Clear Formatting</span>
+                      <span className="c-rte-toolbar__dd-item__text--clear">{tr('actionFormatClear')}</span>
                     </DropdownMenu.Item>
                   </>
                 }

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

@@ -7,7 +7,6 @@
  */
 
 @import './rich-text-editor-icons.css';
-@import './plugins/ActionsPlugin/index.css';
 @import './plugins/CodeActionMenuPlugin/index.css';
 @import './plugins/DraggableBlockPlugin/index.css';
 @import './plugins/TableActionMenuPlugin/index.css';

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

@@ -26,7 +26,6 @@ import { BaseNodes } from './nodes/BaseNodes';
 import AutoLinkPlugin from './plugins/AutoLinkPlugin';
 import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
 import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
-import { DimensionDetectorPlugin } from './plugins/DimensionsDetectorPlugin';
 import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin';
 import LinkPlugin from './plugins/LinkPlugin';
@@ -71,7 +70,7 @@ export function RichTextEditor({
   labelTranslations,
   ...rest
 }: TRichTextBase & {
-  initialData?: CrystallizeRichText;
+  initialData?: CrystallizeRichText | null;
 }) {
   return (
     <LexicalComposer
@@ -79,15 +78,11 @@ export function RichTextEditor({
         editable: !rest.disabled,
         namespace: 'crystallize-rich-text-editor',
         nodes: [...BaseNodes],
+        theme: CrystallizeRTEditorTheme,
+        editorState: initialData ? composeInitialState({ richText: initialData }) : undefined,
         onError: (error: Error) => {
           throw error;
         },
-        theme: CrystallizeRTEditorTheme,
-        editorState: initialData
-          ? composeInitialState({
-              richText: initialData,
-            })
-          : undefined,
       }}
     >
       <I18nProvider language={language} labelTranslations={labelTranslations}>
@@ -119,7 +114,6 @@ function RichTextEditorWithoutContext({
 
   const [editor] = useLexicalComposerContext();
   const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
-  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false);
   const firstOnChangeTriggeredRef = useRef(!autoFocus);
 
   const onRef = (_floatingAnchorElem: HTMLDivElement) => {
@@ -146,10 +140,7 @@ function RichTextEditorWithoutContext({
   return (
     <>
       <OnChangePlugin onChange={onLocalChange} ignoreSelectionChange />
-      <DimensionDetectorPlugin onChange={d => setIsSmallWidthViewport(d.isSmallWidth)} />
-      {isSmallWidthViewport ? null : (
-        <ToolbarPlugin actionsMenuPrepend={actionsMenuPrepend} actionsMenuAppend={actionsMenuAppend} />
-      )}
+      <ToolbarPlugin actionsMenuPrepend={actionsMenuPrepend} actionsMenuAppend={actionsMenuAppend} />
       {slotPreContent}
       <div className={`c-rte-editor-container ${disabled ? 'disabled' : ''}`}>
         {maxLength != null ? <MaxLengthPlugin maxLength={maxLength} /> : null}
@@ -178,7 +169,7 @@ function RichTextEditorWithoutContext({
         <HorizontalRulePlugin />
         <TabFocusPlugin />
         <TabIndentationPlugin />
-        {floatingAnchorElem && !isSmallWidthViewport && (
+        {floatingAnchorElem && (
           <>
             {/* <DraggableBlockPlugin anchorElem={floatingAnchorElem} /> */}
             <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />

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

@@ -6,7 +6,7 @@ import type { CrystallizeRichTextTableNodes } from './table';
 export type { CrystallizeRichTextCodeNodes } from './code';
 export type { CrystallizeRichTextHeadingNodes } from './headings';
 
-export type CrystallizeRichText = CrystallizeRichTextNode | CrystallizeRichTextNode[];
+export type CrystallizeRichText = CrystallizeRichTextNode[];
 
 type CrystallizeRichTextNodeBase = {
   textContent?: string;

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

@@ -1,3 +0,0 @@
-.c-rte-actions-plugin {
-  @apply z-50 flex items-center;
-}

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

@@ -1,49 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-type Dimensions = {
-  isSmallWidth: boolean;
-  width: number;
-};
-
-type DimensionDetectorPluginProps = {
-  onChange: (p: Dimensions) => void;
-};
-
-export function DimensionDetectorPlugin({ onChange }: DimensionDetectorPluginProps) {
-  const [dimensions, setDimensions] = useState<Dimensions>();
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      const el = ref.current;
-      const resizeObserver = new ResizeObserver(entries => {
-        const [first] = entries;
-        if (first) {
-          const [contentBox] = first.contentBoxSize;
-          if (contentBox) {
-            const width = contentBox.inlineSize;
-            setDimensions({
-              width,
-              /**
-               * 600 is (currently) the point before action button crashes with
-               * the rest of the toolbar buttons.
-               */
-              isSmallWidth: width < 600,
-            });
-          }
-        }
-      });
-      resizeObserver.observe(el);
-
-      return () => resizeObserver.disconnect();
-    }
-  }, []);
-
-  useEffect(() => {
-    if (dimensions) {
-      onChange(dimensions);
-    }
-  }, [dimensions, onChange]);
-
-  return <div ref={ref} style={{ height: 1, marginTop: -1 }} />;
-}