@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.
Files changed (45) hide show
  1. package/lib/{src/config.d.ts → config.d.ts} +1 -0
  2. package/lib/config.d.ts.map +1 -0
  3. package/lib/index.d.ts +25 -1
  4. package/lib/index.d.ts.map +1 -0
  5. package/lib/index.es.js +104 -86
  6. package/lib/index.es.js.map +1 -1
  7. package/lib/{src/item.d.ts → item.d.ts} +0 -0
  8. package/lib/item.d.ts.map +1 -0
  9. package/lib/{src/prose-plugin → prose-plugin}/dropdown.d.ts +0 -0
  10. package/lib/prose-plugin/dropdown.d.ts.map +1 -0
  11. package/lib/{src/prose-plugin → prose-plugin}/index.d.ts +0 -0
  12. package/lib/prose-plugin/index.d.ts.map +1 -0
  13. package/lib/{src/prose-plugin → prose-plugin}/input.d.ts +0 -0
  14. package/lib/prose-plugin/input.d.ts.map +1 -0
  15. package/lib/{src/prose-plugin → prose-plugin}/props.d.ts +0 -0
  16. package/lib/prose-plugin/props.d.ts.map +1 -0
  17. package/lib/{src/prose-plugin → prose-plugin}/status.d.ts +0 -0
  18. package/lib/prose-plugin/status.d.ts.map +1 -0
  19. package/lib/{src/prose-plugin → prose-plugin}/view.d.ts +0 -0
  20. package/lib/prose-plugin/view.d.ts.map +1 -0
  21. package/lib/style.d.ts +3 -0
  22. package/lib/style.d.ts.map +1 -0
  23. package/lib/{src/utility.d.ts → utility.d.ts} +2 -2
  24. package/lib/utility.d.ts.map +1 -0
  25. package/package.json +33 -11
  26. package/src/config.ts +23 -34
  27. package/src/prose-plugin/dropdown.ts +13 -9
  28. package/src/prose-plugin/input.ts +13 -7
  29. package/src/prose-plugin/props.ts +28 -22
  30. package/src/prose-plugin/view.ts +1 -1
  31. package/src/style.ts +30 -20
  32. package/src/utility.ts +20 -8
  33. package/lib/src/config.d.ts.map +0 -1
  34. package/lib/src/index.d.ts +0 -25
  35. package/lib/src/index.d.ts.map +0 -1
  36. package/lib/src/item.d.ts.map +0 -1
  37. package/lib/src/prose-plugin/dropdown.d.ts.map +0 -1
  38. package/lib/src/prose-plugin/index.d.ts.map +0 -1
  39. package/lib/src/prose-plugin/input.d.ts.map +0 -1
  40. package/lib/src/prose-plugin/props.d.ts.map +0 -1
  41. package/lib/src/prose-plugin/status.d.ts.map +0 -1
  42. package/lib/src/prose-plugin/view.d.ts.map +0 -1
  43. package/lib/src/style.d.ts +0 -3
  44. package/lib/src/style.d.ts.map +0 -1
  45. package/lib/src/utility.d.ts.map +0 -1
@@ -1,4 +1,4 @@
1
- import type { ThemeTool } from '@milkdown/core';
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: (themeTool: ThemeTool, text: string, icon: Icon, options?: Partial<ItemOptions> | undefined) => HTMLDivElement;
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": "5.4.0",
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": "5.4.0",
19
- "@milkdown/prose": "5.4.0",
20
- "@milkdown/design-system": "5.4.0",
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": "^5.4.0",
26
- "@milkdown/prose": "^5.4.0"
23
+ "@milkdown/core": "^6.0.0-next.0",
24
+ "@milkdown/prose": "^6.0.0-next.0"
27
25
  },
