@gravity-ui/markdown-editor 14.6.0 → 14.7.0

package/build/cjs/bundle/types.d.ts

@@ -21,6 +21,16 @@ export declare type ParseInsertedUrlAsImage = (text: string) => {
     imageUrl: string;
     title?: string;
 } | null;
+export declare type WysiwygPlaceholderOptions = {
+    value?: string | (() => string);
+    /** Default – empty-doc
+    Values:
+    - 'empty-doc' – The placeholder will only be shown when the document is completely empty;
+    - 'empty-row-top-level' – The placeholder will be displayed in an empty line that is at the top level of the document structure;
+    - 'empty-row' – The placeholder will be shown in any empty line within the document, regardless of its nesting level.
+    */
+    behavior?: 'empty-doc' | 'empty-row-top-level' | 'empty-row';
+};
 export declare type MarkdownEditorMdOptions = {
     html?: boolean;
     breaks?: boolean;
@@ -130,6 +140,7 @@ export declare type MarkdownEditorWysiwygConfig = {
     extensions?: Extension;
     extensionOptions?: ExtensionsOptions;
     escapeConfig?: EscapeConfig;
+    placeholderOptions?: WysiwygPlaceholderOptions;
 };
 export declare type MarkdownEditorOptions<T extends object = {}> = {
     /**

package/build/cjs/bundle/useMarkdownEditor.js

@@ -29,7 +29,7 @@ function useMarkdownEditor(props, deps = []) {
                 }, onSubmit: () => {
                     editor.emit('submit', null);
                     return true;
-                }, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages,
+                }, placeholderOptions: wysiwygConfig.placeholderOptions, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages,
                 enableNewImageSizeCalculation }));
             {
                 const extraExtensions = wysiwygConfig.extensions || props.extraExtensions;

package/build/cjs/bundle/wysiwyg-preset.d.ts

@@ -4,12 +4,13 @@ import { EditorModeKeymapOptions } from '../extensions/behavior/EditorModeKeymap
 import { FullPresetOptions } from '../presets/full';
 import type { DirectiveSyntaxContext } from '../utils/directive';
 import type { FileUploadHandler } from '../utils/upload';
-import type { MarkdownEditorPreset } from './types';
+import type { MarkdownEditorPreset, WysiwygPlaceholderOptions } from './types';
 export declare type ExtensionsOptions = BehaviorPresetOptions & FullPresetOptions;
 export declare type BundlePresetOptions = ExtensionsOptions & EditorModeKeymapOptions & {
     preset: MarkdownEditorPreset;
     mdBreaks?: boolean;
     fileUploadHandler?: FileUploadHandler;
+    placeholderOptions?: WysiwygPlaceholderOptions;
     /**
      * If we need to set dimensions for uploaded images
      *

package/build/cjs/bundle/wysiwyg-preset.js

@@ -22,8 +22,18 @@ const BundlePreset = (builder, opts) => {
         width: 2,
     };
     const zeroOptions = Object.assign(Object.assign({}, opts), { cursor: { dropOptions: dropCursor }, clipboard: Object.assign({ pasteFileHandler: opts.fileUploadHandler }, opts.clipboard), selectionContext: Object.assign({ config: wysiwyg_1.wSelectionMenuConfigByPreset.zero }, opts.selectionContext), commandMenu: Object.assign({ actions: wysiwyg_1.wCommandMenuConfigByPreset.zero }, opts.commandMenu), history: Object.assign({ undoKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Undo), redoKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Redo) }, opts.history), baseSchema: Object.assign({ paragraphKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Text), paragraphPlaceholder: (node, parent) => {
-                const isDocEmpty = !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === specs_1.BaseNode.Doc && parent.childCount === 1;
-                return isDocEmpty ? (0, placeholder_1.i18n)('doc_empty') : null;
+                const { value, behavior } = opts.placeholderOptions || {};
+                const emptyEntries = {
+                    'empty-row': !node.text,
+                    'empty-row-top-level': !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === specs_1.BaseNode.Doc,
+                    'empty-doc': !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === specs_1.BaseNode.Doc && parent.childCount === 1,
+                };
+                const showPlaceholder = emptyEntries[behavior || 'empty-doc'];
+                if (!showPlaceholder)
+                    return null;
+                return typeof value === 'function'
+                    ? value()
+                    : value !== null && value !== void 0 ? value : (0, placeholder_1.i18n)('doc_empty');
             } }, opts.baseSchema) });
     const commonMarkOptions = Object.assign(Object.assign({}, zeroOptions), { selectionContext: Object.assign({ config: wysiwyg_1.wSelectionMenuConfigByPreset.commonmark }, opts.selectionContext), commandMenu: Object.assign({ actions: wysiwyg_1.wCommandMenuConfigByPreset.commonmark }, opts.commandMenu), breaks: Object.assign({ preferredBreak: (opts.mdBreaks ? 'soft' : 'hard') }, opts.breaks), bold: Object.assign({ boldKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Bold) }, opts.bold), italic: Object.assign({ italicKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Italic) }, opts.italic), code: Object.assign({ codeKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Code) }, opts.code), codeBlock: Object.assign({ codeBlockKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.CodeBlock) }, opts.codeBlock), blockquote: Object.assign({ qouteKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Quote) }, opts.blockquote), link: Object.assign({ linkKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Link) }, opts.link), lists: Object.assign({ ulKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.BulletList), olKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.OrderedList), ulInputRules: { plus: false } }, opts.lists), image: {
             parseInsertedUrlAsImage: (_a = opts.imgSize) === null || _a === void 0 ? void 0 : _a.parseInsertedUrlAsImage,

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/const.d.ts

@@ -12,3 +12,6 @@ export declare const CheckboxAttr: {
 };
 export declare const idPrefix = "yfm-editor-checkbox";
 export declare const b: import("@bem-react/classname").ClassNameFormatter;
+export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/const.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.b = exports.idPrefix = exports.CheckboxAttr = exports.CheckboxNode = void 0;
+exports.checkboxInputType = exports.checkboxLabelType = exports.checkboxType = exports.b = exports.idPrefix = exports.CheckboxAttr = exports.CheckboxNode = void 0;
 const classname_1 = require("../../../../classname");
+const schema_1 = require("../../../../utils/schema");
 var CheckboxNode;
 (function (CheckboxNode) {
     CheckboxNode["Checkbox"] = "checkbox";
@@ -17,3 +18,6 @@ exports.CheckboxAttr = {
 };
 exports.idPrefix = 'yfm-editor-checkbox';
 exports.b = (0, classname_1.cn)('checkbox');
+exports.checkboxType = (0, schema_1.nodeTypeFactory)(CheckboxNode.Checkbox);
+exports.checkboxLabelType = (0, schema_1.nodeTypeFactory)(CheckboxNode.Label);
+exports.checkboxInputType = (0, schema_1.nodeTypeFactory)(CheckboxNode.Input);

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/index.d.ts

@@ -1,9 +1,6 @@
 import type { NodeSpec } from 'prosemirror-model';
 import type { ExtensionAuto, ExtensionNodeSpec } from '../../../../core';
-export { CheckboxAttr, CheckboxNode } from './const';
-export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
-export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
-export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export { CheckboxAttr, CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType, } from './const';
 export declare type CheckboxSpecsOptions = {
     /**
      * @deprecated: use placeholder option in BehaviorPreset instead.

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/index.js

@@ -3,19 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxSpecs = exports.checkboxInputType = exports.checkboxLabelType = exports.checkboxType = exports.CheckboxNode = exports.CheckboxAttr = void 0;
 const tslib_1 = require("tslib");
 const checkbox_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/plugins/checkbox"));
-const schema_1 = require("../../../../utils/schema");
 const const_1 = require("./const");
 const parser_1 = require("./parser");
-const schema_2 = require("./schema");
+const schema_1 = require("./schema");
 const serializer_1 = require("./serializer");
 var const_2 = require("./const");
 Object.defineProperty(exports, "CheckboxAttr", { enumerable: true, get: function () { return const_2.CheckboxAttr; } });
 Object.defineProperty(exports, "CheckboxNode", { enumerable: true, get: function () { return const_2.CheckboxNode; } });
-exports.checkboxType = (0, schema_1.nodeTypeFactory)(const_1.CheckboxNode.Checkbox);
-exports.checkboxLabelType = (0, schema_1.nodeTypeFactory)(const_1.CheckboxNode.Label);
-exports.checkboxInputType = (0, schema_1.nodeTypeFactory)(const_1.CheckboxNode.Input);
+Object.defineProperty(exports, "checkboxType", { enumerable: true, get: function () { return const_2.checkboxType; } });
+Object.defineProperty(exports, "checkboxLabelType", { enumerable: true, get: function () { return const_2.checkboxLabelType; } });
+Object.defineProperty(exports, "checkboxInputType", { enumerable: true, get: function () { return const_2.checkboxInputType; } });
 const CheckboxSpecs = (builder, opts) => {
-    const schemaSpecs = (0, schema_2.getSchemaSpecs)(opts, builder.context.get('placeholder'));
+    const schemaSpecs = (0, schema_1.getSchemaSpecs)(opts, builder.context.get('placeholder'));
     builder
         .configureMd((md) => md.use(checkbox_1.default, { idPrefix: const_1.idPrefix, divClass: (0, const_1.b)() }))
         .addNode(const_1.CheckboxNode.Checkbox, () => ({

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/schema.d.ts

@@ -1,5 +1,5 @@
-import type { NodeSpec } from 'prosemirror-model';
-import { PlaceholderOptions } from '../../../../utils/placeholder';
+import { type NodeSpec } from 'prosemirror-model';
+import type { PlaceholderOptions } from '../../../../utils/placeholder';
 import { CheckboxNode } from './const';
 import type { CheckboxSpecsOptions } from './index';
 export declare const getSchemaSpecs: (opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>, placeholder?: PlaceholderOptions) => Record<CheckboxNode, NodeSpec>;

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/schema.js

@@ -1,27 +1,57 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSchemaSpecs = void 0;
+const prosemirror_model_1 = require("prosemirror-model");
 const const_1 = require("./const");
 const DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';
 const getSchemaSpecs = (opts, placeholder) => {
     var _a, _b;
     return ({
         [const_1.CheckboxNode.Checkbox]: {
-            group: 'block',
+            group: 'block checkbox',
             content: `${const_1.CheckboxNode.Input} ${const_1.CheckboxNode.Label}`,
             selectable: true,
             allowSelection: false,
-            parseDOM: [],
             attrs: {
                 [const_1.CheckboxAttr.Class]: { default: (0, const_1.b)() },
             },
+            parseDOM: [
+                {
+                    tag: 'div.checkbox',
+                    priority: 100,
+                    getContent(node, schema) {
+                        const input = node.querySelector('input[type=checkbox]');
+                        const label = node.querySelector('label[for]');
+                        const checked = (input === null || input === void 0 ? void 0 : input.checked) ? 'true' : null;
+                        const text = label === null || label === void 0 ? void 0 : label.textContent;
+                        return prosemirror_model_1.Fragment.from([
+                            (0, const_1.checkboxInputType)(schema).create({ [const_1.CheckboxAttr.Checked]: checked }),
+                            (0, const_1.checkboxLabelType)(schema).create(null, text ? schema.text(text) : null),
+                        ]);
+                    },
+                },
+                {
+                    tag: 'input[type=checkbox]',
+                    priority: 50,
+                    getContent(node, schema) {
+                        var _a, _b;
+                        const id = node.id;
+                        const checked = node.checked ? 'true' : null;
+                        const text = (_b = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.querySelector(`label[for=${id}]`)) === null || _b === void 0 ? void 0 : _b.textContent;
+                        return prosemirror_model_1.Fragment.from([
+                            (0, const_1.checkboxInputType)(schema).create({ [const_1.CheckboxAttr.Checked]: checked }),
+                            (0, const_1.checkboxLabelType)(schema).create(null, text ? schema.text(text) : null),
+                        ]);
+                    },
+                },
+            ],
             toDOM(node) {
                 return ['div', node.attrs, 0];
             },
             complex: 'root',
         },
         [const_1.CheckboxNode.Input]: {
-            group: 'block',
+            group: 'block checkbox',
             parseDOM: [],
             attrs: {
                 [const_1.CheckboxAttr.Type]: { default: 'checkbox' },
@@ -37,7 +67,7 @@ const getSchemaSpecs = (opts, placeholder) => {
         },
         [const_1.CheckboxNode.Label]: {
             content: 'inline*',
-            group: 'block',
+            group: 'block checkbox',
             parseDOM: [
                 {
                     tag: `span[class="${(0, const_1.b)('label')}"]`,
@@ -45,6 +75,13 @@ const getSchemaSpecs = (opts, placeholder) => {
                         [const_1.CheckboxAttr.For]: node.getAttribute(const_1.CheckboxAttr.For) || '',
                     }),
                 },
+                {
+                    // input handled by checkbox node parse rule
+                    // ignore label
+                    tag: 'input[type=checkbox] ~ label[for]',
+                    ignore: true,
+                    consuming: true,
+                },
             ],
             attrs: {
                 [const_1.CheckboxAttr.For]: { default: null },

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

@@ -6,6 +6,7 @@ const CheckboxSpecs_1 = require("./CheckboxSpecs");
 const actions_1 = require("./actions");
 const nodeviews_1 = require("./nodeviews");
 const plugin_1 = require("./plugin");
+const fix_paste_1 = require("./plugins/fix-paste");
 const utils_1 = require("./utils");
 const checkboxAction = 'addCheckbox';
 var CheckboxSpecs_2 = require("./CheckboxSpecs");
@@ -18,6 +19,7 @@ const Checkbox = (builder, opts) => {
     builder.use(CheckboxSpecs_1.CheckboxSpecs, Object.assign(Object.assign({}, opts), { inputView: () => nodeviews_1.CheckboxInputView.create }));
     builder
         .addPlugin(plugin_1.keymapPlugin, builder.Priority.High)
+        .addPlugin(fix_paste_1.fixPastePlugin)
         .addAction(checkboxAction, () => (0, actions_1.addCheckbox)())
         .addInputRules(({ schema }) => ({
         rules: [

package/build/cjs/extensions/yfm/Checkbox/plugins/fix-paste.d.ts

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

package/build/cjs/extensions/yfm/Checkbox/plugins/fix-paste.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fixPastePlugin = void 0;
+const prosemirror_model_1 = require("prosemirror-model");
+const prosemirror_state_1 = require("prosemirror-state");
+const CheckboxSpecs_1 = require("../CheckboxSpecs");
+const fixPastePlugin = () => new prosemirror_state_1.Plugin({
+    props: {
+        transformPasted(slice) {
+            const { firstChild } = slice.content;
+            if (firstChild && firstChild.type === (0, CheckboxSpecs_1.checkboxType)(firstChild.type.schema)) {
+                // When paste html with checkboxes and checkbox is first node,
+                // pm creates slice with broken openStart and openEnd.
+                // And content is inserted without a container block for checkboxes.
+                // It is fixed by create new slice with zeroed openStart and openEnd.
+                return new prosemirror_model_1.Slice(slice.content, 0, 0);
+            }
+            return slice;
+        },
+    },
+});
+exports.fixPastePlugin = fixPastePlugin;

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

@@ -1,4 +1,4 @@
-import { Node, NodeType, Schema } from 'prosemirror-model';
+import { Node, type NodeType, type Schema } from 'prosemirror-model';
 export declare const nodeTypeFactory: (nodeName: string) => (schema: Schema) => NodeType;
 export declare const markTypeFactory: (markName: string) => (schema: Schema) => import("prosemirror-model").MarkType;
 export declare function isSameNodeType(a: Node | NodeType, b: Node | NodeType): boolean;

package/build/cjs/version.js

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

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

@@ -21,6 +21,16 @@ export declare type ParseInsertedUrlAsImage = (text: string) => {
     imageUrl: string;
     title?: string;
 } | null;
+export declare type WysiwygPlaceholderOptions = {
+    value?: string | (() => string);
+    /** Default – empty-doc
+    Values:
+    - 'empty-doc' – The placeholder will only be shown when the document is completely empty;
+    - 'empty-row-top-level' – The placeholder will be displayed in an empty line that is at the top level of the document structure;
+    - 'empty-row' – The placeholder will be shown in any empty line within the document, regardless of its nesting level.
+    */
+    behavior?: 'empty-doc' | 'empty-row-top-level' | 'empty-row';
+};
 export declare type MarkdownEditorMdOptions = {
     html?: boolean;
     breaks?: boolean;
@@ -130,6 +140,7 @@ export declare type MarkdownEditorWysiwygConfig = {
     extensions?: Extension;
     extensionOptions?: ExtensionsOptions;
     escapeConfig?: EscapeConfig;
+    placeholderOptions?: WysiwygPlaceholderOptions;
 };
 export declare type MarkdownEditorOptions<T extends object = {}> = {
     /**

package/build/esm/bundle/useMarkdownEditor.js

@@ -26,7 +26,7 @@ export function useMarkdownEditor(props, deps = []) {
                 }, onSubmit: () => {
                     editor.emit('submit', null);
                     return true;
-                }, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages,
+                }, placeholderOptions: wysiwygConfig.placeholderOptions, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages,
                 enableNewImageSizeCalculation }));
             {
                 const extraExtensions = wysiwygConfig.extensions || props.extraExtensions;

package/build/esm/bundle/wysiwyg-preset.d.ts

@@ -4,12 +4,13 @@ import { EditorModeKeymapOptions } from '../extensions/behavior/EditorModeKeymap
 import { FullPresetOptions } from '../presets/full';
 import type { DirectiveSyntaxContext } from '../utils/directive';
 import type { FileUploadHandler } from '../utils/upload';
-import type { MarkdownEditorPreset } from './types';
+import type { MarkdownEditorPreset, WysiwygPlaceholderOptions } from './types';
 export declare type ExtensionsOptions = BehaviorPresetOptions & FullPresetOptions;
 export declare type BundlePresetOptions = ExtensionsOptions & EditorModeKeymapOptions & {
     preset: MarkdownEditorPreset;
     mdBreaks?: boolean;
     fileUploadHandler?: FileUploadHandler;
+    placeholderOptions?: WysiwygPlaceholderOptions;
     /**
      * If we need to set dimensions for uploaded images
      *

package/build/esm/bundle/wysiwyg-preset.js

@@ -19,8 +19,18 @@ export const BundlePreset = (builder, opts) => {
         width: 2,
     };
     const zeroOptions = Object.assign(Object.assign({}, opts), { cursor: { dropOptions: dropCursor }, clipboard: Object.assign({ pasteFileHandler: opts.fileUploadHandler }, opts.clipboard), selectionContext: Object.assign({ config: wSelectionMenuConfigByPreset.zero }, opts.selectionContext), commandMenu: Object.assign({ actions: wCommandMenuConfigByPreset.zero }, opts.commandMenu), history: Object.assign({ undoKey: f.toPM(A.Undo), redoKey: f.toPM(A.Redo) }, opts.history), baseSchema: Object.assign({ paragraphKey: f.toPM(A.Text), paragraphPlaceholder: (node, parent) => {
-                const isDocEmpty = !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === BaseNode.Doc && parent.childCount === 1;
-                return isDocEmpty ? i18nPlaceholder('doc_empty') : null;
+                const { value, behavior } = opts.placeholderOptions || {};
+                const emptyEntries = {
+                    'empty-row': !node.text,
+                    'empty-row-top-level': !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === BaseNode.Doc,
+                    'empty-doc': !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === BaseNode.Doc && parent.childCount === 1,
+                };
+                const showPlaceholder = emptyEntries[behavior || 'empty-doc'];
+                if (!showPlaceholder)
+                    return null;
+                return typeof value === 'function'
+                    ? value()
+                    : value !== null && value !== void 0 ? value : i18nPlaceholder('doc_empty');
             } }, opts.baseSchema) });
     const commonMarkOptions = Object.assign(Object.assign({}, zeroOptions), { selectionContext: Object.assign({ config: wSelectionMenuConfigByPreset.commonmark }, opts.selectionContext), commandMenu: Object.assign({ actions: wCommandMenuConfigByPreset.commonmark }, opts.commandMenu), breaks: Object.assign({ preferredBreak: (opts.mdBreaks ? 'soft' : 'hard') }, opts.breaks), bold: Object.assign({ boldKey: f.toPM(A.Bold) }, opts.bold), italic: Object.assign({ italicKey: f.toPM(A.Italic) }, opts.italic), code: Object.assign({ codeKey: f.toPM(A.Code) }, opts.code), codeBlock: Object.assign({ codeBlockKey: f.toPM(A.CodeBlock) }, opts.codeBlock), blockquote: Object.assign({ qouteKey: f.toPM(A.Quote) }, opts.blockquote), link: Object.assign({ linkKey: f.toPM(A.Link) }, opts.link), lists: Object.assign({ ulKey: f.toPM(A.BulletList), olKey: f.toPM(A.OrderedList), ulInputRules: { plus: false } }, opts.lists), image: {
             parseInsertedUrlAsImage: (_a = opts.imgSize) === null || _a === void 0 ? void 0 : _a.parseInsertedUrlAsImage,

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/const.d.ts

@@ -12,3 +12,6 @@ export declare const CheckboxAttr: {
 };
 export declare const idPrefix = "yfm-editor-checkbox";
 export declare const b: import("@bem-react/classname").ClassNameFormatter;
+export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/const.js

@@ -1,4 +1,5 @@
 import { cn } from '../../../../classname';
+import { nodeTypeFactory } from '../../../../utils/schema';
 export var CheckboxNode;
 (function (CheckboxNode) {
     CheckboxNode["Checkbox"] = "checkbox";
@@ -14,3 +15,6 @@ export const CheckboxAttr = {
 };
 export const idPrefix = 'yfm-editor-checkbox';
 export const b = cn('checkbox');
+export const checkboxType = nodeTypeFactory(CheckboxNode.Checkbox);
+export const checkboxLabelType = nodeTypeFactory(CheckboxNode.Label);
+export const checkboxInputType = nodeTypeFactory(CheckboxNode.Input);

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

@@ -1,9 +1,6 @@
 import type { NodeSpec } from 'prosemirror-model';
 import type { ExtensionAuto, ExtensionNodeSpec } from '../../../../core';
-export { CheckboxAttr, CheckboxNode } from './const';
-export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
-export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
-export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export { CheckboxAttr, CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType, } from './const';
 export declare type CheckboxSpecsOptions = {
     /**
      * @deprecated: use placeholder option in BehaviorPreset instead.

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

@@ -1,13 +1,9 @@
 import checkboxPlugin from '@diplodoc/transform/lib/plugins/checkbox';
-import { nodeTypeFactory } from '../../../../utils/schema';
 import { CheckboxNode, b, idPrefix } from './const';
 import { parserTokens } from './parser';
 import { getSchemaSpecs } from './schema';
 import { serializerTokens } from './serializer';
-export { CheckboxAttr, CheckboxNode } from './const';
-export const checkboxType = nodeTypeFactory(CheckboxNode.Checkbox);
-export const checkboxLabelType = nodeTypeFactory(CheckboxNode.Label);
-export const checkboxInputType = nodeTypeFactory(CheckboxNode.Input);
+export { CheckboxAttr, CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType, } from './const';
 export const CheckboxSpecs = (builder, opts) => {
     const schemaSpecs = getSchemaSpecs(opts, builder.context.get('placeholder'));
     builder

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/schema.d.ts

@@ -1,5 +1,5 @@
-import type { NodeSpec } from 'prosemirror-model';
-import { PlaceholderOptions } from '../../../../utils/placeholder';
+import { type NodeSpec } from 'prosemirror-model';
+import type { PlaceholderOptions } from '../../../../utils/placeholder';
 import { CheckboxNode } from './const';
 import type { CheckboxSpecsOptions } from './index';
 export declare const getSchemaSpecs: (opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>, placeholder?: PlaceholderOptions) => Record<CheckboxNode, NodeSpec>;

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/schema.js

@@ -1,24 +1,54 @@
-import { CheckboxAttr, CheckboxNode, b } from './const';
+import { Fragment } from 'prosemirror-model';
+import { CheckboxAttr, CheckboxNode, b, checkboxInputType, checkboxLabelType } from './const';
 const DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';
 export const getSchemaSpecs = (opts, placeholder) => {
     var _a, _b;
     return ({
         [CheckboxNode.Checkbox]: {
-            group: 'block',
+            group: 'block checkbox',
             content: `${CheckboxNode.Input} ${CheckboxNode.Label}`,
             selectable: true,
             allowSelection: false,
-            parseDOM: [],
             attrs: {
                 [CheckboxAttr.Class]: { default: b() },
             },
+            parseDOM: [
+                {
+                    tag: 'div.checkbox',
+                    priority: 100,
+                    getContent(node, schema) {
+                        const input = node.querySelector('input[type=checkbox]');
+                        const label = node.querySelector('label[for]');
+                        const checked = (input === null || input === void 0 ? void 0 : input.checked) ? 'true' : null;
+                        const text = label === null || label === void 0 ? void 0 : label.textContent;
+                        return Fragment.from([
+                            checkboxInputType(schema).create({ [CheckboxAttr.Checked]: checked }),
+                            checkboxLabelType(schema).create(null, text ? schema.text(text) : null),
+                        ]);
+                    },
+                },
+                {
+                    tag: 'input[type=checkbox]',
+                    priority: 50,
+                    getContent(node, schema) {
+                        var _a, _b;
+                        const id = node.id;
+                        const checked = node.checked ? 'true' : null;
+                        const text = (_b = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.querySelector(`label[for=${id}]`)) === null || _b === void 0 ? void 0 : _b.textContent;
+                        return Fragment.from([
+                            checkboxInputType(schema).create({ [CheckboxAttr.Checked]: checked }),
+                            checkboxLabelType(schema).create(null, text ? schema.text(text) : null),
+                        ]);
+                    },
+                },
+            ],
             toDOM(node) {
                 return ['div', node.attrs, 0];
             },
             complex: 'root',
         },
         [CheckboxNode.Input]: {
-            group: 'block',
+            group: 'block checkbox',
             parseDOM: [],
             attrs: {
                 [CheckboxAttr.Type]: { default: 'checkbox' },
@@ -34,7 +64,7 @@ export const getSchemaSpecs = (opts, placeholder) => {
         },
         [CheckboxNode.Label]: {
             content: 'inline*',
-            group: 'block',
+            group: 'block checkbox',
             parseDOM: [
                 {
                     tag: `span[class="${b('label')}"]`,
@@ -42,6 +72,13 @@ export const getSchemaSpecs = (opts, placeholder) => {
                         [CheckboxAttr.For]: node.getAttribute(CheckboxAttr.For) || '',
                     }),
                 },
+                {
+                    // input handled by checkbox node parse rule
+                    // ignore label
+                    tag: 'input[type=checkbox] ~ label[for]',
+                    ignore: true,
+                    consuming: true,
+                },
             ],
             attrs: {
                 [CheckboxAttr.For]: { default: null },

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

@@ -3,6 +3,7 @@ import { CheckboxSpecs } from './CheckboxSpecs';
 import { addCheckbox } from './actions';
 import { CheckboxInputView } from './nodeviews';
 import { keymapPlugin } from './plugin';
+import { fixPastePlugin } from './plugins/fix-paste';
 import { checkboxInputType, checkboxType } from './utils';
 import './index.css';
 const checkboxAction = 'addCheckbox';
@@ -11,6 +12,7 @@ export const Checkbox = (builder, opts) => {
     builder.use(CheckboxSpecs, Object.assign(Object.assign({}, opts), { inputView: () => CheckboxInputView.create }));
     builder
         .addPlugin(keymapPlugin, builder.Priority.High)
+        .addPlugin(fixPastePlugin)
         .addAction(checkboxAction, () => addCheckbox())
         .addInputRules(({ schema }) => ({
         rules: [

package/build/esm/extensions/yfm/Checkbox/plugins/fix-paste.d.ts

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

package/build/esm/extensions/yfm/Checkbox/plugins/fix-paste.js

@@ -0,0 +1,18 @@
+import { Slice } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+import { checkboxType } from '../CheckboxSpecs';
+export const fixPastePlugin = () => new Plugin({
+    props: {
+        transformPasted(slice) {
+            const { firstChild } = slice.content;
+            if (firstChild && firstChild.type === checkboxType(firstChild.type.schema)) {
+                // When paste html with checkboxes and checkbox is first node,
+                // pm creates slice with broken openStart and openEnd.
+                // And content is inserted without a container block for checkboxes.
+                // It is fixed by create new slice with zeroed openStart and openEnd.
+                return new Slice(slice.content, 0, 0);
+            }
+            return slice;
+        },
+    },
+});

package/build/esm/utils/schema.d.ts

@@ -1,4 +1,4 @@
-import { Node, NodeType, Schema } from 'prosemirror-model';
+import { Node, type NodeType, type Schema } from 'prosemirror-model';
 export declare const nodeTypeFactory: (nodeName: string) => (schema: Schema) => NodeType;
 export declare const markTypeFactory: (markName: string) => (schema: Schema) => import("prosemirror-model").MarkType;
 export declare function isSameNodeType(a: Node | NodeType, b: Node | NodeType): boolean;

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '14.6.0' !== 'undefined' ? '14.6.0' : 'unknown';
+export const VERSION = typeof '14.7.0' !== 'undefined' ? '14.7.0' : 'unknown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "14.6.0",
+  "version": "14.7.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -300,8 +300,8 @@
     "lodash": "^4.17.20",
     "lowlight": "^3.0.0",
     "markdown-it": "^13.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "lint-staged": {
     "*.{css,scss}": [