@crystallize/design-system 1.16.6 → 1.17.1

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/stack-icon/index.ts

@@ -0,0 +1 @@
+export { StackIcon } from './stack-icon';

package/src/stack-icon/stack-icon.stories.tsx

@@ -0,0 +1,24 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { StackIcon } from '.';
+import { Icon } from '../iconography';
+
+const meta: Meta<typeof StackIcon> = {
+  title: 'Components/StackIcon',
+  component: StackIcon,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof StackIcon>;
+
+export const WithTypeCreate: Story = {
+  name: 'With type create',
+  render: () => (
+    <div>
+      <StackIcon type="create">
+        <Icon.Catalogue width={24} height={24} />
+      </StackIcon>
+    </div>
+  ),
+};

package/src/stack-icon/stack-icon.tsx

@@ -0,0 +1,23 @@
+import { Icon } from '../iconography';
+
+type StackIconProps = {
+  type: 'create';
+  children: React.ReactNode;
+  size?: number;
+};
+
+export function StackIcon({ type, children, size = 18 }: StackIconProps) {
+  return (
+    <span className="relative leading-[0] inline-block">
+      {type === 'create' && (
+        <span
+          style={{ width: size, height: size }}
+          className="absolute right-0 top-0 flex -translate-y-1/3 translate-x-1/3 items-center justify-center rounded border border-solid border-white bg-gray-50-900"
+        >
+          <Icon.Add width={size - 4} height={size - 4} />
+        </span>
+      )}
+      {children}
+    </span>
+  );
+}

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 }} />;
-}