@gravity-ui/markdown-editor 13.0.0

package/build/esm/extensions/yfm/YfmCut/index.css

@@ -0,0 +1,10 @@
+.ProseMirror.yfm .yfm-cut {
+  border: 1px dashed transparent;
+  border-radius: var(--g-border-radius-s);
+}
+.ProseMirror.yfm .yfm-cut:hover {
+  border-color: var(--g-color-line-generic);
+}
+.ProseMirror.yfm .yfm-cut.yfm-cut-active {
+  border-color: var(--g-color-line-generic);
+}

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

@@ -0,0 +1,16 @@
+import type { Action, ExtensionAuto } from '../../../core';
+import { YfmCutSpecsOptions } from './YfmCutSpecs';
+import './index.css';
+declare const cutAction = "toYfmCut";
+export { CutNode, cutType, cutTitleType, cutContentType } from './YfmCutSpecs';
+export declare type YfmCutOptions = Pick<YfmCutSpecsOptions, 'yfmCutTitlePlaceholder' | 'yfmCutContentPlaceholder'> & {
+    yfmCutKey?: string | null;
+};
+export declare const YfmCut: ExtensionAuto<YfmCutOptions>;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [cutAction]: Action;
+        }
+    }
+}

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

@@ -0,0 +1,39 @@
+import { chainCommands } from 'prosemirror-commands';
+import { nodeInputRule } from '../../../utils/inputrules';
+import { withLogAction } from '../../../utils/keymap';
+import { YfmCutSpecs } from './YfmCutSpecs';
+import { createYfmCut, toYfmCut } from './actions/toYfmCut';
+import { backToCutTitle, exitFromCutTitle, liftEmptyBlockFromCut, removeCut } from './commands';
+import { cutType } from './const';
+import { YfmCutTitleNodeView } from './nodeviews/yfm-cut-title';
+import { cutActivePlugin } from './plugins/active';
+import { cutAutoOpenPlugin } from './plugins/auto-open';
+import './index.css';
+const cutAction = 'toYfmCut';
+export { CutNode, cutType, cutTitleType, cutContentType } from './YfmCutSpecs';
+export const YfmCut = (builder, opts) => {
+    builder.use(YfmCutSpecs, Object.assign(Object.assign({}, opts), { 
+        // @ts-expect-error
+        cutView: 
+        // FIX: ignore mutation and don't rerender node when yfm.js open or close cut
+        () => () => ({
+            ignoreMutation(mutation) {
+                return mutation instanceof MutationRecord && mutation.type === 'attributes';
+            },
+        }), cutTitleView: () => (node) => new YfmCutTitleNodeView(node) }));
+    builder
+        .addPlugin(cutActivePlugin)
+        .addPlugin(cutAutoOpenPlugin)
+        .addAction(cutAction, () => toYfmCut)
+        .addKeymap(() => ({
+        Backspace: chainCommands(backToCutTitle, removeCut),
+        Enter: chainCommands(exitFromCutTitle, liftEmptyBlockFromCut),
+    }))
+        .addInputRules(({ schema }) => ({
+        rules: [nodeInputRule(/(?:^)({% cut)\s$/, cutType(schema).createAndFill(), 1)],
+    }));
+    if (opts === null || opts === void 0 ? void 0 : opts.yfmCutKey) {
+        const { yfmCutKey } = opts;
+        builder.addKeymap(() => ({ [yfmCutKey]: withLogAction('yfm_cut', createYfmCut) }));
+    }
+};

package/build/esm/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.css

@@ -0,0 +1,3 @@
+.yfm-cut-title .g-md-yfm-cut-title-inner {
+  cursor: text;
+}

package/build/esm/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.d.ts

@@ -0,0 +1,10 @@
+import type { Node } from 'prosemirror-model';
+import type { NodeView } from 'prosemirror-view';
+import './yfm-cut-title.css';
+export declare class YfmCutTitleNodeView implements NodeView {
+    readonly dom: HTMLElement;
+    readonly contentDOM: HTMLElement;
+    private node;
+    constructor(node: Node);
+    update(node: Node): boolean;
+}

package/build/esm/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.js

@@ -0,0 +1,21 @@
+import './yfm-cut-title.css';
+export class YfmCutTitleNodeView {
+    constructor(node) {
+        this.node = node;
+        this.dom = document.createElement('div');
+        this.dom.classList.add('yfm-cut-title');
+        this.dom.replaceChildren((this.contentDOM = document.createElement('div')));
+        this.contentDOM.classList.add('g-md-yfm-cut-title-inner');
+        this.contentDOM.addEventListener('click', (e) => {
+            // ignore clicking on the title content
+            // you can open/close yfm-cut by clicking on the arrow icon
+            e.stopPropagation();
+        });
+    }
+    update(node) {
+        if (this.node.type !== node.type)
+            return false;
+        this.node = node;
+        return true;
+    }
+}

package/build/esm/extensions/yfm/YfmCut/plugins/active.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'prosemirror-state';
+export declare const cutActivePlugin: () => Plugin<any>;

package/build/esm/extensions/yfm/YfmCut/plugins/active.js

@@ -0,0 +1,55 @@
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { isNodeSelection, isTextSelection } from '../../../../utils/selection';
+import { cutType } from '../const';
+const YFM_CUT_ACTIVE_CLASSNAME = 'yfm-cut-active';
+export const cutActivePlugin = () => {
+    return new Plugin({
+        props: {
+            decorations(state) {
+                const decos = [];
+                const sel = state.selection;
+                const yfmCutType = cutType(state.schema);
+                const createDeco = ({ pos, node }) => {
+                    decos.push(Decoration.node(pos, pos + node.nodeSize, {
+                        class: YFM_CUT_ACTIVE_CLASSNAME,
+                    }));
+                };
+                if (isNodeSelection(sel)) {
+                    if (sel.node.type === yfmCutType)
+                        createDeco({ pos: sel.from, node: sel.node });
+                    findParentNodesOfType(yfmCutType, sel.$from).forEach(createDeco);
+                }
+                else if (isTextSelection(sel)) {
+                    findParentNodesOfType(yfmCutType, sel.$from).forEach(createDeco);
+                    if (!sel.$from.sameParent(sel.$to)) {
+                        findParentNodesOfType(yfmCutType, sel.$to).forEach(createDeco);
+                        state.doc.nodesBetween(sel.from, sel.to, (node, pos) => {
+                            if (node.type === yfmCutType)
+                                createDeco({ pos, node });
+                            if (node.isTextblock)
+                                return false;
+                            return true;
+                        });
+                    }
+                }
+                else {
+                    // some other selection
+                    findParentNodesOfType(yfmCutType, sel.$from).forEach(createDeco);
+                }
+                return decos.length ? DecorationSet.create(state.doc, decos) : DecorationSet.empty;
+            },
+        },
+    });
+};
+function findParentNodesOfType(type, $pos) {
+    let { depth } = $pos;
+    const nodes = [];
+    while (depth >= 0) {
+        const node = $pos.node(depth);
+        if (node.type === type)
+            nodes.push({ depth, node, pos: $pos.before(depth) });
+        depth--;
+    }
+    return nodes;
+}

package/build/esm/extensions/yfm/YfmCut/plugins/auto-open.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'prosemirror-state';
+export declare const cutAutoOpenPlugin: () => Plugin<any>;

package/build/esm/extensions/yfm/YfmCut/plugins/auto-open.js

@@ -0,0 +1,97 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import { throttle } from '../../../../lodash';
+import { isTextSelection } from '../../../../utils/selection';
+import { cutContentType, cutType } from '../const';
+const key = new PluginKey('yfm-cut-auto-open');
+export const cutAutoOpenPlugin = () => {
+    return new Plugin({
+        key,
+        view(view) {
+            update(view);
+            const dragHandler = new CutAutoOpenOnDragOver(view);
+            return {
+                update: (view) => update(view),
+                destroy: () => dragHandler.destroy(),
+            };
+        },
+    });
+};
+function update(view) {
+    const sel = view.state.selection;
+    const domAtPos = view.domAtPos.bind(view);
+    if (isTextSelection(sel)) {
+        if (sel.$cursor) {
+            openParentYfmCuts(sel.$cursor, domAtPos);
+        }
+        else {
+            openParentYfmCuts(sel.$head, domAtPos);
+            openParentYfmCuts(sel.$anchor, domAtPos);
+        }
+    }
+}
+function openParentYfmCuts($pos, domAtPos) {
+    let { depth } = $pos;
+    const { schema } = $pos.parent.type;
+    while (depth > 0) {
+        if ($pos.node(depth).type === cutContentType(schema)) {
+            if ($pos.node(depth - 1).type === cutType(schema)) {
+                const { node: cutDomNode } = domAtPos($pos.start(depth - 1), 0);
+                cutDomNode.classList.add('open');
+                depth--;
+            }
+        }
+        depth--;
+    }
+}
+class CutAutoOpenOnDragOver {
+    constructor(view) {
+        this._cutElem = null;
+        this._timeout = null;
+        this._editorView = view;
+        this._docListener = throttle(this._onDocEvent.bind(this), CutAutoOpenOnDragOver.THROTTLE_WAIT);
+        document.addEventListener('mousemove', this._docListener);
+        document.addEventListener('dragover', this._docListener);
+    }
+    destroy() {
+        this._clear();
+        this._docListener.cancel();
+        document.removeEventListener('mousemove', this._docListener);
+        document.removeEventListener('dragover', this._docListener);
+    }
+    _onDocEvent(event) {
+        const view = this._editorView;
+        if (!view.dragging)
+            return;
+        const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+        if (!pos)
+            return;
+        const elem = findDomRefAtPos(pos.pos, view.domAtPos.bind(view));
+        const cutElem = elem.closest(CutAutoOpenOnDragOver.YFM_CUT_SELECTOR);
+        if (cutElem === this._cutElem)
+            return;
+        this._clear();
+        if (cutElem)
+            this._setCutElem(cutElem);
+    }
+    _clear() {
+        if (this._timeout !== null)
+            clearTimeout(this._timeout);
+        this._timeout = null;
+        this._cutElem = null;
+    }
+    _setCutElem(elem) {
+        this._cutElem = elem;
+        this._timeout = setTimeout(this._openCut.bind(this), CutAutoOpenOnDragOver.OPEN_TIMEOUT);
+    }
+    _openCut() {
+        var _a;
+        if (this._editorView.dragging) {
+            (_a = this._cutElem) === null || _a === void 0 ? void 0 : _a.classList.add('open');
+        }
+        this._clear();
+    }
+}
+CutAutoOpenOnDragOver.YFM_CUT_SELECTOR = '.yfm-cut:not(.open)';
+CutAutoOpenOnDragOver.OPEN_TIMEOUT = 500; //ms
+CutAutoOpenOnDragOver.THROTTLE_WAIT = 50; //ms

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

@@ -0,0 +1,7 @@
+import { ExtensionAuto } from '../../../../core';
+import { FileUploadHandler } from '../../../../utils/upload';
+export declare type YfmFilePasteOptions = {
+    fileUploadHandler: FileUploadHandler;
+    needToSetDimensionsForUploadedImages: boolean;
+};
+export declare const YfmFilePaste: ExtensionAuto<YfmFilePasteOptions>;

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

@@ -0,0 +1,88 @@
+import { Fragment, Slice } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+import { dropPoint } from 'prosemirror-transform';
+import { isFunction } from '../../../../lodash';
+import { clipboardUtils } from '../../../behavior/Clipboard';
+import { imageType } from '../../../markdown';
+import { createImageNode } from '../../ImgSize/utils'; // TODO: remove hard import
+import { fileType } from '../YfmFileSpecs';
+import { YfmFilesUploadProcessBase } from './upload';
+const { isFilesOnly, isFilesFromHtml, isImageFile } = clipboardUtils;
+export const YfmFilePaste = (builder, opts) => {
+    if (!opts || !isFunction(opts.fileUploadHandler))
+        throw new Error('YfmFilePaste extension: fileUploadHandler is not a function');
+    builder.addPlugin(() => new Plugin({
+        props: {
+            handleDOMEvents: {
+                paste(view, e) {
+                    const files = getPastedFiles(e.clipboardData);
+                    if (files) {
+                        e.preventDefault();
+                        new YfmFilesPasteUploadProcess(view, files, {
+                            uploadHandler: opts.fileUploadHandler,
+                            needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages,
+                        }).run();
+                        return true;
+                    }
+                    return false;
+                },
+                drop(view, e) {
+                    var _a, _b;
+                    // handle drop files from device
+                    if (view.dragging)
+                        return false;
+                    const files = getPastedFiles(e.dataTransfer);
+                    if (!files)
+                        return false;
+                    const dropPos = (_b = (_a = view.posAtCoords({ left: e.clientX, top: e.clientY })) === null || _a === void 0 ? void 0 : _a.pos) !== null && _b !== void 0 ? _b : -1;
+                    if (dropPos === -1)
+                        return false;
+                    const posToInsert = dropPoint(view.state.doc, dropPos, createFakeFileSlice(view.state.schema));
+                    if (posToInsert !== null) {
+                        new YfmFilesPasteUploadProcess(view, files, {
+                            pos: posToInsert,
+                            uploadHandler: opts.fileUploadHandler,
+                            needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages,
+                        }).run();
+                    }
+                    e.preventDefault();
+                    return true;
+                },
+            },
+        },
+    }), builder.Priority.Low);
+};
+function getPastedFiles(data) {
+    if (!data)
+        return null;
+    if (!isFilesOnly(data) && !isFilesFromHtml(data))
+        return null;
+    return Array.from(data.files);
+}
+function createFakeFileSlice(schema) {
+    return new Slice(Fragment.from(fileType(schema).create({
+        href: 'fake',
+        download: 'file',
+    })), 0, 0);
+}
+class YfmFilesPasteUploadProcess extends YfmFilesUploadProcessBase {
+    constructor(view, files, opts) {
+        super(view, files, opts.uploadHandler);
+        this.pos = opts.pos;
+        const { schema } = this.view.state;
+        if (imageType(schema)) {
+            this.createImage = createImageNode(imageType(schema), {
+                needDimmensions: opts.needToSetDimensionsForUploadedImages,
+            });
+        }
+    }
+    getSkeletonInitPos() {
+        var _a;
+        return (_a = this.pos) !== null && _a !== void 0 ? _a : this.view.state.tr.selection.from;
+    }
+    async createPMNode(res) {
+        return isImageFile(res.file) && this.createImage
+            ? this.createImage(res)
+            : this.createFile(res);
+    }
+}

package/build/esm/extensions/yfm/YfmFile/YfmFilePaste/skeleton.css

@@ -0,0 +1,8 @@
+.g-md-file-skeleton {
+  display: inline-flex;
+  align-items: center;
+}
+.g-md-file-skeleton__skeleton {
+  width: 120px;
+  height: 20px;
+}

package/build/esm/extensions/yfm/YfmFile/YfmFilePaste/skeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ReactWidgetDescriptor } from '../../../behavior/WidgetDecoration';
+import './skeleton.css';
+export declare class FileSkeletonDescriptor extends ReactWidgetDescriptor {
+    #private;
+    constructor(initPos: number);
+    getDomElem(): HTMLElement;
+    renderReactElement(): React.ReactElement;
+}

package/build/esm/extensions/yfm/YfmFile/YfmFilePaste/skeleton.js

@@ -0,0 +1,25 @@
+var _FileSkeletonDescriptor_domElem;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+import React from 'react';
+import { Skeleton } from '@gravity-ui/uikit';
+import { cn } from '../../../../classname';
+import { ReactWidgetDescriptor } from '../../../behavior/WidgetDecoration';
+import './skeleton.css';
+const b = cn('file-skeleton');
+export class FileSkeletonDescriptor extends ReactWidgetDescriptor {
+    constructor(initPos) {
+        super(initPos, 'yfm_file_skeleton');
+        _FileSkeletonDescriptor_domElem.set(this, void 0);
+        __classPrivateFieldSet(this, _FileSkeletonDescriptor_domElem, document.createElement('span'), "f");
+        __classPrivateFieldGet(this, _FileSkeletonDescriptor_domElem, "f").classList.add(b(), 'yfm-file');
+    }
+    getDomElem() {
+        return __classPrivateFieldGet(this, _FileSkeletonDescriptor_domElem, "f");
+    }
+    renderReactElement() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "yfm-file__icon" }),
+            React.createElement(Skeleton, { className: b('skeleton') })));
+    }
+}
+_FileSkeletonDescriptor_domElem = new WeakMap();

