@crystallize/design-system 1.4.0 → 1.4.1

package/src/rich-text-editor/tests/rich-text-editor-model-basics.test.tsx

@@ -0,0 +1,56 @@
+import { render } from '@testing-library/react';
+
+import type { CrystallizeRichText } from '../model/crystallize-rich-text-types';
+import { RichTextEditor } from '../rich-text-editor';
+import { sleep } from './utils';
+
+describe('RichTextEditor model basics', () => {
+  it('will leave a simple model unchanged', async () => {
+    const onChange = vi.fn();
+
+    render(
+      <RichTextEditor
+        initialData={[{ kind: 'block', type: 'paragraph', textContent: 'rabbit' }]}
+        triggerOnChangeOnAutoFocus
+        autoFocus
+        onChange={onChange}
+      />,
+    );
+
+    await sleep(1);
+
+    expect(onChange).toBeCalledWith([
+      { kind: 'block', type: 'paragraph', textContent: 'rabbit' },
+    ] as CrystallizeRichText);
+  });
+
+  it('will bump the textContent to the parent if it is a single text leaf node', async () => {
+    const onChange = vi.fn();
+
+    render(
+      <RichTextEditor
+        initialData={[
+          {
+            kind: 'block',
+            type: 'paragraph',
+            children: [
+              {
+                textContent: 'rabbit',
+                kind: 'inline',
+              },
+            ],
+          },
+        ]}
+        onChange={onChange}
+        triggerOnChangeOnAutoFocus
+        autoFocus
+      />,
+    );
+
+    await sleep(1);
+
+    expect(onChange).toBeCalledWith([
+      { kind: 'block', type: 'paragraph', textContent: 'rabbit' },
+    ] as CrystallizeRichText);
+  });
+});

package/src/rich-text-editor/tests/rich-text-editor-model-conversions.test.tsx

