diff --git a/js/desktop/src/features/compose/markdown-editor.css b/js/desktop/src/features/compose/markdown-editor.css index 501b7b0..8ef32d5 100644 --- a/js/desktop/src/features/compose/markdown-editor.css +++ b/js/desktop/src/features/compose/markdown-editor.css @@ -108,6 +108,10 @@ margin-bottom: 0.25rem; line-height: 1.625; } +/* Task-list items draw their own checkbox — no disc bullet. */ +.llink-mdx-content li[class*="_listItem"] { + list-style: none; +} /* Blockquote */ .llink-mdx-content blockquote { @@ -132,3 +136,20 @@ border: none; border-top: 1px solid rgb(255 255 255 / 0.1); } + +/* Tables */ +.llink-mdx-content table { + margin-bottom: 0.75rem; + border-collapse: collapse; + width: auto; +} +.llink-mdx-content th, +.llink-mdx-content td { + border: 1px solid rgb(255 255 255 / 0.2); + padding: 0.375rem 0.625rem; + text-align: left; +} +.llink-mdx-content th { + background: rgb(255 255 255 / 0.08); + font-weight: 600; +} diff --git a/js/desktop/src/features/compose/markdown-editor.tsx b/js/desktop/src/features/compose/markdown-editor.tsx index 0510e49..9bc28d4 100644 --- a/js/desktop/src/features/compose/markdown-editor.tsx +++ b/js/desktop/src/features/compose/markdown-editor.tsx @@ -9,6 +9,7 @@ import { linkPlugin, codeBlockPlugin, codeMirrorPlugin, + tablePlugin, markdownShortcutPlugin, } from "@mdxeditor/editor"; import "@mdxeditor/editor/style.css"; @@ -90,6 +91,10 @@ export function MarkdownEditor({ linkPlugin({ disableAutoLink: true }), codeBlockPlugin({ defaultCodeBlockLanguage: "" }), codeMirrorPlugin({ codeBlockLanguages: CODE_BLOCK_LANGUAGES }), + tablePlugin(), + // Headings, lists (incl. `- [ ]` task lists), emphasis, strikethrough, + // inline code, quotes, and links all transform as you type via these + // shortcuts; fenced code blocks and tables are inserted via paste/import. markdownShortcutPlugin(), ]} /> diff --git a/js/desktop/src/features/particles/text-particle-view.tsx b/js/desktop/src/features/particles/text-particle-view.tsx index dfeb543..aefbc6e 100644 --- a/js/desktop/src/features/particles/text-particle-view.tsx +++ b/js/desktop/src/features/particles/text-particle-view.tsx @@ -95,14 +95,55 @@ const markdownComponents: React.ComponentProps["components {children} ), - ul: ({ children }) => , + del: ({ children }) => {children}, + ul: ({ className, children }) => ( + + ), ol: ({ children }) =>
    {children}
, - li: ({ children }) =>
  • {children}
  • , + li: ({ className, children }) => ( +
  • + {children} +
  • + ), + input: ({ type, checked }) => + type === "checkbox" ? ( + + ) : null, blockquote: ({ children }) => (
    {children}
    ), + table: ({ children }) => ( +
    + {children}
    +
    + ), + th: ({ children }) => ( + + {children} + + ), + td: ({ children }) => ( + {children} + ), hr: () =>
    , };