@wangeditor-next/yjs-for-react 0.1.0

package/dist/types.d.ts

@@ -0,0 +1 @@
+export declare type Store<T> = readonly [(onStoreChange: () => void) => () => void, () => T];

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK,CAAC,CAAC,IAAI,SAAS;IAC9B,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI;IACzC,MAAM,CAAC;CACR,CAAC"}

package/dist/utils/getCursorRange.d.ts

@@ -0,0 +1,3 @@
+import { CursorEditor, CursorState } from '@wangeditor-next/yjs';
+import { BaseRange } from 'slate';
+export declare function getCursorRange<TCursorData extends Record<string, unknown> = Record<string, unknown>>(editor: CursorEditor<TCursorData>, cursorState: CursorState<TCursorData>): BaseRange | null;

package/dist/utils/getCursorRange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCursorRange.d.ts","sourceRoot":"","sources":["../../src/utils/getCursorRange.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAOrD,wBAAgB,cAAc,CAC5B,WAAW,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErE,MAAM,EAAE,YAAY,CAAC,WAAW,CAAC,EACjC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,GACpC,SAAS,GAAG,IAAI,CA2BlB"}

package/dist/utils/getOverlayPosition.d.ts

@@ -0,0 +1,23 @@
+import { BaseRange, Path, Text } from 'slate';
+import { IDomEditor } from '@wangeditor-next/editor';
+export declare type SelectionRect = {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+};
+export declare type CaretPosition = {
+    height: number;
+    top: number;
+    left: number;
+};
+export declare type OverlayPosition = {
+    caretPosition: CaretPosition | null;
+    selectionRects: SelectionRect[];
+};
+export declare type GetSelectionRectsOptions = {
+    xOffset: number;
+    yOffset: number;
+    shouldGenerateOverlay?: (node: Text, path: Path) => boolean;
+};
+export declare function getOverlayPosition(editor: IDomEditor, range: BaseRange, { yOffset, xOffset, shouldGenerateOverlay }: GetSelectionRectsOptions): OverlayPosition;

package/dist/utils/getOverlayPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getOverlayPosition.d.ts","sourceRoot":"","sources":["../../src/utils/getOverlayPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAU,IAAI,EAAS,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,oBAAY,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC,cAAc,EAAE,aAAa,EAAE,CAAC;CACjC,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;CAC7D,CAAC;AAEF,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,SAAS,EAChB,EAAE,OAAO,EAAE,OAAO,EAAE,qBAAqB,EAAE,EAAE,wBAAwB,GACpE,eAAe,CA8EjB"}

package/dist/utils/react-editor-to-dom-range-safe.d.ts

@@ -0,0 +1,3 @@
+import { BaseRange } from 'slate';
+import { IDomEditor } from '@wangeditor-next/editor';
+export declare function reactEditorToDomRangeSafe(editor: IDomEditor, range: BaseRange): Range | null;

