feat: 支持微前端 iframe 沙箱

Author: Knight Chen

packages/core/src/editor/dom-editor.ts

@@ -36,6 +36,7 @@ import $, {
   walkTextNodes,
 } from '../utils/dom'
 import { IS_CHROME, IS_FIREFOX } from '../utils/ua'
+import { isDocument, isShadowRoot } from '../utils/check'
 
 /**
  * 自定义全局 command
@@ -122,7 +123,7 @@ export const DomEditor = {
     const el = DomEditor.toDOMNode(editor, editor)
     const root = el.getRootNode()
 
-    if ((root instanceof Document || root instanceof ShadowRoot) && root.getSelection != null) {
+    if ((isDocument(root) || isShadowRoot(root)) && Reflect.get(root, 'getSelection') != null) {
       return root
     }
     return el.ownerDocument

packages/core/src/editor/plugins/with-content.ts

@@ -370,7 +370,7 @@ export const withContent = <T extends Editor>(editor: T) => {
    * 重置 HTML 内容
    * @param html html string
    */
-  e.setHtml = (html: string = '') => {
+  e.setHtml = (html: string | null = '') => {
     // 记录编辑器当前状态
     const isEditorDisabled = e.isDisabled()
     const isEditorFocused = e.isFocused()
@@ -384,7 +384,7 @@ export const withContent = <T extends Editor>(editor: T) => {
     // https://github.com/wangeditor-team/wangEditor/issues/4754
     e.clear()
     // 设置新内容
-    const newContent = htmlToContent(e, html)
+    const newContent = htmlToContent(e, html == null ? '' : html)
     Transforms.insertFragment(e, newContent)
 
     // 恢复编辑器状态和选区

packages/core/src/text-area/event-handlers/beforeInput.ts

@@ -11,6 +11,7 @@ import { hasEditableTarget } from '../helpers'
 import { DOMStaticRange } from '../../utils/dom'
 import { HAS_BEFORE_INPUT_SUPPORT } from '../../utils/ua'
 import { EDITOR_TO_CAN_PASTE } from '../../utils/weak-maps'
+import { isDataTransfer } from '../../utils/check'
 
 // 补充 beforeInput event 的属性
 interface BeforeInputEventType {
@@ -138,7 +139,7 @@ function handleBeforeInput(e: Event, textarea: TextArea, editor: IDomEditor) {
         if (!EDITOR_TO_CAN_PASTE.get(editor)) break // 不可默认粘贴
       }
 
-      if (data instanceof DataTransfer) {
+      if (isDataTransfer(data)) {
         // 这里处理非纯文本（如 html 图片文件等）的粘贴。对于纯文本的粘贴，使用 paste 事件
         editor.insertData(data)
       } else if (typeof data === 'string') {

packages/core/src/utils/check.ts

@@ -0,0 +1,21 @@
+const toString = (val: unknown): string => Object.prototype.toString.call(val)
+
+export function isDocument(val: unknown): val is Document {
+  return toString(val) === '[object HTMLDocument]'
+}
+
+export function isShadowRoot(val: any): val is ShadowRoot {
+  return toString(val) === '[object ShadowRoot]'
+}
+
+export function isDataTransfer(val: any): val is DataTransfer {
+  return toString(val) === '[object DataTransfer]'
+}
+
+export function isSelection(val: any): val is Selection {
+  return toString(val) === '[object Selection]'
+}
+
+export function isHTMLElement(val: any): val is HTMLElement {
+  return !!val && Reflect.get(val, 'nodeType') === Node.ELEMENT_NODE
+}

packages/core/src/utils/dom.ts

@@ -80,6 +80,7 @@ import DOMText = globalThis.Text
 import DOMRange = globalThis.Range
 import DOMSelection = globalThis.Selection
 import DOMStaticRange = globalThis.StaticRange
+import { isHTMLElement, isSelection } from './check'
 export { DOMNode, DOMComment, DOMElement, DOMText, DOMRange, DOMSelection, DOMStaticRange }
 
 export type DOMPoint = [Node, number]
@@ -109,20 +110,15 @@ export const isDOMElement = (value: any): value is DOMElement => {
  * Check if a value is a DOM node.
  */
 export const isDOMNode = (value: any): value is DOMNode => {
-  const window = getDefaultView(value)
-  return (
-    !!window &&
-    // @ts-ignore
-    value instanceof window.Node
-  )
+  return value != null && typeof value.nodeType === 'number'
 }
 
 /**
  * Check if a value is a DOM selection.
  */
 export const isDOMSelection = (value: any): value is DOMSelection => {
   const window = value && value.anchorNode && getDefaultView(value.anchorNode)
-  return !!window && value instanceof window.Selection
+  return !!window && isSelection(value)
 }
 
 /**
@@ -343,7 +339,7 @@ export function walkTextNodes(
   handler: (textNode: DOMNode, parent: DOMElement) => void
 ) {
   // void elem 内部的 text 不处理
-  if (elem instanceof HTMLElement && elem.dataset.slateVoid === 'true') return
+  if (isHTMLElement(elem) && elem.dataset.slateVoid === 'true') return
 
   for (let nodes = elem.childNodes, i = nodes.length; i--; ) {
     const node = nodes[i]