@gravity-ui/markdown-editor 13.0.0

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

@@ -0,0 +1,11 @@
+import React, { useRef } from 'react';
+import { cn } from '../../../../../classname';
+import { ImgSettingsButton } from './ImgSettingsButton';
+import './ImgNodeView.css';
+export const cnImgSizeNodeView = cn('img-size-node-view');
+export const ImageNodeView = ({ node, view, getPos, updateAttributes, }) => {
+    const ref = useRef(null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ImgSettingsButton, { node: node, view: view, getPos: getPos, updateAttributes: updateAttributes, nodeRef: ref }),
+        React.createElement("img", Object.assign({}, node.attrs, { ref: ref }))));
+};

package/build/esm/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/esm/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/index.js

@@ -0,0 +1,21 @@
+import { Plugin } from 'prosemirror-state';
+import { reactNodeViewFactory } from '../../../../../react-utils';
+import { imageNodeName, imageRendererKey } from '../../const';
+import { ImageNodeView, cnImgSizeNodeView } from './NodeView';
+export const imgSizeNodeViewPlugin = (deps) => new Plugin({
+    key: imageRendererKey,
+    state: {
+        init: () => undefined,
+        apply: (tr) => {
+            return tr.getMeta(imageRendererKey);
+        },
+    },
+    props: {
+        nodeViews: {
+            [imageNodeName]: reactNodeViewFactory(ImageNodeView, {
+                isInline: true,
+                reactNodeWrapperCn: cnImgSizeNodeView('wrapper'),
+            })(deps),
+        },
+    },
+});

package/build/esm/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/esm/extensions/yfm/ImgSize/utils.js

@@ -0,0 +1,38 @@
+import { logger } from '../../../logger';
+import { imageNodeName } from '../../markdown';
+import { ImgSizeAttr } from '../../specs';
+import { IMG_MAX_HEIGHT } from './const';
+export function isImageNode(node) {
+    return node.type.name === imageNodeName;
+}
+export const createImageNode = (imgType, opts) => async ({ result, file }) => {
+    var _a;
+    const attrs = {
+        [ImgSizeAttr.Src]: result.url,
+        [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.error(err);
+        }
+    }
+    return imgType.create(attrs);
+};
+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 getImageSize(img) {
+    return { height: String(Math.min(IMG_MAX_HEIGHT, img.height)) };
+}

package/build/esm/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/esm/extensions/yfm/Math/MathSpecs/const.js

@@ -0,0 +1,12 @@
+export var MathNode;
+(function (MathNode) {
+    MathNode["Inline"] = "math_inline";
+    MathNode["Block"] = "math_display";
+})(MathNode || (MathNode = {}));
+export const CLASSNAMES = {
+    Inline: {
+        Container: 'math-inline',
+        Sharp: 'math-inline__sharp',
+        Content: 'math-inline__content',
+    },
+};

package/build/esm/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/esm/extensions/yfm/Math/MathSpecs/index.js

@@ -0,0 +1,53 @@
+import { transform } from '@diplodoc/latex-extension';
+import { nodeTypeFactory } from '../../../../utils/schema';
+import { CLASSNAMES, MathNode } from './const';
+export { MathNode } from './const';
+export const mathIType = nodeTypeFactory(MathNode.Inline);
+export const mathBType = nodeTypeFactory(MathNode.Block);
+export const MathSpecs = (builder) => {
+    builder.configureMd((md) => md.use(transform({ bundle: false, validate: false }), { output: '' }));
+    builder
+        .addNode(MathNode.Inline, () => ({
+        spec: {
+            group: 'inline math',
+            content: 'text*',
+            inline: true,
+            marks: '',
+            code: true,
+            toDOM: () => [
+                'span',
+                { class: CLASSNAMES.Inline.Container },
+                ['span', { class: CLASSNAMES.Inline.Sharp, contenteditable: 'false' }, '$'],
+                ['span', { class: CLASSNAMES.Inline.Content }, 0],
+                ['span', { class: CLASSNAMES.Inline.Sharp, contenteditable: 'false' }, '$'],
+            ],
+            parseDOM: [{ tag: `span.${CLASSNAMES.Inline.Content}`, priority: 200 }],
+        },
+        fromMd: {
+            tokenName: 'math_inline',
+            tokenSpec: { name: MathNode.Inline, type: 'block', noCloseToken: true },
+        },
+        toMd: (state, node) => {
+            state.text(`$${node.textContent}$`, false);
+            state.closeBlock();
+        },
+    }))
+        .addNode(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: MathNode.Block, type: 'block', noCloseToken: true },
+        },
+        toMd: (state, node) => {
+            state.text(`$$${node.textContent}$$\n\n`, false);
+            state.closeBlock();
+        },
+    }));
+};

package/build/esm/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/esm/extensions/yfm/Math/commands.js

