@milkdown/plugin-slash 6.0.0-next.0 → 6.0.0-next.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.
Files changed (18) hide show
  1. package/lib/index.d.ts +2 -3
  2. package/lib/index.d.ts.map +1 -1
  3. package/lib/index.es.js +28 -24
  4. package/lib/index.es.js.map +1 -1
  5. package/lib/prose-plugin/index.d.ts +1 -1
  6. package/lib/prose-plugin/index.d.ts.map +1 -1
  7. package/lib/prose-plugin/view.d.ts +1 -1
  8. package/lib/prose-plugin/view.d.ts.map +1 -1
  9. package/lib/style.d.ts.map +1 -1
  10. package/lib/utility.d.ts +1 -1
  11. package/lib/utility.d.ts.map +1 -1
  12. package/package.json +5 -5
  13. package/src/config.ts +11 -11
  14. package/src/index.ts +4 -5
  15. package/src/prose-plugin/index.ts +2 -2
  16. package/src/prose-plugin/view.ts +6 -3
  17. package/src/style.ts +2 -1
  18. package/src/utility.ts +2 -2
package/lib/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- import { AtomList } from '@milkdown/utils';
2
1
  import type { Config } from './config';
3
2
  export type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';
4
3
  export { defaultActions, defaultConfig } from './config';
5
4
  export { createDropdownItem } from './utility';
6
5
  export declare type Options = {
7
6
  config: Config;
7
+ className: string;
8
8
  };
9
- export declare const slashPlugin: import("@milkdown/utils/lib/types").WithExtend<string, Options, {
9
+ export declare const slash: import("@milkdown/utils/lib/types").WithExtend<string, Options, {
10
10
  [x: string]: import("prosemirror-model").NodeType<any>;
11
11
  } & {
12
12
  [x: string]: import("prosemirror-model").MarkType<any>;
@@ -21,5 +21,4 @@ export declare const slashPlugin: import("@milkdown/utils/lib/types").WithExtend
21
21
  [x: string]: import("@milkdown/prose").MarkViewFactory;
22
22
  }>) | undefined;
23
23
  }>;
24
- export declare const slash: AtomList<import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, Options>> & import("@milkdown/core").MilkdownPlugin>;
25
24
  //# sourceMappingURL=index.d.ts.map
package/lib/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/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,kKAAmC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,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;IACf,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;EAYhB,CAAC"}
package/lib/index.es.js CHANGED
@@ -13,7 +13,7 @@ var __objRest = (source, exclude) => {
13
13
  }
14
14
  return target;
15
15
  };
16
- import { createPlugin, AtomList } from "@milkdown/utils";
16
+ import { createPlugin } from "@milkdown/utils";
17
17
  import { ThemeSize, ThemeColor, ThemeBorder, ThemeShadow, ThemeScrollbar, ThemeFont, ThemeIcon, schemaCtx, themeManagerCtx, commandsCtx } from "@milkdown/core";
18
18
  import { findParentNode, DecorationSet, Decoration, calculateNodePosition, Plugin, PluginKey } from "@milkdown/prose";
19
19
  import scrollIntoView from "smooth-scroll-into-view-if-needed";
@@ -51,7 +51,8 @@ const itemStyle = (themeManager, { css }) => {
51
51
  color: ${palette("primary")};
52
52
  }
53
53
  }
54
- `;
54
+ }
55
+ `;
55
56
  };
