@gravity-ui/markdown-editor 13.0.0

package/build/cjs/extensions/yfm/ImgSize/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImgSize = void 0;
+const ImagePaste_1 = require("./ImagePaste");
+const ImageWidget_1 = require("./ImageWidget");
+const ImgSizeSpecs_1 = require("./ImgSizeSpecs");
+const actions_1 = require("./actions");
+const const_1 = require("./const");
+const ImgSizeNodeView_1 = require("./plugins/ImgSizeNodeView");
+const ImgSize = (builder, opts) => {
+    builder.use(ImgSizeSpecs_1.ImgSizeSpecs, opts);
+    builder.use(ImageWidget_1.ImageWidget, {
+        imageUploadHandler: opts.imageUploadHandler,
+        needToSetDimensionsForUploadedImages: Boolean(opts.needToSetDimensionsForUploadedImages),
+    });
+    if (opts.imageUploadHandler) {
+        builder.use(ImagePaste_1.ImagePaste, {
+            imageUploadHandler: opts.imageUploadHandler,
+            needDimmensions: Boolean(opts.needToSetDimensionsForUploadedImages),
+        });
+    }
+    builder.addAction(const_1.addImageAction, ({ schema }) => (0, actions_1.addImage)(schema));
+    builder.addPlugin(ImgSizeNodeView_1.imgSizeNodeViewPlugin);
+};
+exports.ImgSize = ImgSize;

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/ImageForm.css

@@ -0,0 +1,8 @@
+.g-md-image-tooltip-form__input_type_width, .g-md-image-tooltip-form__input_type_height {
+  max-width: 112px;
+}
+.g-md-image-tooltip-form__size-controls {
+  display: flex;
+  align-items: center;
+  gap: 0 16px;
+}

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/ImageForm.d.ts

