@gravity-ui/markdown-editor 13.0.0

package/build/esm/markup/codemirror/files-upload-plugin/plugin.js

@@ -0,0 +1,218 @@
+import { Decoration, ViewPlugin, WidgetType, } from '@codemirror/view';
+import { FileUploadHandlerFacet } from '../files-upload-facet';
+import { ReactRendererFacet } from '../react-facet';
+import { IMG_MAX_HEIGHT, SUCCESS_UPLOAD_REMOVE_TIMEOUT } from './const';
+import { AddUploadWidgetEffect, RemoveUploadWidgetEffect } from './effects';
+import { getImageDimensions, getTransferFiles, isImageFile, uniqueId } from './utils';
+import { renderWidget } from './widget';
+class FileUploadWidget extends WidgetType {
+    constructor(id) {
+        super();
+        this.renderer = null;
+        this.props = {};
+        this.selfId = id;
+    }
+    toDOM(view) {
+        var _a;
+        const dom = document.createElement('div');
+        dom.className = 'cm-file-upload-widget';
+        dom.style.display = 'inline-block';
+        (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.remove();
+        this.createRenderItem(dom, view);
+        return dom;
+    }
+    updateDOM(dom, view) {
+        var _a;
+        (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.remove();
+        this.createRenderItem(dom, view);
+        return true;
+    }
+    destroy(dom) {
+        var _a, _b;
+        super.destroy(dom);
+        (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = this.presenter) === null || _b === void 0 ? void 0 : _b.cancel();
+        this.presenter = undefined;
+    }
+    setPresenter(presenter) {
+        this.presenter = presenter;
+    }
+    render(props) {
+        var _a;
+        Object.assign(this.props, props);
+        (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.rerender();
+    }
+    createRenderItem(dom, view) {
+        this.renderer = view.state
+            .facet(ReactRendererFacet)
+            .createItem('cm-file-upload-widget', () => renderWidget(dom, Object.assign({}, this.props)));
+    }
+}
+class FileUploadPresenter {
+    constructor(params) {
+        this.state = 'initial';
+        this.onUploadSuccess = (res) => {
+            if (this.state === 'canceled')
+                return;
+            this.state = 'success';
+            this.widget.render({
+                status: 'success',
+                fileName: this.file.name,
+                fileType: isImageFile(this.file) ? 'image' : 'file',
+            });
+            setTimeout(async () => {
+                const markup = await this.formatFileMarkup(res);
+                if (this.state === 'canceled')
+                    return;
+                this.view.dispatch({
+                    effects: RemoveUploadWidgetEffect.of({
+                        id: this.widget.selfId,
+                        markup,
+                    }),
+                });
+            }, SUCCESS_UPLOAD_REMOVE_TIMEOUT);
+        };
+        this.onUploadError = (err) => {
+            if (this.state === 'canceled')
+                return;
+            this.state = 'error';
+            this.widget.render({
+                status: 'error',
+                fileName: this.file.name,
+                fileType: isImageFile(this.file) ? 'image' : 'file',
+                errorText: String(err),
+                onReUploadClick: () => {
+                    if (this.state === 'error')
+                        this.run();
+                },
+            });
+        };
+        this.file = params.file;
+        this.view = params.view;
+        this.widget = params.widget;
+        this.uploader = params.uploader;
+        this.needDimmensionsForImages = params.needDimmensionsForImages;
+        this.widget.setPresenter(this);
+        this.run();
+    }
+    cancel() {
+        this.state = 'canceled';
+    }
+    run() {
+        this.state = 'uploading';
+        this.widget.render({
+            status: 'uploading',
+            fileName: this.file.name,
+            fileType: isImageFile(this.file) ? 'image' : 'file',
+        });
+        this.uploader(this.file).then(this.onUploadSuccess, this.onUploadError);
+    }
+    async formatFileMarkup(res) {
+        var _a, _b;
+        const fileName = (_b = (_a = res.name) !== null && _a !== void 0 ? _a : this.file.name) !== null && _b !== void 0 ? _b : '';
+        let markup;
+        if (isImageFile(this.file)) {
+            if (this.needDimmensionsForImages) {
+                try {
+                    let { height } = await getImageDimensions(this.file);
+                    height = Math.min(height, IMG_MAX_HEIGHT);
+                    markup = `![${fileName}](${res.url} =x${height})`;
+                }
+                catch (err) {
+                    markup = `![${fileName}](${res.url})`;
+                }
+            }
+            else {
+                markup = `![${fileName}](${res.url})`;
+            }
+        }
+        else {
+            markup = `{% file src="${res.url}" name="${fileName.replace('"', '')}" %}`;
+        }
+        return markup;
+    }
+}
+export const FilesUploadPlugin = ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.decos = Decoration.none;
+        this.view = view;
+    }
+    update(update) {
+        this.decos = this.decos.map(update.changes);
+        const uploadFacet = this.view.state.facet(FileUploadHandlerFacet);
+        const changes = [];
+        for (const tr of update.transactions) {
+            for (const eff of tr.effects) {
+                if (eff.is(AddUploadWidgetEffect)) {
+                    this.decos = this.decos.update({
+                        add: Array.from(eff.value.files).map((file, index) => {
+                            const { widget } = new FileUploadPresenter({
+                                file,
+                                view: this.view,
+                                uploader: uploadFacet.fn,
+                                needDimmensionsForImages: Boolean(uploadFacet.imgWithDimms),
+                                widget: new FileUploadWidget(uniqueId('__file_widget_id')),
+                            });
+                            return Decoration.widget({
+                                widget,
+                                side: 1,
+                                __file_widget_id: widget.selfId,
+                            }).range(eff.value.pos + index);
+                        }),
+                    });
+                }
+                if (eff.is(RemoveUploadWidgetEffect)) {
+                    this.decos = this.decos.update({
+                        filter: (from, to, deco) => {
+                            if (deco.spec.__file_widget_id !== eff.value.id)
+                                return true;
+                            if (eff.value.markup) {
+                                changes.push({ from, to, insert: eff.value.markup });
+                            }
+                            return false;
+                        },
+                    });
+                }
+            }
+        }
+        if (changes.length) {
+            setTimeout(() => {
+                this.view.dispatch({ changes });
+            });
+        }
+    }
+}, {
+    decorations: (v) => v.decos,
+    eventHandlers: {
+        paste(event, view) {
+            if (!event.clipboardData)
+                return false;
+            const files = getTransferFiles(event.clipboardData);
+            if (!files)
+                return false;
+            const { from, to } = view.state.selection.main;
+            view.dispatch({
+                selection: { anchor: from },
+                effects: AddUploadWidgetEffect.of({ files, pos: from }),
+                changes: { from, to, insert: ' '.repeat(files.length) },
+            });
+            event.preventDefault();
+            return true;
+        },
+        drop(event, view) {
+            if (!event.dataTransfer)
+                return false;
+            const files = getTransferFiles(event.dataTransfer);
+            if (!files)
+                return false;
+            const pos = this.view.posAtCoords(event, false);
+            view.dispatch({
+                selection: { anchor: pos },
+                effects: AddUploadWidgetEffect.of({ files, pos }),
+                changes: { from: pos, insert: ' '.repeat(files.length) },
+            });
+            event.preventDefault();
+            return true;
+        },
+    },
+});