56
57
  const injectStyle = (themeManager, emotion) => {
57
58
  const palette = (color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
@@ -74,7 +75,7 @@ const injectStyle = (themeManager, emotion) => {
74
75
  ${itemStyle(themeManager, emotion)}
75
76
  `;
76
77
  };
77
- const createDropdown = (utils) => {
78
+ const createDropdown = (utils, className) => {
78
79
  const div = document.createElement("div");
79
80
  div.setAttribute("role", "listbox");
80
81
  div.setAttribute("tabindex", "-1");
@@ -84,7 +85,7 @@ const createDropdown = (utils) => {
84
85
  div.classList.add(style);
85
86
  }
86
87
  });
87
- div.classList.add("slash-dropdown", "hide");
88
+ div.classList.add(className, "hide");
88
89
  return div;
89
90
  };
90
91
  const createDropdownItem = (themeManager, text, icon, options) => {
@@ -124,77 +125,77 @@ const defaultActions = (ctx, input = "/") => {
124
125
  {
125
126
  id: "h1",
126
127
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Large Heading", "h1"),
127
- command: () => ctx.get(commandsCtx).callByName("TurnIntoHeading", 1),
128
+ command: () => ctx.get(commandsCtx).call("TurnIntoHeading", 1),
128
129
  keyword: ["h1", "large heading"],
129
130
  typeName: "heading"
130
131
  },
131
132
  {
132
133
  id: "h2",
133
134
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Medium Heading", "h2"),
134
- command: () => ctx.get(commandsCtx).callByName("TurnIntoHeading", 2),
135
+ command: () => ctx.get(commandsCtx).call("TurnIntoHeading", 2),
135
136
  keyword: ["h2", "medium heading"],
136
137
  typeName: "heading"
137
138
  },
138
139
  {
139
140
  id: "h3",
140
141
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Small Heading", "h3"),
141
- command: () => ctx.get(commandsCtx).callByName("TurnIntoHeading", 3),
142
+ command: () => ctx.get(commandsCtx).call("TurnIntoHeading", 3),
142
143
  keyword: ["h3", "small heading"],
143
144
  typeName: "heading"
144
145
  },
145
146
  {
146
147
  id: "bulletList",
147
148
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Bullet List", "bulletList"),
148
- command: () => ctx.get(commandsCtx).callByName("WrapInBulletList"),
149
+ command: () => ctx.get(commandsCtx).call("WrapInBulletList"),
149
150
  keyword: ["bullet list", "ul"],
150
151
  typeName: "bullet_list"
151
152
  },
152
153
  {
153
154
  id: "orderedList",
154
155
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Ordered List", "orderedList"),
155
- command: () => ctx.get(commandsCtx).callByName("WrapInOrderedList"),
156
+ command: () => ctx.get(commandsCtx).call("WrapInOrderedList"),
156
157
  keyword: ["ordered list", "ol"],
157
158
  typeName: "ordered_list"
158
159
  },
159
160
  {
160
161
  id: "taskList",
161
162
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Task List", "taskList"),
162
- command: () => ctx.get(commandsCtx).callByName("TurnIntoTaskList"),
163
+ command: () => ctx.get(commandsCtx).call("TurnIntoTaskList"),
163
164
  keyword: ["task list", "task"],
164
165
  typeName: "task_list_item"
165
166
  },
166
167
  {
167
168
  id: "image",
168
169
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Image", "image"),
169
- command: () => ctx.get(commandsCtx).callByName("InsertImage"),
170
+ command: () => ctx.get(commandsCtx).call("InsertImage"),
170
171
  keyword: ["image"],
171
172
  typeName: "image"
172
173
  },
173
174
  {
174
175
  id: "blockquote",
175
176
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Quote", "quote"),
176
- command: () => ctx.get(commandsCtx).callByName("WrapInBlockquote"),
177
+ command: () => ctx.get(commandsCtx).call("WrapInBlockquote"),
177
178
  keyword: ["quote", "blockquote"],
178
179
  typeName: "blockquote"
179
180
  },
180
181
  {
181
182
  id: "table",
182
183
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Table", "table"),
183
- command: () => ctx.get(commandsCtx).callByName("InsertTable"),
184
+ command: () => ctx.get(commandsCtx).call("InsertTable"),
184
185
  keyword: ["table"],
185
186
  typeName: "table"
186
187
  },
187
188
  {
188
189
  id: "code",
189
190
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Code Fence", "code"),
190
- command: () => ctx.get(commandsCtx).callByName("TurnIntoCodeFence"),
191
+ command: () => ctx.get(commandsCtx).call("TurnIntoCodeFence"),
191
192
  keyword: ["code"],
192
193
  typeName: "fence"
193
194
  },
194
195
  {
195
196
  id: "divider",
196
197
  dom: createDropdownItem(ctx.get(themeManagerCtx), "Divide Line", "divider"),
197
- command: () => ctx.get(commandsCtx).callByName("InsertHr"),
198
+ command: () => ctx.get(commandsCtx).call("InsertHr"),
198
199
  keyword: ["divider", "hr"],
199
200
  typeName: "hr"
200
201
  }
@@ -481,16 +482,19 @@ const calculatePosition = (view, dropdownElement) => {
481
482
  left = 0;
482
483
  }
483
484
  if (parent.height + parent.top - selected.bottom < target.height) {
484
- top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
485
+ const topOffset = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
486
+ if (topOffset > 0) {
487
+ top = topOffset;
488
+ }
485
489
  }
486
490
  return [top, left];
487
491
  });
488
492
  };
489
- const createView = (status, view, utils) => {
493
+ const createView = (status, view, utils, className) => {
490
494
  const wrapper = view.dom.parentNode;
491
495
  if (!wrapper)
492
496
  return {};
493
- const dropdownElement = createDropdown(utils);
497
+ const dropdownElement = createDropdown(utils, className);
494
498
  const mouseManager = createMouseManager();
495
499
  wrapper.appendChild(dropdownElement);
496
500
  const _mouseMove = handleMouseMove(mouseManager);
@@ -520,25 +524,25 @@ const createView = (status, view, utils) => {
520
524
  };
521
525
  };
522
526
  const key = "MILKDOWN_PLUGIN_SLASH";
523
- const createSlashPlugin = (utils, builder) => {
527
+ const createSlashPlugin = (utils, builder, className) => {
524
528
  const status = createStatus(builder);
525
529
  return new Plugin({
526
530
  key: new PluginKey(key),
527
531
  props: createProps(status, utils),
528
- view: (view) => createView(status, view, utils)
532
+ view: (view) => createView(status, view, utils, className)
529
533
  });
530
534
  };
531
- const slashPlugin = createPlugin((utils, options) => {
535
+ const slash = createPlugin((utils, options) => {
532
536
  var _a;
533
537
  const slashConfig = (_a = options == null ? void 0 : options.config) != null ? _a : defaultConfig;
534
538
  return {
535
539
  prosePlugins: (_, ctx) => {
540
+ var _a2;
536
541
  const config = slashConfig(ctx);
537
- const plugin = createSlashPlugin(utils, config);
542
+ const plugin = createSlashPlugin(utils, config, (_a2 = options == null ? void 0 : options.className) != null ? _a2 : "slash-dropdown");
538
543
  return [plugin];
539
544
  }
540
545
  };
541
546
  });
542
- const slash = AtomList.create([slashPlugin()]);
543
- export { createDropdownItem, defaultActions, defaultConfig, slash, slashPlugin };
547
+ export { createDropdownItem, defaultActions, defaultConfig, slash };
544
548
  //# sourceMappingURL=index.es.js.map
package/lib/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/style.ts","../src/utility.ts","../src/config.ts","../src/prose-plugin/props.ts","../src/item.ts","../src/prose-plugin/status.ts","../src/prose-plugin/dropdown.ts","../src/prose-plugin/input.ts","../src/prose-plugin/view.ts","../src/prose-plugin/index.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport {\n Color,\n Emotion,\n ThemeBorder,\n ThemeColor,\n ThemeFont,\n ThemeManager,\n ThemeScrollbar,\n ThemeShadow,\n ThemeSize,\n} from '@milkdown/core';\n\nconst itemStyle = (themeManager: ThemeManager, { css }: Emotion) => {\n const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n return css`\n .slash-dropdown-item {\n display: flex;\n gap: 2em;\n height: 3.4286em;\n padding: 0 1em;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n line-height: 3.4286em;\n font-family: ${themeManager.get(ThemeFont, 'typography')};\n font-size: 0.875em;\n\n transition: all 0.2s ease-in-out;\n\n &,\n .icon {\n color: ${palette('neutral', 0.87)};\n transition: all 0.2s ease-in-out;\n }\n\n &.hide {\n display: none;\n }\n\n &.active {\n background: ${palette('secondary', 0.12)};\n &,\n .icon {\n color: ${palette('primary')};\n }\n }\n `;\n};\n\nexport const injectStyle = (themeManager: ThemeManager, emotion: Emotion) => {\n const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n\n return emotion.css`\n width: 20.5em;\n max-height: 20.5em;\n overflow-y: auto;\n border-radius: ${themeManager.get(ThemeSize, 'radius')};\n position: absolute;\n background: ${palette('surface')};\n\n ${themeManager.get(ThemeBorder, undefined)}\n ${themeManager.get(ThemeShadow, undefined)}\n ${themeManager.get(ThemeScrollbar, undefined)}\n\n &.hide {\n display: none;\n }\n\n ${itemStyle(themeManager, emotion)}\n `;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { ThemeIcon, ThemeManager } from '@milkdown/core';\nimport type { Icon } from '@milkdown/design-system';\nimport type { Command, Node } from '@milkdown/prose';\nimport type { Utils } from '@milkdown/utils';\n\nimport { injectStyle } from './style';\n\nexport const createDropdown = (utils: Utils) => {\n const div = document.createElement('div');\n div.setAttribute('role', 'listbox');\n div.setAttribute('tabindex', '-1');\n utils.themeManager.onFlush(() => {\n const style = utils.getStyle(injectStyle);\n\n if (style) {\n div.classList.add(style);\n }\n });\n\n div.classList.add('slash-dropdown', 'hide');\n\n return div;\n};\n\ntype ItemOptions = {\n textClassName: string;\n};\nexport const createDropdownItem = (\n themeManager: ThemeManager,\n text: string,\n icon: Icon,\n options?: Partial<ItemOptions>,\n) => {\n const textClassName = options?.textClassName ?? 'text';\n\n const div = document.createElement('div');\n div.setAttribute('role', 'option');\n div.classList.add('slash-dropdown-item');\n\n // const iconSpan = themeManager.slots.icon(icon);\n const iconSpan = themeManager.get(ThemeIcon, icon);\n\n if (!iconSpan) {\n throw new Error('icon not found');\n }\n\n const textSpan = document.createElement('span');\n textSpan.textContent = text;\n textSpan.className = textClassName;\n\n div.appendChild(iconSpan.dom);\n div.appendChild(textSpan);\n\n return div;\n};\n\nexport const getDepth = (node: Node) => {\n let cur = node;\n let depth = 0;\n while (cur.childCount) {\n cur = cur.child(0);\n depth += 1;\n }\n\n return depth;\n};\n\nconst cleanUp: Command = (state, dispatch) => {\n const { selection } = state;\n const { $from } = selection;\n const tr = state.tr.deleteRange($from.start(), $from.pos);\n dispatch?.(tr);\n return false;\n};\n\nexport const cleanUpAndCreateNode =\n (createCommand: () => void): Command =>\n (state, dispatch, view) => {\n if (view) {\n cleanUp(state, dispatch, view);\n createCommand();\n }\n return true;\n };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { commandsCtx, Ctx, schemaCtx, themeManagerCtx } from '@milkdown/core';\nimport { EditorState, Node } from '@milkdown/prose';\n\nimport { WrappedAction } from './item';\nimport { createDropdownItem } from './utility';\n\ntype Nullable<T> = T | null | undefined;\n\nexport type StatusConfig = {\n placeholder?: Nullable<string>;\n actions?: Nullable<WrappedAction[]>;\n};\n\nexport type StatusConfigBuilderParams = {\n content: string;\n isTopLevel: boolean;\n parentNode: Node;\n state: EditorState;\n};\n\nexport type StatusConfigBuilder = (params: StatusConfigBuilderParams) => Nullable<StatusConfig>;\n\nexport type Config = (ctx: Ctx) => StatusConfigBuilder;\n\nexport const defaultActions = (ctx: Ctx, input = '/'): WrappedAction[] => {\n const { nodes } = ctx.get(schemaCtx);\n const actions: Array<WrappedAction & { keyword: string[]; typeName: string }> = [\n {\n id: 'h1',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Large Heading', 'h1'),\n command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 1),\n keyword: ['h1', 'large heading'],\n typeName: 'heading',\n },\n {\n id: 'h2',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Medium Heading', 'h2'),\n command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 2),\n keyword: ['h2', 'medium heading'],\n typeName: 'heading',\n },\n {\n id: 'h3',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Small Heading', 'h3'),\n command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 3),\n keyword: ['h3', 'small heading'],\n typeName: 'heading',\n },\n {\n id: 'bulletList',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Bullet List', 'bulletList'),\n command: () => ctx.get(commandsCtx).callByName('WrapInBulletList'),\n keyword: ['bullet list', 'ul'],\n typeName: 'bullet_list',\n },\n {\n id: 'orderedList',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Ordered List', 'orderedList'),\n command: () => ctx.get(commandsCtx).callByName('WrapInOrderedList'),\n keyword: ['ordered list', 'ol'],\n typeName: 'ordered_list',\n },\n {\n id: 'taskList',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Task List', 'taskList'),\n command: () => ctx.get(commandsCtx).callByName('TurnIntoTaskList'),\n keyword: ['task list', 'task'],\n typeName: 'task_list_item',\n },\n {\n id: 'image',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Image', 'image'),\n command: () => ctx.get(commandsCtx).callByName('InsertImage'),\n keyword: ['image'],\n typeName: 'image',\n },\n {\n id: 'blockquote',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Quote', 'quote'),\n command: () => ctx.get(commandsCtx).callByName('WrapInBlockquote'),\n keyword: ['quote', 'blockquote'],\n typeName: 'blockquote',\n },\n {\n id: 'table',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Table', 'table'),\n command: () => ctx.get(commandsCtx).callByName('InsertTable'),\n keyword: ['table'],\n typeName: 'table',\n },\n {\n id: 'code',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Code Fence', 'code'),\n command: () => ctx.get(commandsCtx).callByName('TurnIntoCodeFence'),\n keyword: ['code'],\n typeName: 'fence',\n },\n {\n id: 'divider',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Divide Line', 'divider'),\n command: () => ctx.get(commandsCtx).callByName('InsertHr'),\n keyword: ['divider', 'hr'],\n typeName: 'hr',\n },\n ];\n\n const userInput = input.slice(1).toLocaleLowerCase();\n\n return actions\n .filter((action) => !!nodes[action.typeName] && action.keyword.some((keyword) => keyword.includes(userInput)))\n .map(({ keyword, typeName, ...action }) => action);\n};\n\nexport const defaultConfig: Config = (ctx) => {\n return ({ content, isTopLevel }) => {\n if (!isTopLevel) return null;\n\n if (!content) {\n return { placeholder: 'Type / to use the slash commands...' };\n }\n\n if (content.startsWith('/')) {\n return content === '/'\n ? {\n placeholder: 'Type to filter...',\n actions: defaultActions(ctx),\n }\n : {\n actions: defaultActions(ctx, content),\n };\n }\n\n return null;\n };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Color, Emotion, ThemeColor, ThemeFont, ThemeManager } from '@milkdown/core';\nimport { Decoration, DecorationSet, EditorState, EditorView, findParentNode } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport type { Status } from './status';\n\nexport type Props = ReturnType<typeof createProps>;\n\nconst createEmptyStyle = (themeManager: ThemeManager, { css }: Emotion) => {\n const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n const typography = themeManager.get(ThemeFont, 'typography');\n\n return css`\n position: relative;\n &::before {\n position: absolute;\n cursor: text;\n font-family: ${typography};\n font-size: 0.875em;\n color: ${palette('neutral', 0.6)};\n content: attr(data-text);\n height: 100%;\n display: flex;\n align-items: center;\n }\n `;\n};\n\nconst createSlashStyle = (_: ThemeManager, { css }: Emotion) => css`\n &::before {\n left: 0.5em;\n }\n`;\n\nexport const createProps = (status: Status, utils: Utils) => {\n return {\n handleKeyDown: (_: EditorView, event: Event) => {\n if (status.isEmpty()) {\n return false;\n }\n if (!(event instanceof KeyboardEvent)) {\n return false;\n }\n\n if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {\n return false;\n }\n\n return true;\n },\n decorations: (state: EditorState) => {\n const paragraph = findParentNode(({ type }) => type.name === 'paragraph')(state.selection);\n const uploadPlugin = state.plugins.find(\n (x) => (x as unknown as { key: string }).key === 'MILKDOWN_PLUGIN_UPLOAD$',\n );\n const decorations: DecorationSet = uploadPlugin?.getState(state);\n if (decorations != null && decorations.find(state.selection.from, state.selection.to).length > 0) {\n status.clear();\n return;\n }\n\n if (\n !paragraph ||\n paragraph.node.childCount > 1 ||\n state.selection.$from.parentOffset !== paragraph.node.textContent.length ||\n (paragraph.node.firstChild && paragraph.node.firstChild.type.name !== 'text')\n ) {\n status.clear();\n return;\n }\n\n const { placeholder, actions } = status.update({\n parentNode: state.selection.$from.node(state.selection.$from.depth - 1),\n isTopLevel: state.selection.$from.depth === 1,\n content: paragraph.node.textContent,\n state,\n });\n\n if (!placeholder) {\n return null;\n }\n\n const createDecoration = (text: string, className: (string | undefined)[]) => {\n const pos = paragraph.pos;\n return DecorationSet.create(state.doc, [\n Decoration.node(pos, pos + paragraph.node.nodeSize, {\n class: className.filter((x) => x).join(' '),\n 'data-text': text,\n }),\n ]);\n };\n\n const emptyStyle = utils.getStyle(createEmptyStyle);\n const slashStyle = utils.getStyle(createSlashStyle);\n\n if (actions.length) {\n return createDecoration(placeholder, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);\n }\n\n return createDecoration(placeholder, [emptyStyle, 'empty-node']);\n },\n };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Command } from '@milkdown/prose';\n\nimport { cleanUpAndCreateNode } from './utility';\n\nexport type Action = {\n id: string;\n $: HTMLElement;\n command: Command;\n};\n\nexport type WrappedAction = Pick<Action, 'id'> & {\n command: () => void;\n dom: HTMLElement;\n};\n\nexport const transformAction = (action: WrappedAction): Action => ({\n id: action.id,\n $: action.dom,\n command: cleanUpAndCreateNode(action.command),\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { StatusConfigBuilder, StatusConfigBuilderParams } from '..';\nimport { Action, transformAction } from '../item';\n\nexport type StatusCtx = {\n placeholder: string | null;\n actions: Action[];\n};\n\nconst createStatusCtx = (): StatusCtx => {\n return {\n placeholder: null,\n actions: [],\n };\n};\n\nexport type Status = ReturnType<typeof createStatus>;\n\nexport const createStatus = (builder: StatusConfigBuilder) => {\n const statusCtx = createStatusCtx();\n\n return {\n get: () => statusCtx,\n clear: () => {\n statusCtx.placeholder = null;\n statusCtx.actions = [];\n },\n update: (builderParams: StatusConfigBuilderParams) => {\n const config = builder(builderParams);\n statusCtx.placeholder = config?.placeholder ?? null;\n statusCtx.actions = (config?.actions ?? []).map(transformAction);\n return statusCtx;\n },\n isEmpty: () => statusCtx.actions.length === 0,\n };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport scrollIntoView from 'smooth-scroll-into-view-if-needed';\n\nimport { Status } from './status';\n\ntype Listeners = {\n mouseEnter: EventListener;\n mouseLeave: EventListener;\n};\n\nexport const renderDropdown = (status: Status, dropdownElement: HTMLElement, listeners: Listeners): boolean => {\n const { actions } = status.get();\n\n if (!actions.length) {\n dropdownElement.classList.add('hide');\n return false;\n }\n\n dropdownElement.childNodes.forEach((child) => {\n child.removeEventListener('mouseenter', listeners.mouseEnter);\n child.removeEventListener('mouseleave', listeners.mouseLeave);\n });\n\n while (dropdownElement.firstChild) {\n dropdownElement.firstChild.remove();\n }\n\n actions.forEach(({ $ }) => {\n $.classList.remove('active');\n $.addEventListener('mouseenter', listeners.mouseEnter);\n $.addEventListener('mouseleave', listeners.mouseLeave);\n dropdownElement.appendChild($);\n });\n\n dropdownElement.classList.remove('hide');\n\n const first$ = actions[0];\n if (first$) {\n first$.$.classList.add('active');\n requestAnimationFrame(() => {\n scrollIntoView(first$.$, {\n scrollMode: 'if-needed',\n block: 'nearest',\n inline: 'nearest',\n });\n });\n }\n\n return true;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { EditorView } from '@milkdown/prose';\nimport scrollIntoView from 'smooth-scroll-into-view-if-needed';\n\nimport { Status } from './status';\n\nexport const createMouseManager = () => {\n let mouseLock = false;\n\n return {\n isLock: () => mouseLock,\n lock: () => {\n mouseLock = true;\n },\n unlock: () => {\n mouseLock = false;\n },\n };\n};\nexport type MouseManager = ReturnType<typeof createMouseManager>;\n\nexport const handleMouseMove = (mouseManager: MouseManager) => () => {\n mouseManager.unlock();\n};\n\nexport const handleMouseEnter = (status: Status, mouseManager: MouseManager) => (e: MouseEvent) => {\n if (mouseManager.isLock()) return;\n const { actions } = status.get();\n const active = actions.findIndex((x) => x.$.classList.contains('active'));\n const active$ = actions[active];\n if (active$ && active >= 0) {\n active$.$.classList.remove('active');\n }\n const { target } = e;\n if (!(target instanceof HTMLElement)) return;\n target.classList.add('active');\n};\n\nexport const handleMouseLeave = () => (e: MouseEvent) => {\n const { target } = e;\n if (!(target instanceof HTMLElement)) return;\n target.classList.remove('active');\n};\n\nexport const handleClick =\n (status: Status, view: EditorView, dropdownElement: HTMLElement) =>\n (e: Event): void => {\n const { target } = e;\n if (!(target instanceof HTMLElement)) return;\n if (!view) return;\n\n const stop = () => {\n e.stopPropagation();\n e.preventDefault();\n };\n\n const { actions } = status.get();\n\n const el = Object.values(actions).find(({ $ }) => $.contains(target));\n if (!el) {\n if (status.isEmpty()) return;\n\n status.clear();\n dropdownElement.classList.add('hide');\n stop();\n\n return;\n }\n\n stop();\n el.command(view.state, view.dispatch, view);\n };\n\nexport const handleKeydown =\n (status: Status, view: EditorView, dropdownElement: HTMLElement, mouseManager: MouseManager) => (e: Event) => {\n if (!(e instanceof KeyboardEvent)) return;\n if (!mouseManager.isLock()) mouseManager.lock();\n\n const { key } = e;\n if (status.isEmpty()) return;\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(key)) return;\n\n const { actions } = status.get();\n\n let active = actions.findIndex(({ $ }) => $.classList.contains('active'));\n if (active < 0) active = 0;\n\n const moveActive = (next: number) => {\n const active$ = actions[active];\n const next$ = actions[next];\n if (!active$ || !next$) return;\n active$.$.classList.remove('active');\n next$.$.classList.add('active');\n scrollIntoView(next$.$, {\n scrollMode: 'if-needed',\n block: 'nearest',\n inline: 'nearest',\n });\n };\n\n if (key === 'ArrowDown') {\n const next = active === actions.length - 1 ? 0 : active + 1;\n\n moveActive(next);\n return;\n }\n\n if (key === 'ArrowUp') {\n const next = active === 0 ? actions.length - 1 : active - 1;\n\n moveActive(next);\n return;\n }\n\n if (key === 'Escape') {\n if (status.isEmpty()) return;\n\n status.clear();\n dropdownElement.classList.add('hide');\n return;\n }\n\n const active$ = actions[active];\n if (!active$) return;\n active$.command(view.state, view.dispatch, view);\n active$.$.classList.remove('active');\n };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { calculateNodePosition, EditorView } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport { createDropdown } from '../utility';\nimport { renderDropdown } from './dropdown';\nimport {\n createMouseManager,\n handleClick,\n handleKeydown,\n handleMouseEnter,\n handleMouseLeave,\n handleMouseMove,\n} from './input';\nimport { Status } from './status';\n\nconst calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {\n calculateNodePosition(view, dropdownElement, (selected, target, parent) => {\n const $editor = dropdownElement.parentElement;\n if (!$editor) {\n throw new Error();\n }\n\n let left = selected.left - parent.left;\n let top = selected.bottom - parent.top + 14 + $editor.scrollTop;\n\n if (left < 0) {\n left = 0;\n }\n\n if (parent.height + parent.top - selected.bottom < target.height) {\n top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;\n }\n return [top, left];\n });\n};\n\nexport const createView = (status: Status, view: EditorView, utils: Utils) => {\n const wrapper = view.dom.parentNode;\n if (!wrapper) return {};\n\n const dropdownElement = createDropdown(utils);\n const mouseManager = createMouseManager();\n wrapper.appendChild(dropdownElement);\n\n const _mouseMove = handleMouseMove(mouseManager);\n const _mouseDown = handleClick(status, view, dropdownElement);\n const _keydown = handleKeydown(status, view, dropdownElement, mouseManager);\n const _mouseEnter = handleMouseEnter(status, mouseManager);\n const _mouseLeave = handleMouseLeave();\n\n wrapper.addEventListener('mousemove', _mouseMove);\n wrapper.addEventListener('mousedown', _mouseDown);\n wrapper.addEventListener('keydown', _keydown);\n\n return {\n update: (view: EditorView) => {\n const show = renderDropdown(status, dropdownElement, {\n mouseEnter: _mouseEnter as EventListener,\n mouseLeave: _mouseLeave as EventListener,\n });\n\n if (!show) return;\n\n calculatePosition(view, dropdownElement);\n },\n\n destroy: () => {\n wrapper.removeEventListener('mousemove', _mouseMove);\n wrapper.removeEventListener('mousedown', _mouseDown);\n wrapper.removeEventListener('keydown', _keydown);\n dropdownElement.remove();\n },\n };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Plugin, PluginKey } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport type { StatusConfigBuilder } from '..';\nimport { createProps } from './props';\nimport { createStatus } from './status';\nimport { createView } from './view';\n\nexport const key = 'MILKDOWN_PLUGIN_SLASH';\n\nexport const createSlashPlugin = (utils: Utils, builder: StatusConfigBuilder) => {\n const status = createStatus(builder);\n\n return new Plugin({\n key: new PluginKey(key),\n props: createProps(status, utils),\n view: (view) => createView(status, view, utils),\n });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { AtomList, createPlugin } from '@milkdown/utils';\n\nimport type { Config } from './config';\nimport { defaultConfig } from './config';\nimport { createSlashPlugin } from './prose-plugin';\n\nexport type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';\nexport { defaultActions, defaultConfig } from './config';\nexport { createDropdownItem } from './utility';\n\nexport type Options = {\n config: Config;\n};\n\nexport const slashPlugin = createPlugin<string, Options>((utils, options) => {\n const slashConfig = options?.config ?? defaultConfig;\n\n return {\n prosePlugins: (_, ctx) => {\n const config = slashConfig(ctx);\n\n const plugin = createSlashPlugin(utils, config);\n\n return [plugin];\n },\n };\n});\n\nexport const slash = AtomList.create([slashPlugin()]);\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.es.js","sources":["../src/style.ts","../src/utility.ts","../src/config.ts","../src/prose-plugin/props.ts","../src/item.ts","../src/prose-plugin/status.ts","../src/prose-plugin/dropdown.ts","../src/prose-plugin/input.ts","../src/prose-plugin/view.ts","../src/prose-plugin/index.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport {\n Color,\n Emotion,\n ThemeBorder,\n ThemeColor,\n ThemeFont,\n ThemeManager,\n ThemeScrollbar,\n ThemeShadow,\n ThemeSize,\n} from '@milkdown/core';\n\nconst itemStyle = (themeManager: ThemeManager, { css }: Emotion) => {\n const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n return css`\n .slash-dropdown-item {\n display: flex;\n gap: 2em;\n height: 3.4286em;\n padding: 0 1em;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n line-height: 3.4286em;\n font-family: ${themeManager.get(ThemeFont, 'typography')};\n font-size: 0.875em;\n\n transition: all 0.2s ease-in-out;\n\n &,\n .icon {\n color: ${palette('neutral', 0.87)};\n transition: all 0.2s ease-in-out;\n }\n\n &.hide {\n display: none;\n }\n\n &.active {\n background: ${palette('secondary', 0.12)};\n &,\n .icon {\n color: ${palette('primary')};\n }\n }\n }\n `;\n};\n\nexport const injectStyle = (themeManager: ThemeManager, emotion: Emotion) => {\n const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n\n return emotion.css`\n width: 20.5em;\n max-height: 20.5em;\n overflow-y: auto;\n border-radius: ${themeManager.get(ThemeSize, 'radius')};\n position: absolute;\n background: ${palette('surface')};\n\n ${themeManager.get(ThemeBorder, undefined)}\n ${themeManager.get(ThemeShadow, undefined)}\n ${themeManager.get(ThemeScrollbar, undefined)}\n\n &.hide {\n display: none;\n }\n\n ${itemStyle(themeManager, emotion)}\n `;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { ThemeIcon, ThemeManager } from '@milkdown/core';\nimport type { Icon } from '@milkdown/design-system';\nimport type { Command, Node } from '@milkdown/prose';\nimport type { Utils } from '@milkdown/utils';\n\nimport { injectStyle } from './style';\n\nexport const createDropdown = (utils: Utils, className: string) => {\n const div = document.createElement('div');\n div.setAttribute('role', 'listbox');\n div.setAttribute('tabindex', '-1');\n utils.themeManager.onFlush(() => {\n const style = utils.getStyle(injectStyle);\n\n if (style) {\n div.classList.add(style);\n }\n });\n\n div.classList.add(className, 'hide');\n\n return div;\n};\n\ntype ItemOptions = {\n textClassName: string;\n};\nexport const createDropdownItem = (\n themeManager: ThemeManager,\n text: string,\n icon: Icon,\n options?: Partial<ItemOptions>,\n) => {\n const textClassName = options?.textClassName ?? 'text';\n\n const div = document.createElement('div');\n div.setAttribute('role', 'option');\n div.classList.add('slash-dropdown-item');\n\n // const iconSpan = themeManager.slots.icon(icon);\n const iconSpan = themeManager.get(ThemeIcon, icon);\n\n if (!iconSpan) {\n throw new Error('icon not found');\n }\n\n const textSpan = document.createElement('span');\n textSpan.textContent = text;\n textSpan.className = textClassName;\n\n div.appendChild(iconSpan.dom);\n div.appendChild(textSpan);\n\n return div;\n};\n\nexport const getDepth = (node: Node) => {\n let cur = node;\n let depth = 0;\n while (cur.childCount) {\n cur = cur.child(0);\n depth += 1;\n }\n\n return depth;\n};\n\nconst cleanUp: Command = (state, dispatch) => {\n const { selection } = state;\n const { $from } = selection;\n const tr = state.tr.deleteRange($from.start(), $from.pos);\n dispatch?.(tr);\n return false;\n};\n\nexport const cleanUpAndCreateNode =\n (createCommand: () => void): Command =>\n (state, dispatch, view) => {\n if (view) {\n cleanUp(state, dispatch, view);\n createCommand();\n }\n return true;\n };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { commandsCtx, Ctx, schemaCtx, themeManagerCtx } from '@milkdown/core';\nimport { EditorState, Node } from '@milkdown/prose';\n\nimport { WrappedAction } from './item';\nimport { createDropdownItem } from './utility';\n\ntype Nullable<T> = T | null | undefined;\n\nexport type StatusConfig = {\n placeholder?: Nullable<string>;\n actions?: Nullable<WrappedAction[]>;\n};\n\nexport type StatusConfigBuilderParams = {\n content: string;\n isTopLevel: boolean;\n parentNode: Node;\n state: EditorState;\n};\n\nexport type StatusConfigBuilder = (params: StatusConfigBuilderParams) => Nullable<StatusConfig>;\n\nexport type Config = (ctx: Ctx) => StatusConfigBuilder;\n\nexport const defaultActions = (ctx: Ctx, input = '/'): WrappedAction[] => {\n const { nodes } = ctx.get(schemaCtx);\n const actions: Array<WrappedAction & { keyword: string[]; typeName: string }> = [\n {\n id: 'h1',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Large Heading', 'h1'),\n command: () => ctx.get(commandsCtx).call('TurnIntoHeading', 1),\n keyword: ['h1', 'large heading'],\n typeName: 'heading',\n },\n {\n id: 'h2',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Medium Heading', 'h2'),\n command: () => ctx.get(commandsCtx).call('TurnIntoHeading', 2),\n keyword: ['h2', 'medium heading'],\n typeName: 'heading',\n },\n {\n id: 'h3',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Small Heading', 'h3'),\n command: () => ctx.get(commandsCtx).call('TurnIntoHeading', 3),\n keyword: ['h3', 'small heading'],\n typeName: 'heading',\n },\n {\n id: 'bulletList',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Bullet List', 'bulletList'),\n command: () => ctx.get(commandsCtx).call('WrapInBulletList'),\n keyword: ['bullet list', 'ul'],\n typeName: 'bullet_list',\n },\n {\n id: 'orderedList',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Ordered List', 'orderedList'),\n command: () => ctx.get(commandsCtx).call('WrapInOrderedList'),\n keyword: ['ordered list', 'ol'],\n typeName: 'ordered_list',\n },\n {\n id: 'taskList',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Task List', 'taskList'),\n command: () => ctx.get(commandsCtx).call('TurnIntoTaskList'),\n keyword: ['task list', 'task'],\n typeName: 'task_list_item',\n },\n {\n id: 'image',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Image', 'image'),\n command: () => ctx.get(commandsCtx).call('InsertImage'),\n keyword: ['image'],\n typeName: 'image',\n },\n {\n id: 'blockquote',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Quote', 'quote'),\n command: () => ctx.get(commandsCtx).call('WrapInBlockquote'),\n keyword: ['quote', 'blockquote'],\n typeName: 'blockquote',\n },\n {\n id: 'table',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Table', 'table'),\n command: () => ctx.get(commandsCtx).call('InsertTable'),\n keyword: ['table'],\n typeName: 'table',\n },\n {\n id: 'code',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Code Fence', 'code'),\n command: () => ctx.get(commandsCtx).call('TurnIntoCodeFence'),\n keyword: ['code'],\n typeName: 'fence',\n },\n {\n id: 'divider',\n dom: createDropdownItem(ctx.get(themeManagerCtx), 'Divide Line', 'divider'),\n command: () => ctx.get(commandsCtx).call('InsertHr'),\n keyword: ['divider', 'hr'],\n typeName: 'hr',\n },\n ];\n\n const userInput = input.slice(1).toLocaleLowerCase();\n\n return actions\n .filter((action) => !!nodes[action.typeName] && action.keyword.some((keyword) => keyword.includes(userInput)))\n .map(({ keyword, typeName, ...action }) => action);\n};\n\nexport const defaultConfig: Config = (ctx) => {\n return ({ content, isTopLevel }) => {\n if (!isTopLevel) return null;\n\n if (!content) {\n return { placeholder: 'Type / to use the slash commands...' };\n }\n\n if (content.startsWith('/')) {\n return content === '/'\n ? {\n placeholder: 'Type to filter...',\n actions: defaultActions(ctx),\n }\n : {\n actions: defaultActions(ctx, content),\n };\n }\n\n return null;\n };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Color, Emotion, ThemeColor, ThemeFont, ThemeManager } from '@milkdown/core';\nimport { Decoration, DecorationSet, EditorState, EditorView, findParentNode } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport type { Status } from './status';\n\nexport type Props = ReturnType<typeof createProps>;\n\nconst createEmptyStyle = (themeManager: ThemeManager, { css }: Emotion) => {\n const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n const typography = themeManager.get(ThemeFont, 'typography');\n\n return css`\n position: relative;\n &::before {\n position: absolute;\n cursor: text;\n font-family: ${typography};\n font-size: 0.875em;\n color: ${palette('neutral', 0.6)};\n content: attr(data-text);\n height: 100%;\n display: flex;\n align-items: center;\n }\n `;\n};\n\nconst createSlashStyle = (_: ThemeManager, { css }: Emotion) => css`\n &::before {\n left: 0.5em;\n }\n`;\n\nexport const createProps = (status: Status, utils: Utils) => {\n return {\n handleKeyDown: (_: EditorView, event: Event) => {\n if (status.isEmpty()) {\n return false;\n }\n if (!(event instanceof KeyboardEvent)) {\n return false;\n }\n\n if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {\n return false;\n }\n\n return true;\n },\n decorations: (state: EditorState) => {\n const paragraph = findParentNode(({ type }) => type.name === 'paragraph')(state.selection);\n const uploadPlugin = state.plugins.find(\n (x) => (x as unknown as { key: string }).key === 'MILKDOWN_PLUGIN_UPLOAD$',\n );\n const decorations: DecorationSet = uploadPlugin?.getState(state);\n if (decorations != null && decorations.find(state.selection.from, state.selection.to).length > 0) {\n status.clear();\n return;\n }\n\n if (\n !paragraph ||\n paragraph.node.childCount > 1 ||\n state.selection.$from.parentOffset !== paragraph.node.textContent.length ||\n (paragraph.node.firstChild && paragraph.node.firstChild.type.name !== 'text')\n ) {\n status.clear();\n return;\n }\n\n const { placeholder, actions } = status.update({\n parentNode: state.selection.$from.node(state.selection.$from.depth - 1),\n isTopLevel: state.selection.$from.depth === 1,\n content: paragraph.node.textContent,\n state,\n });\n\n if (!placeholder) {\n return null;\n }\n\n const createDecoration = (text: string, className: (string | undefined)[]) => {\n const pos = paragraph.pos;\n return DecorationSet.create(state.doc, [\n Decoration.node(pos, pos + paragraph.node.nodeSize, {\n class: className.filter((x) => x).join(' '),\n 'data-text': text,\n }),\n ]);\n };\n\n const emptyStyle = utils.getStyle(createEmptyStyle);\n const slashStyle = utils.getStyle(createSlashStyle);\n\n if (actions.length) {\n return createDecoration(placeholder, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);\n }\n\n return createDecoration(placeholder, [emptyStyle, 'empty-node']);\n },\n };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Command } from '@milkdown/prose';\n\nimport { cleanUpAndCreateNode } from './utility';\n\nexport type Action = {\n id: string;\n $: HTMLElement;\n command: Command;\n};\n\nexport type WrappedAction = Pick<Action, 'id'> & {\n command: () => void;\n dom: HTMLElement;\n};\n\nexport const transformAction = (action: WrappedAction): Action => ({\n id: action.id,\n $: action.dom,\n command: cleanUpAndCreateNode(action.command),\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { StatusConfigBuilder, StatusConfigBuilderParams } from '..';\nimport { Action, transformAction } from '../item';\n\nexport type StatusCtx = {\n placeholder: string | null;\n actions: Action[];\n};\n\nconst createStatusCtx = (): StatusCtx => {\n return {\n placeholder: null,\n actions: [],\n };\n};\n\nexport type Status = ReturnType<typeof createStatus>;\n\nexport const createStatus = (builder: StatusConfigBuilder) => {\n const statusCtx = createStatusCtx();\n\n return {\n get: () => statusCtx,\n clear: () => {\n statusCtx.placeholder = null;\n statusCtx.actions = [];\n },\n update: (builderParams: StatusConfigBuilderParams) => {\n const config = builder(builderParams);\n statusCtx.placeholder = config?.placeholder ?? null;\n statusCtx.actions = (config?.actions ?? []).map(transformAction);\n return statusCtx;\n },\n isEmpty: () => statusCtx.actions.length === 0,\n };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport scrollIntoView from 'smooth-scroll-into-view-if-needed';\n\nimport { Status } from './status';\n\ntype Listeners = {\n mouseEnter: EventListener;\n mouseLeave: EventListener;\n};\n\nexport const renderDropdown = (status: Status, dropdownElement: HTMLElement, listeners: Listeners): boolean => {\n const { actions } = status.get();\n\n if (!actions.length) {\n dropdownElement.classList.add('hide');\n return false;\n }\n\n dropdownElement.childNodes.forEach((child) => {\n child.removeEventListener('mouseenter', listeners.mouseEnter);\n child.removeEventListener('mouseleave', listeners.mouseLeave);\n });\n\n while (dropdownElement.firstChild) {\n dropdownElement.firstChild.remove();\n }\n\n actions.forEach(({ $ }) => {\n $.classList.remove('active');\n $.addEventListener('mouseenter', listeners.mouseEnter);\n $.addEventListener('mouseleave', listeners.mouseLeave);\n dropdownElement.appendChild($);\n });\n\n dropdownElement.classList.remove('hide');\n\n const first$ = actions[0];\n if (first$) {\n first$.$.classList.add('active');\n requestAnimationFrame(() => {\n scrollIntoView(first$.$, {\n scrollMode: 'if-needed',\n block: 'nearest',\n inline: 'nearest',\n });\n });\n }\n\n return true;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { EditorView } from '@milkdown/prose';\nimport scrollIntoView from 'smooth-scroll-into-view-if-needed';\n\nimport { Status } from './status';\n\nexport const createMouseManager = () => {\n let mouseLock = false;\n\n return {\n isLock: () => mouseLock,\n lock: () => {\n mouseLock = true;\n },\n unlock: () => {\n mouseLock = false;\n },\n };\n};\nexport type MouseManager = ReturnType<typeof createMouseManager>;\n\nexport const handleMouseMove = (mouseManager: MouseManager) => () => {\n mouseManager.unlock();\n};\n\nexport const handleMouseEnter = (status: Status, mouseManager: MouseManager) => (e: MouseEvent) => {\n if (mouseManager.isLock()) return;\n const { actions } = status.get();\n const active = actions.findIndex((x) => x.$.classList.contains('active'));\n const active$ = actions[active];\n if (active$ && active >= 0) {\n active$.$.classList.remove('active');\n }\n const { target } = e;\n if (!(target instanceof HTMLElement)) return;\n target.classList.add('active');\n};\n\nexport const handleMouseLeave = () => (e: MouseEvent) => {\n const { target } = e;\n if (!(target instanceof HTMLElement)) return;\n target.classList.remove('active');\n};\n\nexport const handleClick =\n (status: Status, view: EditorView, dropdownElement: HTMLElement) =>\n (e: Event): void => {\n const { target } = e;\n if (!(target instanceof HTMLElement)) return;\n if (!view) return;\n\n const stop = () => {\n e.stopPropagation();\n e.preventDefault();\n };\n\n const { actions } = status.get();\n\n const el = Object.values(actions).find(({ $ }) => $.contains(target));\n if (!el) {\n if (status.isEmpty()) return;\n\n status.clear();\n dropdownElement.classList.add('hide');\n stop();\n\n return;\n }\n\n stop();\n el.command(view.state, view.dispatch, view);\n };\n\nexport const handleKeydown =\n (status: Status, view: EditorView, dropdownElement: HTMLElement, mouseManager: MouseManager) => (e: Event) => {\n if (!(e instanceof KeyboardEvent)) return;\n if (!mouseManager.isLock()) mouseManager.lock();\n\n const { key } = e;\n if (status.isEmpty()) return;\n if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(key)) return;\n\n const { actions } = status.get();\n\n let active = actions.findIndex(({ $ }) => $.classList.contains('active'));\n if (active < 0) active = 0;\n\n const moveActive = (next: number) => {\n const active$ = actions[active];\n const next$ = actions[next];\n if (!active$ || !next$) return;\n active$.$.classList.remove('active');\n next$.$.classList.add('active');\n scrollIntoView(next$.$, {\n scrollMode: 'if-needed',\n block: 'nearest',\n inline: 'nearest',\n });\n };\n\n if (key === 'ArrowDown') {\n const next = active === actions.length - 1 ? 0 : active + 1;\n\n moveActive(next);\n return;\n }\n\n if (key === 'ArrowUp') {\n const next = active === 0 ? actions.length - 1 : active - 1;\n\n moveActive(next);\n return;\n }\n\n if (key === 'Escape') {\n if (status.isEmpty()) return;\n\n status.clear();\n dropdownElement.classList.add('hide');\n return;\n }\n\n const active$ = actions[active];\n if (!active$) return;\n active$.command(view.state, view.dispatch, view);\n active$.$.classList.remove('active');\n };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { calculateNodePosition, EditorView } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport { createDropdown } from '../utility';\nimport { renderDropdown } from './dropdown';\nimport {\n createMouseManager,\n handleClick,\n handleKeydown,\n handleMouseEnter,\n handleMouseLeave,\n handleMouseMove,\n} from './input';\nimport { Status } from './status';\n\nconst calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {\n calculateNodePosition(view, dropdownElement, (selected, target, parent) => {\n const $editor = dropdownElement.parentElement;\n if (!$editor) {\n throw new Error();\n }\n\n let left = selected.left - parent.left;\n let top = selected.bottom - parent.top + 14 + $editor.scrollTop;\n\n if (left < 0) {\n left = 0;\n }\n\n if (parent.height + parent.top - selected.bottom < target.height) {\n const topOffset = selected.top - parent.top - target.height - 14 + $editor.scrollTop;\n if (topOffset > 0) {\n top = topOffset;\n }\n }\n return [top, left];\n });\n};\n\nexport const createView = (status: Status, view: EditorView, utils: Utils, className: string) => {\n const wrapper = view.dom.parentNode;\n if (!wrapper) return {};\n\n const dropdownElement = createDropdown(utils, className);\n const mouseManager = createMouseManager();\n wrapper.appendChild(dropdownElement);\n\n const _mouseMove = handleMouseMove(mouseManager);\n const _mouseDown = handleClick(status, view, dropdownElement);\n const _keydown = handleKeydown(status, view, dropdownElement, mouseManager);\n const _mouseEnter = handleMouseEnter(status, mouseManager);\n const _mouseLeave = handleMouseLeave();\n\n wrapper.addEventListener('mousemove', _mouseMove);\n wrapper.addEventListener('mousedown', _mouseDown);\n wrapper.addEventListener('keydown', _keydown);\n\n return {\n update: (view: EditorView) => {\n const show = renderDropdown(status, dropdownElement, {\n mouseEnter: _mouseEnter as EventListener,\n mouseLeave: _mouseLeave as EventListener,\n });\n\n if (!show) return;\n\n calculatePosition(view, dropdownElement);\n },\n\n destroy: () => {\n wrapper.removeEventListener('mousemove', _mouseMove);\n wrapper.removeEventListener('mousedown', _mouseDown);\n wrapper.removeEventListener('keydown', _keydown);\n dropdownElement.remove();\n },\n };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Plugin, PluginKey } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport type { StatusConfigBuilder } from '..';\nimport { createProps } from './props';\nimport { createStatus } from './status';\nimport { createView } from './view';\n\nexport const key = 'MILKDOWN_PLUGIN_SLASH';\n\nexport const createSlashPlugin = (utils: Utils, builder: StatusConfigBuilder, className: string) => {\n const status = createStatus(builder);\n\n return new Plugin({\n key: new PluginKey(key),\n props: createProps(status, utils),\n view: (view) => createView(status, view, utils, className),\n });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { createPlugin } from '@milkdown/utils';\n\nimport type { Config } from './config';\nimport { defaultConfig } from './config';\nimport { createSlashPlugin } from './prose-plugin';\n\nexport type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';\nexport { defaultActions, defaultConfig } from './config';\nexport { createDropdownItem } from './utility';\n\nexport type Options = {\n config: Config;\n className: string;\n};\n\nexport const slash = createPlugin<string, Options>((utils, options) => {\n const slashConfig = options?.config ?? defaultConfig;\n\n return {\n prosePlugins: (_, ctx) => {\n const config = slashConfig(ctx);\n\n const plugin = createSlashPlugin(utils, config, options?.className ?? 'slash-dropdown');\n\n return [plugin];\n },\n };\n});\n"],"names":[],"mappings":"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"}
package/lib/prose-plugin/index.d.ts CHANGED
@@ -2,5 +2,5 @@ import { Plugin } from '@milkdown/prose';
2
2
  import { Utils } from '@milkdown/utils';
3
3
  import type { StatusConfigBuilder } from '..';
4
4
  export declare const key = "MILKDOWN_PLUGIN_SLASH";
5
- export declare const createSlashPlugin: (utils: Utils, builder: StatusConfigBuilder) => Plugin<any, any>;
5
+ export declare const createSlashPlugin: (utils: Utils, builder: StatusConfigBuilder, className: string) => Plugin<any, any>;
6
6
  //# sourceMappingURL=index.d.ts.map
package/lib/prose-plugin/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/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
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/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,aAAa,MAAM,qBAQ9F,CAAC"}
package/lib/prose-plugin/view.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { EditorView } from '@milkdown/prose';
2
2
  import { Utils } from '@milkdown/utils';
3
3
  import { Status } from './status';
4
- export declare const createView: (status: Status, view: EditorView, utils: Utils) => {
4
+ export declare const createView: (status: Status, view: EditorView, utils: Utils, className: string) => {
5
5
  update?: undefined;
6
6
  destroy?: undefined;
7
7
  } | {
package/lib/prose-plugin/view.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/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
+ {"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/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;AA0BlC,eAAO,MAAM,UAAU,WAAY,MAAM,QAAQ,UAAU,SAAS,KAAK,aAAa,MAAM;;;;mBAmBrE,UAAU;;CAkBhC,CAAC"}
package/lib/style.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AACA,OAAO,EAEH,OAAO,EAIP,YAAY,EAIf,MAAM,gBAAgB,CAAC;AAuCxB,eAAO,MAAM,WAAW,iBAAkB,YAAY,WAAW,OAAO,WAqBvE,CAAC"}
1
+ {"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AACA,OAAO,EAEH,OAAO,EAIP,YAAY,EAIf,MAAM,gBAAgB,CAAC;AAwCxB,eAAO,MAAM,WAAW,iBAAkB,YAAY,WAAW,OAAO,WAqBvE,CAAC"}
package/lib/utility.d.ts CHANGED
@@ -2,7 +2,7 @@ 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';
5
- export declare const createDropdown: (utils: Utils) => HTMLDivElement;
5
+ export declare const createDropdown: (utils: Utils, className: string) => HTMLDivElement;
6
6
  declare type ItemOptions = {
7
7
  textClassName: string;
8
8
  };
package/lib/utility.d.ts.map CHANGED
@@ -1 +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"}
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,aAAa,MAAM,mBAe7D,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": "6.0.0-next.0",
3
+ "version": "6.0.0-next.1",
4
4
  "type": "module",
5
5
  "main": "./lib/index.es.js",
6
6
  "types": "./lib/index.d.ts",
@@ -15,16 +15,16 @@
15
15
  "milkdown plugin"
16
16
  ],
17
17
  "devDependencies": {
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"
18
+ "@milkdown/core": "6.0.0-next.1",
19
+ "@milkdown/prose": "6.0.0-next.1",
20
+ "@milkdown/design-system": "6.0.0-next.1"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "@milkdown/core": "^6.0.0-next.0",
24
24
  "@milkdown/prose": "^6.0.0-next.0"
25
25
  },
26
26
  "dependencies": {
27
- "@milkdown/utils": "6.0.0-next.0",
27
+ "@milkdown/utils": "6.0.0-next.1",
28
28
  "smooth-scroll-into-view-if-needed": "^1.1.32",
29
29
  "tslib": "^2.3.1"
30
30
  },
package/src/config.ts CHANGED
@@ -29,77 +29,77 @@ export const defaultActions = (ctx: Ctx, input = '/'): WrappedAction[] => {
29
29
  {
30
30
  id: 'h1',
31
31
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Large Heading', 'h1'),
32
- command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 1),
32
+ command: () => ctx.get(commandsCtx).call('TurnIntoHeading', 1),
33
33
  keyword: ['h1', 'large heading'],
34
34
  typeName: 'heading',
35
35
  },
36
36
  {
37
37
  id: 'h2',
38
38
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Medium Heading', 'h2'),
39
- command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 2),
39
+ command: () => ctx.get(commandsCtx).call('TurnIntoHeading', 2),
40
40
  keyword: ['h2', 'medium heading'],
41
41
  typeName: 'heading',
42
42
  },
43
43
  {
44
44
  id: 'h3',
45
45
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Small Heading', 'h3'),
46
- command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 3),
46
+ command: () => ctx.get(commandsCtx).call('TurnIntoHeading', 3),
47
47
  keyword: ['h3', 'small heading'],
48
48
  typeName: 'heading',
49
49
  },
50
50
  {
51
51
  id: 'bulletList',
52
52
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Bullet List', 'bulletList'),
53
- command: () => ctx.get(commandsCtx).callByName('WrapInBulletList'),
53
+ command: () => ctx.get(commandsCtx).call('WrapInBulletList'),
54
54
  keyword: ['bullet list', 'ul'],
55
55
  typeName: 'bullet_list',
56
56
  },
57
57
  {
58
58
  id: 'orderedList',
59
59
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Ordered List', 'orderedList'),
60
- command: () => ctx.get(commandsCtx).callByName('WrapInOrderedList'),
60
+ command: () => ctx.get(commandsCtx).call('WrapInOrderedList'),
61
61
  keyword: ['ordered list', 'ol'],
62
62
  typeName: 'ordered_list',
63
63
  },
64
64
  {
65
65
  id: 'taskList',
66
66
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Task List', 'taskList'),
67
- command: () => ctx.get(commandsCtx).callByName('TurnIntoTaskList'),
67
+ command: () => ctx.get(commandsCtx).call('TurnIntoTaskList'),
68
68
  keyword: ['task list', 'task'],
69
69
  typeName: 'task_list_item',
70
70
  },
71
71
  {
72
72
  id: 'image',
73
73
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Image', 'image'),
74
- command: () => ctx.get(commandsCtx).callByName('InsertImage'),
74
+ command: () => ctx.get(commandsCtx).call('InsertImage'),
75
75
  keyword: ['image'],
76
76
  typeName: 'image',
77
77
  },
78
78
  {
79
79
  id: 'blockquote',
80
80
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Quote', 'quote'),
81
- command: () => ctx.get(commandsCtx).callByName('WrapInBlockquote'),
81
+ command: () => ctx.get(commandsCtx).call('WrapInBlockquote'),
82
82
  keyword: ['quote', 'blockquote'],
83
83
  typeName: 'blockquote',
84
84
  },
85
85
  {
86
86
  id: 'table',
87
87
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Table', 'table'),
88
- command: () => ctx.get(commandsCtx).callByName('InsertTable'),
88
+ command: () => ctx.get(commandsCtx).call('InsertTable'),
89
89
  keyword: ['table'],
90
90
  typeName: 'table',
91
91
  },
92
92
  {
93
93
  id: 'code',
94
94
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Code Fence', 'code'),
95
- command: () => ctx.get(commandsCtx).callByName('TurnIntoCodeFence'),
95
+ command: () => ctx.get(commandsCtx).call('TurnIntoCodeFence'),
96
96
  keyword: ['code'],
97
97
  typeName: 'fence',
98
98
  },
99
99
  {
100
100
  id: 'divider',
101
101
  dom: createDropdownItem(ctx.get(themeManagerCtx), 'Divide Line', 'divider'),
102
- command: () => ctx.get(commandsCtx).callByName('InsertHr'),
102
+ command: () => ctx.get(commandsCtx).call('InsertHr'),
103
103
  keyword: ['divider', 'hr'],
104
104
  typeName: 'hr',
105
105
  },
package/src/index.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Copyright 2021, Milkdown by Mirone. */
2
- import { AtomList, createPlugin } from '@milkdown/utils';
2
+ import { createPlugin } from '@milkdown/utils';
3
3
 
4
4
  import type { Config } from './config';
5
5
  import { defaultConfig } from './config';
@@ -11,20 +11,19 @@ export { createDropdownItem } from './utility';
11
11
 
12
12
  export type Options = {
13
13
  config: Config;
14
+ className: string;
14
15
  };
15
16
 
16
- export const slashPlugin = createPlugin<string, Options>((utils, options) => {
17
+ export const slash = createPlugin<string, Options>((utils, options) => {
17
18
  const slashConfig = options?.config ?? defaultConfig;
18
19
 
19
20
  return {
20
21
  prosePlugins: (_, ctx) => {
21
22
  const config = slashConfig(ctx);
22
23
 
23
- const plugin = createSlashPlugin(utils, config);
24
+ const plugin = createSlashPlugin(utils, config, options?.className ?? 'slash-dropdown');
24
25
 
25
26
  return [plugin];
26
27
  },
27
28
  };
28
29
  });
29
-
30
- export const slash = AtomList.create([slashPlugin()]);
package/src/prose-plugin/index.ts CHANGED
@@ -9,12 +9,12 @@ import { createView } from './view';
9
9
 
10
10
  export const key = 'MILKDOWN_PLUGIN_SLASH';
11
11
 
12
- export const createSlashPlugin = (utils: Utils, builder: StatusConfigBuilder) => {
12
+ export const createSlashPlugin = (utils: Utils, builder: StatusConfigBuilder, className: string) => {
13
13
  const status = createStatus(builder);
14
14
 
15
15
  return new Plugin({
16
16
  key: new PluginKey(key),
17
17
  props: createProps(status, utils),
18
- view: (view) => createView(status, view, utils),
18
+ view: (view) => createView(status, view, utils, className),
19
19
  });
20
20
  };
package/src/prose-plugin/view.ts CHANGED
@@ -29,17 +29,20 @@ const calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {
29
29
  }
30
30
 
31
31
  if (parent.height + parent.top - selected.bottom < target.height) {
32
- top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
32
+ const topOffset = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
33
+ if (topOffset > 0) {
34
+ top = topOffset;
35
+ }
33
36
  }
34
37
  return [top, left];
35
38
  });
36
39
  };
37
40
 
38
- export const createView = (status: Status, view: EditorView, utils: Utils) => {
41
+ export const createView = (status: Status, view: EditorView, utils: Utils, className: string) => {
39
42
  const wrapper = view.dom.parentNode;
40
43
  if (!wrapper) return {};
41
44
 
42
- const dropdownElement = createDropdown(utils);
45
+ const dropdownElement = createDropdown(utils, className);
43
46
  const mouseManager = createMouseManager();
44
47
  wrapper.appendChild(dropdownElement);
45
48
 
package/src/style.ts CHANGED
@@ -45,7 +45,8 @@ const itemStyle = (themeManager: ThemeManager, { css }: Emotion) => {
45
45
  color: ${palette('primary')};
46
46
  }
47
47
  }
48
- `;
48
+ }
49
+ `;
49
50
  };
50
51
 
51
52
  export const injectStyle = (themeManager: ThemeManager, emotion: Emotion) => {
package/src/utility.ts CHANGED
@@ -6,7 +6,7 @@ import type { Utils } from '@milkdown/utils';
6
6
 
7
7
  import { injectStyle } from './style';
8
8
 
9
- export const createDropdown = (utils: Utils) => {
9
+ export const createDropdown = (utils: Utils, className: string) => {
10
10
  const div = document.createElement('div');
11
11
  div.setAttribute('role', 'listbox');
12
12
  div.setAttribute('tabindex', '-1');
@@ -18,7 +18,7 @@ export const createDropdown = (utils: Utils) => {
18
18
  }
19
19
  });
20
20
 
21
- div.classList.add('slash-dropdown', 'hide');
21
+ div.classList.add(className, 'hide');
22
22
 
23
23
  return div;
24
24
  };