Merge pull request #53 from cultureamp/KDS-756/update-prosemirror-pac…

…kages

refactor: update prosemirror packages and fix type errors

.changeset/good-pugs-greet.md

@@ -0,0 +1,5 @@
+---
+"@cultureamp/rich-text-toolkit": major
+---
+
+Update prosemirror dependencies and type declarations. Adds prosemirror packages as named exports from the toolkit

package.json

@@ -44,14 +44,6 @@
     "@types/jest": "^27.4.1",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^17.0.21",
-    "@types/prosemirror-commands": "^1.0.4",
-    "@types/prosemirror-history": "^1.0.3",
-    "@types/prosemirror-inputrules": "^1.0.4",
-    "@types/prosemirror-model": "^1.16.1",
-    "@types/prosemirror-schema-basic": "^1.0.2",
-    "@types/prosemirror-schema-list": "^1.0.3",
-    "@types/prosemirror-state": "^1.2.8",
-    "@types/prosemirror-view": "^1.23.1",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "copyfiles": "^2.4.1",
@@ -74,14 +66,15 @@
     "@kaizen/typography": "^2.2.1",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
-    "prosemirror-commands": "^1.2.1",
-    "prosemirror-history": "^1.2.0",
-    "prosemirror-inputrules": "^1.1.3",
-    "prosemirror-model": "^1.16.1",
-    "prosemirror-schema-basic": "^1.1.2",
-    "prosemirror-schema-list": "^1.1.6",
-    "prosemirror-state": "^1.3.4",
+    "prosemirror-commands": "^1.3.0",
+    "prosemirror-history": "^1.3.0",
+    "prosemirror-inputrules": "^1.2.0",
+    "prosemirror-keymap": "^1.2.0",
+    "prosemirror-model": "^1.18.1",
+    "prosemirror-schema-basic": "^1.2.0",
+    "prosemirror-schema-list": "^1.2.1",
+    "prosemirror-state": "^1.4.1",
     "prosemirror-utils": "^1.0.0-0",
-    "prosemirror-view": "^1.23.7"
+    "prosemirror-view": "^1.27.2"
   }
 }

src/commands/addMark.ts

@@ -5,10 +5,10 @@ import { MarkType } from "prosemirror-model"
 /** Wrap the users current selection in the given Mark type   */
 export const addMark: CommandFactory =
   (type: MarkType, attrs?: Record<string, unknown>) =>
-  (state: EditorState, dispatch: (tx: Transaction) => void) => {
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
     const { tr, selection } = state
     const { $from, $to } = selection
-
+    if (!dispatch) return false
     if (selection.empty) {
       dispatch(tr.addStoredMark(type.create(attrs)))
     } else {

src/commands/fixtures/helpers.ts

@@ -4,12 +4,7 @@ import {
   TextSelection,
   Transaction,
 } from "prosemirror-state"
-import { MarkType, Node, NodeType } from "prosemirror-model"
-import {
-  findChildrenByType,
-  findParentNodeOfTypeClosestToPos,
-} from "prosemirror-utils"
-import { schema } from "prosemirror-schema-basic"
+import { findChildrenByType } from "prosemirror-utils"
 
 /*
  ** This is used handle the JSDom type error issue you may encounter in testing
@@ -50,7 +45,7 @@ export const mockRangeForBoundingRect = (document.createRange = () => {
  */
 export const simulateRangeSelection =
   (anchorPositionStart: number = 0, anchorPositionEnd: number = 2) =>
-  (state: EditorState, dispatch: (tx: Transaction) => void) => {
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
     let { tr } = state
 
     tr.setSelection(
@@ -59,7 +54,9 @@ export const simulateRangeSelection =
         tr.doc.resolve(anchorPositionEnd)
       )
     )
-    dispatch(tr)
+    if (dispatch) {
+      dispatch(tr)
+    }
     return true
   }
 
@@ -90,7 +87,9 @@ export const simulateSelectionOfCurrentElement =
         tr.doc.resolve(endPos)
       )
     )
-    dispatch(tr)
+    if (dispatch) {
+      dispatch(tr)
+    }
     return true
   }
 
@@ -113,7 +112,7 @@ const getNodeByText = (state: EditorState, selectedText: string) => {
 
 export const simulateSelectionByText =
   (selectedText: string) =>
-  (state: EditorState, dispatch: (tx: Transaction) => void) => {
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
     let { tr } = state
 
     const startNode = getNodeByText(state, selectedText)
@@ -126,13 +125,17 @@ export const simulateSelectionByText =
       )
     }
 
-    dispatch(tr)
+    if (dispatch) {
+      dispatch(tr)
+    }
     return true
   }
 
 export const simulateTextInsert =
   (text: string) =>
-  (state: EditorState, dispatch: (tx: Transaction) => void) => {
-    dispatch(state.tr.insertText(text))
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
+    if (dispatch) {
+      dispatch(state.tr.insertText(text))
+    }
     return true
   }

src/commands/fixtures/test-state.ts

@@ -1,4 +1,3 @@
-// import { marks } from "prosemirror-schema-basic"
 import { Schema } from "prosemirror-model"
 import { createDocNode, createEditorState } from "../../core/state"
 import { marks } from "../../schema/marks"

src/commands/listIsActive.ts

@@ -1,10 +1,10 @@
 import { EditorState } from "prosemirror-state"
-import { NodeType, Schema } from "prosemirror-model"
+import { NodeType } from "prosemirror-model"
 import { findParentNodeOfTypeClosestToPos } from "prosemirror-utils"
 
 export function listIsActive(
   state: EditorState,
-  type: NodeType<Schema<any, any>>,
+  type: NodeType,
   listNodes: typeof type[]
 ) {
   const listNode = findParentNodeOfTypeClosestToPos(

src/commands/removeMark.ts

@@ -13,11 +13,12 @@ export const removeMark: CommandFactory =
       toExtent: boolean
     } = { toExtent: false }
   ) =>
-  (state: EditorState, dispatch: (tx: Transaction) => void) => {
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
     const { tr, selection, doc } = state
     let { from, to } = selection
     const { $from } = selection
 
+    if (!dispatch) return false
     if (selection.empty) {
       dispatch(tr.removeStoredMark(type))
     } else {

src/commands/updateMark.ts

@@ -13,7 +13,9 @@ export const updateMark: CommandFactory =
       toExtent: boolean
     } = { toExtent: false }
   ) =>
