@gravity-ui/markdown-editor 13.2.0 → 13.4.0

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js

@@ -0,0 +1,173 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Ellipsis as DotsIcon, Eye } from '@gravity-ui/icons';
+import { Button, Icon, Label, Menu, Popup } from '@gravity-ui/uikit';
+import debounce from 'lodash/debounce';
+import { cn } from '../../../../classname';
+import { TextAreaFixed as TextArea } from '../../../../forms/TextInput';
+import { i18n } from '../../../../i18n/common';
+import { useBooleanState } from '../../../../react-utils/hooks';
+import { removeNode } from '../../../../utils/remove-node';
+import { YfmHtmlBlockConsts } from '../YfmHtmlBlockSpecs/const';
+export const cnYfmHtmlBlock = cn('yfm-html-block');
+export const cnHelper = cn('yfm-html-block-helper');
+import './YfmHtmlBlock.css';
+const b = cnYfmHtmlBlock;
+export function generateID() {
+    return Math.random().toString(36).substr(2, 8);
+}
+const DEFAULT_PADDING = 20;
+const DEFAULT_DELAY = 100;
+const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const ref = useRef(null);
+    const styles = useRef({});
+    const classNames = useRef([]);
+    const resizeConfig = useRef({});
+    const [height, setHeight] = useState('100%');
+    useEffect(() => {
+        var _a, _b;
+        resizeConfig.current = {
+            padding: (_a = config === null || config === void 0 ? void 0 : config.resizePadding) !== null && _a !== void 0 ? _a : DEFAULT_PADDING,
+            delay: (_b = config === null || config === void 0 ? void 0 : config.resizeDelay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY,
+        };
+        setStyles(config === null || config === void 0 ? void 0 : config.styles);
+        setClassNames(config === null || config === void 0 ? void 0 : config.classNames);
+    }, [config, (_c = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body]);
+    const handleLoadIFrame = () => {
+        var _a;
+        const contentWindow = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+        handleResizeIFrame();
+        if (contentWindow) {
+            const frameDocument = contentWindow.document;
+            frameDocument.addEventListener('dblclick', () => {
+                onСlick();
+            });
+        }
+    };
+    const handleResizeIFrame = () => {
+        var _a, _b;
+        if (ref.current) {
+            const contentWindow = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+            if (contentWindow) {
+                const body = contentWindow.document.body;
+                if (body) {
+                    const height = body.scrollHeight +
+                        (((_b = resizeConfig.current) === null || _b === void 0 ? void 0 : _b.padding) || DEFAULT_PADDING) +
+                        'px';
+                    setHeight(height);
+                }
+            }
+        }
+    };
+    const setClassNames = (newClassNames) => {
+        var _a, _b;
+        const body = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document.body;
+        if (body && newClassNames) {
+            const previousClassNames = classNames.current;
+            // remove all classes that were in previousClassNames but are not in classNames
+            previousClassNames.forEach((className) => {
+                if (!newClassNames.includes(className)) {
+                    body.classList.remove(className);
+                }
+            });
+            // add classes that are in classNames
+            newClassNames.forEach((className) => {
+                if (!body.classList.contains(className)) {
+                    body.classList.add(className);
+                }
+            });
+            classNames.current = newClassNames;
+        }
+    };
+    const setStyles = (newStyles) => {
+        var _a, _b;
+        const body = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document.body;
+        if (body && newStyles) {
+            const previousStyles = styles.current;
+            // remove all styles that are in previousStyles but not in styles
+            Object.keys(previousStyles).forEach((property) => {
+                if (!Object.prototype.hasOwnProperty.call(newStyles, property)) {
+                    body.style.removeProperty(property);
+                }
+            });
+            // sdd or update styles that are in styles
+            Object.keys(newStyles).forEach((property) => {
+                body.style.setProperty(property, newStyles[property]);
+            });
+            // update current styles to the new styles
+            styles.current = newStyles;
+        }
+    };
+    useEffect(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('load', handleLoadIFrame);
+        return () => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', handleLoadIFrame);
+        };
+    }, [html]);
+    useEffect(() => {
+        var _a, _b;
+        if (ref.current) {
+            const resizeObserver = new window.ResizeObserver(debounce(handleResizeIFrame, (_b = (_a = resizeConfig.current) === null || _a === void 0 ? void 0 : _a.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY));
+            resizeObserver.observe(ref.current);
+        }
+    }, [(_f = (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.contentWindow) === null || _e === void 0 ? void 0 : _e.document) === null || _f === void 0 ? void 0 : _f.body]);
+    return (React.createElement("iframe", { style: {
+            height,
+        }, ref: ref, title: generateID(), frameBorder: 0, className: b('content'), srcDoc: html }));
+};
+const CodeEditMode = ({ initialText, onSave, onCancel }) => {
+    const [text, setText] = useState(initialText || '\n');
+    return (React.createElement("div", { className: b({ editing: true }) },
+        React.createElement("div", { className: b('editor') },
+            React.createElement(TextArea, { controlProps: {
+                    className: cnHelper({ 'prosemirror-stop-event': true }),
+                }, value: text, onUpdate: (v) => {
+                    setText(v);
+                }, autoFocus: true }),
+            React.createElement("div", { className: b('controls') },
+                React.createElement("div", null,
+                    React.createElement(Button, { onClick: onCancel, view: 'flat' },
+                        React.createElement("span", { className: cnHelper({ 'prosemirror-stop-event': true }) }, i18n('cancel'))),
+                    React.createElement(Button, { onClick: () => onSave(text), view: 'action' },
+                        React.createElement("span", { className: cnHelper({ 'prosemirror-stop-event': true }) }, i18n('save'))))))));
+};
+export const YfmHtmlBlockView = ({ onChange, node, getPos, view, useConfig }) => {
+    const [editing, setEditing, unsetEditing, toggleEditing] = useBooleanState(Boolean(node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated]));
+    const config = useConfig === null || useConfig === void 0 ? void 0 : useConfig();
+    const [menuOpen, , , toggleMenuOpen] = useBooleanState(false);
+    const buttonRef = useRef(null);
+    const handleClick = () => {
+        setEditing();
+    };
+    if (editing) {
+        return (React.createElement(CodeEditMode, { initialText: node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc], onCancel: unsetEditing, onSave: (v) => {
+                onChange({ [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v });
+                unsetEditing();
+            } }));
+    }
+    return (React.createElement("div", { className: b(), onDoubleClick: setEditing },
+        React.createElement(Label, { className: b('label'), icon: React.createElement(Icon, { size: 16, data: Eye }) }, i18n('preview')),
+        React.createElement(YfmHtmlBlockPreview, { html: node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc], "on\u0421lick": handleClick, config: config }),
+        React.createElement("div", { className: b('menu') },
+            React.createElement(Button, { onClick: toggleMenuOpen, ref: buttonRef, size: 's', className: cnHelper({ 'prosemirror-stop-event': true }) },
+                React.createElement(Icon, { data: DotsIcon, className: cnHelper({ 'prosemirror-stop-event': true }) })),
+            React.createElement(Popup, { anchorRef: buttonRef, open: menuOpen, onClose: toggleMenuOpen, placement: ['bottom-end'] },
+                React.createElement(Menu, null,
+                    React.createElement(Menu.Item, { onClick: () => {
+                            toggleEditing();
+                            toggleMenuOpen();
+                        } }, i18n('edit')),
+                    React.createElement(Menu.Item, { onClick: () => {
+                            const pos = getPos();
+                            if (pos === undefined)
+                                return;
+                            removeNode({
+                                node,
+                                pos,
+                                tr: view.state.tr,
+                                dispatch: view.dispatch,
+                            });
+                        } }, i18n('remove')))))));
+};

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/index.d.ts