@@ -0,0 +1,10 @@
+import React, { RefObject } from 'react';
+import { Mark, Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+export declare const ImageForm: React.FC<{
+    node: Node;
+    dom: RefObject<HTMLElement>;
+    updateAttributes: (o: object, marks?: Mark[]) => void;
+    view: EditorView;
+    unsetEdit: () => void;
+}>;

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/ImageForm.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageForm = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const is_number_1 = tslib_1.__importDefault(require("is-number"));
+const classname_1 = require("../../../../../../classname");
+const base_1 = tslib_1.__importDefault(require("../../../../../../forms/base"));
+const components_1 = require("../../../../../../forms/components");
+const utils_1 = require("../../../../../../forms/utils");
+const forms_1 = require("../../../../../../i18n/forms");
+const useAutoFocus_1 = require("../../../../../../react-utils/useAutoFocus");
+const markdown_1 = require("../../../../../markdown");
+const specs_1 = require("../../../../../specs");
+const b = (0, classname_1.cn)('image-tooltip-form');
+const ImageForm = ({ node, updateAttributes, view, unsetEdit, dom }) => {
+    const { attrs, marks } = node;
+    const link = marks.find((m) => m.type.name === (0, markdown_1.linkType)(view.state.schema).name);
+    const [name, setName] = react_1.default.useState(attrs[specs_1.ImgSizeAttr.Title] || '');
+    const [alt, setAlt] = react_1.default.useState(attrs[specs_1.ImgSizeAttr.Alt] || '');
+    const [width, setWidth] = react_1.default.useState(attrs[specs_1.ImgSizeAttr.Width] || '');
+    const [height, setHeight] = react_1.default.useState(attrs[specs_1.ImgSizeAttr.Height] || '');
+    const [linkHref, setLinkHref] = react_1.default.useState((link === null || link === void 0 ? void 0 : link.attrs.href) || '');
+    const handleSubmit = () => {
+        updateAttributes({
+            title: name.trim(),
+            alt: alt.trim(),
+            width: (0, is_number_1.default)(width) && Number(width) >= 0 ? String(width) : '',
+            height: (0, is_number_1.default)(height) && Number(height) >= 0 ? String(height) : '',
+        }, link
+            ? [
+                (0, markdown_1.linkType)(view.state.schema).create(Object.assign(Object.assign({}, link.attrs), { [markdown_1.LinkAttr.Href]: linkHref })),
+            ]
+            : []);
+        unsetEdit();
+    };
+    const linkRef = react_1.default.useRef(null);
+    const imageNameRef = react_1.default.useRef(null);
+    (0, useAutoFocus_1.useAutoFocus)(link ? linkRef : imageNameRef);
+    const inputEnterKeyHandler = (0, utils_1.enterKeyHandler)(handleSubmit);
+    return (react_1.default.createElement(uikit_1.Popup, { open: true, anchorRef: dom, placement: ['bottom-start', 'top-start', 'bottom-end', 'top-end'], onOutsideClick: unsetEdit },
+        react_1.default.createElement(base_1.default.Form, { className: b() },
+            react_1.default.createElement(base_1.default.Layout, null,
+                link && (react_1.default.createElement(base_1.default.Row, { label: (0, forms_1.i18n)('image_link_href'), help: (0, forms_1.i18n)('image_link_href_help'), control: react_1.default.createElement(uikit_1.TextInput, { controlRef: linkRef, size: "s", view: "normal", value: linkHref, onUpdate: setLinkHref, className: b('input', { type: 'link' }), onKeyPress: inputEnterKeyHandler }) })),
+                react_1.default.createElement(base_1.default.Row, { label: (0, forms_1.i18n)('image_name'), control: react_1.default.createElement(uikit_1.TextInput, { controlRef: imageNameRef, size: "s", view: "normal", value: name, onUpdate: setName, className: b('input', { type: 'name' }), onKeyPress: inputEnterKeyHandler }) }),
+                react_1.default.createElement(base_1.default.Row, { label: (0, forms_1.i18n)('image_alt'), help: (0, forms_1.i18n)('image_alt_help'), control: react_1.default.createElement(uikit_1.TextInput, { size: "s", view: "normal", value: alt, onUpdate: setAlt, className: b('input', { type: 'alt' }), onKeyPress: inputEnterKeyHandler }) }),
+                react_1.default.createElement(base_1.default.Row, { label: (0, forms_1.i18n)('common_sizes'), control: react_1.default.createElement("div", { className: b('size-controls') },
+                        react_1.default.createElement(components_1.NumberInput, { min: 0, size: "s", view: "normal", value: width, onUpdate: setWidth, placeholder: (0, forms_1.i18n)('image_size_width'), className: b('input', { type: 'width' }), onKeyPress: inputEnterKeyHandler }),
+                        "x",
+                        react_1.default.createElement(components_1.NumberInput, { min: 0, size: "s", view: "normal", value: height, onUpdate: setHeight, placeholder: (0, forms_1.i18n)('image_size_height'), className: b('input', { type: 'height' }), onKeyPress: inputEnterKeyHandler })) })),
+            react_1.default.createElement(base_1.default.Footer, { onSubmit: handleSubmit }))));
+};
+exports.ImageForm = ImageForm;

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/index.d.ts

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

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ImageForm"), exports);

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgNodeView.css

@@ -0,0 +1,4 @@
+.g-md-img-size-node-view__wrapper {
+  position: relative;
+  display: inline-block;
+}

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.d.ts

@@ -0,0 +1,10 @@
+import React, { RefObject } from 'react';
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+export declare const ImgSettingsButton: React.FC<{
+    node: Node;
+    view: EditorView;
+    getPos: () => number | undefined;
+    nodeRef: RefObject<HTMLElement>;
+    updateAttributes: (o: object) => void;
+}>;

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImgSettingsButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const common_1 = require("../../../../../i18n/common");
+const hooks_1 = require("../../../../../react-utils/hooks");
+const useNodeEditing_1 = require("../../../../../react-utils/useNodeEditing");
+const useNodeHovered_1 = require("../../../../../react-utils/useNodeHovered");
+const remove_node_1 = require("../../../../../utils/remove-node");
+const const_1 = require("../../const");
+const ImageForm_1 = require("./ImageForm");
+const ImgSettingsButton = function ({ node, view, getPos, nodeRef, updateAttributes }) {
+    const [popupOpen, setPopupOpen, unsetPopupOpen] = (0, hooks_1.useBooleanState)(false);
+    const placement = ['bottom-end', 'bottom-start'];
+    const buttonRef = (0, react_1.useRef)(null);
+    const isNodeHovered = (0, useNodeHovered_1.useNodeHovered)(nodeRef);
+    const isButtonHovered = (0, useNodeHovered_1.useNodeHovered)(buttonRef);
+    const [edit, setEditing, unsetEdit, toggleEdit] = (0, useNodeEditing_1.useNodeEditing)({ nodeRef, view });
+    const visible = (isNodeHovered || isButtonHovered || popupOpen) && !edit;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((_a = const_1.imageRendererKey.getState(view.state)) === null || _a === void 0 ? void 0 : _a.linkAdded) {
+            setEditing();
+        }
+    }, [view, setEditing]);
+    if (edit)
+        return (react_1.default.createElement(ImageForm_1.ImageForm, { node: node, view: view, updateAttributes: updateAttributes, dom: nodeRef, unsetEdit: unsetEdit }));
+    return visible ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(uikit_1.Button, { onClick: setPopupOpen, ref: buttonRef, size: "s", view: 'raised', style: { position: 'absolute', right: '3px', top: '3px' } },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis })),
+        react_1.default.createElement(uikit_1.Popup, { open: popupOpen, anchorRef: buttonRef, onClose: unsetPopupOpen, placement: placement },
+            react_1.default.createElement(uikit_1.Menu, null,
+                react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
+                        toggleEdit();
+                        unsetPopupOpen();
+                    } }, (0, common_1.i18n)('edit')),
+                react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
+                        const pos = getPos();
+                        if (pos === undefined)
+                            return;
+                        (0, remove_node_1.removeNode)({
+                            node,
+                            pos,
+                            tr: view.state.tr,
+                            dispatch: view.dispatch,
+                        });
+                        view.focus();
+                    } }, (0, common_1.i18n)('delete')))))) : null;
+};
+exports.ImgSettingsButton = ImgSettingsButton;

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/NodeView.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ReactNodeViewProps } from '../../../../../react-utils/react-node-view';
+export declare const cnImgSizeNodeView: import("@bem-react/classname").ClassNameFormatter;
+export declare const ImageNodeView: React.FC<ReactNodeViewProps>;

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/NodeView.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageNodeView = exports.cnImgSizeNodeView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const classname_1 = require("../../../../../classname");
+const ImgSettingsButton_1 = require("./ImgSettingsButton");
+exports.cnImgSizeNodeView = (0, classname_1.cn)('img-size-node-view');
+const ImageNodeView = ({ node, view, getPos, updateAttributes, }) => {
+    const ref = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ImgSettingsButton_1.ImgSettingsButton, { node: node, view: view, getPos: getPos, updateAttributes: updateAttributes, nodeRef: ref }),
+        react_1.default.createElement("img", Object.assign({}, node.attrs, { ref: ref }))));
+};
+exports.ImageNodeView = ImageNodeView;

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/index.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'prosemirror-state';
+import { ExtensionDeps } from '../../../../../core';
+export declare const imgSizeNodeViewPlugin: (deps: ExtensionDeps) => Plugin<any>;

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imgSizeNodeViewPlugin = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const react_utils_1 = require("../../../../../react-utils");
+const const_1 = require("../../const");
+const NodeView_1 = require("./NodeView");
+const imgSizeNodeViewPlugin = (deps) => new prosemirror_state_1.Plugin({
+    key: const_1.imageRendererKey,
+    state: {
+        init: () => undefined,
+        apply: (tr) => {
+            return tr.getMeta(const_1.imageRendererKey);
+        },
+    },
+    props: {
+        nodeViews: {
+            [const_1.imageNodeName]: (0, react_utils_1.reactNodeViewFactory)(NodeView_1.ImageNodeView, {
+                isInline: true,
+                reactNodeWrapperCn: (0, NodeView_1.cnImgSizeNodeView)('wrapper'),
+            })(deps),
+        },
+    },
+});
+exports.imgSizeNodeViewPlugin = imgSizeNodeViewPlugin;