package/build/esm/markup/codemirror/files-upload-plugin/utils.d.ts

@@ -0,0 +1,8 @@
+export { uniqueId } from '../../../lodash';
+export { isImageFile } from '../../../utils/clipboard';
+export declare function getImageDimensions(imgFile: File): Promise<{
+    width: number;
+    height: number;
+}>;
+export declare function loadImage(imgFile: File): Promise<HTMLImageElement>;
+export declare function getTransferFiles(data: DataTransfer | null): File[] | null;

package/build/esm/markup/codemirror/files-upload-plugin/utils.js

@@ -0,0 +1,25 @@
+import { isFilesFromHtml, isFilesOnly } from '../../../utils/clipboard';
+export { uniqueId } from '../../../lodash';
+export { isImageFile } from '../../../utils/clipboard';
+export async function getImageDimensions(imgFile) {
+    const img = await loadImage(imgFile);
+    return { width: img.naturalWidth, height: img.naturalHeight };
+}
+export async function loadImage(imgFile) {
+    return new Promise((resolve, reject) => {
+        const img = document.createElement('img');
+        img.src = URL.createObjectURL(imgFile);
+        img.onload = () => {
+            URL.revokeObjectURL(img.src);
+            resolve(img);
+        };
+        img.onerror = (_e, _s, _l, _c, error) => reject(error);
+    });
+}
+export function getTransferFiles(data) {
+    if (!data)
+        return null;
+    if (!isFilesOnly(data) && !isFilesFromHtml(data))
+        return null;
+    return Array.from(data.files);
+}

