@milkdown/plugin-slash 5.4.0 → 6.0.0-next.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/lib/{src/config.d.ts → config.d.ts} +1 -0
- package/lib/config.d.ts.map +1 -0
- package/lib/index.d.ts +25 -1
- package/lib/index.d.ts.map +1 -0
- package/lib/index.es.js +104 -86
- package/lib/index.es.js.map +1 -1
- package/lib/{src/item.d.ts → item.d.ts} +0 -0
- package/lib/item.d.ts.map +1 -0
- package/lib/{src/prose-plugin → prose-plugin}/dropdown.d.ts +0 -0
- package/lib/prose-plugin/dropdown.d.ts.map +1 -0
- package/lib/{src/prose-plugin → prose-plugin}/index.d.ts +0 -0
- package/lib/prose-plugin/index.d.ts.map +1 -0
- package/lib/{src/prose-plugin → prose-plugin}/input.d.ts +0 -0
- package/lib/prose-plugin/input.d.ts.map +1 -0
- package/lib/{src/prose-plugin → prose-plugin}/props.d.ts +0 -0
- package/lib/prose-plugin/props.d.ts.map +1 -0
- package/lib/{src/prose-plugin → prose-plugin}/status.d.ts +0 -0
- package/lib/prose-plugin/status.d.ts.map +1 -0
- package/lib/{src/prose-plugin → prose-plugin}/view.d.ts +0 -0
- package/lib/prose-plugin/view.d.ts.map +1 -0
- package/lib/style.d.ts +3 -0
- package/lib/style.d.ts.map +1 -0
- package/lib/{src/utility.d.ts → utility.d.ts} +2 -2
- package/lib/utility.d.ts.map +1 -0
- package/package.json +33 -11
- package/src/config.ts +23 -34
- package/src/prose-plugin/dropdown.ts +13 -9
- package/src/prose-plugin/input.ts +13 -7
- package/src/prose-plugin/props.ts +28 -22
- package/src/prose-plugin/view.ts +1 -1
- package/src/style.ts +30 -20
- package/src/utility.ts +20 -8
- package/lib/src/config.d.ts.map +0 -1
- package/lib/src/index.d.ts +0 -25
- package/lib/src/index.d.ts.map +0 -1
- package/lib/src/item.d.ts.map +0 -1
- package/lib/src/prose-plugin/dropdown.d.ts.map +0 -1
- package/lib/src/prose-plugin/index.d.ts.map +0 -1
- package/lib/src/prose-plugin/input.d.ts.map +0 -1
- package/lib/src/prose-plugin/props.d.ts.map +0 -1
- package/lib/src/prose-plugin/status.d.ts.map +0 -1
- package/lib/src/prose-plugin/view.d.ts.map +0 -1
- package/lib/src/style.d.ts +0 -3
- package/lib/src/style.d.ts.map +0 -1
- package/lib/src/utility.d.ts.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ThemeManager } from '@milkdown/core';
|
|
2
2
|
import type { Icon } from '@milkdown/design-system';
|
|
3
3
|
import type { Command, Node } from '@milkdown/prose';
|
|
4
4
|
import type { Utils } from '@milkdown/utils';
|
|
@@ -6,7 +6,7 @@ export declare const createDropdown: (utils: Utils) => HTMLDivElement;
|
|
|
6
6
|
declare type ItemOptions = {
|
|
7
7
|
textClassName: string;
|
|
8
8
|
};
|
|
9
|
-
export declare const createDropdownItem: (
|
|
9
|
+
export declare const createDropdownItem: (themeManager: ThemeManager, text: string, icon: Icon, options?: Partial<ItemOptions> | undefined) => HTMLDivElement;
|
|
10
10
|
export declare const getDepth: (node: Node) => number;
|
|
11
11
|
export declare const cleanUpAndCreateNode: (createCommand: () => void) => Command;
|
|
12
12
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utility.d.ts","sourceRoot":"","sources":["../src/utility.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAI7C,eAAO,MAAM,cAAc,UAAW,KAAK,mBAe1C,CAAC;AAEF,aAAK,WAAW,GAAG;IACf,aAAa,EAAE,MAAM,CAAC;CACzB,CAAC;AACF,eAAO,MAAM,kBAAkB,iBACb,YAAY,QACpB,MAAM,QACN,IAAI,+DAwBb,CAAC;AAEF,eAAO,MAAM,QAAQ,SAAU,IAAI,WASlC,CAAC;AAUF,eAAO,MAAM,oBAAoB,kBACb,MAAM,IAAI,KAAG,OAO5B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milkdown/plugin-slash",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0-next.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./lib/index.es.js",
|
|
6
6
|
"types": "./lib/index.d.ts",
|
|
@@ -15,26 +15,48 @@
|
|
|
15
15
|
"milkdown plugin"
|
|
16
16
|
],
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@milkdown/core": "
|
|
19
|
-
"@milkdown/prose": "
|
|
20
|
-
"@milkdown/design-system": "
|
|
21
|
-
"@milkdown/preset-gfm": "5.4.0",
|
|
22
|
-
"@milkdown/plugin-upload": "5.4.0"
|
|
18
|
+
"@milkdown/core": "6.0.0-next.0",
|
|
19
|
+
"@milkdown/prose": "6.0.0-next.0",
|
|
20
|
+
"@milkdown/design-system": "6.0.0-next.0"
|
|
23
21
|
},
|
|
24
22
|
"peerDependencies": {
|
|
25
|
-
"@milkdown/core": "^
|
|
26
|
-
"@milkdown/prose": "^
|
|
23
|
+
"@milkdown/core": "^6.0.0-next.0",
|
|
24
|
+
"@milkdown/prose": "^6.0.0-next.0"
|
|
27
25
|
},
|
|
28
26
|
"dependencies": {
|
|
29
|
-
"@milkdown/utils": "
|
|
27
|
+
"@milkdown/utils": "6.0.0-next.0",
|
|
30
28
|
"smooth-scroll-into-view-if-needed": "^1.1.32",
|
|
31
29
|
"tslib": "^2.3.1"
|
|
32
30
|
},
|
|
31
|
+
"nx": {
|
|
32
|
+
"targets": {
|
|
33
|
+
"build": {
|
|
34
|
+
"outputs": [
|
|
35
|
+
"packages/plugin-slash/lib"
|
|
36
|
+
],
|
|
37
|
+
"dependsOn": [
|
|
38
|
+
{
|
|
39
|
+
"target": "build",
|
|
40
|
+
"projects": "dependencies"
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
},
|
|
44
|
+
"tsc": {
|
|
45
|
+
"outputs": [],
|
|
46
|
+
"dependsOn": [
|
|
47
|
+
{
|
|
48
|
+
"target": "build",
|
|
49
|
+
"projects": "dependencies"
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
},
|
|
33
55
|
"scripts": {
|
|
34
|
-
"start": "vite build --watch",
|
|
56
|
+
"start": "concurrently -n es,dts \"vite build --watch\" \"tsc --emitDeclarationOnly --watch\"",
|
|
35
57
|
"test": "vitest",
|
|
36
58
|
"tsc": "tsc --noEmit",
|
|
37
|
-
"build": "vite build"
|
|
59
|
+
"build": "vite build && tsc --emitDeclarationOnly"
|
|
38
60
|
},
|
|
39
61
|
"readme": "# @milkdown/plugin-slash\n\nSlash plugin for [milkdown](https://saul-mirone.github.io/milkdown/).\nAdd support for slash commands.\n\n# Example Usage\n\n```typescript\nimport { Editor } from '@milkdown/core';\nimport { commonmark } from '@milkdown/preset-commonmark';\nimport { nord } from '@milkdown/theme-nord';\n\nimport { slash } from '@milkdown/plugin-slash';\n\nEditor.make().use(nord).use(commonmark).use(slash).create();\n```\n\n# Options\n\n## config\n\nConfigure the slash plugin placeholders & items with custom status builder.\n\nExample:\n\n```typescript\nimport { slashPlugin, slash, createDropdownItem, defaultActions } from '@milkdown/plugin-slash';\nimport { themeToolCtx, commandsCtx } from '@milkdown/core';\n\nEditor.make().use(\n slash.configure(slashPlugin, {\n config: (ctx) => {\n // Get default slash plugin items\n const actions = defaultActions(ctx);\n\n // Define a status builder\n return ({ isTopLevel, content, parentNode }) => {\n // You can only show something at root level\n if (!isTopLevel) return null;\n\n // Empty content ? Set your custom empty placeholder !\n if (!content) {\n return { placeholder: 'Type / to use the slash commands...' };\n }\n\n // Define the placeholder & actions (dropdown items) you want to display depending on content\n if (content.startsWith('/')) {\n // Add some actions depending on your content's parent node\n if (parentNode.type.name === 'customNode') {\n actions.push({\n id: 'custom',\n dom: createDropdownItem(ctx.get(themeToolCtx), 'Custom', 'h1'),\n command: () => ctx.get(commandsCtx).call(/* Add custom command here */),\n keyword: ['custom'],\n enable: () => true,\n });\n }\n\n return content === '/'\n ? {\n placeholder: 'Type to filter...',\n actions,\n }\n : {\n actions: actions.filter(({ keyword }) =>\n keyword.some((key) => key.includes(content.slice(1).toLocaleLowerCase())),\n ),\n };\n }\n };\n },\n }),\n);\n```\n\n# License\n\nMilkdown is open sourced software licensed under [MIT license](https://github.com/Saul-Mirone/milkdown/blob/main/LICENSE).\n"
|
|
40
62
|
}
|
package/src/config.ts
CHANGED
|
@@ -1,16 +1,5 @@
|
|
|
1
1
|
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
-
import { commandsCtx, Ctx, schemaCtx,
|
|
3
|
-
import {
|
|
4
|
-
InsertHr,
|
|
5
|
-
InsertImage,
|
|
6
|
-
InsertTable,
|
|
7
|
-
TurnIntoCodeFence,
|
|
8
|
-
TurnIntoHeading,
|
|
9
|
-
TurnIntoTaskList,
|
|
10
|
-
WrapInBlockquote,
|
|
11
|
-
WrapInBulletList,
|
|
12
|
-
WrapInOrderedList,
|
|
13
|
-
} from '@milkdown/preset-gfm';
|
|
2
|
+
import { commandsCtx, Ctx, schemaCtx, themeManagerCtx } from '@milkdown/core';
|
|
14
3
|
import { EditorState, Node } from '@milkdown/prose';
|
|
15
4
|
|
|
16
5
|
import { WrappedAction } from './item';
|
|
@@ -39,78 +28,78 @@ export const defaultActions = (ctx: Ctx, input = '/'): WrappedAction[] => {
|
|
|
39
28
|
const actions: Array<WrappedAction & { keyword: string[]; typeName: string }> = [
|
|
40
29
|
{
|
|
41
30
|
id: 'h1',
|
|
42
|
-
dom: createDropdownItem(ctx.get(
|
|
43
|
-
command: () => ctx.get(commandsCtx).
|
|
31
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Large Heading', 'h1'),
|
|
32
|
+
command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 1),
|
|
44
33
|
keyword: ['h1', 'large heading'],
|
|
45
34
|
typeName: 'heading',
|
|
46
35
|
},
|
|
47
36
|
{
|
|
48
37
|
id: 'h2',
|
|
49
|
-
dom: createDropdownItem(ctx.get(
|
|
50
|
-
command: () => ctx.get(commandsCtx).
|
|
38
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Medium Heading', 'h2'),
|
|
39
|
+
command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 2),
|
|
51
40
|
keyword: ['h2', 'medium heading'],
|
|
52
41
|
typeName: 'heading',
|
|
53
42
|
},
|
|
54
43
|
{
|
|
55
44
|
id: 'h3',
|
|
56
|
-
dom: createDropdownItem(ctx.get(
|
|
57
|
-
command: () => ctx.get(commandsCtx).
|
|
45
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Small Heading', 'h3'),
|
|
46
|
+
command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 3),
|
|
58
47
|
keyword: ['h3', 'small heading'],
|
|
59
48
|
typeName: 'heading',
|
|
60
49
|
},
|
|
61
50
|
{
|
|
62
51
|
id: 'bulletList',
|
|
63
|
-
dom: createDropdownItem(ctx.get(
|
|
64
|
-
command: () => ctx.get(commandsCtx).
|
|
52
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Bullet List', 'bulletList'),
|
|
53
|
+
command: () => ctx.get(commandsCtx).callByName('WrapInBulletList'),
|
|
65
54
|
keyword: ['bullet list', 'ul'],
|
|
66
55
|
typeName: 'bullet_list',
|
|
67
56
|
},
|
|
68
57
|
{
|
|
69
58
|
id: 'orderedList',
|
|
70
|
-
dom: createDropdownItem(ctx.get(
|
|
71
|
-
command: () => ctx.get(commandsCtx).
|
|
59
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Ordered List', 'orderedList'),
|
|
60
|
+
command: () => ctx.get(commandsCtx).callByName('WrapInOrderedList'),
|
|
72
61
|
keyword: ['ordered list', 'ol'],
|
|
73
62
|
typeName: 'ordered_list',
|
|
74
63
|
},
|
|
75
64
|
{
|
|
76
65
|
id: 'taskList',
|
|
77
|
-
dom: createDropdownItem(ctx.get(
|
|
78
|
-
command: () => ctx.get(commandsCtx).
|
|
66
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Task List', 'taskList'),
|
|
67
|
+
command: () => ctx.get(commandsCtx).callByName('TurnIntoTaskList'),
|
|
79
68
|
keyword: ['task list', 'task'],
|
|
80
69
|
typeName: 'task_list_item',
|
|
81
70
|
},
|
|
82
71
|
{
|
|
83
72
|
id: 'image',
|
|
84
|
-
dom: createDropdownItem(ctx.get(
|
|
85
|
-
command: () => ctx.get(commandsCtx).
|
|
73
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Image', 'image'),
|
|
74
|
+
command: () => ctx.get(commandsCtx).callByName('InsertImage'),
|
|
86
75
|
keyword: ['image'],
|
|
87
76
|
typeName: 'image',
|
|
88
77
|
},
|
|
89
78
|
{
|
|
90
79
|
id: 'blockquote',
|
|
91
|
-
dom: createDropdownItem(ctx.get(
|
|
92
|
-
command: () => ctx.get(commandsCtx).
|
|
80
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Quote', 'quote'),
|
|
81
|
+
command: () => ctx.get(commandsCtx).callByName('WrapInBlockquote'),
|
|
93
82
|
keyword: ['quote', 'blockquote'],
|
|
94
83
|
typeName: 'blockquote',
|
|
95
84
|
},
|
|
96
85
|
{
|
|
97
86
|
id: 'table',
|
|
98
|
-
dom: createDropdownItem(ctx.get(
|
|
99
|
-
command: () => ctx.get(commandsCtx).
|
|
87
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Table', 'table'),
|
|
88
|
+
command: () => ctx.get(commandsCtx).callByName('InsertTable'),
|
|
100
89
|
keyword: ['table'],
|
|
101
90
|
typeName: 'table',
|
|
102
91
|
},
|
|
103
92
|
{
|
|
104
93
|
id: 'code',
|
|
105
|
-
dom: createDropdownItem(ctx.get(
|
|
106
|
-
command: () => ctx.get(commandsCtx).
|
|
94
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Code Fence', 'code'),
|
|
95
|
+
command: () => ctx.get(commandsCtx).callByName('TurnIntoCodeFence'),
|
|
107
96
|
keyword: ['code'],
|
|
108
97
|
typeName: 'fence',
|
|
109
98
|
},
|
|
110
99
|
{
|
|
111
100
|
id: 'divider',
|
|
112
|
-
dom: createDropdownItem(ctx.get(
|
|
113
|
-
command: () => ctx.get(commandsCtx).
|
|
101
|
+
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Divide Line', 'divider'),
|
|
102
|
+
command: () => ctx.get(commandsCtx).callByName('InsertHr'),
|
|
114
103
|
keyword: ['divider', 'hr'],
|
|
115
104
|
typeName: 'hr',
|
|
116
105
|
},
|
|
@@ -21,8 +21,9 @@ export const renderDropdown = (status: Status, dropdownElement: HTMLElement, lis
|
|
|
21
21
|
child.removeEventListener('mouseleave', listeners.mouseLeave);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
while (dropdownElement.firstChild) {
|
|
25
|
+
dropdownElement.firstChild.remove();
|
|
26
|
+
}
|
|
26
27
|
|
|
27
28
|
actions.forEach(({ $ }) => {
|
|
28
29
|
$.classList.remove('active');
|
|
@@ -33,14 +34,17 @@ export const renderDropdown = (status: Status, dropdownElement: HTMLElement, lis
|
|
|
33
34
|
|
|
34
35
|
dropdownElement.classList.remove('hide');
|
|
35
36
|
|
|
36
|
-
actions[0]
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
const first$ = actions[0];
|
|
38
|
+
if (first$) {
|
|
39
|
+
first$.$.classList.add('active');
|
|
40
|
+
requestAnimationFrame(() => {
|
|
41
|
+
scrollIntoView(first$.$, {
|
|
42
|
+
scrollMode: 'if-needed',
|
|
43
|
+
block: 'nearest',
|
|
44
|
+
inline: 'nearest',
|
|
45
|
+
});
|
|
42
46
|
});
|
|
43
|
-
}
|
|
47
|
+
}
|
|
44
48
|
|
|
45
49
|
return true;
|
|
46
50
|
};
|
|
@@ -28,8 +28,9 @@ export const handleMouseEnter = (status: Status, mouseManager: MouseManager) =>
|
|
|
28
28
|
if (mouseManager.isLock()) return;
|
|
29
29
|
const { actions } = status.get();
|
|
30
30
|
const active = actions.findIndex((x) => x.$.classList.contains('active'));
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
const active$ = actions[active];
|
|
32
|
+
if (active$ && active >= 0) {
|
|
33
|
+
active$.$.classList.remove('active');
|
|
33
34
|
}
|
|
34
35
|
const { target } = e;
|
|
35
36
|
if (!(target instanceof HTMLElement)) return;
|
|
@@ -86,9 +87,12 @@ export const handleKeydown =
|
|
|
86
87
|
if (active < 0) active = 0;
|
|
87
88
|
|
|
88
89
|
const moveActive = (next: number) => {
|
|
89
|
-
actions[active]
|
|
90
|
-
actions[next]
|
|
91
|
-
|
|
90
|
+
const active$ = actions[active];
|
|
91
|
+
const next$ = actions[next];
|
|
92
|
+
if (!active$ || !next$) return;
|
|
93
|
+
active$.$.classList.remove('active');
|
|
94
|
+
next$.$.classList.add('active');
|
|
95
|
+
scrollIntoView(next$.$, {
|
|
92
96
|
scrollMode: 'if-needed',
|
|
93
97
|
block: 'nearest',
|
|
94
98
|
inline: 'nearest',
|
|
@@ -117,6 +121,8 @@ export const handleKeydown =
|
|
|
117
121
|
return;
|
|
118
122
|
}
|
|
119
123
|
|
|
120
|
-
actions[active]
|
|
121
|
-
|
|
124
|
+
const active$ = actions[active];
|
|
125
|
+
if (!active$) return;
|
|
126
|
+
active$.command(view.state, view.dispatch, view);
|
|
127
|
+
active$.$.classList.remove('active');
|
|
122
128
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
-
import { Emotion,
|
|
3
|
-
import { key as uploadKey } from '@milkdown/plugin-upload';
|
|
2
|
+
import { Color, Emotion, ThemeColor, ThemeFont, ThemeManager } from '@milkdown/core';
|
|
4
3
|
import { Decoration, DecorationSet, EditorState, EditorView, findParentNode } from '@milkdown/prose';
|
|
5
4
|
import { Utils } from '@milkdown/utils';
|
|
6
5
|
|
|
@@ -8,31 +7,33 @@ import type { Status } from './status';
|
|
|
8
7
|
|
|
9
8
|
export type Props = ReturnType<typeof createProps>;
|
|
10
9
|
|
|
11
|
-
const createEmptyStyle = (
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
position: absolute;
|
|
15
|
-
cursor: text;
|
|
16
|
-
font-family: ${font.typography};
|
|
17
|
-
font-size: 0.875rem;
|
|
18
|
-
color: ${palette('neutral', 0.6)};
|
|
19
|
-
content: attr(data-text);
|
|
20
|
-
height: 100%;
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
}
|
|
24
|
-
`;
|
|
10
|
+
const createEmptyStyle = (themeManager: ThemeManager, { css }: Emotion) => {
|
|
11
|
+
const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
|
|
12
|
+
const typography = themeManager.get(ThemeFont, 'typography');
|
|
25
13
|
|
|
26
|
-
|
|
14
|
+
return css`
|
|
15
|
+
position: relative;
|
|
16
|
+
&::before {
|
|
17
|
+
position: absolute;
|
|
18
|
+
cursor: text;
|
|
19
|
+
font-family: ${typography};
|
|
20
|
+
font-size: 0.875em;
|
|
21
|
+
color: ${palette('neutral', 0.6)};
|
|
22
|
+
content: attr(data-text);
|
|
23
|
+
height: 100%;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
const createSlashStyle = (_: ThemeManager, { css }: Emotion) => css`
|
|
27
31
|
&::before {
|
|
28
|
-
left: 0.
|
|
32
|
+
left: 0.5em;
|
|
29
33
|
}
|
|
30
34
|
`;
|
|
31
35
|
|
|
32
36
|
export const createProps = (status: Status, utils: Utils) => {
|
|
33
|
-
const emptyStyle = utils.getStyle(createEmptyStyle);
|
|
34
|
-
const slashStyle = utils.getStyle(createSlashStyle);
|
|
35
|
-
|
|
36
37
|
return {
|
|
37
38
|
handleKeyDown: (_: EditorView, event: Event) => {
|
|
38
39
|
if (status.isEmpty()) {
|
|
@@ -50,7 +51,9 @@ export const createProps = (status: Status, utils: Utils) => {
|
|
|
50
51
|
},
|
|
51
52
|
decorations: (state: EditorState) => {
|
|
52
53
|
const paragraph = findParentNode(({ type }) => type.name === 'paragraph')(state.selection);
|
|
53
|
-
const uploadPlugin = state.plugins.find(
|
|
54
|
+
const uploadPlugin = state.plugins.find(
|
|
55
|
+
(x) => (x as unknown as { key: string }).key === 'MILKDOWN_PLUGIN_UPLOAD$',
|
|
56
|
+
);
|
|
54
57
|
const decorations: DecorationSet = uploadPlugin?.getState(state);
|
|
55
58
|
if (decorations != null && decorations.find(state.selection.from, state.selection.to).length > 0) {
|
|
56
59
|
status.clear();
|
|
@@ -88,6 +91,9 @@ export const createProps = (status: Status, utils: Utils) => {
|
|
|
88
91
|
]);
|
|
89
92
|
};
|
|
90
93
|
|
|
94
|
+
const emptyStyle = utils.getStyle(createEmptyStyle);
|
|
95
|
+
const slashStyle = utils.getStyle(createSlashStyle);
|
|
96
|
+
|
|
91
97
|
if (actions.length) {
|
|
92
98
|
return createDecoration(placeholder, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);
|
|
93
99
|
}
|
package/src/prose-plugin/view.ts
CHANGED
|
@@ -28,7 +28,7 @@ const calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {
|
|
|
28
28
|
left = 0;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
if (
|
|
31
|
+
if (parent.height + parent.top - selected.bottom < target.height) {
|
|
32
32
|
top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
|
|
33
33
|
}
|
|
34
34
|
return [top, left];
|
package/src/style.ts
CHANGED
|
@@ -1,19 +1,30 @@
|
|
|
1
1
|
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Color,
|
|
4
|
+
Emotion,
|
|
5
|
+
ThemeBorder,
|
|
6
|
+
ThemeColor,
|
|
7
|
+
ThemeFont,
|
|
8
|
+
ThemeManager,
|
|
9
|
+
ThemeScrollbar,
|
|
10
|
+
ThemeShadow,
|
|
11
|
+
ThemeSize,
|
|
12
|
+
} from '@milkdown/core';
|
|
3
13
|
|
|
4
|
-
const itemStyle = (
|
|
14
|
+
const itemStyle = (themeManager: ThemeManager, { css }: Emotion) => {
|
|
15
|
+
const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
|
|
5
16
|
return css`
|
|
6
17
|
.slash-dropdown-item {
|
|
7
18
|
display: flex;
|
|
8
|
-
gap:
|
|
9
|
-
height:
|
|
10
|
-
padding: 0
|
|
19
|
+
gap: 2em;
|
|
20
|
+
height: 3.4286em;
|
|
21
|
+
padding: 0 1em;
|
|
11
22
|
align-items: center;
|
|
12
23
|
justify-content: flex-start;
|
|
13
24
|
cursor: pointer;
|
|
14
|
-
line-height:
|
|
15
|
-
font-family: ${
|
|
16
|
-
font-size: 0.
|
|
25
|
+
line-height: 3.4286em;
|
|
26
|
+
font-family: ${themeManager.get(ThemeFont, 'typography')};
|
|
27
|
+
font-size: 0.875em;
|
|
17
28
|
|
|
18
29
|
transition: all 0.2s ease-in-out;
|
|
19
30
|
|
|
@@ -37,26 +48,25 @@ const itemStyle = ({ font, palette }: ThemeTool, { css }: Emotion) => {
|
|
|
37
48
|
`;
|
|
38
49
|
};
|
|
39
50
|
|
|
40
|
-
export const injectStyle = (
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
51
|
+
export const injectStyle = (themeManager: ThemeManager, emotion: Emotion) => {
|
|
52
|
+
const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
|
|
53
|
+
|
|
54
|
+
return emotion.css`
|
|
55
|
+
width: 20.5em;
|
|
56
|
+
max-height: 20.5em;
|
|
45
57
|
overflow-y: auto;
|
|
46
|
-
${
|
|
47
|
-
border-radius: ${size.radius};
|
|
58
|
+
border-radius: ${themeManager.get(ThemeSize, 'radius')};
|
|
48
59
|
position: absolute;
|
|
49
60
|
background: ${palette('surface')};
|
|
50
61
|
|
|
51
|
-
${
|
|
62
|
+
${themeManager.get(ThemeBorder, undefined)}
|
|
63
|
+
${themeManager.get(ThemeShadow, undefined)}
|
|
64
|
+
${themeManager.get(ThemeScrollbar, undefined)}
|
|
52
65
|
|
|
53
66
|
&.hide {
|
|
54
67
|
display: none;
|
|
55
68
|
}
|
|
56
69
|
|
|
57
|
-
${
|
|
58
|
-
|
|
59
|
-
${itemStyle(themeTool, emotion)}
|
|
70
|
+
${itemStyle(themeManager, emotion)}
|
|
60
71
|
`;
|
|
61
|
-
return style;
|
|
62
72
|
};
|
package/src/utility.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
-
import
|
|
2
|
+
import { ThemeIcon, ThemeManager } from '@milkdown/core';
|
|
3
3
|
import type { Icon } from '@milkdown/design-system';
|
|
4
4
|
import type { Command, Node } from '@milkdown/prose';
|
|
5
5
|
import type { Utils } from '@milkdown/utils';
|
|
@@ -10,11 +10,13 @@ export const createDropdown = (utils: Utils) => {
|
|
|
10
10
|
const div = document.createElement('div');
|
|
11
11
|
div.setAttribute('role', 'listbox');
|
|
12
12
|
div.setAttribute('tabindex', '-1');
|
|
13
|
-
|
|
13
|
+
utils.themeManager.onFlush(() => {
|
|
14
|
+
const style = utils.getStyle(injectStyle);
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
if (style) {
|
|
17
|
+
div.classList.add(style);
|
|
18
|
+
}
|
|
19
|
+
});
|
|
18
20
|
|
|
19
21
|
div.classList.add('slash-dropdown', 'hide');
|
|
20
22
|
|
|
@@ -24,20 +26,30 @@ export const createDropdown = (utils: Utils) => {
|
|
|
24
26
|
type ItemOptions = {
|
|
25
27
|
textClassName: string;
|
|
26
28
|
};
|
|
27
|
-
export const createDropdownItem = (
|
|
29
|
+
export const createDropdownItem = (
|
|
30
|
+
themeManager: ThemeManager,
|
|
31
|
+
text: string,
|
|
32
|
+
icon: Icon,
|
|
33
|
+
options?: Partial<ItemOptions>,
|
|
34
|
+
) => {
|
|
28
35
|
const textClassName = options?.textClassName ?? 'text';
|
|
29
36
|
|
|
30
37
|
const div = document.createElement('div');
|
|
31
38
|
div.setAttribute('role', 'option');
|
|
32
39
|
div.classList.add('slash-dropdown-item');
|
|
33
40
|
|
|
34
|
-
const iconSpan =
|
|
41
|
+
// const iconSpan = themeManager.slots.icon(icon);
|
|
42
|
+
const iconSpan = themeManager.get(ThemeIcon, icon);
|
|
43
|
+
|
|
44
|
+
if (!iconSpan) {
|
|
45
|
+
throw new Error('icon not found');
|
|
46
|
+
}
|
|
35
47
|
|
|
36
48
|
const textSpan = document.createElement('span');
|
|
37
49
|
textSpan.textContent = text;
|
|
38
50
|
textSpan.className = textClassName;
|
|
39
51
|
|
|
40
|
-
div.appendChild(iconSpan);
|
|
52
|
+
div.appendChild(iconSpan.dom);
|
|
41
53
|
div.appendChild(textSpan);
|
|
42
54
|
|
|
43
55
|
return div;
|
package/lib/src/config.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["config.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,GAAG,EAA2B,MAAM,gBAAgB,CAAC;AAY3E,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGvC,aAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAExC,oBAAY,YAAY,GAAG;IACvB,WAAW,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;CACvC,CAAC;AAEF,oBAAY,yBAAyB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,IAAI,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,oBAAY,mBAAmB,GAAG,CAAC,MAAM,EAAE,yBAAyB,KAAK,QAAQ,CAAC,YAAY,CAAC,CAAC;AAEhG,oBAAY,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,mBAAmB,CAAC;AAEvD,eAAO,MAAM,cAAc,QAAS,GAAG,qBAAgB,aAAa,EAuFnE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAqB3B,CAAC"}
|
package/lib/src/index.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { AtomList } from '@milkdown/utils';
|
|
2
|
-
import type { Config } from './config';
|
|
3
|
-
export type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';
|
|
4
|
-
export { defaultActions, defaultConfig } from './config';
|
|
5
|
-
export { createDropdownItem } from './utility';
|
|
6
|
-
export declare type Options = {
|
|
7
|
-
config: Config;
|
|
8
|
-
};
|
|
9
|
-
export declare const slashPlugin: import("@milkdown/utils/lib/src/types").WithExtend<string, Options, {
|
|
10
|
-
[x: string]: import("prosemirror-model").NodeType<any>;
|
|
11
|
-
} & {
|
|
12
|
-
[x: string]: import("prosemirror-model").MarkType<any>;
|
|
13
|
-
}, {
|
|
14
|
-
schema?: ((ctx: import("@milkdown/core").Ctx) => {
|
|
15
|
-
node?: Record<string, import("@milkdown/core").NodeSchema> | undefined;
|
|
16
|
-
mark?: Record<string, import("@milkdown/core").MarkSchema> | undefined;
|
|
17
|
-
}) | undefined;
|
|
18
|
-
view?: ((ctx: import("@milkdown/core").Ctx) => Partial<{
|
|
19
|
-
[x: string]: import("@milkdown/prose").NodeViewFactory;
|
|
20
|
-
} & {
|
|
21
|
-
[x: string]: import("@milkdown/prose").MarkViewFactory;
|
|
22
|
-
}>) | undefined;
|
|
23
|
-
}>;
|
|
24
|
-
export declare const slash: AtomList<import("@milkdown/utils/lib/src/types").Metadata<import("@milkdown/utils/lib/src/types").GetPlugin<string, Options>> & import("@milkdown/core").MilkdownPlugin>;
|
|
25
|
-
//# sourceMappingURL=index.d.ts.map
|
package/lib/src/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAgB,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIvC,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,oBAAY,OAAO,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAYtB,CAAC;AAEH,eAAO,MAAM,KAAK,0KAAmC,CAAC"}
|
package/lib/src/item.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["item.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAI/C,oBAAY,MAAM,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,WAAW,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,GAAG,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,aAAa,KAAG,MAItD,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["dropdown.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,aAAK,SAAS,GAAG;IACb,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,cAAc,WAAY,MAAM,mBAAmB,WAAW,aAAa,SAAS,KAAG,OAmCnG,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAa,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,IAAI,CAAC;AAK9C,eAAO,MAAM,GAAG,0BAA0B,CAAC;AAE3C,eAAO,MAAM,iBAAiB,UAAW,KAAK,WAAW,mBAAmB,qBAQ3E,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,eAAO,MAAM,kBAAkB;;;;CAY9B,CAAC;AACF,oBAAY,YAAY,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAEjE,eAAO,MAAM,eAAe,iBAAkB,YAAY,eAEzD,CAAC;AAEF,eAAO,MAAM,gBAAgB,WAAY,MAAM,gBAAgB,YAAY,SAAS,UAAU,SAU7F,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAa,UAAU,SAInD,CAAC;AAEF,eAAO,MAAM,WAAW,WACX,MAAM,QAAQ,UAAU,mBAAmB,WAAW,SAC3D,KAAK,KAAG,IAyBX,CAAC;AAEN,eAAO,MAAM,aAAa,WACb,MAAM,QAAQ,UAAU,mBAAmB,WAAW,gBAAgB,YAAY,SAAS,KAAK,SA+CxG,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["props.ts"],"names":[],"mappings":"AAGA,OAAO,EAAc,aAAa,EAAE,WAAW,EAAE,UAAU,EAAkB,MAAM,iBAAiB,CAAC;AACrG,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,oBAAY,KAAK,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAuBnD,eAAO,MAAM,WAAW,WAAY,MAAM,SAAS,KAAK;uBAK7B,UAAU,SAAS,KAAK;yBActB,WAAW;CA+CvC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["status.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,IAAI,CAAC;AACpE,OAAO,EAAE,MAAM,EAAmB,MAAM,SAAS,CAAC;AAElD,oBAAY,SAAS,GAAG;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AASF,oBAAY,MAAM,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AAErD,eAAO,MAAM,YAAY,YAAa,mBAAmB;;;4BASzB,yBAAyB;;CAQxD,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["view.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAYxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAuBlC,eAAO,MAAM,UAAU,WAAY,MAAM,QAAQ,UAAU,SAAS,KAAK;;;;mBAmBlD,UAAU;;CAkBhC,CAAC"}
|
package/lib/src/style.d.ts
DELETED
package/lib/src/style.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAsCpD,eAAO,MAAM,WAAW,cAAe,SAAS,WAAW,OAAO,WAsBjE,CAAC"}
|
package/lib/src/utility.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utility.d.ts","sourceRoot":"","sources":["utility.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAI7C,eAAO,MAAM,cAAc,UAAW,KAAK,mBAa1C,CAAC;AAEF,aAAK,WAAW,GAAG;IACf,aAAa,EAAE,MAAM,CAAC;CACzB,CAAC;AACF,eAAO,MAAM,kBAAkB,cAAe,SAAS,QAAQ,MAAM,QAAQ,IAAI,+DAiBhF,CAAC;AAEF,eAAO,MAAM,QAAQ,SAAU,IAAI,WASlC,CAAC;AAUF,eAAO,MAAM,oBAAoB,kBACb,MAAM,IAAI,KAAG,OAO5B,CAAC"}
|