package/build/cjs/extensions/yfm/ImgSize/utils.d.ts

@@ -0,0 +1,13 @@
+import { Node, NodeType } from 'prosemirror-model';
+import { UploadSuccessItem } from '../../../utils/upload';
+import { ImgSizeAttr } from '../../specs';
+export declare function isImageNode(node: Node): boolean;
+export declare type CreateImageNodeOptions = {
+    needDimmensions: boolean;
+};
+export declare const createImageNode: (imgType: NodeType, opts: CreateImageNodeOptions) => ({ result, file }: UploadSuccessItem) => Promise<Node>;
+export declare function loadImage(imgFile: File): Promise<HTMLImageElement>;
+export declare function getImageSize(img: HTMLImageElement): {
+    [ImgSizeAttr.Width]?: string;
+    [ImgSizeAttr.Height]?: string;
+};

package/build/cjs/extensions/yfm/ImgSize/utils.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImageSize = exports.loadImage = exports.createImageNode = exports.isImageNode = void 0;
+const logger_1 = require("../../../logger");
+const markdown_1 = require("../../markdown");
+const specs_1 = require("../../specs");
+const const_1 = require("./const");
+function isImageNode(node) {
+    return node.type.name === markdown_1.imageNodeName;
+}
+exports.isImageNode = isImageNode;
+const createImageNode = (imgType, opts) => async ({ result, file }) => {
+    var _a;
+    const attrs = {
+        [specs_1.ImgSizeAttr.Src]: result.url,
+        [specs_1.ImgSizeAttr.Alt]: (_a = result.name) !== null && _a !== void 0 ? _a : file.name,
+    };
+    if (opts.needDimmensions) {
+        try {
+            const sizes = await loadImage(file).then(getImageSize);
+            Object.assign(attrs, sizes);
+        }
+        catch (err) {
+            logger_1.logger.error(err);
+        }
+    }
+    return imgType.create(attrs);
+};
+exports.createImageNode = createImageNode;
+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);
+    });
+}
+exports.loadImage = loadImage;
+function getImageSize(img) {
+    return { height: String(Math.min(const_1.IMG_MAX_HEIGHT, img.height)) };
+}
+exports.getImageSize = getImageSize;

