How to listen for selection changes in the editor?

[dingshaohua-com]

i want self created menu for v7, but i dont know how to listen for selection changes in the editor?

some code for chatGpt:

  const updateActiveState = (ctx) => {
    const editorState = ctx.get(editorStateCtx);
    const schema = editorState.schema;
    const strongType = schema.marks.strong;
    console.log(strongType);

    const { from, to, empty } = editorState.selection;
    if (empty) {
      const res = strongType.isInSet(editorState.storedMarks || editorState.selection.$from.marks()) != null;
      setIsStrongActive(res);
    } else {
      const isActive = editorState.doc.rangeHasMark(from, to, strongType);
      setIsStrongActive(isActive);
    }
  };

  
  useEffect(() => {
    const editor = get();
    if (!editor) return;

    const interval = setInterval(() => {
      editor.action((ctx) => {
        updateActiveState(ctx);
      });
    }, 1000); // 每200ms检查一次

    return () => clearInterval(interval);
  }, [get]);

I think this approach is terrible. I found that people had already raised related issues as early as two years ago.

Additionally, I reached out to you on Discord, but I never got a reply.

[Saul-Mirone]

First, you can listen to transaction change from:

crepe.on((listener) => {
  listener.updated((ctx, doc, prevDoc) => {
    const selectionChanged = doc.selection.eq(prevDoc.selection);
    if (selectionChanged) {
      // selection changed
    }
  });
});

Second, I don't have any duty to reply you on Sunday.

[dingshaohua-com]

Sorry, I didn’t mean to blame you—I was just wondering whether Discord isn’t receiving messages or if you’re simply not active there.
If my tone made you uncomfortable, I apologize!

[dingshaohua-com]

The listener.updated event isn't detecting selection changes

import { Crepe } from '@milkdown/crepe';
import '@milkdown/crepe/theme/frame.css'; // 一个完整主题（可选，其它可选项见下）
import '@milkdown/crepe/theme/common/style.css'; // 基础样式（必需）
import { Milkdown, MilkdownProvider, useEditor } from '@milkdown/react';

const CrepeEditor: React.FC = () => {
  const { get } = useEditor((root) => {
    const crepe = new Crepe({ root, defaultValue: 'Hello, Milkdown!' });
    crepe.on((listener) => {
      listener.updated((ctx, doc, prevDoc) => {
        console.log(123); // can't print 
      });
    });
    return crepe;
  });

  return <Milkdown />;
};

export const MilkdownEditorWrapper: React.FC = () => {
  return (
    <MilkdownProvider>
      <CrepeEditor />
    </MilkdownProvider>
  );
};

export default MilkdownEditorWrapper;

[dingshaohua-com]

By the way, I really love this MD editor. I’d say it and Tiptap are the undisputed #1s—one as the best rich-text editor, the other as the best markdown editor.

[Saul-Mirone]

Should be implemented by #1900

[Saul-Mirone]

Thanks for your support. Milkdown is a none commercial software, which means the maintenance of milkdown is completely voluntary. However, tiptap is a company, they just raised money and are expanding. But for the framework itself, I personally think https://prosekit.dev/ has a more elegant implementation and API design.