@@ -0,0 +1 @@
+export * from './NodeView';

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/index.js

@@ -0,0 +1 @@
+export * from './NodeView';

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/const.d.ts

@@ -0,0 +1,15 @@
+export declare enum YfmHtmlBlockAttrs {
+    class = "class",
+    frameborder = "frameborder",
+    newCreated = "newCreated",
+    srcdoc = "srcdoc",
+    style = "style"
+}
+export declare const yfmHtmlBlockNodeName = "yfm_html_block";
+export declare const yfmHtmlBlockNodeType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const YfmHtmlBlockAction = "createYfmHtmlBlock";
+export declare const YfmHtmlBlockConsts: {
+    readonly NodeName: "yfm_html_block";
+    readonly NodeAttrs: typeof YfmHtmlBlockAttrs;
+    readonly nodeType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+};

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/const.js

@@ -0,0 +1,17 @@
+import { nodeTypeFactory } from '../../../../utils/schema';
+export var YfmHtmlBlockAttrs;
+(function (YfmHtmlBlockAttrs) {
+    YfmHtmlBlockAttrs["class"] = "class";
+    YfmHtmlBlockAttrs["frameborder"] = "frameborder";
+    YfmHtmlBlockAttrs["newCreated"] = "newCreated";
+    YfmHtmlBlockAttrs["srcdoc"] = "srcdoc";
+    YfmHtmlBlockAttrs["style"] = "style";
+})(YfmHtmlBlockAttrs || (YfmHtmlBlockAttrs = {}));
+export const yfmHtmlBlockNodeName = 'yfm_html_block';
+export const yfmHtmlBlockNodeType = nodeTypeFactory(yfmHtmlBlockNodeName);
+export const YfmHtmlBlockAction = 'createYfmHtmlBlock';
+export const YfmHtmlBlockConsts = {
+    NodeName: yfmHtmlBlockNodeName,
+    NodeAttrs: YfmHtmlBlockAttrs,
+    nodeType: yfmHtmlBlockNodeType,
+};

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts

