active custom slash menu from block-view event

[dingshaohua-com]

i custom slash menu

import { $ctx } from '@milkdown/kit/utils';
import { useInstance } from '@milkdown/react';
import { useEffect, useRef, useState } from 'react';
import { SlashProvider } from '@milkdown/kit/plugin/slash';
import { usePluginViewContext } from '@prosemirror-adapter/react';


// $ctx是创建slice 的简单封装
export const slashBlockApi:any = $ctx(
  { // 这里初始化参数，其实意义不大
    show: () => {},
    hide: () => {},
  },
  'menuAPICtx'
);

export const SlashView = () => {
  const instance = useInstance();
  const [loading, getEditor] = instance;
  const editor = getEditor()!;
  const { view, prevState } = usePluginViewContext();
  const provider = useRef<SlashProvider>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!containerRef.current || !view) return;
    provider.current = new SlashProvider({
      content: containerRef.current,
      debounce: 50,
      offset: 10,
      floatingUIOptions: {
        placement: 'left',
      }
    });
    return () => {
      provider.current?.destroy();
      provider.current = null;
      containerRef.current?.remove();
    };
  }, [view]);
  useEffect(() => provider.current?.update(view, prevState));

  const show = () => {
    provider.current?.show();
  };
  const hide = () => {
    provider.current?.hide();
  };

  useEffect(() => {
    if (!editor) return;
    editor.use(slashBlockApi);
    editor.ctx.set(slashBlockApi.key, {
      show: () => show(),
      hide: () => hide(),
    })
    
  }, [loading]);

  return (
    <div className="slash-view" ref={containerRef}>
      <div className="slash-view-content">
        <div className="slash-view-content-item">
         删除
        </div>
      </div>
    </div>
  );
};

if i call show method from block-view component

import plus from '../../assets/plus.svg';
import { useEffect, useRef } from 'react';
import block from '../../assets/block.svg';
import { useInstance } from '@milkdown/react';
import { slashBlockApi } from '../slash-menu-block/view';
import { BlockProvider } from '@milkdown/kit/plugin/block';
import { usePluginViewContext } from '@prosemirror-adapter/react';

export const BlockView = (props: any) => {
  const ref = useRef<HTMLDivElement>(null);
  const tooltipProvider = useRef<BlockProvider>(null);
  const all = usePluginViewContext();
  const { view, prevState } = all;
  const [loading, get] = useInstance();

  useEffect(() => {
    const div = ref.current;
    if (loading || !div) return;

    const editor = get();
    if (!editor) return;

    tooltipProvider.current = new BlockProvider({
      ctx: editor.ctx,
      content: div,
      getOffset: () => 16,
      getPlacement: ({ active, blockDom }) => {
        if (active.node.type.name === 'heading') return 'left';
        return 'left';
      },
    });
    tooltipProvider.current?.update();

    return () => {
      tooltipProvider.current?.destroy();
      div.remove();
    };
  }, [loading]);

  useEffect(() => {
    if (view && prevState) {
      tooltipProvider.current?.update();
    }
  }, [view, prevState]);

  const onClickBlock = () => {
    const editor = get();
    if (!editor) return;
    const sbApi: any = editor.ctx.get(slashBlockApi.key);
    sbApi.show();
  };

    // 添加全局点击事件监听器
    const blockRef = useRef<HTMLImageElement>(null);
    useEffect(() => {
      const handleClickOutside = (event: MouseEvent) => {
        const editor = get();
        if (!editor) return;
  
        // 如果点击的不是 block-view 元素，则关闭菜单
        if (blockRef.current && !blockRef.current.contains(event.target as Node)) {
          const sbApi: any = editor.ctx.get(slashBlockApi.key);
          sbApi.hide();
        }
      };
  
      document.addEventListener('mousedown', handleClickOutside);
      return () => {
        document.removeEventListener('mousedown', handleClickOutside);
      };
    }, []);

  return (
    <div>
      <div ref={ref} className="block-view">
        <div className="block-view-container">
          <img src={plus} alt="plus" />
          <img src={block} alt="block" onClick={onClickBlock}  ref={blockRef} />
        </div>
      </div>
    </div>
  );
};

the slash menu postion is err, i want like this

how can do, i am doing this more than 3 day!

i am try read your code crepe/src/feature/block-edit/handle, but it is too hard for me

[Saul-Mirone]

Your editor container needs to have position: relative style to make floating ui works.