+
+
+
+
+
+
+
+
+
+
+
`
+};
+
+export const commentBoxDemo = {
+ type: 'code',
+ code: `function CommentBox() {
+ const editor = React.useRef(null);
+ const [empty, setEmpty] = React.useState(true);
+ const [comments, setComments] = React.useState([]);
+ const people = ${people};
+
+ const send = () => {
+ const html = editor.current.getHTML();
+ setComments(current => [...current, html]);
+ editor.current.commands.clear();
+ setEmpty(true);
+ };
+
+ return (
+
+
+
+
+ );
+}`
+};
+
+export const slashItemsDemo = {
+ type: 'code',
+ code: `function SlashItems() {
+ const items = [
+ ...defaultSlashItems,
+ {
+ id: 'date',
+ label: "Today's date",
+ group: 'Insert',
+ keywords: ['today', 'time'],
+ icon:
+
+
+
+ );
+}`
+};
+
+export const controlledDemo = {
+ type: 'code',
+ code: `function ControlledEditor() {
+ const [value, setValue] = React.useState(${sampleDoc.replace(/\n/g, '\n ')});
+ const [html, setHtml] = React.useState('');
+
+ return (
+
+
+
+
+
+
`
+};
+
+export const customControlDemo = {
+ type: 'code',
+ code: `function ClearFormattingButton() {
+ const editor = useEditor();
+ const canClear = useEditorState(() => editor.can.clearFormatting());
+
+ return (
+
+
+
+
+
+
+);`
+};
diff --git a/apps/www/src/content/docs/components/editor/index.mdx b/apps/www/src/content/docs/components/editor/index.mdx
new file mode 100644
index 000000000..f737f5d1e
--- /dev/null
+++ b/apps/www/src/content/docs/components/editor/index.mdx
@@ -0,0 +1,272 @@
+---
+title: Editor
+description: A rich text editor with a floating toolbar, a fixed toolbar, a slash menu and mentions, built on ProseMirror.
+source: packages/raystack/components/editor
+tag: new
+---
+
+import { preview, playground, fixedToolbarDemo, commentBoxDemo, mentionsDemo, slashItemsDemo, controlledDemo, markdownDemo, readOnlyDemo, customControlDemo } from "./demo.ts";
+
+abc
Docs
x
'); + }); +}); + +describe('editorToText', () => { + it('separates blocks with a blank line and reads mentions as @label', () => { + const value = doc( + { type: 'heading', attrs: { level: 1 }, content: [text('Title')] }, + paragraph( + text('Ask '), + { + type: 'mention', + attrs: { id: 'u1', label: 'Maya', type: 'user', trigger: '@' } + }, + { type: 'hardBreak' }, + text('now') + ) + ); + expect(editorToText(value)).toBe('Title\n\nAsk @Maya\nnow'); + expect(docToText(docFromJSON(buildSchema(), value)).mentions).toEqual([ + { + id: 'u1', + label: 'Maya', + type: 'user', + trigger: '@', + start: 11, + end: 16 + } + ]); + }); +}); + +describe('docFromJSON', () => { + it('unwraps nodes the schema does not have and wraps misplaced ones', () => { + expect( + docFromJSON( + buildSchema(['bold']), + doc( + { + type: 'bulletList', + content: [ + { type: 'listItem', content: [paragraph(text('Buy milk'))] }, + { type: 'listItem', content: [paragraph(text('Call Bob'))] } + ] + }, + paragraph(text('x', [{ type: 'italic' }, { type: 'bold' }])) + ) + ).toJSON() + ).toEqual( + doc( + paragraph(text('Buy milk')), + paragraph(text('Call Bob')), + paragraph(text('x', [{ type: 'bold' }])) + ) + ); + expect( + docFromJSON( + buildSchema(), + doc(text('Hello'), { + type: 'listItem', + content: [paragraph(text('a'))] + }) + ).toJSON() + ).toEqual( + doc(paragraph(text('Hello')), { + type: 'bulletList', + content: [{ type: 'listItem', content: [paragraph(text('a'))] }] + }) + ); + }); + + it('repairs invalid content and never throws', () => { + const load = (value: unknown) => + docFromJSON(buildSchema(), value as EditorJSON).toJSON(); + expect( + load( + doc({ + type: 'codeBlock', + content: [ + text('a', [{ type: 'bold' }]), + { type: 'hardBreak' }, + text('b') + ] + }) + ) + ).toEqual( + doc({ + type: 'codeBlock', + attrs: { language: null }, + content: [text('a\nb')] + }) + ); + expect( + load( + doc({ type: 'heading', attrs: { level: 2.4 }, content: [text('h')] }) + ) + ).toEqual( + doc({ type: 'heading', attrs: { level: 2 }, content: [text('h')] }) + ); + expect( + load(doc(paragraph({ type: 'mention', attrs: { label: 'Maya' } }))) + ).toEqual(doc(paragraph(text('@Maya')))); + expect(load({ type: 'paragraph' })).toEqual(doc(paragraph())); + expect(load({ type: 'doc', content: [null] })).toEqual(doc(paragraph())); + expect(load({ type: 'doc', content: 'text' })).toEqual(doc(paragraph())); + }); +}); + +describe('commands', () => { + it('sets a link after Select All', () => { + const docNode = docFromJSON( + buildSchema(), + doc(paragraph(text('a')), paragraph(text('b'))) + ); + const state = EditorState.create({ + doc: docNode, + selection: new AllSelection(docNode) + }); + expect(apply(state, setLink('a.b'))).toEqual({ + ran: true, + json: doc( + paragraph(text('a', [link('https://a.b')])), + paragraph(text('b', [link('https://a.b')])) + ) + }); + }); + + it('keeps line breaks when a paragraph becomes a code block and back', () => { + const stateOf = (json: EditorJSON) => { + const docNode = docFromJSON(buildSchema(), json); + return EditorState.create({ + doc: docNode, + selection: TextSelection.create(docNode, 1) + }); + }; + const lines = doc(paragraph(text('a'), { type: 'hardBreak' }, text('b'))); + const code = apply(stateOf(lines), toggleBlock('codeBlock')); + expect(code.json).toEqual( + doc({ + type: 'codeBlock', + attrs: { language: null }, + content: [text('a\nb')] + }) + ); + expect(apply(stateOf(code.json), toggleBlock('codeBlock')).json).toEqual( + lines + ); + }); +}); + +describe('links', () => { + it('allows web, mail and relative links, and adds a scheme to bare hosts', () => { + for (const href of ['https://a.b', 'mailto:a@b.c', '/docs']) { + expect(isSafeHref(href), href).toBe(true); + } + for (const href of [ + 'javascript:alert(1)', + ' java\tscript:alert(1)', + 'data:text/html,x', + 'javascript:alert(1)', + 'javascript:alert(1)', + 'javascript:alert(1)' + ]) { + expect(isSafeHref(href), href).toBe(false); + } + expect(normalizeHref('raystack.org')).toBe('https://raystack.org'); + expect(normalizeHref('localhost:3000')).toBe('https://localhost:3000'); + expect(normalizeHref('a@b.co')).toBe('mailto:a@b.co'); + expect(normalizeHref('#top')).toBe('#top'); + }); +}); diff --git a/packages/raystack/components/editor/__tests__/data-slots.test.tsx b/packages/raystack/components/editor/__tests__/data-slots.test.tsx new file mode 100644 index 000000000..21cbdf1d6 --- /dev/null +++ b/packages/raystack/components/editor/__tests__/data-slots.test.tsx @@ -0,0 +1,73 @@ +import { act, fireEvent, render, screen } from '@testing-library/react'; +import { createRef } from 'react'; +import { describe, expect, it } from 'vitest'; +import { expectSlots, getSlot } from '~/test-utils/data-slots'; +import { Editor } from '../editor'; +import type { EditorApi } from '../editor-types'; +import { contentOf, doc, flush, p, paste, select } from './test-utils'; + +describe('Editor data-slot contract', () => { + it('renders the root, content and fixed toolbar slots', async () => { + const { container } = render( +/h1
'); + }); + + it('runs a custom item with the editor api and shows its description', async () => { + const run = vi.fn((editor: EditorApi) => { + editor.commands.insertText('today'); + }); + const items: EditorSlashItem[] = [ + { id: 'date', label: 'Date', description: 'Insert a dated line', run }, + { id: 'other', label: 'Other', run: () => undefined } + ]; + const { content, api } = setup(Hello
'); + expect(bold).toHaveAttribute('aria-pressed', 'true'); + }); + + it('sets a heading from the menu', async () => { + const { api, view } = setup(); + select(view(), 1, 1); + const trigger = screen.getByRole('button', { name: 'Text style' }); + fireEvent.click(trigger); + await flush(); + // The same element stays the trigger, so the menu keeps its anchor. + expect(trigger).toHaveAttribute('aria-expanded', 'true'); + expect( + await screen.findByRole('menuitemradio', { name: /Text/ }) + ).toHaveAttribute('aria-checked', 'true'); + fireEvent.click(screen.getByRole('menuitemradio', { name: /Heading 2/ })); + await flush(); + expect(api().getHTML()).toBe('Hello
'); + }); + + it('applies a link from the link field', async () => { + const { api, view } = setup(); + select(view(), 1, 6); + fireEvent.click(screen.getByRole('button', { name: 'Link' })); + await flush(); + const input = await screen.findByRole('textbox', { name: 'Link URL' }); + fireEvent.change(input, { target: { value: 'raystack.org' } }); + fireEvent.keyDown(input, { key: 'Enter' }); + await flush(); + expect(api().getHTML()).toContain('href="https://raystack.org"'); + }); +}); + +describe('Editor.FloatingToolbar', () => { + function setupFloating() { + const actionsRef = createRef
+
+
+
+
+
+
+ );
+ const content = contentOf(result.container);
+ const view = () => {
+ const current = actionsRef.current?.view;
+ if (!current) throw new Error('no view');
+ return current;
+ };
+ // Focuses the text and selects "Hello".
+ const selectWord = async () => {
+ act(() => content.focus());
+ fireEvent.focus(content);
+ select(view(), 1, 6);
+ await flush();
+ };
+ const openLink = async () => {
+ await selectWord();
+ fireEvent.click(screen.getByRole('button', { name: 'Link' }));
+ await flush();
+ return screen.getByRole('textbox', { name: 'Link URL' });
+ };
+ return { ...result, content, view, selectWord, openLink };
+ }
+
+ it('shows for a text selection and hides when it collapses', async () => {
+ const { view, selectWord } = setupFloating();
+ expect(screen.queryByRole('toolbar')).toBeNull();
+ await selectWord();
+ expect(
+ screen.getByRole('toolbar', { name: 'Formatting' })
+ ).toBeInTheDocument();
+ select(view(), 3, 3);
+ await flush();
+ expect(screen.queryByRole('toolbar')).toBeNull();
+ });
+
+ it('waits for the pointer to come up', async () => {
+ const { content, selectWord } = setupFloating();
+ fireEvent.mouseDown(content);
+ await selectWord();
+ expect(screen.queryByRole('toolbar')).toBeNull();
+ fireEvent.mouseUp(document);
+ await flush();
+ expect(screen.getByRole('toolbar')).toBeInTheDocument();
+ });
+
+ it('hides on Escape until the selection changes', async () => {
+ const { view, content, selectWord } = setupFloating();
+ await selectWord();
+ fireEvent.keyDown(screen.getByRole('button', { name: 'Bold' }), {
+ key: 'Escape'
+ });
+ await flush();
+ expect(screen.queryByRole('toolbar')).toBeNull();
+ expect(document.activeElement).toBe(content);
+ select(view(), 3, 3);
+ select(view(), 1, 6);
+ await flush();
+ expect(screen.getByRole('toolbar')).toBeInTheDocument();
+ });
+
+ it('takes focus with Alt-F10 and returns it when a command hides the toolbar', async () => {
+ const { content, selectWord } = setupFloating();
+ await selectWord();
+ pressKey(content, 'F10', { altKey: true });
+ expect(document.activeElement).toBe(
+ screen.getByRole('button', { name: 'Bold' })
+ );
+ const codeBlock = screen.getByRole('button', { name: 'Code block' });
+ act(() => codeBlock.focus());
+ fireEvent.click(codeBlock);
+ await flush();
+ expect(screen.queryByRole('toolbar')).toBeNull();
+ expect(document.activeElement).toBe(content);
+ });
+
+ it('swaps the buttons for the link field, also with Mod-k', async () => {
+ const { content, selectWord, openLink } = setupFloating();
+ const input = await openLink();
+ expect(screen.queryByRole('toolbar')).toBeNull();
+ fireEvent.change(input, { target: { value: 'https://raystack.org' } });
+ fireEvent.keyDown(input, { key: 'Enter' });
+ await flush();
+ expect(screen.getByRole('toolbar')).toBeInTheDocument();
+
+ await selectWord();
+ pressKey(content, 'k', { ctrlKey: true });
+ await flush();
+ expect(
+ screen.getByRole('textbox', { name: 'Link URL' })
+ ).toBeInTheDocument();
+ });
+
+ it('closes the link field on a press outside', async () => {
+ const { openLink } = setupFloating();
+ await openLink();
+ const outside = screen.getByRole('button', { name: 'Outside' });
+ fireEvent.pointerDown(outside);
+ fireEvent.mouseDown(outside);
+ act(() => outside.focus());
+ fireEvent.click(outside);
+ await flush();
+ expect(screen.queryByRole('textbox', { name: 'Link URL' })).toBeNull();
+ });
+
+ it('closes the link field and returns to the text when Tab leaves it', async () => {
+ const { content, openLink } = setupFloating();
+ const input = await openLink();
+ const guard = Array.from(
+ document.querySelectorAllHello
'); + expect('getMarkdown' in details).toBe(false); + }); + + it('applies a controlled value with a new history and does not report it', () => { + const actionsRef = createRefHello
'); + act(() => { + on.api().commands.undo(); + }); + pressKey(on.content, 'y', { ctrlKey: true }); + expect(on.api().isActive('bold')).toBe(true); + on.unmount(); + + const off = setup({ + defaultValue: doc(p('Hello')), + shortcuts: { bold: false, redo: false } + }); + select(off.view(), 1, 6); + pressKey(off.content, 'b', { ctrlKey: true }); + expect(off.api().isActive('bold')).toBe(false); + act(() => { + off.api().commands.toggleMark('bold'); + off.api().commands.undo(); + }); + pressKey(off.content, 'y', { ctrlKey: true }); + expect(off.api().isActive('bold')).toBe(false); + }); + + it('applies input rules, and waits for a space after ***', () => { + const cases = [ + ['# ', ''], + ['- ', ''], + ['***bold', '
***bold
'], + ['**bold**', 'bold
'] + ]; + for (const [input, html] of cases) { + const { view, api, unmount } = setup(); + typeText(view(), input); + expect(api().getHTML(), input).toBe(html); + unmount(); + } + }); + + it('links the selection when a safe URL is pasted over it', () => { + const { view, api, content } = setup({ defaultValue: doc(p('Apsara')) }); + select(view(), 1, 7); + paste(content, 'javascript:alert(1)'); + expect(api().getHTML()).toBe('javascript:alert(1)
'); + select(view(), 1, 20); + paste(content, 'https://raystack.org'); + expect(api().getHTML()).toBe( + '' + ); + }); + + it('follows readOnly and disabled when they change after mount', () => { + const tasks = doc({ + type: 'taskList', + content: [ + { type: 'taskItem', attrs: { checked: true }, content: [p('Docs')] } + ] + }); + const { container, rerender } = render( +Item
'); + expect(api().commands.toggleList('bulletList')).toBe(true); + expect(api().getHTML()).toBe('Item
ab!
'); + }); +}); diff --git a/packages/raystack/components/editor/__tests__/markdown.test.tsx b/packages/raystack/components/editor/__tests__/markdown.test.tsx new file mode 100644 index 000000000..43d5fdd7a --- /dev/null +++ b/packages/raystack/components/editor/__tests__/markdown.test.tsx @@ -0,0 +1,292 @@ +import { render } from '@testing-library/react'; +import { createRef, useState } from 'react'; +import { describe, expect, it, vi } from 'vitest'; +import { docFromJSON, type EditorJSON } from '../core/json'; +import { buildSchema } from '../core/schema'; +import { Editor } from '../editor'; +import type { EditorApi } from '../editor-types'; +import { MarkdownAdapter } from '../markdown'; +import { contentOf, copy, paste, pressKey, select } from './test-utils'; + +const t = (text: string, marks?: EditorJSON['marks']): EditorJSON => ({ + type: 'text', + text, + ...(marks ? { marks } : {}) +}); +const para = (...content: EditorJSON[]): EditorJSON => ({ + type: 'paragraph', + ...(content.length ? { content } : {}) +}); +const doc = (...content: EditorJSON[]): EditorJSON => ({ + type: 'doc', + content +}); +const link = (href: string) => [{ type: 'link', attrs: { href } }]; +const mention: EditorJSON = { + type: 'mention', + attrs: { id: 'u1', label: 'Maya', type: 'user', trigger: '@' } +}; +const bullets = (...items: string[]): EditorJSON => ({ + type: 'bulletList', + content: items.map(item => ({ type: 'listItem', content: [para(t(item))] })) +}); +const tasks = (...items: string[]): EditorJSON => ({ + type: 'taskList', + content: items.map(item => ({ + type: 'taskItem', + attrs: { checked: false }, + content: [para(...(item ? [t(item)] : []))] + })) +}); + +/** Loads through the schema, so defaults such as `language: null` are filled in. */ +function normalize(value: EditorJSON): EditorJSON { + return docFromJSON(buildSchema(), value).toJSON() as EditorJSON; +} + +function roundTrip(value: EditorJSON): EditorJSON { + return normalize(MarkdownAdapter.toEditor(MarkdownAdapter.fromEditor(value))); +} + +const EVERYTHING = doc( + { type: 'heading', attrs: { level: 1 }, content: [t('Release notes')] }, + para( + t('Plain '), + t('bold', [{ type: 'bold' }]), + t(' '), + t('italic', [{ type: 'italic' }]), + t(' '), + t('strike', [{ type: 'strike' }]), + t(' '), + t('under', [{ type: 'underline' }]), + t(' '), + t('code', [{ type: 'code' }]), + t(' '), + t('link', link('https://raystack.org')), + t(' and '), + { + type: 'mention', + attrs: { id: 'u_42', label: 'Maya Chen', type: 'user', trigger: '@' } + }, + t(' done.') + ), + para(t('line one'), { type: 'hardBreak' }, t('line two')), + { type: 'blockquote', content: [para(t('Quoted'))] }, + { + type: 'codeBlock', + attrs: { language: 'ts' }, + content: [t('const a = `x`;\nconst b = 2;')] + }, + { type: 'horizontalRule' }, + { + type: 'bulletList', + content: [ + { type: 'listItem', content: [para(t('One')), bullets('Nested')] }, + { type: 'listItem', content: [para(t('Two'))] } + ] + }, + { + type: 'orderedList', + attrs: { start: 3 }, + content: [{ type: 'listItem', content: [para(t('Three'))] }] + }, + { + type: 'taskList', + content: [ + { type: 'taskItem', attrs: { checked: true }, content: [para(t('Done'))] } + ] + }, + para(t('Special *chars* _here_ [x] # not a heading')) +); + +describe('MarkdownAdapter', () => { + it('round-trips every node and mark', () => { + expect(roundTrip(EVERYTHING)).toEqual(normalize(EVERYTHING)); + }); + + it('writes readable Markdown', () => { + expect( + MarkdownAdapter.fromEditor( + doc( + { type: 'heading', attrs: { level: 2 }, content: [t('Title')] }, + para(t('Ship the '), t('fix', [{ type: 'bold' }]), t('.')), + tasks('Docs') + ) + ) + ).toBe('## Title\n\nShip the **fix**.\n\n- [ ] Docs'); + }); + + it('round-trips content that plain Markdown would misread', () => { + const cases: RecordHeading
one
two
**x**`, so CSS `:empty` + * cannot do this. + */ +export function placeholderPlugin( + getText: () => string | undefined, + isEmpty: (doc: PMNode) => boolean +): Plugin { + return new Plugin({ + props: { + decorations: state => { + const text = getText(); + const first = state.doc.firstChild; + if (!text || !first || !isEmpty(state.doc)) return null; + return DecorationSet.create(state.doc, [ + Decoration.node(0, first.nodeSize, { + class: styles.placeholder, + 'data-placeholder': text + }) + ]); + } + } + }); +} diff --git a/packages/raystack/components/editor/core/commands.ts b/packages/raystack/components/editor/core/commands.ts new file mode 100644 index 000000000..e550657b4 --- /dev/null +++ b/packages/raystack/components/editor/core/commands.ts @@ -0,0 +1,363 @@ +import { setBlockType, toggleMark, wrapIn } from 'prosemirror-commands'; +import { redo, undo } from 'prosemirror-history'; +import type { Mark, MarkType, Node as PMNode } from 'prosemirror-model'; +import { liftListItem, wrapInList } from 'prosemirror-schema-list'; +import { + type Command, + type EditorState, + Selection, + type Transaction +} from 'prosemirror-state'; +import { liftTarget } from 'prosemirror-transform'; +import { isSafeHref, normalizeHref } from './link'; +import { + type EditorHeadingLevel, + type EditorList, + type EditorMark, + LIST_TYPES +} from './schema'; + +export type EditorBlock = + | 'blockquote' + | 'codeBlock' + | EditorList + | 'horizontalRule'; + +const LISTS: readonly string[] = LIST_TYPES; + +/** Runs `build` on a scratch transaction, so a step that throws reads as "cannot run". */ +function tryCommand( + state: EditorState, + dispatch: ((tr: Transaction) => void) | undefined, + build: (tr: Transaction) => boolean +): boolean { + const tr = state.tr; + try { + if (!build(tr)) return false; + } catch { + return false; + } + dispatch?.(tr.scrollIntoView()); + return true; +} + +export function isMarkActive(state: EditorState, mark: string): boolean { + const type = state.schema.marks[mark]; + if (!type) return false; + const { from, to, empty, $from } = state.selection; + if (empty) return !!type.isInSet(state.storedMarks ?? $from.marks()); + return state.doc.rangeHasMark(from, to, type); +} + +/** The nearest list around the selection start, or null. */ +export function activeList(state: EditorState): EditorList | null { + const { $from } = state.selection; + for (let depth = $from.depth; depth > 0; depth -= 1) { + const name = $from.node(depth).type.name; + if (LISTS.includes(name)) return name as EditorList; + } + return null; +} + +export function isBlockquoteActive(state: EditorState): boolean { + const { $from } = state.selection; + for (let depth = $from.depth; depth > 0; depth -= 1) { + if ($from.node(depth).type.name === 'blockquote') return true; + } + return false; +} + +/** `'paragraph'`, a heading level, or null for any other text block. */ +export function activeTextStyle( + state: EditorState +): 'paragraph' | EditorHeadingLevel | null { + const parent = state.selection.$from.parent; + if (parent.type.name === 'paragraph') return 'paragraph'; + if (parent.type.name === 'heading') { + return parent.attrs.level as EditorHeadingLevel; + } + return null; +} + +export function isBlockActive(state: EditorState, block: EditorBlock): boolean { + if (block === 'blockquote') return isBlockquoteActive(state); + if (block === 'codeBlock') { + return state.selection.$from.parent.type.name === 'codeBlock'; + } + if (block === 'horizontalRule') return false; + return activeList(state) === block; +} + +/** The range of the mark of `type` around `pos`, in the text block that holds it. */ +export function markRange( + doc: PMNode, + pos: number, + type: MarkType +): { from: number; to: number; mark: Mark } | null { + const $pos = doc.resolve(pos); + const parent = $pos.parent; + let start = parent.childAfter($pos.parentOffset); + if (!start.node || !type.isInSet(start.node.marks)) { + start = parent.childBefore($pos.parentOffset); + } + if (!start.node) return null; + const mark = type.isInSet(start.node.marks); + if (!mark) return null; + + let startIndex = start.index; + let from = $pos.start() + start.offset; + let endIndex = startIndex + 1; + let to = from + start.node.nodeSize; + while (startIndex > 0 && mark.isInSet(parent.child(startIndex - 1).marks)) { + startIndex -= 1; + from -= parent.child(startIndex).nodeSize; + } + while ( + endIndex < parent.childCount && + mark.isInSet(parent.child(endIndex).marks) + ) { + to += parent.child(endIndex).nodeSize; + endIndex += 1; + } + return { from, to, mark }; +} + +/** The `href` of the link at the selection, or null. */ +export function activeLink(state: EditorState): string | null { + const type = state.schema.marks.link; + if (!type) return null; + const { from, to, empty } = state.selection; + if (empty) { + return ( + (markRange(state.doc, from, type)?.mark.attrs.href as string) ?? null + ); + } + let href: string | null = null; + state.doc.nodesBetween(from, to, node => { + if (href) return false; + const mark = type.isInSet(node.marks); + if (mark) href = mark.attrs.href as string; + return true; + }); + return href; +} + +export function toggleMarkCommand(mark: EditorMark): Command { + return (state, dispatch) => { + const type = state.schema.marks[mark]; + if (!type) return false; + return toggleMark(type)(state, dispatch); + }; +} + +export const setParagraph: Command = (state, dispatch) => { + const type = state.schema.nodes.paragraph; + return setBlockType(type)(state, dispatch); +}; + +export function setHeading(level: EditorHeadingLevel): Command { + return (state, dispatch) => { + const type = state.schema.nodes.heading; + if (!type) return false; + return setBlockType(type, { level })(state, dispatch); + }; +} + +export function toggleBlock(block: 'blockquote' | 'codeBlock'): Command { + return (state, dispatch) => { + const type = state.schema.nodes[block]; + if (!type) return false; + + if (block === 'codeBlock') { + if (state.selection.$from.parent.type === type) { + return setParagraph(state, dispatch); + } + return setBlockType(type)(state, dispatch); + } + + if (isBlockquoteActive(state)) { + const { $from, $to } = state.selection; + const range = $from.blockRange($to, node => node.type === type); + const target = range ? liftTarget(range) : null; + if (!range || target == null) return false; + dispatch?.(state.tr.lift(range, target).scrollIntoView()); + return true; + } + return wrapIn(type)(state, dispatch); + }; +} + +export function toggleList(list: EditorList): Command { + return (state, dispatch) => { + const listType = state.schema.nodes[list]; + const itemType = + state.schema.nodes[list === 'taskList' ? 'taskItem' : 'listItem']; + if (!listType || !itemType) return false; + + const { $from, $to } = state.selection; + const range = $from.blockRange($to, node => LISTS.includes(node.type.name)); + + if (!range) return wrapInList(listType)(state, dispatch); + + const current = range.parent; + if (current.type === listType) + return liftListItem(itemType)(state, dispatch); + + // A different kind of list: rebuild it in place. The items keep their + // content and size, so every position inside stays valid. + return tryCommand(state, dispatch, tr => { + const pos = range.$from.before(range.depth); + const items: PMNode[] = []; + current.forEach(item => { + items.push( + item.type === itemType + ? item + : itemType.create( + list === 'taskList' ? { checked: false } : null, + item.content + ) + ); + }); + tr.replaceWith(pos, pos + current.nodeSize, listType.create(null, items)); + tr.setSelection(Selection.fromJSON(tr.doc, state.selection.toJSON())); + return true; + }); + }; +} + +/** + * Whether a link can go on the selection: the text block at a caret, or some + * text in a range, allows the link mark. + */ +export function canSetLink(state: EditorState): boolean { + const type = state.schema.marks.link; + if (!type) return false; + const { empty, $from, ranges } = state.selection; + if (empty) { + return $from.parent.inlineContent && $from.parent.type.allowsMarkType(type); + } + return ranges.some(range => { + let applies = false; + state.doc.nodesBetween(range.$from.pos, range.$to.pos, node => { + if (applies) return false; + applies = node.inlineContent && node.type.allowsMarkType(type); + return true; + }); + return applies; + }); +} + +export function setLink(href: string): Command { + return (state, dispatch) => { + const type = state.schema.marks.link; + if (!type || !canSetLink(state)) return false; + const normalized = normalizeHref(href); + if (!normalized || !isSafeHref(normalized)) return false; + const { from, to, empty } = state.selection; + + return tryCommand(state, dispatch, tr => { + const mark = type.create({ href: normalized }); + if (!empty) { + tr.removeMark(from, to, type).addMark(from, to, mark); + return true; + } + const range = markRange(state.doc, from, type); + if (range) { + tr.removeMark(range.from, range.to, type).addMark( + range.from, + range.to, + mark + ); + return true; + } + tr.insertText(normalized, from); + tr.addMark(from, from + normalized.length, mark); + return true; + }); + }; +} + +export const unsetLink: Command = (state, dispatch) => { + const type = state.schema.marks.link; + if (!type) return false; + const { from, to, empty } = state.selection; + if (!empty) { + if (!state.doc.rangeHasMark(from, to, type)) return false; + dispatch?.(state.tr.removeMark(from, to, type)); + return true; + } + const range = markRange(state.doc, from, type); + if (!range) return false; + dispatch?.(state.tr.removeMark(range.from, range.to, type)); + return true; +}; + +export const insertHorizontalRule: Command = (state, dispatch) => { + const type = state.schema.nodes.horizontalRule; + if (!type) return false; + const paragraph = state.schema.nodes.paragraph; + + return tryCommand(state, dispatch, tr => { + tr.deleteSelection(); + const $pos = tr.doc.resolve(tr.selection.from); + if (!$pos.parent.isTextblock) return false; + const rule = type.create(); + + if ($pos.parent.content.size === 0 || $pos.parentOffset === 0) { + tr.insert($pos.before(), rule); + return true; + } + if ($pos.parentOffset === $pos.parent.content.size) { + const after = $pos.after(); + tr.insert(after, [rule, paragraph.create()]); + tr.setSelection( + Selection.near(tr.doc.resolve(after + rule.nodeSize + 1)) + ); + return true; + } + tr.split($pos.pos); + tr.insert($pos.pos + 1, rule); + return true; + }); +}; + +export function insertText(text: string): Command { + return (state, dispatch) => { + dispatch?.(state.tr.insertText(text).scrollIntoView()); + return true; + }; +} + +export const clearFormatting: Command = (state, dispatch) => { + const { from, to, empty, $from } = state.selection; + if (empty) { + const marks = state.storedMarks ?? $from.marks(); + if (marks.length === 0) return false; + dispatch?.(state.tr.setStoredMarks([])); + return true; + } + let hasMarks = false; + state.doc.nodesBetween(from, to, node => { + if (node.marks.length) hasMarks = true; + return !hasMarks; + }); + if (!hasMarks) return false; + dispatch?.(state.tr.removeMark(from, to)); + return true; +}; + +/** The editor's commands as ProseMirror commands, for code that works on an `EditorState` directly. */ +export const editorCommands = { + toggleMark: toggleMarkCommand, + setParagraph: (): Command => setParagraph, + setHeading, + toggleBlock, + toggleList, + setLink, + unsetLink: (): Command => unsetLink, + insertHorizontalRule: (): Command => insertHorizontalRule, + insertText, + clearFormatting: (): Command => clearFormatting, + undo: (): Command => undo, + redo: (): Command => redo +}; diff --git a/packages/raystack/components/editor/markup.ts b/packages/raystack/components/editor/core/composer/markup.ts similarity index 75% rename from packages/raystack/components/editor/markup.ts rename to packages/raystack/components/editor/core/composer/markup.ts index c9b36c6bb..42a493240 100644 --- a/packages/raystack/components/editor/markup.ts +++ b/packages/raystack/components/editor/core/composer/markup.ts @@ -3,10 +3,12 @@ import { type EditorMention, isTriggerCharacter, type MentionAttrs, + mentionText, + readMention, serializeMention -} from './mention'; +} from '../mention'; import { - editorSchema, + composerSchema, hardBreakType, mentionType, paragraphType @@ -23,72 +25,13 @@ export interface EditorDocDetails { empty: boolean; } -interface MentionMatch { - attrs: MentionAttrs; - /** Index just past the closing `)`. */ - next: number; -} - -/** - * Reads `X[label](type:id)` at `start`, where `X` is the trigger. Returns null - * for anything malformed so the caller can keep the characters as literal text. - */ -function readMention(source: string, start: number): MentionMatch | null { - const trigger = source[start]; - if (!isTriggerCharacter(trigger) || source[start + 1] !== '[') return null; - - let index = start + 2; - let label = ''; - while (index < source.length) { - const char = source[index]; - if (char === '\\' && index + 1 < source.length) { - label += source[index + 1]; - index += 2; - continue; - } - if (char === ']') break; - if (char === '\n') return null; - label += char; - index += 1; - } - if (source[index] !== ']' || source[index + 1] !== '(') return null; - index += 2; - - let type = ''; - let id = ''; - let separated = false; - while (index < source.length) { - const char = source[index]; - if (char === '\\' && index + 1 < source.length) { - if (separated) id += source[index + 1]; - else type += source[index + 1]; - index += 2; - continue; - } - if (char === ')') break; - if (char === '\n') return null; - if (char === ':' && !separated) { - separated = true; - index += 1; - continue; - } - if (separated) id += char; - else type += char; - index += 1; - } - if (source[index] !== ')') return null; - if (!separated || !label || !type || !id) return null; - - return { attrs: { id, label, type, trigger }, next: index + 1 }; -} - /** Inline content for a plain string, where newlines become hard breaks. */ export function inlineFragmentFromText(text: string): Fragment { const nodes: PMNode[] = []; const lines = text.split('\n'); lines.forEach((line, index) => { if (index > 0) nodes.push(hardBreakType.create()); - if (line) nodes.push(editorSchema.text(line)); + if (line) nodes.push(composerSchema.text(line)); }); return Fragment.fromArray(nodes); } @@ -105,7 +48,7 @@ export function docFromMarkup(markup: string): PMNode { const flush = () => { if (!literal) return; - nodes.push(editorSchema.text(literal)); + nodes.push(composerSchema.text(literal)); literal = ''; }; @@ -134,7 +77,7 @@ export function docFromMarkup(markup: string): PMNode { } flush(); - return editorSchema.topNodeType.create( + return composerSchema.topNodeType.create( null, paragraphType.create(null, Fragment.fromArray(nodes)) ); @@ -142,7 +85,7 @@ export function docFromMarkup(markup: string): PMNode { /** A document holding a plain string, with no markup interpretation at all. */ export function docFromText(text: string): PMNode { - return editorSchema.topNodeType.create( + return composerSchema.topNodeType.create( null, paragraphType.create(null, inlineFragmentFromText(text)) ); @@ -157,7 +100,7 @@ export function deriveDocDetails(doc: PMNode): EditorDocDetails { doc.descendants(node => { if (node.type === mentionType) { const attrs = node.attrs as MentionAttrs; - const label = `${attrs.trigger}${attrs.label}`; + const label = mentionText(attrs); mentions.push({ ...attrs, start: text.length, @@ -195,7 +138,7 @@ export function textFromFragment(fragment: Fragment): string { content.forEach(node => { if (node.type === mentionType) { const attrs = node.attrs as MentionAttrs; - text += `${attrs.trigger}${attrs.label}`; + text += mentionText(attrs); return; } if (node.type === hardBreakType) { diff --git a/packages/raystack/components/editor/core/composer/schema.ts b/packages/raystack/components/editor/core/composer/schema.ts new file mode 100644 index 000000000..b88be844f --- /dev/null +++ b/packages/raystack/components/editor/core/composer/schema.ts @@ -0,0 +1,25 @@ +import { Schema } from 'prosemirror-model'; +import { + hardBreakNodeSpec, + mentionNodeSpec, + paragraphNodeSpec +} from '../nodes'; + +/** + * The PromptInput composer: one paragraph of text, hard breaks, and atomic + * mentions. Nothing else, so pasted HTML sanitizes to plain text for free, + * there is no mark or block the parser could keep. + */ +export const composerSchema = new Schema({ + nodes: { + doc: { content: 'paragraph' }, + paragraph: paragraphNodeSpec, + text: { group: 'inline' }, + hardBreak: hardBreakNodeSpec, + mention: mentionNodeSpec + } +}); + +export const mentionType = composerSchema.nodes.mention; +export const hardBreakType = composerSchema.nodes.hardBreak; +export const paragraphType = composerSchema.nodes.paragraph; diff --git a/packages/raystack/components/editor/use-editor.ts b/packages/raystack/components/editor/core/composer/use-composer-editor.ts similarity index 79% rename from packages/raystack/components/editor/use-editor.ts rename to packages/raystack/components/editor/core/composer/use-composer-editor.ts index 8ce687218..ae41d1bae 100644 --- a/packages/raystack/components/editor/use-editor.ts +++ b/packages/raystack/components/editor/core/composer/use-composer-editor.ts @@ -4,16 +4,24 @@ import { baseKeymap } from 'prosemirror-commands'; import { history, redo, undo } from 'prosemirror-history'; import { keymap } from 'prosemirror-keymap'; import { Slice } from 'prosemirror-model'; -import { - type Command, - EditorState, - Plugin, - Selection, - TextSelection -} from 'prosemirror-state'; -import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'; +import { EditorState, Plugin, Selection } from 'prosemirror-state'; +import { EditorView } from 'prosemirror-view'; import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'; -import styles from './editor.module.css'; +import { EXTERNAL, insertHardBreak, placeholderPlugin } from '../base'; +import { escapeText } from '../html'; +import { type MentionAttrs, mentionKey } from '../mention'; +import { deleteAdjacentMention, moveOverMention } from '../mention-commands'; +import { + MentionNodeView, + type MentionPortal, + type MentionPortalRegistry +} from '../mention-node-view'; +import { + dismissSuggestion, + insertMention as insertMentionAt, + type SuggestionState, + suggestionPlugin +} from '../suggestion-plugin'; import { deriveDocDetails, docFromMarkup, @@ -25,24 +33,9 @@ import { textFromFragment, textLength } from './markup'; -import { type MentionAttrs, mentionKey } from './mention'; -import { - MentionNodeView, - type MentionPortal, - type MentionPortalRegistry -} from './mention-node-view'; -import { hardBreakType, mentionType } from './schema'; -import { - dismissSuggestion, - insertMention as insertMentionAt, - type SuggestionState, - suggestionPlugin -} from './suggestion-plugin'; +import { mentionType } from './schema'; -/** Marks transactions that came from outside the editor, so they are not echoed back. */ -const EXTERNAL = 'apsara-editor-external'; - -export interface UseEditorOptions { +export interface UseComposerEditorOptions { /** Markup for the first document. Read once. */ initialMarkup: string; /** Placeholder shown while the document is empty. */ @@ -65,7 +58,7 @@ export interface UseEditorOptions { ) => boolean; } -export interface EditorActions { +export interface ComposerEditorActions { focus: () => void; /** * Replaces the document when `markup` differs from what the document already @@ -83,7 +76,7 @@ export interface EditorActions { dismissSuggestion: () => void; } -export interface UseEditorResult { +export interface UseComposerEditorResult { /** Attach to the element that becomes the editing host. */ hostRef: (node: HTMLDivElement | null) => void; /** @@ -93,66 +86,12 @@ export interface UseEditorResult { initialHtml: { __html: string }; viewRef: React.RefObject
, so `:empty` would never match. */ +.placeholder::before { + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; + color: var(--rs-color-foreground-base-tertiary); +} + +/* The subtle fill on the typed trigger and its query while the menu is open, so + a pending mention reads as pending rather than as ordinary text. */ +.activeSuggestion { + border-radius: max(var(--rs-radius-pill, 0px), var(--rs-radius-2)); + background: var(--rs-color-background-base-primary-hover); +} + +/* Chip. Chip's tokens on the editor's own type scale, so the line box does not + jump, and inert, since removal is editing-only, so there is no hover or active + treatment to advertise a press that does nothing. */ +.mention { + display: inline-flex; + align-items: center; + gap: var(--rs-space-1); + box-sizing: border-box; + /* Fixed to the line box's height, so nothing the chip holds can change the + composer's height as it lands: an icon portals in one commit after the chip + itself, and a consumer's trailing badge is taller than the label. */ + height: var(--editor-line-height); + max-width: 16rem; + padding: 0 var(--rs-space-2); + border-radius: max(var(--rs-radius-pill, 0px), var(--rs-radius-2)); + background: var(--rs-color-background-base-primary-hover); + color: var(--rs-color-foreground-base-primary); + font-size: inherit; + line-height: inherit; + letter-spacing: inherit; + /* Top-aligned rather than baseline-aligned: an inline-flex box takes its + baseline from its *first* flex item, so a chip with an icon would hang off + the icon's box and ride above the surrounding text. Its height matches the + line box, so aligning the two tops puts the label on the text's baseline. */ + vertical-align: top; + white-space: nowrap; + user-select: none; + cursor: default; +} + +.mentionLabel { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mentionIcon, +.mentionTrailing { + display: inline-flex; + align-items: center; + flex-shrink: 0; + color: var(--rs-color-foreground-base-secondary); +} + +/* The slots are portal targets and stay in the DOM even with nothing in them. */ +.mentionIcon:empty, +.mentionTrailing:empty { + display: none; +} + +.mentionIcon > svg, +.mentionTrailing > svg { + width: var(--rs-space-4); + height: var(--rs-space-4); +} + +/* NodeSelection: clicking a chip selects it as one unit. */ +.mention[data-selected] { + outline: var(--rs-focus-ring); + outline-offset: 1px; +} + +.editor[aria-disabled="true"] .mention { + opacity: 0.7; +} + +/* Suggestion menu. Positioned at the caret but sized to the composer: a caret + is a zero-width anchor, so `--anchor-width` is useless and the width has to + be stated. The guards keep it usable in narrow panels and wide layouts. */ +.suggestionMenu { + box-sizing: border-box; + width: var(--suggestion-menu-width, 20rem); + min-width: 240px; + max-width: min(var(--available-width), 420px); + max-height: 320px; + overflow-y: auto; + padding: var(--rs-space-2); +} + +.suggestionGroup + .suggestionGroup { + margin-top: var(--rs-space-2); +} + +.suggestionGroupLabel { + padding: var(--rs-space-2) var(--rs-space-3); + color: var(--rs-color-foreground-base-tertiary); + font-size: var(--rs-font-size-mini); + line-height: var(--rs-line-height-mini); + letter-spacing: var(--rs-letter-spacing-mini); + font-weight: var(--rs-font-weight-medium); +} + +.suggestionRow { + cursor: pointer; +} + +.suggestionText { + display: flex; + flex-direction: column; + min-width: 0; +} + +.suggestionDescription { + color: var(--rs-color-foreground-base-tertiary); + font-size: var(--rs-font-size-mini); + line-height: var(--rs-line-height-mini); + letter-spacing: var(--rs-letter-spacing-mini); +} + +.suggestionEmpty { + padding: var(--rs-space-3); + color: var(--rs-color-foreground-base-tertiary); +} + +.suggestionLoadingRow { + padding: var(--rs-space-3); +} diff --git a/packages/raystack/components/editor/core/html.ts b/packages/raystack/components/editor/core/html.ts new file mode 100644 index 000000000..4569b4154 --- /dev/null +++ b/packages/raystack/components/editor/core/html.ts @@ -0,0 +1,10 @@ +export function escapeText(value: string): string { + return value + .replace(/&/g, '&') + .replace(//g, '>'); +} + +export function escapeAttribute(value: string): string { + return escapeText(value).replace(/"/g, '"'); +} diff --git a/packages/raystack/components/editor/core/input-rules.ts b/packages/raystack/components/editor/core/input-rules.ts new file mode 100644 index 000000000..85b136cd1 --- /dev/null +++ b/packages/raystack/components/editor/core/input-rules.ts @@ -0,0 +1,133 @@ +import { + InputRule, + inputRules, + textblockTypeInputRule, + wrappingInputRule +} from 'prosemirror-inputrules'; +import type { MarkType, Schema } from 'prosemirror-model'; +import { type Plugin, TextSelection } from 'prosemirror-state'; +import { findWrapping } from 'prosemirror-transform'; + +/** + * `**x**` style rules. The pattern captures the leading boundary in group 1 + * and the text between the delimiters in group 2. The last delimiter + * character is the one being typed, so it is not in the document yet. + */ +function markRule( + pattern: RegExp, + delimiter: string, + type: MarkType +): InputRule { + return new InputRule(pattern, (state, match, start, end) => { + const text = match[2]; + const markStart = start + match[1].length; + const textStart = markStart + delimiter.length; + const textEnd = textStart + text.length; + const tr = state.tr; + tr.delete(textEnd, end); + tr.delete(markStart, textStart); + tr.addMark(markStart, markStart + text.length, type.create()); + tr.removeStoredMark(type); + return tr; + }); +} + +/** Markdown-style typing shortcuts for the formats in `schema`. */ +export function buildInputRules(schema: Schema): Plugin | null { + const { nodes, marks } = schema; + const rules: InputRule[] = []; + + if (nodes.heading) { + rules.push( + textblockTypeInputRule(/^(#{1,4})\s$/, nodes.heading, match => ({ + level: match[1].length + })) + ); + } + if (nodes.blockquote) { + rules.push(wrappingInputRule(/^\s*>\s$/, nodes.blockquote)); + } + if (nodes.taskList && nodes.taskItem) { + const { taskList, taskItem } = nodes; + rules.push( + new InputRule(/^\s*\[( |x)?\]\s$/i, (state, match, start, end) => { + const tr = state.tr.delete(start, end); + const $start = tr.doc.resolve(start); + const range = $start.blockRange(); + const wrapping = range && findWrapping(range, taskList); + if (!range || !wrapping) return null; + const checked = match[1]?.toLowerCase() === 'x'; + tr.wrap( + range, + wrapping.map(wrapper => + wrapper.type === taskItem + ? { type: taskItem, attrs: { checked } } + : wrapper + ) + ); + return tr; + }) + ); + } + if (nodes.bulletList) { + rules.push(wrappingInputRule(/^\s*([-+*])\s$/, nodes.bulletList)); + } + if (nodes.orderedList) { + rules.push( + wrappingInputRule( + /^(\d+)\.\s$/, + nodes.orderedList, + match => ({ start: Number(match[1]) }), + (match, node) => node.childCount + node.attrs.start === Number(match[1]) + ) + ); + } + if (nodes.codeBlock) { + rules.push( + textblockTypeInputRule(/^```([\w-]+)?\s$/, nodes.codeBlock, match => ({ + language: match[1] ?? null + })) + ); + } + if (nodes.horizontalRule) { + const rule = nodes.horizontalRule; + rules.push( + // `***` and `___` wait for a space, so `***bold italic***` can be typed. + new InputRule(/^(?:---|___\s|\*\*\*\s)$/, (state, _match, start, end) => { + const $start = state.doc.resolve(start); + const block = $start.parent; + if (block.type.name !== 'paragraph') return null; + // Only a paragraph that holds nothing but the dashes. + if (end - $start.start() !== block.content.size) return null; + const from = $start.before(); + const to = $start.after(); + const paragraph = state.schema.nodes.paragraph.create(); + const tr = state.tr.replaceWith(from, to, [rule.create(), paragraph]); + return tr.setSelection(TextSelection.create(tr.doc, from + 2)); + }) + ); + } + + if (marks.bold) { + rules.push( + markRule(/(^|\s)\*\*([^*\s](?:[^*]*[^*\s])?)\*\*$/, '**', marks.bold), + markRule(/(^|\s)__([^_\s](?:[^_]*[^_\s])?)__$/, '__', marks.bold) + ); + } + if (marks.italic) { + rules.push( + markRule(/(^|\s)\*([^*\s](?:[^*]*[^*\s])?)\*$/, '*', marks.italic), + markRule(/(^|\s)_([^_\s](?:[^_]*[^_\s])?)_$/, '_', marks.italic) + ); + } + if (marks.strike) { + rules.push( + markRule(/(^|\s)~~([^~\s](?:[^~]*[^~\s])?)~~$/, '~~', marks.strike) + ); + } + if (marks.code) { + rules.push(markRule(/(^|\s)`([^`]+)`$/, '`', marks.code)); + } + + return rules.length ? inputRules({ rules }) : null; +} diff --git a/packages/raystack/components/editor/core/json.ts b/packages/raystack/components/editor/core/json.ts new file mode 100644 index 000000000..8fc5feee2 --- /dev/null +++ b/packages/raystack/components/editor/core/json.ts @@ -0,0 +1,265 @@ +import { + Fragment, + Mark, + type NodeType, + type Node as PMNode, + type Schema +} from 'prosemirror-model'; +import { isSafeHref, stripControlCharacters } from './link'; +import { mentionText } from './mention'; + +/** A ProseMirror document as JSON, the value `Editor` takes and emits. */ +export interface EditorJSON { + type: string; + attrs?: Record
+
{loading && total === 0
? Array.from({ length: loadingRowCount }).map((_, index) => (
- {item.label}
+ {item.description ? (
+
+ {item.label}
+
+ {item.description}
+
+
+ ) : (
+ item.label
+ )}
);
})}
diff --git a/packages/raystack/components/editor/suggestion-plugin.ts b/packages/raystack/components/editor/core/suggestion-plugin.ts
similarity index 81%
rename from packages/raystack/components/editor/suggestion-plugin.ts
rename to packages/raystack/components/editor/core/suggestion-plugin.ts
index ed5d262ee..1486d3a21 100644
--- a/packages/raystack/components/editor/suggestion-plugin.ts
+++ b/packages/raystack/components/editor/core/suggestion-plugin.ts
@@ -2,12 +2,12 @@ import {
type EditorState,
Plugin,
PluginKey,
- TextSelection
+ TextSelection,
+ type Transaction
} from 'prosemirror-state';
import { Decoration, DecorationSet, type EditorView } from 'prosemirror-view';
-import styles from './editor.module.css';
+import styles from './editor-core.module.css';
import type { MentionAttrs } from './mention';
-import { editorSchema, mentionType } from './schema';
/** The active trigger and the query the user is typing after it. */
export interface SuggestionState {
@@ -29,9 +29,21 @@ interface SuggestionPluginState {
dismissed: { from: number; query: string } | null;
}
+/** One character that opens a menu, and the rules for its query. */
+export interface SuggestionTrigger {
+ char: string;
+ /**
+ * The number of spaces the query can hold before the menu closes. With no
+ * limit, a menu part decides when a spaced query ends.
+ */
+ maxSpaces?: number;
+ /** Class for the inline decoration on the trigger and its query. */
+ className?: string;
+}
+
export interface SuggestionPluginOptions {
- /** Trigger characters that are currently registered. */
- getTriggers: () => string[];
+ /** Triggers that are currently registered. */
+ getTriggers: () => SuggestionTrigger[];
/** Notified whenever the active query changes. */
onStateChange: (state: SuggestionState | null) => void;
/**
@@ -65,11 +77,14 @@ function isBoundary(char: string): boolean {
*/
function detect(
selection: TextSelection,
- triggers: string[]
+ triggers: SuggestionTrigger[]
): SuggestionState | null {
if (!selection.empty || triggers.length === 0) return null;
const $from = selection.$from;
if (!$from.parent.isTextblock) return null;
+ // Code is literal: a `/` or `@` inside it is never a trigger.
+ if ($from.parent.type.spec.code) return null;
+ if ($from.marks().some(mark => mark.type.spec.code)) return null;
const before = $from.parent.textBetween(
0,
@@ -83,7 +98,7 @@ function detect(
for (let index = before.length - 1; index >= stop; index -= 1) {
const char = before[index];
if (char === OBJECT) break;
- if (triggers.includes(char)) {
+ if (triggers.some(trigger => trigger.char === char)) {
if (!isBoundary(index === 0 ? '' : before[index - 1])) continue;
return {
trigger: char,
@@ -106,7 +121,8 @@ function detect(
function carry(
active: SuggestionState,
from: number,
- state: EditorState
+ state: EditorState,
+ triggers: SuggestionTrigger[]
): SuggestionState | null {
if (!state.selection.empty) return null;
const to = state.selection.from;
@@ -124,6 +140,15 @@ function carry(
const query = state.doc.textBetween(from + 1, to, OBJECT, OBJECT);
if (query.includes(OBJECT)) return null;
+ const trigger = triggers.find(entry => entry.char === active.trigger);
+ if (!trigger) return null;
+ if (
+ trigger.maxSpaces !== undefined &&
+ (query.match(/\s/g)?.length ?? 0) > trigger.maxSpaces
+ ) {
+ return null;
+ }
+
return { trigger: active.trigger, query, from, to };
}
@@ -173,11 +198,14 @@ export function suggestionPlugin(options: SuggestionPluginOptions): Plugin {
};
}
+ const triggers = options.getTriggers();
+
if (previous.active) {
const carried = carry(
previous.active,
tr.mapping.map(previous.active.from, -1),
- next
+ next,
+ triggers
);
if (carried) return { active: carried, dismissed };
}
@@ -186,7 +214,7 @@ export function suggestionPlugin(options: SuggestionPluginOptions): Plugin {
const detected =
next.selection instanceof TextSelection
- ? detect(next.selection, options.getTriggers())
+ ? detect(next.selection, triggers)
: null;
if (
@@ -226,9 +254,12 @@ export function suggestionPlugin(options: SuggestionPluginOptions): Plugin {
decorations(state) {
const active = suggestionPluginKey.getState(state)?.active;
if (!active) return null;
+ const trigger = options
+ .getTriggers()
+ .find(entry => entry.char === active.trigger);
return DecorationSet.create(state.doc, [
Decoration.inline(active.from, active.to, {
- class: styles.activeSuggestion
+ class: trigger?.className ?? styles.activeSuggestion
})
]);
}
@@ -275,22 +306,34 @@ export function insertMention(
attrs: MentionAttrs,
range?: { from: number; to: number }
): void {
- const { state } = view;
+ const tr = mentionTransaction(view.state, attrs, range);
+ if (tr) view.dispatch(tr);
+}
+
+/** The transaction behind `insertMention`, or null when the schema has no mentions. */
+export function mentionTransaction(
+ state: EditorState,
+ attrs: MentionAttrs,
+ range?: { from: number; to: number }
+): Transaction | null {
const target = range ?? {
from: state.selection.from,
to: state.selection.to
};
+ const mentionType = state.schema.nodes.mention;
+ if (!mentionType) return null;
+
const tr = state.tr;
const nodes = [mentionType.create(attrs)];
// Skip the trailing space when the caret already sits in front of one, so
// picking a mention mid-sentence does not leave a gap.
const spaced = isWhitespaceAt(state, target.to);
- if (!spaced) nodes.push(editorSchema.text(' '));
+ if (!spaced) nodes.push(state.schema.text(' '));
tr.replaceWith(target.from, target.to, nodes);
const caret = Math.min(target.from + (spaced ? 1 : 2), tr.doc.content.size);
tr.setSelection(TextSelection.create(tr.doc, caret));
tr.scrollIntoView();
- view.dispatch(tr);
+ return tr;
}
diff --git a/packages/raystack/components/editor/core/task-item-view.ts b/packages/raystack/components/editor/core/task-item-view.ts
new file mode 100644
index 000000000..29054514a
--- /dev/null
+++ b/packages/raystack/components/editor/core/task-item-view.ts
@@ -0,0 +1,96 @@
+import type { Node as PMNode } from 'prosemirror-model';
+import type {
+ EditorView,
+ NodeView,
+ ViewMutationRecord
+} from 'prosemirror-view';
+
+/** A task item with a real checkbox that toggles `checked`. */
+export class TaskItemView implements NodeView {
+ readonly dom: HTMLLIElement;
+ readonly contentDOM: HTMLElement;
+
+ private node: PMNode;
+ private readonly checkbox: HTMLInputElement;
+
+ constructor(
+ node: PMNode,
+ private readonly view: EditorView,
+ private readonly getPos: () => number | undefined,
+ className: { item: string; checkbox: string; content: string },
+ private readonly onDestroy?: () => void
+ ) {
+ this.node = node;
+
+ const dom = document.createElement('li');
+ dom.className = className.item;
+ dom.setAttribute('data-type', 'taskItem');
+
+ const label = document.createElement('label');
+ label.contentEditable = 'false';
+
+ const checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ checkbox.className = className.checkbox;
+ checkbox.setAttribute('aria-label', 'Done');
+ // Keeps the caret where it is. The click still toggles the box.
+ checkbox.addEventListener('mousedown', event => event.preventDefault());
+ checkbox.addEventListener('change', () => this.toggle());
+ label.append(checkbox);
+
+ const content = document.createElement('div');
+ content.className = className.content;
+
+ dom.append(label, content);
+ this.dom = dom;
+ this.contentDOM = content;
+ this.checkbox = checkbox;
+ this.write(node);
+ this.setEditable(view.editable);
+ }
+
+ /** A checkbox in a read-only or disabled editor cannot be toggled. */
+ setEditable(editable: boolean) {
+ this.checkbox.disabled = !editable;
+ }
+
+ private write(node: PMNode) {
+ const checked = node.attrs.checked === true;
+ this.checkbox.checked = checked;
+ this.dom.setAttribute('data-checked', checked ? 'true' : 'false');
+ }
+
+ private toggle() {
+ const pos = this.getPos();
+ if (!this.view.editable || pos === undefined) {
+ this.write(this.node);
+ return;
+ }
+ this.view.dispatch(
+ this.view.state.tr.setNodeMarkup(pos, undefined, {
+ ...this.node.attrs,
+ checked: this.checkbox.checked
+ })
+ );
+ }
+
+ update(node: PMNode) {
+ if (node.type !== this.node.type) return false;
+ this.node = node;
+ this.write(node);
+ return true;
+ }
+
+ stopEvent(event: Event) {
+ return event.target === this.checkbox;
+ }
+
+ ignoreMutation(mutation: ViewMutationRecord) {
+ if (mutation.type === 'selection') return false;
+ return !this.contentDOM.contains(mutation.target);
+ }
+
+ destroy() {
+ this.onDestroy?.();
+ }
+}
diff --git a/packages/raystack/components/editor/core/use-suggestion-menu.ts b/packages/raystack/components/editor/core/use-suggestion-menu.ts
new file mode 100644
index 000000000..c3d28db3a
--- /dev/null
+++ b/packages/raystack/components/editor/core/use-suggestion-menu.ts
@@ -0,0 +1,491 @@
+'use client';
+
+import {
+ type Accessor,
+ compareItems,
+ rankItem
+} from '@tanstack/match-sorter-utils';
+import type { EditorView } from 'prosemirror-view';
+import {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+ useSyncExternalStore
+} from 'react';
+import { type MentionAttrs, mentionKey } from './mention';
+import type {
+ EditorMentionItem,
+ EditorMentionRef,
+ MentionRegistry,
+ MentionsData
+} from './mention-registry';
+import {
+ type SuggestionAnchor,
+ type SuggestionGroup,
+ suggestionOptionId
+} from './suggestion-menu';
+import type { SuggestionState } from './suggestion-plugin';
+
+/** Long enough that a fast typist makes one request per word, not per letter. */
+const SEARCH_DEBOUNCE_MS = 150;
+
+/** The fields the menu reads from a row. */
+export interface SuggestionItem {
+ id: string;
+ label: string;
+ type?: string;
+ group?: string;
+ disabled?: boolean;
+}
+
+/**
+ * Re-renders whatever reads the registry when a config or an item lands.
+ * `useSyncExternalStore` rather than a subscribe-and-bump effect, because
+ * `Mentions` registers its trigger from an effect that runs *before* a later
+ * sibling `Editor` gets to subscribe, and the store re-reads its snapshot after
+ * subscribing, so that first registration is never missed.
+ */
+export function useMentionRegistryVersion(registry: MentionRegistry): void {
+ useSyncExternalStore(
+ registry.subscribe,
+ registry.getRevision,
+ registry.getRevision
+ );
+}
+
+/**
+ * Groups render in first-appearance order of `group` within the results, so
+ * consumers control section order by ordering their data. Ungrouped items lead
+ * in a headerless section, and a group that filters down to nothing disappears.
+ */
+export function toGroups- (
+ items: Item[]
+): SuggestionGroup
- [] {
+ const ungrouped: Item[] = [];
+ const order: string[] = [];
+ const buckets = new Map
();
+
+ for (const item of items) {
+ if (!item.group) {
+ ungrouped.push(item);
+ continue;
+ }
+ const bucket = buckets.get(item.group);
+ if (bucket) {
+ bucket.push(item);
+ } else {
+ buckets.set(item.group, [item]);
+ order.push(item.group);
+ }
+ }
+
+ const groups: SuggestionGroup- [] = [];
+ if (ungrouped.length) groups.push({ items: ungrouped });
+ for (const label of order) {
+ groups.push({ label, items: buckets.get(label) ?? [] });
+ }
+ return groups;
+}
+
+/** Sync data filtering: match-sorter on the accessors, best matches first. */
+export function filterItems
- (
+ items: Item[],
+ query: string,
+ accessors: ReadonlyArray
>
+): Item[] {
+ if (!query) return items;
+ const ranked = items
+ .map(item => ({
+ item,
+ ranking: rankItem(item, query, { accessors })
+ }))
+ .filter(entry => entry.ranking.passed);
+ ranked.sort((a, b) => compareItems(a.ranking, b.ranking));
+ return ranked.map(entry => entry.item);
+}
+
+const byLabel = (item: SuggestionItem) => item.label;
+
+function filterByLabel- (
+ items: Item[],
+ query: string
+): Item[] {
+ return filterItems(items, query, [byLabel]);
+}
+
+function firstEnabled(items: SuggestionItem[]): number {
+ return items.findIndex(item => !item.disabled);
+}
+
+function step(
+ items: SuggestionItem[],
+ from: number,
+ direction: 1 | -1
+): number {
+ if (items.length === 0) return -1;
+ let index = from;
+ for (let attempt = 0; attempt < items.length; attempt += 1) {
+ index = (index + direction + items.length) % items.length;
+ if (!items[index]?.disabled) return index;
+ }
+ return -1;
+}
+
+export interface UseSuggestionMenuOptions
- {
+ getView: () => EditorView | null;
+ /** The active query, or null. */
+ suggestion: SuggestionState | null;
+ /** Whether this menu owns the active query and may show. */
+ open: boolean;
+ /** Sync data, filtered with `filter`. */
+ items?: Item[];
+ /** Async data. Wins over `items`. */
+ onSearch?: (
+ query: string,
+ context: { trigger: string; signal: AbortSignal }
+ ) => Promise
;
+ /** Filters `items` for a query. Matches on the label by default. */
+ filter?: (items: Item[], query: string) => Item[];
+ onSelect: (item: Item, state: SuggestionState) => void;
+ /** Closes the menu and leaves the typed text literal. */
+ dismiss: () => void;
+ onOpenChange?: (open: boolean) => void;
+ listboxId: string;
+ /** The part name in the dev warning for a rejected `onSearch`. */
+ name: string;
+}
+
+export interface UseSuggestionMenuResult- {
+ open: boolean;
+ anchor: SuggestionAnchor;
+ groups: SuggestionGroup
- [];
+ /** The rows in display order. `highlightedIndex` indexes into it. */
+ flat: Item[];
+ highlightedIndex: number;
+ setHighlightedIndex: (index: number) => void;
+ loading: boolean;
+ select: (item: Item) => void;
+ close: () => void;
+ activeOptionId: string | undefined;
+ /** Routed from the ProseMirror plugin while a query is active. */
+ handleKeyDown: (event: KeyboardEvent, state: SuggestionState) => boolean;
+}
+
+export function useSuggestionMenu
- ({
+ getView,
+ suggestion,
+ open,
+ items: syncItems,
+ onSearch: search,
+ filter = filterByLabel,
+ onSelect,
+ dismiss,
+ onOpenChange,
+ listboxId,
+ name
+}: UseSuggestionMenuOptions
- ): UseSuggestionMenuResult
- {
+ const suggestionRef = useRef(suggestion);
+ suggestionRef.current = suggestion;
+ const getViewRef = useRef(getView);
+ getViewRef.current = getView;
+ const filterRef = useRef(filter);
+ filterRef.current = filter;
+ const onSelectRef = useRef(onSelect);
+ onSelectRef.current = onSelect;
+ const dismissRef = useRef(dismiss);
+ dismissRef.current = dismiss;
+
+ const [results, setResults] = useState
([]);
+ const [loading, setLoading] = useState(false);
+ const [highlightedIndex, setHighlightedIndex] = useState(-1);
+
+ const trigger = suggestion?.trigger;
+ const query = suggestion?.query ?? '';
+
+ // Async results: debounced, aborted on supersede, and guarded by a sequence
+ // number so a slow response for an old query can never land.
+ const sequenceRef = useRef(0);
+ const warnedRef = useRef(false);
+
+ useEffect(() => {
+ if (!open || trigger === undefined) {
+ setResults(current => (current.length === 0 ? current : []));
+ setLoading(false);
+ return;
+ }
+
+ if (!search) {
+ setLoading(false);
+ setResults(filterRef.current(syncItems ?? [], query));
+ return;
+ }
+
+ const sequence = (sequenceRef.current += 1);
+ const controller = new AbortController();
+ setLoading(true);
+
+ const timer = window.setTimeout(() => {
+ search(query, { trigger, signal: controller.signal })
+ .then(items => {
+ if (sequence !== sequenceRef.current) return;
+ setResults(items);
+ setLoading(false);
+ })
+ .catch((error: unknown) => {
+ if (sequence !== sequenceRef.current) return;
+ setLoading(false);
+ setResults([]);
+ const aborted =
+ controller.signal.aborted ||
+ (error instanceof Error && error.name === 'AbortError');
+ if (
+ !aborted &&
+ !warnedRef.current &&
+ process.env.NODE_ENV !== 'production'
+ ) {
+ warnedRef.current = true;
+ console.warn(
+ `[Apsara] ${name} onSearch rejected; the menu falls ` +
+ 'back to its empty state.',
+ error
+ );
+ }
+ });
+ }, SEARCH_DEBOUNCE_MS);
+
+ return () => {
+ window.clearTimeout(timer);
+ controller.abort();
+ };
+ }, [open, trigger, query, search, syncItems, name]);
+
+ const groups = useMemo(() => toGroups(results), [results]);
+ const flat = useMemo(() => groups.flatMap(group => group.items), [groups]);
+ const flatRef = useRef(flat);
+ flatRef.current = flat;
+
+ // The first enabled row is auto-highlighted whenever the result set changes.
+ // Keyed on what the rows *are* rather than on the array's identity: an inline
+ // `items={[…]}` prop is a fresh array on every consumer render, and resetting
+ // on identity would throw away the user's arrow-key position whenever
+ // something unrelated re-rendered above the composer.
+ const rowSignature = useMemo(
+ () =>
+ flat
+ .map(item => `${item.type ?? ''}:${item.id}:${item.disabled ? 1 : 0}`)
+ .join('\0'),
+ [flat]
+ );
+ // biome-ignore lint/correctness/useExhaustiveDependencies: the signature is the trigger; the rows are read through a ref
+ useEffect(() => {
+ setHighlightedIndex(firstEnabled(flatRef.current));
+ }, [rowSignature]);
+
+ // Held past the config that supplied it: closing clears the active trigger,
+ // so reading the callback off the live config would swallow the `false`.
+ const onOpenChangeRef = useRef<((open: boolean) => void) | undefined>(
+ undefined
+ );
+ if (onOpenChange) onOpenChangeRef.current = onOpenChange;
+ const lastOpenRef = useRef(false);
+ useEffect(() => {
+ if (lastOpenRef.current === open) return;
+ lastOpenRef.current = open;
+ onOpenChangeRef.current?.(open);
+ }, [open]);
+
+ const close = useCallback(() => {
+ dismissRef.current();
+ }, []);
+
+ // Spaces are allowed while results are non-empty, so multi-word entities stay
+ // filterable. The first keystroke that empties the results while the query
+ // already contains a space gives up and leaves the text literal.
+ useEffect(() => {
+ if (!open || loading) return;
+ if (results.length > 0) return;
+ if (!query.includes(' ')) return;
+ close();
+ }, [open, loading, results.length, query, close]);
+
+ const select = useCallback((item: Item) => {
+ const state = suggestionRef.current;
+ if (!state) return;
+ onSelectRef.current(item, state);
+ }, []);
+
+ // The last rect the caret actually had. Selecting an item takes the query
+ // range out of the document in the same breath as it closes the menu, but the
+ // popup is still animating out and the positioner keeps measuring. Without
+ // something to hand back, it would read a zero rect and the closing menu
+ // would jump to the top-left corner of the viewport and flicker there.
+ const lastRectRef = useRef(null);
+
+ const anchor = useMemo(
+ () => ({
+ get contextElement() {
+ return getViewRef.current()?.dom;
+ },
+ getBoundingClientRect: () => {
+ const view = getViewRef.current();
+ const state = suggestionRef.current;
+ if (view && state) {
+ try {
+ const coords = view.coordsAtPos(state.from);
+ const rect = new DOMRect(
+ coords.left,
+ coords.top,
+ 0,
+ Math.max(0, coords.bottom - coords.top)
+ );
+ lastRectRef.current = rect;
+ return rect;
+ } catch {
+ // The range is gone, or the browser is mid-relayout.
+ }
+ }
+ // jsdom has no geometry to give either, and no animation to cover.
+ return lastRectRef.current ?? new DOMRect(0, 0, 0, 0);
+ }
+ }),
+ []
+ );
+
+ const highlightedRef = useRef(highlightedIndex);
+ highlightedRef.current = highlightedIndex;
+ const openRef = useRef(open);
+ openRef.current = open;
+
+ const handleKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ if (!openRef.current) return false;
+
+ const items = flatRef.current;
+ const current = highlightedRef.current;
+
+ const consume = () => {
+ event.preventDefault();
+ // Enter must not reach the form and Escape must not reach ChatPanel,
+ // Dialog or Drawer, either of which would destroy the draft.
+ event.stopPropagation();
+ };
+
+ switch (event.key) {
+ case 'ArrowDown':
+ consume();
+ setHighlightedIndex(step(items, current, 1));
+ return true;
+ case 'ArrowUp':
+ consume();
+ setHighlightedIndex(step(items, current, -1));
+ return true;
+ case 'Escape':
+ consume();
+ close();
+ return true;
+ case 'Enter':
+ case 'Tab': {
+ const item = items[current];
+ if (!item || item.disabled) {
+ // Nothing to pick: leave the text literal and let the key through
+ // to submit or to move focus.
+ close();
+ return false;
+ }
+ consume();
+ select(item);
+ return true;
+ }
+ default:
+ return false;
+ }
+ },
+ [close, select]
+ );
+
+ return {
+ open,
+ anchor,
+ groups,
+ flat,
+ highlightedIndex,
+ setHighlightedIndex,
+ loading,
+ select,
+ close,
+ activeOptionId:
+ open && highlightedIndex >= 0
+ ? suggestionOptionId(listboxId, highlightedIndex)
+ : undefined,
+ handleKeyDown
+ };
+}
+
+/**
+ * `icon`, `trailing` and `data` cannot survive serialization, so a chip parsed
+ * from `defaultValue` starts label-only and fills in when the consumer's
+ * `resolveMentions` resolves, the same progressive enhancement `Select.Value`
+ * uses when it falls back to the raw value until an item registers. A rejection
+ * or a missing item leaves the chip label-only; it is never an error state and
+ * the chip is never removed.
+ */
+export function useMentionResolution(
+ registry: MentionRegistry,
+ mentions: MentionAttrs[],
+ refreshLabels: (labels: Map) => void,
+ getResolver: (trigger: string) => MentionsData['resolveMentions'] = trigger =>
+ registry.get(trigger)?.resolveMentions
+): void {
+ const requestedRef = useRef(new Set());
+ const refreshRef = useRef(refreshLabels);
+ refreshRef.current = refreshLabels;
+ const getResolverRef = useRef(getResolver);
+ getResolverRef.current = getResolver;
+
+ useEffect(() => {
+ if (mentions.length === 0) return;
+
+ const byTrigger = new Map();
+
+ for (const mention of mentions) {
+ const key = mentionKey(mention.trigger, mention.type, mention.id);
+ if (requestedRef.current.has(key)) continue;
+ if (registry.has(mention.trigger, mention.type, mention.id)) continue;
+ if (!getResolverRef.current(mention.trigger)) continue;
+ requestedRef.current.add(key);
+ const bucket = byTrigger.get(mention.trigger);
+ const ref = {
+ type: mention.type,
+ id: mention.id,
+ label: mention.label
+ };
+ if (bucket) bucket.push(ref);
+ else byTrigger.set(mention.trigger, [ref]);
+ }
+
+ if (byTrigger.size === 0) return;
+
+ for (const [trigger, refs] of byTrigger) {
+ const resolve = getResolverRef.current(trigger);
+ if (!resolve) continue;
+ resolve(refs)
+ .then((items: EditorMentionItem[]) => {
+ if (items.length === 0) return;
+ registry.rememberAll(trigger, items);
+ const labels = new Map();
+ for (const item of items) {
+ labels.set(
+ mentionKey(trigger, item.type ?? 'mention', item.id),
+ item.label
+ );
+ }
+ refreshRef.current(labels);
+ })
+ .catch(() => {
+ // Label-only is the fallback, so there is nothing to recover.
+ });
+ }
+ }, [registry, mentions]);
+}
diff --git a/packages/raystack/components/editor/editor-block-button.tsx b/packages/raystack/components/editor/editor-block-button.tsx
new file mode 100644
index 000000000..5ff09f37e
--- /dev/null
+++ b/packages/raystack/components/editor/editor-block-button.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import type { Command } from 'prosemirror-state';
+import {
+ type EditorBlock,
+ insertHorizontalRule,
+ isBlockActive,
+ toggleBlock,
+ toggleList
+} from './core/commands';
+import { useEditorStore, useStoreSelector } from './editor-context';
+import { EditorControl, type EditorControlBaseProps } from './editor-control';
+import { BLOCK_DEFAULTS } from './editor-defaults';
+
+export interface EditorBlockButtonProps extends EditorControlBaseProps {
+ /** The block the button toggles. `horizontalRule` inserts a divider. */
+ block: EditorBlock;
+}
+
+function blockCommand(block: EditorBlock): Command {
+ if (block === 'horizontalRule') return insertHorizontalRule;
+ if (block === 'blockquote' || block === 'codeBlock')
+ return toggleBlock(block);
+ return toggleList(block);
+}
+
+/** Wraps, lifts or sets a block, or inserts a divider. */
+export function EditorBlockButton({
+ block,
+ label,
+ children,
+ onClick,
+ ...props
+}: EditorBlockButtonProps) {
+ const store = useEditorStore('Editor.BlockButton');
+ const active = useStoreSelector(store, current =>
+ isBlockActive(current.state, block)
+ );
+ const enabled = useStoreSelector(
+ store,
+ current => current.isEditable() && blockCommand(block)(current.state)
+ );
+
+ if (!(block in store.schema.nodes)) return null;
+ const { label: defaultLabel, Icon, action } = BLOCK_DEFAULTS[block];
+
+ return (
+ {
+ store.run(blockCommand(block));
+ onClick?.(event);
+ }}
+ {...props}
+ >
+ {children ??
+ );
+}
+
+EditorBlockButton.displayName = 'Editor.BlockButton';
diff --git a/packages/raystack/components/editor/editor-content.tsx b/packages/raystack/components/editor/editor-content.tsx
new file mode 100644
index 000000000..674afa914
--- /dev/null
+++ b/packages/raystack/components/editor/editor-content.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
+import { cx } from 'class-variance-authority';
+import { EditorView } from 'prosemirror-view';
+import {
+ type ComponentProps,
+ Fragment,
+ useLayoutEffect,
+ useRef,
+ useState
+} from 'react';
+import { createPortal } from 'react-dom';
+import coreStyles from './core/editor-core.module.css';
+import { docToHTML } from './core/serializers';
+import { useMentionRegistryVersion } from './core/use-suggestion-menu';
+import styles from './editor.module.css';
+import { useEditorStore, useStoreSelector } from './editor-context';
+
+export interface EditorContentProps
+ extends Omit<
+ ComponentProps<'div'>,
+ 'contentEditable' | 'children' | 'dangerouslySetInnerHTML' | 'role'
+ > {
+ /**
+ * Turns the browser's spell check on or off.
+ * @default true
+ */
+ spellCheck?: boolean;
+}
+
+/** The mount point for the editable document. */
+export function EditorContent({
+ className,
+ spellCheck = true,
+ ref,
+ ...props
+}: EditorContentProps) {
+ const store = useEditorStore('Editor.Content');
+ const hostRef = useRef(null);
+ const mergedRef = useMergedRefs(hostRef, ref);
+
+ // The server and the first client render show the doc as HTML, so there is
+ // no empty box before ProseMirror takes the subtree over.
+ const [initialHtml] = useState(() => ({
+ __html: docToHTML(store.state.doc)
+ }));
+
+ // ProseMirror adds its own classes to the element, and React would drop
+ // them when it writes a new `className`. React writes the first value only,
+ // and ProseMirror's `attributes` prop applies the later ones.
+ const classes = cx(coreStyles.editor, styles.content, className);
+ const [initialClasses] = useState(classes);
+ const classesRef = useRef(classes);
+ classesRef.current = classes;
+
+ useLayoutEffect(() => {
+ const host = hostRef.current;
+ if (!host) return;
+ host.replaceChildren();
+ const view = new EditorView(
+ { mount: host },
+ {
+ state: store.state,
+ editable: () => store.isEditable(),
+ dispatchTransaction: store.dispatch,
+ nodeViews: store.nodeViews,
+ attributes: { class: classesRef.current }
+ }
+ );
+ store.attachView(view);
+ if (store.autoFocus) {
+ store.focus(store.autoFocus === true ? undefined : store.autoFocus);
+ }
+ return () => {
+ store.detachView(view);
+ view.destroy();
+ };
+ }, [store]);
+
+ useLayoutEffect(() => {
+ store.view?.setProps({ attributes: { class: classes } });
+ }, [store, classes]);
+
+ const readOnly = useStoreSelector(store, current => current.props.readOnly);
+ const disabled = useStoreSelector(store, current => current.props.disabled);
+ const hasMenus = useStoreSelector(store, current => current.hasTriggers());
+ const menu = useStoreSelector(store, current => {
+ const trigger = current.suggestion?.trigger;
+ return trigger ? current.menus.get(trigger) : undefined;
+ });
+ const portals = useStoreSelector(store, current => current.mentionPortals);
+ useMentionRegistryVersion(store.mentions);
+
+ return (
+ <>
+
+ {portals.map(portal => {
+ const item = store.mentions.lookup(
+ portal.attrs.trigger,
+ portal.attrs.type,
+ portal.attrs.id
+ );
+ return (
+
+ {item?.icon ? createPortal(item.icon, portal.iconTarget) : null}
+ {item?.trailing
+ ? createPortal(item.trailing, portal.trailingTarget)
+ : null}
+
+ );
+ })}
+
+ );
+}
+
+EditorContent.displayName = 'Editor.Content';
diff --git a/packages/raystack/components/editor/editor-context.ts b/packages/raystack/components/editor/editor-context.ts
new file mode 100644
index 000000000..dedca259a
--- /dev/null
+++ b/packages/raystack/components/editor/editor-context.ts
@@ -0,0 +1,62 @@
+'use client';
+
+import type { EditorState } from 'prosemirror-state';
+import { createContext, useContext, useRef, useSyncExternalStore } from 'react';
+import type { EditorStore } from './editor-store';
+import type { EditorApi } from './editor-types';
+
+export const EditorContext = createContext(null);
+
+export function useEditorStore(part: string): EditorStore {
+ const store = useContext(EditorContext);
+ if (!store) throw new Error(`${part} must be used within `);
+ return store;
+}
+
+/**
+ * Reads a value off the store and re-renders only when it changes. A new
+ * selector each render is fine: `isEqual` keeps the previous value when the
+ * result is the same.
+ */
+export function useStoreSelector(
+ store: EditorStore,
+ selector: (store: EditorStore) => T,
+ isEqual: (a: T, b: T) => boolean = Object.is
+): T {
+ const cache = useRef<{
+ revision: number;
+ selector: (store: EditorStore) => T;
+ value: T;
+ } | null>(null);
+
+ const getSnapshot = () => {
+ const cached = cache.current;
+ if (
+ cached &&
+ cached.revision === store.revision &&
+ cached.selector === selector
+ ) {
+ return cached.value;
+ }
+ const next = selector(store);
+ const value = cached && isEqual(cached.value, next) ? cached.value : next;
+ cache.current = { revision: store.revision, selector, value };
+ return value;
+ };
+
+ return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+
+/** The editor's API: commands, dry runs and serializers. */
+export function useEditor(): EditorApi {
+ return useEditorStore('useEditor').api;
+}
+
+/** Selects a value from the editor state. Re-renders only when it changes. */
+export function useEditorState(
+ selector: (state: EditorState) => T,
+ isEqual?: (a: T, b: T) => boolean
+): T {
+ const store = useEditorStore('useEditorState');
+ return useStoreSelector(store, current => selector(current.state), isEqual);
+}
diff --git a/packages/raystack/components/editor/editor-control.tsx b/packages/raystack/components/editor/editor-control.tsx
new file mode 100644
index 000000000..86d55224f
--- /dev/null
+++ b/packages/raystack/components/editor/editor-control.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { cx } from 'class-variance-authority';
+import {
+ type ComponentProps,
+ cloneElement,
+ type ReactElement,
+ useMemo
+} from 'react';
+import { Kbd } from '../kbd';
+import { Toolbar } from '../toolbar';
+import { Tooltip } from '../tooltip';
+import { formatShortcut } from './core/shortcuts';
+import styles from './editor.module.css';
+
+/** The key caps for a shortcut, or nothing when it is turned off. */
+export function EditorShortcutKeys({
+ shortcut
+}: {
+ shortcut?: string | false;
+}) {
+ const keys = useMemo(
+ () => (shortcut ? formatShortcut(shortcut) : []),
+ [shortcut]
+ );
+ if (keys.length === 0) return null;
+ return (
+
+ {keys.map((key, index) => (
+ {key}
+ ))}
+
+ );
+}
+
+export interface EditorControlBaseProps
+ extends Omit<
+ ComponentProps,
+ 'aria-pressed' | 'render'
+ > {
+ /** Accessible name and tooltip text. */
+ label?: string;
+ /**
+ * Shows the label and shortcut in a tooltip.
+ * @default true
+ */
+ tooltip?: boolean;
+}
+
+interface EditorControlProps extends EditorControlBaseProps {
+ label: string;
+ shortcut?: string | false;
+ /** Sets `aria-pressed`. Leave undefined for a plain button. */
+ pressed?: boolean;
+ /** A trigger, such as ` {
+ event.preventDefault();
+ onMouseDown?.(event);
+ }}
+ {...props}
+ />
+ );
+ // The tooltip stays mounted when it is off, so the trigger element, and
+ // any menu anchored to it, is never remounted.
+ return (
+
+
+ {children}
+
+
+
+ {label}
+
+
+ );
+}
diff --git a/packages/raystack/components/editor/editor-defaults.ts b/packages/raystack/components/editor/editor-defaults.ts
new file mode 100644
index 000000000..064bff4a5
--- /dev/null
+++ b/packages/raystack/components/editor/editor-defaults.ts
@@ -0,0 +1,78 @@
+import type { ComponentType } from 'react';
+import {
+ BoldIcon,
+ ChecklistIcon,
+ CodeBlockIcon,
+ CodeIcon,
+ Heading1Icon,
+ Heading2Icon,
+ Heading3Icon,
+ Heading4Icon,
+ ItalicIcon,
+ ListIcon,
+ MinusIcon,
+ NumberedListIcon,
+ QuoteIcon,
+ StrikethroughIcon,
+ TextIcon,
+ UnderlineIcon
+} from '~/icons';
+import type { EditorBlock } from './core/commands';
+import type { EditorHeadingLevel, EditorMark } from './core/schema';
+import type { EditorAction } from './core/shortcuts';
+
+interface ControlDefault {
+ label: string;
+ Icon: ComponentType;
+ action?: EditorAction;
+}
+
+export const MARK_DEFAULTS: Record = {
+ bold: { label: 'Bold', Icon: BoldIcon, action: 'bold' },
+ italic: { label: 'Italic', Icon: ItalicIcon, action: 'italic' },
+ underline: {
+ label: 'Underline',
+ Icon: UnderlineIcon,
+ action: 'underline'
+ },
+ strike: {
+ label: 'Strikethrough',
+ Icon: StrikethroughIcon,
+ action: 'strike'
+ },
+ code: { label: 'Inline code', Icon: CodeIcon, action: 'code' }
+};
+
+export const BLOCK_DEFAULTS: Record = {
+ blockquote: { label: 'Quote', Icon: QuoteIcon, action: 'blockquote' },
+ codeBlock: {
+ label: 'Code block',
+ Icon: CodeBlockIcon,
+ action: 'codeBlock'
+ },
+ bulletList: {
+ label: 'Bulleted list',
+ Icon: ListIcon,
+ action: 'bulletList'
+ },
+ orderedList: {
+ label: 'Numbered list',
+ Icon: NumberedListIcon,
+ action: 'orderedList'
+ },
+ taskList: { label: 'Checklist', Icon: ChecklistIcon, action: 'taskList' },
+ horizontalRule: { label: 'Divider', Icon: MinusIcon }
+};
+
+export const PARAGRAPH_DEFAULT: ControlDefault = {
+ label: 'Text',
+ Icon: TextIcon,
+ action: 'paragraph'
+};
+
+export const HEADING_DEFAULTS: Record = {
+ 1: { label: 'Heading 1', Icon: Heading1Icon, action: 'heading1' },
+ 2: { label: 'Heading 2', Icon: Heading2Icon, action: 'heading2' },
+ 3: { label: 'Heading 3', Icon: Heading3Icon, action: 'heading3' },
+ 4: { label: 'Heading 4', Icon: Heading4Icon, action: 'heading4' }
+};
diff --git a/packages/raystack/components/editor/editor-floating-context.ts b/packages/raystack/components/editor/editor-floating-context.ts
new file mode 100644
index 000000000..66d0204f0
--- /dev/null
+++ b/packages/raystack/components/editor/editor-floating-context.ts
@@ -0,0 +1,29 @@
+'use client';
+
+import { createContext, useContext, useEffect } from 'react';
+
+export interface FloatingToolbarContextValue {
+ visible: boolean;
+ /** Swaps the buttons for the link field. */
+ openLink: () => void;
+ /** Keeps the toolbar open while a menu from it is open. Returns the release. */
+ hold: () => () => void;
+}
+
+export const FloatingToolbarContext =
+ createContext(null);
+
+/** The floating toolbar around a control, or null inside a fixed toolbar. */
+export function useFloatingToolbar(): FloatingToolbarContextValue | null {
+ return useContext(FloatingToolbarContext);
+}
+
+/** Holds the floating toolbar open while `open` is true. */
+export function useHoldFloatingToolbar(open: boolean): void {
+ const floating = useFloatingToolbar();
+ const hold = floating?.hold;
+ useEffect(() => {
+ if (!open || !hold) return;
+ return hold();
+ }, [open, hold]);
+}
diff --git a/packages/raystack/components/editor/editor-floating-toolbar.tsx b/packages/raystack/components/editor/editor-floating-toolbar.tsx
new file mode 100644
index 000000000..16869dd06
--- /dev/null
+++ b/packages/raystack/components/editor/editor-floating-toolbar.tsx
@@ -0,0 +1,249 @@
+'use client';
+
+import { cx } from 'class-variance-authority';
+import {
+ AllSelection,
+ type EditorState,
+ TextSelection
+} from 'prosemirror-state';
+import {
+ type ComponentProps,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState
+} from 'react';
+import { Popover } from '../popover';
+import { Toolbar } from '../toolbar';
+import { Tooltip } from '../tooltip';
+import styles from './editor.module.css';
+import { useEditorStore, useStoreSelector } from './editor-context';
+import {
+ FloatingToolbarContext,
+ type FloatingToolbarContextValue
+} from './editor-floating-context';
+import { EditorLinkForm } from './editor-link-form';
+import { focusFirstControl } from './editor-toolbar';
+
+export interface EditorFloatingToolbarProps
+ extends Omit, 'orientation'> {
+ /**
+ * The side of the selection the toolbar shows on.
+ * @default 'top'
+ */
+ side?: 'top' | 'bottom';
+ /**
+ * How the toolbar aligns to the selection.
+ * @default 'start'
+ */
+ align?: 'start' | 'center' | 'end';
+ /**
+ * Distance from the selection in pixels.
+ * @default 8
+ */
+ sideOffset?: number;
+ /** Decides whether the toolbar shows for a state. Replaces the default rule. */
+ shouldShow?: (state: EditorState) => boolean;
+}
+
+/** A non-empty text selection outside a code block. */
+function defaultShouldShow(state: EditorState): boolean {
+ const { selection } = state;
+ if (
+ !(selection instanceof TextSelection || selection instanceof AllSelection)
+ ) {
+ return false;
+ }
+ if (selection.empty) return false;
+ if (selection.$from.parent.type.spec.code) return false;
+ if (selection.$to.parent.type.spec.code) return false;
+ return (
+ state.doc.textBetween(selection.from, selection.to, ' ', ' ').trim()
+ .length > 0
+ );
+}
+
+/** A toolbar that shows above a text selection. */
+export function EditorFloatingToolbar({
+ side = 'top',
+ align = 'start',
+ sideOffset = 8,
+ shouldShow,
+ className,
+ children,
+ 'aria-label': ariaLabel = 'Formatting',
+ ...props
+}: EditorFloatingToolbarProps) {
+ const store = useEditorStore('Editor.FloatingToolbar');
+ const popupRef = useRef(null);
+ const [mode, setMode] = useState<'buttons' | 'link'>('buttons');
+ const [holds, setHolds] = useState(0);
+ const [focusWithin, setFocusWithin] = useState(false);
+ const [dismissedAt, setDismissedAt] = useState(null);
+
+ const selectionKey = useStoreSelector(
+ store,
+ current => `${current.state.selection.from}:${current.state.selection.to}`
+ );
+ const readOnly = useStoreSelector(store, current => current.props.readOnly);
+ const eligible = useStoreSelector(
+ store,
+ current =>
+ current.isEditable() &&
+ !current.pointerSelecting &&
+ current.view !== null &&
+ (shouldShow ?? defaultShouldShow)(current.state)
+ );
+ const focused = useStoreSelector(store, current => current.focused);
+
+ // Escape hides the toolbar until the selection changes.
+ if (dismissedAt !== null && dismissedAt !== selectionKey) {
+ setDismissedAt(null);
+ }
+
+ const visible =
+ eligible &&
+ (focused || focusWithin || holds > 0 || mode === 'link') &&
+ dismissedAt !== selectionKey;
+
+ useEffect(() => {
+ if (!eligible) setMode('buttons');
+ }, [eligible]);
+
+ // A command run from the keyboard can hide the toolbar while it has focus,
+ // as Code block does. Focus goes back to the text instead of the page.
+ useEffect(() => {
+ if (visible || !focusWithin) return;
+ setFocusWithin(false);
+ store.view?.focus();
+ }, [visible, focusWithin, store]);
+
+ const visibleRef = useRef(visible);
+ visibleRef.current = visible;
+ useEffect(
+ () =>
+ store.registerToolbar(
+ 1,
+ () => visibleRef.current && focusFirstControl(popupRef.current)
+ ),
+ [store]
+ );
+
+ const hold = useCallback(() => {
+ setHolds(count => count + 1);
+ return () => setHolds(count => count - 1);
+ }, []);
+
+ const context = useMemo(
+ () => ({
+ visible,
+ openLink: () => setMode('link'),
+ hold
+ }),
+ [visible, hold]
+ );
+
+ const lastRectRef = useRef(null);
+ // biome-ignore lint/correctness/useExhaustiveDependencies: a new anchor on every selection change makes the positioner measure again
+ const anchor = useMemo(
+ () => ({
+ get contextElement() {
+ return store.view?.dom;
+ },
+ getBoundingClientRect: () => {
+ const view = store.view;
+ if (view) {
+ const { from, to } = view.state.selection;
+ try {
+ const start = view.coordsAtPos(from);
+ const end = view.coordsAtPos(to);
+ const left = Math.min(start.left, end.left);
+ const top = Math.min(start.top, end.top);
+ const rect = new DOMRect(
+ left,
+ top,
+ Math.max(start.right, end.right) - left,
+ Math.max(start.bottom, end.bottom) - top
+ );
+ lastRectRef.current = rect;
+ return rect;
+ } catch {
+ // The selection is gone, or the browser is mid-relayout.
+ }
+ }
+ return lastRectRef.current ?? new DOMRect(0, 0, 0, 0);
+ }
+ }),
+ [store, selectionKey]
+ );
+
+ if (readOnly) return null;
+
+ return (
+
+ {
+ if (open) return;
+ if (details.reason === 'escape-key') {
+ setDismissedAt(selectionKey);
+ setMode('buttons');
+ store.view?.focus();
+ } else if (
+ details.reason === 'outside-press' ||
+ details.reason === 'focus-out'
+ ) {
+ setMode('buttons');
+ }
+ }}
+ >
+ {
+ // Tab past either end lands on a focus guard beside the popup,
+ // which unmounts with it, so focus goes back to the text.
+ if (
+ event.target instanceof HTMLElement &&
+ event.target.hasAttribute('data-base-ui-focus-guard')
+ ) {
+ setMode('buttons');
+ store.view?.focus();
+ return;
+ }
+ setFocusWithin(true);
+ }}
+ onBlur={event => {
+ if (!event.currentTarget.contains(event.relatedTarget as Node)) {
+ setFocusWithin(false);
+ }
+ }}
+ >
+ {mode === 'link' ? (
+ setMode('buttons')} />
+ ) : (
+
+
+ {children}
+
+
+ )}
+
+
+
+ );
+}
+
+EditorFloatingToolbar.displayName = 'Editor.FloatingToolbar';
diff --git a/packages/raystack/components/editor/editor-heading-menu.tsx b/packages/raystack/components/editor/editor-heading-menu.tsx
new file mode 100644
index 000000000..df95cac21
--- /dev/null
+++ b/packages/raystack/components/editor/editor-heading-menu.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { activeTextStyle, setHeading, setParagraph } from './core/commands';
+import { type EditorHeadingLevel, HEADING_LEVELS } from './core/schema';
+import { useEditorStore, useStoreSelector } from './editor-context';
+import type { EditorControlBaseProps } from './editor-control';
+import { HEADING_DEFAULTS, PARAGRAPH_DEFAULT } from './editor-defaults';
+import {
+ EditorMenuControl,
+ EditorMenuItems,
+ type EditorMenuOption,
+ sameFlags
+} from './editor-menu-control';
+
+export interface EditorHeadingMenuProps extends EditorControlBaseProps {
+ /**
+ * The heading levels in the menu.
+ * @default [1, 2, 3, 4]
+ */
+ levels?: EditorHeadingLevel[];
+}
+
+/** A menu that sets the text block to regular text or a heading. */
+export function EditorHeadingMenu({
+ levels = HEADING_LEVELS as EditorHeadingLevel[],
+ label = 'Text style',
+ ...props
+}: EditorHeadingMenuProps) {
+ const store = useEditorStore('Editor.HeadingMenu');
+ const current = useStoreSelector(store, state =>
+ activeTextStyle(state.state)
+ );
+ const editable = useStoreSelector(store, state => state.isEditable());
+
+ if (!store.schema.nodes.heading) return null;
+
+ const Icon =
+ typeof current === 'number'
+ ? HEADING_DEFAULTS[current].Icon
+ : PARAGRAPH_DEFAULT.Icon;
+
+ return (
+ {
+ store.run(command);
+ onClick?.(event);
+ }}
+ {...props}
+ >
+ {children ??
+ );
+}
+
+EditorHistoryButton.displayName = 'Editor.HistoryButton';
diff --git a/packages/raystack/components/editor/editor-link-button.tsx b/packages/raystack/components/editor/editor-link-button.tsx
new file mode 100644
index 000000000..d0b58e387
--- /dev/null
+++ b/packages/raystack/components/editor/editor-link-button.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { LinkIcon } from '~/icons';
+import { Popover } from '../popover';
+import { activeLink, canSetLink } from './core/commands';
+import styles from './editor.module.css';
+import { useEditorStore, useStoreSelector } from './editor-context';
+import { EditorControl, type EditorControlBaseProps } from './editor-control';
+import { useFloatingToolbar } from './editor-floating-context';
+import { EditorLinkForm } from './editor-link-form';
+
+export interface EditorLinkButtonProps extends EditorControlBaseProps {}
+
+/**
+ * Adds, edits or removes a link. In the floating toolbar the URL field
+ * replaces the buttons. In the fixed toolbar it opens in a popover.
+ */
+export function EditorLinkButton({
+ label = 'Link',
+ tooltip = true,
+ children,
+ onClick,
+ ...props
+}: EditorLinkButtonProps) {
+ const store = useEditorStore('Editor.LinkButton');
+ const floating = useFloatingToolbar();
+ const [open, setOpen] = useState(false);
+
+ const active = useStoreSelector(
+ store,
+ current => activeLink(current.state) !== null
+ );
+ const enabled = useStoreSelector(
+ store,
+ current => current.isEditable() && canSetLink(current.state)
+ );
+
+ const openLink = floating?.openLink;
+ const visible = floating?.visible ?? false;
+ useEffect(() => {
+ if (!enabled) return;
+ if (openLink) {
+ return store.registerLinkOpener(1, () => {
+ if (!visible) return false;
+ openLink();
+ return true;
+ });
+ }
+ return store.registerLinkOpener(0, () => {
+ setOpen(true);
+ return true;
+ });
+ }, [store, enabled, openLink, visible]);
+
+ if (!store.schema.marks.link) return null;
+
+ const control = {
+ 'data-slot': 'editor-link-button',
+ label,
+ shortcut: store.shortcuts.link,
+ tooltip,
+ pressed: active,
+ disabled: !enabled
+ };
+ const content = children ?? {
+ floating.openLink();
+ onClick?.(event);
+ }}
+ {...props}
+ >
+ {content}
+
+ );
+ }
+
+ return (
+
+
+ setOpen(false)} />
+
+
+ );
+}
+
+EditorLinkButton.displayName = 'Editor.LinkButton';
diff --git a/packages/raystack/components/editor/editor-link-form.tsx b/packages/raystack/components/editor/editor-link-form.tsx
new file mode 100644
index 000000000..78d5e0b33
--- /dev/null
+++ b/packages/raystack/components/editor/editor-link-form.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useState } from 'react';
+import { CheckIcon, ExternalLinkIcon, UnlinkIcon } from '~/icons';
+import { IconButton } from '../icon-button';
+import { Input } from '../input';
+import { activeLink, setLink, unsetLink } from './core/commands';
+import { isSafeHref, normalizeHref } from './core/link';
+import styles from './editor.module.css';
+import { useEditorStore } from './editor-context';
+
+export interface EditorLinkFormProps {
+ /** Called after the link is applied or removed, or the form is cancelled. */
+ onDone: () => void;
+}
+
+/** The URL field behind `Editor.LinkButton`. */
+export function EditorLinkForm({ onDone }: EditorLinkFormProps) {
+ const store = useEditorStore('Editor.LinkButton');
+ const [initial] = useState(() => activeLink(store.state));
+ const [href, setHref] = useState(initial ?? '');
+
+ const normalized = normalizeHref(href);
+ const valid = normalized !== '' && isSafeHref(normalized);
+
+ const finish = () => {
+ onDone();
+ store.view?.focus();
+ };
+
+ const apply = () => {
+ if (!valid) return;
+ store.run(setLink(normalized));
+ finish();
+ };
+
+ return (
+ {
+ store.run(toggleMarkCommand(mark));
+ onClick?.(event);
+ }}
+ {...props}
+ >
+ {children ??
+ );
+}
+
+EditorMarkButton.displayName = 'Editor.MarkButton';
diff --git a/packages/raystack/components/editor/editor-mentions.tsx b/packages/raystack/components/editor/editor-mentions.tsx
new file mode 100644
index 000000000..c8d1953ea
--- /dev/null
+++ b/packages/raystack/components/editor/editor-mentions.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { type ReactNode, useCallback, useEffect, useRef } from 'react';
+import { isTriggerCharacter, type MentionAttrs } from './core/mention';
+import type {
+ EditorMentionItem,
+ EditorMentionRef
+} from './core/mention-registry';
+import { docMentions } from './core/serializers';
+import { SuggestionMenu } from './core/suggestion-menu';
+import { useMentionResolution } from './core/use-suggestion-menu';
+import { useEditorStore, useStoreSelector } from './editor-context';
+import type { EditorStore } from './editor-store';
+import { useEditorSuggestion } from './use-editor-suggestion';
+
+export interface EditorMentionsProps {
+ /**
+ * The character that opens the menu.
+ * @default '@'
+ */
+ trigger?: string;
+ /** Sync data, filtered on the label. */
+ items?: EditorMentionItem[];
+ /** Async data. Debounced, with superseded requests aborted through `signal`. Wins over `items`. */
+ onSearch?: (
+ query: string,
+ context: { trigger: string; signal: AbortSignal }
+ ) => Promise;
+ /** Fills in the icon, trailing content and label of chips loaded from `value` or `defaultValue`. */
+ resolveMentions?: (refs: EditorMentionRef[]) => Promise;
+ /**
+ * Shown when nothing matches the query.
+ * @default 'No results'
+ */
+ emptyMessage?: ReactNode;
+ /**
+ * Skeleton rows shown while `onSearch` is in flight.
+ * @default 3
+ */
+ loadingRowCount?: number;
+ /** Observes the menu's open state. */
+ onOpenChange?: (open: boolean) => void;
+}
+
+const NO_MENTIONS: MentionAttrs[] = [];
+
+function sameMentions(a: MentionAttrs[], b: MentionAttrs[]): boolean {
+ if (a.length !== b.length) return false;
+ return a.every(
+ (mention, index) =>
+ mention.id === b[index].id &&
+ mention.type === b[index].type &&
+ mention.trigger === b[index].trigger &&
+ mention.label === b[index].label
+ );
+}
+
+/** A menu that inserts a mention chip. Mount one per trigger. */
+export function EditorMentions(props: EditorMentionsProps) {
+ const store = useEditorStore('Editor.Mentions');
+ // `formats` without `mention` builds a schema with no mention node.
+ if (!store.schema.nodes.mention) return null;
+ return ({
+ store,
+ trigger,
+ maxSpaces: 3,
+ items,
+ onSearch,
+ onSelect: (item, state) => {
+ const type = item.type ?? 'mention';
+ registry.remember(state.trigger, { ...item, type });
+ store.insertMentionAt(
+ { id: item.id, label: item.label, type, trigger: state.trigger },
+ { from: state.from, to: state.to }
+ );
+ },
+ onOpenChange,
+ name: 'Editor.Mentions'
+ });
+
+ const mentions = useStoreSelector(
+ store,
+ current =>
+ resolveMentions
+ ? docMentions(current.state.doc).filter(
+ mention => mention.trigger === trigger
+ )
+ : NO_MENTIONS,
+ sameMentions
+ );
+ useMentionResolution(
+ registry,
+ mentions,
+ store.refreshMentionLabels,
+ getResolver
+ );
+
+ return (
+ menu.select(item as EditorMentionItem)}
+ onOpenChange={open => {
+ if (!open) menu.close();
+ }}
+ loading={menu.loading}
+ loadingRowCount={loadingRowCount}
+ emptyMessage={emptyMessage}
+ />
+ );
+}
diff --git a/packages/raystack/components/editor/editor-menu-control.tsx b/packages/raystack/components/editor/editor-menu-control.tsx
new file mode 100644
index 000000000..45ea13176
--- /dev/null
+++ b/packages/raystack/components/editor/editor-menu-control.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { type ComponentType, type ReactNode, useMemo, useState } from 'react';
+import { CheckIcon, ChevronDownIcon } from '~/icons';
+import { Menu } from '../menu';
+import styles from './editor.module.css';
+import { useEditorStore } from './editor-context';
+import {
+ EditorControl,
+ type EditorControlBaseProps,
+ EditorShortcutKeys
+} from './editor-control';
+import { useHoldFloatingToolbar } from './editor-floating-context';
+
+export interface EditorMenuOption {
+ key: string;
+ label: string;
+ Icon: ComponentType;
+ shortcut?: string | false;
+ active: boolean;
+ disabled: boolean;
+ run: () => void;
+}
+
+/** Compares the flags of a dry run, so an unchanged result skips the render. */
+export function sameFlags(a: boolean[], b: boolean[]): boolean {
+ return a.length === b.length && a.every((flag, index) => flag === b[index]);
+}
+
+interface EditorMenuControlProps extends EditorControlBaseProps {
+ label: string;
+ trigger: ReactNode;
+ /** The rows. They render only while the menu is open. */
+ children: ReactNode;
+}
+
+/** A toolbar button that opens a menu of block types. */
+export function EditorMenuControl({
+ label,
+ tooltip = true,
+ trigger,
+ disabled,
+ children,
+ ...props
+}: EditorMenuControlProps) {
+ const store = useEditorStore('Editor.Toolbar');
+ const [open, setOpen] = useState(false);
+ useHoldFloatingToolbar(open);
+
+ // Focus goes back to the editor, which restores its selection.
+ const finalFocus = useMemo(
+ () => ({
+ get current() {
+ return (store.view?.dom as HTMLElement | undefined) ?? null;
+ }
+ }),
+ [store]
+ );
+
+ return (
+
+ );
+}
+
+export function EditorMenuItems({ options }: { options: EditorMenuOption[] }) {
+ return options.map(option => (
+ ;
+}
+
+type WithMarkdown = [M] extends [MarkdownAdapter] ? Yes : No;
+
+/**
+ * `M` is inferred from the `markdown` prop. With an adapter, `value` and
+ * `defaultValue` also take Markdown strings and the change details have
+ * `getMarkdown()`.
+ */
+export interface EditorProps<
+ M extends MarkdownAdapter | undefined = MarkdownAdapter | undefined
+> extends EditorBaseProps {
+ /** Allows Markdown strings in `value` and `defaultValue`, and parses Markdown on paste. */
+ markdown?: M;
+ /** Controlled document. A string is parsed as Markdown and needs `markdown`. */
+ value?: WithMarkdown;
+ /** The first document when uncontrolled. Read once. */
+ defaultValue?: WithMarkdown;
+ /** Fires once per doc change. It does not fire for changes made through `value`, or for labels from `resolveMentions`. */
+ onValueChange?: (
+ value: EditorJSON,
+ details: WithMarkdown
+ ) => void;
+}
+
+export function EditorRoot({
+ value,
+ defaultValue,
+ onValueChange,
+ markdown,
+ placeholder,
+ formats,
+ shortcuts,
+ disabled = false,
+ readOnly = false,
+ autoFocus = false,
+ actionsRef,
+ className,
+ render,
+ ref,
+ children,
+ ...props
+}: EditorProps) {
+ const storeProps = {
+ placeholder,
+ disabled,
+ readOnly,
+ markdown,
+ onValueChange: onValueChange as EditorStore['props']['onValueChange']
+ };
+
+ const [store] = useState(
+ () =>
+ new EditorStore({
+ schema: buildSchema(formats),
+ value: value ?? defaultValue,
+ shortcuts: resolveShortcuts(shortcuts),
+ props: storeProps,
+ autoFocus
+ })
+ );
+
+ // Runs after every render, so callbacks stay current and flag changes reach
+ // the view before the next event.
+ useLayoutEffect(() => {
+ store.updateProps(storeProps);
+ });
+
+ useLayoutEffect(() => {
+ if (value !== undefined) store.reconcile(value);
+ }, [store, value]);
+
+ useImperativeHandle(actionsRef, () => store.api, [store]);
+
+ const focused = useStoreSelector(store, current => current.focused);
+ const empty = useStoreSelector(store, current =>
+ isEditorEmpty(current.state.doc)
+ );
+
+ const element = useRender({
+ defaultTagName: 'div',
+ ref,
+ render,
+ props: mergeProps<'div'>(
+ {
+ 'data-slot': 'editor',
+ className: cx(styles.root, className),
+ children,
+ 'data-focused': focused ? '' : undefined,
+ 'data-empty': empty ? '' : undefined,
+ 'data-disabled': disabled ? '' : undefined,
+ 'data-readonly': readOnly ? '' : undefined
+ } as useRender.ElementProps<'div'>,
+ props
+ )
+ });
+
+ return {element} ;
+}
+
+EditorRoot.displayName = 'Editor';
diff --git a/packages/raystack/components/editor/editor-slash-items.tsx b/packages/raystack/components/editor/editor-slash-items.tsx
new file mode 100644
index 000000000..53fcf2f60
--- /dev/null
+++ b/packages/raystack/components/editor/editor-slash-items.tsx
@@ -0,0 +1,191 @@
+import { activeTextStyle } from './core/commands';
+import type { EditorFormat, EditorHeadingLevel } from './core/schema';
+import type { EditorAction } from './core/shortcuts';
+import {
+ BLOCK_DEFAULTS,
+ HEADING_DEFAULTS,
+ PARAGRAPH_DEFAULT
+} from './editor-defaults';
+import type { EditorApi, EditorSlashItem } from './editor-types';
+
+interface Builtin {
+ /** The format the item needs. The menu hides the item without it. */
+ format?: EditorFormat;
+ /** The action whose shortcut the row shows. */
+ action?: EditorAction;
+ /** Whether the command can run at the caret, or the block already has its type. */
+ applies: (editor: EditorApi) => boolean;
+}
+
+function heading(level: EditorHeadingLevel): Builtin {
+ return {
+ format: 'heading',
+ action: `heading${level}`,
+ applies: editor =>
+ editor.can.setHeading(level) ||
+ activeTextStyle(editor.getState()) === level
+ };
+}
+
+// Keyed by `id`, so a copy of a built-in item, such as `{ ...item }`, keeps
+// its shortcut and its format check.
+const builtins = new Map([
+ [
+ 'paragraph',
+ {
+ action: 'paragraph',
+ applies: editor =>
+ editor.can.setParagraph() ||
+ activeTextStyle(editor.getState()) === 'paragraph'
+ }
+ ],
+ ['heading1', heading(1)],
+ ['heading2', heading(2)],
+ ['heading3', heading(3)],
+ [
+ 'bulletList',
+ {
+ format: 'bulletList',
+ action: 'bulletList',
+ applies: editor => editor.can.toggleList('bulletList')
+ }
+ ],
+ [
+ 'orderedList',
+ {
+ format: 'orderedList',
+ action: 'orderedList',
+ applies: editor => editor.can.toggleList('orderedList')
+ }
+ ],
+ [
+ 'taskList',
+ {
+ format: 'taskList',
+ action: 'taskList',
+ applies: editor => editor.can.toggleList('taskList')
+ }
+ ],
+ [
+ 'blockquote',
+ {
+ format: 'blockquote',
+ action: 'blockquote',
+ applies: editor => editor.can.toggleBlock('blockquote')
+ }
+ ],
+ [
+ 'codeBlock',
+ {
+ format: 'codeBlock',
+ action: 'codeBlock',
+ applies: editor => editor.can.toggleBlock('codeBlock')
+ }
+ ],
+ [
+ 'horizontalRule',
+ {
+ format: 'horizontalRule',
+ applies: editor => editor.can.insertHorizontalRule()
+ }
+ ]
+]);
+
+const { Icon: TextIcon } = PARAGRAPH_DEFAULT;
+const Heading1 = HEADING_DEFAULTS[1].Icon;
+const Heading2 = HEADING_DEFAULTS[2].Icon;
+const Heading3 = HEADING_DEFAULTS[3].Icon;
+const BulletIcon = BLOCK_DEFAULTS.bulletList.Icon;
+const NumberedIcon = BLOCK_DEFAULTS.orderedList.Icon;
+const ChecklistIcon = BLOCK_DEFAULTS.taskList.Icon;
+const QuoteIcon = BLOCK_DEFAULTS.blockquote.Icon;
+const CodeBlockIcon = BLOCK_DEFAULTS.codeBlock.Icon;
+const DividerIcon = BLOCK_DEFAULTS.horizontalRule.Icon;
+
+/** The built-in slash commands. Spread them to add your own. */
+export const defaultSlashItems: EditorSlashItem[] = [
+ {
+ id: 'paragraph',
+ label: 'Text',
+ group: 'Text',
+ keywords: ['paragraph', 'plain'],
+ icon: ({
+ store,
+ trigger,
+ // A space ends the query, the way Linear's slash menu works.
+ maxSpaces: 0,
+ className: styles['slash-query'],
+ items: menuItems,
+ filter: filterSlashItems,
+ onSelect: (item, state) => {
+ store.runAfterDelete(state, () => item.run(store.api));
+ },
+ onOpenChange,
+ name: 'Editor.SlashMenu'
+ });
+
+ const groups = menu.groups.map(group => ({
+ label: group.label,
+ items: group.items.map((item): SuggestionMenuItem => {
+ const action = builtinSlashItem(item)?.action;
+ const shortcut =
+ item.shortcut ?? (action ? store.shortcuts[action] : undefined);
+ return {
+ id: item.id,
+ label: item.label,
+ description: item.description,
+ icon: item.icon,
+ disabled: item.disabled,
+ trailing: shortcut ? {
+ const item = menu.flat[index];
+ if (item) menu.select(item);
+ }}
+ onOpenChange={open => {
+ if (!open) menu.close();
+ }}
+ emptyMessage={emptyMessage}
+ />
+ );
+}
+
+EditorSlashMenu.displayName = 'Editor.SlashMenu';
diff --git a/packages/raystack/components/editor/editor-store.ts b/packages/raystack/components/editor/editor-store.ts
new file mode 100644
index 000000000..653dcccda
--- /dev/null
+++ b/packages/raystack/components/editor/editor-store.ts
@@ -0,0 +1,814 @@
+import { baseKeymap } from 'prosemirror-commands';
+import { dropCursor } from 'prosemirror-dropcursor';
+import { gapCursor } from 'prosemirror-gapcursor';
+import { closeHistory, history, redo, undo } from 'prosemirror-history';
+import { keymap } from 'prosemirror-keymap';
+import {
+ Fragment,
+ type Node as PMNode,
+ type Schema,
+ Slice
+} from 'prosemirror-model';
+import {
+ type Command,
+ EditorState,
+ NodeSelection,
+ Plugin,
+ Selection,
+ type Transaction
+} from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import { EXTERNAL, placeholderPlugin } from './core/base';
+import {
+ activeLink,
+ activeTextStyle,
+ editorCommands,
+ isBlockActive,
+ isMarkActive,
+ setLink
+} from './core/commands';
+import { buildInputRules } from './core/input-rules';
+import { docFromJSON, type EditorJSON, emptyDoc } from './core/json';
+import { buildEditingKeymap } from './core/keymaps';
+import { type MentionAttrs, mentionKey } from './core/mention';
+import {
+ MentionNodeView,
+ type MentionPortal,
+ type MentionPortalRegistry
+} from './core/mention-node-view';
+import { MentionRegistry } from './core/mention-registry';
+import type { EditorFormat } from './core/schema';
+import {
+ docToHTML,
+ docToText,
+ isEditorEmpty,
+ showsPlaceholder
+} from './core/serializers';
+import type { EditorAction } from './core/shortcuts';
+import {
+ mentionTransaction,
+ type SuggestionState,
+ type SuggestionTrigger,
+ suggestionPlugin,
+ suggestionPluginKey
+} from './core/suggestion-plugin';
+import { TaskItemView } from './core/task-item-view';
+import styles from './editor.module.css';
+import type {
+ EditorApi,
+ EditorChangeDetails,
+ EditorCommands,
+ EditorMarkdownChangeDetails,
+ MarkdownAdapter
+} from './editor-types';
+
+export interface EditorStoreProps {
+ placeholder?: string;
+ disabled: boolean;
+ readOnly: boolean;
+ markdown?: MarkdownAdapter;
+ onValueChange?: (
+ value: EditorJSON,
+ details: EditorChangeDetails | EditorMarkdownChangeDetails
+ ) => void;
+}
+
+export interface EditorTriggerEntry extends SuggestionTrigger {
+ onKeyDown: (event: KeyboardEvent, state: SuggestionState) => boolean;
+}
+
+/** What `Editor.Content` needs from an open menu for its combobox ARIA. */
+export interface EditorMenuAria {
+ listboxId: string;
+ activeOptionId?: string;
+}
+
+interface Target {
+ priority: number;
+ run: () => boolean;
+}
+
+const URL_PATTERN = /^(https?:\/\/|mailto:)\S+$/i;
+
+// Dragging selected text ends with `dragend`, not `mouseup`.
+const POINTER_END_EVENTS = ['mouseup', 'pointerup', 'pointercancel', 'dragend'];
+
+function run(targets: Set): boolean {
+ const sorted = [...targets].sort((a, b) => b.priority - a.priority);
+ return sorted.some(target => target.run());
+}
+
+function register(targets: Set, target: Target): () => void {
+ targets.add(target);
+ return () => {
+ targets.delete(target);
+ };
+}
+
+/**
+ * Pasted Markdown. A single paragraph pastes as inline content and takes the
+ * marks at the caret, as a plain-text paste does.
+ */
+function pastedSlice(state: EditorState, doc: PMNode): Slice {
+ const first = doc.firstChild;
+ if (doc.childCount !== 1 || first?.type !== state.schema.nodes.paragraph) {
+ return Slice.maxOpen(doc.content);
+ }
+ const marks = state.storedMarks ?? state.selection.$from.marks();
+ const nodes: PMNode[] = [];
+ first.forEach(node => {
+ let set = node.marks;
+ for (const mark of marks) {
+ if (!mark.type.isInSet(set)) set = mark.addToSet(set);
+ }
+ nodes.push(node.mark(set));
+ });
+ return new Slice(Fragment.from(nodes), 0, 0);
+}
+
+/**
+ * The editor's state, view and wiring. `Editor` creates one, and every part
+ * reads it through context. The state lives here and not in the view, so a
+ * remounted `Editor.Content` keeps the doc and the history.
+ */
+export class EditorStore {
+ readonly schema: Schema;
+ readonly shortcuts: Record;
+ readonly mentions = new MentionRegistry();
+ readonly api: EditorApi;
+ /** Read by `Editor.Content` when it mounts. */
+ readonly autoFocus: boolean | 'start' | 'end';
+
+ state: EditorState;
+ view: EditorView | null = null;
+ props: EditorStoreProps;
+
+ focused = false;
+ pointerSelecting = false;
+ suggestion: SuggestionState | null = null;
+ mentionPortals: MentionPortal[] = [];
+ menus = new Map();
+ /** Bumped by every change a part can observe. */
+ revision = 0;
+
+ /** The last value this store emitted or loaded. */
+ private lastValue: EditorJSON | string | undefined;
+ /** Markdown for docs the adapter has converted, so a controlled string that matches the doc does not reload it. */
+ private readonly markdownCache = new WeakMap();
+ private triggers = new Map();
+ private toolbars = new Set();
+ private linkOpeners = new Set();
+ private listeners = new Set<() => void>();
+ private taskViews = new Set();
+ private group: Transaction | null = null;
+
+ readonly portalRegistry: MentionPortalRegistry = {
+ add: portal => {
+ this.mentionPortals = [...this.mentionPortals, portal];
+ this.emit();
+ },
+ update: (id, attrs) => {
+ this.mentionPortals = this.mentionPortals.map(portal =>
+ portal.id === id ? { ...portal, attrs } : portal
+ );
+ this.emit();
+ },
+ remove: id => {
+ this.mentionPortals = this.mentionPortals.filter(
+ portal => portal.id !== id
+ );
+ this.emit();
+ }
+ };
+
+ readonly nodeViews = {
+ mention: (node: PMNode) => new MentionNodeView(node, this.portalRegistry),
+ taskItem: (
+ node: PMNode,
+ view: EditorView,
+ getPos: () => number | undefined
+ ) => {
+ const task: TaskItemView = new TaskItemView(
+ node,
+ view,
+ getPos,
+ {
+ item: styles['task-item'],
+ checkbox: styles['task-checkbox'],
+ content: styles['task-content']
+ },
+ () => {
+ this.taskViews.delete(task);
+ }
+ );
+ this.taskViews.add(task);
+ return task;
+ }
+ };
+
+ constructor(options: {
+ schema: Schema;
+ value: EditorJSON | string | undefined;
+ shortcuts: Record;
+ props: EditorStoreProps;
+ autoFocus: boolean | 'start' | 'end';
+ }) {
+ this.schema = options.schema;
+ this.shortcuts = options.shortcuts;
+ this.props = options.props;
+ this.autoFocus = options.autoFocus;
+ this.lastValue = options.value;
+ const doc =
+ options.value === undefined
+ ? emptyDoc(this.schema)
+ : this.parse(options.value);
+ this.state = EditorState.create({
+ doc,
+ plugins: this.plugins()
+ });
+ this.api = this.createApi();
+ }
+
+ // ---- subscription ----
+
+ subscribe = (listener: () => void): (() => void) => {
+ this.listeners.add(listener);
+ return () => {
+ this.listeners.delete(listener);
+ };
+ };
+
+ emit(): void {
+ this.revision += 1;
+ for (const listener of this.listeners) listener();
+ }
+
+ // ---- state ----
+
+ isEditable(): boolean {
+ return !this.props.disabled && !this.props.readOnly;
+ }
+
+ dispatch = (tr: Transaction): void => {
+ if (this.group && tr.docChanged && !tr.getMeta('appendedTransaction')) {
+ // Joins the history event of the transaction that started the group.
+ tr.setMeta('appendedTransaction', this.group);
+ }
+ const next = this.state.apply(tr);
+ this.state = next;
+ this.view?.updateState(next);
+ if (tr.docChanged && !tr.getMeta(EXTERNAL)) this.report(next.doc);
+ this.emit();
+ };
+
+ run = (command: Command): boolean =>
+ command(this.state, this.dispatch, this.view ?? undefined);
+
+ private report(doc: PMNode): void {
+ const onValueChange = this.props.onValueChange;
+ if (!onValueChange) {
+ this.lastValue = undefined;
+ return;
+ }
+ const value = doc.toJSON() as EditorJSON;
+ this.lastValue = value;
+ onValueChange(value, this.details(doc, value));
+ }
+
+ private details(
+ doc: PMNode,
+ value: EditorJSON
+ ): EditorChangeDetails | EditorMarkdownChangeDetails {
+ const details: EditorChangeDetails = {
+ empty: isEditorEmpty(doc),
+ getMentions: () => docToText(doc).mentions,
+ getText: () => docToText(doc).text,
+ getHTML: () => docToHTML(doc)
+ };
+ const adapter = this.props.markdown;
+ if (!adapter) return details;
+ return {
+ ...details,
+ getMarkdown: () => this.markdownOf(doc, adapter, value)
+ };
+ }
+
+ private markdownOf(
+ doc: PMNode,
+ adapter: MarkdownAdapter,
+ value?: EditorJSON
+ ): string {
+ let markdown = this.markdownCache.get(doc);
+ if (markdown === undefined) {
+ markdown = adapter.fromEditor(value ?? (doc.toJSON() as EditorJSON));
+ this.markdownCache.set(doc, markdown);
+ }
+ return markdown;
+ }
+
+ /** Loads a `value` or `defaultValue`. A string is Markdown. */
+ parse(value: EditorJSON | string): PMNode {
+ if (typeof value !== 'string') return docFromJSON(this.schema, value);
+ const adapter = this.props.markdown;
+ if (adapter) return docFromJSON(this.schema, adapter.toEditor(value));
+ if (process.env.NODE_ENV !== 'production') {
+ console.warn(
+ '[Apsara] Editor received a string value without the `markdown` ' +
+ 'prop. The string loads as plain text.'
+ );
+ }
+ const paragraphs = value
+ .split(/\n{2,}/)
+ .map(text =>
+ this.schema.nodes.paragraph.create(
+ null,
+ text ? this.schema.text(text) : null
+ )
+ );
+ return this.schema.topNodeType.create(null, paragraphs);
+ }
+
+ /**
+ * Applies a controlled `value`. Nothing happens when it is the value the
+ * store last emitted, when a Markdown string is what the doc converts to, or
+ * when it loads to the doc the editor already has.
+ */
+ reconcile(value: EditorJSON | string): void {
+ if (value === this.lastValue) return;
+ this.lastValue = value;
+ const adapter = this.props.markdown;
+ if (
+ typeof value === 'string' &&
+ adapter &&
+ this.markdownOf(this.state.doc, adapter) === value
+ ) {
+ return;
+ }
+ const doc = this.parse(value);
+ if (doc.eq(this.state.doc)) return;
+ this.replaceState(doc);
+ }
+
+ /** Loads `doc` with a new history, so Undo cannot step back past it. */
+ private replaceState(doc: PMNode): void {
+ const pos = Math.min(this.state.selection.from, doc.content.size);
+ this.state = EditorState.create({
+ doc,
+ plugins: this.state.plugins,
+ selection: Selection.near(doc.resolve(pos))
+ });
+ this.view?.updateState(this.state);
+ this.emit();
+ }
+
+ private replaceDocTransaction(doc: PMNode): Transaction {
+ const tr = this.state.tr.replaceWith(
+ 0,
+ this.state.doc.content.size,
+ doc.content
+ );
+ const pos = Math.min(this.state.selection.from, tr.doc.content.size);
+ tr.setSelection(Selection.near(tr.doc.resolve(pos)));
+ return tr;
+ }
+
+ updateProps(next: EditorStoreProps): void {
+ const previous = this.props;
+ this.props = next;
+ if (
+ previous.disabled !== next.disabled ||
+ previous.readOnly !== next.readOnly
+ ) {
+ this.view?.setProps({ editable: () => this.isEditable() });
+ for (const task of this.taskViews) task.setEditable(this.isEditable());
+ this.emit();
+ }
+ if (previous.placeholder !== next.placeholder) {
+ // Redraws the placeholder decoration. The doc does not change.
+ this.dispatch(this.state.tr.setMeta(EXTERNAL, true));
+ }
+ }
+
+ // ---- view ----
+
+ private endPointerSelection = () => {
+ if (!this.pointerSelecting) return;
+ this.pointerSelecting = false;
+ this.emit();
+ };
+
+ attachView(view: EditorView): void {
+ if (
+ process.env.NODE_ENV !== 'production' &&
+ this.view &&
+ this.view !== view
+ ) {
+ console.warn(
+ '[Apsara] Editor has more than one Editor.Content. Render one per Editor.'
+ );
+ }
+ this.view = view;
+ const ownerDocument = view.dom.ownerDocument;
+ for (const type of POINTER_END_EVENTS) {
+ ownerDocument.addEventListener(type, this.endPointerSelection);
+ }
+ ownerDocument.defaultView?.addEventListener(
+ 'blur',
+ this.endPointerSelection
+ );
+ this.emit();
+ }
+
+ detachView(view: EditorView): void {
+ if (this.view !== view) return;
+ const ownerDocument = view.dom.ownerDocument;
+ for (const type of POINTER_END_EVENTS) {
+ ownerDocument.removeEventListener(type, this.endPointerSelection);
+ }
+ ownerDocument.defaultView?.removeEventListener(
+ 'blur',
+ this.endPointerSelection
+ );
+ this.view = null;
+ this.focused = false;
+ this.pointerSelecting = false;
+ this.emit();
+ }
+
+ focus(position?: 'start' | 'end'): void {
+ const view = this.view;
+ if (!view) return;
+ view.focus();
+ if (!position) return;
+ const selection =
+ position === 'start'
+ ? Selection.atStart(this.state.doc)
+ : Selection.atEnd(this.state.doc);
+ this.dispatch(this.state.tr.setSelection(selection).scrollIntoView());
+ }
+
+ // ---- plugins ----
+
+ private plugins(): Plugin[] {
+ const inputRules = buildInputRules(this.schema);
+ const plugins = [
+ // First, so an open menu wins arrows, Enter, Tab and Escape.
+ suggestionPlugin({
+ getTriggers: () => [...this.triggers.values()],
+ onStateChange: next => {
+ this.suggestion = next;
+ this.emit();
+ },
+ onKeyDown: (event, state) =>
+ this.triggers.get(state.trigger)?.onKeyDown(event, state) ?? false
+ }),
+ keymap(this.shortcutBindings()),
+ buildEditingKeymap(this.schema, {
+ redo: this.shortcuts.redo !== false
+ }),
+ history(),
+ keymap(baseKeymap),
+ dropCursor({ class: styles['drop-cursor'], color: false }),
+ gapCursor(),
+ placeholderPlugin(() => this.props.placeholder, showsPlaceholder),
+ this.eventsPlugin()
+ ];
+ if (inputRules) plugins.splice(3, 0, inputRules);
+ return plugins;
+ }
+
+ private shortcutBindings(): Record {
+ const commands: Record = {
+ bold: editorCommands.toggleMark('bold'),
+ italic: editorCommands.toggleMark('italic'),
+ underline: editorCommands.toggleMark('underline'),
+ strike: editorCommands.toggleMark('strike'),
+ code: editorCommands.toggleMark('code'),
+ link: () => this.openLink(),
+ paragraph: editorCommands.setParagraph(),
+ heading1: editorCommands.setHeading(1),
+ heading2: editorCommands.setHeading(2),
+ heading3: editorCommands.setHeading(3),
+ heading4: editorCommands.setHeading(4),
+ bulletList: editorCommands.toggleList('bulletList'),
+ orderedList: editorCommands.toggleList('orderedList'),
+ taskList: editorCommands.toggleList('taskList'),
+ blockquote: editorCommands.toggleBlock('blockquote'),
+ codeBlock: editorCommands.toggleBlock('codeBlock'),
+ undo,
+ redo,
+ focusToolbar: () => this.focusToolbar()
+ };
+ const bindings: Record = {};
+ for (const [action, key] of Object.entries(this.shortcuts)) {
+ if (key) bindings[key] = commands[action as EditorAction];
+ }
+ return bindings;
+ }
+
+ private eventsPlugin(): Plugin {
+ return new Plugin({
+ props: {
+ handleDOMEvents: {
+ focus: () => {
+ this.focused = true;
+ this.emit();
+ return false;
+ },
+ blur: () => {
+ this.focused = false;
+ this.emit();
+ return false;
+ },
+ mousedown: (_view, event) => {
+ if (event.button !== 0) return false;
+ this.pointerSelecting = true;
+ this.emit();
+ return false;
+ }
+ },
+ handlePaste: (view, event) => {
+ const data = event.clipboardData;
+ if (!data) return false;
+ const text = data.getData('text/plain');
+ const url = text.trim();
+
+ // A URL pasted over a selection links the selection.
+ if (
+ !view.state.selection.empty &&
+ URL_PATTERN.test(url) &&
+ setLink(url)(view.state, view.dispatch)
+ ) {
+ return true;
+ }
+
+ const adapter = this.props.markdown;
+ const { $from } = view.state.selection;
+ const marks = view.state.storedMarks ?? $from.marks();
+ if (
+ !adapter ||
+ adapter.paste === false ||
+ !text ||
+ data.types.includes('text/html') ||
+ $from.parent.type.spec.code ||
+ marks.some(mark => mark.type.spec.code)
+ ) {
+ return false;
+ }
+ const doc = docFromJSON(this.schema, adapter.toEditor(text));
+ view.dispatch(
+ view.state.tr
+ .replaceSelection(pastedSlice(view.state, doc))
+ .scrollIntoView()
+ );
+ return true;
+ },
+ clipboardTextSerializer: (slice, view) => {
+ const adapter = this.props.markdown;
+ // A copied slice includes its parents up to the doc.
+ const doc = adapter?.copy
+ ? view.state.schema.topNodeType.createAndFill(null, slice.content)
+ : null;
+ if (adapter && doc) {
+ return adapter.fromEditor(doc.toJSON() as EditorJSON);
+ }
+ return slice.content.textBetween(0, slice.content.size, '\n\n');
+ }
+ }
+ });
+ }
+
+ // ---- menus, toolbars and links ----
+
+ registerTrigger(entry: EditorTriggerEntry): () => void {
+ if (
+ process.env.NODE_ENV !== 'production' &&
+ this.triggers.has(entry.char)
+ ) {
+ console.warn(
+ `[Apsara] Editor has two menus for the trigger ${JSON.stringify(
+ entry.char
+ )}. Only the last one opens.`
+ );
+ }
+ this.triggers.set(entry.char, entry);
+ this.emit();
+ return () => {
+ if (this.triggers.get(entry.char) !== entry) return;
+ this.triggers.delete(entry.char);
+ this.menus.delete(entry.char);
+ this.emit();
+ };
+ }
+
+ hasTriggers(): boolean {
+ return this.triggers.size > 0;
+ }
+
+ setMenu(trigger: string, aria: EditorMenuAria | null): void {
+ const current = this.menus.get(trigger);
+ if (!aria) {
+ if (!current) return;
+ this.menus.delete(trigger);
+ this.emit();
+ return;
+ }
+ if (
+ current?.listboxId === aria.listboxId &&
+ current.activeOptionId === aria.activeOptionId
+ ) {
+ return;
+ }
+ this.menus.set(trigger, aria);
+ this.emit();
+ }
+
+ dismissSuggestion = (): void => {
+ if (!this.suggestion) return;
+ this.dispatch(
+ this.state.tr.setMeta(suggestionPluginKey, { type: 'dismiss' })
+ );
+ };
+
+ /**
+ * Deletes the typed `/query`, then runs `action`. One undo restores the
+ * query: the delete starts a history event and the action's transactions
+ * join it.
+ */
+ runAfterDelete(
+ range: { from: number; to: number },
+ action: () => void
+ ): void {
+ const tr = closeHistory(this.state.tr.delete(range.from, range.to));
+ this.dispatch(tr);
+ this.group = tr;
+ try {
+ action();
+ } finally {
+ this.group = null;
+ }
+ this.view?.focus();
+ }
+
+ insertMentionAt(
+ attrs: MentionAttrs,
+ range?: { from: number; to: number }
+ ): void {
+ const tr = mentionTransaction(this.state, attrs, range);
+ if (!tr) return;
+ this.dispatch(tr);
+ this.view?.focus();
+ }
+
+ /**
+ * Applies fresh labels from `resolveMentions`. A label update is not an
+ * edit, so it skips history and `onValueChange`.
+ */
+ refreshMentionLabels = (labels: Map): void => {
+ if (labels.size === 0) return;
+ const tr = this.state.tr;
+ let changed = false;
+ this.state.doc.descendants((node, pos) => {
+ if (node.type.name !== 'mention') return;
+ const attrs = node.attrs as MentionAttrs;
+ const fresh = labels.get(mentionKey(attrs.trigger, attrs.type, attrs.id));
+ if (fresh && fresh !== attrs.label) {
+ tr.setNodeMarkup(pos, undefined, { ...attrs, label: fresh });
+ changed = true;
+ }
+ });
+ if (!changed) return;
+ tr.setMeta(EXTERNAL, true);
+ tr.setMeta('addToHistory', false);
+ this.dispatch(tr);
+ };
+
+ registerToolbar(priority: number, focus: () => boolean): () => void {
+ return register(this.toolbars, { priority, run: focus });
+ }
+
+ focusToolbar(): boolean {
+ return run(this.toolbars);
+ }
+
+ registerLinkOpener(priority: number, open: () => boolean): () => void {
+ return register(this.linkOpeners, { priority, run: open });
+ }
+
+ openLink(): boolean {
+ if (!this.isEditable() || !this.schema.marks.link) return false;
+ return run(this.linkOpeners);
+ }
+
+ // ---- api ----
+
+ private commandSet(
+ runCommand: (command: Command) => boolean
+ ): EditorCommands {
+ return {
+ toggleMark: mark => runCommand(editorCommands.toggleMark(mark)),
+ setParagraph: () => runCommand(editorCommands.setParagraph()),
+ setHeading: level => runCommand(editorCommands.setHeading(level)),
+ toggleBlock: block => runCommand(editorCommands.toggleBlock(block)),
+ toggleList: list => runCommand(editorCommands.toggleList(list)),
+ setLink: href => runCommand(editorCommands.setLink(href)),
+ unsetLink: () => runCommand(editorCommands.unsetLink()),
+ insertHorizontalRule: () =>
+ runCommand(editorCommands.insertHorizontalRule()),
+ insertText: text => runCommand(editorCommands.insertText(text)),
+ insertMention: (item, options) =>
+ runCommand((state, dispatch) => {
+ if (!state.schema.nodes.mention) return false;
+ if (!dispatch) return true;
+ const trigger =
+ options?.trigger ?? this.mentions.triggers()[0] ?? '@';
+ const type = item.type ?? 'mention';
+ this.mentions.remember(trigger, { ...item, type });
+ const tr = mentionTransaction(state, {
+ id: item.id,
+ label: item.label,
+ type,
+ trigger
+ });
+ if (tr) dispatch(tr);
+ return true;
+ }),
+ clearFormatting: () => runCommand(editorCommands.clearFormatting()),
+ undo: () => runCommand(undo),
+ redo: () => runCommand(redo),
+ setContent: value =>
+ runCommand((state, dispatch) => {
+ if (dispatch) dispatch(this.replaceDocTransaction(this.parse(value)));
+ return true;
+ }),
+ clear: () =>
+ runCommand((state, dispatch) => {
+ if (dispatch) {
+ dispatch(this.replaceDocTransaction(emptyDoc(state.schema)));
+ }
+ return true;
+ })
+ };
+ }
+
+ private createApi(): EditorApi {
+ const store = this;
+ return {
+ get view() {
+ return store.view;
+ },
+ getState: () => store.state,
+ commands: this.commandSet(store.run),
+ can: this.commandSet(command => command(store.state)),
+ isActive: (format: EditorFormat, attrs?: Record) =>
+ isFormatActive(store.state, format, attrs),
+ getJSON: () => store.state.doc.toJSON() as EditorJSON,
+ getText: () => docToText(store.state.doc).text,
+ getHTML: () => docToHTML(store.state.doc),
+ getMarkdown: () => {
+ const adapter = store.props.markdown;
+ if (!adapter) {
+ if (process.env.NODE_ENV !== 'production') {
+ console.error(
+ '[Apsara] Editor getMarkdown() needs the `markdown` prop. ' +
+ 'Pass MarkdownAdapter.create().'
+ );
+ }
+ return null;
+ }
+ return store.markdownOf(store.state.doc, adapter);
+ },
+ focus: position => store.focus(position)
+ };
+ }
+}
+
+export function isFormatActive(
+ state: EditorState,
+ format: EditorFormat,
+ attrs?: Record
+): boolean {
+ switch (format) {
+ case 'bold':
+ case 'italic':
+ case 'underline':
+ case 'strike':
+ case 'code':
+ return isMarkActive(state, format);
+ case 'link':
+ return activeLink(state) !== null;
+ case 'heading': {
+ const style = activeTextStyle(state);
+ if (typeof style !== 'number') return false;
+ return attrs?.level === undefined || attrs.level === style;
+ }
+ case 'mention':
+ case 'horizontalRule':
+ return (
+ state.selection instanceof NodeSelection &&
+ state.selection.node.type.name === format
+ );
+ default:
+ return isBlockActive(state, format);
+ }
+}
diff --git a/packages/raystack/components/editor/editor-toolbar.tsx b/packages/raystack/components/editor/editor-toolbar.tsx
new file mode 100644
index 000000000..32a4e05e4
--- /dev/null
+++ b/packages/raystack/components/editor/editor-toolbar.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
+import { cx } from 'class-variance-authority';
+import { type ComponentProps, useEffect, useRef } from 'react';
+import { Toolbar } from '../toolbar';
+import { Tooltip } from '../tooltip';
+import styles from './editor.module.css';
+import { useEditorStore, useStoreSelector } from './editor-context';
+
+export type EditorToolbarProps = ComponentProps;
+
+/** Focuses the first control in a toolbar that can take focus. */
+export function focusFirstControl(root: HTMLElement | null): boolean {
+ const control = root?.querySelector(
+ 'button:not([disabled]):not([aria-disabled="true"]), input:not([disabled])'
+ );
+ if (!control) return false;
+ control.focus();
+ return true;
+}
+
+/** A toolbar that stays in place, above or below the content. */
+export function EditorToolbar({
+ className,
+ ref,
+ 'aria-label': ariaLabel = 'Formatting',
+ ...props
+}: EditorToolbarProps) {
+ const store = useEditorStore('Editor.Toolbar');
+ const rootRef = useRef(null);
+ const mergedRef = useMergedRefs(rootRef, ref);
+ const readOnly = useStoreSelector(store, current => current.props.readOnly);
+ const disabled = useStoreSelector(store, current => current.props.disabled);
+
+ useEffect(
+ () => store.registerToolbar(0, () => focusFirstControl(rootRef.current)),
+ [store]
+ );
+
+ if (readOnly) return null;
+
+ return (
+
+
+ );
+}
+
+EditorToolbar.displayName = 'Editor.Toolbar';
diff --git a/packages/raystack/components/editor/editor-types.ts b/packages/raystack/components/editor/editor-types.ts
new file mode 100644
index 000000000..7c0855d8f
--- /dev/null
+++ b/packages/raystack/components/editor/editor-types.ts
@@ -0,0 +1,97 @@
+import type { EditorState } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import type { ReactNode } from 'react';
+import type { EditorJSON } from './core/json';
+import type { EditorMention } from './core/mention';
+import type { EditorMentionItem } from './core/mention-registry';
+import type {
+ EditorFormat,
+ EditorHeadingLevel,
+ EditorList,
+ EditorMark
+} from './core/schema';
+
+export interface EditorCommands {
+ toggleMark: (mark: EditorMark) => boolean;
+ setParagraph: () => boolean;
+ setHeading: (level: EditorHeadingLevel) => boolean;
+ toggleBlock: (block: 'blockquote' | 'codeBlock') => boolean;
+ toggleList: (list: EditorList) => boolean;
+ setLink: (href: string) => boolean;
+ unsetLink: () => boolean;
+ insertHorizontalRule: () => boolean;
+ insertText: (text: string) => boolean;
+ insertMention: (
+ item: EditorMentionItem,
+ options?: { trigger?: string }
+ ) => boolean;
+ clearFormatting: () => boolean;
+ undo: () => boolean;
+ redo: () => boolean;
+ setContent: (value: EditorJSON) => boolean;
+ clear: () => boolean;
+}
+
+export interface EditorApi {
+ /** Null until `Editor.Content` mounts. */
+ readonly view: EditorView | null;
+ getState: () => EditorState;
+ /** Runs a command. Returns true if it applied. */
+ commands: EditorCommands;
+ /** Dry runs a command. Nothing is dispatched. */
+ can: EditorCommands;
+ isActive: (format: EditorFormat, attrs?: Record) => boolean;
+ getJSON: () => EditorJSON;
+ getText: () => string;
+ getHTML: () => string;
+ /** Null, with a dev console error, when the `markdown` prop is not set. */
+ getMarkdown: () => string | null;
+ focus: (position?: 'start' | 'end') => void;
+}
+
+export interface EditorChangeDetails {
+ /** One paragraph that holds only whitespace. */
+ empty: boolean;
+ /** Collects the mentions in the doc from this change, in document order. */
+ getMentions: () => EditorMention[];
+ /** Converts the doc from this change to plain text. Mentions read as `@label`. */
+ getText: () => string;
+ /** Converts the doc from this change to HTML. */
+ getHTML: () => string;
+}
+
+export type EditorMarkdownChangeDetails = EditorChangeDetails & {
+ /** Converts the doc from this change to Markdown with the editor's adapter. */
+ getMarkdown: () => string;
+};
+
+/** Converts between Markdown and editor JSON. */
+export interface MarkdownAdapter {
+ toEditor: (markdown: string) => EditorJSON;
+ fromEditor: (value: EditorJSON) => string;
+ /**
+ * Parses plain-text Markdown on paste.
+ * @default true
+ */
+ readonly paste?: boolean;
+ /**
+ * Writes Markdown to `text/plain` on copy.
+ * @default false
+ */
+ readonly copy?: boolean;
+}
+
+export interface EditorSlashItem {
+ id: string;
+ label: string;
+ /** Shown under the label. The filter matches it at the start of a word. */
+ description?: string;
+ icon?: ReactNode;
+ group?: string;
+ keywords?: string[];
+ /** Shortcut shown on the row, in ProseMirror keymap syntax. Built-in commands show their default key. */
+ shortcut?: string;
+ disabled?: boolean;
+ /** Runs after the menu removes the typed `/query`. */
+ run: (editor: EditorApi) => void;
+}
diff --git a/packages/raystack/components/editor/editor.module.css b/packages/raystack/components/editor/editor.module.css
index 03d6e10fe..deec38a36 100644
--- a/packages/raystack/components/editor/editor.module.css
+++ b/packages/raystack/components/editor/editor.module.css
@@ -1,176 +1,278 @@
-/* The editing host. A contentEditable div grows with its content natively, so
- there is no `field-sizing` here, since that property applies to form controls. */
-.editor {
- /* One line box has to be tall enough to hold a whole chip, or inserting one
- would grow the composer and nudge the page under it. The small font's own
- 16px line box is shorter than a chip's icon and trailing slots, so the
- editor pairs the small font with the regular line height and sizes the chip
- to match, so the line box is the same height whatever a line holds. */
+.root {
+ display: flex;
+ flex-direction: column;
+ gap: var(--rs-space-3);
+ min-width: 0;
+}
+
+/* ---- Content ---- */
+
+/* The ProseMirror base rules come from `.editor` in editor-core.module.css. */
+.content {
+ /* The mention chip sizes itself to this line height. */
--editor-line-height: var(--rs-line-height-regular);
- box-sizing: border-box;
- /* ProseMirror positions widget decorations against the editing host. */
- position: relative;
- width: 100%;
- outline: none;
- white-space: pre-wrap;
- overflow-wrap: break-word;
- word-break: break-word;
- overflow-y: auto;
+ min-height: var(--rs-space-8);
color: var(--rs-color-foreground-base-primary);
- font-family: var(--rs-font-family);
- font-size: var(--rs-font-size-small);
+ font-family: var(--rs-font-body);
+ font-size: var(--rs-font-size-regular);
line-height: var(--editor-line-height);
- letter-spacing: var(--rs-letter-spacing-small);
+ letter-spacing: var(--rs-letter-spacing-regular);
+}
+
+.content[aria-disabled="true"] {
+ color: var(--rs-color-foreground-base-secondary);
}
-.editor > p {
+/* Zero specificity, so the spacing rules below win over the reset. */
+.content :where(p, h1, h2, h3, h4, ul, ol, blockquote, pre) {
margin: 0;
}
-/* prosemirror-view ships a stylesheet the editor deliberately does not load,
- it brings its own type, layout and selection treatment. Two of those rules
- are load-bearing rather than cosmetic, so they are mirrored here. */
+.content > * + * {
+ margin-top: var(--rs-space-3);
+}
-/* ProseMirror appends a zero-size placeholder ![]()
after a paragraph that ends
- in a `contentEditable="false"` node, a chip, so the browser can draw a
- caret past it. An app-level `img { display: block }` reset (Tailwind's
- preflight carries one) turns that placeholder into a block box, which reads
- as a phantom empty line under the chip and swallows a Backspace. */
-.editor :global(img.ProseMirror-separator) {
- display: inline !important;
- border: none !important;
- margin: 0 !important;
+.content h1,
+.content h2,
+.content h3,
+.content h4 {
+ font-family: var(--rs-font-title);
+ font-weight: var(--rs-font-weight-medium);
}
-/* A selected chip is a NodeSelection, so the text caret has to go away while
- it is up, the way it does for any other selected object. */
-.editor:global(.ProseMirror-hideselection) {
- caret-color: transparent;
+.content h1 {
+ font-size: var(--rs-font-size-t2);
+ line-height: var(--rs-line-height-t2);
+ letter-spacing: var(--rs-letter-spacing-t2);
}
-.editor:global(.ProseMirror-hideselection) *::selection {
- background: transparent;
+.content h2 {
+ font-size: var(--rs-font-size-t1);
+ line-height: var(--rs-line-height-t1);
+ letter-spacing: var(--rs-letter-spacing-t1);
}
-/* Read from the same emptiness predicate as `data-empty`, a ProseMirror-empty
- paragraph still holds a trailing
, so `:empty` would never match. */ -.placeholder::before { - content: attr(data-placeholder); - float: left; - height: 0; - pointer-events: none; - color: var(--rs-color-foreground-base-tertiary); +.content h3 { + font-size: var(--rs-font-size-large); + line-height: var(--rs-line-height-large); + letter-spacing: var(--rs-letter-spacing-large); +} + +.content > h1:not(:first-child), +.content > h2:not(:first-child), +.content > h3:not(:first-child) { + margin-top: var(--rs-space-5); +} + +.content ul, +.content ol { + padding-left: var(--rs-space-6); +} + +.content li + li, +.content li > * + *, +.task-content > * + * { + margin-top: var(--rs-space-2); } -/* The subtle fill on the typed trigger and its query while the menu is open, so - a pending mention reads as pending rather than as ordinary text. */ -.activeSuggestion { - border-radius: max(var(--rs-radius-pill, 0px), var(--rs-radius-2)); - background: var(--rs-color-background-base-primary-hover); +/* The label and the content sit side by side, so the content gets no top + margin from the rule above. */ +.task-item > .task-content { + margin-top: 0; } -/* Chip. Chip's tokens on the editor's own type scale, so the line box does not - jump, and inert, since removal is editing-only, so there is no hover or active - treatment to advertise a press that does nothing. */ -.mention { +.content ul[data-type="taskList"] { + padding-left: 0; + list-style: none; +} + +.task-item { + display: flex; + align-items: flex-start; + gap: var(--rs-space-3); +} + +.task-item > label { display: inline-flex; align-items: center; - gap: var(--rs-space-1); - box-sizing: border-box; - /* Fixed to the line box's height, so nothing the chip holds can change the - composer's height as it lands: an icon portals in one commit after the chip - itself, and a consumer's trailing badge is taller than the label. */ height: var(--editor-line-height); - max-width: 16rem; - padding: 0 var(--rs-space-2); - border-radius: max(var(--rs-radius-pill, 0px), var(--rs-radius-2)); - background: var(--rs-color-background-base-primary-hover); - color: var(--rs-color-foreground-base-primary); - font-size: inherit; - line-height: inherit; - letter-spacing: inherit; - /* Top-aligned rather than baseline-aligned: an inline-flex box takes its - baseline from its *first* flex item, so a chip with an icon would hang off - the icon's box and ride above the surrounding text. Its height matches the - line box, so aligning the two tops puts the label on the text's baseline. */ - vertical-align: top; - white-space: nowrap; user-select: none; +} + +.task-checkbox { + width: var(--rs-space-4); + height: var(--rs-space-4); + margin: 0; + accent-color: var(--rs-color-background-accent-emphasis); + cursor: pointer; +} + +.task-checkbox:disabled { cursor: default; } -.mentionLabel { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.task-content { + flex: 1; + min-width: 0; } -.mentionIcon, -.mentionTrailing { - display: inline-flex; - align-items: center; - flex-shrink: 0; +.task-item[data-checked="true"] > .task-content { + color: var(--rs-color-foreground-base-tertiary); + text-decoration: line-through; +} + +.content blockquote { + padding-left: var(--rs-space-4); + border-left: 2px solid var(--rs-color-border-base-primary); color: var(--rs-color-foreground-base-secondary); } -/* The slots are portal targets and stay in the DOM even with nothing in them. */ -.mentionIcon:empty, -.mentionTrailing:empty { +.content pre { + padding: var(--rs-space-3) var(--rs-space-4); + border-radius: var(--rs-radius-2); + background: var(--rs-color-background-base-secondary); + overflow-x: auto; + white-space: pre; +} + +.content code { + font-family: var(--rs-font-mono); + font-size: var(--rs-font-size-mono-small); + line-height: var(--rs-line-height-mono-small); + letter-spacing: var(--rs-letter-spacing-mono-small); +} + +.content :not(pre) > code { + padding: 0 var(--rs-space-1); + border-radius: var(--rs-radius-1); + background: var(--rs-color-background-base-secondary); +} + +.content a { + color: var(--rs-color-foreground-accent-primary); + text-decoration: underline; + text-underline-offset: 2px; + cursor: text; +} + +.content hr { + margin-top: var(--rs-space-4); + margin-bottom: var(--rs-space-4); + border: none; + border-top: 1px solid var(--rs-color-border-base-primary); +} + +.content hr:global(.ProseMirror-selectednode) { + border-top-color: var(--rs-color-border-accent-emphasis); +} + +/* The gap cursor rules from prosemirror-gapcursor's stylesheet, which the + editor does not load. */ +.content :global(.ProseMirror-gapcursor) { display: none; + position: absolute; + pointer-events: none; } -.mentionIcon > svg, -.mentionTrailing > svg { - width: var(--rs-space-4); - height: var(--rs-space-4); +.content :global(.ProseMirror-gapcursor)::after { + content: ""; + display: block; + position: absolute; + top: -2px; + width: var(--rs-space-5); + border-top: 1px solid var(--rs-color-foreground-base-primary); } -/* NodeSelection: clicking a chip selects it as one unit. */ -.mention[data-selected] { - outline: var(--rs-focus-ring); - outline-offset: 1px; +.content:global(.ProseMirror-focused) :global(.ProseMirror-gapcursor) { + display: block; } -.editor[data-disabled] .mention { - opacity: 0.7; +.drop-cursor { + background: var(--rs-color-border-accent-emphasis); } -/* Suggestion menu. Positioned at the caret but sized to the composer: a caret - is a zero-width anchor, so `--anchor-width` is useless and the width has to - be stated. The guards keep it usable in narrow panels and wide layouts. */ -.suggestionMenu { - box-sizing: border-box; - width: var(--suggestion-menu-width, 20rem); - min-width: 240px; - max-width: min(var(--available-width), 420px); - max-height: 320px; - overflow-y: auto; - padding: var(--rs-space-2); +/* The typed `/query` reads as a pending command while the menu is open. */ +.slash-query { + border-radius: var(--rs-radius-1); + box-shadow: inset 0 0 0 1px var(--rs-color-border-base-primary); } -.suggestionGroup + .suggestionGroup { - margin-top: var(--rs-space-2); +/* ---- Toolbars ---- */ + +.toolbar { + flex-wrap: wrap; } -.suggestionGroupLabel { - padding: var(--rs-space-2) var(--rs-space-3); - color: var(--rs-color-foreground-base-tertiary); - font-size: var(--rs-font-size-mini); - line-height: var(--rs-line-height-mini); - letter-spacing: var(--rs-letter-spacing-mini); - font-weight: var(--rs-font-weight-medium); +/* A pressed toggle is filled, like a pressed Toggle. */ +.control[aria-pressed="true"] { + background-color: var(--rs-color-background-neutral-secondary); } -.suggestionRow { - cursor: pointer; +.control[aria-pressed="true"]:hover { + background-color: var(--rs-color-background-neutral-secondary-hover); +} + +.floating-popup { + min-width: 0; + max-width: none; + padding: 0; +} + +.floating-toolbar { + border: none; +} + +.tooltip { + display: inline-flex; + align-items: center; + gap: var(--rs-space-3); +} + +.shortcut-keys { + flex-shrink: 0; +} + +.menu { + min-width: 200px; } -.suggestionEmpty { - padding: var(--rs-space-3); +.menu-chevron { + width: var(--rs-space-3); + height: var(--rs-space-3); + margin-left: calc(var(--rs-space-1) * -1); color: var(--rs-color-foreground-base-tertiary); } -.suggestionLoadingRow { - padding: var(--rs-space-3); +.menu-trailing { + display: inline-flex; + align-items: center; + gap: var(--rs-space-3); +} + +.menu-check { + visibility: hidden; +} + +.menu-check[data-visible] { + visibility: visible; +} + +/* ---- Link ---- */ + +.link-popover { + padding: var(--rs-space-1); + max-width: none; +} + +.link-form { + display: flex; + align-items: center; + gap: var(--rs-space-1); + padding: var(--rs-space-1); + min-width: 280px; +} + +.link-form > :first-child { + flex: 1; } diff --git a/packages/raystack/components/editor/editor.tsx b/packages/raystack/components/editor/editor.tsx new file mode 100644 index 000000000..b3880859d --- /dev/null +++ b/packages/raystack/components/editor/editor.tsx @@ -0,0 +1,28 @@ +'use client'; + +import { EditorBlockButton } from './editor-block-button'; +import { EditorContent } from './editor-content'; +import { EditorFloatingToolbar } from './editor-floating-toolbar'; +import { EditorHeadingMenu } from './editor-heading-menu'; +import { EditorHistoryButton } from './editor-history-button'; +import { EditorLinkButton } from './editor-link-button'; +import { EditorListMenu } from './editor-list-menu'; +import { EditorMarkButton } from './editor-mark-button'; +import { EditorMentions } from './editor-mentions'; +import { EditorRoot } from './editor-root'; +import { EditorSlashMenu } from './editor-slash-menu'; +import { EditorToolbar } from './editor-toolbar'; + +export const Editor = Object.assign(EditorRoot, { + Content: EditorContent, + Toolbar: EditorToolbar, + FloatingToolbar: EditorFloatingToolbar, + MarkButton: EditorMarkButton, + BlockButton: EditorBlockButton, + HeadingMenu: EditorHeadingMenu, + ListMenu: EditorListMenu, + LinkButton: EditorLinkButton, + HistoryButton: EditorHistoryButton, + SlashMenu: EditorSlashMenu, + Mentions: EditorMentions +}); diff --git a/packages/raystack/components/editor/index.ts b/packages/raystack/components/editor/index.ts deleted file mode 100644 index 4e9491cf2..000000000 --- a/packages/raystack/components/editor/index.ts +++ /dev/null @@ -1,41 +0,0 @@ -export { default as editorStyles } from './editor.module.css'; -export { - deriveDocDetails, - docFromMarkup, - docFromText, - type EditorDocDetails, - isDocEmpty, - serializeMarkup, - serializeText -} from './markup'; -// ProseMirror-free, so `PromptInput`'s root, textarea and mention registry can -// import straight from here without dragging the engine into their graph. -export { - type EditorMention, - isTriggerCharacter, - type MentionAttrs, - mentionKey, - serializeMention, - trimDetails -} from './mention'; -export type { MentionPortal } from './mention-node-view'; -export { editorSchema } from './schema'; -export { - type SuggestionAnchor, - type SuggestionGroup, - SuggestionMenu, - type SuggestionMenuItem, - type SuggestionMenuProps, - suggestionOptionId -} from './suggestion-menu'; -export { - dismissSuggestion, - insertMention, - type SuggestionState -} from './suggestion-plugin'; -export { - type EditorActions, - type UseEditorOptions, - type UseEditorResult, - useEditor -} from './use-editor'; diff --git a/packages/raystack/components/editor/index.tsx b/packages/raystack/components/editor/index.tsx new file mode 100644 index 000000000..0836a9171 --- /dev/null +++ b/packages/raystack/components/editor/index.tsx @@ -0,0 +1,42 @@ +export { type EditorBlock, editorCommands } from './core/commands'; +export type { EditorJSON } from './core/json'; +export type { EditorMention } from './core/mention'; +export type { + EditorMentionItem, + EditorMentionRef +} from './core/mention-registry'; +export type { + EditorFormat, + EditorHeadingLevel, + EditorList, + EditorMark +} from './core/schema'; +export { editorToHTML, editorToText } from './core/serializers'; +export { + defaultShortcuts, + type EditorAction, + type EditorShortcuts +} from './core/shortcuts'; +export { Editor } from './editor'; +export type { EditorBlockButtonProps } from './editor-block-button'; +export type { EditorContentProps } from './editor-content'; +export { useEditor, useEditorState } from './editor-context'; +export type { EditorFloatingToolbarProps } from './editor-floating-toolbar'; +export type { EditorHeadingMenuProps } from './editor-heading-menu'; +export type { EditorHistoryButtonProps } from './editor-history-button'; +export type { EditorLinkButtonProps } from './editor-link-button'; +export type { EditorListMenuProps } from './editor-list-menu'; +export type { EditorMarkButtonProps } from './editor-mark-button'; +export type { EditorMentionsProps } from './editor-mentions'; +export type { EditorProps } from './editor-root'; +export { defaultSlashItems } from './editor-slash-items'; +export type { EditorSlashMenuProps } from './editor-slash-menu'; +export type { EditorToolbarProps } from './editor-toolbar'; +export type { + EditorApi, + EditorChangeDetails, + EditorCommands, + EditorMarkdownChangeDetails, + EditorSlashItem +} from './editor-types'; +export { MarkdownAdapter, type MarkdownAdapterOptions } from './markdown'; diff --git a/packages/raystack/components/editor/markdown/from-markdown.ts b/packages/raystack/components/editor/markdown/from-markdown.ts new file mode 100644 index 000000000..b65ce0bed --- /dev/null +++ b/packages/raystack/components/editor/markdown/from-markdown.ts @@ -0,0 +1,330 @@ +import { + Marked, + type Token, + type TokenizerExtension, + type Tokens +} from 'marked'; +import type { EditorJSON } from '../core/json'; +import { isSafeHref } from '../core/link'; +import { type MentionAttrs, readMention } from '../core/mention'; + +type JSONMark = NonNullable[number];
+
+interface MentionToken extends Tokens.Generic {
+ type: 'mention';
+ attrs: MentionAttrs;
+}
+
+/** A trigger character, then `[`. `!` is left out because `![` opens an image. */
+const MENTION_START = /["-/:-@^`{-~]\[/;
+
+/**
+ * A `type:id` that is a link, such as `https://x` or `mailto:a@b.c`, so
+ * `([docs](https://x))` is a link after `(`, not a mention.
+ */
+function isLink(attrs: MentionAttrs): boolean {
+ return /^(?:https?|mailto)$/i.test(attrs.type) || attrs.id.startsWith('//');
+}
+
+const mentionExtension: TokenizerExtension = {
+ name: 'mention',
+ level: 'inline',
+ start: source => {
+ const index = source.search(MENTION_START);
+ return index === -1 ? undefined : index;
+ },
+ tokenizer: source => {
+ if (source[0] === '!') return undefined;
+ const match = readMention(source, 0);
+ if (!match || isLink(match.attrs)) return undefined;
+ const token: MentionToken = {
+ type: 'mention',
+ raw: source.slice(0, match.next),
+ attrs: match.attrs
+ };
+ return token;
+ }
+};
+
+let parser: Marked | undefined;
+
+function lexer(): Marked {
+ parser ??= new Marked({
+ gfm: true,
+ extensions: [mentionExtension]
+ });
+ return parser;
+}
+
+const ENTITIES: Record = {
+ amp: '&',
+ lt: '<',
+ gt: '>',
+ quot: '"',
+ apos: "'",
+ nbsp: ' '
+};
+
+/**
+ * Decodes character references as CommonMark does. A reference with more
+ * digits than CommonMark allows stays literal, and an invalid code point
+ * becomes U+FFFD.
+ */
+function decodeEntities(text: string): string {
+ return text.replace(
+ /&(#x[\da-f]{1,6}|#\d{1,7}|[a-z]+);/gi,
+ (match, entity: string) => {
+ if (entity[0] !== '#') return ENTITIES[entity.toLowerCase()] ?? match;
+ const code =
+ entity[1] === 'x' || entity[1] === 'X'
+ ? Number.parseInt(entity.slice(2), 16)
+ : Number.parseInt(entity.slice(1), 10);
+ const invalid =
+ code === 0 || code > 0x10ffff || (code >= 0xd800 && code <= 0xdfff);
+ return invalid ? '�' : String.fromCodePoint(code);
+ }
+ );
+}
+
+function withMark(marks: JSONMark[], mark: JSONMark): JSONMark[] {
+ return marks.some(existing => existing.type === mark.type)
+ ? marks
+ : [...marks, mark];
+}
+
+/** Text with its marks. A soft line break becomes a hard break. */
+function textNodes(text: string, marks: JSONMark[]): EditorJSON[] {
+ const nodes: EditorJSON[] = [];
+ text.split('\n').forEach((line, index) => {
+ if (index > 0) nodes.push({ type: 'hardBreak' });
+ if (line) {
+ nodes.push({
+ type: 'text',
+ text: line,
+ ...(marks.length ? { marks } : {})
+ });
+ }
+ });
+ return nodes;
+}
+
+function inline(tokens: Token[] | undefined, marks: JSONMark[]): EditorJSON[] {
+ if (!tokens) return [];
+ const nodes: EditorJSON[] = [];
+ let underline = 0;
+
+ for (const token of tokens) {
+ const current =
+ underline > 0 ? withMark(marks, { type: 'underline' }) : marks;
+ switch (token.type) {
+ case 'text': {
+ const text = token as Tokens.Text;
+ if (text.tokens?.length) nodes.push(...inline(text.tokens, current));
+ else nodes.push(...textNodes(decodeEntities(text.text), current));
+ break;
+ }
+ case 'escape':
+ nodes.push(...textNodes((token as Tokens.Escape).text, current));
+ break;
+ case 'strong':
+ nodes.push(
+ ...inline(
+ (token as Tokens.Strong).tokens,
+ withMark(current, { type: 'bold' })
+ )
+ );
+ break;
+ case 'em':
+ nodes.push(
+ ...inline(
+ (token as Tokens.Em).tokens,
+ withMark(current, { type: 'italic' })
+ )
+ );
+ break;
+ case 'del':
+ nodes.push(
+ ...inline(
+ (token as Tokens.Del).tokens,
+ withMark(current, { type: 'strike' })
+ )
+ );
+ break;
+ case 'codespan':
+ // Code is literal, so `<` stays as typed.
+ nodes.push(
+ ...textNodes(
+ (token as Tokens.Codespan).text,
+ withMark(current, { type: 'code' })
+ )
+ );
+ break;
+ case 'link': {
+ const link = token as Tokens.Link;
+ const next = isSafeHref(link.href)
+ ? withMark(current, { type: 'link', attrs: { href: link.href } })
+ : current;
+ nodes.push(...inline(link.tokens, next));
+ break;
+ }
+ case 'br':
+ nodes.push({ type: 'hardBreak' });
+ break;
+ case 'image':
+ nodes.push(...textNodes((token as Tokens.Image).text, current));
+ break;
+ case 'mention':
+ nodes.push({
+ type: 'mention',
+ attrs: { ...(token as MentionToken).attrs }
+ });
+ break;
+ case 'html': {
+ // `` is the only HTML read as formatting. Other HTML stays text
+ // and is never rendered.
+ const html = (token as Tokens.HTML).text.trim().toLowerCase();
+ if (html === '') underline += 1;
+ else if (html === '') underline = Math.max(0, underline - 1);
+ else nodes.push(...textNodes((token as Tokens.HTML).text, current));
+ break;
+ }
+ default:
+ if ('text' in token && typeof token.text === 'string') {
+ nodes.push(...textNodes(token.text, current));
+ }
+ }
+ }
+ return nodes;
+}
+
+function paragraph(content: EditorJSON[]): EditorJSON {
+ return content.length
+ ? { type: 'paragraph', content }
+ : { type: 'paragraph' };
+}
+
+/** List item content has to start with a paragraph. */
+function itemContent(tokens: Token[]): EditorJSON[] {
+ const content = blocks(tokens.filter(token => token.type !== 'checkbox'));
+ if (content[0]?.type !== 'paragraph') content.unshift(paragraph([]));
+ return content;
+}
+
+/** `- [ ]` with nothing after it. marked reads it as the text `[ ]`. */
+const EMPTY_TASK = /^\[([ xX])\]$/;
+
+function taskItem(item: Tokens.ListItem): EditorJSON {
+ const empty = item.task ? null : item.text.trim().match(EMPTY_TASK);
+ if (empty) {
+ return {
+ type: 'taskItem',
+ attrs: { checked: empty[1] !== ' ' },
+ content: [paragraph([])]
+ };
+ }
+ return {
+ type: 'taskItem',
+ attrs: { checked: item.checked === true },
+ content: itemContent(item.tokens)
+ };
+}
+
+function list(token: Tokens.List): EditorJSON {
+ const tasks = token.items.some(
+ item => item.task || EMPTY_TASK.test(item.text.trim())
+ );
+ if (tasks) {
+ return { type: 'taskList', content: token.items.map(taskItem) };
+ }
+ const items = token.items.map(item => ({
+ type: 'listItem',
+ content: itemContent(item.tokens)
+ }));
+ if (!token.ordered) return { type: 'bulletList', content: items };
+ const start = typeof token.start === 'number' ? token.start : 1;
+ return { type: 'orderedList', attrs: { start }, content: items };
+}
+
+function blocks(tokens: Token[]): EditorJSON[] {
+ const nodes: EditorJSON[] = [];
+ for (const token of tokens) {
+ switch (token.type) {
+ case 'space':
+ case 'def':
+ break;
+ case 'heading': {
+ const heading = token as Tokens.Heading;
+ const content = inline(heading.tokens, []);
+ nodes.push({
+ type: 'heading',
+ attrs: { level: Math.min(heading.depth, 4) },
+ ...(content.length ? { content } : {})
+ });
+ break;
+ }
+ case 'paragraph':
+ nodes.push(paragraph(inline((token as Tokens.Paragraph).tokens, [])));
+ break;
+ case 'text': {
+ const text = token as Tokens.Text;
+ nodes.push(
+ paragraph(
+ text.tokens
+ ? inline(text.tokens, [])
+ : textNodes(decodeEntities(text.text), [])
+ )
+ );
+ break;
+ }
+ case 'code': {
+ const code = token as Tokens.Code;
+ nodes.push({
+ type: 'codeBlock',
+ attrs: { language: code.lang?.split(/\s/)[0] || null },
+ ...(code.text ? { content: [{ type: 'text', text: code.text }] } : {})
+ });
+ break;
+ }
+ case 'hr':
+ nodes.push({ type: 'horizontalRule' });
+ break;
+ case 'blockquote': {
+ const content = blocks((token as Tokens.Blockquote).tokens);
+ nodes.push({
+ type: 'blockquote',
+ content: content.length ? content : [paragraph([])]
+ });
+ break;
+ }
+ case 'list':
+ nodes.push(list(token as Tokens.List));
+ break;
+ case 'table': {
+ const table = token as Tokens.Table;
+ const rows = [table.header, ...table.rows];
+ for (const row of rows) {
+ nodes.push(
+ paragraph(textNodes(row.map(cell => cell.text).join(' | '), []))
+ );
+ }
+ break;
+ }
+ case 'html':
+ nodes.push(
+ paragraph(textNodes((token as Tokens.HTML).text.trim(), []))
+ );
+ break;
+ default:
+ if ('text' in token && typeof token.text === 'string') {
+ nodes.push(paragraph(textNodes(token.text, [])));
+ }
+ }
+ }
+ return nodes;
+}
+
+/** Parses Markdown into editor JSON. */
+export function fromMarkdown(markdown: string): EditorJSON {
+ const content = blocks(lexer().lexer(markdown));
+ return { type: 'doc', content: content.length ? content : [paragraph([])] };
+}
diff --git a/packages/raystack/components/editor/markdown/index.ts b/packages/raystack/components/editor/markdown/index.ts
new file mode 100644
index 000000000..063bec209
--- /dev/null
+++ b/packages/raystack/components/editor/markdown/index.ts
@@ -0,0 +1,53 @@
+import type { MarkdownAdapter as MarkdownAdapterShape } from '../editor-types';
+import { fromMarkdown } from './from-markdown';
+import { toMarkdown } from './to-markdown';
+
+export interface MarkdownAdapterOptions {
+ /**
+ * `'markup'` writes `@[label](type:id)`, which round-trips. `'label'` writes `@label`.
+ * @default 'markup'
+ */
+ mentions?: 'markup' | 'label';
+ /**
+ * `'html'` writes `…`. `'drop'` writes plain text.
+ * @default 'html'
+ */
+ underline?: 'html' | 'drop';
+ /**
+ * Parses plain-text Markdown on paste.
+ * @default true
+ */
+ paste?: boolean;
+ /**
+ * Writes Markdown to `text/plain` on copy.
+ * @default false
+ */
+ copy?: boolean;
+}
+
+export type MarkdownAdapter = MarkdownAdapterShape;
+
+function create(options: MarkdownAdapterOptions = {}): MarkdownAdapterShape {
+ const writeOptions = {
+ mentions: options.mentions ?? 'markup',
+ underline: options.underline ?? 'html'
+ };
+ return {
+ toEditor: markdown => fromMarkdown(markdown),
+ fromEditor: value => toMarkdown(value, writeOptions),
+ paste: options.paste ?? true,
+ copy: options.copy ?? false
+ };
+}
+
+const defaults = create();
+
+/**
+ * Converts between Markdown and editor JSON. Pass `MarkdownAdapter.create()`
+ * to the editor's `markdown` prop.
+ */
+export const MarkdownAdapter = {
+ create,
+ toEditor: defaults.toEditor,
+ fromEditor: defaults.fromEditor
+};
diff --git a/packages/raystack/components/editor/markdown/to-markdown.ts b/packages/raystack/components/editor/markdown/to-markdown.ts
new file mode 100644
index 000000000..b90682ecb
--- /dev/null
+++ b/packages/raystack/components/editor/markdown/to-markdown.ts
@@ -0,0 +1,446 @@
+// The escaping, mark-boundary and list rules follow prosemirror-markdown's
+// to_markdown.ts (MIT, https://github.com/ProseMirror/prosemirror-markdown),
+// rewritten to walk editor JSON instead of a ProseMirror document.
+
+import type { EditorJSON } from '../core/json';
+import { isSafeHref, stripControlCharacters } from '../core/link';
+import {
+ type MentionAttrs,
+ mentionText,
+ serializeMention
+} from '../core/mention';
+import { LIST_TYPES } from '../core/schema';
+
+type JSONMark = NonNullable[number];
+
+export interface ToMarkdownOptions {
+ mentions: 'markup' | 'label';
+ underline: 'html' | 'drop';
+}
+
+/** Marks earlier in the list open first and close last. Code is innermost. */
+const MARK_ORDER = ['link', 'bold', 'italic', 'strike', 'underline', 'code'];
+
+const LISTS: readonly string[] = LIST_TYPES;
+
+const PUNCTUATION = /[\p{P}\p{S}]/u;
+
+function rank(mark: JSONMark): number {
+ const index = MARK_ORDER.indexOf(mark.type);
+ return index === -1 ? MARK_ORDER.length : index;
+}
+
+function sameMark(a: JSONMark, b: JSONMark): boolean {
+ return a.type === b.type && a.attrs?.href === b.attrs?.href;
+}
+
+function hrefOf(mark: JSONMark): string {
+ return String(mark.attrs?.href ?? '');
+}
+
+function firstChar(text: string): string {
+ const code = text.codePointAt(0);
+ return code === undefined ? '' : String.fromCodePoint(code);
+}
+
+function lastChar(text: string): string {
+ const code = text.charCodeAt(text.length - 1);
+ const surrogate = code >= 0xdc00 && code <= 0xdfff && text.length > 1;
+ return text.slice(surrogate ? -2 : -1);
+}
+
+function isPunctuation(char: string): boolean {
+ return PUNCTUATION.test(char);
+}
+
+/** Neither whitespace nor punctuation, the characters that stop a delimiter. */
+function isWordChar(char: string): boolean {
+ return char !== '' && !/\s/u.test(char) && !isPunctuation(char);
+}
+
+/** A character reference. It renders as `char`, but it counts as punctuation next to a delimiter. */
+function charRef(char: string): string {
+ return `&#x${(char.codePointAt(0) ?? 0).toString(16).toUpperCase()};`;
+}
+
+function escapeText(text: string): string {
+ return text.replace(/[`*\\~[\]_<]/g, '\\$&').replace(/&(?=#?\w+;)/g, '\\&');
+}
+
+/**
+ * Escapes text at the start of a line. Leading whitespace would indent the
+ * line into a code block or be dropped, so the first space becomes a
+ * reference. `-`, `+`, `>`, `#`, `1.` and a run of `=` would start a list, a
+ * quote, a heading or a rule.
+ */
+function escapeLineStart(text: string): string {
+ if (/^[ \t]/.test(text)) return charRef(text[0]) + text.slice(1);
+ return text
+ .replace(/^[->]/, '\\$&')
+ .replace(/^\+(?=[ \t]|$)/, '\\+')
+ .replace(/^#{1,6}(?=[ \t]|$)/, '\\$&')
+ .replace(/^(\d{1,9})([.)])(?=[ \t]|$)/, '$1\\$2')
+ .replace(/^=+[ \t]*$/, '\\$&');
+}
+
+function escapeHref(href: string): string {
+ return href.replace(/[\s()<>]/g, char => encodeURIComponent(char));
+}
+
+function codeSpan(text: string): string {
+ const runs = text.match(/`+/g) ?? [];
+ const longest = runs.reduce((max, run) => Math.max(max, run.length), 0);
+ const fence = '`'.repeat(longest + 1);
+ const pad = text.startsWith('`') || text.endsWith('`') ? ' ' : '';
+ return `${fence}${pad}${text}${pad}${fence}`;
+}
+
+class InlineWriter {
+ private out = '';
+ private active: JSONMark[] = [];
+ private trailing = '';
+ private atLineStart = true;
+ /**
+ * The last closing delimiter follows punctuation, so it closes only before
+ * whitespace, punctuation or the end, as in `**Note:**`.
+ */
+ private closedAfterPunctuation = false;
+
+ constructor(
+ private readonly options: ToMarkdownOptions,
+ private readonly heading: boolean
+ ) {}
+
+ private opener(mark: JSONMark): string {
+ switch (mark.type) {
+ case 'bold':
+ return '**';
+ case 'italic':
+ return '*';
+ case 'strike':
+ return '~~';
+ case 'underline':
+ return this.options.underline === 'html' ? '' : '';
+ case 'link':
+ return '[';
+ default:
+ return '';
+ }
+ }
+
+ private closer(mark: JSONMark): string {
+ switch (mark.type) {
+ case 'bold':
+ return '**';
+ case 'italic':
+ return '*';
+ case 'strike':
+ return '~~';
+ case 'underline':
+ return this.options.underline === 'html' ? '' : '';
+ case 'link':
+ return `](${escapeHref(stripControlCharacters(hrefOf(mark)))})`;
+ default:
+ return '';
+ }
+ }
+
+ /** Appends Markdown source. */
+ private raw(source: string) {
+ if (!source) return;
+ let text = source;
+ if (this.closedAfterPunctuation) {
+ this.closedAfterPunctuation = false;
+ const first = firstChar(text);
+ if (isWordChar(first)) text = charRef(first) + text.slice(first.length);
+ }
+ this.out += text;
+ }
+
+ /** Appends text, escaped. */
+ private text(text: string) {
+ if (!text) return;
+ const escaped = escapeText(text);
+ this.raw(this.atLineStart ? escapeLineStart(escaped) : escaped);
+ this.atLineStart = false;
+ }
+
+ /** Opens `marks`. `next` is the Markdown that follows the delimiters. */
+ private open(marks: JSONMark[], next: string) {
+ const openers = marks.map(mark => this.opener(mark)).join('');
+ if (!openers) return;
+ const run = openers.match(/^(?:\*+|~+)/)?.[0];
+ if (run) {
+ // A run followed by punctuation opens only after whitespace or
+ // punctuation, as in `text**:note**`.
+ const after = firstChar(openers.slice(run.length) || next);
+ const before = lastChar(this.out);
+ if (isWordChar(before) && isPunctuation(after)) {
+ this.out = this.out.slice(0, -before.length) + charRef(before);
+ }
+ }
+ // `!` right before `[` would turn the link into an image.
+ if (openers.startsWith('[') && this.out.endsWith('!')) {
+ this.out = `${this.out.slice(0, -1)}\\!`;
+ }
+ this.raw(openers);
+ this.atLineStart = false;
+ }
+
+ /** Closes the marks past `keep`, then writes the whitespace held back. */
+ private settle(keep: number) {
+ let closers = '';
+ while (this.active.length > keep) {
+ const mark = this.active.pop();
+ if (mark) closers += this.closer(mark);
+ }
+ if (closers) {
+ this.raw(closers);
+ const run = closers.match(/(?:\*+|~+)$/)?.[0];
+ if (run) {
+ const before = lastChar(this.out.slice(0, -run.length));
+ this.closedAfterPunctuation = isPunctuation(before);
+ }
+ }
+ this.raw(this.trailing);
+ this.trailing = '';
+ }
+
+ private commonPrefix(marks: JSONMark[]): number {
+ let keep = 0;
+ while (
+ keep < this.active.length &&
+ keep < marks.length &&
+ sameMark(this.active[keep], marks[keep])
+ ) {
+ keep += 1;
+ }
+ return keep;
+ }
+
+ write(node: EditorJSON, next: EditorJSON | undefined) {
+ let marks = (node.marks ?? [])
+ .filter(mark => mark.type !== 'link' || isSafeHref(hrefOf(mark)))
+ .sort((a, b) => rank(a) - rank(b));
+ const code = marks.some(mark => mark.type === 'code');
+ marks = marks.filter(mark => mark.type !== 'code');
+
+ if (node.type === 'hardBreak') {
+ // A mark that ends at the break closes before it, so no delimiter
+ // starts the next line.
+ marks = marks.filter(
+ mark =>
+ next?.marks?.some(other => sameMark(other, mark)) &&
+ (next.type !== 'text' || /\S/.test(next.text ?? ''))
+ );
+ } else if (
+ node.type === 'text' &&
+ (node.text ?? '').trim() === '' &&
+ !code
+ ) {
+ // Whitespace-only text opens no new marks, so no `** **` is written.
+ marks = marks.slice(0, this.commonPrefix(marks));
+ }
+
+ const keep = this.commonPrefix(marks);
+ this.settle(keep);
+
+ if (node.type === 'text') {
+ this.writeText(node.text ?? '', marks, keep, code);
+ return;
+ }
+
+ if (node.type === 'hardBreak') {
+ // A heading is one line, so a break in it becomes a space.
+ const output = this.heading ? ' ' : '\\\n';
+ this.open(marks.slice(keep), output);
+ this.active = marks;
+ this.raw(output);
+ this.atLineStart = !this.heading;
+ return;
+ }
+
+ if (node.type === 'mention') {
+ const attrs = node.attrs as unknown as MentionAttrs;
+ if (this.options.mentions === 'label') {
+ const label = mentionText(attrs);
+ this.open(marks.slice(keep), escapeText(label));
+ this.active = marks;
+ this.text(label);
+ return;
+ }
+ // `![` opens an image, so a `!` mention reads back as text.
+ let markup = serializeMention(attrs);
+ if (markup.startsWith('![')) markup = `\\${markup}`;
+ this.open(marks.slice(keep), markup);
+ this.active = marks;
+ this.raw(markup);
+ this.atLineStart = false;
+ }
+ }
+
+ private writeText(
+ text: string,
+ marks: JSONMark[],
+ keep: number,
+ code: boolean
+ ) {
+ const lead = text.match(/^\s*/)?.[0] ?? '';
+ const trail =
+ text.length > lead.length ? (text.match(/\s*$/)?.[0] ?? '') : '';
+ const core = text.slice(lead.length, text.length - trail.length);
+
+ if (marks.length > keep || code) {
+ // Markdown does not allow whitespace just inside a delimiter, so it
+ // moves outside the marks.
+ this.text(lead);
+ const body = code ? (core ? codeSpan(core) : '') : escapeText(core);
+ this.open(marks.slice(keep), body);
+ this.active = marks;
+ this.raw(body);
+ if (body) this.atLineStart = false;
+ } else {
+ this.active = marks;
+ this.text(lead + core);
+ }
+
+ if (code || marks.length) this.trailing = trail;
+ else this.raw(trail);
+ }
+
+ finish(): string {
+ this.settle(0);
+ return this.out;
+ }
+}
+
+function inline(
+ content: EditorJSON[] | undefined,
+ options: ToMarkdownOptions,
+ heading = false
+): string {
+ const nodes = [...(content ?? [])];
+ // A hard break at the end of a block has no Markdown form.
+ while (nodes[nodes.length - 1]?.type === 'hardBreak') nodes.pop();
+ const writer = new InlineWriter(options, heading);
+ nodes.forEach((node, index) => {
+ writer.write(node, nodes[index + 1]);
+ });
+ return writer.finish();
+}
+
+function indent(text: string, first: string, rest: string): string {
+ return text
+ .split('\n')
+ .map((line, index) => {
+ if (index === 0) return first + line;
+ return line ? rest + line : line;
+ })
+ .join('\n');
+}
+
+function textOf(node: EditorJSON): string {
+ return (node.content ?? []).map(child => child.text ?? '').join('');
+}
+
+/**
+ * Blocks with `separator` before each one after the first. A list right after
+ * a list that uses the same marker switches its marker (`-` and `*`, `.` and
+ * `)`), or the two would read back as one list.
+ */
+function sequence(
+ nodes: EditorJSON[],
+ options: ToMarkdownOptions,
+ separator: (node: EditorJSON) => string
+): string {
+ let out = '';
+ let previous: string | null = null;
+ nodes.forEach((node, index) => {
+ if (index > 0) out += separator(node);
+ if (!LISTS.includes(node.type)) {
+ out += block(node, options);
+ previous = null;
+ return;
+ }
+ const ordered = node.type === 'orderedList';
+ const [first, second] = ordered ? ['.', ')'] : ['-', '*'];
+ const marker = previous === first ? second : first;
+ out += list(node, options, marker);
+ previous = marker;
+ });
+ return out;
+}
+
+function listItem(item: EditorJSON, options: ToMarkdownOptions): string {
+ return sequence(item.content ?? [], options, child =>
+ LISTS.includes(child.type) ? '\n' : '\n\n'
+ );
+}
+
+function list(
+ node: EditorJSON,
+ options: ToMarkdownOptions,
+ marker: string
+): string {
+ const items = node.content ?? [];
+ // A list with a second paragraph or a code block in an item is loose.
+ const loose = items.some(item =>
+ (item.content ?? []).slice(1).some(child => !LISTS.includes(child.type))
+ );
+ const start = Number(node.attrs?.start ?? 1);
+ const first = Number.isSafeInteger(start) && start >= 0 ? start : 1;
+ return items
+ .map((item, index) => {
+ let prefix = `${marker} `;
+ if (node.type === 'orderedList') prefix = `${first + index}${marker} `;
+ if (node.type === 'taskList') {
+ prefix = `${marker} [${item.attrs?.checked ? 'x' : ' '}] `;
+ }
+ const body = listItem(item, options);
+ return indent(body, prefix, ' '.repeat(prefix.length));
+ })
+ .join(loose ? '\n\n' : '\n');
+}
+
+function block(node: EditorJSON, options: ToMarkdownOptions): string {
+ switch (node.type) {
+ case 'paragraph':
+ return inline(node.content, options);
+ case 'heading': {
+ const level = Math.min(
+ Math.max(Math.round(Number(node.attrs?.level)) || 1, 1),
+ 6
+ );
+ return `${'#'.repeat(level)} ${inline(node.content, options, true)}`;
+ }
+ case 'blockquote':
+ return blocks(node.content, options)
+ .split('\n')
+ .map(line => (line ? `> ${line}` : '>'))
+ .join('\n');
+ case 'codeBlock': {
+ const text = textOf(node);
+ const runs = text.match(/`{3,}/g) ?? [];
+ const longest = runs.reduce((max, run) => Math.max(max, run.length), 2);
+ const fence = '`'.repeat(longest + 1);
+ const language = (node.attrs?.language as string | null) ?? '';
+ return `${fence}${language}\n${text}\n${fence}`;
+ }
+ case 'horizontalRule':
+ return '---';
+ default:
+ return node.content ? blocks(node.content, options) : (node.text ?? '');
+ }
+}
+
+function blocks(
+ content: EditorJSON[] | undefined,
+ options: ToMarkdownOptions
+): string {
+ return sequence(content ?? [], options, () => '\n\n');
+}
+
+/** Serializes editor JSON as Markdown. */
+export function toMarkdown(value: EditorJSON, options: ToMarkdownOptions) {
+ return blocks(value.content, options);
+}
diff --git a/packages/raystack/components/editor/schema.ts b/packages/raystack/components/editor/schema.ts
deleted file mode 100644
index 1f785cf7a..000000000
--- a/packages/raystack/components/editor/schema.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Schema } from 'prosemirror-model';
-import type { MentionAttrs } from './mention';
-
-/**
- * A deliberately tiny schema: one paragraph of text, hard breaks, and atomic
- * mentions. Nothing else, so pasted HTML sanitizes to plain text for free,
- * there is no mark or block the parser could keep.
- */
-export const editorSchema = new Schema({
- nodes: {
- doc: { content: 'paragraph' },
-
- paragraph: {
- content: 'inline*',
- parseDOM: [{ tag: 'p' }],
- toDOM: () => ['p', 0]
- },
-
- text: { group: 'inline' },
-
- hardBreak: {
- inline: true,
- group: 'inline',
- selectable: false,
- parseDOM: [{ tag: 'br' }],
- toDOM: () => ['br']
- },
-
- mention: {
- inline: true,
- group: 'inline',
- // Atomic: the cursor never enters it, so it deletes and moves as one unit.
- atom: true,
- selectable: true,
- // ProseMirror makes inline atoms draggable by default, which would let a
- // chip be dropped into the middle of a word.
- draggable: false,
- attrs: {
- id: {},
- label: {},
- type: { default: 'mention' },
- trigger: { default: '@' }
- },
- parseDOM: [
- {
- tag: 'span[data-mention-id]',
- getAttrs: dom => {
- const el = dom as HTMLElement;
- return {
- id: el.getAttribute('data-mention-id') ?? '',
- label: el.getAttribute('data-mention-label') ?? el.textContent,
- type: el.getAttribute('data-mention-type') ?? 'mention',
- trigger: el.getAttribute('data-mention-trigger') ?? '@'
- };
- }
- }
- ],
- // Only used for the clipboard's `text/html` flavour. On screen the node
- // view owns the element. Pasting this back restores the chip with its id.
- toDOM: node => {
- const { id, label, type, trigger } = node.attrs as MentionAttrs;
- return [
- 'span',
- {
- 'data-mention-id': id,
- 'data-mention-label': label,
- 'data-mention-type': type,
- 'data-mention-trigger': trigger
- },
- `${trigger}${label}`
- ];
- }
- }
- }
-});
-
-export const mentionType = editorSchema.nodes.mention;
-export const hardBreakType = editorSchema.nodes.hardBreak;
-export const paragraphType = editorSchema.nodes.paragraph;
diff --git a/packages/raystack/components/editor/use-editor-suggestion.ts b/packages/raystack/components/editor/use-editor-suggestion.ts
new file mode 100644
index 000000000..1c99a336f
--- /dev/null
+++ b/packages/raystack/components/editor/use-editor-suggestion.ts
@@ -0,0 +1,78 @@
+'use client';
+
+import { useId, useLayoutEffect, useRef } from 'react';
+import type { SuggestionState } from './core/suggestion-plugin';
+import {
+ type SuggestionItem,
+ type UseSuggestionMenuOptions,
+ type UseSuggestionMenuResult,
+ useSuggestionMenu
+} from './core/use-suggestion-menu';
+import { useStoreSelector } from './editor-context';
+import type { EditorStore } from './editor-store';
+
+interface UseEditorSuggestionOptions-
+ extends Omit<
+ UseSuggestionMenuOptions
- ,
+ 'getView' | 'suggestion' | 'open' | 'dismiss' | 'listboxId'
+ > {
+ store: EditorStore;
+ trigger: string;
+ maxSpaces?: number;
+ className?: string;
+}
+
+/**
+ * Registers a trigger with the editor and drives its menu. The editor routes
+ * keys to the menu while its query is active.
+ */
+export function useEditorSuggestion
- ({
+ store,
+ trigger,
+ maxSpaces,
+ className,
+ ...options
+}: UseEditorSuggestionOptions
- ): {
+ menu: UseSuggestionMenuResult
- ;
+ listboxId: string;
+} {
+ const listboxId = useId();
+ const keyDownRef = useRef<
+ ((event: KeyboardEvent, state: SuggestionState) => boolean) | null
+ >(null);
+
+ useLayoutEffect(
+ () =>
+ store.registerTrigger({
+ char: trigger,
+ maxSpaces,
+ className,
+ onKeyDown: (event, state) => keyDownRef.current?.(event, state) ?? false
+ }),
+ [store, trigger, maxSpaces, className]
+ );
+
+ const suggestion = useStoreSelector(store, current =>
+ current.suggestion?.trigger === trigger ? current.suggestion : null
+ );
+ const editable = useStoreSelector(store, current => current.isEditable());
+
+ const menu = useSuggestionMenu
- ({
+ ...options,
+ getView: () => store.view,
+ suggestion,
+ open: editable && suggestion !== null,
+ dismiss: store.dismissSuggestion,
+ listboxId
+ });
+ keyDownRef.current = menu.handleKeyDown;
+
+ useLayoutEffect(() => {
+ store.setMenu(
+ trigger,
+ menu.open ? { listboxId, activeOptionId: menu.activeOptionId } : null
+ );
+ }, [store, trigger, listboxId, menu.open, menu.activeOptionId]);
+
+ return { menu, listboxId };
+}
diff --git a/packages/raystack/components/editor/__tests__/markup.test.ts b/packages/raystack/components/prompt-input/__tests__/prompt-input-markup.test.ts
similarity index 97%
rename from packages/raystack/components/editor/__tests__/markup.test.ts
rename to packages/raystack/components/prompt-input/__tests__/prompt-input-markup.test.ts
index eaf5076cb..0caeb7a9d 100644
--- a/packages/raystack/components/editor/__tests__/markup.test.ts
+++ b/packages/raystack/components/prompt-input/__tests__/prompt-input-markup.test.ts
@@ -6,8 +6,12 @@ import {
isDocEmpty,
serializeMarkup,
serializeText
-} from '../markup';
-import { isTriggerCharacter, serializeMention, trimDetails } from '../mention';
+} from '../../editor/core/composer/markup';
+import {
+ isTriggerCharacter,
+ serializeMention,
+ trimDetails
+} from '../../editor/core/mention';
const derive = (markup: string) => deriveDocDetails(docFromMarkup(markup));
const roundTrip = (markup: string) => serializeMarkup(docFromMarkup(markup));
diff --git a/packages/raystack/components/prompt-input/prompt-input-context.tsx b/packages/raystack/components/prompt-input/prompt-input-context.tsx
index cd77097ca..15e160a3a 100644
--- a/packages/raystack/components/prompt-input/prompt-input-context.tsx
+++ b/packages/raystack/components/prompt-input/prompt-input-context.tsx
@@ -1,7 +1,7 @@
'use client';
import { createContext, type RefObject, useContext } from 'react';
-import type { EditorMention } from '../editor/mention';
+import type { EditorMention } from '../editor/core/mention';
import type {
PromptInputMentionItem,
PromptInputMentionRegistry
diff --git a/packages/raystack/components/prompt-input/prompt-input-editor.tsx b/packages/raystack/components/prompt-input/prompt-input-editor.tsx
index 9b09399f1..42e83894b 100644
--- a/packages/raystack/components/prompt-input/prompt-input-editor.tsx
+++ b/packages/raystack/components/prompt-input/prompt-input-editor.tsx
@@ -15,18 +15,19 @@ import {
import { createPortal } from 'react-dom';
import {
deriveDocDetails,
- docFromMarkup,
- editorStyles,
- SuggestionMenu,
- type SuggestionState,
- useEditor
-} from '../editor';
+ docFromMarkup
+} from '../editor/core/composer/markup';
+import { useComposerEditor } from '../editor/core/composer/use-composer-editor';
+import editorStyles from '../editor/core/editor-core.module.css';
+import { SuggestionMenu } from '../editor/core/suggestion-menu';
+import type { SuggestionState } from '../editor/core/suggestion-plugin';
+import { useMentionResolution } from '../editor/core/use-suggestion-menu';
import styles from './prompt-input.module.css';
import {
type PromptInputInputApi,
usePromptInputContext
} from './prompt-input-context';
-import { useMentionMenu, useMentionResolution } from './use-mention-menu';
+import { useMentionMenu } from './use-mention-menu';
export interface PromptInputEditorProps
extends Omit<
@@ -85,23 +86,24 @@ export function PromptInputEditor({
((event: KeyboardEvent, state: SuggestionState) => boolean) | null
>(null);
- const { hostRef, initialHtml, viewRef, mentionPortals, actions } = useEditor({
- initialMarkup: context.value,
- placeholder,
- disabled: resolvedDisabled,
- spellCheck,
- maxLength,
- getTriggers: () => registry.triggers(),
- onChange: details =>
- setValueRef.current(details.markup, {
- text: details.text,
- mentions: details.mentions
- }),
- onSubmit: () => requestSubmitRef.current(),
- onSuggestionChange: setSuggestion,
- onSuggestionKeyDown: (event, state) =>
- keyDownRef.current?.(event, state) ?? false
- });
+ const { hostRef, initialHtml, viewRef, mentionPortals, actions } =
+ useComposerEditor({
+ initialMarkup: context.value,
+ placeholder,
+ disabled: resolvedDisabled,
+ spellCheck,
+ maxLength,
+ getTriggers: () => registry.triggers(),
+ onChange: details =>
+ setValueRef.current(details.markup, {
+ text: details.text,
+ mentions: details.mentions
+ }),
+ onSubmit: () => requestSubmitRef.current(),
+ onSuggestionChange: setSuggestion,
+ onSuggestionKeyDown: (event, state) =>
+ keyDownRef.current?.(event, state) ?? false
+ });
const menu = useMentionMenu({
viewRef,
@@ -113,7 +115,11 @@ export function PromptInputEditor({
});
keyDownRef.current = menu.handleKeyDown;
- useMentionResolution(registry, context.details.mentions, actions);
+ useMentionResolution(
+ registry,
+ context.details.mentions,
+ actions.refreshMentionLabels
+ );
const api = useMemo
(
() => ({
@@ -184,7 +190,12 @@ export function PromptInputEditor({
+ setHref(event.target.value)}
+ onKeyDown={event => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ apply();
+ } else if (event.key === 'Escape') {
+ event.preventDefault();
+ event.stopPropagation();
+ finish();
+ }
+ }}
+ />
+
+
+ window.open(normalized, '_blank', 'noopener,noreferrer')}
+ >
+
+ {initial ? (
+ {
+ store.run(unsetLink);
+ finish();
+ }}
+ >
+
+ ) : null}
+
+ );
+}
diff --git a/packages/raystack/components/editor/editor-list-menu.tsx b/packages/raystack/components/editor/editor-list-menu.tsx
new file mode 100644
index 000000000..8e6e64521
--- /dev/null
+++ b/packages/raystack/components/editor/editor-list-menu.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { activeList, toggleList } from './core/commands';
+import { type EditorList, LIST_TYPES } from './core/schema';
+import { useEditorStore, useStoreSelector } from './editor-context';
+import type { EditorControlBaseProps } from './editor-control';
+import { BLOCK_DEFAULTS } from './editor-defaults';
+import {
+ EditorMenuControl,
+ EditorMenuItems,
+ type EditorMenuOption,
+ sameFlags
+} from './editor-menu-control';
+
+export interface EditorListMenuProps extends EditorControlBaseProps {
+ /**
+ * The list types in the menu.
+ * @default ['bulletList', 'orderedList', 'taskList']
+ */
+ types?: EditorList[];
+}
+
+/** A menu that turns the selection into a list, or back into text. */
+export function EditorListMenu({
+ types = LIST_TYPES as EditorList[],
+ label = 'List',
+ ...props
+}: EditorListMenuProps) {
+ const store = useEditorStore('Editor.ListMenu');
+ const current = useStoreSelector(store, state => activeList(state.state));
+ const editable = useStoreSelector(store, state => state.isEditable());
+
+ const available = types.filter(type => type in store.schema.nodes);
+ if (available.length === 0) return null;
+
+ const Icon = BLOCK_DEFAULTS[current ?? 'bulletList'].Icon;
+
+ return (
+ , so `:empty` would never match. */ -.placeholder::before { - content: attr(data-placeholder); - float: left; - height: 0; - pointer-events: none; - color: var(--rs-color-foreground-base-tertiary); +.content h3 { + font-size: var(--rs-font-size-large); + line-height: var(--rs-line-height-large); + letter-spacing: var(--rs-letter-spacing-large); +} + +.content > h1:not(:first-child), +.content > h2:not(:first-child), +.content > h3:not(:first-child) { + margin-top: var(--rs-space-5); +} + +.content ul, +.content ol { + padding-left: var(--rs-space-6); +} + +.content li + li, +.content li > * + *, +.task-content > * + * { + margin-top: var(--rs-space-2); } -/* The subtle fill on the typed trigger and its query while the menu is open, so - a pending mention reads as pending rather than as ordinary text. */ -.activeSuggestion { - border-radius: max(var(--rs-radius-pill, 0px), var(--rs-radius-2)); - background: var(--rs-color-background-base-primary-hover); +/* The label and the content sit side by side, so the content gets no top + margin from the rule above. */ +.task-item > .task-content { + margin-top: 0; } -/* Chip. Chip's tokens on the editor's own type scale, so the line box does not - jump, and inert, since removal is editing-only, so there is no hover or active - treatment to advertise a press that does nothing. */ -.mention { +.content ul[data-type="taskList"] { + padding-left: 0; + list-style: none; +} + +.task-item { + display: flex; + align-items: flex-start; + gap: var(--rs-space-3); +} + +.task-item > label { display: inline-flex; align-items: center; - gap: var(--rs-space-1); - box-sizing: border-box; - /* Fixed to the line box's height, so nothing the chip holds can change the - composer's height as it lands: an icon portals in one commit after the chip - itself, and a consumer's trailing badge is taller than the label. */ height: var(--editor-line-height); - max-width: 16rem; - padding: 0 var(--rs-space-2); - border-radius: max(var(--rs-radius-pill, 0px), var(--rs-radius-2)); - background: var(--rs-color-background-base-primary-hover); - color: var(--rs-color-foreground-base-primary); - font-size: inherit; - line-height: inherit; - letter-spacing: inherit; - /* Top-aligned rather than baseline-aligned: an inline-flex box takes its - baseline from its *first* flex item, so a chip with an icon would hang off - the icon's box and ride above the surrounding text. Its height matches the - line box, so aligning the two tops puts the label on the text's baseline. */ - vertical-align: top; - white-space: nowrap; user-select: none; +} + +.task-checkbox { + width: var(--rs-space-4); + height: var(--rs-space-4); + margin: 0; + accent-color: var(--rs-color-background-accent-emphasis); + cursor: pointer; +} + +.task-checkbox:disabled { cursor: default; } -.mentionLabel { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.task-content { + flex: 1; + min-width: 0; } -.mentionIcon, -.mentionTrailing { - display: inline-flex; - align-items: center; - flex-shrink: 0; +.task-item[data-checked="true"] > .task-content { + color: var(--rs-color-foreground-base-tertiary); + text-decoration: line-through; +} + +.content blockquote { + padding-left: var(--rs-space-4); + border-left: 2px solid var(--rs-color-border-base-primary); color: var(--rs-color-foreground-base-secondary); } -/* The slots are portal targets and stay in the DOM even with nothing in them. */ -.mentionIcon:empty, -.mentionTrailing:empty { +.content pre { + padding: var(--rs-space-3) var(--rs-space-4); + border-radius: var(--rs-radius-2); + background: var(--rs-color-background-base-secondary); + overflow-x: auto; + white-space: pre; +} + +.content code { + font-family: var(--rs-font-mono); + font-size: var(--rs-font-size-mono-small); + line-height: var(--rs-line-height-mono-small); + letter-spacing: var(--rs-letter-spacing-mono-small); +} + +.content :not(pre) > code { + padding: 0 var(--rs-space-1); + border-radius: var(--rs-radius-1); + background: var(--rs-color-background-base-secondary); +} + +.content a { + color: var(--rs-color-foreground-accent-primary); + text-decoration: underline; + text-underline-offset: 2px; + cursor: text; +} + +.content hr { + margin-top: var(--rs-space-4); + margin-bottom: var(--rs-space-4); + border: none; + border-top: 1px solid var(--rs-color-border-base-primary); +} + +.content hr:global(.ProseMirror-selectednode) { + border-top-color: var(--rs-color-border-accent-emphasis); +} + +/* The gap cursor rules from prosemirror-gapcursor's stylesheet, which the + editor does not load. */ +.content :global(.ProseMirror-gapcursor) { display: none; + position: absolute; + pointer-events: none; } -.mentionIcon > svg, -.mentionTrailing > svg { - width: var(--rs-space-4); - height: var(--rs-space-4); +.content :global(.ProseMirror-gapcursor)::after { + content: ""; + display: block; + position: absolute; + top: -2px; + width: var(--rs-space-5); + border-top: 1px solid var(--rs-color-foreground-base-primary); } -/* NodeSelection: clicking a chip selects it as one unit. */ -.mention[data-selected] { - outline: var(--rs-focus-ring); - outline-offset: 1px; +.content:global(.ProseMirror-focused) :global(.ProseMirror-gapcursor) { + display: block; } -.editor[data-disabled] .mention { - opacity: 0.7; +.drop-cursor { + background: var(--rs-color-border-accent-emphasis); } -/* Suggestion menu. Positioned at the caret but sized to the composer: a caret - is a zero-width anchor, so `--anchor-width` is useless and the width has to - be stated. The guards keep it usable in narrow panels and wide layouts. */ -.suggestionMenu { - box-sizing: border-box; - width: var(--suggestion-menu-width, 20rem); - min-width: 240px; - max-width: min(var(--available-width), 420px); - max-height: 320px; - overflow-y: auto; - padding: var(--rs-space-2); +/* The typed `/query` reads as a pending command while the menu is open. */ +.slash-query { + border-radius: var(--rs-radius-1); + box-shadow: inset 0 0 0 1px var(--rs-color-border-base-primary); } -.suggestionGroup + .suggestionGroup { - margin-top: var(--rs-space-2); +/* ---- Toolbars ---- */ + +.toolbar { + flex-wrap: wrap; } -.suggestionGroupLabel { - padding: var(--rs-space-2) var(--rs-space-3); - color: var(--rs-color-foreground-base-tertiary); - font-size: var(--rs-font-size-mini); - line-height: var(--rs-line-height-mini); - letter-spacing: var(--rs-letter-spacing-mini); - font-weight: var(--rs-font-weight-medium); +/* A pressed toggle is filled, like a pressed Toggle. */ +.control[aria-pressed="true"] { + background-color: var(--rs-color-background-neutral-secondary); } -.suggestionRow { - cursor: pointer; +.control[aria-pressed="true"]:hover { + background-color: var(--rs-color-background-neutral-secondary-hover); +} + +.floating-popup { + min-width: 0; + max-width: none; + padding: 0; +} + +.floating-toolbar { + border: none; +} + +.tooltip { + display: inline-flex; + align-items: center; + gap: var(--rs-space-3); +} + +.shortcut-keys { + flex-shrink: 0; +} + +.menu { + min-width: 200px; } -.suggestionEmpty { - padding: var(--rs-space-3); +.menu-chevron { + width: var(--rs-space-3); + height: var(--rs-space-3); + margin-left: calc(var(--rs-space-1) * -1); color: var(--rs-color-foreground-base-tertiary); } -.suggestionLoadingRow { - padding: var(--rs-space-3); +.menu-trailing { + display: inline-flex; + align-items: center; + gap: var(--rs-space-3); +} + +.menu-check { + visibility: hidden; +} + +.menu-check[data-visible] { + visibility: visible; +} + +/* ---- Link ---- */ + +.link-popover { + padding: var(--rs-space-1); + max-width: none; +} + +.link-form { + display: flex; + align-items: center; + gap: var(--rs-space-1); + padding: var(--rs-space-1); + min-width: 280px; +} + +.link-form > :first-child { + flex: 1; } diff --git a/packages/raystack/components/editor/editor.tsx b/packages/raystack/components/editor/editor.tsx new file mode 100644 index 000000000..b3880859d --- /dev/null +++ b/packages/raystack/components/editor/editor.tsx @@ -0,0 +1,28 @@ +'use client'; + +import { EditorBlockButton } from './editor-block-button'; +import { EditorContent } from './editor-content'; +import { EditorFloatingToolbar } from './editor-floating-toolbar'; +import { EditorHeadingMenu } from './editor-heading-menu'; +import { EditorHistoryButton } from './editor-history-button'; +import { EditorLinkButton } from './editor-link-button'; +import { EditorListMenu } from './editor-list-menu'; +import { EditorMarkButton } from './editor-mark-button'; +import { EditorMentions } from './editor-mentions'; +import { EditorRoot } from './editor-root'; +import { EditorSlashMenu } from './editor-slash-menu'; +import { EditorToolbar } from './editor-toolbar'; + +export const Editor = Object.assign(EditorRoot, { + Content: EditorContent, + Toolbar: EditorToolbar, + FloatingToolbar: EditorFloatingToolbar, + MarkButton: EditorMarkButton, + BlockButton: EditorBlockButton, + HeadingMenu: EditorHeadingMenu, + ListMenu: EditorListMenu, + LinkButton: EditorLinkButton, + HistoryButton: EditorHistoryButton, + SlashMenu: EditorSlashMenu, + Mentions: EditorMentions +}); diff --git a/packages/raystack/components/editor/index.ts b/packages/raystack/components/editor/index.ts deleted file mode 100644 index 4e9491cf2..000000000 --- a/packages/raystack/components/editor/index.ts +++ /dev/null @@ -1,41 +0,0 @@ -export { default as editorStyles } from './editor.module.css'; -export { - deriveDocDetails, - docFromMarkup, - docFromText, - type EditorDocDetails, - isDocEmpty, - serializeMarkup, - serializeText -} from './markup'; -// ProseMirror-free, so `PromptInput`'s root, textarea and mention registry can -// import straight from here without dragging the engine into their graph. -export { - type EditorMention, - isTriggerCharacter, - type MentionAttrs, - mentionKey, - serializeMention, - trimDetails -} from './mention'; -export type { MentionPortal } from './mention-node-view'; -export { editorSchema } from './schema'; -export { - type SuggestionAnchor, - type SuggestionGroup, - SuggestionMenu, - type SuggestionMenuItem, - type SuggestionMenuProps, - suggestionOptionId -} from './suggestion-menu'; -export { - dismissSuggestion, - insertMention, - type SuggestionState -} from './suggestion-plugin'; -export { - type EditorActions, - type UseEditorOptions, - type UseEditorResult, - useEditor -} from './use-editor'; diff --git a/packages/raystack/components/editor/index.tsx b/packages/raystack/components/editor/index.tsx new file mode 100644 index 000000000..0836a9171 --- /dev/null +++ b/packages/raystack/components/editor/index.tsx @@ -0,0 +1,42 @@ +export { type EditorBlock, editorCommands } from './core/commands'; +export type { EditorJSON } from './core/json'; +export type { EditorMention } from './core/mention'; +export type { + EditorMentionItem, + EditorMentionRef +} from './core/mention-registry'; +export type { + EditorFormat, + EditorHeadingLevel, + EditorList, + EditorMark +} from './core/schema'; +export { editorToHTML, editorToText } from './core/serializers'; +export { + defaultShortcuts, + type EditorAction, + type EditorShortcuts +} from './core/shortcuts'; +export { Editor } from './editor'; +export type { EditorBlockButtonProps } from './editor-block-button'; +export type { EditorContentProps } from './editor-content'; +export { useEditor, useEditorState } from './editor-context'; +export type { EditorFloatingToolbarProps } from './editor-floating-toolbar'; +export type { EditorHeadingMenuProps } from './editor-heading-menu'; +export type { EditorHistoryButtonProps } from './editor-history-button'; +export type { EditorLinkButtonProps } from './editor-link-button'; +export type { EditorListMenuProps } from './editor-list-menu'; +export type { EditorMarkButtonProps } from './editor-mark-button'; +export type { EditorMentionsProps } from './editor-mentions'; +export type { EditorProps } from './editor-root'; +export { defaultSlashItems } from './editor-slash-items'; +export type { EditorSlashMenuProps } from './editor-slash-menu'; +export type { EditorToolbarProps } from './editor-toolbar'; +export type { + EditorApi, + EditorChangeDetails, + EditorCommands, + EditorMarkdownChangeDetails, + EditorSlashItem +} from './editor-types'; +export { MarkdownAdapter, type MarkdownAdapterOptions } from './markdown'; diff --git a/packages/raystack/components/editor/markdown/from-markdown.ts b/packages/raystack/components/editor/markdown/from-markdown.ts new file mode 100644 index 000000000..b65ce0bed --- /dev/null +++ b/packages/raystack/components/editor/markdown/from-markdown.ts @@ -0,0 +1,330 @@ +import { + Marked, + type Token, + type TokenizerExtension, + type Tokens +} from 'marked'; +import type { EditorJSON } from '../core/json'; +import { isSafeHref } from '../core/link'; +import { type MentionAttrs, readMention } from '../core/mention'; + +type JSONMark = NonNullable
Promise;
- resolveMentions?: (
- refs: PromptInputMentionRef[]
- ) => Promise;
- onOpenChange?: (open: boolean) => void;
- emptyMessage?: ReactNode;
- loadingRowCount?: number;
-}
-
-export interface PromptInputMentionsConfig extends PromptInputMentionsData {
- trigger: string;
-}
-
-function sameData(
- a: PromptInputMentionsData,
- b: PromptInputMentionsData
-): boolean {
- return (
- a.items === b.items &&
- a.onSearch === b.onSearch &&
- a.resolveMentions === b.resolveMentions &&
- a.onOpenChange === b.onOpenChange &&
- a.emptyMessage === b.emptyMessage &&
- a.loadingRowCount === b.loadingRowCount
- );
-}
-
-/**
- * Shared between `Mentions` (which writes the config), `Editor` (which reads
- * triggers, drives the menu and decorates chips) and Root (which reads `data`
- * back when assembling a message).
- *
- * `icon`, `trailing` and `data` cannot survive serialization, so they live here
- * rather than on the document, keyed by `trigger|type|id` and filled in when an
- * item is picked from the menu or returned by `resolveMentions`.
- *
- * Registration is split from data on purpose. The trigger is established once,
- * while the data is pushed after every `Mentions` render and compared field by
- * field, so an inline `items` array stays live without a config object whose
- * identity churns and restarts an in-flight search.
- */
-export class PromptInputMentionRegistry {
- private configs = new Map();
- private items = new Map();
- private listeners = new Set<() => void>();
- private revision = 0;
-
- register(trigger: string): () => void {
- if (!this.configs.has(trigger)) {
- this.configs.set(trigger, { trigger });
- this.emit();
- }
- return () => {
- if (this.configs.delete(trigger)) this.emit();
- };
- }
-
- setData(trigger: string, data: PromptInputMentionsData): void {
- const current = this.configs.get(trigger);
- if (!current || sameData(current, data)) return;
- this.configs.set(trigger, { trigger, ...data });
- this.emit();
- }
-
- get(trigger: string): PromptInputMentionsConfig | undefined {
- return this.configs.get(trigger);
- }
-
- triggers(): string[] {
- return [...this.configs.keys()];
- }
-
- remember(trigger: string, item: PromptInputMentionItem): void {
- this.rememberAll(trigger, [item]);
- }
-
- rememberAll(trigger: string, items: PromptInputMentionItem[]): void {
- if (items.length === 0) return;
- for (const item of items) {
- const type = item.type ?? 'mention';
- this.items.set(mentionKey(trigger, type, item.id), { ...item, type });
- }
- this.emit();
- }
-
- lookup(
- trigger: string,
- type: string,
- id: string
- ): PromptInputMentionItem | undefined {
- return this.items.get(mentionKey(trigger, type, id));
- }
-
- has(trigger: string, type: string, id: string): boolean {
- return this.items.has(mentionKey(trigger, type, id));
- }
-
- subscribe = (listener: () => void): (() => void) => {
- this.listeners.add(listener);
- return () => {
- this.listeners.delete(listener);
- };
- };
-
- /**
- * Bumped by every mutation. Read as a `useSyncExternalStore` snapshot, so a
- * reader that mounts after a writer has already emitted still sees the
- * change, since `Mentions` registers its trigger in an effect that runs before a
- * later sibling `Editor` has subscribed.
- */
- getRevision = (): number => this.revision;
-
- private emit() {
- this.revision += 1;
- for (const listener of this.listeners) listener();
- }
-}
+export {
+ type EditorMentionItem as PromptInputMentionItem,
+ type EditorMentionRef as PromptInputMentionRef,
+ MentionRegistry as PromptInputMentionRegistry,
+ type MentionsData as PromptInputMentionsData
+} from '../editor/core/mention-registry';
diff --git a/packages/raystack/components/prompt-input/prompt-input-mentions.tsx b/packages/raystack/components/prompt-input/prompt-input-mentions.tsx
index ff8f16059..9a0473ad3 100644
--- a/packages/raystack/components/prompt-input/prompt-input-mentions.tsx
+++ b/packages/raystack/components/prompt-input/prompt-input-mentions.tsx
@@ -1,7 +1,7 @@
'use client';
import { type ReactNode, useEffect, useRef } from 'react';
-import { isTriggerCharacter } from '../editor/mention';
+import { isTriggerCharacter } from '../editor/core/mention';
import { usePromptInputContext } from './prompt-input-context';
import type {
PromptInputMentionItem,
diff --git a/packages/raystack/components/prompt-input/prompt-input-root.tsx b/packages/raystack/components/prompt-input/prompt-input-root.tsx
index 994577d54..8e5b11fe9 100644
--- a/packages/raystack/components/prompt-input/prompt-input-root.tsx
+++ b/packages/raystack/components/prompt-input/prompt-input-root.tsx
@@ -16,7 +16,7 @@ import {
} from 'react';
// Imported from the leaf module, not the barrel: the root must not pull the
// editor engine into a composer that only ever renders `Textarea`.
-import { trimDetails } from '../editor/mention';
+import { trimDetails } from '../editor/core/mention';
import styles from './prompt-input.module.css';
import {
isEmptyValue,
diff --git a/packages/raystack/components/prompt-input/use-mention-menu.ts b/packages/raystack/components/prompt-input/use-mention-menu.ts
index 5f11c4740..ea2fb7b5c 100644
--- a/packages/raystack/components/prompt-input/use-mention-menu.ts
+++ b/packages/raystack/components/prompt-input/use-mention-menu.ts
@@ -1,144 +1,35 @@
'use client';
-import { compareItems, rankItem } from '@tanstack/match-sorter-utils';
import type { EditorView } from 'prosemirror-view';
+import { useCallback } from 'react';
+import type { ComposerEditorActions } from '../editor/core/composer/use-composer-editor';
+import type { SuggestionState } from '../editor/core/suggestion-plugin';
import {
- useCallback,
- useEffect,
- useMemo,
- useRef,
- useState,
- useSyncExternalStore
-} from 'react';
-import {
- type EditorActions,
- type SuggestionAnchor,
- type SuggestionGroup,
- type SuggestionState,
- suggestionOptionId
-} from '../editor';
-import type { PromptInputMention } from './prompt-input-context';
+ type UseSuggestionMenuResult,
+ useMentionRegistryVersion,
+ useSuggestionMenu
+} from '../editor/core/use-suggestion-menu';
import type {
PromptInputMentionItem,
PromptInputMentionRegistry
} from './prompt-input-mention-registry';
-/** Long enough that a fast typist makes one request per word, not per letter. */
-const SEARCH_DEBOUNCE_MS = 150;
-
-const NO_ITEMS: PromptInputMentionItem[] = [];
-
-/**
- * Re-renders whatever reads the registry when a config or an item lands.
- * `useSyncExternalStore` rather than a subscribe-and-bump effect, because
- * `Mentions` registers its trigger from an effect that runs *before* a later
- * sibling `Editor` gets to subscribe, and the store re-reads its snapshot after
- * subscribing, so that first registration is never missed.
- */
-export function useMentionRegistryVersion(
- registry: PromptInputMentionRegistry
-): void {
- useSyncExternalStore(
- registry.subscribe,
- registry.getRevision,
- registry.getRevision
- );
-}
-
-/**
- * Groups render in first-appearance order of `group` within the results, so
- * consumers control section order by ordering their data. Ungrouped items lead
- * in a headerless section, and a group that filters down to nothing disappears.
- */
-export function toGroups(items: PromptInputMentionItem[]): SuggestionGroup[] {
- const ungrouped: PromptInputMentionItem[] = [];
- const order: string[] = [];
- const buckets = new Map();
-
- for (const item of items) {
- if (!item.group) {
- ungrouped.push(item);
- continue;
- }
- const bucket = buckets.get(item.group);
- if (bucket) {
- bucket.push(item);
- } else {
- buckets.set(item.group, [item]);
- order.push(item.group);
- }
- }
-
- const groups: SuggestionGroup[] = [];
- if (ungrouped.length) groups.push({ items: ungrouped });
- for (const label of order) {
- groups.push({ label, items: buckets.get(label) ?? [] });
- }
- return groups;
-}
-
-/** Sync data filtering: match-sorter on the label, best matches first. */
-export function filterItems(
- items: PromptInputMentionItem[],
- query: string
-): PromptInputMentionItem[] {
- if (!query) return items;
- const ranked = items
- .map(item => ({
- item,
- ranking: rankItem(item, query, {
- accessors: [entry => (entry as PromptInputMentionItem).label]
- })
- }))
- .filter(entry => entry.ranking.passed);
- ranked.sort((a, b) => compareItems(a.ranking, b.ranking));
- return ranked.map(entry => entry.item);
-}
-
-function firstEnabled(items: PromptInputMentionItem[]): number {
- const index = items.findIndex(item => !item.disabled);
- return index;
-}
-
-function step(
- items: PromptInputMentionItem[],
- from: number,
- direction: 1 | -1
-): number {
- if (items.length === 0) return -1;
- let index = from;
- for (let attempt = 0; attempt < items.length; attempt += 1) {
- index = (index + direction + items.length) % items.length;
- if (!items[index]?.disabled) return index;
- }
- return -1;
-}
-
export interface UseMentionMenuOptions {
viewRef: React.RefObject;
- actions: EditorActions;
+ actions: ComposerEditorActions;
registry: PromptInputMentionRegistry;
suggestion: SuggestionState | null;
disabled: boolean;
listboxId: string;
}
-export interface UseMentionMenuResult {
- open: boolean;
- anchor: SuggestionAnchor;
- groups: SuggestionGroup[];
- highlightedIndex: number;
- setHighlightedIndex: (index: number) => void;
- loading: boolean;
+export interface UseMentionMenuResult
+ extends UseSuggestionMenuResult {
loadingRowCount: number;
emptyMessage: React.ReactNode;
- select: (item: PromptInputMentionItem) => void;
- close: () => void;
- activeOptionId: string | undefined;
- /** Routed from the ProseMirror plugin while a query is active. */
- handleKeyDown: (event: KeyboardEvent, state: SuggestionState) => boolean;
}
+/** One menu for every registered trigger, driven by that trigger's config. */
export function useMentionMenu({
viewRef,
actions,
@@ -152,130 +43,8 @@ export function useMentionMenu({
const config = suggestion ? registry.get(suggestion.trigger) : undefined;
const open = !disabled && suggestion !== null && config !== undefined;
- const suggestionRef = useRef(suggestion);
- suggestionRef.current = suggestion;
-
- const [results, setResults] = useState(NO_ITEMS);
- const [loading, setLoading] = useState(false);
- const [highlightedIndex, setHighlightedIndex] = useState(-1);
-
- const trigger = suggestion?.trigger;
- const query = suggestion?.query ?? '';
- // Depended on individually rather than through `config`, so a changed
- // `emptyMessage` cannot restart an in-flight search.
- const search = config?.onSearch;
- const syncItems = config?.items;
-
- // Async results: debounced, aborted on supersede, and guarded by a sequence
- // number so a slow response for an old query can never land.
- const sequenceRef = useRef(0);
- const warnedRef = useRef(false);
-
- useEffect(() => {
- if (!open || trigger === undefined) {
- setResults(NO_ITEMS);
- setLoading(false);
- return;
- }
-
- if (!search) {
- setLoading(false);
- setResults(filterItems(syncItems ?? NO_ITEMS, query));
- return;
- }
-
- const sequence = (sequenceRef.current += 1);
- const controller = new AbortController();
- setLoading(true);
-
- const timer = window.setTimeout(() => {
- search(query, { trigger, signal: controller.signal })
- .then(items => {
- if (sequence !== sequenceRef.current) return;
- setResults(items);
- setLoading(false);
- })
- .catch((error: unknown) => {
- if (sequence !== sequenceRef.current) return;
- setLoading(false);
- setResults(NO_ITEMS);
- const aborted =
- controller.signal.aborted ||
- (error instanceof Error && error.name === 'AbortError');
- if (
- !aborted &&
- !warnedRef.current &&
- process.env.NODE_ENV !== 'production'
- ) {
- warnedRef.current = true;
- console.warn(
- '[Apsara] PromptInput.Mentions onSearch rejected; the menu falls ' +
- 'back to its empty state.',
- error
- );
- }
- });
- }, SEARCH_DEBOUNCE_MS);
-
- return () => {
- window.clearTimeout(timer);
- controller.abort();
- };
- }, [open, trigger, query, search, syncItems]);
-
- const groups = useMemo(() => toGroups(results), [results]);
- const flat = useMemo(() => groups.flatMap(group => group.items), [groups]);
- const flatRef = useRef(flat);
- flatRef.current = flat;
-
- // The first enabled row is auto-highlighted whenever the result set changes.
- // Keyed on what the rows *are* rather than on the array's identity: an inline
- // `items={[…]}` prop is a fresh array on every consumer render, and resetting
- // on identity would throw away the user's arrow-key position whenever
- // something unrelated re-rendered above the composer.
- const rowSignature = useMemo(
- () =>
- flat
- .map(item => `${item.type ?? ''}:${item.id}:${item.disabled ? 1 : 0}`)
- .join('\0'),
- [flat]
- );
- // biome-ignore lint/correctness/useExhaustiveDependencies: the signature is the trigger; the rows are read through a ref
- useEffect(() => {
- setHighlightedIndex(firstEnabled(flatRef.current));
- }, [rowSignature]);
-
- // Held past the config that supplied it: closing clears the active trigger,
- // so reading the callback off the live config would swallow the `false`.
- const onOpenChangeRef = useRef<((open: boolean) => void) | undefined>(
- undefined
- );
- if (config?.onOpenChange) onOpenChangeRef.current = config.onOpenChange;
- const lastOpenRef = useRef(false);
- useEffect(() => {
- if (lastOpenRef.current === open) return;
- lastOpenRef.current = open;
- onOpenChangeRef.current?.(open);
- }, [open]);
-
- const close = useCallback(() => {
- actions.dismissSuggestion();
- }, [actions]);
-
- // Spaces are allowed while results are non-empty, so multi-word entities stay
- // filterable. The first keystroke that empties the results while the query
- // already contains a space gives up and leaves the text literal.
- useEffect(() => {
- if (!open || loading) return;
- if (results.length > 0) return;
- if (!query.includes(' ')) return;
- close();
- }, [open, loading, results.length, query, close]);
-
const select = useCallback(
- (item: PromptInputMentionItem) => {
- const state = suggestionRef.current;
- if (!state) return;
+ (item: PromptInputMentionItem, state: SuggestionState) => {
const type = item.type ?? 'mention';
registry.remember(state.trigger, { ...item, type });
actions.insertMention(
@@ -291,177 +60,22 @@ export function useMentionMenu({
[actions, registry]
);
- // The last rect the caret actually had. Selecting an item takes the query
- // range out of the document in the same breath as it closes the menu, but the
- // popup is still animating out and the positioner keeps measuring. Without
- // something to hand back, it would read a zero rect and the closing menu
- // would jump to the top-left corner of the viewport and flicker there.
- const lastRectRef = useRef(null);
-
- const anchor = useMemo(
- () => ({
- get contextElement() {
- return viewRef.current?.dom;
- },
- getBoundingClientRect: () => {
- const view = viewRef.current;
- const state = suggestionRef.current;
- if (view && state) {
- try {
- const coords = view.coordsAtPos(state.from);
- const rect = new DOMRect(
- coords.left,
- coords.top,
- 0,
- Math.max(0, coords.bottom - coords.top)
- );
- lastRectRef.current = rect;
- return rect;
- } catch {
- // The range is gone, or the browser is mid-relayout.
- }
- }
- // jsdom has no geometry to give either, and no animation to cover.
- return lastRectRef.current ?? new DOMRect(0, 0, 0, 0);
- }
- }),
- [viewRef]
- );
-
- const highlightedRef = useRef(highlightedIndex);
- highlightedRef.current = highlightedIndex;
- const openRef = useRef(open);
- openRef.current = open;
-
- const handleKeyDown = useCallback(
- (event: KeyboardEvent) => {
- if (!openRef.current) return false;
-
- const items = flatRef.current;
- const current = highlightedRef.current;
-
- const consume = () => {
- event.preventDefault();
- // Enter must not reach the form and Escape must not reach ChatPanel,
- // Dialog or Drawer, either of which would destroy the draft.
- event.stopPropagation();
- };
-
- switch (event.key) {
- case 'ArrowDown':
- consume();
- setHighlightedIndex(step(items, current, 1));
- return true;
- case 'ArrowUp':
- consume();
- setHighlightedIndex(step(items, current, -1));
- return true;
- case 'Escape':
- consume();
- close();
- return true;
- case 'Enter':
- case 'Tab': {
- const item = items[current];
- if (!item || item.disabled) {
- // Nothing to pick: leave the text literal and let the key through
- // to submit or to move focus.
- close();
- return false;
- }
- consume();
- select(item);
- return true;
- }
- default:
- return false;
- }
- },
- [close, select]
- );
+ const menu = useSuggestionMenu({
+ getView: () => viewRef.current,
+ suggestion,
+ open,
+ items: config?.items,
+ onSearch: config?.onSearch,
+ onSelect: select,
+ dismiss: actions.dismissSuggestion,
+ onOpenChange: config?.onOpenChange,
+ listboxId,
+ name: 'PromptInput.Mentions'
+ });
return {
- open,
- anchor,
- groups,
- highlightedIndex,
- setHighlightedIndex,
- loading,
+ ...menu,
loadingRowCount: config?.loadingRowCount ?? 3,
- emptyMessage: config?.emptyMessage ?? 'No results',
- select,
- close,
- activeOptionId:
- open && highlightedIndex >= 0
- ? suggestionOptionId(listboxId, highlightedIndex)
- : undefined,
- handleKeyDown
+ emptyMessage: config?.emptyMessage ?? 'No results'
};
}
-
-/**
- * `icon`, `trailing` and `data` cannot survive serialization, so a chip parsed
- * from `defaultValue` starts label-only and fills in when the consumer's
- * `resolveMentions` resolves, the same progressive enhancement `Select.Value`
- * uses when it falls back to the raw value until an item registers. A rejection
- * or a missing item leaves the chip label-only; it is never an error state and
- * the chip is never removed.
- */
-export function useMentionResolution(
- registry: PromptInputMentionRegistry,
- mentions: PromptInputMention[],
- actions: EditorActions
-): void {
- const requestedRef = useRef(new Set());
- const actionsRef = useRef(actions);
- actionsRef.current = actions;
-
- useEffect(() => {
- if (mentions.length === 0) return;
-
- const byTrigger = new Map<
- string,
- Array<{ type: string; id: string; label: string }>
- >();
-
- for (const mention of mentions) {
- const key = `${mention.trigger}|${mention.type}|${mention.id}`;
- if (requestedRef.current.has(key)) continue;
- if (registry.has(mention.trigger, mention.type, mention.id)) continue;
- const config = registry.get(mention.trigger);
- if (!config?.resolveMentions) continue;
- requestedRef.current.add(key);
- const bucket = byTrigger.get(mention.trigger);
- const ref = {
- type: mention.type,
- id: mention.id,
- label: mention.label
- };
- if (bucket) bucket.push(ref);
- else byTrigger.set(mention.trigger, [ref]);
- }
-
- if (byTrigger.size === 0) return;
-
- for (const [trigger, refs] of byTrigger) {
- const resolve = registry.get(trigger)?.resolveMentions;
- if (!resolve) continue;
- resolve(refs)
- .then(items => {
- if (items.length === 0) return;
- registry.rememberAll(trigger, items);
- const labels = new Map();
- for (const item of items) {
- labels.set(
- `${trigger}|${item.type ?? 'mention'}|${item.id}`,
- item.label
- );
- }
- actionsRef.current.refreshMentionLabels(labels);
- })
- .catch(() => {
- // Label-only is the fallback, so there is nothing to recover.
- });
- }
- }, [registry, mentions]);
-}
diff --git a/packages/raystack/icons/icons.tsx b/packages/raystack/icons/icons.tsx
index 68470038f..926ad1fb1 100644
--- a/packages/raystack/icons/icons.tsx
+++ b/packages/raystack/icons/icons.tsx
@@ -8,6 +8,7 @@ import {
ArrowDownWideNarrow,
ArrowUp,
ArrowUpNarrowWide,
+ Bold,
CalendarDays,
Check,
ChevronDown,
@@ -15,25 +16,43 @@ import {
ChevronRight,
CircleCheck,
CircleX,
+ Code,
Copy,
Ellipsis,
Expand,
+ ExternalLink,
FileText,
+ Heading1,
+ Heading2,
+ Heading3,
+ Heading4,
Info,
+ Italic,
+ Link,
+ List,
ListFilter,
+ ListOrdered,
+ ListTodo,
Minus,
Moon,
PanelLeft,
Plus,
+ Redo2,
Search,
Shrink,
SlidersHorizontal,
Sparkles,
Square,
+ SquareCode,
+ Strikethrough,
Sun,
Table,
+ TextQuote,
TriangleAlert,
+ Type,
+ Underline,
Undo2,
+ Unlink,
X
} from 'lucide-react';
import { createIcon } from './create-icon';
@@ -43,12 +62,17 @@ export const ArrowDownIcon = /*#__PURE__*/ createIcon(
ArrowDown
);
export const ArrowUpIcon = /*#__PURE__*/ createIcon('ArrowUpIcon', ArrowUp);
+export const BoldIcon = /*#__PURE__*/ createIcon('BoldIcon', Bold);
/** Draws lucide `CalendarDays`, not lucide `Calendar`. */
export const CalendarIcon = /*#__PURE__*/ createIcon(
'CalendarIcon',
CalendarDays
);
export const CheckIcon = /*#__PURE__*/ createIcon('CheckIcon', Check);
+export const ChecklistIcon = /*#__PURE__*/ createIcon(
+ 'ChecklistIcon',
+ ListTodo
+);
export const ChevronDownIcon = /*#__PURE__*/ createIcon(
'ChevronDownIcon',
ChevronDown
@@ -65,6 +89,11 @@ export const ChevronRightIcon = /*#__PURE__*/ createIcon(
export const ClearIcon = /*#__PURE__*/ createIcon('ClearIcon', CircleX);
/** Marks an AI affordance. The ChatPanel trigger draws it. */
export const CoPilotIcon = /*#__PURE__*/ createIcon('CoPilotIcon', Sparkles);
+export const CodeBlockIcon = /*#__PURE__*/ createIcon(
+ 'CodeBlockIcon',
+ SquareCode
+);
+export const CodeIcon = /*#__PURE__*/ createIcon('CodeIcon', Code);
export const CopyIcon = /*#__PURE__*/ createIcon('CopyIcon', Copy);
export const DisplayIcon = /*#__PURE__*/ createIcon(
'DisplayIcon',
@@ -74,16 +103,33 @@ export const EllipsisIcon = /*#__PURE__*/ createIcon('EllipsisIcon', Ellipsis);
/** The error status of a Toast. Shares a drawing with `ClearIcon`. */
export const ErrorIcon = /*#__PURE__*/ createIcon('ErrorIcon', CircleX);
export const ExpandIcon = /*#__PURE__*/ createIcon('ExpandIcon', Expand);
+export const ExternalLinkIcon = /*#__PURE__*/ createIcon(
+ 'ExternalLinkIcon',
+ ExternalLink
+);
export const FileTextIcon = /*#__PURE__*/ createIcon('FileTextIcon', FileText);
export const FilterIcon = /*#__PURE__*/ createIcon('FilterIcon', ListFilter);
+export const Heading1Icon = /*#__PURE__*/ createIcon('Heading1Icon', Heading1);
+export const Heading2Icon = /*#__PURE__*/ createIcon('Heading2Icon', Heading2);
+export const Heading3Icon = /*#__PURE__*/ createIcon('Heading3Icon', Heading3);
+export const Heading4Icon = /*#__PURE__*/ createIcon('Heading4Icon', Heading4);
export const InfoIcon = /*#__PURE__*/ createIcon('InfoIcon', Info);
+export const ItalicIcon = /*#__PURE__*/ createIcon('ItalicIcon', Italic);
+export const LinkIcon = /*#__PURE__*/ createIcon('LinkIcon', Link);
+export const ListIcon = /*#__PURE__*/ createIcon('ListIcon', List);
export const MinusIcon = /*#__PURE__*/ createIcon('MinusIcon', Minus);
export const MoonIcon = /*#__PURE__*/ createIcon('MoonIcon', Moon);
+export const NumberedListIcon = /*#__PURE__*/ createIcon(
+ 'NumberedListIcon',
+ ListOrdered
+);
export const PanelLeftIcon = /*#__PURE__*/ createIcon(
'PanelLeftIcon',
PanelLeft
);
export const PlusIcon = /*#__PURE__*/ createIcon('PlusIcon', Plus);
+export const QuoteIcon = /*#__PURE__*/ createIcon('QuoteIcon', TextQuote);
+export const RedoIcon = /*#__PURE__*/ createIcon('RedoIcon', Redo2);
export const SearchIcon = /*#__PURE__*/ createIcon('SearchIcon', Search);
export const ShrinkIcon = /*#__PURE__*/ createIcon('ShrinkIcon', Shrink);
export const SortAscendingIcon = /*#__PURE__*/ createIcon(
@@ -95,11 +141,22 @@ export const SortDescendingIcon = /*#__PURE__*/ createIcon(
ArrowDownWideNarrow
);
export const StopIcon = /*#__PURE__*/ createIcon('StopIcon', Square);
+export const StrikethroughIcon = /*#__PURE__*/ createIcon(
+ 'StrikethroughIcon',
+ Strikethrough
+);
export const SuccessIcon = /*#__PURE__*/ createIcon('SuccessIcon', CircleCheck);
export const SunIcon = /*#__PURE__*/ createIcon('SunIcon', Sun);
export const TableIcon = /*#__PURE__*/ createIcon('TableIcon', Table);
+/** Regular text, in the editor's text style menu. */
+export const TextIcon = /*#__PURE__*/ createIcon('TextIcon', Type);
+export const UnderlineIcon = /*#__PURE__*/ createIcon(
+ 'UnderlineIcon',
+ Underline
+);
/** Restores a value to its default — the calendar's reset. */
export const UndoIcon = /*#__PURE__*/ createIcon('UndoIcon', Undo2);
+export const UnlinkIcon = /*#__PURE__*/ createIcon('UnlinkIcon', Unlink);
export const WarningIcon = /*#__PURE__*/ createIcon(
'WarningIcon',
TriangleAlert
diff --git a/packages/raystack/index.tsx b/packages/raystack/index.tsx
index 0b7fe4d51..2d17fe857 100644
--- a/packages/raystack/index.tsx
+++ b/packages/raystack/index.tsx
@@ -114,6 +114,46 @@ export {
} from './components/data-view';
export { Dialog } from './components/dialog';
export { Drawer } from './components/drawer';
+export {
+ defaultShortcuts,
+ defaultSlashItems,
+ Editor,
+ type EditorAction,
+ type EditorApi,
+ type EditorBlock,
+ type EditorBlockButtonProps,
+ type EditorChangeDetails,
+ type EditorCommands,
+ type EditorContentProps,
+ type EditorFloatingToolbarProps,
+ type EditorFormat,
+ type EditorHeadingLevel,
+ type EditorHeadingMenuProps,
+ type EditorHistoryButtonProps,
+ type EditorJSON,
+ type EditorLinkButtonProps,
+ type EditorList,
+ type EditorListMenuProps,
+ type EditorMark,
+ type EditorMarkButtonProps,
+ type EditorMarkdownChangeDetails,
+ type EditorMention,
+ type EditorMentionItem,
+ type EditorMentionRef,
+ type EditorMentionsProps,
+ type EditorProps,
+ type EditorShortcuts,
+ type EditorSlashItem,
+ type EditorSlashMenuProps,
+ type EditorToolbarProps,
+ editorCommands,
+ editorToHTML,
+ editorToText,
+ MarkdownAdapter,
+ type MarkdownAdapterOptions,
+ useEditor,
+ useEditorState
+} from './components/editor';
export { EmptyState } from './components/empty-state';
export { Field } from './components/field';
export { Fieldset } from './components/fieldset';
diff --git a/packages/raystack/package.json b/packages/raystack/package.json
index 6cf1710fa..448a3bc2c 100644
--- a/packages/raystack/package.json
+++ b/packages/raystack/package.json
@@ -132,12 +132,18 @@
"culori": "^4.0.2",
"date-fns": "^4.1.0",
"dayjs": "^1.11.23",
+ "marked": "^18.0.14",
"prism-react-renderer": "^2.4.1",
"prosemirror-commands": "^1.7.1",
+ "prosemirror-dropcursor": "^1.8.4",
+ "prosemirror-gapcursor": "^1.4.1",
"prosemirror-history": "^1.4.1",
+ "prosemirror-inputrules": "^1.5.1",
"prosemirror-keymap": "^1.2.2",
"prosemirror-model": "^1.25.1",
+ "prosemirror-schema-list": "^1.5.1",
"prosemirror-state": "^1.4.3",
+ "prosemirror-transform": "^1.12.1",
"prosemirror-view": "^1.40.0",
"react-day-picker": "~10.0.1"
},
diff --git a/packages/raystack/vitest.setup.ts b/packages/raystack/vitest.setup.ts
index 7693f2984..bdd8265a4 100644
--- a/packages/raystack/vitest.setup.ts
+++ b/packages/raystack/vitest.setup.ts
@@ -1,52 +1,55 @@
import '@testing-library/jest-dom/vitest';
-// Polyfill ResizeObserver for tests
-global.ResizeObserver = class ResizeObserver {
- observe() {}
- unobserve() {}
- disconnect() {}
-};
+// A test that sets `@vitest-environment node` has no DOM to polyfill.
+if (typeof window !== 'undefined') {
+ // Polyfill ResizeObserver for tests
+ global.ResizeObserver = class ResizeObserver {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ };
-const emptyRectList = () => [] as unknown as DOMRectList;
+ const emptyRectList = () => [] as unknown as DOMRectList;
-if (!Range.prototype.getClientRects) {
- Range.prototype.getClientRects = emptyRectList;
-}
-if (!Range.prototype.getBoundingClientRect) {
- Range.prototype.getBoundingClientRect = () => new DOMRect(0, 0, 0, 0);
-}
-if (!Element.prototype.getClientRects) {
- Element.prototype.getClientRects = emptyRectList;
-}
-if (!document.elementFromPoint) {
- document.elementFromPoint = () => null;
-}
+ if (!Range.prototype.getClientRects) {
+ Range.prototype.getClientRects = emptyRectList;
+ }
+ if (!Range.prototype.getBoundingClientRect) {
+ Range.prototype.getBoundingClientRect = () => new DOMRect(0, 0, 0, 0);
+ }
+ if (!Element.prototype.getClientRects) {
+ Element.prototype.getClientRects = emptyRectList;
+ }
+ if (!document.elementFromPoint) {
+ document.elementFromPoint = () => null;
+ }
-// Polyfill PointerEvent for tests (required by @base-ui/react)
-if (typeof global.PointerEvent === 'undefined') {
- class PointerEvent extends MouseEvent {
- readonly pointerId: number;
- readonly width: number;
- readonly height: number;
- readonly pressure: number;
- readonly tiltX: number;
- readonly tiltY: number;
- readonly pointerType: string;
- readonly isPrimary: boolean;
+ // Polyfill PointerEvent for tests (required by @base-ui/react)
+ if (typeof global.PointerEvent === 'undefined') {
+ class PointerEvent extends MouseEvent {
+ readonly pointerId: number;
+ readonly width: number;
+ readonly height: number;
+ readonly pressure: number;
+ readonly tiltX: number;
+ readonly tiltY: number;
+ readonly pointerType: string;
+ readonly isPrimary: boolean;
- constructor(type: string, params: PointerEventInit = {}) {
- super(type, params);
- this.pointerId = params.pointerId ?? 0;
- this.width = params.width ?? 1;
- this.height = params.height ?? 1;
- this.pressure = params.pressure ?? 0;
- this.tiltX = params.tiltX ?? 0;
- this.tiltY = params.tiltY ?? 0;
- this.pointerType = params.pointerType ?? '';
- this.isPrimary = params.isPrimary ?? false;
+ constructor(type: string, params: PointerEventInit = {}) {
+ super(type, params);
+ this.pointerId = params.pointerId ?? 0;
+ this.width = params.width ?? 1;
+ this.height = params.height ?? 1;
+ this.pressure = params.pressure ?? 0;
+ this.tiltX = params.tiltX ?? 0;
+ this.tiltY = params.tiltY ?? 0;
+ this.pointerType = params.pointerType ?? '';
+ this.isPrimary = params.isPrimary ?? false;
+ }
}
- }
- global.PointerEvent =
- PointerEvent as unknown as typeof globalThis.PointerEvent;
+ global.PointerEvent =
+ PointerEvent as unknown as typeof globalThis.PointerEvent;
+ }
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 89c89b12e..0f3a6f9cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -202,24 +202,42 @@ importers:
dayjs:
specifier: ^1.11.23
version: 1.11.23
+ marked:
+ specifier: ^18.0.14
+ version: 18.0.14
prism-react-renderer:
specifier: ^2.4.1
version: 2.4.1(react@19.2.1)
prosemirror-commands:
specifier: ^1.7.1
version: 1.7.1
+ prosemirror-dropcursor:
+ specifier: ^1.8.4
+ version: 1.8.4
+ prosemirror-gapcursor:
+ specifier: ^1.4.1
+ version: 1.4.1
prosemirror-history:
specifier: ^1.4.1
version: 1.5.0
+ prosemirror-inputrules:
+ specifier: ^1.5.1
+ version: 1.5.1
prosemirror-keymap:
specifier: ^1.2.2
version: 1.2.3
prosemirror-model:
specifier: ^1.25.1
version: 1.25.11
+ prosemirror-schema-list:
+ specifier: ^1.5.1
+ version: 1.5.1
prosemirror-state:
specifier: ^1.4.3
version: 1.4.4
+ prosemirror-transform:
+ specifier: ^1.12.1
+ version: 1.12.1
prosemirror-view:
specifier: ^1.40.0
version: 1.42.2
@@ -4268,6 +4286,11 @@ packages:
markdown-table@3.0.4:
resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+ marked@18.0.14:
+ resolution: {integrity: sha512-mBHK6FBHuBAlhgRe88w9F0O1AbwwXJUcQibUbC/QcdTbVGAD7aWza+xt3N6oT/jCZx3/OMeS+8rnuiHZcQ9s7A==}
+ engines: {node: '>= 20'}
+ hasBin: true
+
math-intrinsics@1.1.0:
resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
engines: {node: '>= 0.4'}
@@ -5084,20 +5107,32 @@ packages:
prosemirror-commands@1.7.1:
resolution: {integrity: sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==}
+ prosemirror-dropcursor@1.8.4:
+ resolution: {integrity: sha512-VmKxhcA6a+h5oPSYmfF1ZNeQqPbyYaIxqZsKqeYCyTlPtrjUgNaHL3P8vVaO19oqAV0zuaM/axkowZHrB1P3Tg==}
+
+ prosemirror-gapcursor@1.4.1:
+ resolution: {integrity: sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==}
+
prosemirror-history@1.5.0:
resolution: {integrity: sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==}
+ prosemirror-inputrules@1.5.1:
+ resolution: {integrity: sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==}
+
prosemirror-keymap@1.2.3:
resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
prosemirror-model@1.25.11:
resolution: {integrity: sha512-QWg9RhnpLlogAmp3p96uEFrE5txQpFynd4vhBAELkwgOCWQs/X0yCzB3/hrHqiPwf91RG5KyWq6553zs9JqIOQ==}
+ prosemirror-schema-list@1.5.1:
+ resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==}
+
prosemirror-state@1.4.4:
resolution: {integrity: sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==}
- prosemirror-transform@1.12.0:
- resolution: {integrity: sha512-GxboyN4AMIsoHNtz5uf2r2Ru551i5hWeCMD6E2Ib4Eogqoub0NflniaBPVQ4MrGE5yZ8JV9tUHg9qcZTTrcN4w==}
+ prosemirror-transform@1.12.1:
+ resolution: {integrity: sha512-t4F5615FycnCqsX7ShTUs8+jfnwcf46kuFRvSl/3qFx2QTZ4DjgowesLHQXcFP7G//TjesqZG3WtgL7vdyVJyA==}
prosemirror-view@1.42.2:
resolution: {integrity: sha512-Pdg0l5kXm8aLDquFAnQFTCITg0q44sLqBlHlpsVLD9segdOao8TOfQdAhCrCXyVgPSRr6UDDROOIWA3bIrN9YQ==}
@@ -9623,7 +9658,7 @@ snapshots:
optionalDependencies:
next: 16.0.7(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
react: 19.2.1
- vite: 7.1.3(@types/node@24.10.0)
+ vite: 7.1.3(@types/node@24.10.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.0)
transitivePeerDependencies:
- supports-color
@@ -10510,6 +10545,8 @@ snapshots:
markdown-table@3.0.4: {}
+ marked@18.0.14: {}
+
math-intrinsics@1.1.0: {}
mdast-util-find-and-replace@3.0.2:
@@ -11592,15 +11629,33 @@ snapshots:
dependencies:
prosemirror-model: 1.25.11
prosemirror-state: 1.4.4
- prosemirror-transform: 1.12.0
+ prosemirror-transform: 1.12.1
+
+ prosemirror-dropcursor@1.8.4:
+ dependencies:
+ prosemirror-state: 1.4.4
+ prosemirror-transform: 1.12.1
+ prosemirror-view: 1.42.2
+
+ prosemirror-gapcursor@1.4.1:
+ dependencies:
+ prosemirror-keymap: 1.2.3
+ prosemirror-model: 1.25.11
+ prosemirror-state: 1.4.4
+ prosemirror-view: 1.42.2
prosemirror-history@1.5.0:
dependencies:
prosemirror-state: 1.4.4
- prosemirror-transform: 1.12.0
+ prosemirror-transform: 1.12.1
prosemirror-view: 1.42.2
rope-sequence: 1.3.4
+ prosemirror-inputrules@1.5.1:
+ dependencies:
+ prosemirror-state: 1.4.4
+ prosemirror-transform: 1.12.1
+
prosemirror-keymap@1.2.3:
dependencies:
prosemirror-state: 1.4.4
@@ -11610,13 +11665,19 @@ snapshots:
dependencies:
orderedmap: 2.1.1
+ prosemirror-schema-list@1.5.1:
+ dependencies:
+ prosemirror-model: 1.25.11
+ prosemirror-state: 1.4.4
+ prosemirror-transform: 1.12.1
+
prosemirror-state@1.4.4:
dependencies:
prosemirror-model: 1.25.11
- prosemirror-transform: 1.12.0
+ prosemirror-transform: 1.12.1
prosemirror-view: 1.42.2
- prosemirror-transform@1.12.0:
+ prosemirror-transform@1.12.1:
dependencies:
prosemirror-model: 1.25.11
@@ -11624,7 +11685,7 @@ snapshots:
dependencies:
prosemirror-model: 1.25.11
prosemirror-state: 1.4.4
- prosemirror-transform: 1.12.0
+ prosemirror-transform: 1.12.1
psl@1.15.0:
dependencies:
@@ -12854,19 +12915,6 @@ snapshots:
- tsx
- yaml
- vite@7.1.3(@types/node@24.10.0):
- dependencies:
- esbuild: 0.25.12
- fdir: 6.5.0(picomatch@4.0.3)
- picomatch: 4.0.3
- postcss: 8.5.6
- rollup: 4.48.1
- tinyglobby: 0.2.15
- optionalDependencies:
- '@types/node': 24.10.0
- fsevents: 2.3.3
- optional: true
-
vite@7.1.3(@types/node@24.10.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.0):
dependencies:
esbuild: 0.25.5