Self created menu for v7 --> Use Toggle buttons and update with selection

[groege]

Hello everybody,

Hope you can help, I have spent more than 10h trying to solve this, I would really appreciate any help, couldn't find anything here/stackoverflow/google...
So I already implemented buttons to toggle i.e. Bold... the thing is I have to implement it as a toggle button... so if nothing is selected the bold button should be active if the text in the cursor position is bold...
If something is selected it should show 3 different states... (only the first 2 states would be fine if point 2 and 3 would be the same)

1. everything is bold
2. nothing is bold
3. undetermined (so parts are bold and parts arent)

So 1. problem I have no idea how to listen to the cursor/selection change
And 2. problem I have no idea how to query if the toggle is applied or not (i found some code examples but none of them worked)

I'd be really thankful for anything

[zgrybus]

Hello @groege
Recently, I've created such functionality in my Milkdown editor.

const doesRangeHasMark =
  (doc: Node, from: number, to: number) => (markType: MarkType) =>
    doc.rangeHasMark(from, to, markType);

const isMarkInSet = (marks: readonly Mark[]) => (markType: MarkType) =>
  !!markType.isInSet(marks);

export const useActiveMarks = () => {
  const { view } = useWidgetViewContext();
  const { state } = view;
  const { selection } = state;

  const activeMarksMap = useMemo(() => {
    const { doc, storedMarks } = state;
    const { from, to, empty, $from } = selection;

    if (empty) {
      const isSchemaActive = isMarkInSet(storedMarks || $from.marks());

      return {
        isStrongActive: isSchemaActive(strongSchema.type()),
        isEmphasisActive: isSchemaActive(emphasisSchema.type()),
        isStrikethroughActive: isSchemaActive(strikethroughSchema.type()),
      };
    }

    const isSchemaActive = doesRangeHasMark(doc, from, to);

    return {
      isStrongActive: isSchemaActive(strongSchema.type()),
      isEmphasisActive: isSchemaActive(emphasisSchema.type()),
      isStrikethroughActive: isSchemaActive(strikethroughSchema.type()),
    };
  }, [state, selection]);

  return activeMarksMap;
};

If you are interested, here is a working demo: https://daredata.github.io/notion-style-editor/

[ahamelers]

This demo seems to track selection changes, but in a way that is very complicated and not included in this code. How are you listening to the selection changes? Are you using milkdown to do so or your own wrapper refs?

[ahamelers]

I've blatantly ripped off plugin-listener to make this selectionListener plugin

import {createSlice} from '@milkdown/ctx';
// eslint-disable-next-line import/no-unresolved
import {Plugin, PluginKey} from '@milkdown/prose/state';
import {InitReady, prosePluginsCtx} from '@milkdown/core';
import {debounce} from 'lodash';

export class SelectionManager {
  selectionListeners = [];

  get listeners() {
    return {
      selection: this.selectionListeners,
    }
  }

  selection(fn) {
    this.selectionListeners.push(fn);
    return this;
  }
}

export const selectionCtx = createSlice(new SelectionManager(), 'selection-listener');

export const key = new PluginKey('MILKDOWN_SELECTION_LISTENER');

export const selectionListener = (ctx) => {
  ctx.inject(selectionCtx, new SelectionManager());

  return async () => {
    await ctx.wait(InitReady);
    const listener = ctx.get(selectionCtx);
    const {listeners} = listener;

    let prevSelection = null;

    const plugin = new Plugin({
      key,
      state: {
        init: () => {
          // do nothing
        },
        apply: (tr) => {
          if (tr.selection.eq(prevSelection)) return;

          const handler = debounce(() => {
            const {selection, doc} = tr;
            if (listeners.selection.length > 0 && (prevSelection == null || !prevSelection.eq(selection))) {
              listeners.selection.forEach((fn) => {
                fn(ctx, selection, doc);
              });
            }
            prevSelection = tr.selection;
          }, 200);

          return handler();
        },
      },
    });

    ctx.update(prosePluginsCtx, (x) => x.concat(plugin));
  };
};

[adaboese]

What's the opposite of these commands? wrapInOrderedListCommand, wrapInBulletListCommand, wrapInBlockquoteCommand?

[adaboese]

i.e. how do I "unwrap" block quote?

[adaboese]

I figured out lists. It is:

if (active) {
  call(liftListItemCommand.key);
} else {
  call(wrapInBulletListCommand.key);
}

