fix: Fixed issue where converting to Super would result in empty note

packages/blocks-editor/src/Editor/BlocksEditor.tsx

@@ -11,7 +11,7 @@ import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'
 import { ListPlugin } from '@lexical/react/LexicalListPlugin'
-import { $getRoot, EditorState, LexicalEditor } from 'lexical'
+import { EditorState, LexicalEditor } from 'lexical'
 import HorizontalRulePlugin from '../Lexical/Plugins/HorizontalRulePlugin'
 import TwitterPlugin from '../Lexical/Plugins/TwitterPlugin'
 import YouTubePlugin from '../Lexical/Plugins/YouTubePlugin'
@@ -22,7 +22,7 @@ import CodeHighlightPlugin from '../Lexical/Plugins/CodeHighlightPlugin'
 import FloatingTextFormatToolbarPlugin from '../Lexical/Plugins/FloatingTextFormatToolbarPlugin'
 import FloatingLinkEditorPlugin from '../Lexical/Plugins/FloatingLinkEditorPlugin'
 import { TabIndentationPlugin } from '../Lexical/Plugins/TabIndentationPlugin'
-import { truncateString } from './Utils'
+import { handleEditorChange } from './Utils'
 import { SuperEditorContentId } from './Constants'
 import { classNames } from '@standardnotes/utils'
 import { MarkdownTransformers } from './MarkdownTransformers'
@@ -55,27 +55,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
       }
 
       editorState.read(() => {
-        const childrenNodes = $getRoot().getAllTextNodes().slice(0, 2)
-        let previewText = ''
-        childrenNodes.forEach((node, index) => {
-          previewText += node.getTextContent()
-          if (index !== childrenNodes.length - 1) {
-            previewText += '\n'
-          }
-        })
-
-        if (previewLength) {
-          previewText = truncateString(previewText, previewLength)
-        }
-
-        try {
-          const stringifiedEditorState = JSON.stringify(editorState.toJSON())
-          onChange?.(stringifiedEditorState, previewText)
-        } catch (error) {
-          window.alert(
-            `An invalid change was made inside the Super editor. Your change was not saved. Please report this error to the team: ${error}`,
-          )
-        }
+        handleEditorChange(editorState, previewLength, onChange)
       })
     },
     // Ignoring 'ignoreFirstChange' and 'previewLength'

packages/blocks-editor/src/Editor/Utils.ts

@@ -1,3 +1,5 @@
+import { $getRoot, EditorState } from 'lexical'
+
 export function truncateString(string: string, limit: number) {
   if (string.length <= limit) {
     return string
@@ -5,3 +7,31 @@ export function truncateString(string: string, limit: number) {
     return string.substring(0, limit) + '...'
   }
 }
+
+export function handleEditorChange(
+  editorState: EditorState,
+  previewLength?: number,
+  onChange?: (value: string, previewText: string) => void,
+) {
+  const childrenNodes = $getRoot().getAllTextNodes().slice(0, 2)
+  let previewText = ''
+  childrenNodes.forEach((node, index) => {
+    previewText += node.getTextContent()
+    if (index !== childrenNodes.length - 1) {
+      previewText += '\n'
+    }
+  })
+
+  if (previewLength) {
+    previewText = truncateString(previewText, previewLength)
+  }
+
+  try {
+    const stringifiedEditorState = JSON.stringify(editorState.toJSON())
+    onChange?.(stringifiedEditorState, previewText)
+  } catch (error) {
+    window.alert(
+      `An invalid change was made inside the Super editor. Your change was not saved. Please report this error to the team: ${error}`,
+    )
+  }
+}

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx

@@ -3,9 +3,19 @@ import { useEffect } from 'react'
 import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown'
 import { $generateNodesFromDOM } from '@lexical/html'
 import { $createParagraphNode, $createRangeSelection } from 'lexical'
+import { handleEditorChange } from '@standardnotes/blocks-editor/src/Editor/Utils'
+import { SuperNotePreviewCharLimit } from '../../SuperEditor'
 
 /** Note that markdown conversion does not insert new lines. See: https://github.com/facebook/lexical/issues/2815 */
-export default function ImportPlugin({ text, format }: { text: string; format: 'md' | 'html' }): JSX.Element | null {
+export default function ImportPlugin({
+  text,
+  format,
+  onChange,
+}: {
+  text: string
+  format: 'md' | 'html'
+  onChange: (value: string, preview: string) => void
+}): JSX.Element | null {
   const [editor] = useLexicalComposerContext()
 
   useEffect(() => {
@@ -28,5 +38,13 @@ export default function ImportPlugin({ text, format }: { text: string; format: '
     })
   }, [editor, text, format])
 
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        handleEditorChange(editorState, SuperNotePreviewCharLimit, onChange)
+      })
+    })
+  }, [editor, onChange])
+
   return null
 }

packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx

@@ -44,7 +44,7 @@ import ModalOverlay from '@/Components/Modal/ModalOverlay'
 import MobileToolbarPlugin from './Plugins/MobileToolbarPlugin/MobileToolbarPlugin'
 import { SuperEditorNodes } from './SuperEditorNodes'
 
-const NotePreviewCharLimit = 160
+export const SuperNotePreviewCharLimit = 160
 
 type Props = {
   application: WebApplication
@@ -182,7 +182,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
                   lineHeight && `leading-${lineHeight.toLowerCase()}`,
                   fontSize ? getPlaintextFontSize(fontSize) : 'text-base',
                 )}
-                previewLength={NotePreviewCharLimit}
+                previewLength={SuperNotePreviewCharLimit}
                 spellcheck={spellcheck}
               >
                 <ItemSelectionPlugin currentNote={note.current} />

packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx

@@ -122,7 +122,7 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
               previewLength={NotePreviewCharLimit}
               spellcheck={note.spellcheck}
             >
-              <ImportPlugin text={note.text} format={format} />
+              <ImportPlugin text={note.text} format={format} onChange={handleChange} />
             </BlocksEditor>
           </BlocksEditorComposer>
         </ErrorBoundary>