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,27 @@
+import { EditorContent, type Editor } from "@tiptap/react";
+import ComposerFormatBubble from "./composer-format-bubble";
+
+type Props = {
+    editor: Editor | null;
+    invalid?: boolean;
+    title?: string;
+};
+
+/**
+ * The composer's input (`useComposerEditor`), with the formatting bubble
+ * over a selection. It fills the row between the attach and voice
+ * buttons.
+ */
+export default function ComposerEditor({ editor, invalid, title }: Props) {
+    return (
+        <>
+            <EditorContent
+                editor={editor}
+                aria-invalid={invalid ? true : undefined}
+                title={title}
+                className="grow min-w-0 self-center"
+            />
+            {editor ? <ComposerFormatBubble editor={editor} /> : null}
+        </>
+    );
+}