@cratis/components 4.22.1 → 4.23.0

package/dist/esm/MarkdownEditor/MarkdownEditorParts.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, TextareaHTMLAttributes } from 'react';
+/** Attributes passed through to one part of a {@link MarkdownEditor}, including `data-*` attributes. */
+export type MarkdownEditorPartAttributes<TElement> = HTMLAttributes<TElement> & {
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+};
+/**
+ * Stable Cratis-owned parts for styling a {@link MarkdownEditor}. Each is marked with a matching
+ * `data-cratis-part` attribute, and what is passed here is spread onto that element - the editor's own
+ * value, selection and event wiring always win.
+ */
+export interface MarkdownEditorParts {
+    /** The editor's single bordered box. Carries `data-disabled`, `data-invalid`, `data-readonly` and `data-busy`. */
+    root?: MarkdownEditorPartAttributes<HTMLDivElement>;
+    /** The formatting toolbar. */
+    toolbar?: MarkdownEditorPartAttributes<HTMLDivElement>;
+    /** Every formatting button in the toolbar. Carries `data-disabled`. */
+    format?: MarkdownEditorPartAttributes<HTMLButtonElement>;
+    /** The round button that swaps between the markdown and the preview. Carries `data-pressed`. */
+    toggle?: MarkdownEditorPartAttributes<HTMLButtonElement>;
+    /** The writing area. Carries `data-disabled`, `data-invalid` and `data-readonly`. */
+    textarea?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange'> & {
+        [attribute: `data-${string}`]: string | number | boolean | undefined;
+    };
+    /** The rendered preview pane. */
+    preview?: MarkdownEditorPartAttributes<HTMLDivElement>;
+    /** The status line announcing uploads in progress. */
+    status?: MarkdownEditorPartAttributes<HTMLDivElement>;
+    /** The suggestion list that opens at the caret while a completion is typed. */
+    suggestions?: MarkdownEditorPartAttributes<HTMLDivElement>;
+    /** Every entry in the suggestion list. Carries `data-selected` on the highlighted one. */
+    suggestion?: MarkdownEditorPartAttributes<HTMLDivElement>;
+}
+//# sourceMappingURL=MarkdownEditorParts.d.ts.map

package/dist/esm/MarkdownEditor/MarkdownEditorParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditorParts.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownEditorParts.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAEpE,wGAAwG;AACxG,MAAM,MAAM,4BAA4B,CAAC,QAAQ,IAAI,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5E,CAAC,SAAS,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACxE,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAChC,kHAAkH;IAClH,IAAI,CAAC,EAAE,4BAA4B,CAAC,cAAc,CAAC,CAAC;IAEpD,8BAA8B;IAC9B,OAAO,CAAC,EAAE,4BAA4B,CAAC,cAAc,CAAC,CAAC;IAEvD,uEAAuE;IACvE,MAAM,CAAC,EAAE,4BAA4B,CAAC,iBAAiB,CAAC,CAAC;IAEzD,gGAAgG;IAChG,MAAM,CAAC,EAAE,4BAA4B,CAAC,iBAAiB,CAAC,CAAC;IAEzD,qFAAqF;IACrF,QAAQ,CAAC,EAAE,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,GAAG;QAClG,CAAC,SAAS,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;KACxE,CAAC;IAEF,iCAAiC;IACjC,OAAO,CAAC,EAAE,4BAA4B,CAAC,cAAc,CAAC,CAAC;IAEvD,sDAAsD;IACtD,MAAM,CAAC,EAAE,4BAA4B,CAAC,cAAc,CAAC,CAAC;IAEtD,+EAA+E;IAC/E,WAAW,CAAC,EAAE,4BAA4B,CAAC,cAAc,CAAC,CAAC;IAE3D,0FAA0F;IAC1F,UAAU,CAAC,EAAE,4BAA4B,CAAC,cAAc,CAAC,CAAC;CAC7D"}

package/dist/esm/MarkdownEditor/MarkdownEditorParts.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=MarkdownEditorParts.js.map

