chore: wire up lexical editor to db

Author: stevenle

packages/root-cms/shared/richtext.ts

@@ -56,8 +56,9 @@ export interface RichTextCustomBlock<TypeName = string, DataType = any> {
 }
 
 export interface RichTextData {
-  [key: string]: any;
   blocks: RichTextBlock[];
+  time: number;
+  version: string;
 }
 
 export function testValidRichTextData(data: RichTextData) {

packages/root-cms/ui/components/DocEditor/fields/RichTextField.tsx

@@ -11,8 +11,12 @@ export function RichTextField(props: FieldProps) {
   const [value, setValue] = useState<RichTextData | null>(null);
 
   function onChange(newValue: RichTextData | null) {
-    props.draft.updateKey(props.deepKey, newValue);
-    setValue(newValue);
+    setValue((oldValue) => {
+      if (oldValue?.time !== newValue?.time) {
+        props.draft.updateKey(props.deepKey, newValue);
+      }
+      return newValue;
+    });
   }
 
   useEffect(() => {

packages/root-cms/ui/components/RichTextEditor/LexicalEditor.tsx

@@ -71,7 +71,7 @@ export function LexicalEditor(props: LexicalEditorProps) {
 
 interface EditorProps {
   placeholder?: string;
-  value?: RichTextData;
+  value?: RichTextData | null;
   onChange?: (value: RichTextData | null) => void;
 }
 

packages/root-cms/ui/components/RichTextEditor/LexicalTheme.css

@@ -25,24 +25,20 @@
   padding-left: 16px;
 }
 .LexicalTheme__h1 {
-  font-size: 20px;
-  font-weight: 600;
-  margin: 0;
+  font-size: 18px;
 }
 .LexicalTheme__h2 {
   font-size: 16px;
-  font-weight: 600;
-  margin: 0;
 }
 .LexicalTheme__h3 {
   font-size: 14px;
-  font-weight: 600;
-  margin: 0;
 }
 .LexicalTheme__h1,
 .LexicalTheme__h2,
 .LexicalTheme__h3 {
+  margin: 0;
   margin-top: 8px;
+  font-weight: 500;
 }
 .LexicalTheme__h1:first-child,
 .LexicalTheme__h2:first-child,
@@ -462,7 +458,7 @@
   margin-top: 0;
 }
 .LexicalTheme__listItem {
-  margin: 4px 20px;
+  margin: 2px 20px;
 }
 .LexicalTheme__listItem::marker {
   color: var(--listitem-marker-color);

packages/root-cms/ui/components/RichTextEditor/RichTextEditor.tsx

@@ -21,7 +21,7 @@ export function RichTextEditor(props: RichTextEditorProps) {
       className={props.className}
       placeholder={props.placeholder}
       value={props.value}
-      // onChange={props.onChange}
+      onChange={props.onChange}
     />
   );
 }

packages/root-cms/ui/components/RichTextEditor/plugins/FloatingToolbarPlugin.css

@@ -16,6 +16,10 @@
   will-change: transform;
 }
 
+.LexicalEditor__floatingToolbar .LexicalEditor__toolbar__actionIcon button {
+  color: black;
+}
+
 .LexicalEditor__floatingToolbar .LexicalEditor__toolbar__actionIcon--active button {
   border: 1px solid rgb(206, 212, 218)
 }

packages/root-cms/ui/components/RichTextEditor/plugins/OnChangePlugin.tsx

@@ -1,8 +1,10 @@
-import {useEffect} from 'preact/hooks';
+import {useEffect, useState} from 'preact/hooks';
 import {RichTextData} from '../../../../shared/richtext.js';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {convertToRichTextData} from '../utils/convert-from-lexical.js';
 import {convertToLexical} from '../utils/convert-to-lexical.js';
+import {OnChangePlugin as LexicalOnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
+import {EditorState} from 'lexical';
 
 export interface OnChangePluginProps {
   value?: RichTextData | null;
@@ -12,25 +14,35 @@ export interface OnChangePluginProps {
 export function OnChangePlugin(props: OnChangePluginProps) {
   const [editor] = useLexicalComposerContext();
 
-  useEffect(() => {
-    console.log('rte value change upstream:', props.value);
-    editor.update(() => {
-      convertToLexical(props.value);
-    });
-  }, [editor, props.value]);
+  const [timeSaved, setTimeSaved] = useState(0);
+  const [isUpdating, setIsUpdating] = useState(false);
 
   useEffect(() => {
-    return editor.registerUpdateListener(({editorState}) => {
-      editorState.read(() => {
-        const data = toRichTextData();
-        if (props.onChange) {
-          props.onChange(data);
-        }
+    const time = props.value?.time || 0;
+    if (timeSaved !== time) {
+      editor.update(() => {
+        console.log('lexical update, props.value changed:', props.value);
+        setIsUpdating(true);
+        convertToLexical(props.value);
       });
+    }
+  }, [editor, props.value]);
+
+  function onChange(editorState: EditorState) {
+    if (isUpdating) {
+      setIsUpdating(false);
+      return;
+    }
+    editorState.read(() => {
+      const richTextData = toRichTextData();
+      setTimeSaved(richTextData?.time || 0);
+      if (props.onChange) {
+        props.onChange(richTextData);
+      }
     });
-  }, [editor, props.onChange]);
+  }
 
-  return null;
+  return <LexicalOnChangePlugin onChange={onChange} ignoreSelectionChange />;
 }
 
 function toRichTextData(): RichTextData | null {

packages/root-cms/ui/components/RichTextEditor/utils/convert-from-lexical.ts

@@ -106,19 +106,30 @@ export function convertToRichTextData(): RichTextData | null {
     }
   });
 
-  // If the last block is an empty paragraph, remove it.
-  const lastBlock = blocks.length > 0 && blocks.at(-1);
-  if (lastBlock && lastBlock.type === 'paragraph' && !lastBlock.data?.text) {
+  // If the last block is empty, remove it.
+  while (testLastBlockIsEmpty(blocks)) {
     blocks.pop();
   }
 
+  // Use `null` when the RTE is empty, which allows components to use boolean
+  // expressions to determine whether to render the RTE field.
   if (blocks.length === 0) {
     return null;
   }
 
+  // NOTE(stevenle): The RTE was originally implemented with EditorJS, the data
+  // format is preserved for backward compatibility.
   return {
     time: Date.now(),
     blocks,
     version: 'lexical-0.31.2',
   };
 }
+
+function testLastBlockIsEmpty(blocks: RichTextBlock[]) {
+  const lastBlock = blocks.length > 0 && blocks.at(-1);
+  if (lastBlock && lastBlock.type === 'paragraph' && !lastBlock.data?.text) {
+    return true;
+  }
+  return false;
+}

packages/root-cms/ui/components/RichTextEditor/utils/convert-to-lexical.ts

@@ -1,6 +1,6 @@
 import {$applyNodeReplacement, $createParagraphNode, $createTextNode, $getRoot} from 'lexical';
 import {RichTextData, RichTextListItem, RichTextListItemNestedList, RichTextListItemText} from '../../../../shared/richtext.js';
-import {$createHeadingNode} from '@lexical/rich-text';
+import {$createHeadingNode, HeadingTagType} from '@lexical/rich-text';
 import {$createLinkNode} from '@lexical/link';
 import {$createListItemNode, $createListNode, ListItemNode} from '@lexical/list';
 
@@ -23,7 +23,8 @@ export function convertToLexical(data?: RichTextData | null) {
       }
       root.append(paragraphNode);
     } else if (block.type === 'heading') {
-      const headingNode = $createHeadingNode();
+      const tagName = `h${block.data?.level || 2}` as HeadingTagType;
+      const headingNode = $createHeadingNode(tagName);
       if (block.data.text) {
         const children = createNodesFromHTML(block.data.text);
         headingNode.append(...children);
@@ -54,29 +55,34 @@ function createNodesFromHTML(htmlString: string) {
 
     if (domNode.nodeType === Node.ELEMENT_NODE) {
       const el = domNode as HTMLElement;
-      const children = Array.from(el.childNodes).map(parseNode).filter(Boolean);
+      const children = Array.from(el.childNodes).map(parseNode).filter(Boolean).flat();
 
       switch (el.tagName.toLowerCase()) {
         case 'b':
         case 'strong':
-          return children.map(child => {
-            child.setFormat('bold');
+          return children.map((child) => {
+            child.toggleFormat('bold');
             return child;
           });
         case 'i':
         case 'em':
-          return children.map(child => {
-            child.setFormat('italic');
+          return children.map((child) => {
+            child.toggleFormat('italic');
             return child;
           });
         case 'u':
-          return children.map(child => {
-            child.setFormat('underline');
+          return children.map((child) => {
+            child.toggleFormat('underline');
+            return child;
+          });
+        case 's':
+          return children.map((child) => {
+            child.toggleFormat('strikethrough');
             return child;
           });
         case 'sup':
-          return children.map(child => {
-            child.setFormat('superscript');
+          return children.map((child) => {
+            child.toggleFormat('superscript');
             return child;
           });
         case 'a':
@@ -86,6 +92,8 @@ function createNodesFromHTML(htmlString: string) {
             ),
           ];
         default:
+          console.log('unhandled tag: ' + el.tagName);
+          console.log(children);
           return children;
       }
     }