package/build/cjs/extensions/yfm/Math/MathSpecs/const.d.ts

@@ -0,0 +1,11 @@
+export declare enum MathNode {
+    Inline = "math_inline",
+    Block = "math_display"
+}
+export declare const CLASSNAMES: {
+    readonly Inline: {
+        readonly Container: "math-inline";
+        readonly Sharp: "math-inline__sharp";
+        readonly Content: "math-inline__content";
+    };
+};

package/build/cjs/extensions/yfm/Math/MathSpecs/const.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLASSNAMES = exports.MathNode = void 0;
+var MathNode;
+(function (MathNode) {
+    MathNode["Inline"] = "math_inline";
+    MathNode["Block"] = "math_display";
+})(MathNode = exports.MathNode || (exports.MathNode = {}));
+exports.CLASSNAMES = {
+    Inline: {
+        Container: 'math-inline',
+        Sharp: 'math-inline__sharp',
+        Content: 'math-inline__content',
+    },
+};

package/build/cjs/extensions/yfm/Math/MathSpecs/index.d.ts

@@ -0,0 +1,5 @@
+import type { ExtensionAuto } from '../../../../core';
+export { MathNode } from './const';
+export declare const mathIType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const mathBType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const MathSpecs: ExtensionAuto;

package/build/cjs/extensions/yfm/Math/MathSpecs/index.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MathSpecs = exports.mathBType = exports.mathIType = exports.MathNode = void 0;
+const latex_extension_1 = require("@diplodoc/latex-extension");
+const schema_1 = require("../../../../utils/schema");
+const const_1 = require("./const");
+var const_2 = require("./const");
+Object.defineProperty(exports, "MathNode", { enumerable: true, get: function () { return const_2.MathNode; } });
+exports.mathIType = (0, schema_1.nodeTypeFactory)(const_1.MathNode.Inline);
+exports.mathBType = (0, schema_1.nodeTypeFactory)(const_1.MathNode.Block);
+const MathSpecs = (builder) => {
+    builder.configureMd((md) => md.use((0, latex_extension_1.transform)({ bundle: false, validate: false }), { output: '' }));
+    builder
+        .addNode(const_1.MathNode.Inline, () => ({
+        spec: {
+            group: 'inline math',
+            content: 'text*',
+            inline: true,
+            marks: '',
+            code: true,
+            toDOM: () => [
+                'span',
+                { class: const_1.CLASSNAMES.Inline.Container },
+                ['span', { class: const_1.CLASSNAMES.Inline.Sharp, contenteditable: 'false' }, '$'],
+                ['span', { class: const_1.CLASSNAMES.Inline.Content }, 0],
+                ['span', { class: const_1.CLASSNAMES.Inline.Sharp, contenteditable: 'false' }, '$'],
+            ],
+            parseDOM: [{ tag: `span.${const_1.CLASSNAMES.Inline.Content}`, priority: 200 }],
+        },
+        fromMd: {
+            tokenName: 'math_inline',
+            tokenSpec: { name: const_1.MathNode.Inline, type: 'block', noCloseToken: true },
+        },
+        toMd: (state, node) => {
+            state.text(`$${node.textContent}$`, false);
+            state.closeBlock();
+        },
+    }))
+        .addNode(const_1.MathNode.Block, () => ({
+        spec: {
+            group: 'block math',
+            content: 'text*',
+            marks: '',
+            code: true,
+            toDOM: () => ['div', { class: 'math-block' }, 0],
+            parseDOM: [{ tag: 'div.math-block', priority: 200 }],
+        },
+        fromMd: {
+            tokenName: 'math_block',
+            tokenSpec: { name: const_1.MathNode.Block, type: 'block', noCloseToken: true },
+        },
+        toMd: (state, node) => {
+            state.text(`$$${node.textContent}$$\n\n`, false);
+            state.closeBlock();
+        },
+    }));
+};
+exports.MathSpecs = MathSpecs;

