npm - @crystallize/design-system - Versions diffs - 1.3.2 → 1.4.1 - Mend

@crystallize/design-system 1.3.2 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (246) hide show

package/src/rich-text-editor/rich-text-editor.stories.tsx ADDED Viewed

@@ -0,0 +1,385 @@
+/* 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';
+const meta: Meta<typeof RichTextEditor> = {
+  title: 'Components/RichTextEditor',
+  component: RichTextEditor,
+  argTypes: {
+    initialData: {},
+  },
+  decorators: [
+    Story => (
+      <div className="bg-gray-50-900 p-10">
+        <div className="shadow-md border-red bg-white max-w-[1100px] mx-auto rounded-md">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+};
+export default meta;
+type Story = StoryObj<typeof RichTextEditor>;
+const fullModel: CrystallizeRichText = [
+  {
+    kind: 'block',
+    type: 'heading1',
+    textContent: 'Whoa, an h1 heading?',
+  },
+  {
+    kind: 'block',
+    type: 'heading2',
+    textContent: 'Yikes, another heading? h2?',
+  },
+  {
+    kind: 'block',
+    type: 'heading3',
+    textContent: 'Wait, a third heading? h3?',
+  },
+  {
+    kind: 'block',
+    type: 'horizontal-line',
+  },
+  {
+    kind: 'block',
+    type: 'paragraph',
+    children: [
+      {
+        kind: 'inline',
+        textContent: 'You can do ',
+      },
+      {
+        kind: 'inline',
+        textContent: 'strong',
+        type: 'strong',
+      },
+      {
+        kind: 'inline',
+        textContent: ' and ',
+      },
+      {
+        kind: 'inline',
+        type: 'emphasized',
+        textContent: 'italic',
+      },
+      {
+        kind: 'inline',
+        textContent: ', and ',
+      },
+      {
+        kind: 'inline',
+        type: 'underlined',
+        textContent: 'underlined',
+      },
+      {
+        kind: 'inline',
+        textContent: ' text formats',
+      },
+    ],
+  },
+  {
+    kind: 'block',
+    type: 'paragraph',
+    children: [
+      {
+        kind: 'inline',
+        textContent: 'Here is a paragraph with a ',
+      },
+      {
+        kind: 'inline',
+        type: 'link',
+        metadata: {
+          href: 'https://crystallize.com',
+        },
+        textContent: 'link',
+      },
+      {
+        kind: 'inline',
+        textContent: ' and a ',
+      },
+      {
+        kind: 'inline',
+        type: 'line-break',
+      },
+      {
+        kind: 'inline',
+        textContent: 'line break',
+      },
+    ],
+  },
+  {
+    kind: 'block',
+    type: 'code',
+    textContent: 'const you = "can also do code";\nconst thisIs: string = "typescript"',
+    metadata: {
+      language: 'typescript',
+    },
+  },
+  {
+    kind: 'block',
+    type: 'code',
+    textContent: '<!DOCTYPE html>\n<html lang="en">\n<h1>But HTML works just as fine</h1>',
+    metadata: {
+      language: 'html',
+    },
+  },
+  {
+    kind: 'block',
+    type: 'paragraph',
+    textContent: 'Here is an ordered list',
+  },
+  {
+    kind: 'block',
+    type: 'ordered-list',
+    children: [
+      {
+        kind: 'block',
+        type: 'list-item',
+        textContent: 'first list item',
+      },
+      {
+        kind: 'block',
+        type: 'list-item',
+        textContent: 'second list item',
+      },
+    ],
+  },
+  {
+    kind: 'block',
+    type: 'paragraph',
+    textContent: 'Here is an unordered list',
+  },
+  {
+    kind: 'block',
+    type: 'unordered-list',
+    children: [
+      {
+        kind: 'block',
+        type: 'list-item',
+        textContent: 'first list item',
+      },
+      {
+        kind: 'block',
+        type: 'list-item',
+        textContent: 'second list item',
+      },
+    ],
+  },
+];
+export const AllElements: Story = {
+  args: {
+    initialData: fullModel,
+    onChange() {
+      console.log('onChange');
+      // console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+export const UsingSlotPreContent: Story = {
+  args: {
+    slotPreContent: <div>Hello there 👋</div>,
+  },
+};
+export const SimpleText: Story = {
+  args: {
+    initialData: [
+      {
+        type: 'paragraph',
+        kind: 'block',
+        textContent: 'Hello there',
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+export const BlankSheet: Story = {
+  args: {
+    initialData: [],
+    placeholder: 'Some content in here',
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+export const CodeInlined: Story = {
+  args: {
+    initialData: [
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: [
+          {
+            kind: 'inline',
+            textContent: 'Here come some ',
+          },
+          {
+            kind: 'inline',
+            type: 'code',
+            textContent: `var r = 1`,
+            metadata: {
+              language: 'typescript',
+            },
+          },
+          {
+            kind: 'inline',
+            textContent: '! Would you look at that?',
+          },
+        ],
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+export const CodeBlock: Story = {
+  args: {
+    initialData: [
+      {
+        type: 'paragraph',
+        kind: 'block',
+        textContent: 'const aVariable = 42;',
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+export const LineBreak: Story = {
+  args: {
+    initialData: [
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: [
+          {
+            kind: 'inline',
+            textContent: 'There is a ',
+          },
+          {
+            kind: 'inline',
+            type: 'line-break',
+          },
+          {
+            kind: 'inline',
+            textContent: 'line break here (as a node)',
+          },
+        ],
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+export const Table: Story = {
+  args: {
+    initialData: [
+      {
+        kind: 'block',
+        type: 'table',
+        children: [
+          {
+            kind: 'block',
+            type: 'table-row',
+            children: [
+              {
+                type: 'table-cell',
+                kind: 'inline',
+                textContent: 'Hi',
+              },
+              {
+                type: 'table-cell',
+                kind: 'inline',
+                textContent: 'from',
+              },
+            ],
+          },
+          {
+            kind: 'block',
+            type: 'table-row',
+            children: [
+              {
+                type: 'table-cell',
+                kind: 'inline',
+                textContent: 'a',
+              },
+              {
+                type: 'table-cell',
+                kind: 'inline',
+                textContent: 'table',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+export const InlineTextFormats: Story = {
+  args: {
+    initialData: [
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: ['underlined', 'emphasized', 'strong', 'superscripted', 'subscripted', 'deleted'].map(
+          type =>
+            ({
+              kind: 'inline',
+              textContent: type,
+              type,
+            } as CrystallizeRichTextNode),
+        ),
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+export const Quote: Story = {
+  args: {
+    initialData: [
+      {
+        kind: 'block',
+        type: 'quote',
+        textContent: 'Simon says: convert that into Typescript!',
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};

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

@@ -0,0 +1,228 @@
+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';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
+import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
+import './rich-text-editor.css';
+import { useSettings } from './context/SettingsContext';
+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';
+import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin';
+import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin';
+import { MaxLengthPlugin } from './plugins/MaxLengthPlugin';
+import SpeechToTextPlugin from './plugins/SpeechToTextPlugin';
+import TabFocusPlugin from './plugins/TabFocusPlugin';
+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 ContentEditable from './ui/ContentEditable';
+// Types
+export type { CrystallizeRichText } from './model/crystallize-rich-text-types';
+export * from './types';
+type TRichTextBase = {
+  placeholder?: string;
+  onChange?: (data: CrystallizeRichText) => void;
+  triggerOnChangeOnAutoFocus?: boolean;
+  autoFocus?: boolean;
+  actionsMenuPrepend?: CrystallizeRichTextActionMenuItem[];
+  actionsMenuAppend?: CrystallizeRichTextActionMenuItem[];
+  slotPreContent?: ReactNode;
+};
+export function RichTextEditor({
+  initialData,
+  editable = true,
+  ...rest
+}: TRichTextBase & {
+  initialData?: CrystallizeRichText;
+  editable?: boolean;
+}) {
+  return (
+    <LexicalComposer
+      initialConfig={{
+        namespace: 'crystallize-rich-text-editor',
+        nodes: [...BaseNodes],
+        editable,
+        onError: (error: Error) => {
+          throw error;
+        },
+        theme: PlaygroundEditorTheme,
+        editorState: initialData
+          ? composeInitialState({
+              richText: initialData,
+            })
+          : undefined,
+      }}
+    >
+      <SharedHistoryContext>
+        <TableContext>
+          <div className="editor-shell">
+            <RichTextEditorWithoutContext {...rest} />
+          </div>
+        </TableContext>
+      </SharedHistoryContext>
+    </LexicalComposer>
+  );
+}
+function RichTextEditorWithoutContext({
+  placeholder: placeholderText,
+  onChange,
+  triggerOnChangeOnAutoFocus,
+  autoFocus,
+  actionsMenuPrepend,
+  actionsMenuAppend,
+  slotPreContent,
+}: 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 [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
+  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false);
+  const firstOnChangeTriggeredRef = useRef(!autoFocus);
+  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem);
+    }
+  };
+  // Deal with different window sizes
+  useEffect(() => {
+    const updateViewPortWidth = () => {
+      const isNextSmallWidthViewport = window.matchMedia('(max-width: 1025px)').matches;
+      if (isNextSmallWidthViewport !== isSmallWidthViewport) {
+        setIsSmallWidthViewport(isNextSmallWidthViewport);
+      }
+    };
+    window.addEventListener('resize', updateViewPortWidth);
+    return () => {
+      window.removeEventListener('resize', updateViewPortWidth);
+    };
+  }, [isSmallWidthViewport]);
+  function onLocalChange(editorState: EditorState) {
+    if (onChange) {
+      if (triggerOnChangeOnAutoFocus || firstOnChangeTriggeredRef.current) {
+        onChange(lexicalToCrystallizeRichText({ editorState }));
+      }
+    }
+    firstOnChangeTriggeredRef.current = true;
+  }
+  return (
+    <>
+      <OnChangePlugin onChange={onLocalChange} ignoreSelectionChange />
+      <ToolbarPlugin actionsMenuPrepend={actionsMenuPrepend} actionsMenuAppend={actionsMenuAppend} />
+      {slotPreContent}
+      <div className="editor-container">
+        {isMaxLength && <MaxLengthPlugin maxLength={30} />}
+        <DragDropPaste />
+        {!autoFocus ? null : <AutoFocusPlugin />}
+        <ClearEditorPlugin />
+        <ComponentPickerPlugin />
+        <SpeechToTextPlugin />
+        <AutoLinkPlugin />
+        <HistoryPlugin externalHistoryState={historyState} />
+        <RichTextPlugin
+          contentEditable={
+            <div className="editor-scroller">
+              <div className="editor" ref={onRef}>
+                <ContentEditable />
+              </div>
+            </div>
+          }
+          placeholder={placeholder}
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+        <MarkdownShortcutPlugin />
+        <CodeHighlightPlugin />
+        <ListPlugin />
+        <ListMaxIndentLevelPlugin maxDepth={7} />
+        <TablePlugin />
+        <TableCellResizer />
+        <NewTablePlugin
+          cellEditorConfig={{
+            namespace: 'Playground',
+            nodes: [...TableCellNodes],
+            onError: (error: Error) => {
+              throw error;
+            },
+            theme: PlaygroundEditorTheme,
+          }}
+        >
+          {!autoFocus ? <></> : <AutoFocusPlugin />}
+          <RichTextPlugin
+            contentEditable={<ContentEditable className="TableNode__contentEditable" />}
+            placeholder={null}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          <HistoryPlugin />
+          <LinkPlugin />
+          <FloatingTextFormatToolbarPlugin />
+        </NewTablePlugin>
+        <LinkPlugin />
+        <HorizontalRulePlugin />
+        <TabFocusPlugin />
+        <TabIndentationPlugin />
+        {floatingAnchorElem && !isSmallWidthViewport && (
+          <>
+            <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 ADDED Viewed

@@ -0,0 +1,47 @@
+/* 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 { sleep } from './utils';
+const emptyParagraph: CrystallizeRichText = [{ kind: 'block', type: 'paragraph', textContent: 'rabbit' }];
+describe('RichTextEditor basic rendering', () => {
+  it('shows placeholder when no initial data is passed', async () => {
+    const onChange = vi.fn();
+    await render(<RichTextEditor placeholder="Get your content in here" />);
+    await sleep(1);
+    expect(screen.getByText('Get your content in here')).toBeInTheDocument();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  it('should not trigger onChange on mount when no initialData is passed', async () => {
+    const onChange = vi.fn();
+    await render(<RichTextEditor onChange={onChange} />);
+    await sleep(1);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  it('should not trigger onChange on mount when initialData is passed', async () => {
+    const onChange = vi.fn();
+    await render(<RichTextEditor initialData={emptyParagraph} onChange={onChange} />);
+    await sleep(1);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  it('should trigger onChange on mount if triggerOnChangeOnAutoFocus and autoFocus is passed', async () => {
+    const onChange = vi.fn();
+    await render(
+      <RichTextEditor initialData={emptyParagraph} onChange={onChange} triggerOnChangeOnAutoFocus autoFocus />,
+    );
+    await sleep(1);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(emptyParagraph);
+  });
+});

package/src/rich-text-editor/tests/rich-text-editor-code.test.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RichTextEditor } from '../rich-text-editor';
+describe('RichTextEditor code node', () => {
+  it('can add a code block to an existing paragraph text', async () => {
+    const onChange = vi.fn();
+    render(
+      <RichTextEditor
+        initialData={[
+          {
+            type: 'paragraph',
+            kind: 'block',
+            textContent: 'const aVariable = 42;',
+          },
+        ]}
+        onChange={onChange}
+      />,
+    );
+    const user = userEvent.setup();
+    await user.click(screen.getByTestId('toggle-block-format'));
+    await user.click(screen.getByTestId('toggle-block-format-code'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        type: 'code',
+        kind: 'block',
+        textContent: 'const aVariable = 42;',
+        metadata: {
+          language: 'javascript',
+        },
+      },
+    ]);
+  });
+});