feat: Allow Markdown in item descriptions (#17241)

* feat: Allow Markdown in item descriptions

* Allow forcing Link "open in new" icon for non-text children

* Fix `LemonFileInput` empty child

* Add `LemonMarkdown`

* Simplify `LemonMarkdown` imports

* Update .eslintrc.js

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (2)

* Increase test timeout

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Paul D'Ambra <[email protected]>

.eslintrc.js

@@ -147,6 +147,10 @@ module.exports = {
                         element: 'a',
                         message: 'use <Link> instead',
                     },
+                    {
+                        element: 'ReactMarkdown',
+                        message: 'use <LemonMarkdown> instead',
+                    },
                 ],
             },
         ],
@@ -175,9 +179,9 @@ module.exports = {
                         message: 'use <LemonCollapse> instead',
                     },
                     {
-                        element:'MonacoEditor',
+                        element: 'MonacoEditor',
                         message: 'use <CodeEditor> instead',
-                    }
+                    },
                 ],
             },
         ],

.storybook/test-runner.ts

@@ -72,7 +72,7 @@ module.exports = {
         const storyContext = (await getStoryContext(page, context)) as StoryContext
         const { skip = false, snapshotBrowsers = ['chromium'] } = storyContext.parameters?.testOptions ?? {}
 
-        browserContext.setDefaultTimeout(3000) // Reduce the default timeout from 30 s to 3 s to pre-empt Jest timeouts
+        browserContext.setDefaultTimeout(5000) // Reduce the default timeout from 30 s to 5 s to pre-empt Jest timeouts
         if (!skip) {
             const currentBrowser = browserContext.browser()!.browserType().name() as SupportedBrowserName
             if (snapshotBrowsers.includes(currentBrowser)) {

frontend/src/layout/navigation/TopBar/Announcement.tsx

@@ -6,7 +6,7 @@ import { NewFeatureBanner } from 'lib/introductions/NewFeatureBanner'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { LemonButton, Link } from '@posthog/lemon-ui'
 import { IconClose } from 'lib/lemon-ui/icons'
-import ReactMarkdown from 'react-markdown'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 window.process = MOCK_NODE_PROCESS
 
@@ -37,7 +37,7 @@ export function Announcement(): JSX.Element | null {
             </div>
         )
     } else if (shownAnnouncementType === AnnouncementType.CloudFlag && cloudAnnouncement) {
-        message = <ReactMarkdown className="strong">{cloudAnnouncement}</ReactMarkdown>
+        message = <LemonMarkdown className="strong">{cloudAnnouncement}</LemonMarkdown>
     } else if (shownAnnouncementType === AnnouncementType.NewFeature) {
         message = <NewFeatureBanner />
     }

frontend/src/layout/navigation/TopBar/notificationsLogic.tsx

@@ -7,8 +7,8 @@ import { ActivityLogItem, humanize, HumanizedActivityLogItem } from 'lib/compone
 import type { notificationsLogicType } from './notificationsLogicType'
 import { describerFor } from 'lib/components/ActivityLog/activityLogLogic'
 import { dayjs } from 'lib/dayjs'
-import ReactMarkdown from 'react-markdown'
 import posthog from 'posthog-js'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 const POLL_TIMEOUT = 5 * 60 * 1000
 const MARK_READ_TIMEOUT = 2500
@@ -156,11 +156,7 @@ export const notificationsLogic = kea<notificationsLogicType>([
                             email: '[email protected]',
                             name: 'Joe',
                             isSystem: true,
-                            description: (
-                                <>
-                                    <ReactMarkdown linkTarget="_blank">{changelogNotification.markdown}</ReactMarkdown>
-                                </>
-                            ),
+                            description: <LemonMarkdown>{changelogNotification.markdown}</LemonMarkdown>,
                             created_at: changelogNotification.notificationDate,
                             unread: changeLogIsUnread,
                         }

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

@@ -6,10 +6,10 @@ import { LemonButton, LemonButtonWithDropdown, LemonDivider } from '@posthog/lem
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { urls } from 'scenes/urls'
-import ReactMarkdown from 'react-markdown'
 import { dashboardsModel } from '~/models/dashboardsModel'
 import React, { useState } from 'react'
 import { CardMeta, Resizeable } from 'lib/components/Cards/CardMeta'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
 interface TextCardProps extends React.HTMLAttributes<HTMLDivElement>, Resizeable {
     dashboardId?: string | number
@@ -33,7 +33,7 @@ export function TextContent({ text, closeDetails, style, className }: TextCardBo
     return (
         // eslint-disable-next-line react/forbid-dom-props
         <div className={clsx('p-2 w-full overflow-auto', className)} onClick={() => closeDetails?.()} style={style}>
-            <ReactMarkdown>{text}</ReactMarkdown>
+            <LemonMarkdown>{text}</LemonMarkdown>
         </div>
     )
 }

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

@@ -4,7 +4,7 @@ import { useActions, useValues } from 'kea'
 import { LemonModal } from 'lib/lemon-ui/LemonModal'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { Field, Form } from 'kea-forms'
-import { LemonTextMarkdown } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
+import { LemonTextAreaMarkdown } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
 import { userLogic } from 'scenes/userLogic'
 
@@ -71,7 +71,7 @@ export function TextCardModal({
             >
                 <PayGateMini feature={AvailableFeature.DASHBOARD_COLLABORATION}>
                     <Field name="body" label="">
-                        <LemonTextMarkdown data-attr={'text-card-edit-area'} />
+                        <LemonTextAreaMarkdown data-attr={'text-card-edit-area'} />
                     </Field>
                 </PayGateMini>
             </Form>

frontend/src/lib/components/CodeSnippet/CodeSnippet.scss

@@ -1,21 +1,21 @@
 .CodeSnippet {
     position: relative;
+    font-size: 0.875rem;
+    &.CodeSnippet--compact {
+        font-size: 0.8125rem;
+        .CodeSnippet__actions {
+            top: 0.375rem;
+            right: 0.375rem;
+        }
+    }
     .CodeSnippet__actions {
         position: absolute;
         display: flex;
         top: 0.25rem;
         right: 0.25rem;
         gap: 0.5rem;
-        font-size: 1.5rem;
-
-        // NOTE: This is not ideal as we should not override core components styles but...
-        .LemonButton {
-            background: transparent !important;
-            box-shadow: transparent !important;
-
-            .LemonIcon {
-                color: #fff;
-            }
+        .LemonButton .LemonIcon {
+            color: #fff;
         }
     }
 }

frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx

@@ -28,6 +28,7 @@ import { useValues } from 'kea'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { useState } from 'react'
+import clsx from 'clsx'
 
 export enum Language {
     Text = 'text',
@@ -83,6 +84,7 @@ export interface CodeSnippetProps {
     children: string
     language?: Language
     wrap?: boolean
+    compact?: boolean
     actions?: Action[]
     style?: React.CSSProperties
     /** What is being copied. @example 'link' */
@@ -95,6 +97,7 @@ export function CodeSnippet({
     children: text,
     language = Language.Text,
     wrap = false,
+    compact = false,
     style,
     actions,
     thing = 'snippet',
@@ -109,15 +112,20 @@ export function CodeSnippet({
 
     return (
         // eslint-disable-next-line react/forbid-dom-props
-        <div className="CodeSnippet" style={style}>
+        <div className={clsx('CodeSnippet', compact && 'CodeSnippet--compact')} style={style}>
             <div className="CodeSnippet__actions">
                 {actions &&
                     actions.map(({ icon, callback, popconfirmProps, title }, index) =>
                         !popconfirmProps ? (
-                            <LemonButton key={`snippet-action-${index}`} onClick={callback} title={title} />
+                            <LemonButton
+                                key={`snippet-action-${index}`}
+                                onClick={callback}
+                                title={title}
+                                size={compact ? 'small' : 'medium'}
+                            />
                         ) : (
                             <Popconfirm key={`snippet-action-${index}`} {...popconfirmProps} onConfirm={callback}>
-                                <LemonButton icon={icon} title={title} />
+                                <LemonButton icon={icon} title={title} size={compact ? 'small' : 'medium'} />
                             </Popconfirm>
                         )
                     )}
@@ -127,6 +135,7 @@ export function CodeSnippet({
                     onClick={async () => {
                         text && (await copyToClipboard(text, thing))
                     }}
+                    size={compact ? 'small' : 'medium'}
                 />
             </div>
             <SyntaxHighlighter

frontend/src/lib/components/EditableField/EditableField.scss

@@ -13,7 +13,7 @@
         color: var(--muted);
         margin-left: 0.5rem;
     }
-    .EditableField--highlight {
+    .EditableField__highlight {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -25,7 +25,7 @@
         white-space: pre-wrap;
         overflow: auto;
     }
-    &--editing .EditableField--highlight {
+    &--editing .EditableField__highlight {
         flex-grow: 1;
         align-items: flex-end;
         width: auto;
@@ -46,6 +46,13 @@
         overflow: scroll;
         white-space: pre;
     }
+    .EditableField__actions {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-left: 0.5rem;
+    }
     input,
     textarea {
         max-width: 100%;
@@ -60,10 +67,4 @@
         align-self: center;
         width: 100%;
     }
-    button {
-        &:first-of-type {
-            margin-left: 0.75rem;
-        }
-        margin-left: 0.5rem;
-    }
 }

frontend/src/lib/components/EditableField/EditableField.stories.tsx

@@ -1,30 +1,30 @@
-import { Meta } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 
 import { EditableField as EditableFieldComponent } from './EditableField'
-import { PageHeader } from '../PageHeader'
 import { useState } from 'react'
 
 const meta: Meta<typeof EditableFieldComponent> = {
     title: 'Components/Editable Field',
     component: EditableFieldComponent,
+    tags: ['autodocs'],
 }
 export default meta
 
-export function EditableField_(): JSX.Element {
-    const [savedTitle, setSavedTitle] = useState('Foo')
-    const [savedDescription, setSavedDescription] = useState('Lorem ipsum dolor sit amet.')
+const Template: StoryFn<typeof EditableFieldComponent> = (args) => {
+    const [value, setValue] = useState(args.value ?? 'Lorem ipsum')
 
     return (
-        <PageHeader
-            title={<EditableFieldComponent name="title" value={savedTitle} onSave={(value) => setSavedTitle(value)} />}
-            caption={
-                <EditableFieldComponent
-                    name="description"
-                    value={savedDescription}
-                    onSave={(value) => setSavedDescription(value)}
-                    multiline
-                />
-            }
-        />
+        <div className="flex">
+            <EditableFieldComponent {...args} value={value} onSave={(value) => setValue(value)} />
+        </div>
     )
 }
+
+export const Default = Template.bind({})
+
+export const MultilineWithMarkdown = Template.bind({})
+MultilineWithMarkdown.args = {
+    multiline: true,
+    markdown: true,
+    value: 'Lorem ipsum **dolor** sit amet, consectetur adipiscing _elit_.',
+}

frontend/src/lib/components/EditableField/EditableField.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import './EditableField.scss'
-import { IconEdit } from 'lib/lemon-ui/icons'
+import { IconEdit, IconMarkdown } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import TextareaAutosize from 'react-textarea-autosize'
 import clsx from 'clsx'
 import { pluralize } from 'lib/utils'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 
-interface EditableFieldProps {
+export interface EditableFieldProps {
     /** What this field stands for. */
     name: string
     value: string
@@ -19,6 +20,8 @@ interface EditableFieldProps {
     maxLength?: number
     autoFocus?: boolean
     multiline?: boolean
+    /** Whether to render the content as Markdown in view mode. */
+    markdown?: boolean
     compactButtons?: boolean
     /** Whether this field should be gated behind a "paywall". */
     paywall?: boolean
@@ -46,6 +49,7 @@ export function EditableField({
     maxLength,
     autoFocus = true,
     multiline = false,
+    markdown = false,
     compactButtons = false,
     paywall = false,
     mode,
@@ -116,7 +120,7 @@ export function EditableField({
                         : undefined
                 }
             >
-                <div className="EditableField--highlight">
+                <div className="EditableField__highlight">
                     {isEditing ? (
                         <>
                             {multiline ? (
@@ -151,7 +155,12 @@ export function EditableField({
                                 />
                             )}
                             {!mode && (
-                                <>
+                                <div className="EditableField__actions">
+                                    {markdown && (
+                                        <Tooltip title="Markdown formatting support">
+                                            <IconMarkdown className="text-muted text-2xl" />
+                                        </Tooltip>
+                                    )}
                                     <LemonButton
                                         title="Cancel editing"
                                         size="small"
@@ -178,22 +187,28 @@ export function EditableField({
                                     >
                                         {saveButtonText}
                                     </LemonButton>
-                                </>
+                                </div>
                             )}
                         </>
                     ) : (
                         <>
-                            {tentativeValue || <i>{placeholder}</i>}
+                            {tentativeValue && markdown ? (
+                                <LemonMarkdown lowKeyHeadings>{tentativeValue}</LemonMarkdown>
+                            ) : (
+                                tentativeValue || <i>{placeholder}</i>
+                            )}
                             {!mode && (
-                                <LemonButton
-                                    title="Edit"
-                                    icon={<IconEdit />}
-                                    size={compactButtons ? 'small' : undefined}
-                                    onClick={() => setLocalIsEditing(true)}
-                                    data-attr={`edit-prop-${name}`}
-                                    disabled={paywall}
-                                    noPadding
-                                />
+                                <div className="EditableField__actions">
+                                    <LemonButton
+                                        title="Edit"
+                                        icon={<IconEdit />}
+                                        size={compactButtons ? 'small' : undefined}
+                                        onClick={() => setLocalIsEditing(true)}
+                                        data-attr={`edit-prop-${name}`}
+                                        disabled={paywall}
+                                        noPadding
+                                    />
+                                </div>
                             )}
                         </>
                     )}