{isEditing ? (
<>
{multiline ? (
@@ -151,7 +155,12 @@ export function EditableField({
/>
)}
{!mode && (
- <>
+
+ {markdown && (
+
+
+
+ )}
{saveButtonText}
- >
+
)}
>
) : (
<>
- {tentativeValue ||
{placeholder}}
+ {tentativeValue && markdown ? (
+
{tentativeValue}
+ ) : (
+ tentativeValue ||
{placeholder}
+ )}
{!mode && (
-
}
- size={compactButtons ? 'small' : undefined}
- onClick={() => setLocalIsEditing(true)}
- data-attr={`edit-prop-${name}`}
- disabled={paywall}
- noPadding
- />
+
+ }
+ size={compactButtons ? 'small' : undefined}
+ onClick={() => setLocalIsEditing(true)}
+ data-attr={`edit-prop-${name}`}
+ disabled={paywall}
+ noPadding
+ />
+
)}
>
)}
diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
index c60a2fd9eb933..25cf4daf6e04d 100644
--- a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
+++ b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
@@ -136,13 +136,15 @@ export const LemonFileInput = ({
Click or drag and drop to upload
{accept ? ` ${acceptToDisplayName(accept)}` : ''}
-
- {files.map((x, i) => (
- : undefined}>
- {x.name}
-
- ))}
-
+ {files.length > 0 && (
+
+ {files.map((x, i) => (
+ : undefined}>
+ {x.name}
+
+ ))}
+
+ )}
>
)
diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss
new file mode 100644
index 0000000000000..1858e38e78e92
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.scss
@@ -0,0 +1,30 @@
+.LemonMarkdown {
+ > * {
+ margin: 0 0 0.5em 0;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ ol,
+ ul,
+ dl {
+ padding-left: 1.5em;
+ }
+ ol {
+ list-style-type: decimal;
+ }
+ ul {
+ list-style-type: disc;
+ }
+ strong[level] {
+ // Low-key headings
+ display: block;
+ }
+ hr {
+ margin: 1em 0;
+ }
+ h1 {
+ margin-bottom: 0.25em;
+ font-weight: 600;
+ }
+}
diff --git a/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx
new file mode 100644
index 0000000000000..89c4b786360e6
--- /dev/null
+++ b/frontend/src/lib/lemon-ui/LemonMarkdown/LemonMarkdown.stories.tsx
@@ -0,0 +1,46 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { LemonMarkdown as LemonMarkdownComponent, LemonMarkdownProps } from './LemonMarkdown'
+
+type Story = StoryObj