package/dist/utils/react-editor-to-dom-range-safe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-editor-to-dom-range-safe.d.ts","sourceRoot":"","sources":["../../src/utils/react-editor-to-dom-range-safe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,SAAS,GACf,KAAK,GAAG,IAAI,CAMd"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@wangeditor-next/yjs-for-react",
+  "private": false,
+  "version": "0.1.0",
+  "description": "React specific components/utils for wangeditor-next-yjs.",
+  "keywords": [
+    "slate",
+    "yjs",
+    "collaborative",
+    "react"
+  ],
+  "homepage": "https://github.com/cycleccc/wangEditor#readme",
+  "type": "module",
+  "exports": {
+    "require": "./dist/index.js",
+    "default": "./dist/index.esm.js"
+  },
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/index.global.js",
+  "scripts": {
+    "test": "jest",
+    "test-c": "jest --coverage",
+    "dev": "cross-env NODE_ENV=development rollup -c rollup.config.js",
+    "dev-watch": "cross-env NODE_ENV=development rollup -c rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup -c rollup.config.js",
+    "dev-size-stats": "cross-env NODE_ENV=development:size_stats rollup -c rollup.config.js",
+    "size-stats": "cross-env NODE_ENV=production:size_stats rollup -c rollup.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cycleccc/wangEditor.git"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^17.0.34",
+    "@types/use-sync-external-store": "^0.0.3"
+  },
+  "bugs": {
+    "url": "https://github.com/cycleccc/wangEditor/issues"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.2.0",
+    "y-protocols": "^1.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "@wangeditor-next/core": "1.x",
+    "@wangeditor-next/editor": "5.x",
+    "slate": "^0.72.0",
+    "yjs": "^13.5.29"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,28 @@
+import { createRollupConfig, IS_PRD } from '../../build/create-rollup-config'
+import pkg from './package.json'
+
+const name = 'WangEditorCodeHighLight'
+
+const configList = []
+
+// esm
+const esmConf = createRollupConfig({
+  output: {
+    file: pkg.module,
+    format: 'esm',
+    name,
+  },
+})
+configList.push(esmConf)
+
+// umd
+const umdConf = createRollupConfig({
+  output: {
+    file: pkg.main,
+    format: 'umd',
+    name,
+  },
+})
+configList.push(umdConf)
+
+export default configList

package/src/hooks/use-editor-static.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react'
+import { IDomEditor } from '@wangeditor-next/editor'
+
+export const EditorContext = createContext<IDomEditor | null>(null)
+
+export const useEditorStatic = (): IDomEditor | null => {
+  const editor = useContext(EditorContext)
+  if (!editor) {
+    // throw new Error(
+    //   `The \`useEditorStatic\` hook must be used inside the <EditorContext> component's context.`
+    // )
+    console.warn(
+      "The `useEditorStatic` hook must be used inside the <EditorContext> component's context."
+    )
+  }
+
+  return editor
+}

package/src/hooks/useRemoteCursorEditor.ts

@@ -0,0 +1,14 @@
+import { CursorEditor } from '@wangeditor-next/yjs'
+import { IDomEditor } from '@wangeditor-next/editor'
+import { useEditorStatic } from './use-editor-static'
+
+export function useRemoteCursorEditor<
+  TCursorData extends Record<string, unknown> = Record<string, unknown>
+>(): CursorEditor<TCursorData> & IDomEditor {
+  const editor = useEditorStatic()
+  if (!CursorEditor.isCursorEditor(editor)) {
+    console.warn('Cannot use useSyncExternalStore outside the context of a RemoteCursorEditor')
+  }
+
+  return editor as CursorEditor & IDomEditor
+}

package/src/hooks/useRemoteCursorOverlayPositions.tsx

@@ -0,0 +1,131 @@
+import { CursorState } from '@wangeditor-next/yjs'
+import { RefObject, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { BaseRange, NodeMatch, Text } from 'slate'
+import { getCursorRange } from '../utils/getCursorRange'
+import {
+  CaretPosition,
+  getOverlayPosition,
+  OverlayPosition,
+  SelectionRect,
+} from '../utils/getOverlayPosition'
+import { useRemoteCursorEditor } from './useRemoteCursorEditor'
+import { useRemoteCursorStates } from './useRemoteCursorStates'
+import { useOnResize, useRequestRerender } from './utils'
+
+const FROZEN_EMPTY_ARRAY = Object.freeze([])
+
+export type UseRemoteCursorOverlayPositionsOptions<T extends HTMLElement> = {
+  shouldGenerateOverlay?: NodeMatch<Text>
+} & (
+  | {
+      // Container the overlay will be rendered in. If set, all returned overlay positions
+      // will be relative to this container and the cursor positions will be automatically
+      // updated on container resize.
+      containerRef?: undefined
+    }
+  | {
+      containerRef: RefObject<T>
+
+      // Whether to refresh the cursor overlay positions on container resize. Defaults
+      // to true. If set to 'debounced', the remote cursor positions will be updated
+      // each animation frame.
+      refreshOnResize?: boolean | 'debounced'
+    }
+)
+
+export type CursorOverlayData<TCursorData extends Record<string, unknown>> =
+  CursorState<TCursorData> & {
+    range: BaseRange | null
+    caretPosition: CaretPosition | null
+    selectionRects: SelectionRect[]
+  }
+
+export function useRemoteCursorOverlayPositions<
+  TCursorData extends Record<string, unknown>,
+  TContainer extends HTMLElement = HTMLDivElement
+>({
+  containerRef,
+  shouldGenerateOverlay,
+  ...opts
+}: UseRemoteCursorOverlayPositionsOptions<TContainer> = {}) {
+  const editor = useRemoteCursorEditor<TCursorData>()
+  const cursorStates = useRemoteCursorStates<TCursorData>()
+  const requestRerender = useRequestRerender()
+
+  const overlayPositionCache = useRef(new WeakMap<BaseRange, OverlayPosition>())
+  const [overlayPositions, setOverlayPositions] = useState<Record<string, OverlayPosition>>({})
+
+  const refreshOnResize = 'refreshOnResize' in opts ? opts.refreshOnResize ?? true : true
+
+  useOnResize(refreshOnResize ? containerRef : undefined, () => {
+    overlayPositionCache.current = new WeakMap()
+    requestRerender(refreshOnResize !== 'debounced')
+  })
+
+  // Update selection rects after paint
+  useLayoutEffect(() => {
+    // We have a container ref but the ref is null => container
+    // isn't mounted to we can't calculate the selection rects.
+    if (containerRef && !containerRef.current) {
+      return
+    }
+
+    const containerRect = containerRef?.current?.getBoundingClientRect()
+    const xOffset = containerRect?.x ?? 0
+    const yOffset = containerRect?.y ?? 0
+
+    let overlayPositionsChanged =
+      Object.keys(overlayPositions).length !== Object.keys(cursorStates).length
+
+    const updated = Object.fromEntries(
+      Object.entries(cursorStates).map(([key, state]) => {
+        const range = state.relativeSelection && getCursorRange(editor, state)
+
+        if (!range) {
+          return [key, FROZEN_EMPTY_ARRAY]
+        }
+
+        const cached = overlayPositionCache.current.get(range)
+        if (cached) {
+          return [key, cached]
+        }
+
+        const overlayPosition = getOverlayPosition(editor, range, {
+          xOffset,
+          yOffset,
+          shouldGenerateOverlay,
+        })
+        overlayPositionsChanged = true
+        overlayPositionCache.current.set(range, overlayPosition)
+        return [key, overlayPosition]
+      })
+    )
+
+    if (overlayPositionsChanged) {
+      setOverlayPositions(updated)
+    }
+  })
+
+  const overlayData = useMemo<CursorOverlayData<TCursorData>[]>(
+    () =>
+      Object.entries(cursorStates).map(([clientId, state]) => {
+        const range = state.relativeSelection && getCursorRange(editor, state)
+        const overlayPosition = overlayPositions[clientId]
+
+        return {
+          ...state,
+          range,
+          caretPosition: overlayPosition?.caretPosition ?? null,
+          selectionRects: overlayPosition?.selectionRects ?? FROZEN_EMPTY_ARRAY,
+        }
+      }),
+    [cursorStates, editor, overlayPositions]
+  )
+
+  const refresh = useCallback(() => {
+    overlayPositionCache.current = new WeakMap()
+    requestRerender(true)
+  }, [requestRerender])
+
+  return [overlayData, refresh] as const
+}

package/src/hooks/useRemoteCursorStateStore.ts

@@ -0,0 +1,85 @@
+import { CursorEditor, CursorState, RemoteCursorChangeEventListener } from '@wangeditor-next/yjs'
+import { BaseEditor } from 'slate'
+import { Store } from '../types'
+import { useRemoteCursorEditor } from './useRemoteCursorEditor'
+
+export type CursorStore<TCursorData extends Record<string, unknown> = Record<string, unknown>> =
+  Store<Record<string, CursorState<TCursorData>>>
+
+const EDITOR_TO_CURSOR_STORE: WeakMap<BaseEditor, CursorStore> = new WeakMap()
+
+function createRemoteCursorStateStore<TCursorData extends Record<string, unknown>>(
+  editor: CursorEditor<TCursorData>
+): CursorStore<TCursorData> {
+  let cursors: Record<string, CursorState<TCursorData>> = {}
+
+  const changed = new Set<number>()
+  const addChanged = changed.add.bind(changed)
+  const onStoreChangeListeners: Set<() => void> = new Set()
+
+  let changeHandler: RemoteCursorChangeEventListener | null = null
+
+  const subscribe = (onStoreChange: () => void) => {
+    onStoreChangeListeners.add(onStoreChange)
+    if (!changeHandler) {
+      changeHandler = event => {
+        event.added.forEach(addChanged)
+        event.removed.forEach(addChanged)
+        event.updated.forEach(addChanged)
+        onStoreChangeListeners.forEach(listener => listener())
+      }
+      CursorEditor.on(editor, 'change', changeHandler)
+    }
+
+    return () => {
+      onStoreChangeListeners.delete(onStoreChange)
+      if (changeHandler && onStoreChangeListeners.size === 0) {
+        CursorEditor.off(editor, 'change', changeHandler)
+        changeHandler = null
+      }
+    }
+  }
+
+  const getSnapshot = () => {
+    if (changed.size === 0) {
+      return cursors
+    }
+
+    changed.forEach(clientId => {
+      const state = CursorEditor.cursorState(editor, clientId)
+      if (state === null) {
+        delete cursors[clientId.toString()]
+        return
+      }
+
+      cursors[clientId] = state
+    })
+
+    changed.clear()
+    cursors = { ...cursors }
+    return cursors
+  }
+
+  return [subscribe, getSnapshot]
+}
+
+function getCursorStateStore<TCursorData extends Record<string, unknown>>(
+  editor: CursorEditor<TCursorData>
+): CursorStore<TCursorData> {
+  const existing = EDITOR_TO_CURSOR_STORE.get(editor)
+  if (existing) {
+    return existing as CursorStore<TCursorData>
+  }
+
+  const store = createRemoteCursorStateStore(editor)
+
+  if (editor) EDITOR_TO_CURSOR_STORE.set(editor, store)
+  return store
+}
+
+export function useRemoteCursorStateStore<
+  TCursorData extends Record<string, unknown> = Record<string, unknown>
+>() {
+  const editor = useRemoteCursorEditor<TCursorData>()
+  return getCursorStateStore(editor)
+}

package/src/hooks/useRemoteCursorStates.ts

@@ -0,0 +1,22 @@
+import { CursorState } from '@wangeditor-next/yjs'
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
+import { useRemoteCursorStateStore } from './useRemoteCursorStateStore'
+
+export function useRemoteCursorStates<
+  TCursorData extends Record<string, unknown> = Record<string, unknown>
+>() {
+  const [subscribe, getSnapshot] = useRemoteCursorStateStore<TCursorData>()
+  return useSyncExternalStore(subscribe, getSnapshot)
+}
+
+export function useRemoteCursorStatesSelector<
+  TCursorData extends Record<string, unknown> = Record<string, unknown>,
+  TSelection = unknown
+>(
+  selector: (cursors: Record<string, CursorState<TCursorData>>) => TSelection,
+  isEqual?: (a: TSelection, b: TSelection) => boolean
+): TSelection {
+  const [subscribe, getSnapshot] = useRemoteCursorStateStore<TCursorData>()
+  return useSyncExternalStoreWithSelector(subscribe, getSnapshot, null, selector, isEqual)
+}

package/src/hooks/utils.ts

@@ -0,0 +1,54 @@
+import { RefObject, useCallback, useEffect, useReducer, useRef, useState } from 'react'
+
+export function useRequestRerender() {
+  const [, rerender] = useReducer(s => s + 1, 0)
+  const animationFrameIdRef = useRef<number | null>(null)
+
+  const clearAnimationFrame = () => {
+    if (animationFrameIdRef.current) {
+      cancelAnimationFrame(animationFrameIdRef.current)
+      animationFrameIdRef.current = 0
+    }
+  }
+
+  useEffect(clearAnimationFrame)
+  useEffect(() => clearAnimationFrame, [])
+
+  return useCallback((immediately = false) => {
+    if (immediately) {
+      rerender()
+      return
+    }
+
+    if (animationFrameIdRef.current) {
+      return
+    }
+
+    animationFrameIdRef.current = requestAnimationFrame(rerender)
+  }, [])
+}
+
+export function useOnResize<T extends HTMLElement>(
+  ref: RefObject<T> | undefined,
+  onResize: () => void
+) {
+  const onResizeRef = useRef(onResize)
+  onResizeRef.current = onResize
+
+  const [observer] = useState(
+    () =>
+      new ResizeObserver(() => {
+        onResizeRef.current()
+      })
+  )
+
+  useEffect(() => {
+    if (!ref?.current) {
+      return
+    }
+
+    const { current: element } = ref
+    observer.observe(element)
+    return () => observer.unobserve(element)
+  }, [observer, ref])
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export { EditorContext, useEditorStatic } from './hooks/use-editor-static'
+
+export { useRemoteCursorStatesSelector, useRemoteCursorStates } from './hooks/useRemoteCursorStates'
+
+export { getCursorRange } from './utils/getCursorRange'
+
+export {
+  CursorOverlayData,
+  UseRemoteCursorOverlayPositionsOptions,
+  useRemoteCursorOverlayPositions,
+} from './hooks/useRemoteCursorOverlayPositions'

package/src/types.ts

@@ -0,0 +1 @@
+export type Store<T> = readonly [(onStoreChange: () => void) => () => void, () => T]

package/src/utils/getCursorRange.ts

@@ -0,0 +1,34 @@
+import { CursorEditor, CursorState, relativeRangeToSlateRange } from '@wangeditor-next/yjs'
+import { BaseRange, Descendant, Range } from 'slate'
+
+const CHILDREN_TO_CURSOR_STATE_TO_RANGE: WeakMap<
+  Descendant[],
+  WeakMap<CursorState, Range | null>
+> = new WeakMap()
+
+export function getCursorRange<
+  TCursorData extends Record<string, unknown> = Record<string, unknown>
+>(editor: CursorEditor<TCursorData>, cursorState: CursorState<TCursorData>): BaseRange | null {
+  if (!cursorState.relativeSelection) {
+    return null
+  }
+
+  let cursorStates = CHILDREN_TO_CURSOR_STATE_TO_RANGE.get(editor.children)
+  if (!cursorStates) {
+    cursorStates = new WeakMap()
+    CHILDREN_TO_CURSOR_STATE_TO_RANGE.set(editor.children, cursorStates)
+  }
+
+  let range = cursorStates.get(cursorState)
+  if (range === undefined) {
+    try {
+      range = relativeRangeToSlateRange(editor.sharedRoot, editor, cursorState.relativeSelection)
+
+      cursorStates.set(cursorState, range)
+    } catch (e) {
+      return null
+    }
+  }
+
+  return range
+}

package/src/utils/getOverlayPosition.ts

@@ -0,0 +1,107 @@
+import { BaseRange, Editor, Path, Range, Text } from 'slate'
+import { DomEditor, IDomEditor } from '@wangeditor-next/editor'
+import { reactEditorToDomRangeSafe } from './react-editor-to-dom-range-safe'
+
+export type SelectionRect = {
+  width: number
+  height: number
+  top: number
+  left: number
+}
+
+export type CaretPosition = {
+  height: number
+  top: number
+  left: number
+}
+
+export type OverlayPosition = {
+  caretPosition: CaretPosition | null
+  selectionRects: SelectionRect[]
+}
+
+export type GetSelectionRectsOptions = {
+  xOffset: number
+  yOffset: number
+  shouldGenerateOverlay?: (node: Text, path: Path) => boolean
+}
+
+export function getOverlayPosition(
+  editor: IDomEditor,
+  range: BaseRange,
+  { yOffset, xOffset, shouldGenerateOverlay }: GetSelectionRectsOptions
+): OverlayPosition {
+  const [start, end] = Range.edges(range)
+  const domRange = reactEditorToDomRangeSafe(editor, range)
+  if (!domRange) {
+    return {
+      caretPosition: null,
+      selectionRects: [],
+    }
+  }
+
+  const selectionRects: SelectionRect[] = []
+  const nodeIterator = Editor.nodes(editor, {
+    at: range,
+    match: (n, p) => Text.isText(n) && (!shouldGenerateOverlay || shouldGenerateOverlay(n, p)),
+  })
+
+  let caretPosition: CaretPosition | null = null
+  const isBackward = Range.isBackward(range)
+  for (const [node, path] of nodeIterator) {
+    const domNode = DomEditor.toDOMNode(editor, node)
+
+    const isStartNode = Path.equals(path, start.path)
+    const isEndNode = Path.equals(path, end.path)
+
+    let clientRects: DOMRectList | null = null
+    if (isStartNode || isEndNode) {
+      const nodeRange = document.createRange()
+      nodeRange.selectNode(domNode)
+
+      if (isStartNode) {
+        nodeRange.setStart(domRange.startContainer, domRange.startOffset)
+      }
+      if (isEndNode) {
+        nodeRange.setEnd(domRange.endContainer, domRange.endOffset)
+      }
+
+      clientRects = nodeRange.getClientRects()
+    } else {
+      clientRects = domNode.getClientRects()
+    }
+
+    const isCaret = isBackward ? isStartNode : isEndNode
+    for (let i = 0; i < clientRects.length; i++) {
+      const clientRect = clientRects.item(i)
+      if (!clientRect) {
+        continue
+      }
+
+      const isCaretRect = isCaret && (isBackward ? i === 0 : i === clientRects.length - 1)
+
+      const top = clientRect.top - yOffset
+      const left = clientRect.left - xOffset
+
+      if (isCaretRect) {
+        caretPosition = {
+          height: clientRect.height,
+          top,
+          left: left + (isBackward || Range.isCollapsed(range) ? 0 : clientRect.width),
+        }
+      }
+
+      selectionRects.push({
+        width: clientRect.width,
+        height: clientRect.height,
+        top,
+        left,
+      })
+    }
+  }
+
+  return {
+    selectionRects,
+    caretPosition,
+  }
+}

package/src/utils/react-editor-to-dom-range-safe.ts

@@ -0,0 +1,10 @@
+import { BaseRange } from 'slate'
+import { DomEditor, IDomEditor } from '@wangeditor-next/editor'
+
+export function reactEditorToDomRangeSafe(editor: IDomEditor, range: BaseRange): Range | null {
+  try {
+    return DomEditor.toDOMRange(editor, range)
+  } catch (e) {
+    return null
+  }
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {},
+  "extends": "../../tsconfig.json",
+  "include": [
+    "./src/**/*",
+    // "../custom-types.d.ts"
+  ]
+}