fix: Editor initial content (#17912)

PostHog · Oct 11, 2023 · 72720cf · 72720cf
1 parent e15de55
commit 72720cf
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 50 deletions.
diff --git a/frontend/src/scenes/notebooks/Notebook/Editor.tsx b/frontend/src/scenes/notebooks/Notebook/Editor.tsx
@@ -1,6 +1,6 @@
 import posthog from 'posthog-js'
-import { useActions } from 'kea'
-import { useCallback, useRef } from 'react'
+import { useActions, useValues } from 'kea'
+import { useCallback, useMemo, useRef } from 'react'
 
 import { Editor as TTEditor } from '@tiptap/core'
 import { EditorContent, useEditor } from '@tiptap/react'
@@ -25,34 +25,31 @@ import { lemonToast } from '@posthog/lemon-ui'
 import { NotebookNodeType } from '~/types'
 import { NotebookNodeImage } from '../Nodes/NotebookNodeImage'
 
-import { EditorFocusPosition, EditorRange, JSONContent, Node, NotebookEditor, textContent } from './utils'
+import { EditorFocusPosition, EditorRange, JSONContent, Node, textContent } from './utils'
 import { SlashCommandsExtension } from './SlashCommands'
 import { BacklinkCommandsExtension } from './BacklinkCommands'
 import { NotebookNodeEarlyAccessFeature } from '../Nodes/NotebookNodeEarlyAccessFeature'
 import { NotebookNodeSurvey } from '../Nodes/NotebookNodeSurvey'
 import { InlineMenu } from './InlineMenu'
 import NodeGapInsertionExtension from './Extensions/NodeGapInsertion'
+import { notebookLogic } from './notebookLogic'
+import { sampleOne } from 'lib/utils'
 
 const CustomDocument = ExtensionDocument.extend({
     content: 'heading block*',
 })
 
-export function Editor({
-    onCreate,
-    onUpdate,
-    onSelectionUpdate,
-    placeholder,
-    initialContent,
-}: {
-    onCreate: (editor: NotebookEditor) => void
-    onUpdate: () => void
-    onSelectionUpdate: () => void
-    placeholder: ({ node }: { node: any }) => string
-    initialContent: JSONContent
-}): JSX.Element {
+const PLACEHOLDER_TITLES = ['Release notes', 'Product roadmap', 'Meeting notes', 'Bug analysis']
+
+export function Editor(): JSX.Element {
     const editorRef = useRef<TTEditor>()
-    const logic = insertionSuggestionsLogic()
-    const { resetSuggestions, setPreviousNode } = useActions(logic)
+
+    const { shortId } = useValues(notebookLogic)
+    const { setEditor, onEditorUpdate, onEditorSelectionUpdate } = useActions(notebookLogic)
+
+    const { resetSuggestions, setPreviousNode } = useActions(insertionSuggestionsLogic)
+
+    const headingPlaceholder = useMemo(() => sampleOne(PLACEHOLDER_TITLES), [shortId])
 
     const updatePreviousNode = useCallback(() => {
         const editor = editorRef.current
@@ -69,7 +66,17 @@ export function Editor({
                 gapcursor: false,
             }),
             ExtensionPlaceholder.configure({
-                placeholder: placeholder,
+                placeholder: ({ node }: { node: any }) => {
+                    if (node.type.name === 'heading' && node.attrs.level === 1) {
+                        return `Untitled - maybe.. "${headingPlaceholder}"`
+                    }
+
+                    if (node.type.name === 'heading') {
+                        return `Heading ${node.attrs.level}`
+                    }
+
+                    return ''
+                },
             }),
             FloatingMenu.extend({
                 onSelectionUpdate() {
@@ -102,7 +109,6 @@ export function Editor({
             BacklinkCommandsExtension,
             NodeGapInsertionExtension,
         ],
-        content: initialContent,
         editorProps: {
             handleDrop: (view, event, _slice, moved) => {
                 const editor = editorRef.current
@@ -184,7 +190,7 @@ export function Editor({
         onCreate: ({ editor }) => {
             editorRef.current = editor
 
-            onCreate({
+            setEditor({
                 getJSON: () => editor.getJSON(),
                 getText: () => textContent(editor.state.doc),
                 getEndPosition: () => editor.state.doc.content.size,
@@ -228,8 +234,8 @@ export function Editor({
                 },
             })
         },
-        onUpdate: onUpdate,
-        onSelectionUpdate: onSelectionUpdate,
+        onUpdate: onEditorUpdate,
+        onSelectionUpdate: onEditorSelectionUpdate,
     })
 
     return (

diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.tsx b/frontend/src/scenes/notebooks/Notebook/Notebook.tsx
@@ -1,9 +1,8 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect } from 'react'
 import { notebookLogic } from 'scenes/notebooks/Notebook/notebookLogic'
 import { BindLogic, useActions, useValues } from 'kea'
 import './Notebook.scss'
 
-import { sampleOne } from 'lib/utils'
 import { NotFound } from 'lib/components/NotFound'
 import clsx from 'clsx'
 import { notebookSettingsLogic } from './notebookSettingsLogic'
@@ -24,17 +23,12 @@ export type NotebookProps = {
     initialAutofocus?: EditorFocusPosition
 }
 
-const PLACEHOLDER_TITLES = ['Release notes', 'Product roadmap', 'Meeting notes', 'Bug analysis']
-
 export function Notebook({ shortId, editable = false, initialAutofocus = 'start' }: NotebookProps): JSX.Element {
     const logic = notebookLogic({ shortId })
-    const { notebook, content, notebookLoading, editor, conflictWarningVisible, isEditable } = useValues(logic)
-    const { setEditor, onEditorUpdate, duplicateNotebook, loadNotebook, setEditable, onEditorSelectionUpdate } =
-        useActions(logic)
+    const { notebook, notebookLoading, editor, conflictWarningVisible, isEditable } = useValues(logic)
+    const { duplicateNotebook, loadNotebook, setEditable } = useActions(logic)
     const { isExpanded } = useValues(notebookSettingsLogic)
 
-    const headingPlaceholder = useMemo(() => sampleOne(PLACEHOLDER_TITLES), [shortId])
-
     useWhyDidIRender('Notebook', {
         notebook,
         notebookLoading,
@@ -44,7 +38,6 @@ export function Notebook({ shortId, editable = false, initialAutofocus = 'start'
         shortId,
         editable,
         initialAutofocus,
-        content,
     })
 
     useEffect(() => {
@@ -111,23 +104,7 @@ export function Notebook({ shortId, editable = false, initialAutofocus = 'start'
                 <div className="flex flex-1 justify-center">
                     <NotebookSidebar />
                     <ErrorBoundary>
-                        <Editor
-                            initialContent={content}
-                            onCreate={setEditor}
-                            onUpdate={onEditorUpdate}
-                            onSelectionUpdate={onEditorSelectionUpdate}
-                            placeholder={({ node }: { node: any }) => {
-                                if (node.type.name === 'heading' && node.attrs.level === 1) {
-                                    return `Untitled - maybe.. "${headingPlaceholder}"`
-                                }
-
-                                if (node.type.name === 'heading') {
-                                    return `Heading ${node.attrs.level}`
-                                }
-
-                                return ''
-                            }}
-                        />
+                        <Editor />
                     </ErrorBoundary>
                 </div>
             </div>