package/build/cjs/extensions/yfm/Math/commands.d.ts

@@ -0,0 +1,12 @@
+import { Command } from 'prosemirror-state';
+export declare const ignoreIfCursorInsideMathInline: Command;
+/**
+ * If cursor at the beginning of MathInline:
+ * - if math is empty – remove anchor
+ * - if math has content – select node with NodeSelection
+ */
+export declare const removeEmptyMathInlineIfCursorIsAtBeginning: Command;
+/**
+ * If MathInline is before cursor – move cursor to the end of the math
+ */
+export declare const moveCursorToEndOfMathInline: Command;

package/build/cjs/extensions/yfm/Math/commands.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.moveCursorToEndOfMathInline = exports.removeEmptyMathInlineIfCursorIsAtBeginning = exports.ignoreIfCursorInsideMathInline = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const selection_1 = require("../../../utils/selection");
+const const_1 = require("./const");
+const ignoreIfCursorInsideMathInline = ({ selection, schema }) => {
+    const $cursor = (0, selection_1.get$Cursor)(selection);
+    return ($cursor === null || $cursor === void 0 ? void 0 : $cursor.parent.type) === (0, const_1.mathIType)(schema);
+};
+exports.ignoreIfCursorInsideMathInline = ignoreIfCursorInsideMathInline;
+/**
+ * If cursor at the beginning of MathInline:
+ * - if math is empty – remove anchor
+ * - if math has content – select node with NodeSelection
+ */
+const removeEmptyMathInlineIfCursorIsAtBeginning = ({ tr, schema }, dispatch) => {
+    const $cursor = (0, selection_1.get$Cursor)(tr.selection);
+    if (($cursor === null || $cursor === void 0 ? void 0 : $cursor.parent.type) === (0, const_1.mathIType)(schema) && $cursor.start() === $cursor.pos) {
+        const isEmptyAnchor = $cursor.parent.nodeSize <= 2;
+        if (isEmptyAnchor) {
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.delete($cursor.before(), $cursor.after()));
+        }
+        else {
+            dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, $cursor.before())));
+        }
+        return true;
+    }
+    return false;
+};
+exports.removeEmptyMathInlineIfCursorIsAtBeginning = removeEmptyMathInlineIfCursorIsAtBeginning;
+/**
+ * If MathInline is before cursor – move cursor to the end of the math
+ */
+const moveCursorToEndOfMathInline = ({ tr, schema }, dispatch) => {
+    var _a;
+    const $cursor = (0, selection_1.get$Cursor)(tr.selection);
+    if (((_a = $cursor === null || $cursor === void 0 ? void 0 : $cursor.nodeBefore) === null || _a === void 0 ? void 0 : _a.type) === (0, const_1.mathIType)(schema)) {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, $cursor.pos - 1)));
+        return true;
+    }
+    return false;
+};
+exports.moveCursorToEndOfMathInline = moveCursorToEndOfMathInline;

