Block Plugin

I'll introduce you a new plugin in our plugin family: @milkdown/plugin-block.

This plugin provides two features:

1. Make blocks can be drag and drop by a handlebar.
2. When users click on handlebar, a list of possible actions will be displayed and can be executed by a single click.

You can configure the list through configBuilder options. You can provide your own configBuilder by:

import { block, blockPlugin } from '@milkdown/plugin-block';

Editor
  .make()
  .use(block.configure(blockPlugin, {
      configBuilder: (ctx) => {
          return [/* your actions */];
      }
  }))

You can find the default config builder here.

Hashtag for Heading

Heading nodes now will display hashtag. And delete key now can downgrade a heading node.

This feature is enabled by default. But you can disable it if you don't need it:

commonmark.configure(heading, {
    displayHashtag: false
});

useNodeCtx in React and Vue is Up to Date Now

In the previous version of Milkdown. The value returned by useNodeCtx will not be updated when prosemirror update views. So, users will need to write some code to keep the value up to date. Luckily, we make it up to date in v6.3. Which means you can just get the value of it and won't need to update it.

// before:
const [filename, setFilename] = useState<string>(node.attrs['filename']);

const updateFilename = (name: string) => {
    view.dispatch(updateNodeAttr('filename', name));
    setFilename(name);
}

// after:
const filename = node.attrs['filename'];

const updateFilename = (name: string) => {
    view.dispatch(updateNodeAttr('filename', name));
}

Tooltip now can be configured

The tooltip plugin can now be configured by items options with a callback function.

export type TooltipOptions = {
    // ...
    items: ((ctx: Ctx) => Array<Item>;
};

You can view the default config here:
https://github.com/Saul-Mirone/milkdown/blob/main/packages/plugin-tooltip/src/item.ts

Menu now can be also configured by a function

In the previous version of @milkdown/plugin-menu. It'll accept an array configuration. Now you can also pass a function which returns an array configuration.

export type MenuOptions = {
    // ...
    config: Config | ((ctx: Ctx) => Config);
};

Exceptions

Now, all errors throwed by milkdown are defined in @milkdown/exception and the error will be an MilkdownError. Which will have an error code on it.

Dependencies Upgrade

• tslib -> 2.4.0
• vite -> 3.0.0
  ...etc