fix: recording timestamps

frontend/src/scenes/notebooks/Nodes/NotebookNodeReplayTimestamp.tsx

@@ -97,16 +97,14 @@ export function buildTimestampCommentContent(
     currentPlayerTime: number | null,
     sessionRecordingId: string
 ): JSONContent {
-    return [
-        {
-            type: 'paragraph',
-            content: [
-                {
-                    type: NotebookNodeType.ReplayTimestamp,
-                    attrs: { playbackTime: currentPlayerTime, sessionRecordingId: sessionRecordingId },
-                },
-                { type: 'text', text: ' ' },
-            ],
-        },
-    ]
+    return {
+        type: 'paragraph',
+        content: [
+            {
+                type: NotebookNodeType.ReplayTimestamp,
+                attrs: { playbackTime: currentPlayerTime, sessionRecordingId: sessionRecordingId },
+            },
+            { type: 'text', text: ' ' },
+        ],
+    }
 }

frontend/src/scenes/notebooks/Notebook/Editor.tsx

@@ -5,7 +5,7 @@ import { useCallback, useRef } from 'react'
 import StarterKit from '@tiptap/starter-kit'
 import ExtensionPlaceholder from '@tiptap/extension-placeholder'
 import ExtensionDocument from '@tiptap/extension-document'
-import { EditorRange, Node } from './utils'
+import { EditorRange, EditorFocusPosition, Node } from './utils'
 
 import { NotebookNodeFlag } from '../Nodes/NotebookNodeFlag'
 import { NotebookNodeQuery } from 'scenes/notebooks/Nodes/NotebookNodeQuery'
@@ -140,13 +140,14 @@ export function Editor({
                 return false
             },
         },