-  (state: EditorState, dispatch: (tx: Transaction) => void) => {
+  (state: EditorState, dispatch?: (tx: Transaction) => void) => {
+    if (!dispatch) return false
+
     const { tr, selection, doc } = state
     let { from, to } = selection
     const { $from, empty } = selection

src/commands/validateAndRemoveMarks.ts

@@ -1,5 +1,5 @@
 import { EditorState, Transaction } from "prosemirror-state"
-import { Mark, MarkType, Schema } from "prosemirror-model"
+import { Mark, MarkType } from "prosemirror-model"
 import { RemoveMarkStep } from "prosemirror-transform"
 
 type KnownAttrs = {
@@ -20,13 +20,15 @@ export function validateAndRemoveMarks(
   markType: MarkType,
   validator: AttrsValidator
 ) {
-  return (state: EditorState, dispatch: (tx: Transaction) => void) => {
+  return (state: EditorState, dispatch?: (tx: Transaction) => void) => {
+    if (!dispatch) return false
+
     const from = 0
     const to = state.doc.content.size
     const { tr } = state
 
     const matched: Array<{
-      style: Mark<Schema<string, string>>
+      style: Mark
       from: number
       to: number
       step: number

src/core/create.spec.ts

@@ -1,4 +1,4 @@
-import { EditorState, Transaction } from "prosemirror-state"
+import { Command, EditorState, Transaction } from "prosemirror-state"
 import { createRichTextEditor } from "./create"
 import { describe, expect, it, jest } from "@jest/globals"
 import { findByText, queryByText } from "@testing-library/dom"
@@ -61,10 +61,11 @@ describe("createRichTextEditor", () => {
 
     const command = (
       state: EditorState,
-      dispatch: (tx: Transaction) => void
+      dispatch?: (tx: Transaction) => void
     ) => {
       // Insert text at the current selection point, which is the start because
       // we don’t have a selection yet.
+      if (!dispatch) return false
       dispatch(state.tr.insertText("Prepended content. "))
       return true
     }
@@ -88,8 +89,9 @@ describe("createRichTextEditor", () => {
     const onChange = jest.fn()
     const command = (
       state: EditorState,
-      dispatch: (tx: Transaction) => void
+      dispatch?: (tx: Transaction) => void
     ) => {
+      if (!dispatch) return false
       dispatch(state.tr.insertText("Prepended content. "))
       return true
     }
@@ -113,8 +115,9 @@ describe("createRichTextEditor", () => {
     const onChange = jest.fn()
     const command = (
       state: EditorState,
-      dispatch: (tx: Transaction) => void
+      dispatch?: (tx: Transaction) => void
     ) => {
+      if (!dispatch) return false
       dispatch(state.tr.insertText("Prepended content. "))
       return true
     }
@@ -168,8 +171,9 @@ describe("createRichTextEditor", () => {
     const onChange = jest.fn()
     const noopCommand = (
       state: EditorState,
-      dispatch: (tx: Transaction) => void
+      dispatch?: (tx: Transaction) => void
     ) => {
+      if (!dispatch) return false
       dispatch(state.tr)
       return true
     }
@@ -196,8 +200,9 @@ describe("createRichTextEditor", () => {
     const onChange = jest.fn()
     const noopCommand = (
       state: EditorState,
-      dispatch: (tx: Transaction) => void
+      dispatch?: (tx: Transaction) => void
     ) => {
+      if (!dispatch) return false
       dispatch(state.tr)
       return true
     }

src/core/hooks/useRichTextEditor.spec.tsx

@@ -14,9 +14,13 @@ function Scenario({
   onChange?: (editorState: EditorState) => void
   editable?: boolean
 }) {
-  const command = (state: EditorState, dispatch: (tx: Transaction) => void) => {
+  const command = (
+    state: EditorState,
+    dispatch?: (tx: Transaction) => void
+  ) => {
     // Insert text at the current selection point, which is the start because
     // we don’t have a selection yet.
+    if (!dispatch) return false
     dispatch(state.tr.insertText("Prepended content. "))
     return true
   }

src/core/hooks/useRichTextEditor.ts

@@ -62,6 +62,7 @@ export function useRichTextEditor(
       editableStatusRef.current = status
       // Trigger an update within ProseMirror by issuing a noop transaction
       dispatchTransaction((state, dispatch) => {
+        if (!dispatch) return false
         dispatch(state.tr)
         return true
       })

src/core/state.ts

@@ -9,7 +9,7 @@ import { Node, Schema } from "prosemirror-model"
  */
 export function createEditorState(
   schema: Schema,
-  doc: Node | null,
+  doc: Node | undefined,
   plugins: Array<Plugin> = []
 ): EditorState {
   return EditorState.create({

src/core/types.ts

@@ -1,4 +1,4 @@
-import { EditorState, Transaction } from "prosemirror-state"
+import { Command, Transaction } from "prosemirror-state"
 import { EditorView as ProseMirrorEditorView } from "prosemirror-view"
 
 /**
@@ -7,12 +7,6 @@ import { EditorView as ProseMirrorEditorView } from "prosemirror-view"
  */
 export type Dispatch = (tx: Transaction) => void
 
-export type Command = (
-  editorState: EditorState,
-  dispatch: Dispatch,
-  view?: EditorView
-) => boolean
-
 /**
  * Curry a Command
  */

src/index.ts

@@ -2,3 +2,4 @@ export * from "./core"
 export * from "./schema"
 export * from "./commands"
 export * from "./plugins"
+export * from "./prosemirror"

src/plugins/LinkManager/LinkManager.tsx

@@ -8,9 +8,9 @@ import {
   updateMark,
   validateAndRemoveMarks,
 } from "../../"
-import { CAEditorView, Dispatcher } from "./types.d"
+import { CAEditorView } from "./types.d"
+import { Command, EditorState, Plugin } from "prosemirror-state"
 import { ComponentType } from "react"
-import { EditorState, Plugin } from "prosemirror-state"
 import {
   LinkEditor,
   LinkEditorAttrs,
@@ -24,7 +24,7 @@ import debounce from "lodash.debounce"
 class LinkManager {
   editorComponent: ComponentType<LinkEditorProps>
   linkActive: (state: EditorState) => boolean
-  validateLinks: (state: EditorState, dispatch: Dispatcher) => boolean
+  validateLinks: Command
   markType: MarkType
   tooltipTarget: {
     destroy: () => void

src/prosemirror/index.ts

@@ -0,0 +1,7 @@
+export * as ProseMirrorCommands from "prosemirror-commands"
+export * as ProseMirrorKeymap from "prosemirror-keymap"
+export * as ProseMirrorHistory from "prosemirror-history"
+export * as ProseMirrorState from "prosemirror-state"
+export * as ProseMirrorModel from "prosemirror-model"
+export * as ProseMirrorInputrules from "prosemirror-inputrules"
+export * as ProseMirrorSchemaList from "prosemirror-schema-list"