tbenandClaude Opus 5.5
1208eac6b7
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]>
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
}
|