diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeReplayTimestamp.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeReplayTimestamp.tsx index ec49f4445d005..799f2b128ed19 100644 --- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeReplayTimestamp.tsx +++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeReplayTimestamp.tsx @@ -1,5 +1,5 @@ import { mergeAttributes, Node, NodeViewProps } from '@tiptap/core' -import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react' +import { callOrReturn, getExtensionField, NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react' import { NotebookNodeType, NotebookTarget } from '~/types' import { sessionRecordingPlayerLogic, @@ -75,6 +75,25 @@ export const NotebookNodeReplayTimestamp = Node.create({ group: 'inline', atom: true, + serializedText: + () => + (attrs: { playbackTime: number }): string => { + // timestamp is not a block so `getText` does not add a separator. + // we need to add it manually + return `${formatTimestamp(attrs.playbackTime) || '00:00'}:\n` + }, + + extendNodeSchema(extension) { + const context = { + name: extension.name, + options: extension.options, + storage: extension.storage, + } + return { + serializedText: callOrReturn(getExtensionField(extension, 'serializedText', context)), + } + }, + addAttributes() { return { playbackTime: { default: null, keepOnSplit: false }, diff --git a/frontend/src/scenes/notebooks/Notebook/utils.ts b/frontend/src/scenes/notebooks/Notebook/utils.ts index 0134cace7b23a..c50d80be77b8d 100644 --- a/frontend/src/scenes/notebooks/Notebook/utils.ts +++ b/frontend/src/scenes/notebooks/Notebook/utils.ts @@ -11,7 +11,6 @@ import { import { Node as PMNode } from '@tiptap/pm/model' import { NodeViewProps } from '@tiptap/react' import { NotebookNodeType } from '~/types' -import { formatTimestamp } from 'scenes/notebooks/Nodes/NotebookNodeReplayTimestamp' export interface Node extends PMNode {} export interface JSONContent extends TTJSONContent {} @@ -114,11 +113,7 @@ export const textContent = (node: any): string => { 'ph-query': customOrTitleSerializer, 'ph-recording': customOrTitleSerializer, 'ph-recording-playlist': customOrTitleSerializer, - 'ph-replay-timestamp': (props): string => { - // timestamp is not a block so `getText` does not add a separator. - // we need to add it manually - return `${formatTimestamp(props.node.attrs.playbackTime) || '00:00'}:\n` - }, + 'ph-replay-timestamp': customOrTitleSerializer, 'ph-survey': customOrTitleSerializer, }