fix: Add ability to convert between checklist and other types of list

shared/editor/commands/backspaceToParagraph.ts

@@ -1,8 +1,9 @@
 import { NodeType } from "prosemirror-model";
-import { EditorState, Transaction } from "prosemirror-state";
+import { EditorState } from "prosemirror-state";
+import { Dispatch } from "../types";
 
 export default function backspaceToParagraph(type: NodeType) {
-  return (state: EditorState, dispatch: (tr: Transaction) => void) => {
+  return (state: EditorState, dispatch: Dispatch) => {
     const { $from, from, to, empty } = state.selection;
 
     // if the selection has anything in it then use standard delete behavior

shared/editor/commands/clearNodes.ts

@@ -0,0 +1,49 @@
+import { EditorState } from "prosemirror-state";
+import { liftTarget } from "prosemirror-transform";
+import { Dispatch } from "../types";
+
+const clearNodes = () => (state: EditorState, dispatch?: Dispatch) => {
+  const { tr } = state;
+  const { selection } = tr;
+  const { ranges } = selection;
+
+  if (!dispatch) {
+    return true;
+  }
+
+  ranges.forEach(({ $from, $to }) => {
+    state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+      if (node.type.isText) {
+        return;
+      }
+
+      const { doc, mapping } = tr;
+      const $mappedFrom = doc.resolve(mapping.map(pos));
+      const $mappedTo = doc.resolve(mapping.map(pos + node.nodeSize));
+      const nodeRange = $mappedFrom.blockRange($mappedTo);
+
+      if (!nodeRange) {
+        return;
+      }
+
+      const targetLiftDepth = liftTarget(nodeRange);
+
+      if (node.type.isTextblock) {
+        const { defaultType } = $mappedFrom.parent.contentMatchAt(
+          $mappedFrom.index()
+        );
+
+        tr.setNodeMarkup(nodeRange.start, defaultType);
+      }
+
+      if (targetLiftDepth || targetLiftDepth === 0) {
+        tr.lift(nodeRange, targetLiftDepth);
+      }
+    });
+  });
+
+  dispatch(tr);
+  return true;
+};
+
+export default clearNodes;

shared/editor/commands/moveLeft.ts

@@ -17,13 +17,9 @@ limitations under the License.
 // This file is based on the implementation found here:
 // https://bitbucket.org/atlassian/design-system-mirror/src/master/editor/editor-core/src/plugins/text-formatting/commands/text-formatting.ts
 
-import {
-  Selection,
-  EditorState,
-  Transaction,
-  TextSelection,
-} from "prosemirror-state";
+import { Selection, EditorState, TextSelection } from "prosemirror-state";
 import isMarkActive from "../queries/isMarkActive";
+import { Dispatch } from "../types";
 
 function hasCode(state: EditorState, pos: number) {
   const { code_inline } = state.schema.marks;
@@ -35,7 +31,7 @@ function hasCode(state: EditorState, pos: number) {
 }
 
 export default function moveLeft() {
-  return (state: EditorState, dispatch: (tr: Transaction) => void): boolean => {
+  return (state: EditorState, dispatch: Dispatch): boolean => {
     const { code_inline } = state.schema.marks;
     const { empty, $cursor } = state.selection as TextSelection;
     if (!empty || !$cursor) {

shared/editor/commands/moveRight.ts

@@ -17,11 +17,12 @@ limitations under the License.
 // This file is based on the implementation found here:
 // https://bitbucket.org/atlassian/design-system-mirror/src/master/editor/editor-core/src/plugins/text-formatting/commands/text-formatting.ts
 
-import { EditorState, Transaction, TextSelection } from "prosemirror-state";
+import { EditorState, TextSelection } from "prosemirror-state";
 import isMarkActive from "../queries/isMarkActive";
+import { Dispatch } from "../types";
 
 export default function moveRight() {
-  return (state: EditorState, dispatch: (tr: Transaction) => void): boolean => {
+  return (state: EditorState, dispatch: Dispatch): boolean => {
     const { code_inline } = state.schema.marks;
     const { empty, $cursor } = state.selection as TextSelection;
     if (!empty || !$cursor) {

shared/editor/commands/splitHeading.ts

@@ -1,10 +1,11 @@
 import { NodeType } from "prosemirror-model";
-import { EditorState, TextSelection, Transaction } from "prosemirror-state";
+import { EditorState, TextSelection } from "prosemirror-state";
 import { findBlockNodes } from "prosemirror-utils";
 import findCollapsedNodes from "../queries/findCollapsedNodes";
+import { Dispatch } from "../types";
 
 export default function splitHeading(type: NodeType) {
-  return (state: EditorState, dispatch: (tr: Transaction) => void): boolean => {
+  return (state: EditorState, dispatch: Dispatch): boolean => {
     const { $from, from, $to, to } = state.selection;
 
     // check we're in a matching heading node

shared/editor/commands/toggleBlockType.ts

@@ -1,14 +1,15 @@
 import { setBlockType } from "prosemirror-commands";
 import { NodeType } from "prosemirror-model";
-import { EditorState, Transaction } from "prosemirror-state";
+import { EditorState } from "prosemirror-state";
 import isNodeActive from "../queries/isNodeActive";
+import { Dispatch } from "../types";
 
 export default function toggleBlockType(
   type: NodeType,
   toggleType: NodeType,
   attrs = {}
 ) {
-  return (state: EditorState, dispatch: (tr: Transaction) => void) => {
+  return (state: EditorState, dispatch?: Dispatch) => {
     const isActive = isNodeActive(type, attrs)(state);
 
     if (isActive) {

shared/editor/commands/toggleList.ts

@@ -1,14 +1,18 @@
 import { NodeType } from "prosemirror-model";
 import { wrapInList, liftListItem } from "prosemirror-schema-list";
-import { EditorState, Transaction } from "prosemirror-state";
+import { EditorState } from "prosemirror-state";
 import { findParentNode } from "prosemirror-utils";
+import chainTransactions from "../lib/chainTransactions";
 import isList from "../queries/isList";
+import { Dispatch } from "../types";
+import clearNodes from "./clearNodes";
 
 export default function toggleList(listType: NodeType, itemType: NodeType) {
-  return (state: EditorState, dispatch: (tr: Transaction) => void) => {
+  return (state: EditorState, dispatch?: Dispatch) => {
     const { schema, selection } = state;
     const { $from, $to } = selection;
     const range = $from.blockRange($to);
+    const { tr } = state;
 
     if (!range) {
       return false;
@@ -27,7 +31,6 @@ export default function toggleList(listType: NodeType, itemType: NodeType) {
         isList(parentList.node, schema) &&
         listType.validContent(parentList.node.content)
       ) {
-        const { tr } = state;
         tr.setNodeMarkup(parentList.pos, listType);
 
         if (dispatch) {
@@ -38,6 +41,15 @@ export default function toggleList(listType: NodeType, itemType: NodeType) {
       }
     }
 
-    return wrapInList(listType)(state, dispatch);
+    const canWrapInList = wrapInList(listType)(state);
+
+    if (canWrapInList) {
+      return wrapInList(listType)(state, dispatch);
+    }
+
+    return chainTransactions(clearNodes(), wrapInList(listType))(
+      state,
+      dispatch
+    );
   };
 }

shared/editor/commands/toggleWrap.ts

@@ -1,13 +1,14 @@
 import { wrapIn, lift } from "prosemirror-commands";
 import { NodeType } from "prosemirror-model";
-import { EditorState, Transaction } from "prosemirror-state";
+import { EditorState } from "prosemirror-state";
 import isNodeActive from "../queries/isNodeActive";
+import { Dispatch } from "../types";
 
 export default function toggleWrap(
   type: NodeType,
   attrs?: Record<string, any>
 ) {
-  return (state: EditorState, dispatch: (tr: Transaction) => void) => {
+  return (state: EditorState, dispatch?: Dispatch) => {
     const isActive = isNodeActive(type)(state);
 
     if (isActive) {