@d4gger/design-system 3.0.1 → 4.0.0

package/dist/components/richTextEditor/EditorTools.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/richTextEditor/EditorTools.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { NodeSelection, TextSelection } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/react'\ntype Level = 1 | 2 | 3 | 4 | 5 | 6\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Toolbar } from '../toolbar/Toolbar'\nimport { DropdownMenu } from '../dropdownMenu/DropdownMenu'\nimport { Popover } from '../popover/Popover'\nimport { TextField } from '../textField/TextField'\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\nimport { MentionSuggestions } from './MentionSuggestions'\nimport type { EditorVariable, EditorMention } from './editorTokens'\n\nexport type EditorTool = 'style' | 'bold' | 'italic' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'clear' | 'history'\nexport interface EditorInsertItem { id: string; label: string; insert: (editor: Editor) => void }\nexport interface EditorToolsOptions {\n  tools?: readonly EditorTool[]\n  headingLevels?: readonly Level[]\n  insertItems?: readonly EditorInsertItem[]\n  variables?: readonly EditorVariable[]\n  mentions?: readonly EditorMention[]\n}\nconst defaults: EditorTool[] = ['style', 'bold', 'italic', 'strike', 'code', 'bulletList', 'orderedList', 'blockquote', 'codeBlock', 'link', 'clear', 'history']\nfunction Control({ children, ...props }: React.ComponentProps<typeof Button>) {\n  return <Toolbar.Button asChild disabled={props.disabled}><Button type=\"button\" size=\"sm\" variant=\"ghost\" className=\"dsx-rich-text-editor__toolbar-button\" {...props}>{children}</Button></Toolbar.Button>\n}\nfunction TokenPicker({ editor, disabled, records, kind }: { editor: Editor; disabled: boolean; records: readonly (EditorVariable | EditorMention)[]; kind: 'variable' | 'mention' }) {\n  const [open, setOpen] = React.useState(false)\n  const [query, setQuery] = React.useState('')\n  const [active, setActive] = React.useState(0)\n  const listId = React.useId()\n  const matches = records.filter(record => `${record.label} ${'key' in record ? record.key : record.id}`.toLowerCase().includes(query.toLowerCase()))\n  const insert = (index: number) => {\n    const record = matches[index]\n    if (!record) return\n    editor.chain().focus().insertContent({ type: kind === 'variable' ? 'dsxVariable' : 'dsxMention', attrs: 'key' in record ? { key: record.key } : { userId: record.id } }).run()\n    setOpen(false)\n  }\n  return <Popover open={open} onOpenChange={next => { setOpen(next); setQuery(''); setActive(0) }}>\n    <Popover.Trigger asChild><Control disabled={disabled}>{kind === 'variable' ? 'Variable' : 'Mention'}</Control></Popover.Trigger>\n    <Popover.Content className=\"dsx-editor-tools__popover\" align=\"start\" onCloseAutoFocus={event => { event.preventDefault(); editor.commands.focus() }}>\n      <Popover.Title>{kind === 'variable' ? 'Insert variable' : 'Mention someone'}</Popover.Title>\n      <Popover.Description>{kind === 'variable' ? 'Insert a key. Its value is resolved by your application.' : 'Select a person to insert their stable identity.'}</Popover.Description>\n      <TextField><TextField.Input aria-label={kind === 'variable' ? 'Search variables' : 'Search people'} role=\"combobox\" aria-expanded=\"true\" aria-controls={listId} aria-activedescendant={matches.length ? `${listId}-${active}` : undefined} value={query} onChange={event => { setQuery(event.target.value); setActive(0) }} onKeyDown={event => {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); setActive(index => Math.max(0, Math.min(matches.length - 1, index + (event.key === 'ArrowDown' ? 1 : -1)))) }\n        if (event.key === 'Enter') { event.preventDefault(); insert(active) }\n      }} /></TextField>\n      <div id={listId} role=\"listbox\" aria-label={kind === 'variable' ? 'Variables' : 'People'} className=\"dsx-editor-tools__choices\">\n        {matches.map((record, index) => <Button id={`${listId}-${index}`} key={'key' in record ? record.key : record.id} role=\"option\" aria-selected={active === index} type=\"button\" variant={active === index ? 'secondary' : 'ghost'} size=\"lg\" onClick={() => insert(index)} onPointerMove={() => setActive(index)}>\n          <span>{record.label}{'sensitive' in record && record.sensitive ? ' \u00B7 Sensitive' : ''}<small>{'key' in record ? record.key : record.id}</small></span>\n        </Button>)}\n        {!matches.length ? <span role=\"status\">No matches</span> : null}\n      </div>\n    </Popover.Content>\n  </Popover>\n}\nfunction LinkControl({ editor, disabled }: { editor: Editor; disabled: boolean }) {\n  const [open, setOpen] = React.useState(false)\n  const [url, setUrl] = React.useState('')\n  const [error, setError] = React.useState('')\n  const urlId = React.useId()\n  const selection = React.useRef({ from: 1, to: 1 })\n  const save = () => {\n    let href: string\n    try { const parsed = new URL(url); if (!['https:', 'http:', 'mailto:', 'tel:'].includes(parsed.protocol)) throw new Error(); href = parsed.href } catch { setError('Enter a valid https, http, mailto or tel URL.'); return }\n    const chain = editor.chain().focus().setTextSelection(selection.current)\n    if (selection.current.from === selection.current.to && !editor.isActive('link')) chain.insertContent({ type: 'text', text: href, marks: [{ type: 'link', attrs: { href } }] }).run()\n    else chain.extendMarkRange('link').setLink({ href }).run()\n    setOpen(false)\n  }\n  return <Popover open={open} onOpenChange={next => { if (next) { selection.current = { from: editor.state.selection.from, to: editor.state.selection.to }; setUrl(editor.getAttributes('link').href ?? ''); setError('') }; setOpen(next) }}>\n    <Popover.Trigger asChild><Control disabled={disabled} aria-label=\"Link\" aria-pressed={editor.isActive('link')}><Icon name=\"link\" size=\"sm\" /></Control></Popover.Trigger>\n    <Popover.Content className=\"dsx-editor-tools__popover dsx-editor-tools__link\" align=\"start\" onCloseAutoFocus={event => { event.preventDefault(); editor.commands.focus() }}>\n      <Popover.Title>Edit link</Popover.Title><VisuallyHidden asChild><Popover.Description>Link the selected text or insert a URL at the caret.</Popover.Description></VisuallyHidden>\n      <TextField id={urlId} label=\"URL\" errorText={error || undefined} invalid={Boolean(error)}><TextField.Input value={url} onChange={event => { setUrl(event.target.value); setError('') }} onKeyDown={event => { if (event.key === 'Enter') { event.preventDefault(); save() } }} /></TextField>\n      <div className=\"dsx-editor-tools__actions\"><Button type=\"button\" size=\"md\" onClick={save}>Save link</Button><Button type=\"button\" size=\"md\" variant=\"outline\" disabled={!editor.isActive('link')} onClick={() => { editor.chain().focus().setTextSelection(selection.current).extendMarkRange('link').unsetLink().run(); setOpen(false) }}>Remove link</Button></div>\n    </Popover.Content>\n  </Popover>\n}\nexport function EditorTools({ editor, disabled, tools = defaults, headingLevels, insertItems = [], variables = [], mentions = [] }: EditorToolsOptions & { editor: Editor | null; disabled: boolean }) {\n  const [, refresh] = React.useReducer(value => value + 1, 0)\n  React.useEffect(() => { if (!editor) return; editor.on('transaction', refresh); return () => { editor.off('transaction', refresh) } }, [editor])\n  const available = (tool: EditorTool, name?: string) => tools.includes(tool) && (!name || Boolean(editor?.schema.nodes[name] || editor?.schema.marks[name]))\n  const levels = headingLevels ?? editor?.extensionManager.extensions.find(extension => extension.name === 'heading')?.options.levels ?? [1, 2, 3]\n  const format = (label: string, icon: React.ComponentProps<typeof Icon>['name'], name: string, run: () => void) => <Control key={name} disabled={disabled} aria-label={label} aria-pressed={editor?.isActive(name)} onMouseDown={event => event.preventDefault()} onClick={run}><Icon name={icon} size=\"sm\" /></Control>\n  return <>\n    {available('style') ? <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"Block style\"><DropdownMenu><DropdownMenu.Trigger asChild><Control disabled={disabled}>Text style <Icon name=\"chevron-down\" size=\"sm\" /></Control></DropdownMenu.Trigger><DropdownMenu.Content onCloseAutoFocus={event => { event.preventDefault(); editor?.commands.focus() }}>\n      <DropdownMenu.Item onSelect={() => editor?.chain().focus().setParagraph().run()}>Paragraph</DropdownMenu.Item>\n      {editor?.schema.nodes.heading ? (levels as Level[]).map(level => <DropdownMenu.Item key={level} onSelect={() => editor.chain().focus().toggleHeading({ level }).run()}>Heading {level}</DropdownMenu.Item>) : null}\n      {available('blockquote', 'blockquote') ? <DropdownMenu.Item onSelect={() => editor?.chain().focus().toggleBlockquote().run()}>Quote block</DropdownMenu.Item> : null}\n      {available('codeBlock', 'codeBlock') ? <DropdownMenu.Item onSelect={() => editor?.chain().focus().toggleCodeBlock().run()}>Code block</DropdownMenu.Item> : null}\n    </DropdownMenu.Content></DropdownMenu></div> : null}\n    <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"Text style\">\n      {available('bold', 'bold') ? format('Bold', 'bold', 'bold', () => editor?.chain().focus().toggleBold().run()) : null}\n      {available('italic', 'italic') ? format('Italic', 'italic', 'italic', () => editor?.chain().focus().toggleItalic().run()) : null}\n      {available('strike', 'strike') ? format('Strikethrough', 'strikethrough', 'strike', () => editor?.chain().focus().toggleStrike().run()) : null}\n      {available('code', 'code') ? format('Inline code', 'code', 'code', () => editor?.chain().focus().toggleCode().run()) : null}\n      {available('bulletList', 'bulletList') ? format('Bulleted list', 'list', 'bulletList', () => editor?.chain().focus().toggleBulletList().run()) : null}\n      {available('orderedList', 'orderedList') ? format('Numbered list', 'list-ordered', 'orderedList', () => editor?.chain().focus().toggleOrderedList().run()) : null}\n    </div>\n    {editor ? <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"Insert\">\n      {available('link', 'link') ? <LinkControl editor={editor} disabled={disabled} /> : null}\n      {insertItems.length ? <DropdownMenu><DropdownMenu.Trigger asChild><Control disabled={disabled}>Insert <Icon name=\"plus\" size=\"sm\" /></Control></DropdownMenu.Trigger><DropdownMenu.Content onCloseAutoFocus={event => { event.preventDefault(); editor.commands.focus() }}>{insertItems.map(item => <DropdownMenu.Item key={item.id} onSelect={() => {\n        if (editor.state.selection instanceof NodeSelection) editor.commands.command(({ tr }) => {\n          const paragraph = editor.schema.nodes.paragraph\n          if (!paragraph) return false\n          let point = tr.doc.resolve(tr.selection.to)\n          while (point.depth > 0 && !point.parent.canReplaceWith(point.index(), point.index(), paragraph)) point = tr.doc.resolve(point.after())\n          tr.insert(point.pos, paragraph.create())\n          tr.setSelection(TextSelection.create(tr.doc, point.pos + 1))\n          return true\n        })\n        item.insert(editor)\n      }}>{item.label}</DropdownMenu.Item>)}</DropdownMenu.Content></DropdownMenu> : null}\n      {variables.length && editor.schema.nodes.dsxVariable ? <TokenPicker editor={editor} disabled={disabled} kind=\"variable\" records={variables} /> : null}\n      {mentions.length && editor.schema.nodes.dsxMention ? <TokenPicker editor={editor} disabled={disabled} kind=\"mention\" records={mentions} /> : null}\n      {available('clear') ? format('Clear formatting', 'eraser', '', () => editor.chain().focus().clearNodes().unsetAllMarks().run()) : null}\n    </div> : null}\n    {available('history') ? <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"History\"><Control disabled={disabled || !editor?.can().undo()} aria-label=\"Undo\" onMouseDown={event => event.preventDefault()} onClick={() => editor?.chain().focus().undo().run()}><Icon name=\"undo\" size=\"sm\" /></Control><Control disabled={disabled || !editor?.can().redo()} aria-label=\"Redo\" onMouseDown={event => event.preventDefault()} onClick={() => editor?.chain().focus().redo().run()}><Icon name=\"redo\" size=\"sm\" /></Control></div> : null}\n    {editor && mentions.length && editor.schema.nodes.dsxMention ? <MentionSuggestions editor={editor} mentions={mentions} /> : null}\n  </>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/richTextEditor/EditorTools.d.cts