package/build/cjs/extensions/yfm/Math/const.d.ts

@@ -0,0 +1,2 @@
+export * from './MathSpecs/const';
+export { mathBType, mathIType } from './MathSpecs';

package/build/cjs/extensions/yfm/Math/const.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mathIType = exports.mathBType = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./MathSpecs/const"), exports);
+var MathSpecs_1 = require("./MathSpecs");
+Object.defineProperty(exports, "mathBType", { enumerable: true, get: function () { return MathSpecs_1.mathBType; } });
+Object.defineProperty(exports, "mathIType", { enumerable: true, get: function () { return MathSpecs_1.mathIType; } });

package/build/cjs/extensions/yfm/Math/hint.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HelpPopoverProps } from '@gravity-ui/components';
+export declare const b: import("@bem-react/classname").ClassNameFormatter;
+declare type MathHintProps = Pick<HelpPopoverProps, 'offset' | 'hasArrow'>;
+export declare function renderMathHint(props: MathHintProps, container: HTMLElement): React.ReactNode;
+export {};

package/build/cjs/extensions/yfm/Math/hint.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMathHint = exports.b = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../classname");
+const math_hint_1 = require("../../../i18n/math-hint");
+exports.b = (0, classname_1.cn)('MathHint');
+const MathHintContent = function MathHintContent() {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        (0, math_hint_1.i18n)('math_hint'),
+        ' ',
+        react_1.default.createElement(uikit_1.Link, { href: 'https://katex.org/', target: 'blank' }, (0, math_hint_1.i18n)('math_hint_katex'))));
+};
+const MathHint = function MathHint(props) {
+    return (react_1.default.createElement(components_1.HelpPopover, Object.assign({ placement: ['bottom-end', 'top-end'] }, props, { content: react_1.default.createElement(MathHintContent, null) })));
+};
+function renderMathHint(props, container) {
+    return (react_1.default.createElement(uikit_1.Portal, { container: container },
+        react_1.default.createElement(MathHint, Object.assign({}, props))));
+}
+exports.renderMathHint = renderMathHint;

package/build/cjs/extensions/yfm/Math/index.css

@@ -0,0 +1,8 @@
+.math-inline {
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-complementary);
+  background-color: var(--g-color-base-misc-light);
+}
+.math-inline__sharp {
+  color: var(--g-color-text-hint);
+}

package/build/cjs/extensions/yfm/Math/index.d.ts

@@ -0,0 +1,16 @@
+import type { Action, ExtensionAuto } from '../../../core';
+import { MathNodeViewOptions } from './view-and-edit';
+export { MathNode, mathBType, mathIType } from './MathSpecs';
+export { MathBlockNodeView, MathInlineNodeView } from './view-and-edit';
+declare const mathIAction = "addMathInline";
+declare const mathBAction = "toMathBlock";
+export declare type MathOptions = Pick<MathNodeViewOptions, 'loadRuntimeScript' | 'sanitize' | 'katexOptions'>;
+export declare const Math: ExtensionAuto<MathOptions>;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [mathIAction]: Action;
+            [mathBAction]: Action;
+        }
+    }
+}