package/build/esm/markup/codemirror/files-upload-plugin/widget.css

@@ -0,0 +1,16 @@
+.g-md-upload-label__content {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+}
+.g-md-upload-label__filename {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 128px;
+}
+
+.cm-file-upload-widget + .cm-file-upload-widget {
+  margin-left: 2px;
+}

package/build/esm/markup/codemirror/files-upload-plugin/widget.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import './widget.css';
+export declare function renderWidget(container: HTMLElement, props: UploadLabelProps): JSX.Element;
+export declare type UploadedFile = {
+    fileName: string;
+    fileType: 'image' | 'file';
+    status: 'uploading' | 'success' | 'error';
+    errorText?: string;
+};
+export declare type UploadLabelProps = UploadedFile & {
+    onReUploadClick: () => void;
+};
+export declare function UploadLabel({ fileName, fileType, status, errorText, onReUploadClick, }: UploadLabelProps): JSX.Element | null;

package/build/esm/markup/codemirror/files-upload-plugin/widget.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ArrowsRotateRight } from '@gravity-ui/icons';
+import { Icon, Label, Portal, Spin, Tooltip } from '@gravity-ui/uikit';
+import { icons } from '../../../bundle/config/icons';
+import { cn } from '../../../classname';
+import './widget.css';
+export function renderWidget(container, props) {
+    return (React.createElement(Portal, { container: container },
+        React.createElement(UploadLabel, Object.assign({}, props))));
+}
+const cnLabel = cn('upload-label');
+export function UploadLabel({ fileName, fileType, status, errorText, onReUploadClick, }) {
+    const icon = fileType === 'image' ? icons.image : icons.file;
+    if (status === 'uploading') {
+        return (React.createElement(Label, { size: "xs", theme: "info", icon: React.createElement(Icon, Object.assign({}, icon)), className: cnLabel({ status }) },
+            React.createElement("div", { className: cnLabel('content') },
+                React.createElement("span", { title: fileName, className: cnLabel('filename') }, fileName),
+                React.createElement(Spin, { size: "xs" }))));
+    }
+    if (status === 'success') {
+        return (React.createElement(Label, { size: "xs", theme: "success", icon: React.createElement(Icon, Object.assign({}, icon)), className: cnLabel({ status }) },
+            React.createElement("div", { className: cnLabel('content') },
+                React.createElement("span", { title: fileName, className: cnLabel('filename') }, fileName))));
+    }
+    if (status === 'error') {
+        return (React.createElement(Tooltip, { content: errorText },
+            React.createElement(Label, { size: "xs", interactive: true, theme: "danger", icon: React.createElement(Icon, Object.assign({}, icon)), onClick: onReUploadClick, className: cnLabel({ status }) },
+                React.createElement("div", { className: cnLabel('content') },
+                    React.createElement("span", { className: cnLabel('filename') }, fileName),
+                    React.createElement(Icon, { data: ArrowsRotateRight, size: 16 })))));
+    }
+    return null;
+}

package/build/esm/markup/codemirror/gravity.d.ts