@@ -0,0 +1,38 @@
+import { NodeSelection, TextSelection } from 'prosemirror-state';
+import { get$Cursor } from '../../../utils/selection';
+import { mathIType } from './const';
+export const ignoreIfCursorInsideMathInline = ({ selection, schema }) => {
+    const $cursor = get$Cursor(selection);
+    return ($cursor === null || $cursor === void 0 ? void 0 : $cursor.parent.type) === mathIType(schema);
+};
+/**
+ * If cursor at the beginning of MathInline:
+ * - if math is empty – remove anchor
+ * - if math has content – select node with NodeSelection
+ */
+export const removeEmptyMathInlineIfCursorIsAtBeginning = ({ tr, schema }, dispatch) => {
+    const $cursor = get$Cursor(tr.selection);
+    if (($cursor === null || $cursor === void 0 ? void 0 : $cursor.parent.type) === 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(NodeSelection.create(tr.doc, $cursor.before())));
+        }
+        return true;
+    }
+    return false;
+};
+/**
+ * If MathInline is before cursor – move cursor to the end of the math
+ */
+export const moveCursorToEndOfMathInline = ({ tr, schema }, dispatch) => {
+    var _a;
+    const $cursor = get$Cursor(tr.selection);
+    if (((_a = $cursor === null || $cursor === void 0 ? void 0 : $cursor.nodeBefore) === null || _a === void 0 ? void 0 : _a.type) === mathIType(schema)) {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(TextSelection.create(tr.doc, $cursor.pos - 1)));
+        return true;
+    }
+    return false;
+};

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

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

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

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

package/build/esm/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/esm/extensions/yfm/Math/hint.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
+import { Link, Portal } from '@gravity-ui/uikit';
+import { cn } from '../../../classname';
+import { i18n } from '../../../i18n/math-hint';
+export const b = cn('MathHint');
+const MathHintContent = function MathHintContent() {
+    return (React.createElement(React.Fragment, null,
+        i18n('math_hint'),
+        ' ',
+        React.createElement(Link, { href: 'https://katex.org/', target: 'blank' }, i18n('math_hint_katex'))));
+};
+const MathHint = function MathHint(props) {
+    return (React.createElement(HelpPopover, Object.assign({ placement: ['bottom-end', 'top-end'] }, props, { content: React.createElement(MathHintContent, null) })));
+};
+export function renderMathHint(props, container) {
+    return (React.createElement(Portal, { container: container },
+        React.createElement(MathHint, Object.assign({}, props))));
+}

package/build/esm/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/esm/extensions/yfm/Math/index.d.ts

@@ -0,0 +1,17 @@
+import type { Action, ExtensionAuto } from '../../../core';
+import { MathNodeViewOptions } from './view-and-edit';
+import './index.css';
+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/esm/extensions/yfm/Math/index.js

@@ -0,0 +1,63 @@
+import { chainCommands, setBlockType } from 'prosemirror-commands';
+import { TextSelection } from 'prosemirror-state';
+import { hasParentNodeOfType } from 'prosemirror-utils';
+import { inlineNodeInputRule, textblockTypeInputRule } from '../../../utils/inputrules';
+import { isTextSelection } from '../../../utils/selection';
+import { MathSpecs } from './MathSpecs';
+import { ignoreIfCursorInsideMathInline, moveCursorToEndOfMathInline, removeEmptyMathInlineIfCursorIsAtBeginning, } from './commands';
+import { mathBType, mathIType } from './const';
+import { mathViewAndEditPlugin } from './view-and-edit';
+import './index.css';
+export { MathNode, mathBType, mathIType } from './MathSpecs';
+export { MathBlockNodeView, MathInlineNodeView } from './view-and-edit';
+const mathIAction = 'addMathInline';
+const mathBAction = 'toMathBlock';
+const mathITemplate = 'f(x)=';
+export const Math = (builder, opts) => {
+    builder.use(MathSpecs);
+    builder.addKeymap(() => ({
+        Enter: ignoreIfCursorInsideMathInline,
+        Backspace: chainCommands(moveCursorToEndOfMathInline, removeEmptyMathInlineIfCursorIsAtBeginning),
+    }));
+    builder
+        .addPlugin(() => mathViewAndEditPlugin(Object.assign(Object.assign({}, opts), { reactRenderer: builder.context.get('reactrenderer') })))
+        .addInputRules((deps) => ({
+        rules: [
+            textblockTypeInputRule(/^\$\$\s$/, mathBType(deps.schema)),
+            inlineNodeInputRule(/\$[^$\s]+\$$/, (match) => mathIType(deps.schema).create(null, deps.schema.text(match.replace(/\$/g, '')))),
+        ],
+    }));
+    builder
+        .addAction(mathIAction, (deps) => {
+        const type = mathIType(deps.schema);
+        const cmd = (state, dispatch) => {
+            const { selection } = state;
+            if (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(TextSelection.create(tr.doc, selection.from + selectedText.length + 1));
+                    dispatch(tr);
+                }
+                return true;
+            }
+            return false;
+        };
+        return {
+            isActive: (state) => hasParentNodeOfType(type)(state.selection),
+            isEnable: cmd,
+            run: cmd,
+        };
+    })
+        .addAction(mathBAction, (deps) => {
+        const type = mathBType(deps.schema);
+        const cmd = setBlockType(type);
+        return {
+            isActive: (state) => hasParentNodeOfType(type)(state.selection),
+            isEnable: cmd,
+            run: cmd,
+        };
+    });
+};

