@gravity-ui/markdown-editor 14.6.0 → 14.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/bundle/types.d.ts +11 -0
- package/build/cjs/bundle/useMarkdownEditor.js +1 -1
- package/build/cjs/bundle/wysiwyg-preset.d.ts +2 -1
- package/build/cjs/bundle/wysiwyg-preset.js +12 -2
- package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/const.d.ts +3 -0
- package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/const.js +5 -1
- package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/index.d.ts +1 -4
- package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/index.js +5 -6
- package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/schema.d.ts +2 -2
- package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/schema.js +41 -4
- package/build/cjs/extensions/yfm/Checkbox/index.js +2 -0
- package/build/cjs/extensions/yfm/Checkbox/plugins/fix-paste.d.ts +2 -0
- package/build/cjs/extensions/yfm/Checkbox/plugins/fix-paste.js +22 -0
- package/build/cjs/utils/schema.d.ts +1 -1
- package/build/cjs/version.js +1 -1
- package/build/esm/bundle/types.d.ts +11 -0
- package/build/esm/bundle/useMarkdownEditor.js +1 -1
- package/build/esm/bundle/wysiwyg-preset.d.ts +2 -1
- package/build/esm/bundle/wysiwyg-preset.js +12 -2
- package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/const.d.ts +3 -0
- package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/const.js +4 -0
- package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/index.d.ts +1 -4
- package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/index.js +1 -5
- package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/schema.d.ts +2 -2
- package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/schema.js +42 -5
- package/build/esm/extensions/yfm/Checkbox/index.js +2 -0
- package/build/esm/extensions/yfm/Checkbox/plugins/fix-paste.d.ts +2 -0
- package/build/esm/extensions/yfm/Checkbox/plugins/fix-paste.js +18 -0
- package/build/esm/utils/schema.d.ts +1 -1
- package/build/esm/version.js +1 -1
- package/package.json +12 -4
|
@@ -21,6 +21,16 @@ export declare type ParseInsertedUrlAsImage = (text: string) => {
|
|
|
21
21
|
imageUrl: string;
|
|
22
22
|
title?: string;
|
|
23
23
|
} | null;
|
|
24
|
+
export declare type WysiwygPlaceholderOptions = {
|
|
25
|
+
value?: string | (() => string);
|
|
26
|
+
/** Default – empty-doc
|
|
27
|
+
Values:
|
|
28
|
+
- 'empty-doc' – The placeholder will only be shown when the document is completely empty;
|
|
29
|
+
- 'empty-row-top-level' – The placeholder will be displayed in an empty line that is at the top level of the document structure;
|
|
30
|
+
- 'empty-row' – The placeholder will be shown in any empty line within the document, regardless of its nesting level.
|
|
31
|
+
*/
|
|
32
|
+
behavior?: 'empty-doc' | 'empty-row-top-level' | 'empty-row';
|
|
33
|
+
};
|
|
24
34
|
export declare type MarkdownEditorMdOptions = {
|
|
25
35
|
html?: boolean;
|
|
26
36
|
breaks?: boolean;
|
|
@@ -130,6 +140,7 @@ export declare type MarkdownEditorWysiwygConfig = {
|
|
|
130
140
|
extensions?: Extension;
|
|
131
141
|
extensionOptions?: ExtensionsOptions;
|
|
132
142
|
escapeConfig?: EscapeConfig;
|
|
143
|
+
placeholderOptions?: WysiwygPlaceholderOptions;
|
|
133
144
|
};
|
|
134
145
|
export declare type MarkdownEditorOptions<T extends object = {}> = {
|
|
135
146
|
/**
|
|
@@ -29,7 +29,7 @@ function useMarkdownEditor(props, deps = []) {
|
|
|
29
29
|
}, onSubmit: () => {
|
|
30
30
|
editor.emit('submit', null);
|
|
31
31
|
return true;
|
|
32
|
-
}, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages,
|
|
32
|
+
}, placeholderOptions: wysiwygConfig.placeholderOptions, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages,
|
|
33
33
|
enableNewImageSizeCalculation }));
|
|
34
34
|
{
|
|
35
35
|
const extraExtensions = wysiwygConfig.extensions || props.extraExtensions;
|
|
@@ -4,12 +4,13 @@ import { EditorModeKeymapOptions } from '../extensions/behavior/EditorModeKeymap
|
|
|
4
4
|
import { FullPresetOptions } from '../presets/full';
|
|
5
5
|
import type { DirectiveSyntaxContext } from '../utils/directive';
|
|
6
6
|
import type { FileUploadHandler } from '../utils/upload';
|
|
7
|
-
import type { MarkdownEditorPreset } from './types';
|
|
7
|
+
import type { MarkdownEditorPreset, WysiwygPlaceholderOptions } from './types';
|
|
8
8
|
export declare type ExtensionsOptions = BehaviorPresetOptions & FullPresetOptions;
|
|
9
9
|
export declare type BundlePresetOptions = ExtensionsOptions & EditorModeKeymapOptions & {
|
|
10
10
|
preset: MarkdownEditorPreset;
|
|
11
11
|
mdBreaks?: boolean;
|
|
12
12
|
fileUploadHandler?: FileUploadHandler;
|
|
13
|
+
placeholderOptions?: WysiwygPlaceholderOptions;
|
|
13
14
|
/**
|
|
14
15
|
* If we need to set dimensions for uploaded images
|
|
15
16
|
*
|
|
@@ -22,8 +22,18 @@ const BundlePreset = (builder, opts) => {
|
|
|
22
22
|
width: 2,
|
|
23
23
|
};
|
|
24
24
|
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) => {
|
|
25
|
-
const
|
|
26
|
-
|
|
25
|
+
const { value, behavior } = opts.placeholderOptions || {};
|
|
26
|
+
const emptyEntries = {
|
|
27
|
+
'empty-row': !node.text,
|
|
28
|
+
'empty-row-top-level': !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === specs_1.BaseNode.Doc,
|
|
29
|
+
'empty-doc': !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === specs_1.BaseNode.Doc && parent.childCount === 1,
|
|
30
|
+
};
|
|
31
|
+
const showPlaceholder = emptyEntries[behavior || 'empty-doc'];
|
|
32
|
+
if (!showPlaceholder)
|
|
33
|
+
return null;
|
|
34
|
+
return typeof value === 'function'
|
|
35
|
+
? value()
|
|
36
|
+
: value !== null && value !== void 0 ? value : (0, placeholder_1.i18n)('doc_empty');
|
|
27
37
|
} }, opts.baseSchema) });
|
|
28
38
|
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: {
|
|
29
39
|
parseInsertedUrlAsImage: (_a = opts.imgSize) === null || _a === void 0 ? void 0 : _a.parseInsertedUrlAsImage,
|
|
@@ -12,3 +12,6 @@ export declare const CheckboxAttr: {
|
|
|
12
12
|
};
|
|
13
13
|
export declare const idPrefix = "yfm-editor-checkbox";
|
|
14
14
|
export declare const b: import("@bem-react/classname").ClassNameFormatter;
|
|
15
|
+
export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
16
|
+
export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
17
|
+
export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.b = exports.idPrefix = exports.CheckboxAttr = exports.CheckboxNode = void 0;
|
|
3
|
+
exports.checkboxInputType = exports.checkboxLabelType = exports.checkboxType = exports.b = exports.idPrefix = exports.CheckboxAttr = exports.CheckboxNode = void 0;
|
|
4
4
|
const classname_1 = require("../../../../classname");
|
|
5
|
+
const schema_1 = require("../../../../utils/schema");
|
|
5
6
|
var CheckboxNode;
|
|
6
7
|
(function (CheckboxNode) {
|
|
7
8
|
CheckboxNode["Checkbox"] = "checkbox";
|
|
@@ -17,3 +18,6 @@ exports.CheckboxAttr = {
|
|
|
17
18
|
};
|
|
18
19
|
exports.idPrefix = 'yfm-editor-checkbox';
|
|
19
20
|
exports.b = (0, classname_1.cn)('checkbox');
|
|
21
|
+
exports.checkboxType = (0, schema_1.nodeTypeFactory)(CheckboxNode.Checkbox);
|
|
22
|
+
exports.checkboxLabelType = (0, schema_1.nodeTypeFactory)(CheckboxNode.Label);
|
|
23
|
+
exports.checkboxInputType = (0, schema_1.nodeTypeFactory)(CheckboxNode.Input);
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import type { NodeSpec } from 'prosemirror-model';
|
|
2
2
|
import type { ExtensionAuto, ExtensionNodeSpec } from '../../../../core';
|
|
3
|
-
export { CheckboxAttr, CheckboxNode } from './const';
|
|
4
|
-
export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
5
|
-
export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
6
|
-
export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
3
|
+
export { CheckboxAttr, CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType, } from './const';
|
|
7
4
|
export declare type CheckboxSpecsOptions = {
|
|
8
5
|
/**
|
|
9
6
|
* @deprecated: use placeholder option in BehaviorPreset instead.
|
|
@@ -3,19 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.CheckboxSpecs = exports.checkboxInputType = exports.checkboxLabelType = exports.checkboxType = exports.CheckboxNode = exports.CheckboxAttr = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const checkbox_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/plugins/checkbox"));
|
|
6
|
-
const schema_1 = require("../../../../utils/schema");
|
|
7
6
|
const const_1 = require("./const");
|
|
8
7
|
const parser_1 = require("./parser");
|
|
9
|
-
const
|
|
8
|
+
const schema_1 = require("./schema");
|
|
10
9
|
const serializer_1 = require("./serializer");
|
|
11
10
|
var const_2 = require("./const");
|
|
12
11
|
Object.defineProperty(exports, "CheckboxAttr", { enumerable: true, get: function () { return const_2.CheckboxAttr; } });
|
|
13
12
|
Object.defineProperty(exports, "CheckboxNode", { enumerable: true, get: function () { return const_2.CheckboxNode; } });
|
|
14
|
-
exports
|
|
15
|
-
exports
|
|
16
|
-
exports
|
|
13
|
+
Object.defineProperty(exports, "checkboxType", { enumerable: true, get: function () { return const_2.checkboxType; } });
|
|
14
|
+
Object.defineProperty(exports, "checkboxLabelType", { enumerable: true, get: function () { return const_2.checkboxLabelType; } });
|
|
15
|
+
Object.defineProperty(exports, "checkboxInputType", { enumerable: true, get: function () { return const_2.checkboxInputType; } });
|
|
17
16
|
const CheckboxSpecs = (builder, opts) => {
|
|
18
|
-
const schemaSpecs = (0,
|
|
17
|
+
const schemaSpecs = (0, schema_1.getSchemaSpecs)(opts, builder.context.get('placeholder'));
|
|
19
18
|
builder
|
|
20
19
|
.configureMd((md) => md.use(checkbox_1.default, { idPrefix: const_1.idPrefix, divClass: (0, const_1.b)() }))
|
|
21
20
|
.addNode(const_1.CheckboxNode.Checkbox, () => ({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import { PlaceholderOptions } from '../../../../utils/placeholder';
|
|
1
|
+
import { type NodeSpec } from 'prosemirror-model';
|
|
2
|
+
import type { PlaceholderOptions } from '../../../../utils/placeholder';
|
|
3
3
|
import { CheckboxNode } from './const';
|
|
4
4
|
import type { CheckboxSpecsOptions } from './index';
|
|
5
5
|
export declare const getSchemaSpecs: (opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>, placeholder?: PlaceholderOptions) => Record<CheckboxNode, NodeSpec>;
|
|
@@ -1,27 +1,57 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getSchemaSpecs = void 0;
|
|
4
|
+
const prosemirror_model_1 = require("prosemirror-model");
|
|
4
5
|
const const_1 = require("./const");
|
|
5
6
|
const DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';
|
|
6
7
|
const getSchemaSpecs = (opts, placeholder) => {
|
|
7
8
|
var _a, _b;
|
|
8
9
|
return ({
|
|
9
10
|
[const_1.CheckboxNode.Checkbox]: {
|
|
10
|
-
group: 'block',
|
|
11
|
+
group: 'block checkbox',
|
|
11
12
|
content: `${const_1.CheckboxNode.Input} ${const_1.CheckboxNode.Label}`,
|
|
12
13
|
selectable: true,
|
|
13
14
|
allowSelection: false,
|
|
14
|
-
parseDOM: [],
|
|
15
15
|
attrs: {
|
|
16
16
|
[const_1.CheckboxAttr.Class]: { default: (0, const_1.b)() },
|
|
17
17
|
},
|
|
18
|
+
parseDOM: [
|
|
19
|
+
{
|
|
20
|
+
tag: 'div.checkbox',
|
|
21
|
+
priority: 100,
|
|
22
|
+
getContent(node, schema) {
|
|
23
|
+
const input = node.querySelector('input[type=checkbox]');
|
|
24
|
+
const label = node.querySelector('label[for]');
|
|
25
|
+
const checked = (input === null || input === void 0 ? void 0 : input.checked) ? 'true' : null;
|
|
26
|
+
const text = label === null || label === void 0 ? void 0 : label.textContent;
|
|
27
|
+
return prosemirror_model_1.Fragment.from([
|
|
28
|
+
(0, const_1.checkboxInputType)(schema).create({ [const_1.CheckboxAttr.Checked]: checked }),
|
|
29
|
+
(0, const_1.checkboxLabelType)(schema).create(null, text ? schema.text(text) : null),
|
|
30
|
+
]);
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
tag: 'input[type=checkbox]',
|
|
35
|
+
priority: 50,
|
|
36
|
+
getContent(node, schema) {
|
|
37
|
+
var _a, _b;
|
|
38
|
+
const id = node.id;
|
|
39
|
+
const checked = node.checked ? 'true' : null;
|
|
40
|
+
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;
|
|
41
|
+
return prosemirror_model_1.Fragment.from([
|
|
42
|
+
(0, const_1.checkboxInputType)(schema).create({ [const_1.CheckboxAttr.Checked]: checked }),
|
|
43
|
+
(0, const_1.checkboxLabelType)(schema).create(null, text ? schema.text(text) : null),
|
|
44
|
+
]);
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
],
|
|
18
48
|
toDOM(node) {
|
|
19
49
|
return ['div', node.attrs, 0];
|
|
20
50
|
},
|
|
21
51
|
complex: 'root',
|
|
22
52
|
},
|
|
23
53
|
[const_1.CheckboxNode.Input]: {
|
|
24
|
-
group: 'block',
|
|
54
|
+
group: 'block checkbox',
|
|
25
55
|
parseDOM: [],
|
|
26
56
|
attrs: {
|
|
27
57
|
[const_1.CheckboxAttr.Type]: { default: 'checkbox' },
|
|
@@ -37,7 +67,7 @@ const getSchemaSpecs = (opts, placeholder) => {
|
|
|
37
67
|
},
|
|
38
68
|
[const_1.CheckboxNode.Label]: {
|
|
39
69
|
content: 'inline*',
|
|
40
|
-
group: 'block',
|
|
70
|
+
group: 'block checkbox',
|
|
41
71
|
parseDOM: [
|
|
42
72
|
{
|
|
43
73
|
tag: `span[class="${(0, const_1.b)('label')}"]`,
|
|
@@ -45,6 +75,13 @@ const getSchemaSpecs = (opts, placeholder) => {
|
|
|
45
75
|
[const_1.CheckboxAttr.For]: node.getAttribute(const_1.CheckboxAttr.For) || '',
|
|
46
76
|
}),
|
|
47
77
|
},
|
|
78
|
+
{
|
|
79
|
+
// input handled by checkbox node parse rule
|
|
80
|
+
// ignore label
|
|
81
|
+
tag: 'input[type=checkbox] ~ label[for]',
|
|
82
|
+
ignore: true,
|
|
83
|
+
consuming: true,
|
|
84
|
+
},
|
|
48
85
|
],
|
|
49
86
|
attrs: {
|
|
50
87
|
[const_1.CheckboxAttr.For]: { default: null },
|
|
@@ -6,6 +6,7 @@ const CheckboxSpecs_1 = require("./CheckboxSpecs");
|
|
|
6
6
|
const actions_1 = require("./actions");
|
|
7
7
|
const nodeviews_1 = require("./nodeviews");
|
|
8
8
|
const plugin_1 = require("./plugin");
|
|
9
|
+
const fix_paste_1 = require("./plugins/fix-paste");
|
|
9
10
|
const utils_1 = require("./utils");
|
|
10
11
|
const checkboxAction = 'addCheckbox';
|
|
11
12
|
var CheckboxSpecs_2 = require("./CheckboxSpecs");
|
|
@@ -18,6 +19,7 @@ const Checkbox = (builder, opts) => {
|
|
|
18
19
|
builder.use(CheckboxSpecs_1.CheckboxSpecs, Object.assign(Object.assign({}, opts), { inputView: () => nodeviews_1.CheckboxInputView.create }));
|
|
19
20
|
builder
|
|
20
21
|
.addPlugin(plugin_1.keymapPlugin, builder.Priority.High)
|
|
22
|
+
.addPlugin(fix_paste_1.fixPastePlugin)
|
|
21
23
|
.addAction(checkboxAction, () => (0, actions_1.addCheckbox)())
|
|
22
24
|
.addInputRules(({ schema }) => ({
|
|
23
25
|
rules: [
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.fixPastePlugin = void 0;
|
|
4
|
+
const prosemirror_model_1 = require("prosemirror-model");
|
|
5
|
+
const prosemirror_state_1 = require("prosemirror-state");
|
|
6
|
+
const CheckboxSpecs_1 = require("../CheckboxSpecs");
|
|
7
|
+
const fixPastePlugin = () => new prosemirror_state_1.Plugin({
|
|
8
|
+
props: {
|
|
9
|
+
transformPasted(slice) {
|
|
10
|
+
const { firstChild } = slice.content;
|
|
11
|
+
if (firstChild && firstChild.type === (0, CheckboxSpecs_1.checkboxType)(firstChild.type.schema)) {
|
|
12
|
+
// When paste html with checkboxes and checkbox is first node,
|
|
13
|
+
// pm creates slice with broken openStart and openEnd.
|
|
14
|
+
// And content is inserted without a container block for checkboxes.
|
|
15
|
+
// It is fixed by create new slice with zeroed openStart and openEnd.
|
|
16
|
+
return new prosemirror_model_1.Slice(slice.content, 0, 0);
|
|
17
|
+
}
|
|
18
|
+
return slice;
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
exports.fixPastePlugin = fixPastePlugin;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Node, NodeType, Schema } from 'prosemirror-model';
|
|
1
|
+
import { Node, type NodeType, type Schema } from 'prosemirror-model';
|
|
2
2
|
export declare const nodeTypeFactory: (nodeName: string) => (schema: Schema) => NodeType;
|
|
3
3
|
export declare const markTypeFactory: (markName: string) => (schema: Schema) => import("prosemirror-model").MarkType;
|
|
4
4
|
export declare function isSameNodeType(a: Node | NodeType, b: Node | NodeType): boolean;
|
package/build/cjs/version.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.VERSION = void 0;
|
|
4
4
|
/** During build process, the current version will be injected here */
|
|
5
|
-
exports.VERSION = typeof '14.
|
|
5
|
+
exports.VERSION = typeof '14.8.0' !== 'undefined' ? '14.8.0' : 'unknown';
|
|
@@ -21,6 +21,16 @@ export declare type ParseInsertedUrlAsImage = (text: string) => {
|
|
|
21
21
|
imageUrl: string;
|
|
22
22
|
title?: string;
|
|
23
23
|
} | null;
|
|
24
|
+
export declare type WysiwygPlaceholderOptions = {
|
|
25
|
+
value?: string | (() => string);
|
|
26
|
+
/** Default – empty-doc
|
|
27
|
+
Values:
|
|
28
|
+
- 'empty-doc' – The placeholder will only be shown when the document is completely empty;
|
|
29
|
+
- 'empty-row-top-level' – The placeholder will be displayed in an empty line that is at the top level of the document structure;
|
|
30
|
+
- 'empty-row' – The placeholder will be shown in any empty line within the document, regardless of its nesting level.
|
|
31
|
+
*/
|
|
32
|
+
behavior?: 'empty-doc' | 'empty-row-top-level' | 'empty-row';
|
|
33
|
+
};
|
|
24
34
|
export declare type MarkdownEditorMdOptions = {
|
|
25
35
|
html?: boolean;
|
|
26
36
|
breaks?: boolean;
|
|
@@ -130,6 +140,7 @@ export declare type MarkdownEditorWysiwygConfig = {
|
|
|
130
140
|
extensions?: Extension;
|
|
131
141
|
extensionOptions?: ExtensionsOptions;
|
|
132
142
|
escapeConfig?: EscapeConfig;
|
|
143
|
+
placeholderOptions?: WysiwygPlaceholderOptions;
|
|
133
144
|
};
|
|
134
145
|
export declare type MarkdownEditorOptions<T extends object = {}> = {
|
|
135
146
|
/**
|
|
@@ -26,7 +26,7 @@ export function useMarkdownEditor(props, deps = []) {
|
|
|
26
26
|
}, onSubmit: () => {
|
|
27
27
|
editor.emit('submit', null);
|
|
28
28
|
return true;
|
|
29
|
-
}, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages,
|
|
29
|
+
}, placeholderOptions: wysiwygConfig.placeholderOptions, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages,
|
|
30
30
|
enableNewImageSizeCalculation }));
|
|
31
31
|
{
|
|
32
32
|
const extraExtensions = wysiwygConfig.extensions || props.extraExtensions;
|
|
@@ -4,12 +4,13 @@ import { EditorModeKeymapOptions } from '../extensions/behavior/EditorModeKeymap
|
|
|
4
4
|
import { FullPresetOptions } from '../presets/full';
|
|
5
5
|
import type { DirectiveSyntaxContext } from '../utils/directive';
|
|
6
6
|
import type { FileUploadHandler } from '../utils/upload';
|
|
7
|
-
import type { MarkdownEditorPreset } from './types';
|
|
7
|
+
import type { MarkdownEditorPreset, WysiwygPlaceholderOptions } from './types';
|
|
8
8
|
export declare type ExtensionsOptions = BehaviorPresetOptions & FullPresetOptions;
|
|
9
9
|
export declare type BundlePresetOptions = ExtensionsOptions & EditorModeKeymapOptions & {
|
|
10
10
|
preset: MarkdownEditorPreset;
|
|
11
11
|
mdBreaks?: boolean;
|
|
12
12
|
fileUploadHandler?: FileUploadHandler;
|
|
13
|
+
placeholderOptions?: WysiwygPlaceholderOptions;
|
|
13
14
|
/**
|
|
14
15
|
* If we need to set dimensions for uploaded images
|
|
15
16
|
*
|
|
@@ -19,8 +19,18 @@ export const BundlePreset = (builder, opts) => {
|
|
|
19
19
|
width: 2,
|
|
20
20
|
};
|
|
21
21
|
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) => {
|
|
22
|
-
const
|
|
23
|
-
|
|
22
|
+
const { value, behavior } = opts.placeholderOptions || {};
|
|
23
|
+
const emptyEntries = {
|
|
24
|
+
'empty-row': !node.text,
|
|
25
|
+
'empty-row-top-level': !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === BaseNode.Doc,
|
|
26
|
+
'empty-doc': !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === BaseNode.Doc && parent.childCount === 1,
|
|
27
|
+
};
|
|
28
|
+
const showPlaceholder = emptyEntries[behavior || 'empty-doc'];
|
|
29
|
+
if (!showPlaceholder)
|
|
30
|
+
return null;
|
|
31
|
+
return typeof value === 'function'
|
|
32
|
+
? value()
|
|
33
|
+
: value !== null && value !== void 0 ? value : i18nPlaceholder('doc_empty');
|
|
24
34
|
} }, opts.baseSchema) });
|
|
25
35
|
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: {
|
|
26
36
|
parseInsertedUrlAsImage: (_a = opts.imgSize) === null || _a === void 0 ? void 0 : _a.parseInsertedUrlAsImage,
|
|
@@ -12,3 +12,6 @@ export declare const CheckboxAttr: {
|
|
|
12
12
|
};
|
|
13
13
|
export declare const idPrefix = "yfm-editor-checkbox";
|
|
14
14
|
export declare const b: import("@bem-react/classname").ClassNameFormatter;
|
|
15
|
+
export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
16
|
+
export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
17
|
+
export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { cn } from '../../../../classname';
|
|
2
|
+
import { nodeTypeFactory } from '../../../../utils/schema';
|
|
2
3
|
export var CheckboxNode;
|
|
3
4
|
(function (CheckboxNode) {
|
|
4
5
|
CheckboxNode["Checkbox"] = "checkbox";
|
|
@@ -14,3 +15,6 @@ export const CheckboxAttr = {
|
|
|
14
15
|
};
|
|
15
16
|
export const idPrefix = 'yfm-editor-checkbox';
|
|
16
17
|
export const b = cn('checkbox');
|
|
18
|
+
export const checkboxType = nodeTypeFactory(CheckboxNode.Checkbox);
|
|
19
|
+
export const checkboxLabelType = nodeTypeFactory(CheckboxNode.Label);
|
|
20
|
+
export const checkboxInputType = nodeTypeFactory(CheckboxNode.Input);
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import type { NodeSpec } from 'prosemirror-model';
|
|
2
2
|
import type { ExtensionAuto, ExtensionNodeSpec } from '../../../../core';
|
|
3
|
-
export { CheckboxAttr, CheckboxNode } from './const';
|
|
4
|
-
export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
5
|
-
export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
6
|
-
export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
|
|
3
|
+
export { CheckboxAttr, CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType, } from './const';
|
|
7
4
|
export declare type CheckboxSpecsOptions = {
|
|
8
5
|
/**
|
|
9
6
|
* @deprecated: use placeholder option in BehaviorPreset instead.
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import checkboxPlugin from '@diplodoc/transform/lib/plugins/checkbox';
|
|
2
|
-
import { nodeTypeFactory } from '../../../../utils/schema';
|
|
3
2
|
import { CheckboxNode, b, idPrefix } from './const';
|
|
4
3
|
import { parserTokens } from './parser';
|
|
5
4
|
import { getSchemaSpecs } from './schema';
|
|
6
5
|
import { serializerTokens } from './serializer';
|
|
7
|
-
export { CheckboxAttr, CheckboxNode } from './const';
|
|
8
|
-
export const checkboxType = nodeTypeFactory(CheckboxNode.Checkbox);
|
|
9
|
-
export const checkboxLabelType = nodeTypeFactory(CheckboxNode.Label);
|
|
10
|
-
export const checkboxInputType = nodeTypeFactory(CheckboxNode.Input);
|
|
6
|
+
export { CheckboxAttr, CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType, } from './const';
|
|
11
7
|
export const CheckboxSpecs = (builder, opts) => {
|
|
12
8
|
const schemaSpecs = getSchemaSpecs(opts, builder.context.get('placeholder'));
|
|
13
9
|
builder
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import { PlaceholderOptions } from '../../../../utils/placeholder';
|
|
1
|
+
import { type NodeSpec } from 'prosemirror-model';
|
|
2
|
+
import type { PlaceholderOptions } from '../../../../utils/placeholder';
|
|
3
3
|
import { CheckboxNode } from './const';
|
|
4
4
|
import type { CheckboxSpecsOptions } from './index';
|
|
5
5
|
export declare const getSchemaSpecs: (opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>, placeholder?: PlaceholderOptions) => Record<CheckboxNode, NodeSpec>;
|
|
@@ -1,24 +1,54 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment } from 'prosemirror-model';
|
|
2
|
+
import { CheckboxAttr, CheckboxNode, b, checkboxInputType, checkboxLabelType } from './const';
|
|
2
3
|
const DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';
|
|
3
4
|
export const getSchemaSpecs = (opts, placeholder) => {
|
|
4
5
|
var _a, _b;
|
|
5
6
|
return ({
|
|
6
7
|
[CheckboxNode.Checkbox]: {
|
|
7
|
-
group: 'block',
|
|
8
|
+
group: 'block checkbox',
|
|
8
9
|
content: `${CheckboxNode.Input} ${CheckboxNode.Label}`,
|
|
9
10
|
selectable: true,
|
|
10
11
|
allowSelection: false,
|
|
11
|
-
parseDOM: [],
|
|
12
12
|
attrs: {
|
|
13
13
|
[CheckboxAttr.Class]: { default: b() },
|
|
14
14
|
},
|
|
15
|
+
parseDOM: [
|
|
16
|
+
{
|
|
17
|
+
tag: 'div.checkbox',
|
|
18
|
+
priority: 100,
|
|
19
|
+
getContent(node, schema) {
|
|
20
|
+
const input = node.querySelector('input[type=checkbox]');
|
|
21
|
+
const label = node.querySelector('label[for]');
|
|
22
|
+
const checked = (input === null || input === void 0 ? void 0 : input.checked) ? 'true' : null;
|
|
23
|
+
const text = label === null || label === void 0 ? void 0 : label.textContent;
|
|
24
|
+
return Fragment.from([
|
|
25
|
+
checkboxInputType(schema).create({ [CheckboxAttr.Checked]: checked }),
|
|
26
|
+
checkboxLabelType(schema).create(null, text ? schema.text(text) : null),
|
|
27
|
+
]);
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
tag: 'input[type=checkbox]',
|
|
32
|
+
priority: 50,
|
|
33
|
+
getContent(node, schema) {
|
|
34
|
+
var _a, _b;
|
|
35
|
+
const id = node.id;
|
|
36
|
+
const checked = node.checked ? 'true' : null;
|
|
37
|
+
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;
|
|
38
|
+
return Fragment.from([
|
|
39
|
+
checkboxInputType(schema).create({ [CheckboxAttr.Checked]: checked }),
|
|
40
|
+
checkboxLabelType(schema).create(null, text ? schema.text(text) : null),
|
|
41
|
+
]);
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
],
|
|
15
45
|
toDOM(node) {
|
|
16
46
|
return ['div', node.attrs, 0];
|
|
17
47
|
},
|
|
18
48
|
complex: 'root',
|
|
19
49
|
},
|
|
20
50
|
[CheckboxNode.Input]: {
|
|
21
|
-
group: 'block',
|
|
51
|
+
group: 'block checkbox',
|
|
22
52
|
parseDOM: [],
|
|
23
53
|
attrs: {
|
|
24
54
|
[CheckboxAttr.Type]: { default: 'checkbox' },
|
|
@@ -34,7 +64,7 @@ export const getSchemaSpecs = (opts, placeholder) => {
|
|
|
34
64
|
},
|
|
35
65
|
[CheckboxNode.Label]: {
|
|
36
66
|
content: 'inline*',
|
|
37
|
-
group: 'block',
|
|
67
|
+
group: 'block checkbox',
|
|
38
68
|
parseDOM: [
|
|
39
69
|
{
|
|
40
70
|
tag: `span[class="${b('label')}"]`,
|
|
@@ -42,6 +72,13 @@ export const getSchemaSpecs = (opts, placeholder) => {
|
|
|
42
72
|
[CheckboxAttr.For]: node.getAttribute(CheckboxAttr.For) || '',
|
|
43
73
|
}),
|
|
44
74
|
},
|
|
75
|
+
{
|
|
76
|
+
// input handled by checkbox node parse rule
|
|
77
|
+
// ignore label
|
|
78
|
+
tag: 'input[type=checkbox] ~ label[for]',
|
|
79
|
+
ignore: true,
|
|
80
|
+
consuming: true,
|
|
81
|
+
},
|
|
45
82
|
],
|
|
46
83
|
attrs: {
|
|
47
84
|
[CheckboxAttr.For]: { default: null },
|
|
@@ -3,6 +3,7 @@ import { CheckboxSpecs } from './CheckboxSpecs';
|
|
|
3
3
|
import { addCheckbox } from './actions';
|
|
4
4
|
import { CheckboxInputView } from './nodeviews';
|
|
5
5
|
import { keymapPlugin } from './plugin';
|
|
6
|
+
import { fixPastePlugin } from './plugins/fix-paste';
|
|
6
7
|
import { checkboxInputType, checkboxType } from './utils';
|
|
7
8
|
import './index.css';
|
|
8
9
|
const checkboxAction = 'addCheckbox';
|
|
@@ -11,6 +12,7 @@ export const Checkbox = (builder, opts) => {
|
|
|
11
12
|
builder.use(CheckboxSpecs, Object.assign(Object.assign({}, opts), { inputView: () => CheckboxInputView.create }));
|
|
12
13
|
builder
|
|
13
14
|
.addPlugin(keymapPlugin, builder.Priority.High)
|
|
15
|
+
.addPlugin(fixPastePlugin)
|
|
14
16
|
.addAction(checkboxAction, () => addCheckbox())
|
|
15
17
|
.addInputRules(({ schema }) => ({
|
|
16
18
|
rules: [
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Slice } from 'prosemirror-model';
|
|
2
|
+
import { Plugin } from 'prosemirror-state';
|
|
3
|
+
import { checkboxType } from '../CheckboxSpecs';
|
|
4
|
+
export const fixPastePlugin = () => new Plugin({
|
|
5
|
+
props: {
|
|
6
|
+
transformPasted(slice) {
|
|
7
|
+
const { firstChild } = slice.content;
|
|
8
|
+
if (firstChild && firstChild.type === checkboxType(firstChild.type.schema)) {
|
|
9
|
+
// When paste html with checkboxes and checkbox is first node,
|
|
10
|
+
// pm creates slice with broken openStart and openEnd.
|
|
11
|
+
// And content is inserted without a container block for checkboxes.
|
|
12
|
+
// It is fixed by create new slice with zeroed openStart and openEnd.
|
|
13
|
+
return new Slice(slice.content, 0, 0);
|
|
14
|
+
}
|
|
15
|
+
return slice;
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Node, NodeType, Schema } from 'prosemirror-model';
|
|
1
|
+
import { Node, type NodeType, type Schema } from 'prosemirror-model';
|
|
2
2
|
export declare const nodeTypeFactory: (nodeName: string) => (schema: Schema) => NodeType;
|
|
3
3
|
export declare const markTypeFactory: (markName: string) => (schema: Schema) => import("prosemirror-model").MarkType;
|
|
4
4
|
export declare function isSameNodeType(a: Node | NodeType, b: Node | NodeType): boolean;
|
package/build/esm/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/** During build process, the current version will be injected here */
|
|
2
|
-
export const VERSION = typeof '14.
|
|
2
|
+
export const VERSION = typeof '14.8.0' !== 'undefined' ? '14.8.0' : 'unknown';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/markdown-editor",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.8.0",
|
|
4
4
|
"description": "Markdown wysiwyg and markup editor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -300,8 +300,8 @@
|
|
|
300
300
|
"lodash": "^4.17.20",
|
|
301
301
|
"lowlight": "^3.0.0",
|
|
302
302
|
"markdown-it": "^13.0.0",
|
|
303
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
304
|
-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
303
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
304
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
305
305
|
},
|
|
306
306
|
"lint-staged": {
|
|
307
307
|
"*.{css,scss}": [
|
|
@@ -313,5 +313,13 @@
|
|
|
313
313
|
"prettier --write"
|
|
314
314
|
],
|
|
315
315
|
"*.{md,json,yaml,yml}": "prettier --write"
|
|
316
|
-
}
|
|
316
|
+
},
|
|
317
|
+
"sideEffects": [
|
|
318
|
+
"*.css",
|
|
319
|
+
"*.scss",
|
|
320
|
+
"src/shortcuts/index.ts",
|
|
321
|
+
"src/shortcuts/default.ts",
|
|
322
|
+
"build/**/shortcuts/index.js",
|
|
323
|
+
"build/**/shortcuts/default.js"
|
|
324
|
+
]
|
|
317
325
|
}
|