incremental upgrade to React 18, TS 4.9, etc.

Author: dylans

.yarn/releases/yarn-3.3.1.cjs

@@ -1,6 +1,6 @@
 # Editable component
 
-## `Editable(props: EditableProps): JSX.Element`
+## `Editable(props: EditableProps): ReactElement | null`
 
 The `Editable` component is the main editing component. Note that it must be inside a `Slate` component.
 
@@ -16,9 +16,9 @@ type EditableProps = {
   readOnly?: boolean
   role?: string
   style?: React.CSSProperties
-  renderElement?: (props: RenderElementProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
-  renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element
+  renderElement?: (props: RenderElementProps) => ReactElement | null
+  renderLeaf?: (props: RenderLeafProps) => ReactElement | null
+  renderPlaceholder?: (props: RenderPlaceholderProps) => ReactElement | null 
   scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void
   as?: React.ElementType
   disableDefaultStyles?: boolean
@@ -39,7 +39,7 @@ If this prop is omitted or set to false, the editor remains in the default "edit
 
 This prop is particularly useful when you want to display text or rich media content without allowing users to edit it, such as when displaying published content or a preview of the user's input.
 
-#### `renderElement?: (props: RenderElementProps) => JSX.Element`
+#### `renderElement?: (props: RenderElementProps) => ReactElement | null`
 
 The `renderElement` prop is a function used to render a custom component for a specific type of Element node in the Slate.js document model.
 
@@ -108,7 +108,7 @@ const DefaultElement = props => {
 }
 ```
 
-#### `renderLeaf?: (props: RenderLeafProps) => JSX.Element`
+#### `renderLeaf?: (props: RenderLeafProps) => ReactElement | null` 
 
 The `renderLeaf` prop allows you to customize the rendering of leaf nodes in the document tree of your Slate editor. A "leaf" in Slate is the smallest chunk of text and its associated formatting attributes.
 
@@ -142,7 +142,7 @@ Example usage:
 />
 ```
 
-#### `renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element`
+#### `renderPlaceholder?: (props: RenderPlaceholderProps) => ReactElement | null`
 
 The `renderPlaceholder` prop allows you to customize how the placeholder of the Slate.js `Editable` component is rendered when the editor is empty. The placeholder will only be shown when the editor's content is empty.
 

.yarn/releases/yarn-3.6.4.cjs

@@ -1,6 +1,6 @@
 # Slate Component
 
-## `Slate(props: SlateProps): JSX.Element`
+## `Slate(props: SlateProps): ReactElement | null`
 
 The `Slate` component must include somewhere in its `children` the `Editable` component.
 

docs/libraries/slate-react/editable.md

@@ -61,8 +61,8 @@
     "@types/mocha": "^5.2.7",
     "@types/node": "^16.11.26",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^16.9.13",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^16.14.49",
+    "@types/react-dom": "^16.9.20",
     "@typescript-eslint/eslint-plugin": "^5.30.5",
     "@typescript-eslint/parser": "^5.30.5",
     "babel-eslint": "^10.0.3",
@@ -89,11 +89,11 @@
     "playwright": "^1.29.1",
     "prettier": "^1.19.1",
     "prismjs": "^1.29.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-error-boundary": "^1.2.5",
-    "react-router-dom": "^5.1.2",
-    "react-values": "^0.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
+    "react-router-dom": "^5.3.4",
+    "react-values": "^0.3.3",
     "rimraf": "^3.0.2",
     "rollup": "^2.26.6",
     "rollup-plugin-babel": "^4.3.3",
@@ -113,7 +113,7 @@
     "slate-react": "workspace:*",
     "source-map-loader": "^4.0.0",
     "ts-jest": "^27.1.3",
-    "typescript": "4.0.5"
+    "typescript": "4.9.5"
   },
   "simple-git-hooks": {
     "pre-commit": "yarn lint-staged"
@@ -124,5 +124,5 @@
       "eslint --fix"
     ]
   },
-  "packageManager": "yarn@3.3.1"
+  "packageManager": "yarn@3.6.4"
 }

docs/libraries/slate-react/slate.md

@@ -28,13 +28,13 @@
     "@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/react": "^16.14.49",
+    "@types/react-dom": "^16.9.20",
+    "@types/react-test-renderer": "^16.9.8",
     "@types/resize-observer-browser": "^0.1.7",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "react-test-renderer": ">=16.8.0",
+    "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"

package.json

@@ -2,6 +2,7 @@ import getDirection from 'direction'
 import debounce from 'lodash/debounce'
 import throttle from 'lodash/throttle'
 import React, {
+  ReactElement,
   useCallback,
   useEffect,
   useMemo,
@@ -115,9 +116,9 @@ export type EditableProps = {
   readOnly?: boolean
   role?: string
   style?: React.CSSProperties
-  renderElement?: (props: RenderElementProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
-  renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element
+  renderElement?: (props: RenderElementProps) => ReactElement
+  renderLeaf?: (props: RenderLeafProps) => ReactElement
+  renderPlaceholder?: (props: RenderPlaceholderProps) => ReactElement
   scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void
   as?: React.ElementType
   disableDefaultStyles?: boolean

packages/slate-react/package.json

@@ -1,5 +1,5 @@
 import getDirection from 'direction'
-import React, { useCallback } from 'react'
+import React, { ReactElement, useCallback } from 'react'
 import { Editor, Element as SlateElement, Node, Range } from 'slate'
 import { ReactEditor, useReadOnly, useSlateStatic } from '..'
 import useChildren from '../hooks/use-children'
@@ -26,9 +26,9 @@ import Text from './text'
 const Element = (props: {
   decorations: Range[]
   element: SlateElement
-  renderElement?: (props: RenderElementProps) => JSX.Element
-  renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element
-  renderLeaf?: (props: RenderLeafProps) => JSX.Element
+  renderElement?: (props: RenderElementProps) => ReactElement
+  renderPlaceholder: (props: RenderPlaceholderProps) => ReactElement
+  renderLeaf?: (props: RenderLeafProps) => ReactElement
   selection: Range | null
 }) => {
   const {

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

@@ -14,3 +14,29 @@ declare module 'slate' {
     }
   }
 }
+
+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/components/element.tsx

@@ -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/custom-types.ts

@@ -450,7 +450,7 @@ export const ReactEditor: ReactEditorInterface = {
         : target.parentElement) as HTMLElement
     } catch (err) {
       if (
-        !err.message.includes('Permission denied to access property "nodeType"')
+        (err instanceof Error) && !err.message.includes('Permission denied to access property "nodeType"')
       ) {
         throw err
       }

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

@@ -167,7 +167,7 @@ export const Menu = React.forwardRef(
   )
 )
 
-export const Portal = ({ children }) => {
+export const Portal = ({ children }: {children?: any}) => {
   return typeof document === 'object'
     ? ReactDOM.createPortal(children, document.body)
     : null

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

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -13,8 +17,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }