diff --git a/frontend/src/scenes/notebooks/Notebook/Editor.tsx b/frontend/src/scenes/notebooks/Notebook/Editor.tsx index 94cb6b5ef411a..c05cf3c31cb42 100644 --- 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() - 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 index c48776eb62394..f6fc4be7a1ae5 100644 --- 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'
- { - if (node.type.name === 'heading' && node.attrs.level === 1) { - return `Untitled - maybe.. "${headingPlaceholder}"` - } - - if (node.type.name === 'heading') { - return `Heading ${node.attrs.level}` - } - - return '' - }} - /> +