package/build/esm/extensions/yfm/YfmFile/YfmFilePaste/upload.d.ts

@@ -0,0 +1,12 @@
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { FileUploadHandler, UploadSuccessItem } from '../../../../utils/upload';
+import { FilesBatchUploadProcess } from '../../../behavior/utils/upload';
+import { FileSkeletonDescriptor } from './skeleton';
+export declare abstract class YfmFilesUploadProcessBase extends FilesBatchUploadProcess {
+    protected readonly createFile: ({ result, file }: UploadSuccessItem) => Node;
+    constructor(view: EditorView, files: readonly File[], uploadHandler: FileUploadHandler);
+    protected createSkeleton(): FileSkeletonDescriptor;
+    protected abstract getSkeletonInitPos(): number;
+    protected createPMNode(res: UploadSuccessItem): Promise<Node>;
+}

package/build/esm/extensions/yfm/YfmFile/YfmFilePaste/upload.js

@@ -0,0 +1,16 @@
+import { FilesBatchUploadProcess } from '../../../behavior/utils/upload';
+import { fileType } from '../YfmFileSpecs';
+import { createFileNode } from '../utils';
+import { FileSkeletonDescriptor } from './skeleton';
+export class YfmFilesUploadProcessBase extends FilesBatchUploadProcess {
+    constructor(view, files, uploadHandler) {
+        super(view, files, uploadHandler);
+        this.createFile = createFileNode(fileType(this.view.state.schema));
+    }
+    createSkeleton() {
+        return new FileSkeletonDescriptor(this.getSkeletonInitPos());
+    }
+    async createPMNode(res) {
+        return this.createFile(res);
+    }
+}