-        autofocus: 'end',
         onCreate: ({ editor }) => {
             editorRef.current = editor
             onCreate({
                 getJSON: () => editor.getJSON(),
-                setEditable: (editable: boolean) => editor.setEditable(editable, false),
-                setContent: (content: JSONContent) => editor.commands.setContent(content, false),
+                setEditable: (editable: boolean) => queueMicrotask(() => editor.setEditable(editable, false)),
+                setContent: (content: JSONContent) => queueMicrotask(() => editor.commands.setContent(content, false)),
+                focus: (position: EditorFocusPosition) => queueMicrotask(() => editor.commands.focus(position)),
+                destroy: () => editor.destroy(),
                 isEmpty: () => editor.isEmpty,
                 deleteRange: (range: EditorRange) => editor.chain().focus().deleteRange(range),
                 insertContent: (content: JSONContent) => editor.chain().insertContent(content).focus().run(),
@@ -237,7 +238,7 @@ function getChildren(node: Node, direct: boolean = true): Node[] {
 function getPreviousNode(editor: TTEditor): Node | null {
     const { $anchor } = editor.state.selection
     const node = $anchor.node(1)
-    return !!node ? editor.state.doc.childBefore($anchor.pos - node.nodeSize).node : null
+    return !!node ? editor.state.doc.childBefore($anchor.pos - 1).node : null
 }
 
 export function hasMatchingNode(

frontend/src/scenes/notebooks/Notebook/Notebook.scss

@@ -117,7 +117,6 @@
         }
 
         &.NotebookRecordingTimestamp--preview {
-            height: 1.375rem;
             border: 1px solid var(--border-light);
             color: var(--mid);
             padding: 0rem 0.25rem;

frontend/src/scenes/notebooks/Notebook/Notebook.tsx

@@ -12,15 +12,17 @@ import { SCRATCHPAD_NOTEBOOK } from './notebooksListLogic'
 import { NotebookConflictWarning } from './NotebookConflictWarning'
 import { NotebookLoadingState } from './NotebookLoadingState'
 import { Editor } from './Editor'
+import { EditorFocusPosition } from './utils'
 
 export type NotebookProps = {
     shortId: string
     editable?: boolean
+    initialAutofocus?: EditorFocusPosition
 }
 
 const PLACEHOLDER_TITLES = ['Release notes', 'Product roadmap', 'Meeting notes', 'Bug analysis']
 
-export function Notebook({ shortId, editable = false }: NotebookProps): JSX.Element {
+export function Notebook({ shortId, editable = false, initialAutofocus = null }: NotebookProps): JSX.Element {
     const logic = notebookLogic({ shortId })
     const { notebook, content, notebookLoading, isEmpty, editor, conflictWarningVisible } = useValues(logic)
     const { setEditor, onEditorUpdate, duplicateNotebook, loadNotebook } = useActions(logic)
@@ -37,9 +39,16 @@ export function Notebook({ shortId, editable = false }: NotebookProps): JSX.Elem
     useEffect(() => {
         if (editor) {
             editor.setEditable(editable)
+            editor.focus(initialAutofocus)
         }
     }, [editor, editable])
 
+    useEffect(() => {
+        if (editor) {
+            editor.focus(initialAutofocus)
+        }
+    }, [editor])
+
     // TODO - Render a special state if the notebook is empty
 
     if (conflictWarningVisible) {

frontend/src/scenes/notebooks/Notebook/NotebookSideBar.tsx

@@ -18,7 +18,8 @@ import { notebookLogic } from './notebookLogic'
 import { urls } from 'scenes/urls'
 
 export function NotebookSideBar({ children }: { children: React.ReactElement<any> }): JSX.Element {
-    const { notebookSideBarShown, fullScreen, selectedNotebook, desiredWidth } = useValues(notebookSidebarLogic)
+    const { notebookSideBarShown, fullScreen, selectedNotebook, desiredWidth, initialAutofocus } =
+        useValues(notebookSidebarLogic)
     const { setNotebookSideBarShown, setFullScreen, selectNotebook, onResize, setElementRef } =
         useActions(notebookSidebarLogic)
     const { createNotebook } = useActions(notebooksListLogic)
@@ -121,6 +122,7 @@ export function NotebookSideBar({ children }: { children: React.ReactElement<any
                                     key={selectedNotebook}
                                     shortId={selectedNotebook}
                                     editable={!notebook?.is_template}
+                                    initialAutofocus={initialAutofocus}
                                 />
                             </div>
                         </div>

frontend/src/scenes/notebooks/Notebook/notebookSidebarLogic.ts

@@ -5,6 +5,7 @@ import { urlToAction } from 'kea-router'
 import { RefObject } from 'react'
 import posthog from 'posthog-js'
 import { subscriptions } from 'kea-subscriptions'
+import { EditorFocusPosition } from './utils'
 
 export const MIN_NOTEBOOK_SIDEBAR_WIDTH = 600
 
@@ -14,6 +15,7 @@ export const notebookSidebarLogic = kea<notebookSidebarLogicType>([
         setNotebookSideBarShown: (shown: boolean) => ({ shown }),
         setFullScreen: (full: boolean) => ({ full }),
         selectNotebook: (id: string) => ({ id }),
+        setInitialAutofocus: (position: EditorFocusPosition) => ({ position }),
         onResize: (event: { originX: number; desiredX: number; finished: boolean }) => event,
         setDesiredWidth: (width: number) => ({ width }),
         setElementRef: (element: RefObject<HTMLElement>) => ({ element }),
@@ -48,7 +50,13 @@ export const notebookSidebarLogic = kea<notebookSidebarLogicType>([
                 setDesiredWidth: (_, { width }) => width,
             },
         ],
-
+        initialAutofocus: [
+            null as EditorFocusPosition,
+            {
+                selectNotebook: () => null,
+                setInitialAutofocus: (_, { position }) => position,
+            },
+        ],
         elementRef: [
             null as RefObject<HTMLElement> | null,
             {

frontend/src/scenes/notebooks/Notebook/notebooksListLogic.ts

@@ -13,7 +13,7 @@ import { deleteWithUndo } from 'lib/utils'
 import { teamLogic } from 'scenes/teamLogic'
 import FuseClass from 'fuse.js'
 import { notebookSidebarLogic } from './notebookSidebarLogic'
-import { JSONContent, defaultNotebookContent } from './utils'
+import { EditorFocusPosition, JSONContent, defaultNotebookContent } from './utils'
 
 // Helping kea-typegen navigate the exported default class for Fuse
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -26,7 +26,11 @@ export const SCRATCHPAD_NOTEBOOK: NotebookListItemType = {
     created_by: null,
 }
 
-export const openNotebook = (notebookId: string, target: NotebookTarget = NotebookTarget.Auto): void => {
+export const openNotebook = (
+    notebookId: string,
+    target: NotebookTarget = NotebookTarget.Auto,
+    focus: EditorFocusPosition = null
+): void => {
     const sidebarLogic = notebookSidebarLogic.findMounted()
 
     if (NotebookTarget.Sidebar === target) {
@@ -38,6 +42,8 @@ export const openNotebook = (notebookId: string, target: NotebookTarget = Notebo
     } else {
         router.actions.push(urls.notebookEdit(notebookId))
     }
+
+    sidebarLogic?.actions.setInitialAutofocus(focus)
 }
 
 export const notebooksListLogic = kea<notebooksListLogicType>([
@@ -84,7 +90,7 @@ export const notebooksListLogic = kea<notebooksListLogicType>([
                         content: defaultNotebookContent(title, content),
                     })
 
-                    openNotebook(notebook.short_id, location)
+                    openNotebook(notebook.short_id, location, 'end')
 
                     posthog.capture(`notebook created`, {
                         short_id: notebook.short_id,

frontend/src/scenes/notebooks/Notebook/utils.ts

@@ -3,6 +3,7 @@ import {
     JSONContent as TTJSONContent,
     Editor as TTEditor,
     ChainedCommands as EditorCommands,
+    FocusPosition as EditorFocusPosition,
     Range as EditorRange,
     getText,
 } from '@tiptap/core'
@@ -13,13 +14,20 @@ import { NotebookNodeType } from '~/types'
 export interface Node extends PMNode {}
 export interface JSONContent extends TTJSONContent {}
 /* eslint-enable @typescript-eslint/no-empty-interface */
+// export type FocusPosition = number | boolean | 'start' | 'end' | 'all' | null
 
-export { ChainedCommands as EditorCommands, Range as EditorRange } from '@tiptap/core'
+export {
+    ChainedCommands as EditorCommands,
+    Range as EditorRange,
+    FocusPosition as EditorFocusPosition,
+} from '@tiptap/core'
 
 export interface NotebookEditor {
     getJSON: () => JSONContent
     setEditable: (editable: boolean) => void
     setContent: (content: JSONContent) => void
+    focus: (position: EditorFocusPosition) => void
+    destroy: () => void
     isEmpty: () => boolean
     deleteRange: (range: EditorRange) => EditorCommands
     insertContent: (content: JSONContent) => void

frontend/src/scenes/notebooks/Suggestions/FloatingSuggestions.scss

@@ -0,0 +1,3 @@
+.FloatingSuggestion {
+    height: 1.375rem;
+}

frontend/src/scenes/notebooks/Suggestions/FloatingSuggestions.tsx

@@ -1,3 +1,4 @@
+import './FloatingSuggestions.scss'
 import { Editor as TTEditor } from '@tiptap/core'
 import { FloatingMenu } from '@tiptap/react'
 import { useActions, useValues } from 'kea'
@@ -21,7 +22,11 @@ export function FloatingSuggestions({ editor }: { editor: TTEditor }): JSX.Eleme
     return (
         <FloatingMenu
             editor={editor}
-            tippyOptions={{ duration: [100, 0], placement: 'left', offset: [0, 0] }}
+            tippyOptions={{
+                duration: [100, 0],
+                placement: 'right',
+                offset: [0, 0],
+            }}
             className="NotebookFloatingButton"
             shouldShow={({ editor }: { editor: TTEditor }) => {
                 if (!editor) {
@@ -39,7 +44,9 @@ export function FloatingSuggestions({ editor }: { editor: TTEditor }): JSX.Eleme
                 return false
             }}
         >
-            {Component && <Component previousNode={previousNode} />}
+            <div className="FloatingSuggestion flex items-center justify-content">
+                {Component && <Component previousNode={previousNode} />}
+            </div>
         </FloatingMenu>
     )
 }

frontend/src/scenes/notebooks/Suggestions/ReplayTimestamp.tsx

@@ -8,9 +8,8 @@ import { InsertionSuggestion, InsertionSuggestionViewProps } from './InsertionSu
 import { Node, NotebookEditor } from '../Notebook/utils'
 
 const Component = ({ previousNode }: InsertionSuggestionViewProps): JSX.Element => {
-    const timestampNode = getTimestampChildNode(previousNode)
     const { currentPlayerTime } = useValues(
-        sessionRecordingPlayerLogic(sessionRecordingPlayerProps(timestampNode.attrs.sessionRecordingId))
+        sessionRecordingPlayerLogic(sessionRecordingPlayerProps(getSessionRecordingId(previousNode)))
     )
 
     return (
@@ -21,25 +20,34 @@ const Component = ({ previousNode }: InsertionSuggestionViewProps): JSX.Element
 }
 
 export default InsertionSuggestion.create({
-    shouldShow: ({ previousNode }) =>
-        !!previousNode ? hasChildOfType(previousNode, NotebookNodeType.ReplayTimestamp) : false,
+    shouldShow: ({ previousNode }) => {
+        return !!previousNode
+            ? previousNode.type.name === NotebookNodeType.Recording ||
+                  hasChildOfType(previousNode, NotebookNodeType.ReplayTimestamp)
+            : false
+    },
 
     onTab: ({ editor, previousNode }: { editor: NotebookEditor | null; previousNode: Node | null }) => {
         if (!!previousNode && !!editor) {
-            const timestampNode = getTimestampChildNode(previousNode)
-            const sessionRecordingId = timestampNode.attrs.sessionRecordingId
+            const sessionRecordingId = getSessionRecordingId(previousNode)
 
             const currentPlayerTime =
                 sessionRecordingPlayerLogic.findMounted(sessionRecordingPlayerProps(sessionRecordingId))?.values
                     .currentPlayerTime || 0
 
-            editor.insertContent(buildTimestampCommentContent(currentPlayerTime, sessionRecordingId))
+            editor.insertContent([buildTimestampCommentContent(currentPlayerTime, sessionRecordingId)])
         }
     },
 
     Component,
 })
 
+function getSessionRecordingId(node: Node | null): string {
+    return node?.type.name === NotebookNodeType.Recording
+        ? node.attrs.id
+        : getTimestampChildNode(node).attrs.sessionRecordingId
+}
+
 function getTimestampChildNode(node: Node | null): Node {
     return firstChildOfType(node as Node, NotebookNodeType.ReplayTimestamp) as Node
 }

frontend/src/scenes/session-recordings/player/PlayerMetaLinks.tsx

@@ -55,10 +55,9 @@ export function PlayerMetaLinks(): JSX.Element {
     const onComment = (): void => {
         const currentPlayerTime = getCurrentPlayerTime() * 1000
         if (nodeLogic) {
-            nodeLogic.actions.insertAfterLastNodeOfType(
-                NotebookNodeType.ReplayTimestamp,
-                buildTimestampCommentContent(currentPlayerTime, sessionRecordingId)
-            )
+            nodeLogic.actions.insertAfterLastNodeOfType(NotebookNodeType.ReplayTimestamp, [
+                buildTimestampCommentContent(currentPlayerTime, sessionRecordingId),
+            ])
         } else {
             const title = `Session Replay Notes ${dayjs().format('DD/MM')}`
             createNotebook(title, NotebookTarget.Sidebar, [

package.json

@@ -72,14 +72,14 @@
         "@rrweb/types": "^2.0.0-alpha.9",
         "@sentry/react": "7.22.0",
         "@testing-library/dom": ">=7.21.4",
-        "@tiptap/core": "2.0.3",
-        "@tiptap/extension-document": "2.0.3",
-        "@tiptap/extension-floating-menu": "2.0.3",
-        "@tiptap/extension-placeholder": "2.0.3",
-        "@tiptap/pm": "2.0.3",
-        "@tiptap/react": "2.0.3",
-        "@tiptap/starter-kit": "2.0.3",
-        "@tiptap/suggestion": "2.0.3",
+        "@tiptap/core": "^2.1.0-rc.12",
+        "@tiptap/extension-document": "^2.1.0-rc.12",
+        "@tiptap/extension-floating-menu": "^2.1.0-rc.12",
+        "@tiptap/extension-placeholder": "^2.1.0-rc.12",
+        "@tiptap/pm": "^2.1.0-rc.12",
+        "@tiptap/react": "^2.1.0-rc.12",
+        "@tiptap/starter-kit": "^2.1.0-rc.12",
+        "@tiptap/suggestion": "^2.1.0-rc.12",
         "@types/md5": "^2.3.0",
         "@types/react-input-autosize": "^2.2.1",
         "@types/react-textfit": "^1.1.0",