@@ -0,0 +1,10 @@
+import type { ExtensionNodeSpec } from '../../../../core';
+export { yfmHtmlBlockNodeName } from './const';
+export declare type YfmHtmlBlockSpecsOptions = {
+    nodeView?: ExtensionNodeSpec['view'];
+};
+export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
+    readonly NodeName: "yfm_html_block";
+    readonly NodeAttrs: typeof import("./const").YfmHtmlBlockAttrs;
+    readonly nodeType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+};

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js

@@ -0,0 +1,39 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { transform } from '@diplodoc/html-extension';
+import { YfmHtmlBlockConsts } from './const';
+export { yfmHtmlBlockNodeName } from './const';
+const YfmHtmlBlockSpecsExtension = (builder, { nodeView }) => {
+    builder
+        .configureMd((md) => md.use(transform({ bundle: false }), {}))
+        .addNode(YfmHtmlBlockConsts.NodeName, () => ({
+        fromMd: {
+            tokenSpec: {
+                name: YfmHtmlBlockConsts.NodeName,
+                type: 'node',
+                noCloseToken: true,
+                getAttrs: (token) => { var _a; return Object.fromEntries((_a = token.attrs) !== null && _a !== void 0 ? _a : []); },
+            },
+        },
+        spec: {
+            group: 'block',
+            attrs: {
+                [YfmHtmlBlockConsts.NodeAttrs.class]: { default: 'yfm-html' },
+                [YfmHtmlBlockConsts.NodeAttrs.frameborder]: { default: '' },
+                [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: { default: '' },
+                [YfmHtmlBlockConsts.NodeAttrs.style]: { default: null },
+                [YfmHtmlBlockConsts.NodeAttrs.newCreated]: { default: null },
+            },
+            toDOM: (node) => ['iframe', node.attrs],
+        },
+        toMd: (state, node) => {
+            state.write('::: html');
+            state.write('\n');
+            state.write(node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc]);
+            state.ensureNewLine();
+            state.write(':::');
+            state.closeBlock(node);
+        },
+        view: nodeView,
+    }));
+};
+export const YfmHtmlBlockSpecs = Object.assign(YfmHtmlBlockSpecsExtension, YfmHtmlBlockConsts);

package/build/esm/extensions/yfm/YfmHtmlBlock/actions.d.ts

@@ -0,0 +1,2 @@
+import { ActionSpec } from '../../../core';
+export declare const addYfmHtmlBlock: ActionSpec;

package/build/esm/extensions/yfm/YfmHtmlBlock/actions.js

@@ -0,0 +1,12 @@
+import { YfmHtmlBlockConsts, yfmHtmlBlockNodeType } from './YfmHtmlBlockSpecs/const';
+export const addYfmHtmlBlock = {
+    isEnable(state) {
+        return state.selection.empty;
+    },
+    run(state, dispatch, _view) {
+        dispatch(state.tr.insert(state.selection.from, yfmHtmlBlockNodeType(state.schema).create({
+            [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: '\n',
+            [YfmHtmlBlockConsts.NodeAttrs.newCreated]: true,
+        })));
+    },
+};

package/build/esm/extensions/yfm/YfmHtmlBlock/const.d.ts

@@ -0,0 +1,2 @@
+export * from './YfmHtmlBlockSpecs/const';
+export declare const YfmHtmlBlockAction = "createYfmHtmlBlock";

package/build/esm/extensions/yfm/YfmHtmlBlock/const.js

@@ -0,0 +1,2 @@
+export * from './YfmHtmlBlockSpecs/const';
+export const YfmHtmlBlockAction = 'createYfmHtmlBlock';

package/build/esm/extensions/yfm/YfmHtmlBlock/index.d.ts

@@ -0,0 +1,14 @@
+import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
+import { Action, ExtensionAuto } from '../../../core';
+import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
+export declare type YfmHtmlBlockOptions = {
+    useConfig?: () => IHTMLIFrameElementConfig | undefined;
+};
+export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [YfmHtmlBlockAction]: Action;
+        }
+    }
+}

