@crystallize/design-system 1.7.0 → 1.8.0

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

@@ -11,6 +11,7 @@
   max-width: 1100px;
   position: relative;
   line-height: 1.7;
+
   > * {
     box-sizing: border-box;
   }
@@ -90,63 +91,6 @@
     background-color: rgba(60, 132, 244, 0.5);
   }
 
-  .editor-image .image-resizer {
-    display: block;
-    width: 7px;
-    height: 7px;
-    position: absolute;
-    background-color: rgb(60, 132, 244);
-    border: 1px solid #fff;
-  }
-
-  .editor-image .image-resizer.image-resizer-n {
-    top: -6px;
-    left: 48%;
-    cursor: n-resize;
-  }
-
-  .editor-image .image-resizer.image-resizer-ne {
-    top: -6px;
-    right: -6px;
-    cursor: ne-resize;
-  }
-
-  .editor-image .image-resizer.image-resizer-e {
-    bottom: 48%;
-    right: -6px;
-    cursor: e-resize;
-  }
-
-  .editor-image .image-resizer.image-resizer-se {
-    bottom: -2px;
-    right: -6px;
-    cursor: nwse-resize;
-  }
-
-  .editor-image .image-resizer.image-resizer-s {
-    bottom: -2px;
-    left: 48%;
-    cursor: s-resize;
-  }
-
-  .editor-image .image-resizer.image-resizer-sw {
-    bottom: -2px;
-    left: -6px;
-    cursor: sw-resize;
-  }
-
-  .editor-image .image-resizer.image-resizer-w {
-    bottom: 48%;
-    left: -6px;
-    cursor: w-resize;
-  }
-
-  .editor-image .image-resizer.image-resizer-nw {
-    top: -6px;
-    left: -6px;
-    cursor: nw-resize;
-  }
-
   .editor-scroller {
     min-height: 150px;
     border: 0;
@@ -512,10 +456,6 @@
     background-image: url(images/icons/indent.svg);
   }
 
-  i.markdown {
-    background-image: url(images/icons/markdown.svg);
-  }
-
   i.outdent {
     background-image: url(images/icons/outdent.svg);
   }
@@ -724,98 +664,6 @@
     color: red;
   }
 
-  .dropdown {
-    z-index: 10;
-    display: block;
-    position: fixed;
-    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
-      inset 0 0 0 1px rgba(255, 255, 255, 0.5);
-    border-radius: 8px;
-    min-height: 40px;
-    background-color: #fff;
-  }
-
-  .dropdown .item {
-    margin: 0 8px 0 8px;
-    padding: 8px;
-    color: #050505;
-    cursor: pointer;
-    line-height: 16px;
-    font-size: 15px;
-    display: flex;
-    align-content: center;
-    flex-direction: row;
-    flex-shrink: 0;
-    justify-content: space-between;
-    background-color: #fff;
-    border-radius: 8px;
-    border: 0;
-    max-width: 250px;
-    min-width: 100px;
-  }
-
-  .dropdown .item.fontsize-item,
-  .dropdown .item.fontsize-item .text {
-    min-width: unset;
-  }
-
-  .dropdown .item .active {
-    display: flex;
-    width: 20px;
-    height: 20px;
-    background-size: contain;
-  }
-
-  .dropdown .item:first-child {
-    margin-top: 8px;
-  }
-
-  .dropdown .item:last-child {
-    margin-bottom: 8px;
-  }
-
-  .dropdown .item:hover {
-    background-color: #eee;
-  }
-
-  .dropdown .item .text {
-    display: flex;
-    line-height: 20px;
-    flex-grow: 1;
-    min-width: 150px;
-  }
-
-  .dropdown .item .icon {
-    display: flex;
-    width: 20px;
-    height: 20px;
-    user-select: none;
-    margin-right: 12px;
-    line-height: 16px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-
-  .dropdown .divider {
-    width: auto;
-    background-color: #eee;
-    margin: 4px 8px;
-    height: 1px;
-  }
-
-  @media screen and (max-width: 1100px) {
-    .dropdown-button-text {
-      display: none !important;
-    }
-    .font-size .dropdown-button-text {
-      display: flex !important;
-    }
-    .code-language .dropdown-button-text {
-      display: flex !important;
-    }
-  }
-
   .icon.paragraph {
     background-image: url(images/icons/text-paragraph.svg);
   }
@@ -886,74 +734,8 @@
     }
   }
 
