fix: notebooks bullets (#17521)

PostHog · Sep 19, 2023 · ea13d0b · ea13d0b
1 parent 5ee838e
commit ea13d0b
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 51 deletions.
diff --git a/frontend/__snapshots__/scenes-app-notebooks--bullet-list.png b/frontend/__snapshots__/scenes-app-notebooks--bullet-list.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--empty-notebook.png b/frontend/__snapshots__/scenes-app-notebooks--empty-notebook.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--headings.png b/frontend/__snapshots__/scenes-app-notebooks--headings.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--numbered-list.png b/frontend/__snapshots__/scenes-app-notebooks--numbered-list.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--text-formats.png b/frontend/__snapshots__/scenes-app-notebooks--text-formats.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--text-only-notebook.png b/frontend/__snapshots__/scenes-app-notebooks--text-only-notebook.png
diff --git a/frontend/src/lib/utils.tsx b/frontend/src/lib/utils.tsx
@@ -1119,7 +1119,8 @@ export function sampleOne<T>(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
@@ -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
@@ -191,6 +191,7 @@ const testCases: Record<string, NotebookType> = {
             },
         },
     ]),
+    'api/projects/:team_id/notebooks/empty': notebookTestTemplate('empty', []),
 }
 
 const meta: Meta = {
@@ -396,6 +397,13 @@ export function TextOnlyNotebook(): JSX.Element {
     return <App />
 }
 
+export function EmptyNotebook(): JSX.Element {
+    useEffect(() => {
+        router.actions.push(urls.notebook('empty'))
+    }, [])
+    return <App />
+}
+
 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
@@ -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