@@ -0,0 +1,22 @@
+import type { Editor } from '@tiptap/react';
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+import type { EditorVariable, EditorMention } from './editorTokens.cjs';
+export type EditorTool = 'style' | 'bold' | 'italic' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'clear' | 'history';
+export interface EditorInsertItem {
+    id: string;
+    label: string;
+    insert: (editor: Editor) => void;
+}
+export interface EditorToolsOptions {
+    tools?: readonly EditorTool[];
+    headingLevels?: readonly Level[];
+    insertItems?: readonly EditorInsertItem[];
+    variables?: readonly EditorVariable[];
+    mentions?: readonly EditorMention[];
+}
+export declare function EditorTools({ editor, disabled, tools, headingLevels, insertItems, variables, mentions }: EditorToolsOptions & {
+    editor: Editor | null;
+    disabled: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditorTools.d.cts.map

package/dist/components/richTextEditor/EditorTools.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorTools.d.cts","sourceRoot":"","sources":["../../../src/components/richTextEditor/EditorTools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AASlC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAEnE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AACnK,MAAM,WAAW,gBAAgB;IAAG,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE;AACjG,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC7B,aAAa,CAAC,EAAE,SAAS,KAAK,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACzC,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IACrC,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,CAAA;CACpC;AA0DD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAgB,EAAE,aAAa,EAAE,WAAgB,EAAE,SAAc,EAAE,QAAa,EAAE,EAAE,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,2CA0CpM"}

package/dist/components/richTextEditor/EditorTools.d.mts

@@ -0,0 +1,22 @@
+import type { Editor } from '@tiptap/react';
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+import type { EditorVariable, EditorMention } from './editorTokens.js';
+export type EditorTool = 'style' | 'bold' | 'italic' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'clear' | 'history';
+export interface EditorInsertItem {
+    id: string;
+    label: string;
+    insert: (editor: Editor) => void;
+}
+export interface EditorToolsOptions {
+    tools?: readonly EditorTool[];
+    headingLevels?: readonly Level[];
+    insertItems?: readonly EditorInsertItem[];
+    variables?: readonly EditorVariable[];
+    mentions?: readonly EditorMention[];
+}
+export declare function EditorTools({ editor, disabled, tools, headingLevels, insertItems, variables, mentions }: EditorToolsOptions & {
+    editor: Editor | null;
+    disabled: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditorTools.d.mts.map

package/dist/components/richTextEditor/EditorTools.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorTools.d.mts","sourceRoot":"","sources":["../../../src/components/richTextEditor/EditorTools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AASlC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAEnE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AACnK,MAAM,WAAW,gBAAgB;IAAG,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE;AACjG,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC7B,aAAa,CAAC,EAAE,SAAS,KAAK,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACzC,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IACrC,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,CAAA;CACpC;AA0DD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAgB,EAAE,aAAa,EAAE,WAAgB,EAAE,SAAc,EAAE,QAAa,EAAE,EAAE,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,2CA0CpM"}

package/dist/components/richTextEditor/EditorTools.d.ts

@@ -0,0 +1,22 @@
+import type { Editor } from '@tiptap/react';
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+import type { EditorVariable, EditorMention } from './editorTokens.js';
+export type EditorTool = 'style' | 'bold' | 'italic' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'clear' | 'history';
+export interface EditorInsertItem {
+    id: string;
+    label: string;
+    insert: (editor: Editor) => void;
+}
+export interface EditorToolsOptions {
+    tools?: readonly EditorTool[];
+    headingLevels?: readonly Level[];
+    insertItems?: readonly EditorInsertItem[];
+    variables?: readonly EditorVariable[];
+    mentions?: readonly EditorMention[];
+}
+export declare function EditorTools({ editor, disabled, tools, headingLevels, insertItems, variables, mentions }: EditorToolsOptions & {
+    editor: Editor | null;
+    disabled: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditorTools.d.ts.map

package/dist/components/richTextEditor/EditorTools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorTools.d.ts","sourceRoot":"","sources":["../../../src/components/richTextEditor/EditorTools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AASlC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAEnE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AACnK,MAAM,WAAW,gBAAgB;IAAG,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE;AACjG,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC7B,aAAa,CAAC,EAAE,SAAS,KAAK,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACzC,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IACrC,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,CAAA;CACpC;AA0DD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAgB,EAAE,aAAa,EAAE,WAAgB,EAAE,SAAc,EAAE,QAAa,EAAE,EAAE,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,2CA0CpM"}

package/dist/components/richTextEditor/EditorTools.js

@@ -0,0 +1,196 @@
+import * as React from "react";
+import { NodeSelection, TextSelection } from "@tiptap/pm/state";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { Toolbar } from "../toolbar/Toolbar.js";
+import { DropdownMenu } from "../dropdownMenu/DropdownMenu.js";
+import { Popover } from "../popover/Popover.js";
+import { TextField } from "../textField/TextField.js";
+import { VisuallyHidden } from "../visuallyHidden/VisuallyHidden.js";
+import { MentionSuggestions } from "./MentionSuggestions.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const defaults = ["style", "bold", "italic", "strike", "code", "bulletList", "orderedList", "blockquote", "codeBlock", "link", "clear", "history"];
+function Control({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Toolbar.Button, { asChild: true, disabled: props.disabled, children: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "dsx-rich-text-editor__toolbar-button", ...props, children }) });
+}
+function TokenPicker({ editor, disabled, records, kind }) {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [active, setActive] = React.useState(0);
+  const listId = React.useId();
+  const matches = records.filter((record) => `${record.label} ${"key" in record ? record.key : record.id}`.toLowerCase().includes(query.toLowerCase()));
+  const insert = (index) => {
+    const record = matches[index];
+    if (!record) return;
+    editor.chain().focus().insertContent({ type: kind === "variable" ? "dsxVariable" : "dsxMention", attrs: "key" in record ? { key: record.key } : { userId: record.id } }).run();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (next) => {
+    setOpen(next);
+    setQuery("");
+    setActive(0);
+  }, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Control, { disabled, children: kind === "variable" ? "Variable" : "Mention" }) }),
+    /* @__PURE__ */ jsxs(Popover.Content, { className: "dsx-editor-tools__popover", align: "start", onCloseAutoFocus: (event) => {
+      event.preventDefault();
+      editor.commands.focus();
+    }, children: [
+      /* @__PURE__ */ jsx(Popover.Title, { children: kind === "variable" ? "Insert variable" : "Mention someone" }),
+      /* @__PURE__ */ jsx(Popover.Description, { children: kind === "variable" ? "Insert a key. Its value is resolved by your application." : "Select a person to insert their stable identity." }),
+      /* @__PURE__ */ jsx(TextField, { children: /* @__PURE__ */ jsx(TextField.Input, { "aria-label": kind === "variable" ? "Search variables" : "Search people", role: "combobox", "aria-expanded": "true", "aria-controls": listId, "aria-activedescendant": matches.length ? `${listId}-${active}` : void 0, value: query, onChange: (event) => {
+        setQuery(event.target.value);
+        setActive(0);
+      }, onKeyDown: (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          setActive((index) => Math.max(0, Math.min(matches.length - 1, index + (event.key === "ArrowDown" ? 1 : -1))));
+        }
+        if (event.key === "Enter") {
+          event.preventDefault();
+          insert(active);
+        }
+      } }) }),
+      /* @__PURE__ */ jsxs("div", { id: listId, role: "listbox", "aria-label": kind === "variable" ? "Variables" : "People", className: "dsx-editor-tools__choices", children: [
+        matches.map((record, index) => /* @__PURE__ */ jsx(Button, { id: `${listId}-${index}`, role: "option", "aria-selected": active === index, type: "button", variant: active === index ? "secondary" : "ghost", size: "lg", onClick: () => insert(index), onPointerMove: () => setActive(index), children: /* @__PURE__ */ jsxs("span", { children: [
+          record.label,
+          "sensitive" in record && record.sensitive ? " \xB7 Sensitive" : "",
+          /* @__PURE__ */ jsx("small", { children: "key" in record ? record.key : record.id })
+        ] }) }, "key" in record ? record.key : record.id)),
+        !matches.length ? /* @__PURE__ */ jsx("span", { role: "status", children: "No matches" }) : null
+      ] })
+    ] })
+  ] });
+}
+function LinkControl({ editor, disabled }) {
+  const [open, setOpen] = React.useState(false);
+  const [url, setUrl] = React.useState("");
+  const [error, setError] = React.useState("");
+  const urlId = React.useId();
+  const selection = React.useRef({ from: 1, to: 1 });
+  const save = () => {
+    let href;
+    try {
+      const parsed = new URL(url);
+      if (!["https:", "http:", "mailto:", "tel:"].includes(parsed.protocol)) throw new Error();
+      href = parsed.href;
+    } catch {
+      setError("Enter a valid https, http, mailto or tel URL.");
+      return;
+    }
+    const chain = editor.chain().focus().setTextSelection(selection.current);
+    if (selection.current.from === selection.current.to && !editor.isActive("link")) chain.insertContent({ type: "text", text: href, marks: [{ type: "link", attrs: { href } }] }).run();
+    else chain.extendMarkRange("link").setLink({ href }).run();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (next) => {
+    if (next) {
+      selection.current = { from: editor.state.selection.from, to: editor.state.selection.to };
+      setUrl(editor.getAttributes("link").href ?? "");
+      setError("");
+    }
+    ;
+    setOpen(next);
+  }, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Control, { disabled, "aria-label": "Link", "aria-pressed": editor.isActive("link"), children: /* @__PURE__ */ jsx(Icon, { name: "link", size: "sm" }) }) }),
+    /* @__PURE__ */ jsxs(Popover.Content, { className: "dsx-editor-tools__popover dsx-editor-tools__link", align: "start", onCloseAutoFocus: (event) => {
+      event.preventDefault();
+      editor.commands.focus();
+    }, children: [
+      /* @__PURE__ */ jsx(Popover.Title, { children: "Edit link" }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(Popover.Description, { children: "Link the selected text or insert a URL at the caret." }) }),
+      /* @__PURE__ */ jsx(TextField, { id: urlId, label: "URL", errorText: error || void 0, invalid: Boolean(error), children: /* @__PURE__ */ jsx(TextField.Input, { value: url, onChange: (event) => {
+        setUrl(event.target.value);
+        setError("");
+      }, onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          save();
+        }
+      } }) }),
+      /* @__PURE__ */ jsxs("div", { className: "dsx-editor-tools__actions", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "md", onClick: save, children: "Save link" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "md", variant: "outline", disabled: !editor.isActive("link"), onClick: () => {
+          editor.chain().focus().setTextSelection(selection.current).extendMarkRange("link").unsetLink().run();
+          setOpen(false);
+        }, children: "Remove link" })
+      ] })
+    ] })
+  ] });
+}
+function EditorTools({ editor, disabled, tools = defaults, headingLevels, insertItems = [], variables = [], mentions = [] }) {
+  const [, refresh] = React.useReducer((value) => value + 1, 0);
+  React.useEffect(() => {
+    if (!editor) return;
+    editor.on("transaction", refresh);
+    return () => {
+      editor.off("transaction", refresh);
+    };
+  }, [editor]);
+  const available = (tool, name) => tools.includes(tool) && (!name || Boolean(editor?.schema.nodes[name] || editor?.schema.marks[name]));
+  const levels = headingLevels ?? editor?.extensionManager.extensions.find((extension) => extension.name === "heading")?.options.levels ?? [1, 2, 3];
+  const format = (label, icon, name, run) => /* @__PURE__ */ jsx(Control, { disabled, "aria-label": label, "aria-pressed": editor?.isActive(name), onMouseDown: (event) => event.preventDefault(), onClick: run, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" }) }, name);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    available("style") ? /* @__PURE__ */ jsx("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "Block style", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Control, { disabled, children: [
+        "Text style ",
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "sm" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DropdownMenu.Content, { onCloseAutoFocus: (event) => {
+        event.preventDefault();
+        editor?.commands.focus();
+      }, children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => editor?.chain().focus().setParagraph().run(), children: "Paragraph" }),
+        editor?.schema.nodes.heading ? levels.map((level) => /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => editor.chain().focus().toggleHeading({ level }).run(), children: [
+          "Heading ",
+          level
+        ] }, level)) : null,
+        available("blockquote", "blockquote") ? /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => editor?.chain().focus().toggleBlockquote().run(), children: "Quote block" }) : null,
+        available("codeBlock", "codeBlock") ? /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => editor?.chain().focus().toggleCodeBlock().run(), children: "Code block" }) : null
+      ] })
+    ] }) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "Text style", children: [
+      available("bold", "bold") ? format("Bold", "bold", "bold", () => editor?.chain().focus().toggleBold().run()) : null,
+      available("italic", "italic") ? format("Italic", "italic", "italic", () => editor?.chain().focus().toggleItalic().run()) : null,
+      available("strike", "strike") ? format("Strikethrough", "strikethrough", "strike", () => editor?.chain().focus().toggleStrike().run()) : null,
+      available("code", "code") ? format("Inline code", "code", "code", () => editor?.chain().focus().toggleCode().run()) : null,
+      available("bulletList", "bulletList") ? format("Bulleted list", "list", "bulletList", () => editor?.chain().focus().toggleBulletList().run()) : null,
+      available("orderedList", "orderedList") ? format("Numbered list", "list-ordered", "orderedList", () => editor?.chain().focus().toggleOrderedList().run()) : null
+    ] }),
+    editor ? /* @__PURE__ */ jsxs("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "Insert", children: [
+      available("link", "link") ? /* @__PURE__ */ jsx(LinkControl, { editor, disabled }) : null,
+      insertItems.length ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Control, { disabled, children: [
+          "Insert ",
+          /* @__PURE__ */ jsx(Icon, { name: "plus", size: "sm" })
+        ] }) }),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { onCloseAutoFocus: (event) => {
+          event.preventDefault();
+          editor.commands.focus();
+        }, children: insertItems.map((item) => /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => {
+          if (editor.state.selection instanceof NodeSelection) editor.commands.command(({ tr }) => {
+            const paragraph = editor.schema.nodes.paragraph;
+            if (!paragraph) return false;
+            let point = tr.doc.resolve(tr.selection.to);
+            while (point.depth > 0 && !point.parent.canReplaceWith(point.index(), point.index(), paragraph)) point = tr.doc.resolve(point.after());
+            tr.insert(point.pos, paragraph.create());
+            tr.setSelection(TextSelection.create(tr.doc, point.pos + 1));
+            return true;
+          });
+          item.insert(editor);
+        }, children: item.label }, item.id)) })
+      ] }) : null,
+      variables.length && editor.schema.nodes.dsxVariable ? /* @__PURE__ */ jsx(TokenPicker, { editor, disabled, kind: "variable", records: variables }) : null,
+      mentions.length && editor.schema.nodes.dsxMention ? /* @__PURE__ */ jsx(TokenPicker, { editor, disabled, kind: "mention", records: mentions }) : null,
+      available("clear") ? format("Clear formatting", "eraser", "", () => editor.chain().focus().clearNodes().unsetAllMarks().run()) : null
+    ] }) : null,
+    available("history") ? /* @__PURE__ */ jsxs("div", { className: "dsx-rich-text-editor__toolbar-group", role: "group", "aria-label": "History", children: [
+      /* @__PURE__ */ jsx(Control, { disabled: disabled || !editor?.can().undo(), "aria-label": "Undo", onMouseDown: (event) => event.preventDefault(), onClick: () => editor?.chain().focus().undo().run(), children: /* @__PURE__ */ jsx(Icon, { name: "undo", size: "sm" }) }),
+      /* @__PURE__ */ jsx(Control, { disabled: disabled || !editor?.can().redo(), "aria-label": "Redo", onMouseDown: (event) => event.preventDefault(), onClick: () => editor?.chain().focus().redo().run(), children: /* @__PURE__ */ jsx(Icon, { name: "redo", size: "sm" }) })
+    ] }) : null,
+    editor && mentions.length && editor.schema.nodes.dsxMention ? /* @__PURE__ */ jsx(MentionSuggestions, { editor, mentions }) : null
+  ] });
+}
+export {
+  EditorTools
+};
+//# sourceMappingURL=EditorTools.js.map