28
26
  "dependencies": {
29
- "@milkdown/utils": "5.4.0",
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, themeToolCtx } from '@milkdown/core';
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(themeToolCtx), 'Large Heading', 'h1'),
43
- command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 1),
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(themeToolCtx), 'Medium Heading', 'h2'),
50
- command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 2),
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(themeToolCtx), 'Small Heading', 'h3'),
57
- command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 3),
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(themeToolCtx), 'Bullet List', 'bulletList'),
64
- command: () => ctx.get(commandsCtx).call(WrapInBulletList),
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(themeToolCtx), 'Ordered List', 'orderedList'),
71
- command: () => ctx.get(commandsCtx).call(WrapInOrderedList),
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(themeToolCtx), 'Task List', 'taskList'),
78
- command: () => ctx.get(commandsCtx).call(TurnIntoTaskList),
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(themeToolCtx), 'Image', 'image'),
85
- command: () => ctx.get(commandsCtx).call(InsertImage),
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(themeToolCtx), 'Quote', 'quote'),
92
- command: () => ctx.get(commandsCtx).call(WrapInBlockquote),
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(themeToolCtx), 'Table', 'table'),
99
- command: () => ctx.get(commandsCtx).call(InsertTable),
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(themeToolCtx), 'Code Fence', 'code'),
106
- command: () => ctx.get(commandsCtx).call(TurnIntoCodeFence),
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(themeToolCtx), 'Divide Line', 'divider'),
113
- command: () => ctx.get(commandsCtx).call(InsertHr),
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
- // Reset dropdownElement children
25
- dropdownElement.textContent = '';
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].$.classList.add('active');
37
- requestAnimationFrame(() => {
38
- scrollIntoView(actions[0].$, {
39
- scrollMode: 'if-needed',
40
- block: 'nearest',
41
- inline: 'nearest',
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
- if (active >= 0) {
32
- actions[active].$.classList.remove('active');
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].$.classList.remove('active');
90
- actions[next].$.classList.add('active');
91
- scrollIntoView(actions[next].$, {
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].command(view.state, view.dispatch, view);
121
- actions[active].$.classList.remove('active');
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, ThemeTool } from '@milkdown/core';
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 = ({ font, palette }: ThemeTool, { css }: Emotion) => css`
12
- position: relative;
13
- &::before {
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
- const createSlashStyle = (_: ThemeTool, { css }: Emotion) => css`
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.5rem;
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((x) => x.spec.key === uploadKey);
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
  }
@@ -28,7 +28,7 @@ const calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {
28
28
  left = 0;
29
29
  }
30
30
 
31
- if (window.innerHeight - selected.bottom < target.height) {
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 { Emotion, ThemeTool } from '@milkdown/core';
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 = ({ font, palette }: ThemeTool, { css }: Emotion) => {
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: 2rem;
9
- height: 3rem;
10
- padding: 0 1rem;
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: 2;
15
- font-family: ${font.typography};
16
- font-size: 0.875rem;
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 = (themeTool: ThemeTool, emotion: Emotion) => {
41
- const { mixin, size, palette } = themeTool;
42
- const style = emotion.css`
43
- width: 20.5rem;
44
- max-height: 20.5rem;
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
- ${mixin.border?.()};
47
- border-radius: ${size.radius};
58
+ border-radius: ${themeManager.get(ThemeSize, 'radius')};
48
59
  position: absolute;
49
60
  background: ${palette('surface')};
50
61
 
51
- ${mixin.shadow?.()};
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
- ${mixin.scrollbar?.()};
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 type { ThemeTool } from '@milkdown/core';
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
- const style = utils.getStyle(injectStyle);
13
+ utils.themeManager.onFlush(() => {
14
+ const style = utils.getStyle(injectStyle);
14
15
 
15
- if (style) {
16
- div.classList.add(style);
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 = (themeTool: ThemeTool, text: string, icon: Icon, options?: Partial<ItemOptions>) => {
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 = themeTool.slots.icon(icon);
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;
@@ -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"}
@@ -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
@@ -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"}
@@ -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"}
@@ -1,3 +0,0 @@
1
- import { Emotion, ThemeTool } from '@milkdown/core';
2
- export declare const injectStyle: (themeTool: ThemeTool, emotion: Emotion) => string;
3
- //# sourceMappingURL=style.d.ts.map
@@ -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"}
@@ -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"}