@kerebron/extension-menu 0.0.1
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/LICENSE +23 -0
- package/README.md +3 -0
- package/esm/ExtensionMenu.d.ts +10 -0
- package/esm/ExtensionMenu.d.ts.map +1 -0
- package/esm/ExtensionMenu.js +302 -0
- package/esm/MenuPlugin.d.ts +9 -0
- package/esm/MenuPlugin.d.ts.map +1 -0
- package/esm/MenuPlugin.js +247 -0
- package/esm/_dnt.shims.d.ts +6 -0
- package/esm/_dnt.shims.d.ts.map +1 -0
- package/esm/_dnt.shims.js +61 -0
- package/esm/icons.d.ts +15 -0
- package/esm/icons.d.ts.map +1 -0
- package/esm/icons.js +118 -0
- package/esm/menu.d.ts +86 -0
- package/esm/menu.d.ts.map +1 -0
- package/esm/menu.js +354 -0
- package/esm/package.json +3 -0
- package/esm/prompt.d.ts +36 -0
- package/esm/prompt.d.ts.map +1 -0
- package/esm/prompt.js +158 -0
- package/package.json +18 -0
package/esm/icons.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { IconSpec } from './menu.js';
|
|
2
|
+
export declare function getIcon(root: Document | ShadowRoot, icon: {
|
|
3
|
+
path: string;
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
} | {
|
|
7
|
+
text: string;
|
|
8
|
+
css?: string;
|
|
9
|
+
} | {
|
|
10
|
+
dom: Node;
|
|
11
|
+
}): HTMLElement;
|
|
12
|
+
export declare const icons: {
|
|
13
|
+
[name: string]: IconSpec;
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=icons.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAerC,wBAAgB,OAAO,CACrB,IAAI,EAAE,QAAQ,GAAG,UAAU,EAC3B,IAAI,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG;IAAE,GAAG,EAAE,IAAI,CAAA;CAAE,GAChB,WAAW,CAmCb;AA8BD,eAAO,MAAM,KAAK,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;CAoE7C,CAAC"}
|
package/esm/icons.js
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
const SVG = 'http://www.w3.org/2000/svg';
|
|
2
|
+
const XLINK = 'http://www.w3.org/1999/xlink';
|
|
3
|
+
const prefix = 'ProseMirror-icon';
|
|
4
|
+
function hashPath(path) {
|
|
5
|
+
let hash = 0;
|
|
6
|
+
for (let i = 0; i < path.length; i++) {
|
|
7
|
+
hash = (((hash << 5) - hash) + path.charCodeAt(i)) | 0;
|
|
8
|
+
}
|
|
9
|
+
return hash;
|
|
10
|
+
}
|
|
11
|
+
export function getIcon(root, icon) {
|
|
12
|
+
let doc = (root.nodeType == 9 ? root : root.ownerDocument) ||
|
|
13
|
+
document;
|
|
14
|
+
let node = doc.createElement('div');
|
|
15
|
+
node.className = prefix;
|
|
16
|
+
if (icon.path) {
|
|
17
|
+
let { path, width, height } = icon;
|
|
18
|
+
let name = 'pm-icon-' + hashPath(path).toString(16);
|
|
19
|
+
if (!doc.getElementById(name)) {
|
|
20
|
+
buildSVG(root, name, icon);
|
|
21
|
+
}
|
|
22
|
+
let svg = node.appendChild(doc.createElementNS(SVG, 'svg'));
|
|
23
|
+
svg.style.width = (width / height) + 'em';
|
|
24
|
+
let use = svg.appendChild(doc.createElementNS(SVG, 'use'));
|
|
25
|
+
use.setAttributeNS(XLINK, 'href', /([^#]*)/.exec(doc.location.toString())[1] + '#' + name);
|
|
26
|
+
}
|
|
27
|
+
else if (icon.dom) {
|
|
28
|
+
node.appendChild(icon.dom.cloneNode(true));
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
let { text, css } = icon;
|
|
32
|
+
node.appendChild(doc.createElement('span')).textContent = text || '';
|
|
33
|
+
if (css)
|
|
34
|
+
node.firstChild.style.cssText = css;
|
|
35
|
+
}
|
|
36
|
+
return node;
|
|
37
|
+
}
|
|
38
|
+
function buildSVG(root, name, data) {
|
|
39
|
+
let [doc, top] = root.nodeType == 9
|
|
40
|
+
? [root, root.body]
|
|
41
|
+
: [root.ownerDocument || document, root];
|
|
42
|
+
let collection = doc.getElementById(prefix + '-collection');
|
|
43
|
+
if (!collection) {
|
|
44
|
+
collection = doc.createElementNS(SVG, 'svg');
|
|
45
|
+
collection.id = prefix + '-collection';
|
|
46
|
+
collection.style.display = 'none';
|
|
47
|
+
top.insertBefore(collection, top.firstChild);
|
|
48
|
+
}
|
|
49
|
+
let sym = doc.createElementNS(SVG, 'symbol');
|
|
50
|
+
sym.id = name;
|
|
51
|
+
sym.setAttribute('viewBox', '0 0 ' + data.width + ' ' + data.height);
|
|
52
|
+
let path = sym.appendChild(doc.createElementNS(SVG, 'path'));
|
|
53
|
+
path.setAttribute('d', data.path);
|
|
54
|
+
collection.appendChild(sym);
|
|
55
|
+
}
|
|
56
|
+
/// A set of basic editor-related icons. Contains the properties
|
|
57
|
+
/// `join`, `lift`, `selectParentNode`, `undo`, `redo`, `strong`, `em`,
|
|
58
|
+
/// `code`, `link`, `bulletList`, `orderedList`, and `blockquote`, each
|
|
59
|
+
/// holding an object that can be used as the `icon` option to
|
|
60
|
+
/// `MenuItem`.
|
|
61
|
+
export const icons = {
|
|
62
|
+
join: {
|
|
63
|
+
width: 800,
|
|
64
|
+
height: 900,
|
|
65
|
+
path: 'M0 75h800v125h-800z M0 825h800v-125h-800z M250 400h100v-100h100v100h100v100h-100v100h-100v-100h-100z',
|
|
66
|
+
},
|
|
67
|
+
lift: {
|
|
68
|
+
width: 1024,
|
|
69
|
+
height: 1024,
|
|
70
|
+
path: 'M219 310v329q0 7-5 12t-12 5q-8 0-13-5l-164-164q-5-5-5-13t5-13l164-164q5-5 13-5 7 0 12 5t5 12zM1024 749v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12zM1024 530v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 310v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 91v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12z',
|
|
71
|
+
},
|
|
72
|
+
selectParentNode: { text: '\u2b1a', css: 'font-weight: bold' },
|
|
73
|
+
undo: {
|
|
74
|
+
width: 1024,
|
|
75
|
+
height: 1024,
|
|
76
|
+
path: 'M761 1024c113-206 132-520-313-509v253l-384-384 384-384v248c534-13 594 472 313 775z',
|
|
77
|
+
},
|
|
78
|
+
redo: {
|
|
79
|
+
width: 1024,
|
|
80
|
+
height: 1024,
|
|
81
|
+
path: 'M576 248v-248l384 384-384 384v-253c-446-10-427 303-313 509-280-303-221-789 313-775z',
|
|
82
|
+
},
|
|
83
|
+
strong: {
|
|
84
|
+
width: 805,
|
|
85
|
+
height: 1024,
|
|
86
|
+
path: 'M317 869q42 18 80 18 214 0 214-191 0-65-23-102-15-25-35-42t-38-26-46-14-48-6-54-1q-41 0-57 5 0 30-0 90t-0 90q0 4-0 38t-0 55 2 47 6 38zM309 442q24 4 62 4 46 0 81-7t62-25 42-51 14-81q0-40-16-70t-45-46-61-24-70-8q-28 0-74 7 0 28 2 86t2 86q0 15-0 45t-0 45q0 26 0 39zM0 950l1-53q8-2 48-9t60-15q4-6 7-15t4-19 3-18 1-21 0-19v-37q0-561-12-585-2-4-12-8t-25-6-28-4-27-2-17-1l-2-47q56-1 194-6t213-5q13 0 39 0t38 0q40 0 78 7t73 24 61 40 42 59 16 78q0 29-9 54t-22 41-36 32-41 25-48 22q88 20 146 76t58 141q0 57-20 102t-53 74-78 48-93 27-100 8q-25 0-75-1t-75-1q-60 0-175 6t-132 6z',
|
|
87
|
+
},
|
|
88
|
+
em: {
|
|
89
|
+
width: 585,
|
|
90
|
+
height: 1024,
|
|
91
|
+
path: 'M0 949l9-48q3-1 46-12t63-21q16-20 23-57 0-4 35-165t65-310 29-169v-14q-13-7-31-10t-39-4-33-3l10-58q18 1 68 3t85 4 68 1q27 0 56-1t69-4 56-3q-2 22-10 50-17 5-58 16t-62 19q-4 10-8 24t-5 22-4 26-3 24q-15 84-50 239t-44 203q-1 5-7 33t-11 51-9 47-3 32l0 10q9 2 105 17-1 25-9 56-6 0-18 0t-18 0q-16 0-49-5t-49-5q-78-1-117-1-29 0-81 5t-69 6z',
|
|
92
|
+
},
|
|
93
|
+
code: {
|
|
94
|
+
width: 896,
|
|
95
|
+
height: 1024,
|
|
96
|
+
path: 'M608 192l-96 96 224 224-224 224 96 96 288-320-288-320zM288 192l-288 320 288 320 96-96-224-224 224-224-96-96z',
|
|
97
|
+
},
|
|
98
|
+
link: {
|
|
99
|
+
width: 951,
|
|
100
|
+
height: 1024,
|
|
101
|
+
path: 'M832 694q0-22-16-38l-118-118q-16-16-38-16-24 0-41 18 1 1 10 10t12 12 8 10 7 14 2 15q0 22-16 38t-38 16q-8 0-15-2t-14-7-10-8-12-12-10-10q-18 17-18 41 0 22 16 38l117 118q15 15 38 15 22 0 38-14l84-83q16-16 16-38zM430 292q0-22-16-38l-117-118q-16-16-38-16-22 0-38 15l-84 83q-16 16-16 38 0 22 16 38l118 118q15 15 38 15 24 0 41-17-1-1-10-10t-12-12-8-10-7-14-2-15q0-22 16-38t38-16q8 0 15 2t14 7 10 8 12 12 10 10q18-17 18-41zM941 694q0 68-48 116l-84 83q-47 47-116 47-69 0-116-48l-117-118q-47-47-47-116 0-70 50-119l-50-50q-49 50-118 50-68 0-116-48l-118-118q-48-48-48-116t48-116l84-83q47-47 116-47 69 0 116 48l117 118q47 47 47 116 0 70-50 119l50 50q49-50 118-50 68 0 116 48l118 118q48 48 48 116z',
|
|
102
|
+
},
|
|
103
|
+
bulletList: {
|
|
104
|
+
width: 768,
|
|
105
|
+
height: 896,
|
|
106
|
+
path: 'M0 512h128v-128h-128v128zM0 256h128v-128h-128v128zM0 768h128v-128h-128v128zM256 512h512v-128h-512v128zM256 256h512v-128h-512v128zM256 768h512v-128h-512v128z',
|
|
107
|
+
},
|
|
108
|
+
orderedList: {
|
|
109
|
+
width: 768,
|
|
110
|
+
height: 896,
|
|
111
|
+
path: 'M320 512h448v-128h-448v128zM320 768h448v-128h-448v128zM320 128v128h448v-128h-448zM79 384h78v-256h-36l-85 23v50l43-2v185zM189 590c0-36-12-78-96-78-33 0-64 6-83 16l1 66c21-10 42-15 67-15s32 11 32 28c0 26-30 58-110 112v50h192v-67l-91 2c49-30 87-66 87-113l1-1z',
|
|
112
|
+
},
|
|
113
|
+
blockquote: {
|
|
114
|
+
width: 640,
|
|
115
|
+
height: 896,
|
|
116
|
+
path: 'M0 448v256h256v-256h-128c0 0 0-128 128-128v-128c0 0-256 0-256 256zM640 320v-128c0 0-256 0-256 256v256h256v-256h-128c0 0 0-128 128-128z',
|
|
117
|
+
},
|
|
118
|
+
};
|
package/esm/menu.d.ts
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { EditorView } from 'prosemirror-view';
|
|
2
|
+
import { EditorState, Transaction } from 'prosemirror-state';
|
|
3
|
+
import { Attrs, NodeType } from 'prosemirror-model';
|
|
4
|
+
export interface MenuElement {
|
|
5
|
+
render(pm: EditorView): {
|
|
6
|
+
dom: HTMLElement;
|
|
7
|
+
update: (state: EditorState) => boolean;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
export declare class MenuItem implements MenuElement {
|
|
11
|
+
readonly spec: MenuItemSpec;
|
|
12
|
+
constructor(spec: MenuItemSpec);
|
|
13
|
+
render(view: EditorView): {
|
|
14
|
+
dom: any;
|
|
15
|
+
update: (state: EditorState) => boolean;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
export type IconSpec = {
|
|
19
|
+
path: string;
|
|
20
|
+
width: number;
|
|
21
|
+
height: number;
|
|
22
|
+
} | {
|
|
23
|
+
text: string;
|
|
24
|
+
css?: string;
|
|
25
|
+
} | {
|
|
26
|
+
dom: Node;
|
|
27
|
+
};
|
|
28
|
+
export interface MenuItemSpec {
|
|
29
|
+
run: (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
|
|
30
|
+
select?: (state: EditorState) => boolean;
|
|
31
|
+
enable?: (state: EditorState) => boolean;
|
|
32
|
+
active?: (state: EditorState) => boolean;
|
|
33
|
+
render?: (view: EditorView) => HTMLElement;
|
|
34
|
+
icon?: IconSpec;
|
|
35
|
+
label?: string;
|
|
36
|
+
title?: string | ((state: EditorState) => string);
|
|
37
|
+
class?: string;
|
|
38
|
+
css?: string;
|
|
39
|
+
}
|
|
40
|
+
export declare class Dropdown implements MenuElement {
|
|
41
|
+
readonly options: {
|
|
42
|
+
label?: string;
|
|
43
|
+
title?: string;
|
|
44
|
+
class?: string;
|
|
45
|
+
css?: string;
|
|
46
|
+
};
|
|
47
|
+
content: readonly MenuElement[];
|
|
48
|
+
constructor(content: readonly MenuElement[] | MenuElement, options?: {
|
|
49
|
+
label?: string;
|
|
50
|
+
title?: string;
|
|
51
|
+
class?: string;
|
|
52
|
+
css?: string;
|
|
53
|
+
});
|
|
54
|
+
render(view: EditorView): {
|
|
55
|
+
dom: any;
|
|
56
|
+
update: (state: EditorState) => boolean;
|
|
57
|
+
};
|
|
58
|
+
expand(dom: HTMLElement, items: readonly Node[]): {
|
|
59
|
+
close: () => boolean;
|
|
60
|
+
node: any;
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
export declare class DropdownSubmenu implements MenuElement {
|
|
64
|
+
readonly options: {
|
|
65
|
+
label?: string;
|
|
66
|
+
};
|
|
67
|
+
content: readonly MenuElement[];
|
|
68
|
+
constructor(content: readonly MenuElement[] | MenuElement, options?: {
|
|
69
|
+
label?: string;
|
|
70
|
+
});
|
|
71
|
+
render(view: EditorView): {
|
|
72
|
+
dom: any;
|
|
73
|
+
update: (state: EditorState) => boolean;
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
export declare function renderGrouped(view: EditorView, content: readonly (readonly MenuElement[])[]): {
|
|
77
|
+
dom: any;
|
|
78
|
+
update: (state: EditorState) => boolean;
|
|
79
|
+
};
|
|
80
|
+
export declare function wrapItem(nodeType: NodeType, options: Partial<MenuItemSpec> & {
|
|
81
|
+
attrs?: Attrs | null;
|
|
82
|
+
}): MenuItem;
|
|
83
|
+
export declare function blockTypeItem(nodeType: NodeType, options: Partial<MenuItemSpec> & {
|
|
84
|
+
attrs?: Attrs | null;
|
|
85
|
+
}): MenuItem;
|
|
86
|
+
//# sourceMappingURL=menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../src/menu.ts"],"names":[],"mappings":"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"}
|
package/esm/menu.js
ADDED
|
@@ -0,0 +1,354 @@
|
|
|
1
|
+
import * as dntShim from "./_dnt.shims.js";
|
|
2
|
+
import { setBlockType, wrapIn, } from '@kerebron/editor/commands';
|
|
3
|
+
import { getIcon } from './icons.js';
|
|
4
|
+
const prefix = 'ProseMirror-menu';
|
|
5
|
+
/// An icon or label that, when clicked, executes a command.
|
|
6
|
+
export class MenuItem {
|
|
7
|
+
/// Create a menu item.
|
|
8
|
+
constructor(
|
|
9
|
+
/// The spec used to create this item.
|
|
10
|
+
spec) {
|
|
11
|
+
Object.defineProperty(this, "spec", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
configurable: true,
|
|
14
|
+
writable: true,
|
|
15
|
+
value: spec
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
/// Renders the icon according to its [display
|
|
19
|
+
/// spec](#menu.MenuItemSpec.display), and adds an event handler which
|
|
20
|
+
/// executes the command when the representation is clicked.
|
|
21
|
+
render(view) {
|
|
22
|
+
let spec = this.spec;
|
|
23
|
+
let dom = spec.render ? spec.render(view) : null;
|
|
24
|
+
if (!dom && spec.icon) {
|
|
25
|
+
dom = getIcon(view.root, spec.icon);
|
|
26
|
+
}
|
|
27
|
+
if (!dom && spec.label) {
|
|
28
|
+
dom = document.createElement('div');
|
|
29
|
+
dom.appendChild(document.createTextNode(translate(view, spec.label)));
|
|
30
|
+
}
|
|
31
|
+
if (!dom)
|
|
32
|
+
throw new RangeError('MenuItem without icon or label property');
|
|
33
|
+
if (spec.title) {
|
|
34
|
+
const title = typeof spec.title === 'function'
|
|
35
|
+
? spec.title(view.state)
|
|
36
|
+
: spec.title;
|
|
37
|
+
dom.setAttribute('title', translate(view, title));
|
|
38
|
+
}
|
|
39
|
+
if (spec.class)
|
|
40
|
+
dom.classList.add(spec.class);
|
|
41
|
+
if (spec.css)
|
|
42
|
+
dom.style.cssText += spec.css;
|
|
43
|
+
dom.addEventListener('mousedown', (e) => {
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
if (!dom.classList.contains(prefix + '-disabled')) {
|
|
46
|
+
spec.run(view.state, view.dispatch);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
function update(state) {
|
|
50
|
+
if (spec.select) {
|
|
51
|
+
let selected = spec.select(state);
|
|
52
|
+
dom.style.display = selected ? '' : 'none';
|
|
53
|
+
if (!selected)
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
let enabled = true;
|
|
57
|
+
if (spec.enable) {
|
|
58
|
+
enabled = spec.enable(state) || false;
|
|
59
|
+
setClass(dom, prefix + '-disabled', !enabled);
|
|
60
|
+
}
|
|
61
|
+
if (spec.active) {
|
|
62
|
+
let active = enabled && spec.active(state) || false;
|
|
63
|
+
setClass(dom, prefix + '-active', active);
|
|
64
|
+
}
|
|
65
|
+
return true;
|
|
66
|
+
}
|
|
67
|
+
return { dom, update };
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function translate(view, text) {
|
|
71
|
+
return view._props.translate
|
|
72
|
+
? view._props.translate(text)
|
|
73
|
+
: text;
|
|
74
|
+
}
|
|
75
|
+
let lastMenuEvent = {
|
|
76
|
+
time: 0,
|
|
77
|
+
node: null,
|
|
78
|
+
};
|
|
79
|
+
function markMenuEvent(e) {
|
|
80
|
+
lastMenuEvent.time = Date.now();
|
|
81
|
+
lastMenuEvent.node = e.target;
|
|
82
|
+
}
|
|
83
|
+
function isMenuEvent(wrapper) {
|
|
84
|
+
return Date.now() - 100 < lastMenuEvent.time &&
|
|
85
|
+
lastMenuEvent.node && wrapper.contains(lastMenuEvent.node);
|
|
86
|
+
}
|
|
87
|
+
/// A drop-down menu, displayed as a label with a downwards-pointing
|
|
88
|
+
/// triangle to the right of it.
|
|
89
|
+
export class Dropdown {
|
|
90
|
+
/// Create a dropdown wrapping the elements.
|
|
91
|
+
constructor(content,
|
|
92
|
+
/// @internal
|
|
93
|
+
options = {}) {
|
|
94
|
+
Object.defineProperty(this, "options", {
|
|
95
|
+
enumerable: true,
|
|
96
|
+
configurable: true,
|
|
97
|
+
writable: true,
|
|
98
|
+
value: options
|
|
99
|
+
});
|
|
100
|
+
/// @internal
|
|
101
|
+
Object.defineProperty(this, "content", {
|
|
102
|
+
enumerable: true,
|
|
103
|
+
configurable: true,
|
|
104
|
+
writable: true,
|
|
105
|
+
value: void 0
|
|
106
|
+
});
|
|
107
|
+
this.options = options || {};
|
|
108
|
+
this.content = Array.isArray(content) ? content : [content];
|
|
109
|
+
}
|
|
110
|
+
/// Render the dropdown menu and sub-items.
|
|
111
|
+
render(view) {
|
|
112
|
+
let content = renderDropdownItems(this.content, view);
|
|
113
|
+
let win = view.dom.ownerDocument.defaultView || dntShim.dntGlobalThis;
|
|
114
|
+
let label = document.createElement('div');
|
|
115
|
+
label.classList.add(prefix + '-dropdown');
|
|
116
|
+
if (this.options.class) {
|
|
117
|
+
label.classList.add(this.options.class);
|
|
118
|
+
}
|
|
119
|
+
if (this.options.css)
|
|
120
|
+
label.setAttribute('style', this.options.css);
|
|
121
|
+
label.appendChild(document.createTextNode(translate(view, this.options.label || '')));
|
|
122
|
+
if (this.options.title) {
|
|
123
|
+
label.setAttribute('title', translate(view, this.options.title));
|
|
124
|
+
}
|
|
125
|
+
let wrap = document.createElement('div');
|
|
126
|
+
wrap.classList.add(prefix + '-dropdown-wrap');
|
|
127
|
+
wrap.appendChild(label);
|
|
128
|
+
let open = null;
|
|
129
|
+
let listeningOnClose = null;
|
|
130
|
+
let close = () => {
|
|
131
|
+
if (open && open.close()) {
|
|
132
|
+
open = null;
|
|
133
|
+
win.removeEventListener('mousedown', listeningOnClose);
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
label.addEventListener('mousedown', (e) => {
|
|
137
|
+
e.preventDefault();
|
|
138
|
+
markMenuEvent(e);
|
|
139
|
+
if (open) {
|
|
140
|
+
close();
|
|
141
|
+
}
|
|
142
|
+
else {
|
|
143
|
+
open = this.expand(wrap, content.dom);
|
|
144
|
+
win.addEventListener('mousedown', listeningOnClose = () => {
|
|
145
|
+
if (!isMenuEvent(wrap))
|
|
146
|
+
close();
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
function update(state) {
|
|
151
|
+
let inner = content.update(state);
|
|
152
|
+
wrap.style.display = inner ? '' : 'none';
|
|
153
|
+
return inner;
|
|
154
|
+
}
|
|
155
|
+
return { dom: wrap, update };
|
|
156
|
+
}
|
|
157
|
+
/// @internal
|
|
158
|
+
expand(dom, items) {
|
|
159
|
+
const menuDOM = document.createElement('div');
|
|
160
|
+
menuDOM.classList.add(prefix + '-dropdown-menu');
|
|
161
|
+
if (this.options.class) {
|
|
162
|
+
menuDOM.classList.add(this.options.class);
|
|
163
|
+
}
|
|
164
|
+
items.forEach((item) => menuDOM.appendChild(item));
|
|
165
|
+
let done = false;
|
|
166
|
+
function close() {
|
|
167
|
+
if (done)
|
|
168
|
+
return false;
|
|
169
|
+
done = true;
|
|
170
|
+
dom.removeChild(menuDOM);
|
|
171
|
+
return true;
|
|
172
|
+
}
|
|
173
|
+
dom.appendChild(menuDOM);
|
|
174
|
+
return { close, node: menuDOM };
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
function renderDropdownItems(items, view) {
|
|
178
|
+
let rendered = [], updates = [];
|
|
179
|
+
for (let i = 0; i < items.length; i++) {
|
|
180
|
+
let { dom, update } = items[i].render(view);
|
|
181
|
+
const item = document.createElement('div');
|
|
182
|
+
item.classList.add(prefix + '-dropdown-item');
|
|
183
|
+
item.appendChild(dom);
|
|
184
|
+
rendered.push(item);
|
|
185
|
+
updates.push(update);
|
|
186
|
+
}
|
|
187
|
+
return { dom: rendered, update: combineUpdates(updates, rendered) };
|
|
188
|
+
}
|
|
189
|
+
function combineUpdates(updates, nodes) {
|
|
190
|
+
return (state) => {
|
|
191
|
+
let something = false;
|
|
192
|
+
for (let i = 0; i < updates.length; i++) {
|
|
193
|
+
let up = updates[i](state);
|
|
194
|
+
nodes[i].style.display = up ? '' : 'none';
|
|
195
|
+
if (up)
|
|
196
|
+
something = true;
|
|
197
|
+
}
|
|
198
|
+
return something;
|
|
199
|
+
};
|
|
200
|
+
}
|
|
201
|
+
/// Represents a submenu wrapping a group of elements that start
|
|
202
|
+
/// hidden and expand to the right when hovered over or tapped.
|
|
203
|
+
export class DropdownSubmenu {
|
|
204
|
+
/// Creates a submenu for the given group of menu elements. The
|
|
205
|
+
/// following options are recognized:
|
|
206
|
+
constructor(content,
|
|
207
|
+
/// @internal
|
|
208
|
+
options = {}) {
|
|
209
|
+
Object.defineProperty(this, "options", {
|
|
210
|
+
enumerable: true,
|
|
211
|
+
configurable: true,
|
|
212
|
+
writable: true,
|
|
213
|
+
value: options
|
|
214
|
+
});
|
|
215
|
+
/// @internal
|
|
216
|
+
Object.defineProperty(this, "content", {
|
|
217
|
+
enumerable: true,
|
|
218
|
+
configurable: true,
|
|
219
|
+
writable: true,
|
|
220
|
+
value: void 0
|
|
221
|
+
});
|
|
222
|
+
this.content = Array.isArray(content) ? content : [content];
|
|
223
|
+
}
|
|
224
|
+
/// Renders the submenu.
|
|
225
|
+
render(view) {
|
|
226
|
+
const items = renderDropdownItems(this.content, view);
|
|
227
|
+
const win = view.dom.ownerDocument.defaultView || dntShim.dntGlobalThis;
|
|
228
|
+
const label = document.createElement('div');
|
|
229
|
+
label.classList.add(prefix + '-submenu-label');
|
|
230
|
+
label.appendChild(document.createTextNode(translate(view, this.options.label || '')));
|
|
231
|
+
const wrap = document.createElement('div');
|
|
232
|
+
wrap.classList.add(prefix + '-submenu-wrap');
|
|
233
|
+
wrap.appendChild(label);
|
|
234
|
+
const submenu = document.createElement('div');
|
|
235
|
+
submenu.classList.add(prefix + '-submenu');
|
|
236
|
+
items.dom.forEach((item) => submenu.appendChild(item));
|
|
237
|
+
wrap.appendChild(submenu);
|
|
238
|
+
let listeningOnClose = null;
|
|
239
|
+
label.addEventListener('mousedown', (e) => {
|
|
240
|
+
e.preventDefault();
|
|
241
|
+
markMenuEvent(e);
|
|
242
|
+
setClass(wrap, prefix + '-submenu-wrap-active', false);
|
|
243
|
+
if (!listeningOnClose) {
|
|
244
|
+
win.addEventListener('mousedown', listeningOnClose = () => {
|
|
245
|
+
if (!isMenuEvent(wrap)) {
|
|
246
|
+
wrap.classList.remove(prefix + '-submenu-wrap-active');
|
|
247
|
+
win.removeEventListener('mousedown', listeningOnClose);
|
|
248
|
+
listeningOnClose = null;
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
}
|
|
252
|
+
});
|
|
253
|
+
function update(state) {
|
|
254
|
+
let inner = items.update(state);
|
|
255
|
+
wrap.style.display = inner ? '' : 'none';
|
|
256
|
+
return inner;
|
|
257
|
+
}
|
|
258
|
+
return { dom: wrap, update };
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
/// Render the given, possibly nested, array of menu elements into a
|
|
262
|
+
/// document fragment, placing separators between them (and ensuring no
|
|
263
|
+
/// superfluous separators appear when some of the groups turn out to
|
|
264
|
+
/// be empty).
|
|
265
|
+
export function renderGrouped(view, content) {
|
|
266
|
+
let result = document.createDocumentFragment();
|
|
267
|
+
let updates = [], separators = [];
|
|
268
|
+
for (let i = 0; i < content.length; i++) {
|
|
269
|
+
let items = content[i], localUpdates = [], localNodes = [];
|
|
270
|
+
for (let j = 0; j < items.length; j++) {
|
|
271
|
+
let { dom, update } = items[j].render(view);
|
|
272
|
+
let span = document.createElement('span');
|
|
273
|
+
span.classList.add(prefix + 'item');
|
|
274
|
+
span.appendChild(dom);
|
|
275
|
+
result.appendChild(span);
|
|
276
|
+
localNodes.push(span);
|
|
277
|
+
localUpdates.push(update);
|
|
278
|
+
}
|
|
279
|
+
if (localUpdates.length) {
|
|
280
|
+
updates.push(combineUpdates(localUpdates, localNodes));
|
|
281
|
+
if (i < content.length - 1) {
|
|
282
|
+
separators.push(result.appendChild(separator()));
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
function update(state) {
|
|
287
|
+
let something = false, needSep = false;
|
|
288
|
+
for (let i = 0; i < updates.length; i++) {
|
|
289
|
+
let hasContent = updates[i](state);
|
|
290
|
+
if (i) {
|
|
291
|
+
separators[i - 1].style.display = needSep && hasContent ? '' : 'none';
|
|
292
|
+
}
|
|
293
|
+
needSep = hasContent;
|
|
294
|
+
if (hasContent)
|
|
295
|
+
something = true;
|
|
296
|
+
}
|
|
297
|
+
return something;
|
|
298
|
+
}
|
|
299
|
+
return { dom: result, update };
|
|
300
|
+
}
|
|
301
|
+
function separator() {
|
|
302
|
+
const elem = document.createElement('div');
|
|
303
|
+
elem.classList.add(prefix + 'separator');
|
|
304
|
+
return elem;
|
|
305
|
+
}
|
|
306
|
+
/// Build a menu item for wrapping the selection in a given node type.
|
|
307
|
+
/// Adds `run` and `select` properties to the ones present in
|
|
308
|
+
/// `options`. `options.attrs` may be an object that provides
|
|
309
|
+
/// attributes for the wrapping node.
|
|
310
|
+
export function wrapItem(nodeType, options) {
|
|
311
|
+
let passedOptions = {
|
|
312
|
+
run(state, dispatch) {
|
|
313
|
+
return wrapIn(nodeType, options.attrs)(state, dispatch);
|
|
314
|
+
},
|
|
315
|
+
select(state) {
|
|
316
|
+
return wrapIn(nodeType, options.attrs)(state);
|
|
317
|
+
},
|
|
318
|
+
};
|
|
319
|
+
for (let prop in options) {
|
|
320
|
+
passedOptions[prop] = options[prop];
|
|
321
|
+
}
|
|
322
|
+
return new MenuItem(passedOptions);
|
|
323
|
+
}
|
|
324
|
+
/// Build a menu item for changing the type of the textblock around the
|
|
325
|
+
/// selection to the given type. Provides `run`, `active`, and `select`
|
|
326
|
+
/// properties. Others must be given in `options`. `options.attrs` may
|
|
327
|
+
/// be an object to provide the attributes for the textblock node.
|
|
328
|
+
export function blockTypeItem(nodeType, options) {
|
|
329
|
+
let command = setBlockType(nodeType, options.attrs);
|
|
330
|
+
let passedOptions = {
|
|
331
|
+
run: command,
|
|
332
|
+
enable(state) {
|
|
333
|
+
return command(state);
|
|
334
|
+
},
|
|
335
|
+
active(state) {
|
|
336
|
+
let { $from, to, node } = state.selection;
|
|
337
|
+
if (node)
|
|
338
|
+
return node.hasMarkup(nodeType, options.attrs);
|
|
339
|
+
return to <= $from.end() &&
|
|
340
|
+
$from.parent.hasMarkup(nodeType, options.attrs);
|
|
341
|
+
},
|
|
342
|
+
};
|
|
343
|
+
for (let prop in options) {
|
|
344
|
+
passedOptions[prop] = options[prop];
|
|
345
|
+
}
|
|
346
|
+
return new MenuItem(passedOptions);
|
|
347
|
+
}
|
|
348
|
+
// Work around classList.toggle being broken in IE11
|
|
349
|
+
function setClass(dom, cls, on) {
|
|
350
|
+
if (on)
|
|
351
|
+
dom.classList.add(cls);
|
|
352
|
+
else
|
|
353
|
+
dom.classList.remove(cls);
|
|
354
|
+
}
|
package/esm/package.json
ADDED
package/esm/prompt.d.ts
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { Attrs } from 'prosemirror-model';
|
|
2
|
+
export declare function openPrompt(options: {
|
|
3
|
+
title: string;
|
|
4
|
+
fields: {
|
|
5
|
+
[name: string]: Field;
|
|
6
|
+
};
|
|
7
|
+
callback: (attrs: Attrs) => void;
|
|
8
|
+
}): void;
|
|
9
|
+
export declare abstract class Field {
|
|
10
|
+
readonly options: {
|
|
11
|
+
value?: any;
|
|
12
|
+
label: string;
|
|
13
|
+
required?: boolean;
|
|
14
|
+
validate?: (value: any) => string | null;
|
|
15
|
+
clean?: (value: any) => any;
|
|
16
|
+
};
|
|
17
|
+
constructor(options: {
|
|
18
|
+
value?: any;
|
|
19
|
+
label: string;
|
|
20
|
+
required?: boolean;
|
|
21
|
+
validate?: (value: any) => string | null;
|
|
22
|
+
clean?: (value: any) => any;
|
|
23
|
+
});
|
|
24
|
+
abstract render(): HTMLElement;
|
|
25
|
+
read(dom: HTMLElement): any;
|
|
26
|
+
validateType(value: any): string | null;
|
|
27
|
+
validate(value: any): string | null;
|
|
28
|
+
clean(value: any): any;
|
|
29
|
+
}
|
|
30
|
+
export declare class TextField extends Field {
|
|
31
|
+
render(): any;
|
|
32
|
+
}
|
|
33
|
+
export declare class SelectField extends Field {
|
|
34
|
+
render(): any;
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=prompt.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prompt.d.ts","sourceRoot":"","sources":["../src/prompt.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C,wBAAgB,UAAU,CAAC,OAAO,EAAE;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAA;KAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,QA0EA;AA+BD,8BAAsB,KAAK;IAKvB,QAAQ,CAAC,OAAO,EAAE;QAEhB,KAAK,CAAC,EAAE,GAAG,CAAC;QAGZ,KAAK,EAAE,MAAM,CAAC;QAGd,QAAQ,CAAC,EAAE,OAAO,CAAC;QAInB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;QAGzC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;KAC7B;gBAhBQ,OAAO,EAAE;QAEhB,KAAK,CAAC,EAAE,GAAG,CAAC;QAGZ,KAAK,EAAE,MAAM,CAAC;QAGd,QAAQ,CAAC,EAAE,OAAO,CAAC;QAInB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;QAGzC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;KAC7B;IAIH,QAAQ,CAAC,MAAM,IAAI,WAAW;IAG9B,IAAI,CAAC,GAAG,EAAE,WAAW;IAKrB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,GAAG,IAAI;IAKvC,QAAQ,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,GAAG,IAAI;IAQnC,KAAK,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG;CAGvB;AAGD,qBAAa,SAAU,SAAQ,KAAK;IAClC,MAAM;CAQP;AAMD,qBAAa,WAAY,SAAQ,KAAK;IACpC,MAAM;CAWP"}
|