chore: Upgrade all of prosemirror (#5366)

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>

shared/editor/extensions/BlockMenu.tsx

@@ -1,10 +1,10 @@
 import { PlusIcon } from "outline-icons";
 import { Plugin } from "prosemirror-state";
-import { findParentNode } from "prosemirror-utils";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { SuggestionsMenuType } from "../plugins/Suggestions";
+import { findParentNode } from "../queries/findParentNode";
 import { EventType } from "../types";
 import Suggestion from "./Suggestion";
 

shared/editor/extensions/DateTime.ts

@@ -1,13 +1,13 @@
 import { InputRule } from "prosemirror-inputrules";
 import { Schema } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
+import { Command } from "prosemirror-state";
 import {
   getCurrentDateAsString,
   getCurrentDateTimeAsString,
   getCurrentTimeAsString,
 } from "../../utils/date";
 import Extension from "../lib/Extension";
-import { Dispatch, EventType } from "../types";
+import { EventType } from "../types";
 
 /**
  * An editor extension that adds commands to insert the current date and time.
@@ -43,16 +43,16 @@ export default class DateTime extends Extension {
 
   commands(_options: { schema: Schema }) {
     return {
-      date: () => (state: EditorState, dispatch: Dispatch) => {
-        dispatch(state.tr.insertText(getCurrentDateAsString() + " "));
+      date: (): Command => (state, dispatch) => {
+        dispatch?.(state.tr.insertText(getCurrentDateAsString() + " "));
         return true;
       },
-      time: () => (state: EditorState, dispatch: Dispatch) => {
-        dispatch(state.tr.insertText(getCurrentTimeAsString() + " "));
+      time: (): Command => (state, dispatch) => {
+        dispatch?.(state.tr.insertText(getCurrentTimeAsString() + " "));
         return true;
       },
-      datetime: () => (state: EditorState, dispatch: Dispatch) => {
-        dispatch(state.tr.insertText(getCurrentDateTimeAsString() + " "));
+      datetime: (): Command => (state, dispatch) => {
+        dispatch?.(state.tr.insertText(getCurrentDateTimeAsString() + " "));
         return true;
       },
     };

shared/editor/extensions/Keys.ts

@@ -5,8 +5,9 @@ import {
   AllSelection,
   TextSelection,
   EditorState,
+  Command,
 } from "prosemirror-state";
-import Extension, { Command } from "../lib/Extension";
+import Extension from "../lib/Extension";
 import isInCode from "../queries/isInCode";
 
 export default class Keys extends Extension {

shared/editor/extensions/Math.ts

@@ -1,7 +1,6 @@
 import { MathView } from "@benrbray/prosemirror-math";
-import { Node as ProseNode } from "prosemirror-model";
 import { Plugin, PluginKey, PluginSpec } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
+import { NodeViewConstructor } from "prosemirror-view";
 
 export interface IMathPluginState {
   macros: { [cmd: string]: string };
@@ -11,12 +10,8 @@ export interface IMathPluginState {
 
 const MATH_PLUGIN_KEY = new PluginKey<IMathPluginState>("prosemirror-math");
 
-export function createMathView(displayMode: boolean) {
-  return (
-    node: ProseNode,
-    view: EditorView,
-    getPos: boolean | (() => number)
-  ): MathView => {
+export function createMathView(displayMode: boolean): NodeViewConstructor {
+  return (node, view, getPos) => {
     // dynamically load katex styles and fonts
     import("katex/dist/katex.min.css");
 

shared/editor/extensions/Mermaid.ts

@@ -1,8 +1,8 @@
 import { Node } from "prosemirror-model";
 import { Plugin, PluginKey, Transaction } from "prosemirror-state";
-import { findBlockNodes } from "prosemirror-utils";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { v4 as uuidv4 } from "uuid";
+import { findBlockNodes } from "../queries/findChildren";
 
 type MermaidState = {
   decorationSet: DecorationSet;
@@ -135,7 +135,7 @@ export default function Mermaid({
   return new Plugin({
     key: new PluginKey("mermaid"),
     state: {
-      init: (_: Plugin, { doc }) => {
+      init: (_, { doc }) => {
         const pluginState: MermaidState = {
           decorationSet: DecorationSet.create(doc, []),
           diagramVisibility: {},
@@ -208,7 +208,7 @@ export default function Mermaid({
     },
     props: {
       decorations(state) {
-        return this.getState(state).decorationSet;
+        return this.getState(state)?.decorationSet;
       },
     },
   });

shared/editor/extensions/PasteHandler.ts

@@ -165,6 +165,10 @@ export default class PasteHandler extends Extension {
               const paste = this.editor.pasteParser.parse(
                 normalizePastedMarkdown(text)
               );
+              if (!paste) {
+                return false;
+              }
+
               const slice = paste.slice(0);
               const tr = view.state.tr;
               let currentPos = view.state.selection.from;

shared/editor/extensions/PreventTab.ts

@@ -1,4 +1,5 @@
-import Extension, { Command } from "../lib/Extension";
+import { Command } from "prosemirror-state";
+import Extension from "../lib/Extension";
 
 export default class PreventTab extends Extension {
   get name() {

shared/editor/extensions/Prism.ts

@@ -1,9 +1,9 @@
 import { flattenDeep, padStart } from "lodash";
 import { Node } from "prosemirror-model";
 import { Plugin, PluginKey, Transaction } from "prosemirror-state";
-import { findBlockNodes } from "prosemirror-utils";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import refractor from "refractor/core";
+import { findBlockNodes } from "../queries/findChildren";
 
 export const LANGUAGES = {
   none: "None", // additional entry to disable highlighting
@@ -75,18 +75,23 @@ function getDecorations({
   function parseNodes(
     nodes: refractor.RefractorNode[],
     classNames: string[] = []
-  ): any {
-    return nodes.map((node) => {
-      if (node.type === "element") {
-        const classes = [...classNames, ...(node.properties.className || [])];
-        return parseNodes(node.children, classes);
-      }
+  ): {
+    text: string;
+    classes: string[];
+  }[] {
+    return flattenDeep(
+      nodes.map((node) => {
+        if (node.type === "element") {
+          const classes = [...classNames, ...(node.properties.className || [])];
+          return parseNodes(node.children, classes);
+        }
 
-      return {
-        text: node.value,
-        classes: classNames,
-      };
-    });
+        return {
+          text: node.value,
+          classes: classNames,
+        };
+      })
+    );
   }
 
   blocks.forEach((block) => {
@@ -125,7 +130,7 @@ function getDecorations({
       }
 
       const nodes = refractor.highlight(block.node.textContent, language);
-      const newDecorations = flattenDeep(parseNodes(nodes))
+      const newDecorations = parseNodes(nodes)
         .map((node: ParsedNode) => {
           const from = startPos;
           const to = from + node.text.length;
@@ -180,7 +185,7 @@ export default function Prism({
   return new Plugin({
     key: new PluginKey("prism"),
     state: {
-      init: (_: Plugin, { doc }) => DecorationSet.create(doc, []),
+      init: (_, { doc }) => DecorationSet.create(doc, []),
       apply: (transaction: Transaction, decorationSet, oldState, state) => {
         const nodeName = state.selection.$head.parent.type.name;
         const previousNodeName = oldState.selection.$head.parent.type.name;