Provide an example of how to create a menu such that existed in @milkdown/plugin-menu

[adaboese]

v7 announcement says that it is exceptionally simple, but I am struggling to figure out how to do it.

https://mirone.me/a-brief-introduction-to-milkdown-v7/

The link that's included in v7 links to 404.

I tried porting v6 plugin, but seems like a lot of the API has changed.

Here is what I got so far:

const Button = ({
  icon,
  onClick,
}: {
  readonly icon: React.ReactNode;
  readonly onClick: () => void;
}) => {
  return (
    <button
      className={css({
        background: '#fff',
        border: '1px solid #eee',
        borderRadius: '8px',
        cursor: 'pointer',
        fontSize: '16px',
        fontWeight: 700,
        margin: '8px',
        padding: '8px',
      })}
      onClick={onClick}
      type="button"
    >
      {icon}
    </button>
  );
};

type Call = <T>(command: CmdKey<T>, payload?: T) => void;

const Toolbar = ({ editor }: { readonly editor: UseEditorReturn }) => {
  const { get } = editor;

  const call = useCallback<Call>(
    (command, payload) => {
      return get()?.action(callCommand(command, payload));
    },
    [get],
  );

  return (
    <div
      className={css({
        background: '#fff',
        border: '1px solid #eee',
        borderRadius: '8px',
        display: 'flex',
        position: 'sticky',
        top: 0,
      })}
    >
      <Button
        icon={<Bold />}
        onClick={() => {
          call(toggleStrongCommand.key);
        }}
      />
    </div>
  );
};

The two problems that I am facing:

• How do I toggle icon to indicate if the current selection is already strong? I want to show different icons depending on whether clicking the button will make text bold or make it regular.
• The current highlighted text becomes no longer highlighted after I click the button.

Figured out the latter. Had to replace onClick with:

onMouseDown={(event) => {
  event.preventDefault();
  event.stopPropagation();

  onClick();
}}

[ahamelers]

See https://github.com/orgs/Milkdown/discussions/981

[adaboese]

Thank you!