feat: convert Super notes to Markdown behind the scenes while publishing to Listed (#2064)

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

@@ -0,0 +1,28 @@
+import { forwardRef, useCallback, useImperativeHandle } from 'react'
+import { $convertToMarkdownString } from '@lexical/markdown'
+import { MarkdownTransformers } from '@standardnotes/blocks-editor'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+export type GetMarkdownPluginInterface = {
+  getMarkdown: () => string
+}
+
+const GetMarkdownPlugin = forwardRef<GetMarkdownPluginInterface>((_, ref) => {
+  const [editor] = useLexicalComposerContext()
+
+  useImperativeHandle(ref, () => ({
+    getMarkdown() {
+      return getMarkdown()
+    },
+  }))
+
+  const getMarkdown = useCallback(() => {
+    return editor.getEditorState().read(() => {
+      return $convertToMarkdownString(MarkdownTransformers)
+    })
+  }, [editor])
+
+  return null
+})
+
+export default GetMarkdownPlugin

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

@@ -27,6 +27,7 @@ import { useCommandService } from '@/Components/ApplicationView/CommandProvider'
 import { SUPER_SHOW_MARKDOWN_PREVIEW } from '@standardnotes/ui-services'
 import { SuperNoteMarkdownPreview } from './SuperNoteMarkdownPreview'
 import { ExportPlugin } from './Plugins/ExportPlugin/ExportPlugin'
+import GetMarkdownPlugin, { GetMarkdownPluginInterface } from './Plugins/GetMarkdownPlugin/GetMarkdownPlugin'
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin'
 
 const NotePreviewCharLimit = 160
@@ -50,6 +51,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
   const changeEditorFunction = useRef<ChangeEditorFunction>()
   const ignoreNextChange = useRef(false)
   const [showMarkdownPreview, setShowMarkdownPreview] = useState(false)
+  const getMarkdownPlugin = useRef<GetMarkdownPluginInterface | null>(null)
 
   const commandService = useCommandService()
 
@@ -64,6 +66,21 @@ export const SuperEditor: FunctionComponent<Props> = ({
     setShowMarkdownPreview(false)
   }, [])
 
+  useEffect(() => {
+    return application.actions.addPayloadRequestHandler((uuid) => {
+      if (uuid === note.current.uuid) {
+        const basePayload = note.current.payload.ejected()
+        return {
+          ...basePayload,
+          content: {
+            ...basePayload.content,
+            text: getMarkdownPlugin.current?.getMarkdown() ?? basePayload.content.text,
+          },
+        }
+      }
+    })
+  }, [application])
+
   const [lineHeight, setLineHeight] = useState<EditorLineHeight>(PrefDefaults[PrefKey.EditorLineHeight])
 
   const handleChange = useCallback(
@@ -149,6 +166,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
                   <FilePlugin />
                   <ItemBubblePlugin />
                   <BlockPickerMenuPlugin />
+                  <GetMarkdownPlugin ref={getMarkdownPlugin} />
                   <DatetimePlugin />
                   <PasswordPlugin />
                   <AutoLinkPlugin />