@@ -0,0 +1,3 @@
+import { HighlightStyle } from '@codemirror/language';
+export declare const gravityHighlightStyle: HighlightStyle;
+export declare const gravityTheme: import("@codemirror/state").Extension;

package/build/esm/markup/codemirror/gravity.js

@@ -0,0 +1,33 @@
+import { HighlightStyle, defaultHighlightStyle } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags as t } from '@lezer/highlight';
+import { customTags as ct } from './yfm';
+export const gravityHighlightStyle = HighlightStyle.define(defaultHighlightStyle.specs.concat({ tag: t.meta, color: 'var(--g-color-text-hint)' }, { tag: t.link, color: 'var(--g-color-text-link)' }, { tag: t.url, color: 'var(--g-color-text-link-hover)' }, { tag: t.contentSeparator, color: 'var(--g-color-text-secondary)' }, { tag: [t.string, t.deleted], color: 'var(--g-color-text-danger)' }, { tag: t.escape, color: 'var(--g-color-text-danger-heavy)' }, { tag: t.typeName, color: 'var(--g-color-text-positive-heavy)' }, { tag: t.atom, color: 'var(--g-color-text-info-heavy)' }, { tag: t.labelName, color: 'var(--g-color-text-complementary)' }, { tag: t.heading, fontWeight: 'bold' }, 
+// custom tags
+{ tag: ct.underline, textDecoration: 'underline' }, { tag: ct.monospace, fontFamily: 'monospace' }, { tag: ct.marked, color: 'marktext', backgroundColor: 'mark' }));
+export const gravityTheme = EditorView.baseTheme({
+    '&': {
+        overflow: 'hidden',
+        height: '100%',
+    },
+    '&.cm-focused': {
+        outline: 'none',
+    },
+    '.cm-placeholder': {
+        color: 'var(--g-color-text-secondary)',
+    },
+    '.cm-content': {
+        color: 'var(--g-color-text-primary)',
+        caretColor: 'currentColor',
+        fontSize: 'var(--g-text-code-2-font-size)',
+        fontWeight: 'var(--g-text-code-font-weight)',
+        fontFamily: 'var(--g-font-family-monospace)',
+        lineHeight: 'var(--g-text-code-2-line-height)',
+    },
+    '&.cm-focused .cm-cursor': {
+        borderLeftColor: 'currentColor',
+    },
+    '&.cm-focused .cm-selectionBackground, &.cm-focused ::selection': {
+        background: 'var(--g-color-base-misc-medium)',
+    },
+});

package/build/esm/markup/codemirror/index.d.ts

@@ -0,0 +1,4 @@
+export type { CreateCodemirrorParams } from './create';
+export { createCodemirror } from './create';
+export { ReactRendererFacet } from './react-facet';
+export { getImageDimensions, IMG_MAX_HEIGHT } from './files-upload-plugin';

package/build/esm/markup/codemirror/index.js

@@ -0,0 +1,3 @@
+export { createCodemirror } from './create';
+export { ReactRendererFacet } from './react-facet';
+export { getImageDimensions, IMG_MAX_HEIGHT } from './files-upload-plugin';

package/build/esm/markup/codemirror/pairing-chars.d.ts

@@ -0,0 +1 @@
+export declare const PairingCharactersExtension: import("@codemirror/state").Extension;

package/build/esm/markup/codemirror/pairing-chars.js

@@ -0,0 +1,26 @@
+import { ChangeSet } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+const PAIRING_CHARS = new Map([
+    ['(', ')'],
+    ['{', '}'],
+    ['[', ']'],
+    ['<', '>'],
+    ['*', '*'],
+    ['~', '~'],
+    ['"', '"'],
+    ["'", "'"],
+    ['`', '`'],
+]);
+export const PairingCharactersExtension = EditorView.inputHandler.of((view, _1, _2, text) => {
+    if (!PAIRING_CHARS.has(text))
+        return false;
+    const tr = view.state.changeByRange((range) => {
+        const changes = [{ from: range.from, insert: text }];
+        if (!range.empty)
+            changes.push({ from: range.to, insert: PAIRING_CHARS.get(text) });
+        const changeSet = ChangeSet.of(changes, view.state.doc.length);
+        return { changes: changeSet, range: range.map(changeSet, range.empty ? 1 : 0) };
+    });
+    view.dispatch(tr, { scrollIntoView: true });
+    return true;
+});