package/build/esm/extensions/yfm/YfmFile/YfmFileSpecs/const.d.ts

@@ -0,0 +1,6 @@
+import type { AttributeSpec } from 'prosemirror-model';
+export declare const yfmFileNodeName = "yfm_file";
+export declare const KNOWN_ATTRS: readonly string[];
+export declare const REQUIRED_ATTRS: string[];
+export declare const fileNodeAttrsSpec: Record<string, AttributeSpec>;
+export declare const LINK_TO_FILE_ATTRS_MAP: Record<string, string>;

package/build/esm/extensions/yfm/YfmFile/YfmFileSpecs/const.js

@@ -0,0 +1,23 @@
+import { KNOWN_ATTRS as FILE_KNOWN_ATTRS, REQUIRED_ATTRS as FILE_REQUIRED_ATTRS, FILE_TOKEN, FILE_TO_LINK_ATTRS_MAP, } from '@diplodoc/transform/lib/plugins/file/const';
+export const yfmFileNodeName = FILE_TOKEN;
+export const KNOWN_ATTRS = FILE_KNOWN_ATTRS.map((attrName) => {
+    if (attrName in FILE_TO_LINK_ATTRS_MAP)
+        return FILE_TO_LINK_ATTRS_MAP[attrName];
+    return attrName;
+});
+export const REQUIRED_ATTRS = FILE_REQUIRED_ATTRS.map((attrName) => {
+    if (attrName in FILE_TO_LINK_ATTRS_MAP)
+        return FILE_TO_LINK_ATTRS_MAP[attrName];
+    return attrName;
+});
+export const fileNodeAttrsSpec = {};
+for (const attrName of KNOWN_ATTRS) {
+    const attrSpec = (fileNodeAttrsSpec[attrName] = {});
+    if (!REQUIRED_ATTRS.includes(attrName)) {
+        attrSpec.default = null;
+    }
+}
+export const LINK_TO_FILE_ATTRS_MAP = {};
+for (const [key, value] of Object.entries(FILE_TO_LINK_ATTRS_MAP)) {
+    LINK_TO_FILE_ATTRS_MAP[value] = key;
+}

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

