添加 paragraph、blockquote、无序列表和有序列表

package.json

@@ -101,6 +101,7 @@
     "prosemirror-schema-basic": "^1.1.2",
     "prosemirror-schema-list": "^1.1.4",
     "prosemirror-state": "^1.3.4",
+    "prosemirror-utils": "^0.9.6",
     "prosemirror-view": "^1.17.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/Editor.tsx

@@ -7,6 +7,7 @@ import { keymap } from 'prosemirror-keymap';
 import { MarkdownParser, MarkdownSerializer } from 'prosemirror-markdown';
 import { inputRules, InputRule } from 'prosemirror-inputrules';
 import { history } from 'prosemirror-history';
+import applyDevTools from 'prosemirror-dev-tools';
 
 import './App.css';
 import StyledEditor from './StyledEditor';
@@ -48,6 +49,8 @@ class Editor extends React.Component<Props> {
     this.parser = createParser();
     this.serializer = createSerializer();
     this.view = this.createView();
+
+    applyDevTools(this.view);
   }
 
   createState(value?: string) {

src/Menu.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
-import { Button } from 'antd';
+import { Button, Select } from 'antd';
 import { EditorView } from 'prosemirror-view';
 import { Schema } from 'prosemirror-model';
-import { toggleMark } from 'prosemirror-commands';
+import { toggleMark, setBlockType } from 'prosemirror-commands';
 import { undo, redo } from 'prosemirror-history';
 
 /* @jsx jsx */
 import { jsx, css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { isMarkActive, backticksFor } from './utils/marks';
+import { isMarkActive } from './utils/marks';
+import {
+  isNodeActive,
+  toggleBlockType,
+  toggleWrap,
+  toggleList,
+} from './utils/nodes';
+
+const { Option } = Select;
 
 type Props = {
   view?: EditorView;
@@ -144,6 +152,89 @@ function Menu(props: Props) {
         }>
         Link
       </Button>
+      <Select
+        style={{
+          marginRight: '10px',
+        }}
+        defaultValue="正文"
+        onChange={(value) => {
+          // TODO: 根据选中块高亮对应的 select value
+          if (/h[1-6]/.test(value)) {
+            toggleBlockType(
+              props.schema.nodes.heading,
+              props.schema.nodes.paragraph,
+              { level: value.slice(1) },
+            )(props.view.state, props.view.dispatch);
+          } else {
+            setBlockType(props.schema.nodes.paragraph)(
+              props.view.state,
+              props.view.dispatch,
+            );
+          }
+
+          props.view.focus();
+        }}>
+        <Option value="paragraph">正文</Option>
+        <Option value="h1">标题 1</Option>
+        <Option value="h2">标题 2</Option>
+        <Option value="h3">标题 3</Option>
+        <Option value="h4">标题 4</Option>
+        <Option value="h5">标题 5</Option>
+      </Select>
+      <Button
+        style={{
+          fontWeight:
+            props.view &&
+            isNodeActive(props.schema?.nodes.blockquote)(props.view?.state)
+              ? 'bold'
+              : undefined,
+        }}
+        onClick={() => {
+          toggleWrap(props.schema.nodes.blockquote)(
+            props.view?.state,
+            props.view?.dispatch,
+          );
+
+          props.view.focus();
+        }}>
+        引用
+      </Button>
+      <Button
+        style={{
+          fontWeight:
+            props.view &&
+            isNodeActive(props.schema?.nodes.bullet_list)(props.view?.state)
+              ? 'bold'
+              : undefined,
+        }}
+        onClick={() => {
+          toggleList(
+            props.schema.nodes.bullet_list,
+            props.schema.nodes.list_item,
+          )(props.view?.state, props.view?.dispatch);
+
+          props.view.focus();
+        }}>
+        无序列表
+      </Button>
+      <Button
+        style={{
+          fontWeight:
+            props.view &&
+            isNodeActive(props.schema?.nodes.ordered_list)(props.view?.state)
+              ? 'bold'
+              : undefined,
+        }}
+        onClick={() => {
+          toggleList(
+            props.schema.nodes.ordered_list,
+            props.schema.nodes.list_item,
+          )(props.view?.state, props.view?.dispatch);
+
+          props.view.focus();
+        }}>
+        有序列表
+      </Button>
       <br />
       <br />
     </div>

src/utils/inputRules.ts

@@ -1,4 +1,8 @@
-import { InputRule } from 'prosemirror-inputrules';
+import {
+  InputRule,
+  textblockTypeInputRule,
+  wrappingInputRule,
+} from 'prosemirror-inputrules';
 import schema from './schema';
 import markInputRule from './markInputRule';
 
@@ -44,6 +48,37 @@ function createInputRules() {
   });
   inputRules.push(link);
 
+  // Heading
+  for (let level = 1; level <= 6; level++) {
+    const heading = textblockTypeInputRule(
+      new RegExp(`^(#{1,${level}})\\s$`),
+      schema.nodes.heading,
+      { level },
+    );
+
+    inputRules.push(heading);
+  }
+
+  // Blockquote
+  const blockquote = wrappingInputRule(/^\s*>\s$/, schema.nodes.blockquote);
+  inputRules.push(blockquote);
+
+  // BulletList
+  const bullet_list = wrappingInputRule(
+    /^\s*([-+*])\s$/,
+    schema.nodes.bullet_list,
+  );
+  inputRules.push(bullet_list);
+
+  // BulletList
+  const ordered_list = wrappingInputRule(
+    /^(\d+)\.\s$/,
+    schema.nodes.ordered_list,
+    (match) => ({ order: +match[1] }),
+    (match, node) => node.childCount + node.attrs.order == +match[1],
+  );
+  inputRules.push(ordered_list);
+
   return inputRules;
 }
 

src/utils/keymaps.ts

@@ -1,6 +1,12 @@
-import { Keymap, toggleMark } from 'prosemirror-commands';
+import { Keymap, toggleMark, setBlockType } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
 import schema from './schema';
+import { toggleWrap, toggleList } from './nodes';
+import {
+  liftListItem,
+  sinkListItem,
+  splitListItem,
+} from 'prosemirror-schema-list';
 
 function createKeymaps() {
   let keys: Keymap<any> = {},
@@ -53,6 +59,43 @@ function createKeymaps() {
     });
   }
 
