Update dependencies to React 18, Node 20, TS 5.2, etc. (#5528)

* incremental upgrade to React 18, TS 4.9, etc.

* update yarn config

* fix build

* minor cleanup in type definitions

* incremental updates for TS 5.0

* fix build

* upgrade to typescript 5.2

* update dependencies

* fix lint issues

* update to latest Playwright version

* update changesets dep

* update emotion/css

* incremental dependency updates

* more small dependency updates

* upgrade prettier and eslint

* fix lint issues

* update dependencies rollup

* fix @types/node resolution to restore linting

* update tiny-invariant dependency

* update dependencies

* update dependencies lerna

* upgrade react-router-dom

* update @types/react and @types/node

* update babel dependencies

* udpate simple-git-hooks

* update @types/node resolution

* update lint-staged

* remove cypress from dependency list

* update @types/node to support Node 20

* update workflows to Node 20

* set resolutions for @types/react

* downgrade @types/react to 18.2.28

* update mocha

* update rimraf

* update @types/js-dom

* remove .lintstagedrc.js

* upgrade next to latest

* v0.61.4

* update lerna

* update faker and rollup

* update immer

* fix yarn clean command

* attempt to fix integration tests

* attempt to stabilize integration tests

* wip fix integration tests

* skip unstable integration test

* Add changeset

---------

Co-authored-by: Dalibor Tosic <dalibortosic00@gmail.com>
Co-authored-by: Nikola <nikolabijelic14@gmail.com>

packages/slate-react/package.json

@@ -15,34 +15,34 @@
   ],
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
-    "@types/is-hotkey": "^0.1.1",
-    "@types/lodash": "^4.14.149",
-    "direction": "^1.0.3",
-    "is-hotkey": "^0.1.6",
+    "@types/is-hotkey": "^0.1.8",
+    "@types/lodash": "^4.14.200",
+    "direction": "^1.0.4",
+    "is-hotkey": "^0.2.0",
     "is-plain-object": "^5.0.0",
-    "lodash": "^4.17.4",
-    "scroll-into-view-if-needed": "^2.2.20",
-    "tiny-invariant": "1.0.6"
+    "lodash": "^4.17.21",
+    "scroll-into-view-if-needed": "^3.1.0",
+    "tiny-invariant": "1.3.1"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.7.4",
-    "@types/jest": "^27.4.1",
-    "@types/jsdom": "^16.2.14",
-    "@types/react": "^16.9.13",
-    "@types/react-dom": "^16.9.4",
-    "@types/react-test-renderer": "^16.8.0",
-    "@types/resize-observer-browser": "^0.1.7",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "react-test-renderer": ">=16.8.0",
+    "@babel/runtime": "^7.23.2",
+    "@types/jest": "29.5.6",
+    "@types/jsdom": "^21.1.4",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/react-test-renderer": "^18.0.3",
+    "@types/resize-observer-browser": "^0.1.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "slate": "^0.94.0",
     "slate-hyperscript": "^0.81.3",