package/build/esm/extensions/yfm/YfmHtmlBlock/index.js

@@ -0,0 +1,13 @@
+import { WYfmHtmlBlockNodeView } from './YfmHtmlBlockNodeView';
+import { YfmHtmlBlockSpecs } from './YfmHtmlBlockSpecs';
+import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
+import { addYfmHtmlBlock } from './actions';
+export const YfmHtmlBlock = (builder, options) => {
+    builder.use(YfmHtmlBlockSpecs, {
+        nodeView: YfmHtmlBlockNodeViewFactory(options),
+    });
+    builder.addAction(YfmHtmlBlockAction, () => addYfmHtmlBlock);
+};
+const YfmHtmlBlockNodeViewFactory = (options) => () => (node, view, getPos) => {
+    return new WYfmHtmlBlockNodeView({ node, view, getPos, options });
+};

package/build/esm/extensions/yfm/index.d.ts

@@ -4,8 +4,8 @@ export * from './Emoji';
 export * from './ImgSize';
 export * from './Monospace';
 export * from './Video';
-export * from './YfmCut';
 export * from './YfmConfigs';
+export * from './YfmCut';
 export * from './YfmFile';
 export * from './YfmHeading';
 export * from './YfmNote';

package/build/esm/extensions/yfm/index.js

@@ -4,8 +4,8 @@ export * from './Emoji';
 export * from './ImgSize';
 export * from './Monospace';
 export * from './Video';
-export * from './YfmCut';
 export * from './YfmConfigs';
+export * from './YfmCut';
 export * from './YfmFile';
 export * from './YfmHeading';
 export * from './YfmNote';

package/build/esm/i18n/common/en.json

@@ -1,5 +1,9 @@
 {
-  "toolbar_action_disabled": "Incompatible markup element",
+  "cancel": "Cancel",
+  "delete": "Delete",
   "edit": "Edit",
-  "delete": "Delete"
+  "preview": "Preview",
+  "remove": "Remove",
+  "save": "Save",
+  "toolbar_action_disabled": "Incompatible markup element"
 }

package/build/esm/i18n/common/index.d.ts

@@ -1,7 +1,11 @@
-export declare const i18n: <G extends "toolbar_action_disabled" | "edit" | "delete", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "remove" | "cancel" | "delete" | "edit" | "preview" | "save" | "toolbar_action_disabled", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
-    toolbar_action_disabled: string;
-    edit: string;
+    cancel: string;
     delete: string;
+    edit: string;
+    preview: string;
+    remove: string;
+    save: string;
+    toolbar_action_disabled: string;
 }[G] : string;

package/build/esm/i18n/common/ru.json

@@ -1,5 +1,9 @@
 {
-  "toolbar_action_disabled": "Несовместимый элемент разметки",
+  "cancel": "Отмена",
+  "delete": "Удалить",
   "edit": "Редактировать",
-  "delete": "Удалить"
+  "preview": "Предпросмотр",
+  "remove": "Удалить",
+  "save": "Сохранить",
+  "toolbar_action_disabled": "Несовместимый элемент разметки"
 }

package/build/esm/i18n/menubar/en.json