@@ -0,0 +1,4 @@
+import type { Extension } from '../../../../core';
+export { yfmFileNodeName } from './const';
+export declare const fileType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const YfmFileSpecs: Extension;

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

@@ -0,0 +1,72 @@
+import yfmPlugin from '@diplodoc/transform/lib/plugins/file';
+import { FileClassName, LinkHtmlAttr, PREFIX } from '@diplodoc/transform/lib/plugins/file/const';
+import { nodeTypeFactory } from '../../../../utils/schema';
+import { KNOWN_ATTRS, LINK_TO_FILE_ATTRS_MAP, fileNodeAttrsSpec, yfmFileNodeName } from './const';
+export { yfmFileNodeName } from './const';
+export const fileType = nodeTypeFactory(yfmFileNodeName);
+export const YfmFileSpecs = (builder) => {
+    builder.configureMd((md) => md.use(yfmPlugin));
+    builder.addNode(yfmFileNodeName, () => ({
+        spec: {
+            group: 'inline',
+            inline: true,
+            attrs: fileNodeAttrsSpec,
+            parseDOM: [
+                {
+                    tag: `a[class="${FileClassName.Link}"]`,
+                    getAttrs(p) {
+                        const elem = p;
+                        const attrs = {};
+                        for (const name of KNOWN_ATTRS) {
+                            const value = elem.getAttribute(name);
+                            if (value) {
+                                attrs[name] = value;
+                            }
+                        }
+                        return attrs;
+                    },
+                    priority: 101,
+                },
+            ],
+            toDOM(node) {
+                const a = document.createElement('a');
+                a.contentEditable = 'false';
+                a.classList.add(FileClassName.Link);
+                for (const [key, value] of Object.entries(node.attrs)) {
+                    if (value)
+                        a.setAttribute(key, value);
+                }
+                const span = document.createElement('span');
+                span.classList.add(FileClassName.Icon);
+                a.appendChild(span);
+                a.append(node.attrs[LinkHtmlAttr.Download]);
+                return a;
+            },
+        },
+        fromMd: {
+            tokenName: yfmFileNodeName,
+            tokenSpec: {
+                name: yfmFileNodeName,
+                type: 'node',
+                getAttrs: (tok) => {
+                    var _a;
+                    return Object.fromEntries((_a = tok.attrs) !== null && _a !== void 0 ? _a : []);
+                },
+            },
+        },
+        toMd: (state, node) => {
+            const attrsStr = Object.entries(node.attrs)
+                .reduce((arr, [key, value]) => {
+                if (value) {
+                    if (key in LINK_TO_FILE_ATTRS_MAP) {
+                        key = LINK_TO_FILE_ATTRS_MAP[key];
+                    }
+                    arr.push(`${key}="${value.replace(/"/g, '')}"`);
+                }
+                return arr;
+            }, [])
+                .join(' ');
+            state.write(`${PREFIX}${attrsStr} %}`);
+        },
+    }));
+};