@@ -0,0 +1,195 @@
+import { render } from '@testing-library/react';
+
+import type { CrystallizeRichText, CrystallizeRichTextNode } from '../model/crystallize-rich-text-types';
+import { RichTextEditor } from '../rich-text-editor';
+import { sleep } from './utils';
+
+/**
+ * In these tests, we are ensuring that the conversion from
+ * CrystallizeRichText to Lexial back to CrystallizeRichText works
+ * like expected.
+ */
+
+const dataTypes: { name: string; model: CrystallizeRichText }[] = [
+  {
+    name: 'unordered-list',
+    model: [
+      {
+        kind: 'block',
+        type: 'unordered-list',
+        children: [
+          {
+            textContent: 'rabbit',
+            type: 'list-item',
+            kind: 'block',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'ordered-list',
+    model: [
+      {
+        kind: 'block',
+        type: 'ordered-list',
+        children: [
+          {
+            textContent: 'rabbit',
+            type: 'list-item',
+            kind: 'block',
+          },
+        ],
+      },
+    ],
+  },
+  // Headings
+  ...[1, 2, 3, 4, 5, 6].map(v => ({
+    name: 'heading' + v,
+    model: [
+      {
+        kind: 'block',
+        type: 'heading' + v,
+        textContent: 'Hi there',
+      },
+    ] as CrystallizeRichText,
+  })),
+  {
+    name: 'paragraph',
+    model: [
+      {
+        kind: 'block',
+        type: 'paragraph',
+        textContent: 'Hi there',
+      },
+    ],
+  },
+  {
+    name: 'horizontal-line',
+    model: [
+      {
+        kind: 'block',
+        type: 'horizontal-line',
+      },
+    ],
+  },
+  {
+    name: 'code (inline)',
+    model: [
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: [
+          {
+            type: 'code',
+            kind: 'inline',
+            textContent: 'I am code',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'code (block)',
+    model: [
+      {
+        kind: 'block',
+        type: 'code',
+        textContent: 'I am code',
+        metadata: {
+          language: 'javascript',
+        },
+      },
+    ],
+  },
+  {
+    name: 'link',
+    model: [
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: [
+          {
+            kind: 'inline',
+            type: 'link',
+            textContent: 'I am link',
+            metadata: {
+              href: '#',
+              rel: '...',
+              target: '...',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'table',
+    model: [
+      {
+        kind: 'block',
+        type: 'table',
+        children: [
+          {
+            kind: 'block',
+            type: 'table-row',
+            children: [
+              {
+                type: 'table-cell',
+                kind: 'inline',
+                textContent: 'Hi from',
+              },
+              {
+                type: 'table-cell',
+                kind: 'inline',
+                textContent: 'a table',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'inline text formatting',
+    model: [
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: ['underlined', 'emphasized', 'strong', 'superscripted', 'subscripted', 'deleted'].map(
+          type =>
+            ({
+              kind: 'inline',
+              textContent: type,
+              type,
+            } as CrystallizeRichTextNode),
+        ),
+      },
+    ],
+  },
+  {
+    name: 'quote',
+    model: [
+      {
+        kind: 'block',
+        type: 'quote',
+        textContent: 'Simon says: ...',
+      },
+    ],
+  },
+];
+
+describe('RichTextEditor model conversions', () => {
+  dataTypes.forEach(dataType => {
+    it('correctly converts an ' + dataType.name, async () => {
+      const onChange = vi.fn();
+
+      render(<RichTextEditor initialData={dataType.model} onChange={onChange} triggerOnChangeOnAutoFocus autoFocus />);
+
+      await sleep(1);
+
+      expect(onChange).toBeCalledTimes(1);
+      expect(onChange).toBeCalledWith(dataType.model);
+    });
+  });
+});

package/src/rich-text-editor/tests/rich-text-editor-onchange.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { RichTextEditor } from '../rich-text-editor';
+
+describe('RichTextEditor onChange behaves like expected', () => {
+  it('will fire exactly 1 onChange if a single character was entered', async () => {
+    const onChange = vi.fn();
+
+    render(
+      <RichTextEditor
+        initialData={[
+          {
+            type: 'paragraph',
+            kind: 'block',
+            textContent: 'Hi',
+          },
+        ]}
+        onChange={onChange}
+      />,
+    );
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+
+    const user = userEvent.setup();
+    await user.type(screen.getByRole('textbox'), '!');
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith([
+      {
+        type: 'paragraph',
+        kind: 'block',
+        textContent: 'Hi!',
+      },
+    ]);
+  });
+});

package/src/rich-text-editor/tests/rich-text-editor-quote.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { CrystallizeRichText, RichTextEditor } from '../rich-text-editor';
+
+describe('RichTextEditor code node', () => {
+  it('can replace an existing paragraph to a quote with clicking a dropdown item', async () => {
+    const onChange = vi.fn();
+
+    render(
+      <RichTextEditor
+        initialData={[
+          {
+            type: 'paragraph',
+            kind: 'block',
+            textContent: 'Simon says: hey there',
+          },
+        ]}
+        onChange={onChange}
+      />,
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByTestId('toggle-block-format'));
+    await user.click(screen.getByTestId('toggle-block-format-quote'));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        type: 'quote',
+        kind: 'block',
+        textContent: 'Simon says: hey there',
+      },
+    ] as CrystallizeRichText);
+  });
+});

package/src/rich-text-editor/tests/rich-text-editor-text-formats.test.tsx

@@ -0,0 +1,135 @@
+/* eslint-disable no-console */
+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 { selectTextInElement } from './utils';
+
+describe('RichTextEditor text formats', () => {
+  it('can change a text format from bold to normal', async () => {
+    const onChange = vi.fn();
+    render(
+      <RichTextEditor
+        initialData={[
+          {
+            kind: 'block',
+            type: 'paragraph',
+            children: [
+              {
+                kind: 'inline',
+                textContent: 'Check out the ',
+              },
+              {
+                kind: 'inline',
+                textContent: 'bold',
+                type: 'strong',
+              },
+            ],
+          },
+        ]}
+        onChange={onChange}
+      />,
+    );
+
+    const user = userEvent.setup();
+
+    await user.dblClick(screen.getByText('bold'));
+    await user.click(screen.getByTestId('toggle-format-bold'));
+
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        kind: 'block',
+        type: 'paragraph',
+        textContent: 'Check out the bold',
+      },
+    ]);
+  });
+
+  it('can change a word to bold when you select the word and click the toggle button', async () => {
+    const onChange = vi.fn();
+    render(
+      <RichTextEditor
+        initialData={[
+          {
+            kind: 'block',
+            type: 'paragraph',
+            textContent: 'Check out the bold text',
+          },
+        ]}
+        onChange={onChange}
+      />,
+    );
+
+    await selectTextInElement({
+      element: screen.getByText('Check out the bold text'),
+      startOffset: 'Check out the '.length,
+      endOffset: 'Check out the bold'.length,
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByTestId('toggle-format-bold'));
+
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: [
+          {
+            kind: 'inline',
+            textContent: 'Check out the ',
+          },
+          {
+            kind: 'inline',
+            type: 'strong',
+            textContent: 'bold',
+          },
+          {
+            kind: 'inline',
+            textContent: ' text',
+          },
+        ],
+      },
+    ] as CrystallizeRichText);
+  });
+
+  it('can change a text format from italic to normal', async () => {
+    const onChange = vi.fn();
+    render(
+      <RichTextEditor
+        initialData={[
+          {
+            kind: 'block',
+            type: 'paragraph',
+            children: [
+              {
+                kind: 'inline',
+                textContent: 'Check out the ',
+              },
+              {
+                kind: 'inline',
+                textContent: 'italic',
+                type: 'emphasized',
+              },
+            ],
+          },
+        ]}
+        onChange={onChange}
+      />,
+    );
+
+    const user = userEvent.setup();
+
+    await user.dblClick(screen.getByText('italic'));
+    await user.click(screen.getByTestId('toggle-format-emphasized'));
+
+    expect(onChange).toBeCalledTimes(1);
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        kind: 'block',
+        type: 'paragraph',
+        textContent: 'Check out the italic',
+      },
+    ]);
+  });
+});

package/src/rich-text-editor/tests/rich-text-editor-typing.test.tsx

@@ -0,0 +1,73 @@
+import { faker } from '@faker-js/faker';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { RichTextEditor } from '../rich-text-editor';
+
+describe('RichTextEditor typing', () => {
+  // it('can type text in an empty editor', async () => {
+  //   const onChange = vi.fn();
+
+  //   render(<RichTextEditor onChange={onChange} />);
+
+  //   const user = userEvent.setup();
+
+  //   const addedText = 'wft';
+
+  //   // fireEvent.focus(screen.getByRole('textbox'));
+  //   // await user.click(screen.getByRole('textbox'));
+  //   // await user.keyboard(addedText);
+
+  //   screen.getByRole('textbox').focus();
+
+  //   await user.type(screen.getByRole('textbox'), addedText);
+
+  //   expect(screen.getByText(addedText)).toBeInTheDocument();
+
+  //   // expect(onChange).toBeCalled();
+  //   // expect(onChange).toHaveBeenLastCalledWith([{ kind: 'block', type: 'paragraph', textContent: addedText }]);
+  // });
+
+  it('can change a simple text, keeping the textContent on paragraph', async () => {
+    const onChange = vi.fn();
+    const initialText = 'rabbit';
+    render(
+      <RichTextEditor
+        initialData={[{ kind: 'block', type: 'paragraph', textContent: initialText }]}
+        onChange={onChange}
+      />,
+    );
+
+    const user = userEvent.setup();
+
+    const addedText = faker.lorem.paragraph();
+
+    await user.type(screen.getByRole('textbox'), addedText);
+
+    const endText = initialText + addedText;
+
+    expect(screen.getByText(endText)).toBeInTheDocument();
+    expect(onChange).toHaveBeenLastCalledWith([{ kind: 'block', type: 'paragraph', textContent: endText }]);
+  });
+
+  it('can type a text with line breaks', async () => {
+    const onChange = vi.fn();
+    const initialText = 'rabbit';
+    render(
+      <RichTextEditor
+        initialData={[{ kind: 'block', type: 'paragraph', textContent: initialText }]}
+        onChange={onChange}
+      />,
+    );
+
+    const user = userEvent.setup();
+
+    const addedText = faker.lorem.paragraphs();
+
+    await user.type(screen.getByRole('textbox'), addedText);
+
+    const endText = initialText + addedText;
+
+    expect(onChange).toHaveBeenLastCalledWith([{ kind: 'block', type: 'paragraph', textContent: endText }]);
+  });
+});

package/src/rich-text-editor/tests/utils.ts

@@ -0,0 +1,23 @@
+export const sleep = (t: number) => new Promise(r => setTimeout(r, t));
+
+export async function selectTextInElement({
+  element,
+  startOffset,
+  endOffset,
+}: {
+  element: HTMLElement;
+  startOffset: number;
+  endOffset: number;
+}) {
+  // For some reason, it is always good to sleep a bit before trying this
+  await sleep(1);
+
+  const firstChild = element.firstChild as ChildNode;
+  const range = document.createRange();
+  range.setStart(firstChild, startOffset);
+  range.setEnd(firstChild, endOffset);
+
+  const selection = document.getSelection() as Selection;
+  selection.removeAllRanges();
+  selection.addRange(range);
+}