package/dist/components/richTextEditor/EditorTools.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/richTextEditor/EditorTools.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { NodeSelection, TextSelection } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/react'\ntype Level = 1 | 2 | 3 | 4 | 5 | 6\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\nimport { Toolbar } from '../toolbar/Toolbar'\nimport { DropdownMenu } from '../dropdownMenu/DropdownMenu'\nimport { Popover } from '../popover/Popover'\nimport { TextField } from '../textField/TextField'\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\nimport { MentionSuggestions } from './MentionSuggestions'\nimport type { EditorVariable, EditorMention } from './editorTokens'\n\nexport type EditorTool = 'style' | 'bold' | 'italic' | 'strike' | 'code' | 'bulletList' | 'orderedList' | 'blockquote' | 'codeBlock' | 'link' | 'clear' | 'history'\nexport interface EditorInsertItem { id: string; label: string; insert: (editor: Editor) => void }\nexport interface EditorToolsOptions {\n  tools?: readonly EditorTool[]\n  headingLevels?: readonly Level[]\n  insertItems?: readonly EditorInsertItem[]\n  variables?: readonly EditorVariable[]\n  mentions?: readonly EditorMention[]\n}\nconst defaults: EditorTool[] = ['style', 'bold', 'italic', 'strike', 'code', 'bulletList', 'orderedList', 'blockquote', 'codeBlock', 'link', 'clear', 'history']\nfunction Control({ children, ...props }: React.ComponentProps<typeof Button>) {\n  return <Toolbar.Button asChild disabled={props.disabled}><Button type=\"button\" size=\"sm\" variant=\"ghost\" className=\"dsx-rich-text-editor__toolbar-button\" {...props}>{children}</Button></Toolbar.Button>\n}\nfunction TokenPicker({ editor, disabled, records, kind }: { editor: Editor; disabled: boolean; records: readonly (EditorVariable | EditorMention)[]; kind: 'variable' | 'mention' }) {\n  const [open, setOpen] = React.useState(false)\n  const [query, setQuery] = React.useState('')\n  const [active, setActive] = React.useState(0)\n  const listId = React.useId()\n  const matches = records.filter(record => `${record.label} ${'key' in record ? record.key : record.id}`.toLowerCase().includes(query.toLowerCase()))\n  const insert = (index: number) => {\n    const record = matches[index]\n    if (!record) return\n    editor.chain().focus().insertContent({ type: kind === 'variable' ? 'dsxVariable' : 'dsxMention', attrs: 'key' in record ? { key: record.key } : { userId: record.id } }).run()\n    setOpen(false)\n  }\n  return <Popover open={open} onOpenChange={next => { setOpen(next); setQuery(''); setActive(0) }}>\n    <Popover.Trigger asChild><Control disabled={disabled}>{kind === 'variable' ? 'Variable' : 'Mention'}</Control></Popover.Trigger>\n    <Popover.Content className=\"dsx-editor-tools__popover\" align=\"start\" onCloseAutoFocus={event => { event.preventDefault(); editor.commands.focus() }}>\n      <Popover.Title>{kind === 'variable' ? 'Insert variable' : 'Mention someone'}</Popover.Title>\n      <Popover.Description>{kind === 'variable' ? 'Insert a key. Its value is resolved by your application.' : 'Select a person to insert their stable identity.'}</Popover.Description>\n      <TextField><TextField.Input aria-label={kind === 'variable' ? 'Search variables' : 'Search people'} role=\"combobox\" aria-expanded=\"true\" aria-controls={listId} aria-activedescendant={matches.length ? `${listId}-${active}` : undefined} value={query} onChange={event => { setQuery(event.target.value); setActive(0) }} onKeyDown={event => {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); setActive(index => Math.max(0, Math.min(matches.length - 1, index + (event.key === 'ArrowDown' ? 1 : -1)))) }\n        if (event.key === 'Enter') { event.preventDefault(); insert(active) }\n      }} /></TextField>\n      <div id={listId} role=\"listbox\" aria-label={kind === 'variable' ? 'Variables' : 'People'} className=\"dsx-editor-tools__choices\">\n        {matches.map((record, index) => <Button id={`${listId}-${index}`} key={'key' in record ? record.key : record.id} role=\"option\" aria-selected={active === index} type=\"button\" variant={active === index ? 'secondary' : 'ghost'} size=\"lg\" onClick={() => insert(index)} onPointerMove={() => setActive(index)}>\n          <span>{record.label}{'sensitive' in record && record.sensitive ? ' \u00B7 Sensitive' : ''}<small>{'key' in record ? record.key : record.id}</small></span>\n        </Button>)}\n        {!matches.length ? <span role=\"status\">No matches</span> : null}\n      </div>\n    </Popover.Content>\n  </Popover>\n}\nfunction LinkControl({ editor, disabled }: { editor: Editor; disabled: boolean }) {\n  const [open, setOpen] = React.useState(false)\n  const [url, setUrl] = React.useState('')\n  const [error, setError] = React.useState('')\n  const urlId = React.useId()\n  const selection = React.useRef({ from: 1, to: 1 })\n  const save = () => {\n    let href: string\n    try { const parsed = new URL(url); if (!['https:', 'http:', 'mailto:', 'tel:'].includes(parsed.protocol)) throw new Error(); href = parsed.href } catch { setError('Enter a valid https, http, mailto or tel URL.'); return }\n    const chain = editor.chain().focus().setTextSelection(selection.current)\n    if (selection.current.from === selection.current.to && !editor.isActive('link')) chain.insertContent({ type: 'text', text: href, marks: [{ type: 'link', attrs: { href } }] }).run()\n    else chain.extendMarkRange('link').setLink({ href }).run()\n    setOpen(false)\n  }\n  return <Popover open={open} onOpenChange={next => { if (next) { selection.current = { from: editor.state.selection.from, to: editor.state.selection.to }; setUrl(editor.getAttributes('link').href ?? ''); setError('') }; setOpen(next) }}>\n    <Popover.Trigger asChild><Control disabled={disabled} aria-label=\"Link\" aria-pressed={editor.isActive('link')}><Icon name=\"link\" size=\"sm\" /></Control></Popover.Trigger>\n    <Popover.Content className=\"dsx-editor-tools__popover dsx-editor-tools__link\" align=\"start\" onCloseAutoFocus={event => { event.preventDefault(); editor.commands.focus() }}>\n      <Popover.Title>Edit link</Popover.Title><VisuallyHidden asChild><Popover.Description>Link the selected text or insert a URL at the caret.</Popover.Description></VisuallyHidden>\n      <TextField id={urlId} label=\"URL\" errorText={error || undefined} invalid={Boolean(error)}><TextField.Input value={url} onChange={event => { setUrl(event.target.value); setError('') }} onKeyDown={event => { if (event.key === 'Enter') { event.preventDefault(); save() } }} /></TextField>\n      <div className=\"dsx-editor-tools__actions\"><Button type=\"button\" size=\"md\" onClick={save}>Save link</Button><Button type=\"button\" size=\"md\" variant=\"outline\" disabled={!editor.isActive('link')} onClick={() => { editor.chain().focus().setTextSelection(selection.current).extendMarkRange('link').unsetLink().run(); setOpen(false) }}>Remove link</Button></div>\n    </Popover.Content>\n  </Popover>\n}\nexport function EditorTools({ editor, disabled, tools = defaults, headingLevels, insertItems = [], variables = [], mentions = [] }: EditorToolsOptions & { editor: Editor | null; disabled: boolean }) {\n  const [, refresh] = React.useReducer(value => value + 1, 0)\n  React.useEffect(() => { if (!editor) return; editor.on('transaction', refresh); return () => { editor.off('transaction', refresh) } }, [editor])\n  const available = (tool: EditorTool, name?: string) => tools.includes(tool) && (!name || Boolean(editor?.schema.nodes[name] || editor?.schema.marks[name]))\n  const levels = headingLevels ?? editor?.extensionManager.extensions.find(extension => extension.name === 'heading')?.options.levels ?? [1, 2, 3]\n  const format = (label: string, icon: React.ComponentProps<typeof Icon>['name'], name: string, run: () => void) => <Control key={name} disabled={disabled} aria-label={label} aria-pressed={editor?.isActive(name)} onMouseDown={event => event.preventDefault()} onClick={run}><Icon name={icon} size=\"sm\" /></Control>\n  return <>\n    {available('style') ? <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"Block style\"><DropdownMenu><DropdownMenu.Trigger asChild><Control disabled={disabled}>Text style <Icon name=\"chevron-down\" size=\"sm\" /></Control></DropdownMenu.Trigger><DropdownMenu.Content onCloseAutoFocus={event => { event.preventDefault(); editor?.commands.focus() }}>\n      <DropdownMenu.Item onSelect={() => editor?.chain().focus().setParagraph().run()}>Paragraph</DropdownMenu.Item>\n      {editor?.schema.nodes.heading ? (levels as Level[]).map(level => <DropdownMenu.Item key={level} onSelect={() => editor.chain().focus().toggleHeading({ level }).run()}>Heading {level}</DropdownMenu.Item>) : null}\n      {available('blockquote', 'blockquote') ? <DropdownMenu.Item onSelect={() => editor?.chain().focus().toggleBlockquote().run()}>Quote block</DropdownMenu.Item> : null}\n      {available('codeBlock', 'codeBlock') ? <DropdownMenu.Item onSelect={() => editor?.chain().focus().toggleCodeBlock().run()}>Code block</DropdownMenu.Item> : null}\n    </DropdownMenu.Content></DropdownMenu></div> : null}\n    <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"Text style\">\n      {available('bold', 'bold') ? format('Bold', 'bold', 'bold', () => editor?.chain().focus().toggleBold().run()) : null}\n      {available('italic', 'italic') ? format('Italic', 'italic', 'italic', () => editor?.chain().focus().toggleItalic().run()) : null}\n      {available('strike', 'strike') ? format('Strikethrough', 'strikethrough', 'strike', () => editor?.chain().focus().toggleStrike().run()) : null}\n      {available('code', 'code') ? format('Inline code', 'code', 'code', () => editor?.chain().focus().toggleCode().run()) : null}\n      {available('bulletList', 'bulletList') ? format('Bulleted list', 'list', 'bulletList', () => editor?.chain().focus().toggleBulletList().run()) : null}\n      {available('orderedList', 'orderedList') ? format('Numbered list', 'list-ordered', 'orderedList', () => editor?.chain().focus().toggleOrderedList().run()) : null}\n    </div>\n    {editor ? <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"Insert\">\n      {available('link', 'link') ? <LinkControl editor={editor} disabled={disabled} /> : null}\n      {insertItems.length ? <DropdownMenu><DropdownMenu.Trigger asChild><Control disabled={disabled}>Insert <Icon name=\"plus\" size=\"sm\" /></Control></DropdownMenu.Trigger><DropdownMenu.Content onCloseAutoFocus={event => { event.preventDefault(); editor.commands.focus() }}>{insertItems.map(item => <DropdownMenu.Item key={item.id} onSelect={() => {\n        if (editor.state.selection instanceof NodeSelection) editor.commands.command(({ tr }) => {\n          const paragraph = editor.schema.nodes.paragraph\n          if (!paragraph) return false\n          let point = tr.doc.resolve(tr.selection.to)\n          while (point.depth > 0 && !point.parent.canReplaceWith(point.index(), point.index(), paragraph)) point = tr.doc.resolve(point.after())\n          tr.insert(point.pos, paragraph.create())\n          tr.setSelection(TextSelection.create(tr.doc, point.pos + 1))\n          return true\n        })\n        item.insert(editor)\n      }}>{item.label}</DropdownMenu.Item>)}</DropdownMenu.Content></DropdownMenu> : null}\n      {variables.length && editor.schema.nodes.dsxVariable ? <TokenPicker editor={editor} disabled={disabled} kind=\"variable\" records={variables} /> : null}\n      {mentions.length && editor.schema.nodes.dsxMention ? <TokenPicker editor={editor} disabled={disabled} kind=\"mention\" records={mentions} /> : null}\n      {available('clear') ? format('Clear formatting', 'eraser', '', () => editor.chain().focus().clearNodes().unsetAllMarks().run()) : null}\n    </div> : null}\n    {available('history') ? <div className=\"dsx-rich-text-editor__toolbar-group\" role=\"group\" aria-label=\"History\"><Control disabled={disabled || !editor?.can().undo()} aria-label=\"Undo\" onMouseDown={event => event.preventDefault()} onClick={() => editor?.chain().focus().undo().run()}><Icon name=\"undo\" size=\"sm\" /></Control><Control disabled={disabled || !editor?.can().redo()} aria-label=\"Redo\" onMouseDown={event => event.preventDefault()} onClick={() => editor?.chain().focus().redo().run()}><Icon name=\"redo\" size=\"sm\" /></Control></div> : null}\n    {editor && mentions.length && editor.schema.nodes.dsxMention ? <MentionSuggestions editor={editor} mentions={mentions} /> : null}\n  </>\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,SAAS,eAAe,qBAAqB;AAG7C,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAcwB,SA6DlD,UA7DkD,KAyBjD,YAzBiD;AAF3D,MAAM,WAAyB,CAAC,SAAS,QAAQ,UAAU,UAAU,QAAQ,cAAc,eAAe,cAAc,aAAa,QAAQ,SAAS,SAAS;AAC/J,SAAS,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAwC;AAC5E,SAAO,oBAAC,QAAQ,QAAR,EAAe,SAAO,MAAC,UAAU,MAAM,UAAU,8BAAC,UAAO,MAAK,UAAS,MAAK,MAAK,SAAQ,SAAQ,WAAU,wCAAwC,GAAG,OAAQ,UAAS,GAAS;AAC1L;AACA,SAAS,YAAY,EAAE,QAAQ,UAAU,SAAS,KAAK,GAA8H;AACnL,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,CAAC;AAC5C,QAAM,SAAS,MAAM,MAAM;AAC3B,QAAM,UAAU,QAAQ,OAAO,YAAU,GAAG,OAAO,KAAK,IAAI,SAAS,SAAS,OAAO,MAAM,OAAO,EAAE,GAAG,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC;AAClJ,QAAM,SAAS,CAAC,UAAkB;AAChC,UAAM,SAAS,QAAQ,KAAK;AAC5B,QAAI,CAAC,OAAQ;AACb,WAAO,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,SAAS,aAAa,gBAAgB,cAAc,OAAO,SAAS,SAAS,EAAE,KAAK,OAAO,IAAI,IAAI,EAAE,QAAQ,OAAO,GAAG,EAAE,CAAC,EAAE,IAAI;AAC7K,YAAQ,KAAK;AAAA,EACf;AACA,SAAO,qBAAC,WAAQ,MAAY,cAAc,UAAQ;AAAE,YAAQ,IAAI;AAAG,aAAS,EAAE;AAAG,cAAU,CAAC;AAAA,EAAE,GAC5F;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MAAC,8BAAC,WAAQ,UAAqB,mBAAS,aAAa,aAAa,WAAU,GAAU;AAAA,IAC9G,qBAAC,QAAQ,SAAR,EAAgB,WAAU,6BAA4B,OAAM,SAAQ,kBAAkB,WAAS;AAAE,YAAM,eAAe;AAAG,aAAO,SAAS,MAAM;AAAA,IAAE,GAChJ;AAAA,0BAAC,QAAQ,OAAR,EAAe,mBAAS,aAAa,oBAAoB,mBAAkB;AAAA,MAC5E,oBAAC,QAAQ,aAAR,EAAqB,mBAAS,aAAa,6DAA6D,oDAAmD;AAAA,MAC5J,oBAAC,aAAU,8BAAC,UAAU,OAAV,EAAgB,cAAY,SAAS,aAAa,qBAAqB,iBAAiB,MAAK,YAAW,iBAAc,QAAO,iBAAe,QAAQ,yBAAuB,QAAQ,SAAS,GAAG,MAAM,IAAI,MAAM,KAAK,QAAW,OAAO,OAAO,UAAU,WAAS;AAAE,iBAAS,MAAM,OAAO,KAAK;AAAG,kBAAU,CAAC;AAAA,MAAE,GAAG,WAAW,WAAS;AAC9U,YAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AAAE,gBAAM,eAAe;AAAG,oBAAU,WAAS,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,SAAS,GAAG,SAAS,MAAM,QAAQ,cAAc,IAAI,GAAG,CAAC,CAAC;AAAA,QAAE;AAChM,YAAI,MAAM,QAAQ,SAAS;AAAE,gBAAM,eAAe;AAAG,iBAAO,MAAM;AAAA,QAAE;AAAA,MACtE,GAAG,GAAE;AAAA,MACL,qBAAC,SAAI,IAAI,QAAQ,MAAK,WAAU,cAAY,SAAS,aAAa,cAAc,UAAU,WAAU,6BACjG;AAAA,gBAAQ,IAAI,CAAC,QAAQ,UAAU,oBAAC,UAAO,IAAI,GAAG,MAAM,IAAI,KAAK,IAAmD,MAAK,UAAS,iBAAe,WAAW,OAAO,MAAK,UAAS,SAAS,WAAW,QAAQ,cAAc,SAAS,MAAK,MAAK,SAAS,MAAM,OAAO,KAAK,GAAG,eAAe,MAAM,UAAU,KAAK,GAC3S,+BAAC,UAAM;AAAA,iBAAO;AAAA,UAAO,eAAe,UAAU,OAAO,YAAY,oBAAiB;AAAA,UAAG,oBAAC,WAAO,mBAAS,SAAS,OAAO,MAAM,OAAO,IAAG;AAAA,WAAQ,KADzE,SAAS,SAAS,OAAO,MAAM,OAAO,EAE7G,CAAS;AAAA,QACR,CAAC,QAAQ,SAAS,oBAAC,UAAK,MAAK,UAAS,wBAAU,IAAU;AAAA,SAC7D;AAAA,OACF;AAAA,KACF;AACF;AACA,SAAS,YAAY,EAAE,QAAQ,SAAS,GAA0C;AAChF,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,CAAC,KAAK,MAAM,IAAI,MAAM,SAAS,EAAE;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,EAAE;AAC3C,QAAM,QAAQ,MAAM,MAAM;AAC1B,QAAM,YAAY,MAAM,OAAO,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC;AACjD,QAAM,OAAO,MAAM;AACjB,QAAI;AACJ,QAAI;AAAE,YAAM,SAAS,IAAI,IAAI,GAAG;AAAG,UAAI,CAAC,CAAC,UAAU,SAAS,WAAW,MAAM,EAAE,SAAS,OAAO,QAAQ,EAAG,OAAM,IAAI,MAAM;AAAG,aAAO,OAAO;AAAA,IAAK,QAAQ;AAAE,eAAS,+CAA+C;AAAG;AAAA,IAAO;AAC5N,UAAM,QAAQ,OAAO,MAAM,EAAE,MAAM,EAAE,iBAAiB,UAAU,OAAO;AACvE,QAAI,UAAU,QAAQ,SAAS,UAAU,QAAQ,MAAM,CAAC,OAAO,SAAS,MAAM,EAAG,OAAM,cAAc,EAAE,MAAM,QAAQ,MAAM,MAAM,OAAO,CAAC,EAAE,MAAM,QAAQ,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI;AAAA,QAC9K,OAAM,gBAAgB,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,IAAI;AACzD,YAAQ,KAAK;AAAA,EACf;AACA,SAAO,qBAAC,WAAQ,MAAY,cAAc,UAAQ;AAAE,QAAI,MAAM;AAAE,gBAAU,UAAU,EAAE,MAAM,OAAO,MAAM,UAAU,MAAM,IAAI,OAAO,MAAM,UAAU,GAAG;AAAG,aAAO,OAAO,cAAc,MAAM,EAAE,QAAQ,EAAE;AAAG,eAAS,EAAE;AAAA,IAAE;AAAC;AAAE,YAAQ,IAAI;AAAA,EAAE,GACvO;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MAAC,8BAAC,WAAQ,UAAoB,cAAW,QAAO,gBAAc,OAAO,SAAS,MAAM,GAAG,8BAAC,QAAK,MAAK,QAAO,MAAK,MAAK,GAAE,GAAU;AAAA,IACvJ,qBAAC,QAAQ,SAAR,EAAgB,WAAU,oDAAmD,OAAM,SAAQ,kBAAkB,WAAS;AAAE,YAAM,eAAe;AAAG,aAAO,SAAS,MAAM;AAAA,IAAE,GACvK;AAAA,0BAAC,QAAQ,OAAR,EAAc,uBAAS;AAAA,MAAgB,oBAAC,kBAAe,SAAO,MAAC,8BAAC,QAAQ,aAAR,EAAoB,kEAAoD,GAAsB;AAAA,MAC/J,oBAAC,aAAU,IAAI,OAAO,OAAM,OAAM,WAAW,SAAS,QAAW,SAAS,QAAQ,KAAK,GAAG,8BAAC,UAAU,OAAV,EAAgB,OAAO,KAAK,UAAU,WAAS;AAAE,eAAO,MAAM,OAAO,KAAK;AAAG,iBAAS,EAAE;AAAA,MAAE,GAAG,WAAW,WAAS;AAAE,YAAI,MAAM,QAAQ,SAAS;AAAE,gBAAM,eAAe;AAAG,eAAK;AAAA,QAAE;AAAA,MAAE,GAAG,GAAE;AAAA,MACjR,qBAAC,SAAI,WAAU,6BAA4B;AAAA,4BAAC,UAAO,MAAK,UAAS,MAAK,MAAK,SAAS,MAAM,uBAAS;AAAA,QAAS,oBAAC,UAAO,MAAK,UAAS,MAAK,MAAK,SAAQ,WAAU,UAAU,CAAC,OAAO,SAAS,MAAM,GAAG,SAAS,MAAM;AAAE,iBAAO,MAAM,EAAE,MAAM,EAAE,iBAAiB,UAAU,OAAO,EAAE,gBAAgB,MAAM,EAAE,UAAU,EAAE,IAAI;AAAG,kBAAQ,KAAK;AAAA,QAAE,GAAG,yBAAW;AAAA,SAAS;AAAA,OACjW;AAAA,KACF;AACF;AACO,SAAS,YAAY,EAAE,QAAQ,UAAU,QAAQ,UAAU,eAAe,cAAc,CAAC,GAAG,YAAY,CAAC,GAAG,WAAW,CAAC,EAAE,GAAsE;AACrM,QAAM,CAAC,EAAE,OAAO,IAAI,MAAM,WAAW,WAAS,QAAQ,GAAG,CAAC;AAC1D,QAAM,UAAU,MAAM;AAAE,QAAI,CAAC,OAAQ;AAAQ,WAAO,GAAG,eAAe,OAAO;AAAG,WAAO,MAAM;AAAE,aAAO,IAAI,eAAe,OAAO;AAAA,IAAE;AAAA,EAAE,GAAG,CAAC,MAAM,CAAC;AAC/I,QAAM,YAAY,CAAC,MAAkB,SAAkB,MAAM,SAAS,IAAI,MAAM,CAAC,QAAQ,QAAQ,QAAQ,OAAO,MAAM,IAAI,KAAK,QAAQ,OAAO,MAAM,IAAI,CAAC;AACzJ,QAAM,SAAS,iBAAiB,QAAQ,iBAAiB,WAAW,KAAK,eAAa,UAAU,SAAS,SAAS,GAAG,QAAQ,UAAU,CAAC,GAAG,GAAG,CAAC;AAC/I,QAAM,SAAS,CAAC,OAAe,MAAiD,MAAc,QAAoB,oBAAC,WAAmB,UAAoB,cAAY,OAAO,gBAAc,QAAQ,SAAS,IAAI,GAAG,aAAa,WAAS,MAAM,eAAe,GAAG,SAAS,KAAK,8BAAC,QAAK,MAAM,MAAM,MAAK,MAAK,KAA3K,IAA6K;AAC7S,SAAO,iCACJ;AAAA,cAAU,OAAO,IAAI,oBAAC,SAAI,WAAU,uCAAsC,MAAK,SAAQ,cAAW,eAAc,+BAAC,gBAAa;AAAA,0BAAC,aAAa,SAAb,EAAqB,SAAO,MAAC,+BAAC,WAAQ,UAAoB;AAAA;AAAA,QAAW,oBAAC,QAAK,MAAK,gBAAe,MAAK,MAAK;AAAA,SAAE,GAAU;AAAA,MAAuB,qBAAC,aAAa,SAAb,EAAqB,kBAAkB,WAAS;AAAE,cAAM,eAAe;AAAG,gBAAQ,SAAS,MAAM;AAAA,MAAE,GAC9W;AAAA,4BAAC,aAAa,MAAb,EAAkB,UAAU,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,GAAG,uBAAS;AAAA,QACzF,QAAQ,OAAO,MAAM,UAAW,OAAmB,IAAI,WAAS,qBAAC,aAAa,MAAb,EAA8B,UAAU,MAAM,OAAO,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,CAAC,EAAE,IAAI,GAAG;AAAA;AAAA,UAAS;AAAA,aAAvF,KAA6F,CAAoB,IAAI;AAAA,QAC7M,UAAU,cAAc,YAAY,IAAI,oBAAC,aAAa,MAAb,EAAkB,UAAU,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,IAAI,GAAG,yBAAW,IAAuB;AAAA,QAC/J,UAAU,aAAa,WAAW,IAAI,oBAAC,aAAa,MAAb,EAAkB,UAAU,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI,GAAG,wBAAU,IAAuB;AAAA,SAC9J;AAAA,OAAuB,GAAe,IAAS;AAAA,IAC/C,qBAAC,SAAI,WAAU,uCAAsC,MAAK,SAAQ,cAAW,cAC1E;AAAA,gBAAU,QAAQ,MAAM,IAAI,OAAO,QAAQ,QAAQ,QAAQ,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,IAAI;AAAA,MAC/G,UAAU,UAAU,QAAQ,IAAI,OAAO,UAAU,UAAU,UAAU,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI;AAAA,MAC3H,UAAU,UAAU,QAAQ,IAAI,OAAO,iBAAiB,iBAAiB,UAAU,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI;AAAA,MACzI,UAAU,QAAQ,MAAM,IAAI,OAAO,eAAe,QAAQ,QAAQ,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,IAAI;AAAA,MACtH,UAAU,cAAc,YAAY,IAAI,OAAO,iBAAiB,QAAQ,cAAc,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,IAAI,CAAC,IAAI;AAAA,MAChJ,UAAU,eAAe,aAAa,IAAI,OAAO,iBAAiB,gBAAgB,eAAe,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,IAAI,CAAC,IAAI;AAAA,OAC/J;AAAA,IACC,SAAS,qBAAC,SAAI,WAAU,uCAAsC,MAAK,SAAQ,cAAW,UACpF;AAAA,gBAAU,QAAQ,MAAM,IAAI,oBAAC,eAAY,QAAgB,UAAoB,IAAK;AAAA,MAClF,YAAY,SAAS,qBAAC,gBAAa;AAAA,4BAAC,aAAa,SAAb,EAAqB,SAAO,MAAC,+BAAC,WAAQ,UAAoB;AAAA;AAAA,UAAO,oBAAC,QAAK,MAAK,QAAO,MAAK,MAAK;AAAA,WAAE,GAAU;AAAA,QAAuB,oBAAC,aAAa,SAAb,EAAqB,kBAAkB,WAAS;AAAE,gBAAM,eAAe;AAAG,iBAAO,SAAS,MAAM;AAAA,QAAE,GAAI,sBAAY,IAAI,UAAQ,oBAAC,aAAa,MAAb,EAAgC,UAAU,MAAM;AACnV,cAAI,OAAO,MAAM,qBAAqB,cAAe,QAAO,SAAS,QAAQ,CAAC,EAAE,GAAG,MAAM;AACvF,kBAAM,YAAY,OAAO,OAAO,MAAM;AACtC,gBAAI,CAAC,UAAW,QAAO;AACvB,gBAAI,QAAQ,GAAG,IAAI,QAAQ,GAAG,UAAU,EAAE;AAC1C,mBAAO,MAAM,QAAQ,KAAK,CAAC,MAAM,OAAO,eAAe,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,SAAS,EAAG,SAAQ,GAAG,IAAI,QAAQ,MAAM,MAAM,CAAC;AACrI,eAAG,OAAO,MAAM,KAAK,UAAU,OAAO,CAAC;AACvC,eAAG,aAAa,cAAc,OAAO,GAAG,KAAK,MAAM,MAAM,CAAC,CAAC;AAC3D,mBAAO;AAAA,UACT,CAAC;AACD,eAAK,OAAO,MAAM;AAAA,QACpB,GAAI,eAAK,SAXmT,KAAK,EAWlT,CAAoB,GAAE;AAAA,SAAuB,IAAkB;AAAA,MAC7E,UAAU,UAAU,OAAO,OAAO,MAAM,cAAc,oBAAC,eAAY,QAAgB,UAAoB,MAAK,YAAW,SAAS,WAAW,IAAK;AAAA,MAChJ,SAAS,UAAU,OAAO,OAAO,MAAM,aAAa,oBAAC,eAAY,QAAgB,UAAoB,MAAK,WAAU,SAAS,UAAU,IAAK;AAAA,MAC5I,UAAU,OAAO,IAAI,OAAO,oBAAoB,UAAU,IAAI,MAAM,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,IAAI,CAAC,IAAI;AAAA,OACpI,IAAS;AAAA,IACR,UAAU,SAAS,IAAI,qBAAC,SAAI,WAAU,uCAAsC,MAAK,SAAQ,cAAW,WAAU;AAAA,0BAAC,WAAQ,UAAU,YAAY,CAAC,QAAQ,IAAI,EAAE,KAAK,GAAG,cAAW,QAAO,aAAa,WAAS,MAAM,eAAe,GAAG,SAAS,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,GAAG,8BAAC,QAAK,MAAK,QAAO,MAAK,MAAK,GAAE;AAAA,MAAU,oBAAC,WAAQ,UAAU,YAAY,CAAC,QAAQ,IAAI,EAAE,KAAK,GAAG,cAAW,QAAO,aAAa,WAAS,MAAM,eAAe,GAAG,SAAS,MAAM,QAAQ,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,GAAG,8BAAC,QAAK,MAAK,QAAO,MAAK,MAAK,GAAE;AAAA,OAAU,IAAS;AAAA,IAC7hB,UAAU,SAAS,UAAU,OAAO,OAAO,MAAM,aAAa,oBAAC,sBAAmB,QAAgB,UAAoB,IAAK;AAAA,KAC9H;AACF;",
+  "names": []
+}