+  // Heading
+  if ((type = schema.nodes.heading)) {
+    for (let i = 1; i <= 6; i++)
+      bind(`Shift-Ctrl-${i}`, setBlockType(type, { level: i }));
+  }
+
+  // Paragraph
+  if ((type = schema.nodes.paragraph)) {
+    bind(`Shift-Ctrl-0`, setBlockType(type));
+  }
+
+  // Blockquote
+  // keymap 值得商榷
+  if ((type = schema.nodes.blockquote)) {
+    bind('Ctrl->', toggleWrap(type));
+    bind('Mod-]', toggleWrap(type));
+  }
+
+  // ListItem
+  if ((type = schema.nodes.list_item)) {
+    bind('Enter', splitListItem(type));
+    bind('Tab', sinkListItem(type));
+    bind('Shift-Tab', liftListItem(type));
+    bind('Mod-]', sinkListItem(type));
+    bind('Mod-[', liftListItem(type));
+  }
+
+  // BulletList
+  if ((type = schema.nodes.bullet_list)) {
+    bind('Shift-Ctrl-8', toggleList(type, schema.nodes.list_item));
+  }
+
+  // OrderedList
+  if ((type = schema.nodes.ordered_list)) {
+    bind('Shift-Ctrl-9', toggleList(type, schema.nodes.list_item));
+  }
+
   return keys;
 }
 

src/utils/nodes.ts

@@ -0,0 +1,89 @@
+import { setBlockType, wrapIn, lift } from 'prosemirror-commands';
+import { findParentNode, findSelectedNodeOfType } from 'prosemirror-utils';
+import { NodeType } from 'prosemirror-model';
+import { EditorState, Transaction } from 'prosemirror-state';
+import { wrapInList, liftListItem } from 'prosemirror-schema-list';
+
+export const isNodeActive = (type, attrs: Record<string, any> = {}) => (
+  state,
+) => {
+  const node =
+    findSelectedNodeOfType(type)(state.selection) ||
+    findParentNode((node) => node.type === type)(state.selection);
+
+  if (!Object.keys(attrs).length || !node) {
+    return !!node;
+  }
+
+  return node.node.hasMarkup(type, { ...node.node.attrs, ...attrs });
+};
+
+export function toggleBlockType(type, toggleType, attrs = {}) {
+  return (state, dispatch) => {
+    const isActive = isNodeActive(type, attrs)(state);
+
+    if (isActive) {
+      return setBlockType(toggleType)(state, dispatch);
+    }
+
+    return setBlockType(type, attrs)(state, dispatch);
+  };
+}
+
+export function toggleWrap(type, attrs?: Record<string, any>) {
+  return (state, dispatch) => {
+    const isActive = isNodeActive(type)(state);
+
+    if (isActive) {
+      return lift(state, dispatch);
+    }
+
+    return wrapIn(type, attrs)(state, dispatch);
+  };
+}
+
+function isList(node, schema) {
+  return (
+    node.type === schema.nodes.bullet_list ||
+    node.type === schema.nodes.ordered_list ||
+    node.type === schema.nodes.todo_list
+  );
+}
+
+export function toggleList(listType: NodeType, itemType: NodeType) {
+  return (state: EditorState, dispatch: (tr: Transaction) => void) => {
+    const { schema, selection } = state;
+    const { $from, $to } = selection;
+    const range = $from.blockRange($to);
+
+    if (!range) {
+      return false;
+    }
+
+    const parentList = findParentNode((node) => isList(node, schema))(
+      selection,
+    );
+
+    if (range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
+      if (parentList.node.type === listType) {
+        return liftListItem(itemType)(state, dispatch);
+      }
+
+      if (
+        isList(parentList.node, schema) &&
+        listType.validContent(parentList.node.content)
+      ) {
+        const { tr } = state;
+        tr.setNodeMarkup(parentList.pos, listType);
+
+        if (dispatch) {
+          dispatch(tr);
+        }
+
+        return false;
+      }
+    }
+
+    return wrapInList(listType)(state, dispatch);
+  };
+}

src/utils/parser.ts

@@ -30,7 +30,23 @@ function createParser() {
     paragraph: {
       block: 'paragraph',
     },
-    hark_break: { node: 'hard_break' },
+    heading: {
+      block: 'heading',
+      getAttrs: (token) => ({ level: +token.tag.slice(1) }),
+    },
+    blockquote: {
+      block: 'blockquote',
+    },
+    list_item: {
+      block: 'list_item',
+    },
+    bullet_list: {
+      block: 'bullet_list',
+    },
+    ordered_list: {
+      block: 'ordered_list',
+    },
+    hardbreak: { node: 'hard_break' },
   };
 
   return new MarkdownParser(