diff --git a/frontend/__snapshots__/scenes-app-notebooks--bullet-list.png b/frontend/__snapshots__/scenes-app-notebooks--bullet-list.png index 00ac16d82c920..3591194d9e5eb 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--bullet-list.png and b/frontend/__snapshots__/scenes-app-notebooks--bullet-list.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--empty-notebook.png b/frontend/__snapshots__/scenes-app-notebooks--empty-notebook.png new file mode 100644 index 0000000000000..98d6fba58190c Binary files /dev/null and b/frontend/__snapshots__/scenes-app-notebooks--empty-notebook.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--headings.png b/frontend/__snapshots__/scenes-app-notebooks--headings.png index 435b7c638c07d..232e2366a480a 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--headings.png and b/frontend/__snapshots__/scenes-app-notebooks--headings.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--numbered-list.png b/frontend/__snapshots__/scenes-app-notebooks--numbered-list.png index 76256d08a1d61..b65bf32f7b6bf 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--numbered-list.png and b/frontend/__snapshots__/scenes-app-notebooks--numbered-list.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png index ae06ad761790f..107bf26e31e20 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png and b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--text-formats.png b/frontend/__snapshots__/scenes-app-notebooks--text-formats.png index ec6cf87e153ed..c83643e0a267c 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--text-formats.png and b/frontend/__snapshots__/scenes-app-notebooks--text-formats.png differ diff --git a/frontend/__snapshots__/scenes-app-notebooks--text-only-notebook.png b/frontend/__snapshots__/scenes-app-notebooks--text-only-notebook.png index bc2f358a8286c..808e8fe9c3769 100644 Binary files a/frontend/__snapshots__/scenes-app-notebooks--text-only-notebook.png and b/frontend/__snapshots__/scenes-app-notebooks--text-only-notebook.png differ diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx index 72079393acb98..cd8fc4265121b 100644 --- a/frontend/src/lib/utils.tsx +++ b/frontend/src/lib/utils.tsx @@ -1119,7 +1119,8 @@ export function sampleOne(items: T[]): T { if (!items.length) { throw Error('Items array is empty!') } - return items[Math.floor(Math.random() * items.length)] + const index = inStorybookTestRunner() ? 0 : Math.floor(Math.random() * items.length) + return items[index] } /** Convert camelCase, PascalCase or snake_case to Sentence case or Title Case. */ diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss index 06ff7f8108336..5433abc22cff6 100644 --- a/frontend/src/scenes/notebooks/Notebook/Notebook.scss +++ b/frontend/src/scenes/notebooks/Notebook/Notebook.scss @@ -8,66 +8,64 @@ width: 100%; overflow: hidden; - > h1, - > h2, - > h3, - > h4, - > h5 { - margin-top: 0.5rem; - } - - > p { - margin-bottom: 0.2rem; - } + .ProseMirror { + &-focused { + outline: none; + } - > .ProseMirror-focused { - outline: none; - } + > h1, + > h2, + > h3, + > h4, + > h5 { + margin-top: 0.5rem; + } - > .is-empty::before { - content: attr(data-placeholder); - float: left; - color: rgba(0, 0, 0, 0.2); - pointer-events: none; - height: 0; - } + > p { + margin-bottom: 0.2rem; + } - ul { - list-style-type: disc; - } + > .is-empty::before { + content: attr(data-placeholder); + float: left; + color: rgba(0, 0, 0, 0.2); + pointer-events: none; + height: 0; + } - ol { - list-style-type: decimal; - } + > ul { + list-style-type: disc; + } - ul, - ol { - padding-left: 1rem; + > ol { + list-style-type: decimal; + } - li { - p { - margin-bottom: 0.2rem; - } + > ul, + > ol { + padding-left: 1rem; - > p { - display: inline-block; + li { + p { + margin-bottom: 0.2rem; + } } } - } - > pre { - background-color: rgba(0, 0, 0, 0.05); - border-radius: var(--radius); - overflow-x: auto; - margin-bottom: 0.5rem; - padding: 0.5rem; - } + > pre { + background-color: rgba(0, 0, 0, 0.05); + border-radius: var(--radius); + overflow-x: auto; + margin-bottom: 0.5rem; + padding: 0.5rem; + } - > code, - > p code { - background-color: rgba(0, 0, 0, 0.05); - border-radius: var(--radius); - padding: 0.2rem; + > code, + > p code { + background-color: rgba(0, 0, 0, 0.05); + border-radius: var(--radius); + padding: 0.2rem; + } } .Backlink { diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.stories.tsx b/frontend/src/scenes/notebooks/Notebook/Notebook.stories.tsx index ecceb26e1ec93..c91894a8d45ba 100644 --- a/frontend/src/scenes/notebooks/Notebook/Notebook.stories.tsx +++ b/frontend/src/scenes/notebooks/Notebook/Notebook.stories.tsx @@ -191,6 +191,7 @@ const testCases: Record = { }, }, ]), + 'api/projects/:team_id/notebooks/empty': notebookTestTemplate('empty', []), } const meta: Meta = { @@ -396,6 +397,13 @@ export function TextOnlyNotebook(): JSX.Element { return } +export function EmptyNotebook(): JSX.Element { + useEffect(() => { + router.actions.push(urls.notebook('empty')) + }, []) + return +} + export function NotebookNotFound(): JSX.Element { useEffect(() => { router.actions.push(urls.notebook('abcde')) diff --git a/frontend/src/scenes/notebooks/Notebook/utils.ts b/frontend/src/scenes/notebooks/Notebook/utils.ts index d0b6683923c0b..a0f7bdf771998 100644 --- a/frontend/src/scenes/notebooks/Notebook/utils.ts +++ b/frontend/src/scenes/notebooks/Notebook/utils.ts @@ -80,7 +80,10 @@ export const isCurrentNodeEmpty = (editor: TTEditor): boolean => { const selection = editor.state.selection const { $anchor, empty } = selection const isEmptyTextBlock = - $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !textContent($anchor.parent) + $anchor.parent.isTextblock && + !$anchor.parent.type.spec.code && + $anchor.depth <= 1 && + !textContent($anchor.parent) if (empty && isEmptyTextBlock) { return true