How to custom milkdown-slash-menu or change style

[dingshaohua-com]

how to costom milkdown-slash-menu or change style?

[Saul-Mirone]

You can find the full list of config here:
https://github.com/Milkdown/milkdown/blob/main/packages/crepe/src/feature/block-edit/index.ts#L9-L51

And the stylesheet here:
https://github.com/Milkdown/milkdown/blob/main/packages/crepe/src/theme/common/block-edit.css#L37

You can override whatever you need, but it's not possible to add an item now because there's no provided API for this.

[dingshaohua-com]

I find this:

// slash-menu/index.tsx
import { SlashView } from "./view";
import { Ctx } from "@milkdown/kit/ctx";
import { usePluginViewFactory } from "@prosemirror-adapter/react";
import { slashFactory } from '@milkdown/kit/plugin/slash';

const slash = slashFactory('slashMenu');
export const useSlash = () => {
  const pluginViewFactory = usePluginViewFactory();
  return {
    plugin: slash,
    config: (ctx: Ctx) => {
      ctx.set(slash.key, {
        props: {
          handleKeyDown: (view, event) => {
            if (!ctx.get(slash.key).opened) return false;
            return ["ArrowDown", "ArrowUp", "Enter"].includes(event.key);
          },
        },
        view: pluginViewFactory({
          component: SlashView,
        })
      });
    },
  };
};

// style.css
.slash-view {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba($color: #000000, $alpha: 0.1);
  padding: 10px;
  position: fixed;
  z-index: 1000;
}

// slash-menu/view.tsx
import { useEffect, useRef, useState } from 'react';
import { SlashProvider } from '@milkdown/kit/plugin/slash';
import { usePluginViewContext } from '@prosemirror-adapter/react';

export const SlashView = () => {
  const { view, prevState } = usePluginViewContext();
  const provider = useRef<SlashProvider>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isOpen, setIsOpen] = useState(false);
  useEffect(() => {
    if (!containerRef.current || !view) return;
    provider.current = new SlashProvider({
      content: containerRef.current,
      debounce: 50,
      //   trigger: '/', 触发条件，默认为斜撇
      //   shouldShow: ()=>true, // 干预返回结果
      //   floatingUIOptions: { // view 位置管理，默认左下角
      //     placement: 'bottom-start',
      //   },
    });
    provider.current.onShow = () => setIsOpen(true);
    provider.current.onHide = () => setIsOpen(false);
    return () => {
      provider.current?.destroy();
      provider.current = null;
    };
  }, [view]);
  useEffect(() => provider.current?.update(view, prevState));
  return (
    <div className="slash-view" style={{ display: isOpen ? 'block' : 'none' }} ref={containerRef}>
      <div className="slash-view-content">
        <div className="slash-view-content-item">哈哈哈</div>
      </div>
    </div>
  );
};

finaly

import { useSlash } from './plugin/slash-menu';

const CrepeEditor: React.FC<EditorConfig> = (props) => {
  const slash = useSlash();
  // ...
  crepe.editor.config(ctx=> slash.config(ctx)}).use(slash.plugin)
}