package/build/esm/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/esm/extensions/yfm/Math/types.js

@@ -0,0 +1,3 @@
+// 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
+export {};

package/build/esm/extensions/yfm/Math/view-and-edit.css

@@ -0,0 +1,73 @@
+.math-block {
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-complementary);
+}
+
+.math-block-container {
+  margin-bottom: 15px;
+}
+
+.math-error {
+  color: var(--g-color-text-danger);
+}
+
+.math-block-view.math-view-error {
+  display: flex;
+  justify-content: center;
+}
+
+.math-container.math-active .math-view {
+  display: none;
+}
+
+.math-block-container.math-active .math-block {
+  background-color: var(--g-color-base-misc-light);
+}
+.math-block-container.math-active .math-block::before, .math-block-container.math-active .math-block::after {
+  display: block;
+  content: "$$";
+  color: var(--g-color-text-hint);
+}
+
+.math-container:not(.math-active) {
+  --g-md-math-back-color: transparent;
+  --g-md-math-hover-color: var(--g-color-base-simple-hover);
+  position: relative;
+}
+.math-container:not(.math-active).math-container-error {
+  --g-md-math-back-color: var(--g-color-base-danger-light);
+  --g-md-math-hover-color: var(--g-color-base-danger-light-hover);
+}
+.math-container:not(.math-active)::before {
+  position: absolute;
+  z-index: -1;
+  inset: -2px;
+  content: "";
+  border-radius: var(--g-border-radius-s);
+  background-color: var(--g-md-math-back-color);
+  transition: background-color 0.15s linear;
+}
+.math-container:not(.math-active):hover {
+  cursor: pointer;
+}
+.math-container:not(.math-active):hover::before {
+  background-color: var(--g-md-math-hover-color);
+}
+.math-container:not(.math-active) .math-inline,
+.math-container:not(.math-active) .math-block {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  opacity: 0;
+}
+.math-container:not(.math-active) .g-md-MathHint {
+  display: none;
+}
+
+.g-md-MathHint_view_block {
+  float: right;
+}
+.g-md-MathHint_view_inline {
+  display: inline-block;
+  margin-right: 6px;
+}

package/build/esm/extensions/yfm/Math/view-and-edit.d.ts

@@ -0,0 +1,62 @@
+import type { Node } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+import { Decoration, NodeView } from 'prosemirror-view';
+import type { ReactRenderer, RendererItem } from '../../../extensions/behavior/ReactRenderer';
+import type { KatexOptions, RunOptions } from './types';
+import './view-and-edit.css';
+export declare type MathNodeViewOptions = Pick<RunOptions, 'sanitize'> & {
+    katexOptions?: KatexOptions;
+    loadRuntimeScript: () => void;
+    reactRenderer: ReactRenderer;
+};
+export declare abstract class MathNodeView implements NodeView {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    protected node: Node;
+    protected texContent: string;
+    protected mathViewDOM: HTMLElement;
+    protected mathHintContainerDOM: HTMLElement;
+    protected hintRendererItem: RendererItem;
+    protected readonly reactRenderer: ReactRenderer;
+    protected readonly loadRuntimeScript: () => void;
+    protected readonly katexRunOptions: RunOptions;
+    protected hasActiveDeco: boolean;
+    abstract createDOM(): Record<'dom' | 'contentDOM' | 'mathViewDOM' | 'mathHintContainerDOM', HTMLElement> & {
+        hintRendererItem: RendererItem;
+    };
+    abstract isDisplayMode(): boolean;
+    constructor(node: Node, opts: MathNodeViewOptions);
+    update(node: Node, decos: readonly Decoration[]): boolean;
+    ignoreMutation(mutation: MutationRecord): boolean;
+    destroy(): void;
+    protected renderKatex(): void;
+    protected toggleErrorView(isError: boolean): void;
+    protected getTexContent(): string;
+}
+export declare class MathInlineNodeView extends MathNodeView {
+    destroy(): void;
+    isDisplayMode(): boolean;
+    createDOM(): {
+        dom: HTMLSpanElement;
+        contentDOM: HTMLSpanElement;
+        mathViewDOM: HTMLSpanElement;
+        mathHintContainerDOM: HTMLDivElement;
+        hintRendererItem: RendererItem;
+    };
+    protected createMathInlineDOM(): {
+        container: HTMLSpanElement;
+        content: HTMLSpanElement;
+    };
+}
+export declare class MathBlockNodeView extends MathNodeView {
+    isDisplayMode(): boolean;
+    createDOM(): {
+        dom: HTMLDivElement;
+        contentDOM: HTMLDivElement;
+        mathViewDOM: HTMLDivElement;
+        mathHintContainerDOM: HTMLDivElement;
+        hintRendererItem: RendererItem;
+    };
+}
+export declare type MathViewAndEditPluginOptions = MathNodeViewOptions;
+export declare const mathViewAndEditPlugin: (options: MathViewAndEditPluginOptions) => Plugin<any>;