-  .switch {
-    display: block;
-    color: #444;
-    margin: 5px 0;
-    background-color: rgba(238, 238, 238, 0.7);
-    padding: 5px 10px;
-    border-radius: 10px;
-  }
-
-  #rich-text-switch {
-    right: 0;
-  }
-
-  #character-count-switch {
-    right: 130px;
-  }
-
-  .switch label {
-    margin-right: 5px;
-    line-height: 24px;
-    width: 100px;
-    font-size: 14px;
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .switch button {
-    background-color: rgb(206, 208, 212);
-    height: 24px;
-    box-sizing: border-box;
-    border-radius: 12px;
-    width: 44px;
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-    outline: none;
-    cursor: pointer;
-    transition: background-color 0.1s;
-    border: 2px solid transparent;
-  }
-
-  .switch button:focus-visible {
-    border-color: blue;
-  }
-
-  .switch button span {
-    top: 0px;
-    left: 0px;
-    display: block;
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    border-radius: 12px;
-    background-color: white;
-    transition: transform 0.2s;
-  }
-
-  .switch button[aria-checked='true'] {
-    background-color: rgb(24, 119, 242);
-  }
-
-  .switch button[aria-checked='true'] span {
-    transform: translateX(20px);
-  }
-
-  .keyword {
-    color: rgb(241, 118, 94);
-    font-weight: bold;
+  [role='separator'] {
+    @apply h-px bg-gray-200-700;
   }
 
   .actions i.indent {
@@ -1028,106 +810,6 @@
     will-change: transform;
   }
 
-  .table-cell-action-button {
-    background-color: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 0;
-    position: relative;
-    border-radius: 15px;
-    color: #222;
-    display: inline-block;
-    cursor: pointer;
-  }
-
-  i.chevron-down {
-    background-color: transparent;
-    background-size: contain;
-    display: inline-block;
-    height: 8px;
-    width: 8px;
-    background-image: url(images/icons/chevron-down.svg);
-  }
-
-  .action-button {
-    background-color: #eee;
-    border: 0;
-    padding: 8px 12px;
-    position: relative;
-    margin-left: 5px;
-    border-radius: 15px;
-    color: #222;
-    display: inline-block;
-    cursor: pointer;
-  }
-
-  .action-button:hover {
-    background-color: #ddd;
-    color: #000;
-  }
-
-  .action-button-mic.active {
-    animation: mic-pulsate-color 3s infinite;
-  }
-  button.action-button:disabled {
-    opacity: 0.6;
-    background: #eee;
-    cursor: not-allowed;
-  }
-
-  @keyframes mic-pulsate-color {
-    0% {
-      background-color: #ffdcdc;
-    }
-    50% {
-      background-color: #ff8585;
-    }
-    100% {
-      background-color: #ffdcdc;
-    }
-  }
-
-  .debug-timetravel-panel {
-    overflow: hidden;
-    padding: 0 0 10px 0;
-    margin: auto;
-    display: flex;
-  }
-
-  .debug-timetravel-panel-slider {
-    padding: 0;
-    flex: 8;
-  }
-
-  .debug-timetravel-panel-button {
-    padding: 0;
-    border: 0;
-    background: none;
-    flex: 1;
-    color: #fff;
-    font-size: 12px;
-  }
-
-  .debug-timetravel-panel-button:hover {
-    text-decoration: underline;
-  }
-
-  .debug-timetravel-button {
-    border: 0;
-    padding: 0;
-    font-size: 12px;
-    top: 10px;
-    right: 15px;
-    position: absolute;
-    background: none;
-    color: #fff;
-  }
-
-  .debug-timetravel-button:hover {
-    text-decoration: underline;
-  }
-
   .connecting {
     font-size: 15px;
     color: #999;
@@ -1334,7 +1016,7 @@
   }
 
   .TableNode__contentEditable .CrystallizeRTEditorTheme__paragraph {
-    @apply mt-0;
+    @apply my-2;
   }
 
   .CrystallizeRTEditorTheme__blockCursor {
@@ -1359,3 +1041,9 @@
     }
   }
 }