package/build/cjs/extensions/yfm/Math/index.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Math = exports.MathInlineNodeView = exports.MathBlockNodeView = exports.mathIType = exports.mathBType = exports.MathNode = void 0;
+const prosemirror_commands_1 = require("prosemirror-commands");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const inputrules_1 = require("../../../utils/inputrules");
+const selection_1 = require("../../../utils/selection");
+const MathSpecs_1 = require("./MathSpecs");
+const commands_1 = require("./commands");
+const const_1 = require("./const");
+const view_and_edit_1 = require("./view-and-edit");
+var MathSpecs_2 = require("./MathSpecs");
+Object.defineProperty(exports, "MathNode", { enumerable: true, get: function () { return MathSpecs_2.MathNode; } });
+Object.defineProperty(exports, "mathBType", { enumerable: true, get: function () { return MathSpecs_2.mathBType; } });
+Object.defineProperty(exports, "mathIType", { enumerable: true, get: function () { return MathSpecs_2.mathIType; } });
+var view_and_edit_2 = require("./view-and-edit");
+Object.defineProperty(exports, "MathBlockNodeView", { enumerable: true, get: function () { return view_and_edit_2.MathBlockNodeView; } });
+Object.defineProperty(exports, "MathInlineNodeView", { enumerable: true, get: function () { return view_and_edit_2.MathInlineNodeView; } });
+const mathIAction = 'addMathInline';
+const mathBAction = 'toMathBlock';
+const mathITemplate = 'f(x)=';
+const Math = (builder, opts) => {
+    builder.use(MathSpecs_1.MathSpecs);
+    builder.addKeymap(() => ({
+        Enter: commands_1.ignoreIfCursorInsideMathInline,
+        Backspace: (0, prosemirror_commands_1.chainCommands)(commands_1.moveCursorToEndOfMathInline, commands_1.removeEmptyMathInlineIfCursorIsAtBeginning),
+    }));
+    builder
+        .addPlugin(() => (0, view_and_edit_1.mathViewAndEditPlugin)(Object.assign(Object.assign({}, opts), { reactRenderer: builder.context.get('reactrenderer') })))
+        .addInputRules((deps) => ({
+        rules: [
+            (0, inputrules_1.textblockTypeInputRule)(/^\$\$\s$/, (0, const_1.mathBType)(deps.schema)),
+            (0, inputrules_1.inlineNodeInputRule)(/\$[^$\s]+\$$/, (match) => (0, const_1.mathIType)(deps.schema).create(null, deps.schema.text(match.replace(/\$/g, '')))),
+        ],
+    }));
+    builder
+        .addAction(mathIAction, (deps) => {
+        const type = (0, const_1.mathIType)(deps.schema);
+        const cmd = (state, dispatch) => {
+            const { selection } = state;
+            if ((0, selection_1.isTextSelection)(selection) && selection.$from.sameParent(selection.$to)) {
+                if (dispatch) {
+                    const fragment = selection.content().content;
+                    const selectedText = fragment.textBetween(0, fragment.size) || mathITemplate;
+                    const tr = state.tr;
+                    selection.replaceWith(tr, type.create(null, deps.schema.text(selectedText)));
+                    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, selection.from + selectedText.length + 1));
+                    dispatch(tr);
+                }
+                return true;
+            }
+            return false;
+        };
+        return {
+            isActive: (state) => (0, prosemirror_utils_1.hasParentNodeOfType)(type)(state.selection),
+            isEnable: cmd,
+            run: cmd,
+        };
+    })
+        .addAction(mathBAction, (deps) => {
+        const type = (0, const_1.mathBType)(deps.schema);
+        const cmd = (0, prosemirror_commands_1.setBlockType)(type);
+        return {
+            isActive: (state) => (0, prosemirror_utils_1.hasParentNodeOfType)(type)(state.selection),
+            isEnable: cmd,
+            run: cmd,
+        };
+    });
+};
+exports.Math = Math;

package/build/cjs/extensions/yfm/Math/types.d.ts

@@ -0,0 +1,16 @@
+import type { KatexOptions } from 'katex';
+export type { KatexOptions };
+export declare type RunOptions = KatexOptions & {
+    querySelector?: string;
+    nodes?: HTMLElement[];
+    sanitize?: (content: string) => string;
+};
+export declare type ExposedAPI = {
+    run: (options?: RunOptions) => Promise<void>;
+};
+declare global {
+    interface Window {
+        latexJsonp: Callback[];
+    }
+    type Callback = (exposed: ExposedAPI) => void | Promise<void>;
+}

package/build/cjs/extensions/yfm/Math/types.js

@@ -0,0 +1,4 @@
+"use strict";
+// copied from https://github.com/diplodoc-platform/latex-extension/blob/7958a99a7d77f31fb5c4cf485990cbbd82ebe3f0/src/types.ts
+// and https://github.com/diplodoc-platform/latex-extension/blob/7958a99a7d77f31fb5c4cf485990cbbd82ebe3f0/src/%40types/globals.d.ts
+Object.defineProperty(exports, "__esModule", { value: true });