Enable menu in milkdown editor

md-editor/package.json

@@ -37,6 +37,7 @@
     "@milkdown/plugin-history": "5.5.0",
     "@milkdown/plugin-listener": "5.5.0",
     "@milkdown/plugin-math": "5.5.0",
+    "@milkdown/plugin-menu": "5.5.0",
     "@milkdown/plugin-prism": "5.5.0",
     "@milkdown/plugin-slash": "5.5.0",
     "@milkdown/plugin-tooltip": "5.5.0",

md-editor/src/MilkdownEditor.tsx

@@ -7,7 +7,7 @@ import { createEditor } from './editor';
 import { Loading } from './Loading';
 import className from './style.module.css';
 import { Content, useLazy } from './useLazy';
-import { commonmark, image, link } from '@milkdown/preset-commonmark';
+import { gfm, image, link } from '@milkdown/preset-gfm';
 import 'katex/dist/katex.css';
 
 type Props = {
@@ -130,7 +130,7 @@ const MilkdownEditor = forwardRef<MilkdownRef, Props>(
 
     const editor = useEditor(
       (root, renderReact) => {
-        const nodes = commonmark
+        const nodes = gfm
           // .configure(paragraph, { view: renderReact(TSParagraph) })
           .configure(link, { view: renderReact(TSLink) })
           .configure(image, { view: renderReact(TSImage) });

md-editor/src/editor.ts

@@ -18,6 +18,7 @@ import { defaultActions, slash, slashPlugin } from '@milkdown/plugin-slash';
 import { tooltip } from '@milkdown/plugin-tooltip';
 import { nord } from '@milkdown/theme-nord';
 import { AtomList } from '@milkdown/utils';
+import { menu } from '@milkdown/plugin-menu';
 
 const complete =
   (callback: () => void): MilkdownPlugin =>
@@ -28,6 +29,157 @@ const complete =
     callback();
   };
 
+/*export const defaultConfig: Config = [
+  [
+    {
+      type: 'select',
+      text: 'Heading',
+      options: [
+        { id: '1', text: 'Large Heading' },
+        { id: '2', text: 'Medium Heading' },
+        { id: '3', text: 'Small Heading' },
+        { id: '0', text: 'Plain Text' },
+      ],
+      disabled: (view) => {
+        const { state } = view;
+        const setToHeading = (level: number) => setBlockType(state.schema.nodes.heading, { level })(state);
+        return (
+          !(view.state.selection instanceof TextSelection) ||
+          !(setToHeading(1) || setToHeading(2) || setToHeading(3))
+        );
+      },
+      onSelect: (id) => (id ? ['TurnIntoHeading', Number(id)] : ['TurnIntoText', null]),
+    },
+  ],
+  [
+    {
+      type: 'button',
+      icon: 'undo',
+      key: 'Undo',
+      disabled: (view) => {
+        return !undo(view.state);
+      },
+    },
+    {
+      type: 'button',
+      icon: 'redo',
+      key: 'Redo',
+      disabled: (view) => {
+        return !redo(view.state);
+      },
+    },
+  ],
+  [
+    {
+      type: 'button',
+      icon: 'bold',
+      key: 'ToggleBold',
+      active: (view) => hasMark(view.state, view.state.schema.marks.strong),
+      disabled: (view) => !view.state.schema.marks.strong,
+    },
+    {
+      type: 'button',
+      icon: 'italic',
+      key: 'ToggleItalic',
+      active: (view) => hasMark(view.state, view.state.schema.marks.em),
+      disabled: (view) => !view.state.schema.marks.em,
+    },
+    {
+      type: 'button',
+      icon: 'strikeThrough',
+      key: 'ToggleStrikeThrough',
+      active: (view) => hasMark(view.state, view.state.schema.marks.strike_through),
+      disabled: (view) => !view.state.schema.marks.strike_through,
+    },
+  ],
+  [
+    {
+      type: 'button',
+      icon: 'bulletList',
+      key: 'WrapInBulletList',
+      disabled: (view) => {
+        const { state } = view;
+        return !wrapIn(state.schema.nodes.bullet_list)(state);
+      },
+    },
+    {
+      type: 'button',
+      icon: 'orderedList',
+      key: 'WrapInOrderedList',
+      disabled: (view) => {
+        const { state } = view;
+        return !wrapIn(state.schema.nodes.ordered_list)(state);
+      },
+    },
+    {
+      type: 'button',
+      icon: 'taskList',
+      key: 'TurnIntoTaskList',
+      disabled: (view) => {
+        const { state } = view;
+        return !wrapIn(state.schema.nodes.task_list_item)(state);
+      },
+    },
+    {
+      type: 'button',
+      icon: 'liftList',
+      key: 'LiftListItem',
+      disabled: (view) => {
+        const { state } = view;
+        return !liftListItem(state.schema.nodes.list_item)(state);
+      },
+    },
+    {
+      type: 'button',
+      icon: 'sinkList',
+      key: 'SinkListItem',
+      disabled: (view) => {
+        const { state } = view;
+        return !sinkListItem(state.schema.nodes.list_item)(state);
+      },
+    },
+  ],
+  [
+    {
+      type: 'button',
+      icon: 'link',
+      key: 'ToggleLink',
+      active: (view) => hasMark(view.state, view.state.schema.marks.link),
+    },
+    {
+      type: 'button',
+      icon: 'image',
+      key: 'InsertImage',
+    },
+    {
+      type: 'button',
+      icon: 'table',
+      key: 'InsertTable',
+    },
+    {
+      type: 'button',
+      icon: 'code',
+      key: 'TurnIntoCodeFence',
+    },
+  ],
+  [
+    {
+      type: 'button',
+      icon: 'quote',
+      key: 'WrapInBlockquote',
+    },
+    {
+      type: 'button',
+      icon: 'divider',
+      key: 'InsertHr',
+    },
+    {
+      type: 'button',
+      icon: 'select',
+      key: SelectParent,
+    },
+  ],
+];*/
 export const createEditor = (
   root: HTMLElement | null,
   defaultValue: string,
@@ -52,6 +204,7 @@ export const createEditor = (
     // .use(commonmark)
     .use(nodes)
     // .use(gfm)
+    .use(menu())
     .use(complete(() => setEditorReady(true)))
     .use(clipboard)
     .use(listener)

md-editor/src/extension.css

@@ -79,3 +79,8 @@ body {
   margin-top: 1rem !important;
   margin-bottom: 0.8rem !important;
 }
+
+.milkdown-menu-wrapper {
+  position: relative;
+  overflow: auto;
+}