+
+.c-rte-table-action-dropdown {
+  display: absolute;
+  right: 2px;
+  top: 2px;
+}

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

@@ -25,6 +25,14 @@ export default meta;
 
 type Story = StoryObj<typeof RichTextEditor>;
 
+function paragraphWithText(textContent: string): CrystallizeRichTextNode {
+  return {
+    kind: 'block',
+    type: 'paragraph',
+    textContent,
+  };
+}
+
 const fullModel: CrystallizeRichText = [
   {
     kind: 'block',
@@ -263,7 +271,7 @@ export const CodeBlock: Story = {
   args: {
     initialData: [
       {
-        type: 'paragraph',
+        type: 'code',
         kind: 'block',
         textContent: 'const aVariable = 42;',
       },
@@ -275,6 +283,28 @@ export const CodeBlock: Story = {
   },
 };
 
+export const CodeBlockWithinPre: Story = {
+  args: {
+    initialData: [
+      {
+        type: 'preformatted',
+        kind: 'block',
+        children: [
+          {
+            type: 'code',
+            kind: 'block',
+            textContent: 'const aVariable = 42;',
+          },
+        ],
+      },
+    ],
+    onChange(data) {
+      console.log('onChange');
+      console.log(JSON.stringify(data, null, 1));
+    },
+  },
+};
+
 export const LineBreak: Story = {
   args: {
     initialData: [
@@ -318,12 +348,12 @@ export const Table: Story = {
               {
                 type: 'table-cell',
                 kind: 'inline',
-                textContent: 'Hi',
+                children: [paragraphWithText('Hi')],
               },
               {
                 type: 'table-cell',
                 kind: 'inline',
-                textContent: 'from',
+                children: [paragraphWithText('from')],
               },
             ],
           },
@@ -334,12 +364,12 @@ export const Table: Story = {
               {
                 type: 'table-cell',
                 kind: 'inline',
-                textContent: 'a',
+                children: [paragraphWithText('a')],
               },
               {
                 type: 'table-cell',
                 kind: 'inline',
-                textContent: 'table',
+                children: [paragraphWithText('table')],
               },
             ],
           },

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

@@ -19,23 +19,16 @@ import { SharedHistoryContext, useSharedHistoryContext } from './context/SharedH
 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 CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
 import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
-import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';
-import DragDropPaste from './plugins/DragDropPastePlugin';
 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 CrystallizeRTEditorTheme from './themes/CrystallizeRTEditorTheme';
 import type { CrystallizeRichText } from './types/crystallize-rich-text-types';
@@ -90,11 +83,11 @@ export function RichTextEditor({
       }}
     >
       <SharedHistoryContext>
-        <TableContext>
-          <div className="c-rich-text-editor">
-            <RichTextEditorWithoutContext {...rest} editable={editable} />
-          </div>
-        </TableContext>
+        {/* <TableContext> */}
+        <div className="c-rich-text-editor">
+          <RichTextEditorWithoutContext {...rest} editable={editable} />
+        </div>
+        {/* </TableContext> */}
       </SharedHistoryContext>
     </LexicalComposer>
   );
@@ -154,7 +147,7 @@ function RichTextEditorWithoutContext({
   function onLocalChange(editorState: EditorState) {
     if (onChange) {
       if (triggerOnChangeOnAutoFocus || firstOnChangeTriggeredRef.current) {
-        onChange(lexicalToCrystallizeRichText({ editorState }));
+        onChange(lexicalToCrystallizeRichText({ editor, editorState }));
       }
     }
 
@@ -168,11 +161,8 @@ function RichTextEditorWithoutContext({
       {slotPreContent}
       <div className="editor-container">
         {maxLength != null ? <MaxLengthPlugin maxLength={maxLength} /> : null}
-        <DragDropPaste />
         {!autoFocus ? null : <AutoFocusPlugin />}
         <ClearEditorPlugin />
-        <ComponentPickerPlugin />
-        <SpeechToTextPlugin />
         <AutoLinkPlugin />
 
         <HistoryPlugin externalHistoryState={historyState} />
@@ -188,34 +178,11 @@ function RichTextEditorWithoutContext({
           placeholder={placeholder}
           ErrorBoundary={LexicalErrorBoundary}
         />
-        <MarkdownShortcutPlugin />
         <CodeHighlightPlugin />
         <ListPlugin />
         <ListMaxIndentLevelPlugin maxDepth={7} />
         <TablePlugin />
-        <TableCellResizer />
-        <NewTablePlugin
-          cellEditorConfig={{
-            namespace: 'Playground',
-            nodes: [...TableCellNodes],
-            onError: (error: Error) => {
-              throw error;
-            },
-            theme: CrystallizeRTEditorTheme,
-          }}
-        >
-          {!autoFocus ? <></> : <AutoFocusPlugin />}
-          <RichTextPlugin
-            contentEditable={<ContentEditable className="TableNode__contentEditable" />}
-            placeholder={null}
-            ErrorBoundary={LexicalErrorBoundary}
-          />
-          <HistoryPlugin />
-          <LinkPlugin />
-          <FloatingTextFormatToolbarPlugin />
-        </NewTablePlugin>
         <LinkPlugin />
-
         <HorizontalRulePlugin />
         <TabFocusPlugin />
         <TabIndentationPlugin />

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

@@ -4,7 +4,7 @@ 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 () => {
+  it('can add a code block to an existing paragraph texst', async () => {
     const onChange = vi.fn();
 
     render(
@@ -27,12 +27,16 @@ describe('RichTextEditor code node', () => {
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenLastCalledWith([
       {
-        type: 'code',
         kind: 'block',
-        textContent: 'const aVariable = 42;',
-        metadata: {
-          language: 'javascript',
-        },
+        type: 'preformatted',
+        children: [
+          {
+            type: 'code',
+            kind: 'block',
+            textContent: 'const aVariable = 42;',
+            metadata: { language: 'javascript' },
+          },
+        ],
       },
     ]);
   });

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

@@ -4,6 +4,14 @@ import { RichTextEditor } from '../rich-text-editor';
 import type { CrystallizeRichText, CrystallizeRichTextNode } from '../types/crystallize-rich-text-types';
 import { sleep } from './utils';
 
+function paragraphWithText(textContent: string): CrystallizeRichTextNode {
+  return {
+    kind: 'block',
+    type: 'paragraph',
+    textContent,
+  };
+}
+
 /**
  * In these tests, we are ensuring that the conversion from
  * CrystallizeRichText to Lexial back to CrystallizeRichText works
@@ -94,11 +102,15 @@ const dataTypes: { name: string; model: CrystallizeRichText }[] = [
     model: [
       {
         kind: 'block',
-        type: 'code',
-        textContent: 'I am code',
-        metadata: {
-          language: 'javascript',
-        },
+        type: 'preformatted',
+        children: [
+          {
+            type: 'code',
+            kind: 'block',
+            textContent: 'const aVariable = 42;',
+            metadata: { language: 'javascript' },
+          },
+        ],
       },
     ],
   },
@@ -137,12 +149,12 @@ const dataTypes: { name: string; model: CrystallizeRichText }[] = [
               {
                 type: 'table-cell',
                 kind: 'inline',
-                textContent: 'Hi from',
+                children: [paragraphWithText('Hi from ')],
               },
               {
                 type: 'table-cell',
                 kind: 'inline',
-                textContent: 'a table',
+                children: [paragraphWithText('a table')],
               },
             ],
           },

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

@@ -242,21 +242,13 @@
     opacity: 1;
   }
 }
-.CrystallizeRTEditorTheme__tableCellResizeRuler {
-  display: block;
-  position: absolute;
-  width: 1px;
-  background-color: rgb(60, 132, 244);
-  height: 100%;
-  top: 0;
-}
+
 .CrystallizeRTEditorTheme__tableCellActionButtonContainer {
   display: block;
-  right: 5px;
-  top: 6px;
+  right: 2px;
+  top: 2px;
   position: absolute;
   z-index: 4;
-  width: 20px;
   height: 20px;
 }
 .CrystallizeRTEditorTheme__tableCellActionButton {