still need to find a way for the quote

[adaboese]

Posted as a separate question https://github.com/orgs/Milkdown/discussions/1197

[kyung-min-sun]

Here's a typescript version in case anyone's interested (:

Selection Listener

import { InitReady, prosePluginsCtx } from "@milkdown/core";
import { Plugin, PluginKey, Transaction } from "@milkdown/prose/state";
import { type Ctx } from "@milkdown/kit/ctx";
import { createSlice } from "@milkdown/ctx";
import { debounce } from "lodash";

type SelectionFn = (
  ctx: Ctx,
  selection: Transaction["selection"],
  doc: Transaction["doc"]
) => void;

export class SelectionManager {
  selectionListeners: SelectionFn[] = [];

  get listeners() {
    return {
      selection: this.selectionListeners,
    };
  }

  selection(fn: SelectionFn) {
    this.selectionListeners.push(fn);
    return this;
  }
}

export const selectionCtx = createSlice(
  new SelectionManager(),
  "selection-listener"
);

export const key = new PluginKey("MILKDOWN_SELECTION_LISTENER");

export const selectionListener = (ctx: Ctx) => {
  ctx.inject(selectionCtx, new SelectionManager());

  return async () => {
    await ctx.wait(InitReady);
    const listener = ctx.get(selectionCtx);
    const { listeners } = listener;

    let prevSelection: Transaction["selection"] | null = null;

    const plugin = new Plugin({
      key,
      state: {
        init: () => undefined,
        apply: (tr) => {
          if (prevSelection && tr.selection.eq(prevSelection)) return;

          const handler = debounce(() => {
            const { selection, doc } = tr;
            if (
              listeners.selection.length > 0 &&
              (prevSelection == null || !prevSelection.eq(selection))
            ) {
              listeners.selection.forEach((fn) => {
                fn(ctx, selection, doc);
              });
            }
            prevSelection = tr.selection;
          }, 200);

          return handler();
        },
      },
    });

    ctx.update(prosePluginsCtx, (x) => x.concat(plugin));
  };
};

Editor Context

import {
  Editor,
  rootCtx,
  defaultValueCtx,
  schemaCtx,
} from "@milkdown/kit/core";

import { Schema } from "@milkdown/prose/model";
import { Milkdown, MilkdownProvider, useEditor } from "@milkdown/react";
import { type Transaction } from "@milkdown/prose/state";
import { selectionListener, selectionCtx } from "./markdown/selectionListener";
import { listener, listenerCtx } from "@milkdown/plugin-listener";

import { type Ctx } from "@milkdown/kit/ctx";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { gfm } from "@milkdown/preset-gfm";
import { nord } from "@milkdown/theme-nord";

const { get, loading } = useEditor((root) =>
    Editor.make()
      .config(nord)
      .config((ctx) => {
        const plistener = ctx.get(listenerCtx);
        plistener.markdownUpdated((_ctx, markdown, prevMarkdown) => {
          if (markdown !== prevMarkdown) onChange?.(markdown);
        });
        const slistener = ctx.get(selectionCtx);
        slistener.selection((_, selection, doc) => {
          const schema = ctx.get(schemaCtx);
          setSelection({ doc, selection, schema });
        });
      })
      .use(commonmark)
      .use(gfm)
      .use(selectionListener)
      .use(listener)
  );

Selection Handler Hook

import { Schema } from "@milkdown/prose/model";
import { type Transaction } from "@milkdown/prose/state";

const [selection, setSelection] = useState<
    Pick<Transaction, "doc" | "selection"> & { schema: Schema }
  >();
  const [active, setActive] = useState<{name: string}[]>([]);
  const [heading, setHeading] = useState<string>();

  useEffect(() => {
    if (selection) {
      const { doc, selection: sel, schema } = selection;
      const { from, to } = sel;
      const resolution = doc.resolve(from);
      if (!("path" in resolution)) return;
      const { path, parent } = resolution;
      if (!parent) return;
      const newActive = [
        ...(path as { type?: string[]).flatMap(
          (i) => i.type ?? []
        ),
        ...Object.keys(schema.marks).flatMap((m) =>
          doc.rangeHasMark(from === to ? from - 1 : from, to, schema.marks[m])
            ? schema.marks[m]
            : []
        ),
      ];
      setActive(newActive as typeof active);
      setHeading(parent.attrs?.level || 0);
    }
  }, [selection]);