package/dist/esm/MarkdownEditor/MarkdownEditorParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditorParts.js","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownEditorParts.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { HTMLAttributes, TextareaHTMLAttributes } from 'react';\n\n/** Attributes passed through to one part of a {@link MarkdownEditor}, including `data-*` attributes. */\nexport type MarkdownEditorPartAttributes<TElement> = HTMLAttributes<TElement> & {\n    [attribute: `data-${string}`]: string | number | boolean | undefined;\n};\n\n/**\n * Stable Cratis-owned parts for styling a {@link MarkdownEditor}. Each is marked with a matching\n * `data-cratis-part` attribute, and what is passed here is spread onto that element - the editor's own\n * value, selection and event wiring always win.\n */\nexport interface MarkdownEditorParts {\n    /** The editor's single bordered box. Carries `data-disabled`, `data-invalid`, `data-readonly` and `data-busy`. */\n    root?: MarkdownEditorPartAttributes<HTMLDivElement>;\n\n    /** The formatting toolbar. */\n    toolbar?: MarkdownEditorPartAttributes<HTMLDivElement>;\n\n    /** Every formatting button in the toolbar. Carries `data-disabled`. */\n    format?: MarkdownEditorPartAttributes<HTMLButtonElement>;\n\n    /** The round button that swaps between the markdown and the preview. Carries `data-pressed`. */\n    toggle?: MarkdownEditorPartAttributes<HTMLButtonElement>;\n\n    /** The writing area. Carries `data-disabled`, `data-invalid` and `data-readonly`. */\n    textarea?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange'> & {\n        [attribute: `data-${string}`]: string | number | boolean | undefined;\n    };\n\n    /** The rendered preview pane. */\n    preview?: MarkdownEditorPartAttributes<HTMLDivElement>;\n\n    /** The status line announcing uploads in progress. */\n    status?: MarkdownEditorPartAttributes<HTMLDivElement>;\n\n    /** The suggestion list that opens at the caret while a completion is typed. */\n    suggestions?: MarkdownEditorPartAttributes<HTMLDivElement>;\n\n    /** Every entry in the suggestion list. Carries `data-selected` on the highlighted one. */\n    suggestion?: MarkdownEditorPartAttributes<HTMLDivElement>;\n}\n"]}

package/dist/esm/MarkdownEditor/MarkdownFormat.d.ts

@@ -0,0 +1,29 @@
+/**
+ * A formatting action offered by the {@link MarkdownEditor}'s toolbar. Each one edits the markdown
+ * around the current selection, and applying it to text that already carries it takes it off again.
+ */
+export declare enum MarkdownFormat {
+    /** Wraps the selection in `**`. */
+    Bold = "bold",
+    /** Wraps the selection in `_`. */
+    Italic = "italic",
+    /** Wraps the selection in `~~`. */
+    Strikethrough = "strikethrough",
+    /** Prefixes the selected lines with `## `. */
+    Heading = "heading",
+    /** Prefixes the selected lines with `> `. */
+    Quote = "quote",
+    /** Wraps the selection in backticks. */
+    Code = "code",
+    /** Fences the selected lines in a code block. */
+    CodeBlock = "codeBlock",
+    /** Turns the selection into a link and selects the address to type over. */
+    Link = "link",
+    /** Prefixes the selected lines with `- `. */
+    BulletList = "bulletList",
+    /** Numbers the selected lines `1. `, `2. `, … */
+    NumberedList = "numberedList",
+    /** Prefixes the selected lines with `- [ ] `. */
+    TaskList = "taskList"
+}
+//# sourceMappingURL=MarkdownFormat.d.ts.map

package/dist/esm/MarkdownEditor/MarkdownFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownFormat.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownFormat.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,oBAAY,cAAc;IACtB,mCAAmC;IACnC,IAAI,SAAS;IAEb,kCAAkC;IAClC,MAAM,WAAW;IAEjB,mCAAmC;IACnC,aAAa,kBAAkB;IAE/B,8CAA8C;IAC9C,OAAO,YAAY;IAEnB,6CAA6C;IAC7C,KAAK,UAAU;IAEf,wCAAwC;IACxC,IAAI,SAAS;IAEb,iDAAiD;IACjD,SAAS,cAAc;IAEvB,4EAA4E;IAC5E,IAAI,SAAS;IAEb,6CAA6C;IAC7C,UAAU,eAAe;IAEzB,iDAAiD;IACjD,YAAY,iBAAiB;IAE7B,iDAAiD;IACjD,QAAQ,aAAa;CACxB"}

package/dist/esm/MarkdownEditor/MarkdownFormat.js

@@ -0,0 +1,17 @@
+var MarkdownFormat;
+(function (MarkdownFormat) {
+    MarkdownFormat["Bold"] = "bold";
+    MarkdownFormat["Italic"] = "italic";
+    MarkdownFormat["Strikethrough"] = "strikethrough";
+    MarkdownFormat["Heading"] = "heading";
+    MarkdownFormat["Quote"] = "quote";
+    MarkdownFormat["Code"] = "code";
+    MarkdownFormat["CodeBlock"] = "codeBlock";
+    MarkdownFormat["Link"] = "link";
+    MarkdownFormat["BulletList"] = "bulletList";
+    MarkdownFormat["NumberedList"] = "numberedList";
+    MarkdownFormat["TaskList"] = "taskList";
+})(MarkdownFormat || (MarkdownFormat = {}));
+
+export { MarkdownFormat };
+//# sourceMappingURL=MarkdownFormat.js.map

package/dist/esm/MarkdownEditor/MarkdownFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownFormat.js","sources":["../../../MarkdownEditor/MarkdownFormat.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * A formatting action offered by the {@link MarkdownEditor}'s toolbar. Each one edits the markdown\n * around the current selection, and applying it to text that already carries it takes it off again.\n */\nexport enum MarkdownFormat {\n    /** Wraps the selection in `**`. */\n    Bold = 'bold',\n\n    /** Wraps the selection in `_`. */\n    Italic = 'italic',\n\n    /** Wraps the selection in `~~`. */\n    Strikethrough = 'strikethrough',\n\n    /** Prefixes the selected lines with `## `. */\n    Heading = 'heading',\n\n    /** Prefixes the selected lines with `> `. */\n    Quote = 'quote',\n\n    /** Wraps the selection in backticks. */\n    Code = 'code',\n\n    /** Fences the selected lines in a code block. */\n    CodeBlock = 'codeBlock',\n\n    /** Turns the selection into a link and selects the address to type over. */\n    Link = 'link',\n\n    /** Prefixes the selected lines with `- `. */\n    BulletList = 'bulletList',\n\n    /** Numbers the selected lines `1. `, `2. `, … */\n    NumberedList = 'numberedList',\n\n    /** Prefixes the selected lines with `- [ ] `. */\n    TaskList = 'taskList',\n}\n"],"names":[],"mappings":"IAOY;AAAZ,CAAA,UAAY,cAAc,EAAA;AAEtB,IAAA,cAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AAGb,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AAGjB,IAAA,cAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAG/B,IAAA,cAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AAGnB,IAAA,cAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AAGf,IAAA,cAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AAGb,IAAA,cAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AAGvB,IAAA,cAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AAGb,IAAA,cAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAGzB,IAAA,cAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAG7B,IAAA,cAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACzB,CAAC,EAjCW,cAAc,KAAd,cAAc,GAAA,EAAA,CAAA,CAAA;;"}

package/dist/esm/MarkdownEditor/MarkdownLineBlock.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The whole lines a selection touches - the unit that line formats such as lists and quotes apply to.
+ */
+export interface MarkdownLineBlock {
+    /** Where the first touched line starts. */
+    start: number;
+    /** Where the last touched line ends, before its line break. */
+    end: number;
+    /** The touched lines, without their line breaks. */
+    lines: string[];
+}
+//# sourceMappingURL=MarkdownLineBlock.d.ts.map

package/dist/esm/MarkdownEditor/MarkdownLineBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownLineBlock.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownLineBlock.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IAEd,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;IAEZ,oDAAoD;IACpD,KAAK,EAAE,MAAM,EAAE,CAAC;CACnB"}

package/dist/esm/MarkdownEditor/MarkdownLineBlock.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=MarkdownLineBlock.js.map

package/dist/esm/MarkdownEditor/MarkdownLineBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownLineBlock.js","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownLineBlock.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * The whole lines a selection touches - the unit that line formats such as lists and quotes apply to.\n */\nexport interface MarkdownLineBlock {\n    /** Where the first touched line starts. */\n    start: number;\n\n    /** Where the last touched line ends, before its line break. */\n    end: number;\n\n    /** The touched lines, without their line breaks. */\n    lines: string[];\n}\n"]}

package/dist/esm/MarkdownEditor/MarkdownModeToggle.d.ts

@@ -0,0 +1,22 @@
+import { MarkdownEditorMode } from './MarkdownEditorMode.js';
+import type { MarkdownEditorPartAttributes } from './MarkdownEditorParts.js';
+/** Props for {@link MarkdownModeToggle}. */
+export interface MarkdownModeToggleProps {
+    /** The mode being shown. */
+    mode: MarkdownEditorMode;
+    /** Called with the mode to show next. */
+    onModeChange: (mode: MarkdownEditorMode) => void;
+    /** What the button says while the markdown is showing. */
+    showPreviewLabel: string;
+    /** What the button says while the preview is showing. */
+    showMarkdownLabel: string;
+    /** Pass-through attributes for the button. */
+    parts?: MarkdownEditorPartAttributes<HTMLButtonElement>;
+}
+/**
+ * The round button in the editor's top-right corner that swaps between the markdown and its preview.
+ * A toggle rather than two buttons: `aria-pressed` says whether the preview is showing and the label
+ * names what pressing it does, so assistive technology announces both the state and the action.
+ */
+export declare const MarkdownModeToggle: ({ mode, onModeChange, showPreviewLabel, showMarkdownLabel, parts, }: MarkdownModeToggleProps) => import("react").JSX.Element;
+//# sourceMappingURL=MarkdownModeToggle.d.ts.map

package/dist/esm/MarkdownEditor/MarkdownModeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownModeToggle.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownModeToggle.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAAuB,CAAC;AAG1E,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACpC,4BAA4B;IAC5B,IAAI,EAAE,kBAAkB,CAAC;IAEzB,yCAAyC;IACzC,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEjD,0DAA0D;IAC1D,gBAAgB,EAAE,MAAM,CAAC;IAEzB,yDAAyD;IACzD,iBAAiB,EAAE,MAAM,CAAC;IAE1B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,4BAA4B,CAAC,iBAAiB,CAAC,CAAC;CAC3D;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,wEAM5B,uBAAuB,gCAqBzB,CAAC"}

package/dist/esm/MarkdownEditor/MarkdownModeToggle.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { FaPen, FaEye } from 'react-icons/fa6';
+import { classNames } from '../ClassNames/classNames.js';
+import { MarkdownEditorMode } from './MarkdownEditorMode.js';
+import { nextMarkdownEditorMode } from './nextMarkdownEditorMode.js';
+
+const MarkdownModeToggle = ({ mode, onModeChange, showPreviewLabel, showMarkdownLabel, parts, }) => {
+    const previewing = mode === MarkdownEditorMode.Preview;
+    const label = previewing ? showMarkdownLabel : showPreviewLabel;
+    return (jsx("button", { ...parts, type: 'button', className: classNames('cratis-markdown-editor__toggle', parts?.className), "data-cratis-part": 'toggle', "data-pressed": previewing || undefined, "aria-pressed": previewing, "aria-label": label, title: label, onClick: () => onModeChange(nextMarkdownEditorMode(mode)), children: jsx("span", { className: 'cratis-markdown-editor__toggle-icon', "aria-hidden": 'true', children: previewing ? jsx(FaPen, {}) : jsx(FaEye, {}) }) }));
+};
+
+export { MarkdownModeToggle };
+//# sourceMappingURL=MarkdownModeToggle.js.map

package/dist/esm/MarkdownEditor/MarkdownModeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownModeToggle.js","sources":["../../../MarkdownEditor/MarkdownModeToggle.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { FaEye, FaPen } from 'react-icons/fa6';\nimport { classNames } from '../ClassNames/classNames';\nimport { MarkdownEditorMode } from './MarkdownEditorMode';\nimport type { MarkdownEditorPartAttributes } from './MarkdownEditorParts';\nimport { nextMarkdownEditorMode } from './nextMarkdownEditorMode';\n\n/** Props for {@link MarkdownModeToggle}. */\nexport interface MarkdownModeToggleProps {\n    /** The mode being shown. */\n    mode: MarkdownEditorMode;\n\n    /** Called with the mode to show next. */\n    onModeChange: (mode: MarkdownEditorMode) => void;\n\n    /** What the button says while the markdown is showing. */\n    showPreviewLabel: string;\n\n    /** What the button says while the preview is showing. */\n    showMarkdownLabel: string;\n\n    /** Pass-through attributes for the button. */\n    parts?: MarkdownEditorPartAttributes<HTMLButtonElement>;\n}\n\n/**\n * The round button in the editor's top-right corner that swaps between the markdown and its preview.\n * A toggle rather than two buttons: `aria-pressed` says whether the preview is showing and the label\n * names what pressing it does, so assistive technology announces both the state and the action.\n */\nexport const MarkdownModeToggle = ({\n    mode,\n    onModeChange,\n    showPreviewLabel,\n    showMarkdownLabel,\n    parts,\n}: MarkdownModeToggleProps) => {\n    const previewing = mode === MarkdownEditorMode.Preview;\n    const label = previewing ? showMarkdownLabel : showPreviewLabel;\n\n    return (\n        <button\n            {...parts}\n            type='button'\n            className={classNames('cratis-markdown-editor__toggle', parts?.className)}\n            data-cratis-part='toggle'\n            data-pressed={previewing || undefined}\n            aria-pressed={previewing}\n            aria-label={label}\n            title={label}\n            onClick={() => onModeChange(nextMarkdownEditorMode(mode))}\n        >\n            <span className='cratis-markdown-editor__toggle-icon' aria-hidden='true'>\n                {previewing ? <FaPen /> : <FaEye />}\n            </span>\n        </button>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAgCO,MAAM,kBAAkB,GAAG,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,GACiB,KAAI;AAC1B,IAAA,MAAM,UAAU,GAAG,IAAI,KAAK,kBAAkB,CAAC,OAAO;IACtD,MAAM,KAAK,GAAG,UAAU,GAAG,iBAAiB,GAAG,gBAAgB;AAE/D,IAAA,QACIA,GAAA,CAAA,QAAA,EAAA,EAAA,GACQ,KAAK,EACT,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,gCAAgC,EAAE,KAAK,EAAE,SAAS,CAAC,EAAA,kBAAA,EACxD,QAAQ,EAAA,cAAA,EACX,UAAU,IAAI,SAAS,EAAA,cAAA,EACvB,UAAU,EAAA,YAAA,EACZ,KAAK,EACjB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,MAAM,YAAY,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,EAAA,QAAA,EAEzDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qCAAqC,EAAA,aAAA,EAAa,MAAM,EAAA,QAAA,EACnE,UAAU,GAAGA,GAAA,CAAC,KAAK,EAAA,EAAA,CAAG,GAAGA,IAAC,KAAK,EAAA,EAAA,CAAG,EAAA,CAChC,EAAA,CACF;AAEjB;;"}

package/dist/esm/MarkdownEditor/MarkdownSuggestion.d.ts

@@ -0,0 +1,18 @@
+/**
+ * One entry in the list a {@link MarkdownCompletion} offers while its trigger is being typed. The host
+ * maps whatever it looks up - an issue, a person, a document - into this shape; the editor renders it
+ * and writes {@link insertText} into the markdown when it is picked.
+ */
+export interface MarkdownSuggestion {
+    /** Identifies the suggestion within one list. Used as its key and in its element id. */
+    id: string;
+    /** The text that replaces the trigger and everything typed after it when the suggestion is picked. */
+    insertText: string;
+    /** The main text of the entry, such as a title or a name. */
+    label: string;
+    /** Secondary text shown ahead of the label in a monospace face, such as `owner/repository#12`. */
+    detail?: string;
+    /** A short annotation shown after the label, such as the kind of thing suggested. */
+    annotation?: string;
+}
+//# sourceMappingURL=MarkdownSuggestion.d.ts.map

package/dist/esm/MarkdownEditor/MarkdownSuggestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownSuggestion.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownSuggestion.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IAC/B,wFAAwF;IACxF,EAAE,EAAE,MAAM,CAAC;IAEX,sGAAsG;IACtG,UAAU,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IAEd,kGAAkG;IAClG,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,qFAAqF;IACrF,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/esm/MarkdownEditor/MarkdownSuggestion.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=MarkdownSuggestion.js.map

package/dist/esm/MarkdownEditor/MarkdownSuggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownSuggestion.js","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownSuggestion.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * One entry in the list a {@link MarkdownCompletion} offers while its trigger is being typed. The host\n * maps whatever it looks up - an issue, a person, a document - into this shape; the editor renders it\n * and writes {@link insertText} into the markdown when it is picked.\n */\nexport interface MarkdownSuggestion {\n    /** Identifies the suggestion within one list. Used as its key and in its element id. */\n    id: string;\n\n    /** The text that replaces the trigger and everything typed after it when the suggestion is picked. */\n    insertText: string;\n\n    /** The main text of the entry, such as a title or a name. */\n    label: string;\n\n    /** Secondary text shown ahead of the label in a monospace face, such as `owner/repository#12`. */\n    detail?: string;\n\n    /** A short annotation shown after the label, such as the kind of thing suggested. */\n    annotation?: string;\n}\n"]}

package/dist/esm/MarkdownEditor/MarkdownSuggestionList.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { CaretPosition } from './CaretPosition.js';
+import type { MarkdownEditorParts } from './MarkdownEditorParts.js';
+import type { MarkdownSuggestion } from './MarkdownSuggestion.js';
+/** Props for {@link MarkdownSuggestionList}. */
+export interface MarkdownSuggestionListProps {
+    /** The list's element id, which the writing area points at. */
+    id: string;
+    /** Builds the element id of the suggestion at an index, which the writing area points at when it is highlighted. */
+    optionId: (index: number) => string;
+    /** The list's accessible name. */
+    label: string;
+    /** The suggestions to show. */
+    suggestions: readonly MarkdownSuggestion[];
+    /** The index of the highlighted suggestion. */
+    activeIndex: number;
+    /** Where the caret is. */
+    caret: CaretPosition;
+    /** The stacking order to open at - above any dialog the editor sits in. */
+    zIndex: string;
+    /** Where to portal the list to. */
+    container: HTMLElement;
+    /** Highlights a suggestion as the pointer moves onto it. */
+    onHighlight: (index: number) => void;
+    /** Picks a suggestion. */
+    onChoose: (suggestion: MarkdownSuggestion) => void;
+    /** Renders the content of a suggestion in place of the default. */
+    renderSuggestion?: (suggestion: MarkdownSuggestion) => ReactNode;
+    /** Pass-through attributes for the list and its entries. */
+    parts?: Pick<MarkdownEditorParts, 'suggestions' | 'suggestion'>;
+}
+/**
+ * The list of suggestions that opens at the caret while a completion is typed.
+ *
+ * Portaled out of the editor so no scrolling or clipping ancestor cuts it off, and marked as a top
+ * layer so a modal dialog around the editor neither hides it from assistive technology nor closes when
+ * it is clicked. Focus never leaves the writing area: the list is driven through
+ * `aria-activedescendant`, and pressing an entry does not take focus.
+ */
+export declare const MarkdownSuggestionList: ({ id, optionId, label, suggestions, activeIndex, caret, zIndex, container, onHighlight, onChoose, renderSuggestion, parts, }: MarkdownSuggestionListProps) => import("react").ReactPortal;
+//# sourceMappingURL=MarkdownSuggestionList.d.ts.map

package/dist/esm/MarkdownEditor/MarkdownSuggestionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownSuggestionList.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownSuggestionList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAK/D,gDAAgD;AAChD,MAAM,WAAW,2BAA2B;IACxC,+DAA+D;IAC/D,EAAE,EAAE,MAAM,CAAC;IAEX,oHAAoH;IACpH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEpC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IAEd,+BAA+B;IAC/B,WAAW,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAE3C,+CAA+C;IAC/C,WAAW,EAAE,MAAM,CAAC;IAEpB,0BAA0B;IAC1B,KAAK,EAAE,aAAa,CAAC;IAErB,2EAA2E;IAC3E,MAAM,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,SAAS,EAAE,WAAW,CAAC;IAEvB,4DAA4D;IAC5D,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEnD,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEjE,4DAA4D;IAC5D,KAAK,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,aAAa,GAAG,YAAY,CAAC,CAAC;CACnE;AAYD;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,iIAahC,2BAA2B,gCAwC7B,CAAC"}

package/dist/esm/MarkdownEditor/MarkdownSuggestionList.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { classNames } from '../ClassNames/classNames.js';
+
+const roomBelow = 240;
+const DefaultSuggestion = ({ suggestion }) => (jsxs(Fragment, { children: [suggestion.detail && jsx("span", { className: 'cratis-markdown-editor__suggestion-detail', children: suggestion.detail }), jsx("span", { className: 'cratis-markdown-editor__suggestion-label', children: suggestion.label }), suggestion.annotation && (jsx("span", { className: 'cratis-markdown-editor__suggestion-annotation', children: suggestion.annotation }))] }));
+const MarkdownSuggestionList = ({ id, optionId, label, suggestions, activeIndex, caret, zIndex, container, onHighlight, onChoose, renderSuggestion, parts, }) => {
+    const opensAbove = caret.bottom + roomBelow > window.innerHeight && caret.top > window.innerHeight - caret.bottom;
+    const style = {
+        ...parts?.suggestions?.style,
+        zIndex,
+        left: Math.max(0, Math.min(caret.left, window.innerWidth - 16)),
+        ...(opensAbove ? { bottom: window.innerHeight - caret.top + 4 } : { top: caret.bottom + 4 }),
+    };
+    return createPortal(jsx("div", { ...parts?.suggestions, id: id, role: 'listbox', "aria-label": label, className: classNames('cratis-markdown-editor__suggestions', parts?.suggestions?.className), "data-cratis-part": 'suggestions', "data-react-aria-top-layer": 'true', style: style, children: suggestions.map((suggestion, index) => (jsx("div", { ...parts?.suggestion, id: optionId(index), role: 'option', "aria-selected": index === activeIndex, className: classNames('cratis-markdown-editor__suggestion', parts?.suggestion?.className), "data-cratis-part": 'suggestion', "data-selected": index === activeIndex || undefined, onMouseDown: event => event.preventDefault(), onMouseEnter: () => onHighlight(index), onClick: () => onChoose(suggestion), children: renderSuggestion ? renderSuggestion(suggestion) : jsx(DefaultSuggestion, { suggestion: suggestion }) }, suggestion.id))) }), container);
+};
+
+export { MarkdownSuggestionList };
+//# sourceMappingURL=MarkdownSuggestionList.js.map

package/dist/esm/MarkdownEditor/MarkdownSuggestionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownSuggestionList.js","sources":["../../../MarkdownEditor/MarkdownSuggestionList.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { CSSProperties, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames } from '../ClassNames/classNames';\nimport type { CaretPosition } from './CaretPosition';\nimport type { MarkdownEditorParts } from './MarkdownEditorParts';\nimport type { MarkdownSuggestion } from './MarkdownSuggestion';\n\n/** Room kept below the caret before the list opens above it instead. */\nconst roomBelow = 240;\n\n/** Props for {@link MarkdownSuggestionList}. */\nexport interface MarkdownSuggestionListProps {\n    /** The list's element id, which the writing area points at. */\n    id: string;\n\n    /** Builds the element id of the suggestion at an index, which the writing area points at when it is highlighted. */\n    optionId: (index: number) => string;\n\n    /** The list's accessible name. */\n    label: string;\n\n    /** The suggestions to show. */\n    suggestions: readonly MarkdownSuggestion[];\n\n    /** The index of the highlighted suggestion. */\n    activeIndex: number;\n\n    /** Where the caret is. */\n    caret: CaretPosition;\n\n    /** The stacking order to open at - above any dialog the editor sits in. */\n    zIndex: string;\n\n    /** Where to portal the list to. */\n    container: HTMLElement;\n\n    /** Highlights a suggestion as the pointer moves onto it. */\n    onHighlight: (index: number) => void;\n\n    /** Picks a suggestion. */\n    onChoose: (suggestion: MarkdownSuggestion) => void;\n\n    /** Renders the content of a suggestion in place of the default. */\n    renderSuggestion?: (suggestion: MarkdownSuggestion) => ReactNode;\n\n    /** Pass-through attributes for the list and its entries. */\n    parts?: Pick<MarkdownEditorParts, 'suggestions' | 'suggestion'>;\n}\n\nconst DefaultSuggestion = ({ suggestion }: { suggestion: MarkdownSuggestion }) => (\n    <>\n        {suggestion.detail && <span className='cratis-markdown-editor__suggestion-detail'>{suggestion.detail}</span>}\n        <span className='cratis-markdown-editor__suggestion-label'>{suggestion.label}</span>\n        {suggestion.annotation && (\n            <span className='cratis-markdown-editor__suggestion-annotation'>{suggestion.annotation}</span>\n        )}\n    </>\n);\n\n/**\n * The list of suggestions that opens at the caret while a completion is typed.\n *\n * Portaled out of the editor so no scrolling or clipping ancestor cuts it off, and marked as a top\n * layer so a modal dialog around the editor neither hides it from assistive technology nor closes when\n * it is clicked. Focus never leaves the writing area: the list is driven through\n * `aria-activedescendant`, and pressing an entry does not take focus.\n */\nexport const MarkdownSuggestionList = ({\n    id,\n    optionId,\n    label,\n    suggestions,\n    activeIndex,\n    caret,\n    zIndex,\n    container,\n    onHighlight,\n    onChoose,\n    renderSuggestion,\n    parts,\n}: MarkdownSuggestionListProps) => {\n    const opensAbove = caret.bottom + roomBelow > window.innerHeight && caret.top > window.innerHeight - caret.bottom;\n    const style: CSSProperties = {\n        ...parts?.suggestions?.style,\n        zIndex,\n        left: Math.max(0, Math.min(caret.left, window.innerWidth - 16)),\n        ...(opensAbove ? { bottom: window.innerHeight - caret.top + 4 } : { top: caret.bottom + 4 }),\n    };\n\n    return createPortal(\n        <div\n            {...parts?.suggestions}\n            id={id}\n            role='listbox'\n            aria-label={label}\n            className={classNames('cratis-markdown-editor__suggestions', parts?.suggestions?.className)}\n            data-cratis-part='suggestions'\n            data-react-aria-top-layer='true'\n            style={style}\n        >\n            {suggestions.map((suggestion, index) => (\n                <div\n                    key={suggestion.id}\n                    {...parts?.suggestion}\n                    id={optionId(index)}\n                    role='option'\n                    aria-selected={index === activeIndex}\n                    className={classNames('cratis-markdown-editor__suggestion', parts?.suggestion?.className)}\n                    data-cratis-part='suggestion'\n                    data-selected={index === activeIndex || undefined}\n                    onMouseDown={event => event.preventDefault()}\n                    onMouseEnter={() => onHighlight(index)}\n                    onClick={() => onChoose(suggestion)}\n                >\n                    {renderSuggestion ? renderSuggestion(suggestion) : <DefaultSuggestion suggestion={suggestion} />}\n                </div>\n            ))}\n        </div>,\n        container,\n    );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;AAWA,MAAM,SAAS,GAAG,GAAG;AAyCrB,MAAM,iBAAiB,GAAG,CAAC,EAAE,UAAU,EAAsC,MACzEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,UAAU,CAAC,MAAM,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,2CAA2C,YAAE,UAAU,CAAC,MAAM,EAAA,CAAQ,EAC5GA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAE,UAAU,CAAC,KAAK,GAAQ,EACnF,UAAU,CAAC,UAAU,KAClBA,cAAM,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAAE,UAAU,CAAC,UAAU,EAAA,CAAQ,CACjG,CAAA,EAAA,CACF,CACN;AAUM,MAAM,sBAAsB,GAAG,CAAC,EACnC,EAAE,EACF,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,KAAK,EACL,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,KAAK,GACqB,KAAI;IAC9B,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM;AACjH,IAAA,MAAM,KAAK,GAAkB;AACzB,QAAA,GAAG,KAAK,EAAE,WAAW,EAAE,KAAK;QAC5B,MAAM;QACN,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,GAAG,EAAE,CAAC,CAAC;AAC/D,QAAA,IAAI,UAAU,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;KAC/F;AAED,IAAA,OAAO,YAAY,CACfA,GAAA,CAAA,KAAA,EAAA,EAAA,GACQ,KAAK,EAAE,WAAW,EACtB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,SAAS,EAAE,UAAU,CAAC,qCAAqC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,EAAA,kBAAA,EAC1E,aAAa,EAAA,2BAAA,EACJ,MAAM,EAChC,KAAK,EAAE,KAAK,EAAA,QAAA,EAEX,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,MAC/BA,GAAA,CAAA,KAAA,EAAA,EAAA,GAEQ,KAAK,EAAE,UAAU,EACrB,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,EACnB,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,KAAK,KAAK,WAAW,EACpC,SAAS,EAAE,UAAU,CAAC,oCAAoC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,CAAC,EAAA,kBAAA,EACxE,YAAY,EAAA,eAAA,EACd,KAAK,KAAK,WAAW,IAAI,SAAS,EACjD,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,cAAc,EAAE,EAC5C,YAAY,EAAE,MAAM,WAAW,CAAC,KAAK,CAAC,EACtC,OAAO,EAAE,MAAM,QAAQ,CAAC,UAAU,CAAC,EAAA,QAAA,EAElC,gBAAgB,GAAG,gBAAgB,CAAC,UAAU,CAAC,GAAGA,GAAA,CAAC,iBAAiB,IAAC,UAAU,EAAE,UAAU,EAAA,CAAI,IAZ3F,UAAU,CAAC,EAAE,CAahB,CACT,CAAC,EAAA,CACA,EACN,SAAS,CACZ;AACL;;"}

package/dist/esm/MarkdownEditor/MarkdownTextEdit.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Markdown after an edit, together with the selection the writing area should show afterwards.
+ */
+export interface MarkdownTextEdit {
+    /** The markdown after the edit. */
+    value: string;
+    /** Where the selection starts after the edit. */
+    selectionStart: number;
+    /** Where the selection ends after the edit. Equal to {@link selectionStart} for a plain caret. */
+    selectionEnd: number;
+}
+//# sourceMappingURL=MarkdownTextEdit.d.ts.map

package/dist/esm/MarkdownEditor/MarkdownTextEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownTextEdit.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownTextEdit.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IAEd,iDAAiD;IACjD,cAAc,EAAE,MAAM,CAAC;IAEvB,kGAAkG;IAClG,YAAY,EAAE,MAAM,CAAC;CACxB"}

package/dist/esm/MarkdownEditor/MarkdownTextEdit.js

@@ -0,0 +1,4 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export {};
+//# sourceMappingURL=MarkdownTextEdit.js.map

package/dist/esm/MarkdownEditor/MarkdownTextEdit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownTextEdit.js","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownTextEdit.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,qGAAqG","sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * Markdown after an edit, together with the selection the writing area should show afterwards.\n */\nexport interface MarkdownTextEdit {\n    /** The markdown after the edit. */\n    value: string;\n\n    /** Where the selection starts after the edit. */\n    selectionStart: number;\n\n    /** Where the selection ends after the edit. Equal to {@link selectionStart} for a plain caret. */\n    selectionEnd: number;\n}\n"]}

package/dist/esm/MarkdownEditor/MarkdownToolbar.d.ts

@@ -0,0 +1,23 @@
+import type { MarkdownFormat } from './MarkdownFormat.js';
+import type { MarkdownEditorLabels } from './MarkdownEditorLabels.js';
+import type { MarkdownEditorParts } from './MarkdownEditorParts.js';
+/** Props for {@link MarkdownToolbar}. */
+export interface MarkdownToolbarProps {
+    /** The formats to offer, in groups separated from each other. */
+    formats: readonly (readonly MarkdownFormat[])[];
+    /** The resolved labels. */
+    labels: Required<MarkdownEditorLabels>;
+    /** Whether the formats can be applied. */
+    disabled: boolean;
+    /** Applies a format to the writing area's selection. */
+    onFormat: (format: MarkdownFormat) => void;
+    /** Pass-through attributes for the toolbar and its buttons. */
+    parts?: Pick<MarkdownEditorParts, 'toolbar' | 'format'>;
+}
+/**
+ * The formatting toolbar above the writing area. One Tab stop: the arrow keys, Home and End move
+ * between the buttons, as the ARIA toolbar pattern describes. A button press never takes focus from
+ * the writing area, so the selection it formats stays where it was.
+ */
+export declare const MarkdownToolbar: ({ formats, labels, disabled, onFormat, parts }: MarkdownToolbarProps) => import("react").JSX.Element;
+//# sourceMappingURL=MarkdownToolbar.d.ts.map

package/dist/esm/MarkdownEditor/MarkdownToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownToolbar.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownToolbar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAAwB,CAAC;AACnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAAuB,CAAC;AAIjE,yCAAyC;AACzC,MAAM,WAAW,oBAAoB;IACjC,iEAAiE;IACjE,OAAO,EAAE,SAAS,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC;IAEhD,2BAA2B;IAC3B,MAAM,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAEvC,0CAA0C;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAElB,wDAAwD;IACxD,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAE3C,+DAA+D;IAC/D,KAAK,CAAC,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC;CAC3D;AAWD;;;;GAIG;AACH,eAAO,MAAM,eAAe,mDAAoD,oBAAoB,gCAoEnG,CAAC"}

package/dist/esm/MarkdownEditor/MarkdownToolbar.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, Fragment } from 'react';
+import { classNames } from '../ClassNames/classNames.js';
+import { formatIcons } from './formatIcons.js';
+import { formatShortcuts } from './formatShortcuts.js';
+
+const shortcutFor = (format) => {
+    for (const [letter, shortcut] of formatShortcuts) {
+        if (shortcut === format)
+            return `Control+${letter.toUpperCase()} Meta+${letter.toUpperCase()}`;
+    }
+    return undefined;
+};
+const navigationKeys = new Set(['ArrowLeft', 'ArrowRight', 'Home', 'End']);
+const MarkdownToolbar = ({ formats, labels, disabled, onFormat, parts }) => {
+    const flat = formats.flat();
+    const [focusIndex, setFocusIndex] = useState(0);
+    const buttons = useRef([]);
+    const current = Math.min(focusIndex, Math.max(flat.length - 1, 0));
+    const onKeyDown = (event) => {
+        parts?.toolbar?.onKeyDown?.(event);
+        if (!navigationKeys.has(event.key) || flat.length === 0)
+            return;
+        event.preventDefault();
+        const next = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? flat.length - 1
+                : (current + (event.key === 'ArrowRight' ? 1 : -1) + flat.length) % flat.length;
+        setFocusIndex(next);
+        buttons.current[next]?.focus();
+    };
+    const offsets = formats.map((_, groupIndex) => formats.slice(0, groupIndex).reduce((total, group) => total + group.length, 0));
+    return (jsx("div", { ...parts?.toolbar, role: 'toolbar', "aria-label": labels.toolbar, className: classNames('cratis-markdown-editor__toolbar', parts?.toolbar?.className), "data-cratis-part": 'toolbar', onKeyDown: onKeyDown, children: formats.map((group, groupIndex) => (jsxs(Fragment, { children: [groupIndex > 0 && jsx("span", { className: 'cratis-markdown-editor__separator', "aria-hidden": 'true' }), group.map((format, formatIndex) => {
+                    const index = offsets[groupIndex] + formatIndex;
+                    return (jsx("button", { ...parts?.format, ref: element => {
+                            buttons.current[index] = element;
+                        }, type: 'button', className: classNames('cratis-markdown-editor__format', parts?.format?.className), "data-cratis-part": 'format', "data-disabled": disabled || undefined, disabled: disabled, tabIndex: index === current ? 0 : -1, "aria-label": labels[format], "aria-keyshortcuts": shortcutFor(format), title: labels[format], onMouseDown: event => event.preventDefault(), onFocus: () => setFocusIndex(index), onClick: () => onFormat(format), children: jsx("span", { className: 'cratis-markdown-editor__format-icon', "aria-hidden": 'true', children: formatIcons[format] }) }, format));
+                })] }, group.join('-')))) }));
+};
+
+export { MarkdownToolbar };
+//# sourceMappingURL=MarkdownToolbar.js.map

package/dist/esm/MarkdownEditor/MarkdownToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownToolbar.js","sources":["../../../MarkdownEditor/MarkdownToolbar.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Fragment, useRef, useState, type KeyboardEvent } from 'react';\nimport { classNames } from '../ClassNames/classNames';\nimport type { MarkdownFormat } from './MarkdownFormat';\nimport type { MarkdownEditorLabels } from './MarkdownEditorLabels';\nimport type { MarkdownEditorParts } from './MarkdownEditorParts';\nimport { formatIcons } from './formatIcons';\nimport { formatShortcuts } from './formatShortcuts';\n\n/** Props for {@link MarkdownToolbar}. */\nexport interface MarkdownToolbarProps {\n    /** The formats to offer, in groups separated from each other. */\n    formats: readonly (readonly MarkdownFormat[])[];\n\n    /** The resolved labels. */\n    labels: Required<MarkdownEditorLabels>;\n\n    /** Whether the formats can be applied. */\n    disabled: boolean;\n\n    /** Applies a format to the writing area's selection. */\n    onFormat: (format: MarkdownFormat) => void;\n\n    /** Pass-through attributes for the toolbar and its buttons. */\n    parts?: Pick<MarkdownEditorParts, 'toolbar' | 'format'>;\n}\n\nconst shortcutFor = (format: MarkdownFormat) => {\n    for (const [letter, shortcut] of formatShortcuts) {\n        if (shortcut === format) return `Control+${letter.toUpperCase()} Meta+${letter.toUpperCase()}`;\n    }\n    return undefined;\n};\n\nconst navigationKeys = new Set(['ArrowLeft', 'ArrowRight', 'Home', 'End']);\n\n/**\n * The formatting toolbar above the writing area. One Tab stop: the arrow keys, Home and End move\n * between the buttons, as the ARIA toolbar pattern describes. A button press never takes focus from\n * the writing area, so the selection it formats stays where it was.\n */\nexport const MarkdownToolbar = ({ formats, labels, disabled, onFormat, parts }: MarkdownToolbarProps) => {\n    const flat = formats.flat();\n    const [focusIndex, setFocusIndex] = useState(0);\n    const buttons = useRef<(HTMLButtonElement | null)[]>([]);\n    const current = Math.min(focusIndex, Math.max(flat.length - 1, 0));\n\n    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n        parts?.toolbar?.onKeyDown?.(event);\n        if (!navigationKeys.has(event.key) || flat.length === 0) return;\n        event.preventDefault();\n        const next =\n            event.key === 'Home'\n                ? 0\n                : event.key === 'End'\n                  ? flat.length - 1\n                  : (current + (event.key === 'ArrowRight' ? 1 : -1) + flat.length) % flat.length;\n        setFocusIndex(next);\n        buttons.current[next]?.focus();\n    };\n\n    const offsets = formats.map((_, groupIndex) =>\n        formats.slice(0, groupIndex).reduce((total, group) => total + group.length, 0),\n    );\n\n    return (\n        <div\n            {...parts?.toolbar}\n            role='toolbar'\n            aria-label={labels.toolbar}\n            className={classNames('cratis-markdown-editor__toolbar', parts?.toolbar?.className)}\n            data-cratis-part='toolbar'\n            onKeyDown={onKeyDown}\n        >\n            {formats.map((group, groupIndex) => (\n                <Fragment key={group.join('-')}>\n                    {groupIndex > 0 && <span className='cratis-markdown-editor__separator' aria-hidden='true' />}\n                    {group.map((format, formatIndex) => {\n                        const index = offsets[groupIndex] + formatIndex;\n                        return (\n                            <button\n                                key={format}\n                                {...parts?.format}\n                                ref={element => {\n                                    buttons.current[index] = element;\n                                }}\n                                type='button'\n                                className={classNames('cratis-markdown-editor__format', parts?.format?.className)}\n                                data-cratis-part='format'\n                                data-disabled={disabled || undefined}\n                                disabled={disabled}\n                                tabIndex={index === current ? 0 : -1}\n                                aria-label={labels[format]}\n                                aria-keyshortcuts={shortcutFor(format)}\n                                title={labels[format]}\n                                onMouseDown={event => event.preventDefault()}\n                                onFocus={() => setFocusIndex(index)}\n                                onClick={() => onFormat(format)}\n                            >\n                                <span className='cratis-markdown-editor__format-icon' aria-hidden='true'>\n                                    {formatIcons[format]}\n                                </span>\n                            </button>\n                        );\n                    })}\n                </Fragment>\n            ))}\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/MarkdownEditor/MarkdownWritingArea.d.ts

@@ -0,0 +1,37 @@
+import type { RefObject } from 'react';
+import type { MarkdownEditorLabels } from './MarkdownEditorLabels.js';
+import type { MarkdownEditorParts } from './MarkdownEditorParts.js';
+import type { MarkdownEditorProps } from './MarkdownEditor.js';
+import type { MarkdownFormat } from './MarkdownFormat.js';
+import type { MarkdownTextEdit } from './MarkdownTextEdit.js';
+import type { MarkdownCompletionState } from './useMarkdownCompletion.js';
+import type { MarkdownUploadsState } from './useMarkdownUploads.js';
+/** Props for {@link MarkdownWritingArea}. */
+export interface MarkdownWritingAreaProps extends Pick<MarkdownEditorProps, 'value' | 'onChange' | 'onBlur' | 'placeholder' | 'autoFocus' | 'disabled' | 'readOnly' | 'invalid' | 'id' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'> {
+    /** Pass-through attributes for the textarea. */
+    parts?: MarkdownEditorParts['textarea'];
+    /** The writing area's element, which the editor formats and measures. */
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
+    /** The resolved labels. */
+    labels: Required<MarkdownEditorLabels>;
+    /** The completion being typed at the caret. */
+    completion: MarkdownCompletionState;
+    /** The uploads started from this editor. */
+    uploads: MarkdownUploadsState;
+    /** The element id of the suggestion list. */
+    suggestionsId: string;
+    /** The element id of the highlighted suggestion, while the list is open. */
+    activeOptionId?: string;
+    /** Called when the selection moves. */
+    onSelectionChange: (start: number, end: number) => void;
+    /** Applies an edit that also places the selection. */
+    onEdit: (edit: MarkdownTextEdit) => void;
+    /** Applies a format to the selection, as a keyboard shortcut asks. */
+    onFormat: (format: MarkdownFormat) => void;
+}
+/**
+ * The textarea of a {@link MarkdownEditor}, with its completion keys, formatting shortcuts, and file
+ * paste and drop.
+ */
+export declare const MarkdownWritingArea: (props: MarkdownWritingAreaProps) => import("react").JSX.Element;
+//# sourceMappingURL=MarkdownWritingArea.d.ts.map

package/dist/esm/MarkdownEditor/MarkdownWritingArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownWritingArea.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/MarkdownWritingArea.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAA4C,SAAS,EAAkB,MAAM,OAAO,CAAC;AAEjG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAAwB,CAAC;AACnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AAG3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAAyB,CAAC;AACvE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAsB,CAAC;AAEjE,6CAA6C;AAC7C,MAAM,WAAW,wBACb,SAAQ,IAAI,CACR,mBAAmB,EACjB,OAAO,GACP,UAAU,GACV,QAAQ,GACR,aAAa,GACb,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,IAAI,GACJ,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,CACvB;IACD,gDAAgD;IAChD,KAAK,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAExC,yEAAyE;IACzE,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IAEnD,2BAA2B;IAC3B,MAAM,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAEvC,+CAA+C;IAC/C,UAAU,EAAE,uBAAuB,CAAC;IAEpC,4CAA4C;IAC5C,OAAO,EAAE,oBAAoB,CAAC;IAE9B,6CAA6C;IAC7C,aAAa,EAAE,MAAM,CAAC;IAEtB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uCAAuC;IACvC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAExD,sDAAsD;IACtD,MAAM,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEzC,sEAAsE;IACtE,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAID;;;GAGG;AACH,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gCAsFlE,CAAC"}

package/dist/esm/MarkdownEditor/MarkdownWritingArea.js

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../ClassNames/classNames.js';
+import { filesIn } from './filesIn.js';
+import { formatShortcuts } from './formatShortcuts.js';
+
+const hasFiles = (event) => Array.from(event.dataTransfer.types).includes('Files');
+const MarkdownWritingArea = (props) => {
+    const { completion, uploads, textareaRef, parts } = props;
+    const disabled = props.disabled ?? false;
+    const readOnly = props.readOnly ?? false;
+    const invalid = props.invalid ?? false;
+    const reportSelection = (event) => props.onSelectionChange(event.currentTarget.selectionStart, event.currentTarget.selectionEnd);
+    const onKeyDown = (event) => {
+        parts?.onKeyDown?.(event);
+        const edit = completion.handleKeyDown(event);
+        if (edit) {
+            props.onEdit(edit);
+            return;
+        }
+        if (event.defaultPrevented || event.altKey || event.shiftKey || !(event.ctrlKey || event.metaKey))
+            return;
+        const format = formatShortcuts.get(event.key.toLowerCase());
+        if (!format || disabled || readOnly)
+            return;
+        event.preventDefault();
+        props.onFormat(format);
+    };
+    const onPaste = (event) => {
+        parts?.onPaste?.(event);
+        if (!uploads.isEnabled)
+            return;
+        const files = filesIn(event.clipboardData.items);
+        if (files.length === 0)
+            return;
+        event.preventDefault();
+        uploads.upload(files);
+    };
+    const onDrop = (event) => {
+        parts?.onDrop?.(event);
+        if (!uploads.isEnabled)
+            return;
+        const files = Array.from(event.dataTransfer.files);
+        if (files.length === 0)
+            return;
+        event.preventDefault();
+        uploads.upload(files);
+    };
+    return (jsx("textarea", { ...parts, ref: textareaRef, id: props.id, className: classNames('cratis-markdown-editor__textarea', parts?.className), "data-cratis-part": 'textarea', "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, value: props.value, placeholder: props.placeholder, disabled: disabled, readOnly: readOnly, autoFocus: props.autoFocus, spellCheck: true, "aria-label": props['aria-labelledby'] ? props['aria-label'] : (props['aria-label'] ?? props.labels.editor), "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-invalid": invalid || undefined, "aria-multiline": 'true', "aria-autocomplete": completion.isOpen ? 'list' : undefined, "aria-controls": completion.isOpen ? props.suggestionsId : undefined, "aria-activedescendant": props.activeOptionId, onChange: event => {
+            props.onSelectionChange(event.target.selectionStart, event.target.selectionEnd);
+            props.onChange(event.target.value);
+        }, onSelect: event => {
+            parts?.onSelect?.(event);
+            reportSelection(event);
+        }, onKeyDown: onKeyDown, onBlur: event => {
+            parts?.onBlur?.(event);
+            props.onBlur?.();
+        }, onPaste: onPaste, onDrop: onDrop, onDragOver: event => {
+            parts?.onDragOver?.(event);
+            if (uploads.isEnabled && hasFiles(event))
+                event.preventDefault();
+        } }));
+};
+
+export { MarkdownWritingArea };
+//# sourceMappingURL=MarkdownWritingArea.js.map

package/dist/esm/MarkdownEditor/MarkdownWritingArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownWritingArea.js","sources":["../../../MarkdownEditor/MarkdownWritingArea.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { ClipboardEvent, DragEvent, KeyboardEvent, RefObject, SyntheticEvent } from 'react';\nimport { classNames } from '../ClassNames/classNames';\nimport type { MarkdownEditorLabels } from './MarkdownEditorLabels';\nimport type { MarkdownEditorParts } from './MarkdownEditorParts';\nimport type { MarkdownEditorProps } from './MarkdownEditor';\nimport type { MarkdownFormat } from './MarkdownFormat';\nimport type { MarkdownTextEdit } from './MarkdownTextEdit';\nimport { filesIn } from './filesIn';\nimport { formatShortcuts } from './formatShortcuts';\nimport type { MarkdownCompletionState } from './useMarkdownCompletion';\nimport type { MarkdownUploadsState } from './useMarkdownUploads';\n\n/** Props for {@link MarkdownWritingArea}. */\nexport interface MarkdownWritingAreaProps\n    extends Pick<\n        MarkdownEditorProps,\n        | 'value'\n        | 'onChange'\n        | 'onBlur'\n        | 'placeholder'\n        | 'autoFocus'\n        | 'disabled'\n        | 'readOnly'\n        | 'invalid'\n        | 'id'\n        | 'aria-label'\n        | 'aria-labelledby'\n        | 'aria-describedby'\n    > {\n    /** Pass-through attributes for the textarea. */\n    parts?: MarkdownEditorParts['textarea'];\n\n    /** The writing area's element, which the editor formats and measures. */\n    textareaRef: RefObject<HTMLTextAreaElement | null>;\n\n    /** The resolved labels. */\n    labels: Required<MarkdownEditorLabels>;\n\n    /** The completion being typed at the caret. */\n    completion: MarkdownCompletionState;\n\n    /** The uploads started from this editor. */\n    uploads: MarkdownUploadsState;\n\n    /** The element id of the suggestion list. */\n    suggestionsId: string;\n\n    /** The element id of the highlighted suggestion, while the list is open. */\n    activeOptionId?: string;\n\n    /** Called when the selection moves. */\n    onSelectionChange: (start: number, end: number) => void;\n\n    /** Applies an edit that also places the selection. */\n    onEdit: (edit: MarkdownTextEdit) => void;\n\n    /** Applies a format to the selection, as a keyboard shortcut asks. */\n    onFormat: (format: MarkdownFormat) => void;\n}\n\nconst hasFiles = (event: DragEvent<HTMLTextAreaElement>) => Array.from(event.dataTransfer.types).includes('Files');\n\n/**\n * The textarea of a {@link MarkdownEditor}, with its completion keys, formatting shortcuts, and file\n * paste and drop.\n */\nexport const MarkdownWritingArea = (props: MarkdownWritingAreaProps) => {\n    const { completion, uploads, textareaRef, parts } = props;\n    const disabled = props.disabled ?? false;\n    const readOnly = props.readOnly ?? false;\n    const invalid = props.invalid ?? false;\n\n    const reportSelection = (event: SyntheticEvent<HTMLTextAreaElement>) =>\n        props.onSelectionChange(event.currentTarget.selectionStart, event.currentTarget.selectionEnd);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n        parts?.onKeyDown?.(event);\n        const edit = completion.handleKeyDown(event);\n        if (edit) {\n            props.onEdit(edit);\n            return;\n        }\n        if (event.defaultPrevented || event.altKey || event.shiftKey || !(event.ctrlKey || event.metaKey)) return;\n        const format = formatShortcuts.get(event.key.toLowerCase());\n        if (!format || disabled || readOnly) return;\n        event.preventDefault();\n        props.onFormat(format);\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {\n        parts?.onPaste?.(event);\n        if (!uploads.isEnabled) return;\n        const files = filesIn(event.clipboardData.items);\n        if (files.length === 0) return;\n        event.preventDefault();\n        uploads.upload(files);\n    };\n\n    const onDrop = (event: DragEvent<HTMLTextAreaElement>) => {\n        parts?.onDrop?.(event);\n        if (!uploads.isEnabled) return;\n        const files = Array.from(event.dataTransfer.files);\n        if (files.length === 0) return;\n        event.preventDefault();\n        uploads.upload(files);\n    };\n\n    return (\n        <textarea\n            {...parts}\n            ref={textareaRef}\n            id={props.id}\n            className={classNames('cratis-markdown-editor__textarea', parts?.className)}\n            data-cratis-part='textarea'\n            data-disabled={disabled || undefined}\n            data-invalid={invalid || undefined}\n            data-readonly={readOnly || undefined}\n            value={props.value}\n            placeholder={props.placeholder}\n            disabled={disabled}\n            readOnly={readOnly}\n            autoFocus={props.autoFocus}\n            spellCheck\n            aria-label={props['aria-labelledby'] ? props['aria-label'] : (props['aria-label'] ?? props.labels.editor)}\n            aria-labelledby={props['aria-labelledby']}\n            aria-describedby={props['aria-describedby']}\n            aria-invalid={invalid || undefined}\n            aria-multiline='true'\n            aria-autocomplete={completion.isOpen ? 'list' : undefined}\n            aria-controls={completion.isOpen ? props.suggestionsId : undefined}\n            aria-activedescendant={props.activeOptionId}\n            onChange={event => {\n                props.onSelectionChange(event.target.selectionStart, event.target.selectionEnd);\n                props.onChange(event.target.value);\n            }}\n            onSelect={event => {\n                parts?.onSelect?.(event);\n                reportSelection(event);\n            }}\n            onKeyDown={onKeyDown}\n            onBlur={event => {\n                parts?.onBlur?.(event);\n                props.onBlur?.();\n            }}\n            onPaste={onPaste}\n            onDrop={onDrop}\n            onDragOver={event => {\n                parts?.onDragOver?.(event);\n                if (uploads.isEnabled && hasFiles(event)) event.preventDefault();\n            }}\n        />\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/MarkdownEditor/applyMarkdownFormat.d.ts

@@ -0,0 +1,13 @@
+import { MarkdownFormat } from './MarkdownFormat.js';
+import type { MarkdownTextEdit } from './MarkdownTextEdit.js';
+/**
+ * Applies a toolbar format to the selection in a piece of markdown. Every format is a toggle: applying
+ * it where it is already applied takes it off.
+ * @param value The markdown being edited.
+ * @param selectionStart Where the selection starts.
+ * @param selectionEnd Where the selection ends.
+ * @param format The {@link MarkdownFormat} to apply.
+ * @returns The edited markdown and the selection the writing area should show afterwards.
+ */
+export declare const applyMarkdownFormat: (value: string, selectionStart: number, selectionEnd: number, format: MarkdownFormat) => MarkdownTextEdit;
+//# sourceMappingURL=applyMarkdownFormat.d.ts.map

package/dist/esm/MarkdownEditor/applyMarkdownFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyMarkdownFormat.d.ts","sourceRoot":"","sources":["../../../MarkdownEditor/applyMarkdownFormat.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AAY3D;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,UACrB,MAAM,kBACG,MAAM,gBACR,MAAM,UACZ,cAAc,KACvB,gBA4BF,CAAC"}