@milkdown/plugin-slash 4.14.2 → 5.1.1

package/src/config.ts

@@ -1,5 +1,6 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { commandsCtx, themeToolCtx } from '@milkdown/core';
+import { commandsCtx, schemaCtx, themeToolCtx } from '@milkdown/core';
+import type { Ctx } from '@milkdown/ctx';
 import {
     InsertHr,
     InsertImage,
@@ -11,86 +12,137 @@ import {
     WrapInBulletList,
     WrapInOrderedList,
 } from '@milkdown/preset-gfm';
+import { EditorState, Node } from '@milkdown/prose';
 
-import type { SlashConfig } from '.';
-import { createDropdownItem, nodeExists } from './utility';
+import { WrappedAction } from './item';
+import { createDropdownItem } from './utility';
 
-export const config: SlashConfig = ({ ctx }) => [
-    {
-        id: 'h1',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Large Heading', 'h1'),
-        command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 1),
-        keyword: ['h1', 'large heading'],
-        enable: nodeExists('heading'),
-    },
-    {
-        id: 'h2',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Medium Heading', 'h2'),
-        command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 2),
-        keyword: ['h2', 'medium heading'],
-        enable: nodeExists('heading'),
-    },
-    {
-        id: 'h3',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Small Heading', 'h3'),
-        command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 3),
-        keyword: ['h3', 'small heading'],
-        enable: nodeExists('heading'),
-    },
-    {
-        id: 'bulletList',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Bullet List', 'bulletList'),
-        command: () => ctx.get(commandsCtx).call(WrapInBulletList),
-        keyword: ['bullet list', 'ul'],
-        enable: nodeExists('bullet_list'),
-    },
-    {
-        id: 'orderedList',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Ordered List', 'orderedList'),
-        command: () => ctx.get(commandsCtx).call(WrapInOrderedList),
-        keyword: ['ordered list', 'ol'],
-        enable: nodeExists('ordered_list'),
-    },
-    {
-        id: 'taskList',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Task List', 'taskList'),
-        command: () => ctx.get(commandsCtx).call(TurnIntoTaskList),
-        keyword: ['task list', 'task'],
-        enable: nodeExists('task_list_item'),
-    },
-    {
-        id: 'image',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Image', 'image'),
-        command: () => ctx.get(commandsCtx).call(InsertImage),
-        keyword: ['image'],
-        enable: nodeExists('image'),
-    },
-    {
-        id: 'blockquote',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Quote', 'quote'),
-        command: () => ctx.get(commandsCtx).call(WrapInBlockquote),
-        keyword: ['quote', 'blockquote'],
-        enable: nodeExists('blockquote'),
-    },
-    {
-        id: 'table',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Table', 'table'),
-        command: () => ctx.get(commandsCtx).call(InsertTable),
-        keyword: ['table'],
-        enable: nodeExists('table'),
-    },
-    {
-        id: 'code',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Code Fence', 'code'),
-        command: () => ctx.get(commandsCtx).call(TurnIntoCodeFence),
-        keyword: ['code'],
-        enable: nodeExists('fence'),
-    },
-    {
-        id: 'divider',
-        dom: createDropdownItem(ctx.get(themeToolCtx), 'Divide Line', 'divider'),
-        command: () => ctx.get(commandsCtx).call(InsertHr),
-        keyword: ['divider', 'hr'],
-        enable: nodeExists('hr'),
-    },
-];
+type Nullable<T> = T | null | undefined;
+
+export type StatusConfig = {
+    placeholder?: Nullable<string>;
+    actions?: Nullable<WrappedAction[]>;
+};
+
+export type StatusConfigBuilderParams = {
+    content: string;
+    isTopLevel: boolean;
+    parentNode: Node;
+    state: EditorState;
+};
+
+export type StatusConfigBuilder = (params: StatusConfigBuilderParams) => Nullable<StatusConfig>;
+
+export type Config = (ctx: Ctx) => StatusConfigBuilder;
+
+export const defaultActions = (ctx: Ctx, input = '/'): WrappedAction[] => {
+    const { nodes } = ctx.get(schemaCtx);
+    const actions: Array<WrappedAction & { keyword: string[]; typeName: string }> = [
+        {
+            id: 'h1',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Large Heading', 'h1'),
+            command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 1),
+            keyword: ['h1', 'large heading'],
+            typeName: 'heading',
+        },
+        {
+            id: 'h2',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Medium Heading', 'h2'),
+            command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 2),
+            keyword: ['h2', 'medium heading'],
+            typeName: 'heading',
+        },
+        {
+            id: 'h3',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Small Heading', 'h3'),
+            command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 3),
+            keyword: ['h3', 'small heading'],
+            typeName: 'heading',
+        },
+        {
+            id: 'bulletList',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Bullet List', 'bulletList'),
+            command: () => ctx.get(commandsCtx).call(WrapInBulletList),
+            keyword: ['bullet list', 'ul'],
+            typeName: 'bullet_list',
+        },
+        {
+            id: 'orderedList',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Ordered List', 'orderedList'),
+            command: () => ctx.get(commandsCtx).call(WrapInOrderedList),
+            keyword: ['ordered list', 'ol'],
+            typeName: 'ordered_list',
+        },
+        {
+            id: 'taskList',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Task List', 'taskList'),
+            command: () => ctx.get(commandsCtx).call(TurnIntoTaskList),
+            keyword: ['task list', 'task'],
+            typeName: 'task_list_item',
+        },
+        {
+            id: 'image',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Image', 'image'),
+            command: () => ctx.get(commandsCtx).call(InsertImage),
+            keyword: ['image'],
+            typeName: 'image',
+        },
+        {
+            id: 'blockquote',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Quote', 'quote'),
+            command: () => ctx.get(commandsCtx).call(WrapInBlockquote),
+            keyword: ['quote', 'blockquote'],
+            typeName: 'blockquote',
+        },
+        {
+            id: 'table',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Table', 'table'),
+            command: () => ctx.get(commandsCtx).call(InsertTable),
+            keyword: ['table'],
+            typeName: 'table',
+        },
+        {
+            id: 'code',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Code Fence', 'code'),
+            command: () => ctx.get(commandsCtx).call(TurnIntoCodeFence),
+            keyword: ['code'],
+            typeName: 'fence',
+        },
+        {
+            id: 'divider',
+            dom: createDropdownItem(ctx.get(themeToolCtx), 'Divide Line', 'divider'),
+            command: () => ctx.get(commandsCtx).call(InsertHr),
+            keyword: ['divider', 'hr'],
+            typeName: 'hr',
+        },
+    ];
+
+    const userInput = input.slice(1).toLocaleLowerCase();
+
+    return actions
+        .filter((action) => !!nodes[action.typeName] && action.keyword.some((keyword) => keyword.includes(userInput)))
+        .map(({ keyword, typeName, ...action }) => action);
+};
+
+export const defaultConfig: Config = (ctx) => {
+    return ({ content, isTopLevel }) => {
+        if (!isTopLevel) return null;
+
+        if (!content) {
+            return { placeholder: 'Type / to use the slash commands...' };
+        }
+
+        if (content.startsWith('/')) {
+            return content === '/'
+                ? {
+                      placeholder: 'Type to filter...',
+                      actions: defaultActions(ctx),
+                  }
+                : {
+                      actions: defaultActions(ctx, content),
+                  };
+        }
+
+        return null;
+    };
+};