package/build/esm/markup/codemirror/react-facet.d.ts

@@ -0,0 +1,3 @@
+import { Facet } from '@codemirror/state';
+import type { ReactRenderStorage } from '../../extensions';
+export declare const ReactRendererFacet: Facet<ReactRenderStorage, ReactRenderStorage>;

package/build/esm/markup/codemirror/react-facet.js

@@ -0,0 +1,5 @@
+import { Facet } from '@codemirror/state';
+export const ReactRendererFacet = Facet.define({
+    combine: (value) => value[0],
+    static: true,
+});

package/build/esm/markup/codemirror/yfm.d.ts

@@ -0,0 +1,18 @@
+import { Completion, snippet } from '@codemirror/autocomplete';
+import type { Extension } from '@codemirror/state';
+import { Tag } from '@lezer/highlight';
+export declare const customTags: {
+    underline: Tag;
+    monospace: Tag;
+    marked: Tag;
+};
+export declare type YfmNoteType = 'info' | 'tip' | 'warning' | 'alert';
+export declare const yfmNoteTypes: readonly YfmNoteType[];
+export declare const yfmNoteSnippetTemplate: (type: YfmNoteType) => "{% note info %}\n\n#{}\n\n{% endnote %}\n\n" | "{% note alert %}\n\n#{}\n\n{% endnote %}\n\n" | "{% note tip %}\n\n#{}\n\n{% endnote %}\n\n" | "{% note warning %}\n\n#{}\n\n{% endnote %}\n\n";
+export declare const yfmNoteSnippets: Record<YfmNoteType, ReturnType<typeof snippet>>;
+export declare const yfmCutSnippetTemplate = "{% cut \"#{title}\" %}\n\n#{}\n\n{% endcut %}\n\n";
+export declare const yfmCutSnippet: (editor: {
+    state: import("@codemirror/state").EditorState;
+    dispatch: (tr: import("@codemirror/state").Transaction) => void;
+}, completion: Completion | null, from: number, to: number) => void;
+export declare function yfmLang(): Extension;

package/build/esm/markup/codemirror/yfm.js

