@gravity-ui/markdown-editor 14.3.1 → 14.5.0

package/build/cjs/markup/codemirror/html-to-markdown/handlers.js

@@ -0,0 +1,233 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageHandler = exports.TableHandler = exports.TableRowHandler = exports.BrHandler = exports.DivHandler = exports.UnorderedListHandler = exports.OrderedListHandler = exports.GenericHandler = exports.CodeHandler = exports.FormattingHandler = exports.ParagraphHandler = exports.HeaderHandler = exports.LinkHandler = exports.TextNodeHandler = exports.NodeHandler = void 0;
+/**
+ * Base handler class implementing the Chain of Responsibility pattern for HTML node processing.
+ * Each concrete handler decides whether it can process a node or should pass it to the next handler.
+ */
+class NodeHandler {
+    constructor() {
+        this.next = null;
+    }
+    /**
+     * Sets up the next handler in the chain
+     */
+    setNext(handler) {
+        this.next = handler;
+        return handler;
+    }
+    /**
+     * Delegates processing to the next handler in the chain
+     */
+    handleNext(node, visitor) {
+        if (this.next) {
+            return this.next.handle(node, visitor);
+        }
+        return '';
+    }
+}
+exports.NodeHandler = NodeHandler;
+/**
+ * Handles text nodes, converting them to markdown text
+ */
+class TextNodeHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return visitor.visitText(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.TextNodeHandler = TextNodeHandler;
+/**
+ * Handles anchor elements, converting them to markdown links
+ */
+class LinkHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'a') {
+            return visitor.visitLink(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.LinkHandler = LinkHandler;
+/**
+ * Handles header elements (h1-h6), converting them to markdown headers
+ */
+class HeaderHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return this.handleNext(node, visitor);
+        }
+        const tagName = node.tagName.toLowerCase();
+        const headerMatch = tagName.match(/^h([1-6])$/);
+        if (headerMatch) {
+            const headerLevel = parseInt(headerMatch[1], 10);
+            return visitor.visitHeader(node, headerLevel);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.HeaderHandler = HeaderHandler;
+/**
+ * Handles paragraph elements, converting them to markdown paragraphs
+ */
+class ParagraphHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return this.handleNext(node, visitor);
+        }
+        if (node.tagName.toLowerCase() === 'p') {
+            return visitor.visitParagraph(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.ParagraphHandler = ParagraphHandler;
+/**
+ * Handles text formatting elements (b, strong, i, em), converting them to markdown formatting
+ */
+class FormattingHandler extends NodeHandler {
+    handle(node, visitor) {
+        var _a;
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return this.handleNext(node, visitor);
+        }
+        const element = node;
+        const tagName = element.tagName.toLowerCase();
+        const formattingTags = ['b', 'strong', 'i', 'em', 'span'];
+        if (formattingTags.includes(tagName) &&
+            !['a', 'code', 'pre'].includes(((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) || '')) {
+            return visitor.visitFormatting(element);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.FormattingHandler = FormattingHandler;
+/**
+ * Handles code elements, converting them to markdown code blocks or inline code
+ */
+class CodeHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return this.handleNext(node, visitor);
+        }
+        if (node.tagName.toLowerCase() === 'code' ||
+            node.tagName.toLowerCase() === 'pre') {
+            return visitor.visitCode(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.CodeHandler = CodeHandler;
+/**
+ * Fallback handler for any HTML elements not handled by other specific handlers
+ */
+class GenericHandler extends NodeHandler {
+    handle(node, visitor) {
+        return visitor.visitGeneric(node);
+    }
+}
+exports.GenericHandler = GenericHandler;
+/**
+ * Handles ordered list elements, converting them to markdown ordered lists
+ */
+class OrderedListHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'ol') {
+            const items = Array.from(node.childNodes)
+                .filter((child) => child.nodeType === Node.ELEMENT_NODE &&
+                child.tagName.toLowerCase() === 'li')
+                .map((item, index) => `${index + 1}. ${visitor.visitGeneric(item)}`)
+                .join('\n');
+            return items + '\n';
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.OrderedListHandler = OrderedListHandler;
+/**
+ * Handles unordered list elements, converting them to markdown unordered lists
+ */
+class UnorderedListHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'ul') {
+            const items = Array.from(node.childNodes)
+                .filter((child) => child.nodeType === Node.ELEMENT_NODE &&
+                child.tagName.toLowerCase() === 'li')
+                .map((item) => `- ${visitor.visitGeneric(item)}`)
+                .join('\n');
+            return items + '\n';
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.UnorderedListHandler = UnorderedListHandler;
+/**
+ * Handles div elements, converting them to markdown paragraphs
+ */
+class DivHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'div') {
+            return visitor.visitDiv(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.DivHandler = DivHandler;
+/**
+ * Handles br elements, converting them to markdown newlines
+ */
+class BrHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'br') {
+            return visitor.visitBr();
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.BrHandler = BrHandler;
+/**
+ * Handles table row elements, converting them to markdown table rows
+ */
+class TableRowHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'tr') {
+            return visitor.visitTableRow(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.TableRowHandler = TableRowHandler;
+/**
+ * Handles table elements, converting them to markdown tables
+ */
+class TableHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'table') {
+            return visitor.visitTable(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.TableHandler = TableHandler;
+/**
+ * Handles image elements, converting them to markdown images
+ */
+class ImageHandler extends NodeHandler {
+    handle(node, visitor) {
+        if (node.nodeType === Node.ELEMENT_NODE &&
+            node.tagName.toLowerCase() === 'img') {
+            return visitor.visitImage(node);
+        }
+        return this.handleNext(node, visitor);
+    }
+}
+exports.ImageHandler = ImageHandler;

package/build/cjs/markup/codemirror/html-to-markdown/helpers.d.ts

@@ -0,0 +1 @@
+export declare function applyFormatting(text: string, element: HTMLElement): string;

package/build/cjs/markup/codemirror/html-to-markdown/helpers.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyFormatting = void 0;
+function applyFormatting(text, element) {
+    // Check for italic formatting (either through tags or CSS)
+    const hasItalic = element.tagName.toLowerCase() === 'i' ||
+        element.tagName.toLowerCase() === 'em' ||
+        element.style.fontStyle === 'italic';
+    // Check for bold formatting (either through tags or CSS font-weight)
+    const hasBold = element.tagName.toLowerCase() === 'b' ||
+        element.tagName.toLowerCase() === 'strong' ||
+        parseInt(element.style.fontWeight, 10) >= 600;
+    // Apply markdown formatting in specific order
+    let formatted = text;
+    if (hasItalic)
+        formatted = `*${formatted}*`; // Wrap in single asterisks for italic
+    if (hasBold)
+        formatted = `**${formatted}**`; // Wrap in double asterisks for bold
+    return formatted;
+}
+exports.applyFormatting = applyFormatting;

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

@@ -1,5 +1,6 @@
 export type { CreateCodemirrorParams } from './create';
 export { createCodemirror } from './create';
 export { ReactRendererFacet } from './react-facet';
+export { DirectiveSyntaxFacet } from './directive-facet';
 export { getImageDimensions, IMG_MAX_HEIGHT } from './files-upload-plugin';
 export type { YfmLangOptions } from './yfm';

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

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IMG_MAX_HEIGHT = exports.getImageDimensions = exports.ReactRendererFacet = exports.createCodemirror = void 0;
+exports.IMG_MAX_HEIGHT = exports.getImageDimensions = exports.DirectiveSyntaxFacet = exports.ReactRendererFacet = exports.createCodemirror = void 0;
 var create_1 = require("./create");
 Object.defineProperty(exports, "createCodemirror", { enumerable: true, get: function () { return create_1.createCodemirror; } });
 var react_facet_1 = require("./react-facet");
 Object.defineProperty(exports, "ReactRendererFacet", { enumerable: true, get: function () { return react_facet_1.ReactRendererFacet; } });
+var directive_facet_1 = require("./directive-facet");
+Object.defineProperty(exports, "DirectiveSyntaxFacet", { enumerable: true, get: function () { return directive_facet_1.DirectiveSyntaxFacet; } });
 var files_upload_plugin_1 = require("./files-upload-plugin");
 Object.defineProperty(exports, "getImageDimensions", { enumerable: true, get: function () { return files_upload_plugin_1.getImageDimensions; } });
 Object.defineProperty(exports, "IMG_MAX_HEIGHT", { enumerable: true, get: function () { return files_upload_plugin_1.IMG_MAX_HEIGHT; } });

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

@@ -15,6 +15,11 @@ 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 const yfmCutDirectiveSnippetTemplate = ":::cut [#{title}]\n#{}\n:::\n\n";
+export declare const yfmCutDirectiveSnippet: (editor: {
+    state: import("@codemirror/state").EditorState;
+    dispatch: (tr: import("@codemirror/state").Transaction) => void;
+}, completion: Completion | null, from: number, to: number) => void;
 export interface LanguageData {
     autocomplete: CompletionSource;
     [key: string]: any;

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.yfmLang = exports.yfmCutSnippet = exports.yfmCutSnippetTemplate = exports.yfmNoteSnippets = exports.yfmNoteSnippetTemplate = exports.yfmNoteTypes = exports.customTags = void 0;
+exports.yfmLang = exports.yfmCutDirectiveSnippet = exports.yfmCutDirectiveSnippetTemplate = exports.yfmCutSnippet = exports.yfmCutSnippetTemplate = exports.yfmNoteSnippets = exports.yfmNoteSnippetTemplate = exports.yfmNoteTypes = exports.customTags = void 0;
 const autocomplete_1 = require("@codemirror/autocomplete");
 const lang_markdown_1 = require("@codemirror/lang-markdown");
 const highlight_1 = require("@lezer/highlight");
 const lodash_1 = require("../../lodash");
+const directive_facet_1 = require("./directive-facet");
 exports.customTags = {
     underline: highlight_1.Tag.define(),
     monospace: highlight_1.Tag.define(),
@@ -58,8 +59,11 @@ exports.yfmNoteSnippets = {
 };
 exports.yfmCutSnippetTemplate = '{% cut "#{title}" %}\n\n#{}\n\n{% endcut %}\n\n';
 exports.yfmCutSnippet = (0, autocomplete_1.snippet)(exports.yfmCutSnippetTemplate);
+exports.yfmCutDirectiveSnippetTemplate = ':::cut [#{title}]\n#{}\n:::\n\n';
+exports.yfmCutDirectiveSnippet = (0, autocomplete_1.snippet)(exports.yfmCutDirectiveSnippetTemplate);
 const mdAutocomplete = {
     autocomplete: (context) => {
+        const directiveContext = context.state.facet(directive_facet_1.DirectiveSyntaxFacet);
         // TODO: add more actions and re-enable
         // let word = context.matchBefore(/\/.*/);
         // if (word) {
@@ -77,13 +81,15 @@ const mdAutocomplete = {
         //                 label: '/yfm cut',
         //                 displayLabel: 'YFM Cut',
         //                 type: 'text',
-        //                 apply: yfmCutSnippet,
+        //                 apply: directiveFacet.shouldInsertDirectiveMarkup('yfmCut')
+        //                      ? yfmCutDirectiveSnippet
+        //                      : yfmCutSnippet,
         //             },
         //         ],
         //     };
         // }
         const word = context.matchBefore(/^.*/);
-        if (word === null || word === void 0 ? void 0 : word.text.startsWith('{%')) {
+        if (directiveContext.option !== 'only' && (word === null || word === void 0 ? void 0 : word.text.startsWith('{%'))) {
             return {
                 from: word.from,
                 options: [
@@ -99,11 +105,27 @@ const mdAutocomplete = {
                         label: '{% cut',
                         displayLabel: 'YFM Cut',
                         type: 'text',
-                        apply: exports.yfmCutSnippet,
+                        apply: directiveContext.shouldInsertDirectiveMarkup('yfmCut')
+                            ? exports.yfmCutDirectiveSnippet
+                            : exports.yfmCutSnippet,
                     },
                 ],
             };
         }
+        if (directiveContext.option !== 'disabled' && (word === null || word === void 0 ? void 0 : word.text.startsWith(':'))) {
+            const options = [];
+            if (directiveContext.valueFor('yfmCut') !== 'disabled') {
+                options.push({
+                    label: ':::cut',
+                    displayLabel: 'YFM Cut',
+                    type: 'text',
+                    apply: exports.yfmCutDirectiveSnippet,
+                });
+            }
+            if (options.length) {
+                return { from: word.from, options };
+            }
+        }
         return null;
     },
 };

package/build/cjs/markup/commands/inline.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertFiles = exports.insertImages = exports.insertAnchor = exports.insertLink = void 0;
 const autocomplete_1 = require("@codemirror/autocomplete");
+const codemirror_1 = require("../codemirror");
 const defaultLinkSnippet = (0, autocomplete_1.snippet)(`[#{2:link}](#{1:url} "#{3:title}")`);
 const insertLink = ({ state, dispatch }) => {
     const { from, to, empty } = state.selection.main;
@@ -47,16 +48,25 @@ function insertImages(images) {
     };
 }
 exports.insertImages = insertImages;
+const fileToCurlySyntax = (file) => {
+    const attrsStr = Object.entries(file)
+        .map(([key, value]) => `${key}="${value.replace('"', '')}"`)
+        .join(' ');
+    return `{% file ${attrsStr} %}`;
+};
+const fileToDirectiveSyntax = (file) => {
+    const { src, name, type } = file;
+    let markup = `:file[${name}](${src})`;
+    if (type)
+        markup += `{type="${type}"}`;
+    return markup;
+};
 const insertFiles = (files) => {
     return ({ state, dispatch }) => {
-        const markup = files
-            .map((attrs) => {
-            const attrsStr = Object.entries(attrs)
-                .map(([key, value]) => `${key}="${value.replace('"', '')}"`)
-                .join(' ');
-            return `{% file ${attrsStr} %}`;
-        })
-            .join(' ');
+        const serializer = state.facet(codemirror_1.DirectiveSyntaxFacet).shouldInsertDirectiveMarkup('yfmFile')
+            ? fileToDirectiveSyntax
+            : fileToCurlySyntax;
+        const markup = files.map(serializer).join(' ');
         const tr = state.changeByRange((range) => {
             const changes = state.changes({ from: range.from, to: range.to, insert: markup });
             return { changes, range: range.map(changes) };

package/build/cjs/markup/commands/yfm.js

@@ -1,8 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertYfmTable = exports.insertYfmTabs = exports.wrapToYfmNote = exports.wrapToYfmCut = void 0;
+const directive_facet_1 = require("../codemirror/directive-facet");
 const helpers_1 = require("./helpers");
-exports.wrapToYfmCut = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% cut "title" %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endcut %}');
+const wrapToYfmCutCurly = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% cut "title" %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endcut %}');
+const wrapToYfmCutDirective = (0, helpers_1.wrapToBlock)(({ lineBreak }) => ':::cut [title]' + lineBreak, ({ lineBreak }) => lineBreak + ':::');
+const wrapToYfmCut = (target) => {
+    const cmd = target.state.facet(directive_facet_1.DirectiveSyntaxFacet).shouldInsertDirectiveMarkup('yfmCut')
+        ? wrapToYfmCutDirective
+        : wrapToYfmCutCurly;
+    return cmd(target);
+};
+exports.wrapToYfmCut = wrapToYfmCut;
 exports.wrapToYfmNote = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% note info %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endnote %}');
 exports.insertYfmTabs = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% list tabs %}' + lineBreak.repeat(2) + '- Tab name' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endlist %}', { before: '  ', after: '' });
 exports.insertYfmTable = (0, helpers_1.wrapToBlock)(({ lineBreak }) => ['#|', '||'].join(lineBreak) + lineBreak, ({ lineBreak }) => lineBreak + ['|', '', '||', '||', '', '|', '', '||', '|#', ''].join(lineBreak));

package/build/cjs/utils/clipboard.d.ts

@@ -3,6 +3,7 @@ export declare enum DataTransferType {
     Text = "text/plain",
     Html = "text/html",
     Yfm = "text/yfm",
+    Rtf = "text/rtf",
     UriList = "text/uri-list",
     VSCodeData = "vscode-editor-data",
     Files = "Files"
@@ -10,3 +11,16 @@ export declare enum DataTransferType {
 export declare function isFilesOnly({ types }: DataTransfer): boolean;
 export declare function isFilesFromHtml({ types }: DataTransfer): boolean;
 export declare function isImageFile(file: File): boolean;
+export declare function isVSCode(data: DataTransfer): boolean;
+export declare type VSCodeData = {
+    version: number;
+    isFromEmptySelection: boolean;
+    multicursorText: null | string;
+    mode: string;
+    [key: string]: unknown;
+};
+export declare function tryParseVSCodeData(data: DataTransfer): VSCodeData | undefined;
+/**
+ * Checks if HTML conversion should be skipped based on clipboard contents.
+ */
+export declare function shouldSkipHtmlConversion(clipboardData: DataTransfer): boolean;

package/build/cjs/utils/clipboard.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isImageFile = exports.isFilesFromHtml = exports.isFilesOnly = exports.DataTransferType = void 0;
+exports.shouldSkipHtmlConversion = exports.tryParseVSCodeData = exports.isVSCode = exports.isImageFile = exports.isFilesFromHtml = exports.isFilesOnly = exports.DataTransferType = void 0;
 /** Сontains all data formats known to us */
 var DataTransferType;
 (function (DataTransferType) {
     DataTransferType["Text"] = "text/plain";
     DataTransferType["Html"] = "text/html";
     DataTransferType["Yfm"] = "text/yfm";
+    DataTransferType["Rtf"] = "text/rtf";
     DataTransferType["UriList"] = "text/uri-list";
     DataTransferType["VSCodeData"] = "vscode-editor-data";
     DataTransferType["Files"] = "Files";
@@ -25,3 +26,37 @@ function isImageFile(file) {
     return file.type.startsWith('image/');
 }
 exports.isImageFile = isImageFile;
+function isVSCode(data) {
+    return data.types.includes(DataTransferType.VSCodeData);
+}
+exports.isVSCode = isVSCode;
+function tryParseVSCodeData(data) {
+    try {
+        return JSON.parse(data.getData(DataTransferType.VSCodeData));
+    }
+    catch (e) {
+        console.error(e);
+        return undefined;
+    }
+}
+exports.tryParseVSCodeData = tryParseVSCodeData;
+/**
+ * Checks if HTML conversion should be skipped based on clipboard contents.
+ */
+function shouldSkipHtmlConversion(clipboardData) {
+    const hasHtml = clipboardData.types.includes(DataTransferType.Html);
+    // If there's no HTML content, skip conversion
+    if (!hasHtml)
+        return true;
+    // Check for standard HTML clipboard (text/plain + text/html)
+    if (clipboardData.types.length === 2)
+        return false;
+    // Check for WebStorm/Safari case (includes RTF)
+    if (clipboardData.types.length === 3) {
+        const rtf = clipboardData.getData(DataTransferType.Rtf);
+        return rtf.indexOf('\fmodern JetBrains') > 0;
+    }
+    // Skip conversion for any other cases
+    return true;
+}
+exports.shouldSkipHtmlConversion = shouldSkipHtmlConversion;

package/build/cjs/utils/directive.d.ts

@@ -0,0 +1,28 @@
+export declare type DirectiveSyntaxValue = 'disabled' | 'enabled' | 'preserve' | 'overwrite' | 'only';
+declare type DirectiveSyntaxMdPluginValue = 'disabled' | 'enabled' | 'only';
+export declare type DirectiveSyntaxOption = DirectiveSyntaxValue | DirectiveSyntaxOptionObj;
+declare type DirectiveSyntaxOptionObj = {
+    [K in keyof MarkdownEditor.DirectiveSyntaxAdditionalSupportedExtensions]?: DirectiveSyntaxValue;
+};
+declare global {
+    namespace MarkdownEditor {
+        /**
+         * Add more keys for you additional supported extensions
+         */
+        interface DirectiveSyntaxAdditionalSupportedExtensions {
+        }
+    }
+}
+export declare class DirectiveSyntaxContext {
+    #private;
+    protected set option(value: DirectiveSyntaxOption | undefined);
+    get option(): DirectiveSyntaxOption;
+    constructor(option: DirectiveSyntaxOption | undefined);
+    valueFor(key: keyof DirectiveSyntaxOptionObj): DirectiveSyntaxValue;
+    mdPluginValueFor(key: keyof DirectiveSyntaxOptionObj): DirectiveSyntaxMdPluginValue;
+    /** helper for wisywig serializer */
+    shouldSerializeToDirective(key: keyof DirectiveSyntaxOptionObj, tokenMarkup: unknown): boolean;
+    /** helper for markup-mode commands and actions */
+    shouldInsertDirectiveMarkup(key: keyof DirectiveSyntaxOptionObj): boolean;
+}
+export {};

package/build/cjs/utils/directive.js

@@ -0,0 +1,55 @@
+"use strict";
+var _DirectiveSyntaxContext_option;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectiveSyntaxContext = void 0;
+const tslib_1 = require("tslib");
+const DIRECTIVE_SYNTAX_DEFAULT = 'disabled';
+class DirectiveSyntaxContext {
+    constructor(option) {
+        _DirectiveSyntaxContext_option.set(this, void 0);
+        this.option = option;
+        tslib_1.__classPrivateFieldSet(this, _DirectiveSyntaxContext_option, this.option, "f");
+    }
+    set option(value) {
+        tslib_1.__classPrivateFieldSet(this, _DirectiveSyntaxContext_option, value !== null && value !== void 0 ? value : DIRECTIVE_SYNTAX_DEFAULT, "f");
+    }
+    get option() {
+        return tslib_1.__classPrivateFieldGet(this, _DirectiveSyntaxContext_option, "f");
+    }
+    valueFor(key) {
+        let value;
+        if (typeof this.option === 'object')
+            value = this.option[key];
+        if (typeof this.option === 'string')
+            value = this.option;
+        return value !== null && value !== void 0 ? value : DIRECTIVE_SYNTAX_DEFAULT;
+    }
+    mdPluginValueFor(key) {
+        const value = this.valueFor(key);
+        return value === 'preserve' || value === 'overwrite' ? 'enabled' : value;
+    }
+    /** helper for wisywig serializer */
+    shouldSerializeToDirective(key, tokenMarkup) {
+        const option = this.valueFor(key);
+        if (option === 'overwrite' || option === 'only')
+            return true;
+        if (typeof tokenMarkup === 'string') {
+            if (tokenMarkup.startsWith(':'))
+                return true;
+            if (tokenMarkup.startsWith('{'))
+                return false;
+        }
+        if (option === 'preserve')
+            return true;
+        return false;
+    }
+    /** helper for markup-mode commands and actions */
+    shouldInsertDirectiveMarkup(key) {
+        const value = this.valueFor(key);
+        if (value === 'disabled' || value === 'enabled')
+            return false;
+        return true;
+    }
+}
+exports.DirectiveSyntaxContext = DirectiveSyntaxContext;
+_DirectiveSyntaxContext_option = new WeakMap();

package/build/cjs/utils/index.d.ts

@@ -19,3 +19,4 @@ export * from './serialize-for-clipboard';
 export * from './sync-scroll';
 export * from './upload';
 export * from './get-proportional-size';
+export type { DirectiveSyntaxValue, DirectiveSyntaxOption } from './directive';

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '14.3.1' !== 'undefined' ? '14.3.1' : 'unknown';
+exports.VERSION = typeof '14.5.0' !== 'undefined' ? '14.5.0' : 'unknown';

package/build/esm/bundle/Editor.d.ts

@@ -1,6 +1,7 @@
 import type { CommonEditor } from '../common';
 import { ReactRenderStorage } from '../extensions';
 import { type Receiver } from '../utils';
+import type { DirectiveSyntaxContext } from '../utils/directive';
 import type { MarkdownEditorMode as EditorMode, MarkdownEditorPreset as EditorPreset, MarkdownEditorOptions } from './types';
 export declare type ToolbarActionData = {
     editorMode: EditorMode;
@@ -41,5 +42,6 @@ export declare type ChangeEditorModeOptions = {
 export declare type EditorOptions = Pick<MarkdownEditorOptions, 'md' | 'initial' | 'handlers' | 'experimental' | 'markupConfig' | 'wysiwygConfig'> & {
     renderStorage: ReactRenderStorage;
     preset: EditorPreset;
+    directiveSyntax: DirectiveSyntaxContext;
 };
 export {};