package/build/esm/extensions/yfm/YfmFile/YfmFileWidget/actions.d.ts

@@ -0,0 +1,3 @@
+import { ActionSpec, ExtensionDeps } from '../../../../core';
+import { FileUploadHandler } from '../../../../utils/upload';
+export declare const addFileWidget: (deps: ExtensionDeps, uploadFiles?: FileUploadHandler) => ActionSpec;

package/build/esm/extensions/yfm/YfmFile/YfmFileWidget/actions.js

@@ -0,0 +1,7 @@
+import { addWidget } from './widget';
+export const addFileWidget = (deps, uploadFiles) => ({
+    isEnable: (state) => state.selection.empty,
+    run(state, dispatch) {
+        dispatch(addWidget(state.tr, deps, uploadFiles));
+    },
+});

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

@@ -0,0 +1,15 @@
+import { Action, ExtensionAuto } from '../../../../core';
+import { FileUploadHandler } from '../../../../utils/upload';
+declare const addFileAction = "addFile";
+export declare type YfmFileWidgetOptions = {
+    fileUploadHandler?: FileUploadHandler;
+};
+export declare const YfmFileWidget: ExtensionAuto<YfmFileWidgetOptions>;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [addFileAction]: Action;
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,5 @@
+import { addFileWidget } from './actions';
+const addFileAction = 'addFile';
+export const YfmFileWidget = (builder, opts) => {
+    builder.addAction(addFileAction, (deps) => addFileWidget(deps, opts.fileUploadHandler));
+};