package/src/index.ts

@@ -1,46 +1,29 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { EditorState, NodeWithPos } from '@milkdown/prose';
-import { AtomList, createProsePlugin, Utils } from '@milkdown/utils';
+import { AtomList, createPlugin } from '@milkdown/utils';
 
-import { config } from './config';
-import { WrappedAction } from './item';
+import type { Config } from './config';
+import { defaultConfig } from './config';
 import { createSlashPlugin } from './prose-plugin';
-import { CursorStatus } from './prose-plugin/status';
 
-export { config } from './config';
-export { CursorStatus } from './prose-plugin/status';
-export { createDropdownItem, nodeExists } from './utility';
-
-export type SlashConfig = (utils: Utils) => WrappedAction[];
+export type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';
+export { defaultActions, defaultConfig } from './config';
+export { createDropdownItem } from './utility';
 
 export type Options = {
-    shouldDisplay: (parent: NodeWithPos, state: EditorState) => boolean;
-    config: SlashConfig;
-    placeholder: {
-        [CursorStatus.Empty]: string;
-        [CursorStatus.Slash]: string;
-    };
+    config: Config;
 };
 
-export const slashPlugin = createProsePlugin<Options>((options, utils) => {
-    const slashConfig = options?.config ?? config;
-    const placeholder = {
-        [CursorStatus.Empty]: 'Type / to use the slash commands...',
-        [CursorStatus.Slash]: 'Type to filter...',
-        ...(options?.placeholder ?? {}),
-    };
-    const cfg = slashConfig(utils);
-    const shouldDisplay =
-        options?.shouldDisplay ??
-        ((parent, state) => {
-            const isTopLevel = state.selection.$from.depth === 1;
-            return parent.node.childCount <= 1 && isTopLevel;
-        });
-
-    const plugin = createSlashPlugin(utils, cfg, placeholder, shouldDisplay);
+export const slashPlugin = createPlugin<string, Options>((utils, options) => {
+    const slashConfig = options?.config ?? defaultConfig;
+
     return {
-        id: 'slash',
-        plugin,
+        prosePlugins: (_, ctx) => {
+            const config = slashConfig(ctx);
+
+            const plugin = createSlashPlugin(utils, config);
+
+            return [plugin];
+        },
     };
 });
 

package/src/item.ts

@@ -1,26 +1,21 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { Command, Schema } from '@milkdown/prose';
+import type { Command } from '@milkdown/prose';
 
 import { cleanUpAndCreateNode } from './utility';
 
 export type Action = {
     id: string;
     $: HTMLElement;
-    keyword: string[];
     command: Command;
-    enable: (schema: Schema) => boolean;
 };
 
-export type WrappedAction = Pick<Action, 'keyword' | 'id'> & {
-    enable: (schema: Schema) => boolean;
+export type WrappedAction = Pick<Action, 'id'> & {
     command: () => void;
     dom: HTMLElement;
 };
 
 export const transformAction = (action: WrappedAction): Action => ({
     id: action.id,
-    keyword: action.keyword,
     $: action.dom,
     command: cleanUpAndCreateNode(action.command),
-    enable: action.enable,
 });

package/src/prose-plugin/dropdown.ts

@@ -1,44 +1,41 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import scrollIntoView from 'smooth-scroll-into-view-if-needed';
 
-import { Action } from '../item';
 import { Status } from './status';
 
-export const renderDropdown = (status: Status, dropdownElement: HTMLElement, items: Action[]): boolean => {
-    const { filter } = status.get();
+type Listeners = {
+    mouseEnter: EventListener;
+    mouseLeave: EventListener;
+};
+
+export const renderDropdown = (status: Status, dropdownElement: HTMLElement, listeners: Listeners): boolean => {
+    const { actions } = status.get();
 
-    if (!status.isSlash()) {
+    if (!actions.length) {
         dropdownElement.classList.add('hide');
         return false;
     }
 
-    const activeList = items
-        .filter((item) => {
-            item.$.classList.remove('active');
-            const result = item.keyword.some((key) => key.includes(filter.toLocaleLowerCase()));
-            if (result) {
-                return true;
-            }
-            item.$.classList.add('hide');
-            return false;
-        })
-        .map((item) => {
-            item.$.classList.remove('hide');
-            return item;
-        });
+    dropdownElement.childNodes.forEach((child) => {
+        child.removeEventListener('mouseenter', listeners.mouseEnter);
+        child.removeEventListener('mouseleave', listeners.mouseLeave);
+    });
 
-    status.setActions(activeList);
+    // Reset dropdownElement children
+    dropdownElement.textContent = '';
 
-    if (activeList.length === 0) {
-        dropdownElement.classList.add('hide');
-        return false;
-    }
+    actions.forEach(({ $ }) => {
+        $.classList.remove('active');
+        $.addEventListener('mouseenter', listeners.mouseEnter);
+        $.addEventListener('mouseleave', listeners.mouseLeave);
+        dropdownElement.appendChild($);
+    });
 
     dropdownElement.classList.remove('hide');
 
-    activeList[0].$.classList.add('active');
+    actions[0].$.classList.add('active');
     requestAnimationFrame(() => {
-        scrollIntoView(activeList[0].$, {
+        scrollIntoView(actions[0].$, {
             scrollMode: 'if-needed',
             block: 'nearest',
             inline: 'nearest',

package/src/prose-plugin/index.ts

@@ -1,26 +1,20 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { EditorState, NodeWithPos, Plugin, PluginKey } from '@milkdown/prose';
+import { Plugin, PluginKey } from '@milkdown/prose';
 import { Utils } from '@milkdown/utils';
 
-import { transformAction, WrappedAction } from '../item';
+import type { StatusConfigBuilder } from '..';
 import { createProps } from './props';
-import { createStatus, CursorStatus } from './status';
+import { createStatus } from './status';
 import { createView } from './view';
 
 export const key = 'MILKDOWN_PLUGIN_SLASH';
 
-export const createSlashPlugin = (
-    utils: Utils,
-    items: WrappedAction[],
-    placeholder: Record<CursorStatus, string>,
-    shouldDisplay: (parent: NodeWithPos, state: EditorState) => boolean,
-) => {
-    const status = createStatus();
-    const actions = items.map(transformAction);
+export const createSlashPlugin = (utils: Utils, builder: StatusConfigBuilder) => {
+    const status = createStatus(builder);
 
     return new Plugin({
         key: new PluginKey(key),
-        props: createProps(status, utils, placeholder, shouldDisplay),
-        view: (view) => createView(status, actions, view, utils),
+        props: createProps(status, utils),
+        view: (view) => createView(status, view, utils),
     });
 };

package/src/prose-plugin/input.ts

@@ -3,7 +3,6 @@
 import { EditorView } from '@milkdown/prose';
 import scrollIntoView from 'smooth-scroll-into-view-if-needed';
 
-import { Action } from '../item';
 import { Status } from './status';
 
 export const createMouseManager = () => {
@@ -27,9 +26,10 @@ export const handleMouseMove = (mouseManager: MouseManager) => () => {
 
 export const handleMouseEnter = (status: Status, mouseManager: MouseManager) => (e: MouseEvent) => {
     if (mouseManager.isLock()) return;
-    const active = status.get().activeActions.findIndex((x) => x.$.classList.contains('active'));
+    const { actions } = status.get();
+    const active = actions.findIndex((x) => x.$.classList.contains('active'));
     if (active >= 0) {
-        status.get().activeActions[active].$.classList.remove('active');
+        actions[active].$.classList.remove('active');
     }
     const { target } = e;
     if (!(target instanceof HTMLElement)) return;
@@ -43,7 +43,7 @@ export const handleMouseLeave = () => (e: MouseEvent) => {
 };
 
 export const handleClick =
-    (status: Status, items: Action[], view: EditorView, dropdownElement: HTMLElement) =>
+    (status: Status, view: EditorView, dropdownElement: HTMLElement) =>
     (e: Event): void => {
         const { target } = e;
         if (!(target instanceof HTMLElement)) return;
@@ -54,11 +54,13 @@ export const handleClick =
             e.preventDefault();
         };
 
-        const el = Object.values(items).find(({ $ }) => $.contains(target));
+        const { actions } = status.get();
+
+        const el = Object.values(actions).find(({ $ }) => $.contains(target));
         if (!el) {
             if (status.isEmpty()) return;
 
-            status.clearStatus();
+            status.clear();
             dropdownElement.classList.add('hide');
             stop();
 
@@ -75,18 +77,18 @@ export const handleKeydown =
         if (!mouseManager.isLock()) mouseManager.lock();
 
         const { key } = e;
-        if (!status.isSlash()) return;
+        if (status.isEmpty()) return;
         if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(key)) return;
 
-        const { activeActions } = status.get();
+        const { actions } = status.get();
 
-        let active = activeActions.findIndex(({ $ }) => $.classList.contains('active'));
+        let active = actions.findIndex(({ $ }) => $.classList.contains('active'));
         if (active < 0) active = 0;
 
         const moveActive = (next: number) => {
-            activeActions[active].$.classList.remove('active');
-            activeActions[next].$.classList.add('active');
-            scrollIntoView(activeActions[next].$, {
+            actions[active].$.classList.remove('active');
+            actions[next].$.classList.add('active');
+            scrollIntoView(actions[next].$, {
                 scrollMode: 'if-needed',
                 block: 'nearest',
                 inline: 'nearest',
@@ -94,14 +96,14 @@ export const handleKeydown =
         };
 
         if (key === 'ArrowDown') {
-            const next = active === activeActions.length - 1 ? 0 : active + 1;
+            const next = active === actions.length - 1 ? 0 : active + 1;
 
             moveActive(next);
             return;
         }
 
         if (key === 'ArrowUp') {
-            const next = active === 0 ? activeActions.length - 1 : active - 1;
+            const next = active === 0 ? actions.length - 1 : active - 1;
 
             moveActive(next);
             return;
@@ -110,11 +112,11 @@ export const handleKeydown =
         if (key === 'Escape') {
             if (status.isEmpty()) return;
 
-            status.clearStatus();
+            status.clear();
             dropdownElement.classList.add('hide');
             return;
         }
 
-        activeActions[active].command(view.state, view.dispatch, view);
-        activeActions[active].$.classList.remove('active');
+        actions[active].command(view.state, view.dispatch, view);
+        actions[active].$.classList.remove('active');
     };

package/src/prose-plugin/props.ts

@@ -1,10 +1,10 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
 import { ThemeTool } from '@milkdown/core';
-import { Decoration, DecorationSet, EditorState, EditorView, findParentNode, NodeWithPos } from '@milkdown/prose';
+import { Decoration, DecorationSet, EditorState, EditorView, findParentNode } from '@milkdown/prose';
 import { Utils } from '@milkdown/utils';
 
-import { CursorStatus, Status } from './status';
+import type { Status } from './status';
 
 export type Props = ReturnType<typeof createProps>;
 
@@ -29,19 +29,13 @@ const createSlashStyle = () => css`
     }
 `;
 
-export const createProps = (
-    status: Status,
-    utils: Utils,
-    placeholder: Record<CursorStatus, string>,
-    shouldDisplay: (parent: NodeWithPos, state: EditorState) => boolean,
-) => {
+export const createProps = (status: Status, utils: Utils) => {
     const emptyStyle = utils.getStyle(createEmptyStyle);
     const slashStyle = utils.getStyle(createSlashStyle);
 
     return {
         handleKeyDown: (_: EditorView, event: Event) => {
-            const { cursorStatus, activeActions } = status.get();
-            if (cursorStatus !== CursorStatus.Slash || activeActions.length === 0) {
+            if (status.isEmpty()) {
                 return false;
             }
             if (!(event instanceof KeyboardEvent)) {
@@ -55,46 +49,43 @@ export const createProps = (
             return true;
         },
         decorations: (state: EditorState) => {
-            const parent = findParentNode(({ type }) => type.name === 'paragraph')(state.selection);
+            const paragraph = findParentNode(({ type }) => type.name === 'paragraph')(state.selection);
 
-            if (!parent || !shouldDisplay(parent, state)) {
-                status.clearStatus();
+            if (
+                !paragraph ||
+                paragraph.node.childCount > 1 ||
+                state.selection.$from.parentOffset !== paragraph.node.textContent.length
+            ) {
+                status.clear();
                 return;
             }
 
-            const isEmpty = parent.node.content.size === 0;
-            const isSlash = parent.node.textContent === '/' && state.selection.$from.parentOffset > 0;
-            const isSearch = parent.node.textContent.startsWith('/') && state.selection.$from.parentOffset > 1;
+            const { placeholder, actions } = status.update({
+                parentNode: state.selection.$from.node(state.selection.$from.depth - 1),
+                isTopLevel: state.selection.$from.depth === 1,
+                content: paragraph.node.textContent,
+                state,
+            });
+
+            if (!placeholder) {
+                return null;
+            }
 
             const createDecoration = (text: string, className: (string | undefined)[]) => {
-                const pos = parent.pos;
+                const pos = paragraph.pos;
                 return DecorationSet.create(state.doc, [
-                    Decoration.node(pos, pos + parent.node.nodeSize, {
+                    Decoration.node(pos, pos + paragraph.node.nodeSize, {
                         class: className.filter((x) => x).join(' '),
                         'data-text': text,
                     }),
                 ]);
             };
 
-            if (isEmpty) {
-                status.clearStatus();
-                const text = placeholder[CursorStatus.Empty];
-                return createDecoration(text, [emptyStyle, 'empty-node']);
-            }
-
-            if (isSlash) {
-                status.setSlash();
-                const text = placeholder[CursorStatus.Slash];
-                return createDecoration(text, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);
-            }
-
-            if (isSearch) {
-                status.setSlash(parent.node.textContent.slice(1));
-                return null;
+            if (actions.length) {
+                return createDecoration(placeholder, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);
             }
 
-            status.clearStatus();
-            return null;
+            return createDecoration(placeholder, [emptyStyle, 'empty-node']);
         },
     };
 };