@milkdown/plugin-slash 6.5.2 → 6.5.3

package/src/config.ts

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

package/src/index.ts

@@ -1,34 +1,35 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { AtomList, createPlugin } from '@milkdown/utils';
+import { AtomList, createPlugin } from '@milkdown/utils'
 
-import type { Config } from './config';
-import { defaultConfig } from './config';
-import { createSlashPlugin } from './prose-plugin';
-import { CalcPosition, defaultCalcPosition } from './prose-plugin/view';
+import type { Config } from './config'
+import { defaultConfig } from './config'
+import { createSlashPlugin } from './prose-plugin'
+import type { CalcPosition } from './prose-plugin/view'
+import { defaultCalcPosition } from './prose-plugin/view'
 
-export type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';
-export { defaultActions, defaultConfig } from './config';
-export type { Action, WrappedAction } from './item';
-export { createDropdownItem } from './utility';
+export type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config'
+export { defaultActions, defaultConfig } from './config'
+export type { Action, WrappedAction } from './item'
+export { createDropdownItem } from './utility'
 
-export type Options = {
-    config: Config;
-    calcPosition: CalcPosition;
-};
+export interface Options {
+  config: Config
+  calcPosition: CalcPosition
+}
 
 export const slashPlugin = createPlugin<string, Options>((utils, options) => {
-    const slashConfig = options?.config ?? defaultConfig;
-    const calcPosition = options?.calcPosition ?? defaultCalcPosition;
+  const slashConfig = options?.config ?? defaultConfig
+  const calcPosition = options?.calcPosition ?? defaultCalcPosition
 
-    return {
-        prosePlugins: (_, ctx) => {
-            const config = slashConfig(ctx);
+  return {
+    prosePlugins: (_, ctx) => {
+      const config = slashConfig(ctx)
 
-            const plugin = createSlashPlugin(utils, config, 'slash-dropdown', calcPosition);
+      const plugin = createSlashPlugin(utils, config, 'slash-dropdown', calcPosition)
 
-            return [plugin];
-        },
-    };
-});
+      return [plugin]
+    },
+  }
+})
 
-export const slash = AtomList.create([slashPlugin()]);
+export const slash = AtomList.create([slashPlugin()])

package/src/item.ts

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

package/src/prose-plugin/dropdown.ts

@@ -1,51 +1,50 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+import scrollIntoView from 'smooth-scroll-into-view-if-needed'
 
-import { Status } from './status';
+import type { Status } from './status'
 
-type Listeners = {
-    mouseEnter: EventListener;
-    mouseLeave: EventListener;
-};
+interface Listeners {
+  mouseEnter: EventListener
+  mouseLeave: EventListener
+}
 
 export const renderDropdown = (status: Status, dropdownElement: HTMLElement, listeners: Listeners): boolean => {
-    const { actions } = status.get();
-
-    if (!actions.length) {
-        dropdownElement.classList.add('hide');
-        return false;
-    }
-
-    dropdownElement.childNodes.forEach((child) => {
-        child.removeEventListener('mouseenter', listeners.mouseEnter);
-        child.removeEventListener('mouseleave', listeners.mouseLeave);
-    });
-
-    while (dropdownElement.firstChild) {
-        dropdownElement.firstChild.remove();
-    }
-
-    actions.forEach(({ $ }) => {
-        $.classList.remove('active');
-        $.addEventListener('mouseenter', listeners.mouseEnter);
-        $.addEventListener('mouseleave', listeners.mouseLeave);
-        dropdownElement.appendChild($);
-    });
-
-    dropdownElement.style.maxHeight = '';
-    dropdownElement.classList.remove('hide');
-
-    const first$ = actions[0];
-    if (first$) {
-        first$.$.classList.add('active');
-        requestAnimationFrame(() => {
-            scrollIntoView(first$.$, {
-                scrollMode: 'if-needed',
-                block: 'nearest',
-                inline: 'nearest',
-            });
-        });
-    }
-
-    return true;
-};
+  const { actions } = status.get()
+
+  if (!actions.length) {
+    dropdownElement.classList.add('hide')
+    return false
+  }
+
+  dropdownElement.childNodes.forEach((child) => {
+    child.removeEventListener('mouseenter', listeners.mouseEnter)
+    child.removeEventListener('mouseleave', listeners.mouseLeave)
+  })
+
+  while (dropdownElement.firstChild)
+    dropdownElement.firstChild.remove()
+
+  actions.forEach(({ $ }) => {
+    $.classList.remove('active')
+    $.addEventListener('mouseenter', listeners.mouseEnter)
+    $.addEventListener('mouseleave', listeners.mouseLeave)
+    dropdownElement.appendChild($)
+  })
+
+  dropdownElement.style.maxHeight = ''
+  dropdownElement.classList.remove('hide')
+
+  const first$ = actions[0]
+  if (first$) {
+    first$.$.classList.add('active')
+    requestAnimationFrame(() => {
+      scrollIntoView(first$.$, {
+        scrollMode: 'if-needed',
+        block: 'nearest',
+        inline: 'nearest',
+      })
+    })
+  }
+
+  return true
+}

package/src/prose-plugin/index.ts

@@ -1,25 +1,26 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Plugin, PluginKey } from '@milkdown/prose/state';
-import { ThemeUtils } from '@milkdown/utils';
+import { Plugin, PluginKey } from '@milkdown/prose/state'
+import type { ThemeUtils } from '@milkdown/utils'
 
-import type { StatusConfigBuilder } from '..';
-import { createProps } from './props';
-import { createStatus } from './status';
-import { CalcPosition, createView } from './view';
+import type { StatusConfigBuilder } from '..'
+import { createProps } from './props'
+import { createStatus } from './status'
+import type { CalcPosition } from './view'
+import { createView } from './view'
 
-export const key = 'MILKDOWN_SLASH';
+export const key = 'MILKDOWN_SLASH'
 
 export const createSlashPlugin = (
-    utils: ThemeUtils,
-    builder: StatusConfigBuilder,
-    className: string,
-    calcPosition: CalcPosition,
+  utils: ThemeUtils,
+  builder: StatusConfigBuilder,
+  className: string,
+  calcPosition: CalcPosition,
 ) => {
-    const status = createStatus(builder);
+  const status = createStatus(builder)
 
-    return new Plugin({
-        key: new PluginKey(key),
-        props: createProps(status, utils),
-        view: (view) => createView(status, view, utils, className, calcPosition),
-    });
-};
+  return new Plugin({
+    key: new PluginKey(key),
+    props: createProps(status, utils),
+    view: view => createView(status, view, utils, className, calcPosition),
+  })
+}