package/dist/components/richTextEditor/MentionSuggestions.cjs

@@ -0,0 +1,96 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MentionSuggestions_exports = {};
+__export(MentionSuggestions_exports, {
+  MentionSuggestions: () => MentionSuggestions
+});
+module.exports = __toCommonJS(MentionSuggestions_exports);
+var React = __toESM(require("react"), 1);
+var import_Button = require("../button/Button");
+var import_jsx_runtime = require("react/jsx-runtime");
+function MentionSuggestions({ editor, mentions }) {
+  const [query, setQuery] = React.useState(null);
+  const [active, setActive] = React.useState(0);
+  const matches = mentions.filter((person) => person.label.toLowerCase().includes(query?.text.toLowerCase() ?? ""));
+  const activeIndex = Math.min(active, Math.max(0, matches.length - 1));
+  const state = React.useRef({ query, active, matches });
+  state.current = { query, active: activeIndex, matches };
+  React.useEffect(() => {
+    const update = () => {
+      const selection = editor.state.selection;
+      if (!selection.empty || !editor.isEditable) {
+        setQuery(null);
+        return;
+      }
+      const before = selection.$from.parent.textBetween(0, selection.$from.parentOffset, "", "\uFFFC");
+      const match = before.match(/(?:^|\s)@([^@\s]*)$/);
+      setQuery(match ? { text: match[1], from: selection.from - match[1].length - 1, to: selection.from } : null);
+      setActive(0);
+    };
+    const keydown = (event) => {
+      const current = state.current;
+      if (!current.query) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        setQuery(null);
+      }
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        setActive((index) => Math.max(0, Math.min(current.matches.length - 1, index + (event.key === "ArrowDown" ? 1 : -1))));
+      }
+      if (event.key === "Enter" && current.matches.length) {
+        event.preventDefault();
+        event.stopPropagation();
+        editor.chain().focus().insertContentAt({ from: current.query.from, to: current.query.to }, [{ type: "dsxMention", attrs: { userId: current.matches[current.active]?.id } }, { type: "text", text: " " }]).run();
+        setQuery(null);
+      }
+    };
+    editor.on("transaction", update);
+    editor.view.dom.addEventListener("keydown", keydown, true);
+    return () => {
+      editor.off("transaction", update);
+      editor.view.dom.removeEventListener("keydown", keydown, true);
+    };
+  }, [editor]);
+  if (!query) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-editor-tools__suggestions", role: "group", "aria-label": "Mention suggestions", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+      "People matching @",
+      query.text
+    ] }),
+    matches.map((person, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", variant: activeIndex === index ? "secondary" : "ghost", onMouseDown: (event) => event.preventDefault(), onClick: () => {
+      editor.chain().focus().insertContentAt({ from: query.from, to: query.to }, [{ type: "dsxMention", attrs: { userId: person.id } }, { type: "text", text: " " }]).run();
+      setQuery(null);
+    }, children: person.label }, person.id)),
+    !matches.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", children: "No matching people" }) : null
+  ] });
+}
+//# sourceMappingURL=MentionSuggestions.cjs.map