@@ -0,0 +1,115 @@
+import { snippet } from '@codemirror/autocomplete';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { Tag, tags } from '@lezer/highlight';
+import { capitalize } from '../../lodash';
+export const customTags = {
+    underline: Tag.define(),
+    monospace: Tag.define(),
+    marked: Tag.define(),
+};
+function mdInlineFactory({ name, char, tag, }) {
+    const NodeName = name;
+    const MarkName = `${name}Mark`;
+    const Delim = { resolve: NodeName, mark: MarkName };
+    return {
+        defineNodes: [
+            { name: NodeName, style: { [`${NodeName}/...`]: tag } },
+            { name: MarkName, style: tags.processingInstruction },
+        ],
+        parseInline: [
+            {
+                name,
+                parse(cx, next, pos) {
+                    if (next !== char || cx.char(pos + 1) !== char || cx.char(pos + 2) === char)
+                        return -1;
+                    return cx.addDelimiter(Delim, pos, pos + 2, true, true);
+                },
+                after: 'Emphasis',
+            },
+        ],
+    };
+}
+const UnderlineExtension = mdInlineFactory({
+    name: 'Underline',
+    char: '+'.charCodeAt(0),
+    tag: customTags.underline,
+});
+const MonospaceExtension = mdInlineFactory({
+    name: 'Monospace',
+    char: '#'.charCodeAt(0),
+    tag: customTags.monospace,
+});
+const MarkedExtension = mdInlineFactory({
+    name: 'Marked',
+    char: '='.charCodeAt(0),
+    tag: customTags.marked,
+});
+export const yfmNoteTypes = ['info', 'tip', 'warning', 'alert'];
+export const yfmNoteSnippetTemplate = (type) => `{% note ${type} %}\n\n#{}\n\n{% endnote %}\n\n`;
+export const yfmNoteSnippets = {
+    info: snippet(yfmNoteSnippetTemplate('info')),
+    tip: snippet(yfmNoteSnippetTemplate('tip')),
+    warning: snippet(yfmNoteSnippetTemplate('warning')),
+    alert: snippet(yfmNoteSnippetTemplate('alert')),
+};
+export const yfmCutSnippetTemplate = '{% cut "#{title}" %}\n\n#{}\n\n{% endcut %}\n\n';
+export const yfmCutSnippet = snippet(yfmCutSnippetTemplate);
+export function yfmLang() {
+    const mdSupport = markdown({
+        // defaultCodeLanguage: markdownLanguage,
+        base: markdownLanguage,
+        addKeymap: true,
+        completeHTMLTags: false,
+        extensions: [UnderlineExtension, MonospaceExtension, MarkedExtension],
+    });
+    const mdAutocomplete = {
+        autocomplete: (context) => {
+            // TODO: add more actions and re-enable
+            // let word = context.matchBefore(/\/.*/);
+            // if (word) {
+            //     return {
+            //         from: word.from,
+            //         options: [
+            //             ...yfmNoteTypes.map<Completion>((type, index) => ({
+            //                 label: `/yfm note ${type}`,
+            //                 displayLabel: `YFM Note ${capitalize(type)}`,
+            //                 type: 'text',
+            //                 apply: yfmNoteSnippets[type],
+            //                 boost: -index,
+            //             })),
+            //             {
+            //                 label: '/yfm cut',
+            //                 displayLabel: 'YFM Cut',
+            //                 type: 'text',
+            //                 apply: yfmCutSnippet,
+            //             },
+            //         ],
+            //     };
+            // }
+            const word = context.matchBefore(/^.*/);
+            if (word === null || word === void 0 ? void 0 : word.text.startsWith('{%')) {
+                return {
+                    from: word.from,
+                    options: [
+                        ...yfmNoteTypes.map((type, index) => ({
+                            label: `{% note ${type}`,
+                            displayLabel: capitalize(type),
+                            type: 'text',
+                            section: 'YFM Note',
+                            apply: yfmNoteSnippets[type],
+                            boost: -index,
+                        })),
+                        {
+                            label: '{% cut',
+                            displayLabel: 'YFM Cut',
+                            type: 'text',
+                            apply: yfmCutSnippet,
+                        },
+                    ],
+                };
+            }
+            return null;
+        },
+    };
+    return [mdSupport, mdSupport.language.data.of(mdAutocomplete)];
+}

package/build/esm/markup/commands/blocks.d.ts

@@ -0,0 +1,5 @@
+import type { StateCommand } from '@codemirror/state';
+export declare const wrapToBlockquote: StateCommand;
+export declare const wrapToCheckbox: StateCommand;
+export declare const insertHRule: StateCommand;
+export declare const insertMermaidDiagram: StateCommand;

package/build/esm/markup/commands/blocks.js

@@ -0,0 +1,19 @@
+import { replaceOrInsertAfter, wrapPerLine } from './helpers';
+export const wrapToBlockquote = wrapPerLine({ beforeText: '> ', skipEmptyLine: false });
+export const wrapToCheckbox = wrapPerLine({ beforeText: '[ ] ' });
+export const insertHRule = ({ state, dispatch }) => {
+    const hrMarkup = '---';
+    const tr = replaceOrInsertAfter(state, hrMarkup);
+    dispatch(state.update(tr));
+    return true;
+};
+export const insertMermaidDiagram = ({ state, dispatch }) => {
+    const markup = `\`\`\`mermaid
+sequenceDiagram
+    Alice->>Bob: Hi Bob
+    Bob->>Alice: Hi Alice
+\`\`\``;
+    const tr = replaceOrInsertAfter(state, markup);
+    dispatch(state.update(tr));
+    return true;
+};

