chore: snapshot notebook template (#17413)

* chore: snapshot notebook template

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* no need to change user facing template

* need to all fit within snapshot bounds

* and another example

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* wat

* Update UI snapshots for `chromium` (2)

* cypress, and styling, and preview, oh my

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

cypress/e2e/notebooks.cy.ts

@@ -7,16 +7,23 @@ describe('Notebooks', () => {
                 'loadSessionRecordingsList'
             )
         })
+
         cy.fixture('api/session-recordings/recording.json').then((recording) => {
             cy.intercept('GET', /api\/projects\/\d+\/session_recordings\/.*\?.*/, { body: recording }).as(
                 'loadSessionRecording'
             )
         })
+
         cy.fixture('api/notebooks/notebooks.json').then((notebook) => {
             cy.intercept('GET', /api\/projects\/\d+\/notebooks\//, { body: notebook }).as('loadNotebooksList')
         })
+
         cy.fixture('api/notebooks/notebook.json').then((notebook) => {
             cy.intercept('GET', /api\/projects\/\d+\/notebooks\/.*\//, { body: notebook }).as('loadNotebook')
+            // this means saving doesn't work but so what?
+            cy.intercept('PATCH', /api\/projects\/\d+\/notebooks\/.*\//, (req, res) => {
+                res.reply(req.body)
+            }).as('patchNotebook')
         })
 
         cy.clickNavMenu('dashboards')
@@ -53,4 +60,45 @@ describe('Notebooks', () => {
         cy.get('.ph-recording.NotebookNode').should('be.visible')
         cy.get('.NotebookRecordingTimestamp').should('contain.text', '0:00')
     })
+
+    it('Can add a number list', () => {
+        cy.get('li').contains('Notebooks').should('exist').click()
+        cy.get('[data-attr="new-notebook"]').click()
+        // we don't actually get a new notebook because the API is mocked
+        // so, press enter twice to "exit" the timestamp block we start in
+        cy.get('.NotebookEditor').type('{enter}{enter}')
+        cy.get('.NotebookEditor').type('{enter}')
+        cy.get('.NotebookEditor').type('1. the first')
+        cy.get('.NotebookEditor').type('{enter}')
+        // no need to type the number now. it should be inserted automatically
+        cy.get('.NotebookEditor').type('the second')
+        cy.get('.NotebookEditor').type('{enter}')
+        cy.get('ol').should('contain.text', 'the first')
+        cy.get('ol').should('contain.text', 'the second')
+        // the numbered list auto inserts the next list item
+        cy.get('.NotebookEditor ol li').should('have.length', 3)
+    })
+
+    it('Can add bold', () => {
+        cy.get('li').contains('Notebooks').should('exist').click()
+        cy.get('[data-attr="new-notebook"]').click()
+        // we don't actually get a new notebook because the API is mocked
+        // so, press enter twice to "exit" the timestamp block we start in
+        cy.get('.NotebookEditor').type('{enter}{enter}')
+        cy.get('.NotebookEditor').type('**bold**')
+        cy.get('.NotebookEditor p').last().should('contain.html', '<strong>bold</strong>')
+    })
+
+    it('Can add bullet list', () => {
+        cy.get('li').contains('Notebooks').should('exist').click()
+        cy.get('[data-attr="new-notebook"]').click()
+        // we don't actually get a new notebook because the API is mocked
+        // so, press enter twice to "exit" the timestamp block we start in
+        cy.get('.NotebookEditor').type('{enter}{enter}')
+        cy.get('.NotebookEditor').type('* the first{enter}the second{enter}')
+        cy.get('ul').should('contain.text', 'the first')
+        cy.get('ul').should('contain.text', 'the second')
+        // the list auto inserts the next list item
+        cy.get('.NotebookEditor ul li').should('have.length', 3)
+    })
 })

frontend/src/lib/components/Cards/TextCard/TextCard.scss

@@ -9,13 +9,13 @@
     overflow-y: auto;
 
     ul {
-        list-style: disc;
-        padding-inline-start: 1.5em;
+        list-style-type: disc;
+        list-style-position: inside;
     }
 
     ol {
-        list-style: numeric;
-        padding-inline-start: 1.5em;
+        list-style-type: numeric;
+        list-style-position: inside;
     }
 
     img {

frontend/src/lib/components/Cards/TextCard/TextCard.tsx

@@ -24,15 +24,15 @@ interface TextCardProps extends React.HTMLAttributes<HTMLDivElement>, Resizeable
     showEditingControls?: boolean
 }
 
-interface TextCardBodyProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+interface TextCardBodyProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
     text: string
     closeDetails?: () => void
 }
 
-export function TextContent({ text, closeDetails, style }: TextCardBodyProps): JSX.Element {
+export function TextContent({ text, closeDetails, style, className }: TextCardBodyProps): JSX.Element {
     return (
         // eslint-disable-next-line react/forbid-dom-props
-        <div className="p-2 w-full overflow-auto" onClick={() => closeDetails?.()} style={style}>
+        <div className={clsx('p-2 w-full overflow-auto', className)} onClick={() => closeDetails?.()} style={style}>
             <ReactMarkdown>{text}</ReactMarkdown>
         </div>
     )

frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss

@@ -34,3 +34,15 @@
         border: 1px solid var(--danger);
     }
 }
+
+.LemonTextArea--preview {
+    ul {
+        list-style-type: disc;
+        list-style-position: inside;
+    }
+
+    ol {
+        list-style-type: decimal;
+        list-style-position: inside;
+    }
+}

frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx

@@ -138,7 +138,11 @@ export function LemonTextMarkdown({ value, onChange, ...editAreaProps }: LemonTe
                 {
                     key: 'preview',
                     label: 'Preview',
-                    content: value ? <TextContent text={value} /> : <i>Nothing to preview</i>,
+                    content: value ? (
+                        <TextContent text={value} className={'LemonTextArea--preview'} />
+                    ) : (
+                        <i>Nothing to preview</i>
+                    ),
                 },
             ]}
         />

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

@@ -32,19 +32,27 @@
             height: 0;
         }
 
-        > ul,
+        ul {
+            list-style-type: disc;
+        }
+
+        ol {
+            list-style-type: decimal;
+        }
+
+        ul,
         ol {
             padding-left: 1rem;
 
             li {
                 p {
                     margin-bottom: 0.2rem;
                 }
-            }
-        }
 
-        > ul {
-            list-style: initial;
+                > p {
+                    display: inline-block;
+                }
+            }
         }
 
         > pre {