package/dist/components/richTextEditor/MentionSuggestions.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/richTextEditor/MentionSuggestions.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport type { Editor } from '@tiptap/react'\nimport type { EditorMention } from './editorTokens'\nimport { Button } from '../button/Button'\n\nexport function MentionSuggestions({ editor, mentions }: { editor: Editor; mentions: readonly EditorMention[] }) {\n  const [query, setQuery] = React.useState<{ text: string; from: number; to: number } | null>(null)\n  const [active, setActive] = React.useState(0)\n  const matches = mentions.filter(person => person.label.toLowerCase().includes(query?.text.toLowerCase() ?? ''))\n  const activeIndex = Math.min(active, Math.max(0, matches.length - 1))\n  const state = React.useRef({ query, active, matches })\n  state.current = { query, active: activeIndex, matches }\n  React.useEffect(() => {\n    const update = () => {\n      const selection = editor.state.selection\n      if (!selection.empty || !editor.isEditable) { setQuery(null); return }\n      const before = selection.$from.parent.textBetween(0, selection.$from.parentOffset, '', '\\ufffc')\n      const match = before.match(/(?:^|\\s)@([^@\\s]*)$/)\n      setQuery(match ? { text: match[1], from: selection.from - match[1].length - 1, to: selection.from } : null)\n      setActive(0)\n    }\n    const keydown = (event: KeyboardEvent) => {\n      const current = state.current\n      if (!current.query) return\n      if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); setQuery(null) }\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); event.stopPropagation(); setActive(index => Math.max(0, Math.min(current.matches.length - 1, index + (event.key === 'ArrowDown' ? 1 : -1)))) }\n      if (event.key === 'Enter' && current.matches.length) {\n        event.preventDefault(); event.stopPropagation()\n        editor.chain().focus().insertContentAt({ from: current.query.from, to: current.query.to }, [{ type: 'dsxMention', attrs: { userId: current.matches[current.active]?.id } }, { type: 'text', text: ' ' }]).run()\n        setQuery(null)\n      }\n    }\n    editor.on('transaction', update)\n    editor.view.dom.addEventListener('keydown', keydown, true)\n    return () => { editor.off('transaction', update); editor.view.dom.removeEventListener('keydown', keydown, true) }\n  }, [editor])\n  if (!query) return null\n  return <div className=\"dsx-editor-tools__suggestions\" role=\"group\" aria-label=\"Mention suggestions\">\n    <span>People matching @{query.text}</span>\n    {matches.map((person, index) => <Button type=\"button\" key={person.id} size=\"lg\" variant={activeIndex === index ? 'secondary' : 'ghost'} onMouseDown={event => event.preventDefault()} onClick={() => { editor.chain().focus().insertContentAt({ from: query.from, to: query.to }, [{ type: 'dsxMention', attrs: { userId: person.id } }, { type: 'text', text: ' ' }]).run(); setQuery(null) }}>{person.label}</Button>)}\n    {!matches.length ? <span role=\"status\">No matching people</span> : null}\n  </div>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/richTextEditor/MentionSuggestions.d.cts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/react';
+import type { EditorMention } from './editorTokens.cjs';
+export declare function MentionSuggestions({ editor, mentions }: {
+    editor: Editor;
+    mentions: readonly EditorMention[];
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MentionSuggestions.d.cts.map

package/dist/components/richTextEditor/MentionSuggestions.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionSuggestions.d.cts","sourceRoot":"","sources":["../../../src/components/richTextEditor/MentionSuggestions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGnD,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAA;CAAE,kDAqC9G"}

package/dist/components/richTextEditor/MentionSuggestions.d.mts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/react';
+import type { EditorMention } from './editorTokens.js';
+export declare function MentionSuggestions({ editor, mentions }: {
+    editor: Editor;
+    mentions: readonly EditorMention[];
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MentionSuggestions.d.mts.map

package/dist/components/richTextEditor/MentionSuggestions.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionSuggestions.d.mts","sourceRoot":"","sources":["../../../src/components/richTextEditor/MentionSuggestions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGnD,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAA;CAAE,kDAqC9G"}

package/dist/components/richTextEditor/MentionSuggestions.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/react';
+import type { EditorMention } from './editorTokens.js';
+export declare function MentionSuggestions({ editor, mentions }: {
+    editor: Editor;
+    mentions: readonly EditorMention[];
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MentionSuggestions.d.ts.map

package/dist/components/richTextEditor/MentionSuggestions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionSuggestions.d.ts","sourceRoot":"","sources":["../../../src/components/richTextEditor/MentionSuggestions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGnD,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAA;CAAE,kDAqC9G"}