package/build/esm/markup/commands/code.d.ts

@@ -0,0 +1,3 @@
+import { StateCommand } from '@codemirror/state';
+export declare const wrapToCodeBlock: StateCommand;
+export declare const wrapToInlineCode: StateCommand;

package/build/esm/markup/commands/code.js

@@ -0,0 +1,26 @@
+import { EditorSelection } from '@codemirror/state';
+import { wrapToBlock } from './helpers';
+export const wrapToCodeBlock = wrapToBlock(({ lineBreak }) => '```' + lineBreak, ({ lineBreak }) => lineBreak + '```');
+export const wrapToInlineCode = ({ state, dispatch }) => {
+    const tr = state.changeByRange((range) => {
+        var _a;
+        const content = state.sliceDoc(range.from, range.to);
+        const hasBacktick = content.includes('`');
+        const markup = hasBacktick ? '``' : '`';
+        const before = `${markup}${content.startsWith('`') ? ' ' : ''}`;
+        const after = `${content.endsWith('`') ? ' ' : ''}${markup}`;
+        const changeSpec = [
+            { from: range.from, insert: before },
+            { from: range.to, insert: after },
+        ];
+        const changes = state.changes(changeSpec);
+        return {
+            changes,
+            range: range.empty
+                ? EditorSelection.range(range.anchor + 1, range.head + 1, range.goalColumn, (_a = range.bidiLevel) !== null && _a !== void 0 ? _a : undefined)
+                : range.map(changes),
+        };
+    });
+    dispatch(state.update(tr));
+    return true;
+};

package/build/esm/markup/commands/heading.d.ts

@@ -0,0 +1,7 @@
+import { StateCommand } from '@codemirror/state';
+export declare const toH1: StateCommand;
+export declare const toH2: StateCommand;
+export declare const toH3: StateCommand;
+export declare const toH4: StateCommand;
+export declare const toH5: StateCommand;
+export declare const toH6: StateCommand;

package/build/esm/markup/commands/heading.js

@@ -0,0 +1,44 @@
+import { EditorSelection } from '@codemirror/state';
+export const toH1 = toHeading(1);
+export const toH2 = toHeading(2);
+export const toH3 = toHeading(3);
+export const toH4 = toHeading(4);
+export const toH5 = toHeading(5);
+export const toH6 = toHeading(6);
+function toHeading(level) {
+    const re = /^\s*#*\s*/;
+    const str = Array(level).fill('#').join('') + ' ';
+    return ({ state, dispatch }) => {
+        const trSpec = state.changeByRange((range) => {
+            var _a, _b, _c;
+            const lineFrom = state.doc.lineAt(range.from);
+            const lineTo = state.doc.lineAt(range.to);
+            // cursor in empty line
+            if (lineFrom.number === lineTo.number && lineFrom.length === 0) {
+                return {
+                    changes: [{ from: lineFrom.from, insert: str }],
+                    // move cursor to end of inserted string with sharps (#)
+                    range: EditorSelection.range(range.anchor + str.length, range.head + str.length, range.goalColumn, (_a = range.bidiLevel) !== null && _a !== void 0 ? _a : undefined),
+                };
+            }
+            // multiline selection
+            const changes = [];
+            for (let i = lineFrom.number; i <= lineTo.number; i++) {
+                const line = state.doc.line(i);
+                // ignore empty line in multiline selection
+                if (line.length === 0 && !range.empty)
+                    continue;
+                // replace sharps (#) at start of line
+                const replacedLength = (_c = (_b = re.exec(line.text)) === null || _b === void 0 ? void 0 : _b[0].length) !== null && _c !== void 0 ? _c : 0;
+                changes.push({ from: line.from, to: line.from + replacedLength, insert: str });
+            }
+            const changeSet = state.changes(changes);
+            return {
+                changes: changeSet,
+                range: range.map(changeSet),
+            };
+        });
+        dispatch(state.update(trSpec));
+        return true;
+    };
+}