Replace the composer textarea with a Tiptap markdown editor

The composer now writes markdown with bold, italic, strike, code, links, quotes and lists, from shortcuts, markdown typing or a bubble over the selection. @ mentions a bot and # a workspace, shown as chips and saved as [bot:ID] / [workspace:ID]. Text selected in a message can be quoted into the composer. User messages render as markdown, and replies tell the bot who and what the user mentioned. Adds an ESM stand-in for use-sync-external-store, since bunext keeps React external in page bundles and the CommonJS original requires it. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-20 05:48:23 +01:00
parent e2093b0df6
commit 1208eac6b7
51 changed files with 1618 additions and 126 deletions
@@ -0,0 +1,38 @@
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import Row from "@moduletrace/twui/layout/Row";
+import ComposerFormatButton from "./composer-format-button";
+import { ComposerFormats } from "../(data)/composer-formats";
+
+type Props = {
+    editor: Editor;
+};
+
+/**
+ * Formatting for the selected text, floating over it: bold, italic,
+ * strike, code, link, quote and lists. The same marks have their usual
+ * shortcuts (Mod+B, Mod+I, ...) and markdown typing (`**`, `- `, `> `).
+ */
+export default function ComposerFormatBubble({ editor }: Props) {
+    return (
+        <BubbleMenu
+            editor={editor}
+            shouldShow={({ editor, from, to }) =>
+                from != to && !editor.isActive("codeBlock") && !editor.isActive("mention")
+            }
+        >
+            <Row className="gap-0.5! flex-nowrap items-center p-1 rounded-default border border-solid border-hairline bg-surface shadow-popover">
+                {ComposerFormats.map((format) => (
+                    <ComposerFormatButton
+                        key={format.name}
+                        title={format.title}
+                        active={editor.isActive(format.name)}
+                        onClick={() => format.toggle({ editor })}
+                    >
+                        <format.Icon size={15} aria-hidden />
+                    </ComposerFormatButton>
+                ))}
+            </Row>
+        </BubbleMenu>
+    );
+}