package/build/esm/extensions/yfm/YfmFile/YfmFileWidget/view.css

@@ -0,0 +1,7 @@
+.g-md-file-placeholder {
+  margin: 0 4px;
+  pointer-events: none;
+}
+.g-md-file-placeholder .yfm-file__icon {
+  margin-right: 8px;
+}

package/build/esm/extensions/yfm/YfmFile/YfmFileWidget/view.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FileFormProps } from '../../../../forms/FileForm';
+import './view.css';
+export declare type FilePlaceholderProps = {
+    onCancel: () => void;
+    onSubmit: FileFormProps['onSubmit'];
+    onAttach?: (files: File[]) => Promise<void>;
+};
+export declare const FilePlaceholder: React.FC<FilePlaceholderProps>;

package/build/esm/extensions/yfm/YfmFile/YfmFileWidget/view.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Popup } from '@gravity-ui/uikit';
+import { useMountedState } from 'react-use';
+import { cn } from '../../../../classname';
+import { FileForm } from '../../../../forms/FileForm';
+import { i18n } from '../../../../i18n/widgets';
+import { useBooleanState } from '../../../../react-utils/hooks';
+import './view.css';
+const b = cn('file-placeholder');
+const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
+export const FilePlaceholder = ({ onCancel, onSubmit, onAttach }) => {
+    const isMounted = useMountedState();
+    const [loading, showLoading, hideLoading] = useBooleanState(false);
+    const divRef = React.useRef(null);
+    const attachHandler = React.useCallback((files) => {
+        if (!onAttach)
+            return;
+        if (isMounted()) {
+            showLoading();
+            onAttach(files).finally(() => {
+                if (isMounted()) {
+                    hideLoading();
+                }
+            });
+        }
+    }, [isMounted, onAttach, showLoading, hideLoading]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { ref: divRef, className: b() },
+            React.createElement("a", { href: "#", className: "yfm-file" },
+                React.createElement("span", { className: "yfm-file__icon" }),
+                i18n('file'))),
+        React.createElement(Popup, { open: true, onClose: onCancel, anchorRef: divRef, placement: placement },
+            React.createElement(FileForm, { autoFocus: true, loading: loading, onCancel: onCancel, onSubmit: onSubmit, onAttach: onAttach && attachHandler }))));
+};

package/build/esm/extensions/yfm/YfmFile/YfmFileWidget/widget.d.ts

@@ -0,0 +1,5 @@
+import { Transaction } from 'prosemirror-state';
+import { ExtensionDeps } from '../../../../core';
+import { FileUploadHandler } from '../../../../utils/upload';
+export declare const addWidget: (tr: Transaction, deps: ExtensionDeps, uploadFiles?: FileUploadHandler) => Transaction;
+export declare const removeWidget: (tr: Transaction, id: string) => Transaction;