feat: option to show markdown preview for super notes (skip e2e) (#2048)

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

@@ -0,0 +1,26 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useEffect } from 'react'
+import { $createCodeNode } from '@lexical/code'
+import { $createTextNode, $getRoot } from 'lexical'
+import { $convertToMarkdownString } from '@lexical/markdown'
+import { MarkdownTransformers } from '@standardnotes/blocks-editor'
+
+type Props = {
+  onMarkdown: (markdown: string) => void
+}
+
+export default function MarkdownPreviewPlugin({ onMarkdown }: Props): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    editor.update(() => {
+      const root = $getRoot()
+      const markdown = $convertToMarkdownString(MarkdownTransformers)
+      root.clear().append($createCodeNode('markdown').append($createTextNode(markdown)))
+      root.selectEnd()
+      onMarkdown(markdown)
+    })
+  }, [editor, onMarkdown])
+
+  return null
+}

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

@@ -23,6 +23,9 @@ import {
 } from './Plugins/ChangeContentCallback/ChangeContentCallback'
 import PasswordPlugin from './Plugins/PasswordPlugin/PasswordPlugin'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { useCommandService } from '@/Components/ApplicationView/CommandProvider'
+import { SUPER_SHOW_MARKDOWN_PREVIEW } from '@standardnotes/ui-services'
+import { SuperNoteMarkdownPreview } from './SuperNoteMarkdownPreview'
 
 const NotePreviewCharLimit = 160
 
@@ -44,6 +47,20 @@ export const SuperEditor: FunctionComponent<Props> = ({
   const note = useRef(controller.item)
   const changeEditorFunction = useRef<ChangeEditorFunction>()
   const ignoreNextChange = useRef(false)
+  const [showMarkdownPreview, setShowMarkdownPreview] = useState(false)
+
+  const commandService = useCommandService()
+
+  useEffect(() => {
+    return commandService.addCommandHandler({
+      command: SUPER_SHOW_MARKDOWN_PREVIEW,
+      onKeyDown: () => setShowMarkdownPreview(true),
+    })
+  }, [commandService])
+
+  const closeMarkdownPreview = useCallback(() => {
+    setShowMarkdownPreview(false)
+  }, [])
 
   const [lineHeight, setLineHeight] = useState<EditorLineHeight>(PrefDefaults[PrefKey.EditorLineHeight])
 
@@ -110,37 +127,41 @@ export const SuperEditor: FunctionComponent<Props> = ({
   return (
     <div className="relative h-full w-full">
       <ErrorBoundary>
-        <LinkingControllerProvider controller={linkingController}>
-          <FilesControllerProvider controller={filesController}>
-            <BlocksEditorComposer
-              readonly={note.current.locked}
-              initialValue={note.current.text}
-              nodes={[FileNode, BubbleNode]}
-            >
-              <BlocksEditor
-                onChange={handleChange}
-                ignoreFirstChange={true}
-                className="relative h-full resize-none px-6 py-4 text-base focus:shadow-none focus:outline-none"
-                previewLength={NotePreviewCharLimit}
-                spellcheck={spellcheck}
-                lineHeight={lineHeight}
+        <>
+          <LinkingControllerProvider controller={linkingController}>
+            <FilesControllerProvider controller={filesController}>
+              <BlocksEditorComposer
+                readonly={note.current.locked}
+                initialValue={note.current.text}
+                nodes={[FileNode, BubbleNode]}
               >
-                <ItemSelectionPlugin currentNote={note.current} />
-                <FilePlugin />
-                <ItemBubblePlugin />
-                <BlockPickerMenuPlugin />
-                <DatetimePlugin />
-                <PasswordPlugin />
-                <AutoLinkPlugin />
-                <ChangeContentCallbackPlugin
-                  providerCallback={(callback) => (changeEditorFunction.current = callback)}
-                />
-                <NodeObserverPlugin nodeType={BubbleNode} onRemove={handleBubbleRemove} />
-                <NodeObserverPlugin nodeType={FileNode} onRemove={handleBubbleRemove} />
-              </BlocksEditor>
-            </BlocksEditorComposer>
-          </FilesControllerProvider>
-        </LinkingControllerProvider>
+                <BlocksEditor
+                  onChange={handleChange}
+                  ignoreFirstChange={true}
+                  className="relative h-full resize-none px-6 py-4 text-base focus:shadow-none focus:outline-none"
+                  previewLength={NotePreviewCharLimit}
+                  spellcheck={spellcheck}
+                  lineHeight={lineHeight}
+                >
+                  <ItemSelectionPlugin currentNote={note.current} />
+                  <FilePlugin />
+                  <ItemBubblePlugin />
+                  <BlockPickerMenuPlugin />
+                  <DatetimePlugin />
+                  <PasswordPlugin />
+                  <AutoLinkPlugin />
+                  <ChangeContentCallbackPlugin
+                    providerCallback={(callback) => (changeEditorFunction.current = callback)}
+                  />
+                  <NodeObserverPlugin nodeType={BubbleNode} onRemove={handleBubbleRemove} />
+                  <NodeObserverPlugin nodeType={FileNode} onRemove={handleBubbleRemove} />
+                </BlocksEditor>
+              </BlocksEditorComposer>
+            </FilesControllerProvider>
+          </LinkingControllerProvider>
+
+          {showMarkdownPreview && <SuperNoteMarkdownPreview note={note.current} closeDialog={closeMarkdownPreview} />}
+        </>
       </ErrorBoundary>
     </div>
   )

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

@@ -10,10 +10,7 @@ import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
 import Button from '@/Components/Button/Button'
 import ImportPlugin from './Plugins/ImportPlugin/ImportPlugin'
 import { NoteViewController } from '../Controller/NoteViewController'
-
-export function spaceSeparatedStrings(...strings: string[]): string {
-  return strings.join(' ')
-}
+import { spaceSeparatedStrings } from '../../../Utils/spaceSeparatedStrings'
 
 const NotePreviewCharLimit = 160
 
@@ -103,6 +100,7 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
           <ErrorBoundary>
             <BlocksEditorComposer readonly initialValue={undefined}>
               <BlocksEditor
+                readonly
                 onChange={handleChange}
                 ignoreFirstChange={false}
                 className="relative resize-none text-base focus:shadow-none focus:outline-none"

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

@@ -0,0 +1,65 @@
+import { SNNote } from '@standardnotes/snjs'
+import { FunctionComponent, useCallback, useState } from 'react'
+import { BlocksEditor, BlocksEditorComposer } from '@standardnotes/blocks-editor'
+import { ErrorBoundary } from '@/Utils/ErrorBoundary'
+import ModalDialog from '@/Components/Shared/ModalDialog'
+import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
+import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
+import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
+import Button from '@/Components/Button/Button'
+import MarkdownPreviewPlugin from './Plugins/MarkdownPreviewPlugin/MarkdownPreviewPlugin'
+import { FileNode } from './Plugins/EncryptedFilePlugin/Nodes/FileNode'
+import { BubbleNode } from './Plugins/ItemBubblePlugin/Nodes/BubbleNode'
+import { copyTextToClipboard } from '../../../Utils/copyTextToClipboard'
+
+type Props = {
+  note: SNNote
+  closeDialog: () => void
+}
+
+export const SuperNoteMarkdownPreview: FunctionComponent<Props> = ({ note, closeDialog }) => {
+  const [markdown, setMarkdown] = useState('')
+  const [didCopy, setDidCopy] = useState(false)
+
+  const copy = useCallback(() => {
+    copyTextToClipboard(markdown)
+    setDidCopy(true)
+    setTimeout(() => {
+      setDidCopy(false)
+    }, 1500)
+  }, [markdown])
+
+  const onMarkdown = useCallback((markdown: string) => {
+    setMarkdown(markdown)
+  }, [])
+
+  return (
+    <ModalDialog>
+      <ModalDialogLabel closeDialog={closeDialog}>Markdown Preview</ModalDialogLabel>
+      <ModalDialogDescription>
+        <div className="relative w-full">
+          <ErrorBoundary>
+            <BlocksEditorComposer readonly initialValue={note.text} nodes={[FileNode, BubbleNode]}>
+              <BlocksEditor
+                readonly
+                className="relative resize-none text-base focus:shadow-none focus:outline-none"
+                spellcheck={note.spellcheck}
+              >
+                <MarkdownPreviewPlugin onMarkdown={onMarkdown} />
+              </BlocksEditor>
+            </BlocksEditorComposer>
+          </ErrorBoundary>
+        </div>
+      </ModalDialogDescription>
+      <ModalDialogButtons>
+        <div className="flex">
+          <Button onClick={closeDialog}>Close</Button>
+          <div className="min-w-3" />
+          <Button primary onClick={copy}>
+            {didCopy ? 'Copied' : 'Copy'}
+          </Button>
+        </div>
+      </ModalDialogButtons>
+    </ModalDialog>
+  )
+}