@@ -1,13 +1,22 @@
 {
-  "undo": "Undo",
-  "redo": "Redo",
   "bold": "Bold",
-  "italic": "Italic",
-  "underline": "Underline",
-  "strike": "Strikethrough",
-  "mono": "Monospace",
-  "mark": "Marked",
-  "text": "Text",
+  "checkbox": "Checkbox",
+  "code": "Code",
+  "code_inline": "Inline code",
+  "codeblock": "Code block",
+  "colorify": "Text color",
+  "colorify__color_blue": "Blue",
+  "colorify__color_default": "Default",
+  "colorify__color_gray": "Gray",
+  "colorify__color_green": "Green",
+  "colorify__color_orange": "Orange",
+  "colorify__color_red": "Red",
+  "colorify__color_violet": "Violet",
+  "colorify__color_yellow": "Yellow",
+  "colorify__group_text": "Text",
+  "cut": "Cut",
+  "emoji": "Emoji",
+  "file": "File",
   "heading": "Heading",
   "heading1": "Heading 1",
   "heading2": "Heading 2",
@@ -15,39 +24,31 @@
   "heading4": "Heading 4",
   "heading5": "Heading 5",
   "heading6": "Heading 6",
+  "hrule": "Separator",
+  "html": "HTML",
+  "image": "Image",
+  "italic": "Italic",
+  "link": "Link",
   "list": "List",
-  "ulist": "Bullet list",
-  "olist": "Ordered list",
-  "list__action_sink": "Sink item",
   "list__action_lift": "Lift item",
+  "list__action_sink": "Sink item",
   "list_action_disabled": "Contradicts the logic of the list",
-  "checkbox": "Checkbox",
-  "quote": "Quote",
-  "cut": "Cut",
-  "note": "Note",
-  "table": "Table",
-  "link": "Link",
-  "code": "Code",
-  "code_inline": "Inline code",
-  "codeblock": "Code block",
-  "image": "Image",
-  "hrule": "Separator",
-  "emoji": "Emoji",
-  "file": "File",
+  "mark": "Marked",
   "math": "Math",
-  "math_inline": "Inline math",
   "math_block": "Math block",
-  "colorify": "Text color",
-  "colorify__group_text": "Text",
-  "colorify__color_default": "Default",
-  "colorify__color_gray": "Gray",
-  "colorify__color_yellow": "Yellow",
-  "colorify__color_orange": "Orange",
-  "colorify__color_red": "Red",
-  "colorify__color_green": "Green",
-  "colorify__color_blue": "Blue",
-  "colorify__color_violet": "Violet",
+  "math_inline": "Inline math",
+  "mermaid": "Mermaid",
+  "mono": "Monospace",
   "more_action": "More action",
+  "note": "Note",
+  "olist": "Ordered list",
+  "quote": "Quote",
+  "redo": "Redo",
+  "strike": "Strikethrough",
+  "table": "Table",
   "tabs": "Tabs",
-  "mermaid": "Mermaid"
+  "text": "Text",
+  "ulist": "Bullet list",
+  "underline": "Underline",
+  "undo": "Undo"
 }

package/build/esm/i18n/menubar/index.d.ts

@@ -1,15 +1,24 @@
-export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "colorify" | "mono" | "text" | "cut" | "table" | "image" | "code_inline" | "heading" | "note" | "file" | "codeblock" | "checkbox" | "emoji" | "list" | "tabs" | "math" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "undo" | "redo" | "math_inline" | "math_block" | "ulist" | "olist" | "list__action_sink" | "list__action_lift" | "list_action_disabled" | "hrule" | "colorify__group_text" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_yellow" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_green" | "colorify__color_blue" | "colorify__color_violet" | "more_action" | "mermaid", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "colorify" | "mono" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "heading" | "note" | "file" | "codeblock" | "checkbox" | "emoji" | "list" | "tabs" | "math" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "undo" | "redo" | "math_inline" | "math_block" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "mermaid" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
-    undo: string;
-    redo: string;
     bold: string;
-    italic: string;
-    underline: string;
-    strike: string;
-    mono: string;
-    mark: string;
-    text: string;
+    checkbox: string;
+    code: string;
+    code_inline: string;
+    codeblock: string;
+    colorify: string;
+    colorify__color_blue: string;
+    colorify__color_default: string;
+    colorify__color_gray: string;
+    colorify__color_green: string;
+    colorify__color_orange: string;
+    colorify__color_red: string;
+    colorify__color_violet: string;
+    colorify__color_yellow: string;
+    colorify__group_text: string;
+    cut: string;
+    emoji: string;
+    file: string;
     heading: string;
     heading1: string;
     heading2: string;
@@ -17,39 +26,31 @@ export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "str
     heading4: string;
     heading5: string;
     heading6: string;
+    hrule: string;
+    html: string;
+    image: string;
+    italic: string;
+    link: string;
     list: string;
-    ulist: string;
-    olist: string;
-    list__action_sink: string;
     list__action_lift: string;
+    list__action_sink: string;
     list_action_disabled: string;
-    checkbox: string;
-    quote: string;
-    cut: string;
-    note: string;
-    table: string;
-    link: string;
-    code: string;
-    code_inline: string;
-    codeblock: string;
-    image: string;
-    hrule: string;
-    emoji: string;
-    file: string;
+    mark: string;
     math: string;
-    math_inline: string;
     math_block: string;
-    colorify: string;
-    colorify__group_text: string;
-    colorify__color_default: string;
-    colorify__color_gray: string;
-    colorify__color_yellow: string;
-    colorify__color_orange: string;
-    colorify__color_red: string;
-    colorify__color_green: string;
-    colorify__color_blue: string;
-    colorify__color_violet: string;
+    math_inline: string;
+    mermaid: string;
+    mono: string;
     more_action: string;
+    note: string;
+    olist: string;
+    quote: string;
+    redo: string;
+    strike: string;
+    table: string;
     tabs: string;
-    mermaid: string;
+    text: string;
+    ulist: string;
+    underline: string;
+    undo: string;
 }[G] : string;