-    "source-map-loader": "^4.0.0"
+    "source-map-loader": "^4.0.1"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "slate": ">=0.65.3"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "slate": ">=0.99.0"
   },
   "umdGlobals": {
     "react": "React",

packages/slate-react/src/components/editable.tsx

@@ -9,6 +9,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
+import { JSX } from 'react'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import {
   Editor,
@@ -744,7 +745,7 @@ export const Editable = (props: EditableProps) => {
   )
 
   const callbackRef = useCallback(
-    node => {
+    (node: HTMLDivElement | null) => {
       if (node == null) {
         onDOMSelectionChange.cancel()
         scheduleOnDOMSelectionChange.cancel()
@@ -1138,9 +1139,8 @@ export const Editable = (props: EditableProps) => {
                     !IS_UC_MOBILE &&
                     event.data
                   ) {
-                    const placeholderMarks = EDITOR_TO_PENDING_INSERTION_MARKS.get(
-                      editor
-                    )
+                    const placeholderMarks =
+                      EDITOR_TO_PENDING_INSERTION_MARKS.get(editor)
                     EDITOR_TO_PENDING_INSERTION_MARKS.delete(editor)
 
                     // Ensure we insert text with the marks the user was actually seeing
@@ -1781,7 +1781,7 @@ const defaultScrollSelectionIntoView = (
  */
 
 export const isEventHandled = <
-  EventType extends React.SyntheticEvent<unknown, unknown>
+  EventType extends React.SyntheticEvent<unknown, unknown>,
 >(
   event: EventType,
   handler?: (event: EventType) => void | boolean
@@ -1804,7 +1804,7 @@ export const isEventHandled = <
  * Check if the event's target is an input element
  */
 export const isDOMEventTargetInput = <
-  EventType extends React.SyntheticEvent<unknown, unknown>
+  EventType extends React.SyntheticEvent<unknown, unknown>,
 >(
   event: EventType
 ) => {

packages/slate-react/src/components/element.tsx

@@ -1,5 +1,6 @@
 import getDirection from 'direction'
 import React, { useCallback } from 'react'
+import { JSX } from 'react'
 import { Editor, Element as SlateElement, Node, Range } from 'slate'
 import { ReactEditor, useReadOnly, useSlateStatic } from '..'
 import useChildren from '../hooks/use-children'

packages/slate-react/src/components/leaf.tsx

@@ -5,6 +5,7 @@ import React, {
   useState,
   useEffect,
 } from 'react'
+import { JSX } from 'react'
 import { Element, Text } from 'slate'
 import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer'
 import String from './string'
@@ -95,11 +96,11 @@ const Leaf = (props: {
     <String isLast={isLast} leaf={leaf} parent={parent} text={text} />
   )
 
-  const leafIsPlaceholder = leaf[PLACEHOLDER_SYMBOL]
+  const leafIsPlaceholder = Boolean(leaf[PLACEHOLDER_SYMBOL])
   useEffect(() => {
     if (leafIsPlaceholder) {
       if (!showPlaceholderTimeoutRef.current) {
-        // Delay the placeholder so it will not render in a selection
+        // Delay the placeholder, so it will not render in a selection
         showPlaceholderTimeoutRef.current = setTimeout(() => {
           setShowPlaceholder(true)
           showPlaceholderTimeoutRef.current = null

packages/slate-react/src/components/restore-dom/restore-dom.tsx

@@ -1,4 +1,10 @@
-import React, { Component, ComponentType, ContextType, RefObject } from 'react'
+import React, {
+  Component,
+  ComponentType,
+  ContextType,
+  ReactNode,
+  RefObject,
+} from 'react'
 import { EditorContext } from '../../hooks/use-slate-static'
 import { IS_ANDROID } from '../../utils/environment'
 import {
@@ -14,6 +20,7 @@ const MUTATION_OBSERVER_CONFIG: MutationObserverInit = {
 }
 
 type RestoreDOMProps = {
+  children?: ReactNode
   receivedUserInput: RefObject<boolean>
   node: RefObject<HTMLDivElement>
 }

packages/slate-react/src/components/slate.tsx

@@ -53,10 +53,8 @@ export const Slate = (props: {
     return { v: 0, editor }
   })
 
-  const {
-    selectorContext,
-    onChange: handleSelectorChange,
-  } = useSelectorContext(editor)
+  const { selectorContext, onChange: handleSelectorChange } =
+    useSelectorContext(editor)
 
   const onContextChange = useCallback(
     (options?: { operation?: Operation }) => {

packages/slate-react/src/components/string.tsx

@@ -20,7 +20,7 @@ const String = (props: {
   const editor = useSlateStatic()
   const path = ReactEditor.findPath(editor, text)
   const parentPath = Path.parent(path)
-  const isMarkPlaceholder = leaf[MARK_PLACEHOLDER_SYMBOL] === true
+  const isMarkPlaceholder = Boolean(leaf[MARK_PLACEHOLDER_SYMBOL])
 
   // COMPAT: Render text inside void nodes with a zero-width space.
   // So the node can contain selection but the text is not visible.
@@ -114,7 +114,11 @@ export const ZeroWidthString = (props: {
 }) => {
   const { length = 0, isLineBreak = false, isMarkPlaceholder = false } = props
 
-  const attributes = {
+  const attributes: {
+    'data-slate-zero-width': string
+    'data-slate-length': number
+    'data-slate-mark-placeholder'?: boolean
+  } = {
     'data-slate-zero-width': isLineBreak ? 'n' : 'z',
     'data-slate-length': length,
   }

packages/slate-react/src/components/text.tsx

@@ -22,14 +22,8 @@ const Text = (props: {
   renderLeaf?: (props: RenderLeafProps) => JSX.Element
   text: SlateText
 }) => {
-  const {
-    decorations,
-    isLast,
-    parent,
-    renderPlaceholder,
-    renderLeaf,
-    text,
-  } = props
+  const { decorations, isLast, parent, renderPlaceholder, renderLeaf, text } =
+    props
   const editor = useSlateStatic()
   const ref = useRef<HTMLSpanElement | null>(null)
   const leaves = SlateText.decorations(text, decorations)

packages/slate-react/src/custom-types.ts

@@ -7,10 +7,39 @@ declare module 'slate' {
     Text: BaseText & {
       placeholder?: string
       onPlaceholderResize?: (node: HTMLElement | null) => void
+      // FIXME: is unknown correct here?
+      [key: string]: unknown
     }
     Range: BaseRange & {
       placeholder?: string
       onPlaceholderResize?: (node: HTMLElement | null) => void
+      // FIXME: is unknown correct here?
+      [key: string]: unknown
     }
   }
 }
+
+declare global {
+  interface Window {
+    MSStream: boolean
+  }
+  interface DocumentOrShadowRoot {
+    getSelection(): Selection | null
+  }
+
+  interface CaretPosition {
+    readonly offsetNode: Node
+    readonly offset: number
+    getClientRect(): DOMRect | null
+  }
+
+  interface Document {
+    caretPositionFromPoint(x: number, y: number): CaretPosition | null
+  }
+
+  interface Node {
+    getRootNode(options?: GetRootNodeOptions): Document | ShadowRoot
+  }
+}
+
+export {}

packages/slate-react/src/hooks/use-slate-selector.tsx

@@ -49,7 +49,7 @@ export function useSlateSelector<T>(
 
   const latestSubscriptionCallbackError = useRef<Error | undefined>()
   const latestSelector = useRef<(editor: Editor) => T>(() => null as any)
-  const latestSelectedState = useRef<T>((null as any) as T)
+  const latestSelectedState = useRef<T>(null as any as T)
   let selectedState: T
 
   try {
@@ -90,7 +90,11 @@ export function useSlateSelector<T>(
           // is re-rendered, the selectors are called again, and
           // will throw again, if neither props nor store state
           // changed
-          latestSubscriptionCallbackError.current = err
+          if (err instanceof Error) {
+            latestSubscriptionCallbackError.current = err
+          } else {
+            latestSubscriptionCallbackError.current = new Error(String(err))
+          }
         }
 
         forceRender()

packages/slate-react/src/plugin/react-editor.ts

@@ -445,11 +445,12 @@ export const ReactEditor: ReactEditorInterface = {
     // stepper arrow on a number input). (2018/05/04)
     // https://github.com/ianstormtaylor/slate/issues/1819
     try {
-      targetEl = (isDOMElement(target)
-        ? target
-        : target.parentElement) as HTMLElement
+      targetEl = (
+        isDOMElement(target) ? target : target.parentElement
+      ) as HTMLElement
     } catch (err) {
       if (
+        err instanceof Error &&
         !err.message.includes('Permission denied to access property "nodeType"')
       ) {
         throw err
@@ -620,13 +621,13 @@ export const ReactEditor: ReactEditorInterface = {
     // A slate Point at zero-width Leaf always has an offset of 0 but a native DOM selection at
     // zero-width node has an offset of 1 so we have to check if we are in a zero-width node and
     // adjust the offset accordingly.
-    const startEl = (isDOMElement(startNode)
-      ? startNode
-      : startNode.parentElement) as HTMLElement
+    const startEl = (
+      isDOMElement(startNode) ? startNode : startNode.parentElement
+    ) as HTMLElement
     const isStartAtZeroWidth = !!startEl.getAttribute('data-slate-zero-width')
-    const endEl = (isDOMElement(endNode)
-      ? endNode
-      : endNode.parentElement) as HTMLElement
+    const endEl = (
+      isDOMElement(endNode) ? endNode : endNode.parentElement
+    ) as HTMLElement
     const isEndAtZeroWidth = !!endEl.getAttribute('data-slate-zero-width')
 
     domRange.setStart(startNode, isStartAtZeroWidth ? 1 : startOffset)
@@ -990,6 +991,6 @@ export const ReactEditor: ReactEditorInterface = {
       range = Editor.unhangRange(editor, range, { voids: true })
     }
 
-    return (range as unknown) as T extends true ? Range | null : Range
+    return range as unknown as T extends true ? Range | null : Range
   },
 }

packages/slate-react/src/utils/dom.ts

@@ -26,9 +26,9 @@ export {
 
 declare global {
   interface Window {
-    Selection: typeof Selection['constructor']
-    DataTransfer: typeof DataTransfer['constructor']
-    Node: typeof Node['constructor']
+    Selection: (typeof Selection)['constructor']
+    DataTransfer: (typeof DataTransfer)['constructor']
+    Node: (typeof Node)['constructor']
   }
 }
 

packages/slate-react/src/utils/hotkeys.ts

@@ -50,9 +50,9 @@ const WINDOWS_HOTKEYS = {
  */
 
 const create = (key: string) => {
-  const generic = HOTKEYS[key]
-  const apple = APPLE_HOTKEYS[key]
-  const windows = WINDOWS_HOTKEYS[key]
+  const generic = HOTKEYS[<keyof typeof HOTKEYS>key]
+  const apple = APPLE_HOTKEYS[<keyof typeof APPLE_HOTKEYS>key]
+  const windows = WINDOWS_HOTKEYS[<keyof typeof WINDOWS_HOTKEYS>key]
   const isGeneric = generic && isHotkey(generic)
   const isApple = apple && isHotkey(apple)
   const isWindows = windows && isHotkey(windows)

packages/slate-react/src/utils/range-list.ts

@@ -1,7 +1,10 @@
 import { Range } from 'slate'
 import { PLACEHOLDER_SYMBOL } from './weak-maps'
 
-export const shallowCompare = (obj1: {}, obj2: {}) =>
+export const shallowCompare = (
+  obj1: { [key: string]: unknown },
+  obj2: { [key: string]: unknown }
+) =>
   Object.keys(obj1).length === Object.keys(obj2).length &&
   Object.keys(obj1).every(
     key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]

packages/slate-react/src/utils/weak-maps.ts

@@ -18,10 +18,8 @@ export const NODE_TO_PARENT: WeakMap<Node, Ancestor> = new WeakMap()
 export const EDITOR_TO_WINDOW: WeakMap<Editor, Window> = new WeakMap()
 export const EDITOR_TO_ELEMENT: WeakMap<Editor, HTMLElement> = new WeakMap()
 export const EDITOR_TO_PLACEHOLDER: WeakMap<Editor, string> = new WeakMap()
-export const EDITOR_TO_PLACEHOLDER_ELEMENT: WeakMap<
-  Editor,
-  HTMLElement
-> = new WeakMap()
+export const EDITOR_TO_PLACEHOLDER_ELEMENT: WeakMap<Editor, HTMLElement> =
+  new WeakMap()
 export const ELEMENT_TO_NODE: WeakMap<HTMLElement, Node> = new WeakMap()
 export const NODE_TO_ELEMENT: WeakMap<Node, HTMLElement> = new WeakMap()
 export const NODE_TO_KEY: WeakMap<Node, Key> = new WeakMap()
@@ -38,10 +36,8 @@ export const IS_READ_ONLY: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_FOCUSED: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_COMPOSING: WeakMap<Editor, boolean> = new WeakMap()
 
-export const EDITOR_TO_USER_SELECTION: WeakMap<
-  Editor,
-  RangeRef | null
-> = new WeakMap()
+export const EDITOR_TO_USER_SELECTION: WeakMap<Editor, RangeRef | null> =
+  new WeakMap()
 
 /**
  * Weak map for associating the context `onChange` context with the plugin.
@@ -56,39 +52,29 @@ export const EDITOR_TO_ON_CHANGE = new WeakMap<
  * Weak maps for saving pending state on composition stage.
  */
 
-export const EDITOR_TO_SCHEDULE_FLUSH: WeakMap<
-  Editor,
-  () => void
-> = new WeakMap()
+export const EDITOR_TO_SCHEDULE_FLUSH: WeakMap<Editor, () => void> =
+  new WeakMap()
 
 export const EDITOR_TO_PENDING_INSERTION_MARKS: WeakMap<
   Editor,
   Partial<Text> | null
 > = new WeakMap()
 
-export const EDITOR_TO_USER_MARKS: WeakMap<
-  Editor,
-  Partial<Text> | null
-> = new WeakMap()
+export const EDITOR_TO_USER_MARKS: WeakMap<Editor, Partial<Text> | null> =
+  new WeakMap()
 
 /**
  * Android input handling specific weak-maps
  */
 
-export const EDITOR_TO_PENDING_DIFFS: WeakMap<
-  Editor,
-  TextDiff[]
-> = new WeakMap()
+export const EDITOR_TO_PENDING_DIFFS: WeakMap<Editor, TextDiff[]> =
+  new WeakMap()
 
-export const EDITOR_TO_PENDING_ACTION: WeakMap<
-  Editor,
-  Action | null
-> = new WeakMap()
+export const EDITOR_TO_PENDING_ACTION: WeakMap<Editor, Action | null> =
+  new WeakMap()
 
-export const EDITOR_TO_PENDING_SELECTION: WeakMap<
-  Editor,
-  Range | null
-> = new WeakMap()
+export const EDITOR_TO_PENDING_SELECTION: WeakMap<Editor, Range | null> =
+  new WeakMap()
 
 export const EDITOR_TO_FORCE_RENDER: WeakMap<Editor, () => void> = new WeakMap()
 
@@ -96,7 +82,7 @@ export const EDITOR_TO_FORCE_RENDER: WeakMap<Editor, () => void> = new WeakMap()
  * Symbols.
  */
 
-export const PLACEHOLDER_SYMBOL = (Symbol('placeholder') as unknown) as string
-export const MARK_PLACEHOLDER_SYMBOL = (Symbol(
+export const PLACEHOLDER_SYMBOL = Symbol('placeholder') as unknown as string
+export const MARK_PLACEHOLDER_SYMBOL = Symbol(
   'mark-placeholder'
-) as unknown) as string
+) as unknown as string