From 67d6ca364a0b5bc880e4a44bad0791209d1957a6 Mon Sep 17 00:00:00 2001
From: Valery Zinchenko <minicablestone@gmail.com>
Date: Mon, 3 Jul 2023 01:01:36 +0300
Subject: [PATCH] `SplitChildren` gets rid of `all: inherit` ! Not working !

---
 package.json                                   |  2 +-
 src/components/I18nEditor/I18nEditorUI.tsx     |  2 +-
 .../I18nEditor/components/SplitChildren.tsx    | 18 +++++++++++-------
 src/components/I18nEditor/editorContext.ts     |  2 +-
 src/components/I18nEditor/types.ts             |  2 +-
 .../TextSelection/TextSelectionProvider.tsx    |  7 +++++--
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 457e89a..c70d117 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-i18n-editor",
-  "version": "0.2.0-rc.16",
+  "version": "0.2.0-rc.17",
   "description": "Enables localization editor directly on a webpage.",
   "main": "dist/index.ts",
   "types": "dist/index.d.ts",
diff --git a/src/components/I18nEditor/I18nEditorUI.tsx b/src/components/I18nEditor/I18nEditorUI.tsx
index 47eed92..2c7be7f 100644
--- a/src/components/I18nEditor/I18nEditorUI.tsx
+++ b/src/components/I18nEditor/I18nEditorUI.tsx
@@ -35,7 +35,7 @@ import { I18nEditorTabs, Resource, Resources } from "./types"
 export const I18N_EDITOR_REFRESH_EVENT = "i18n-editor-refresh"
 
 interface I18nEditorUIProps {
-  root: Element
+  root: Node
 
 
   languages: string[]
diff --git a/src/components/I18nEditor/components/SplitChildren.tsx b/src/components/I18nEditor/components/SplitChildren.tsx
index 81f3c55..52ab8fc 100644
--- a/src/components/I18nEditor/components/SplitChildren.tsx
+++ b/src/components/I18nEditor/components/SplitChildren.tsx
@@ -1,22 +1,26 @@
-import { ReactNode, useState } from "react"
+import { ReactNode, useRef } from "react"
 
 interface SplitChildrenProps {
   baseChildren: ReactNode
-  children(element: HTMLDivElement): ReactNode
+  children(element: DocumentFragment): ReactNode
 }
 
 /**
  * [Read more here](https://github.com/FrameMuse/react-i18next-editor/issues/30)
  */
 function SplitChildren(props: SplitChildrenProps) {
-  const [root, setRoot] = useState<HTMLDivElement | null>(null)
+  const rootRef = useRef(document.createDocumentFragment())
+
+  function replaceWithFragment(element: HTMLDivElement | null) {
+    if (element == null) return
+
+    element.replaceWith(rootRef.current)
+  }
 
   return (
     <>
-      <div style={{ all: "inherit" }} ref={setRoot}>
-        {props.baseChildren}
-      </div>
-      {root && props.children(root)}
+      {props.baseChildren}
+      {props.children(rootRef.current)}
     </>
   )
 }
diff --git a/src/components/I18nEditor/editorContext.ts b/src/components/I18nEditor/editorContext.ts
index 445a057..10a4536 100644
--- a/src/components/I18nEditor/editorContext.ts
+++ b/src/components/I18nEditor/editorContext.ts
@@ -7,7 +7,7 @@ import { JsonValue } from "type-fest"
 import { Resource, Resources } from "./types"
 
 export interface EditorContext {
-  root: Element
+  root: Node
 
   jsonModel: JsonModel
   selectedSymbol: JsonModelSymbol | null
diff --git a/src/components/I18nEditor/types.ts b/src/components/I18nEditor/types.ts
index ea09d40..f1d7f63 100644
--- a/src/components/I18nEditor/types.ts
+++ b/src/components/I18nEditor/types.ts
@@ -11,7 +11,7 @@ export interface I18nEditorOptions {
 }
 
 export interface I18nEditorMiddlewareProps {
-  root: Element
+  root: Node
 }
 export type I18nEditorMiddleware = (props: I18nEditorMiddlewareProps) => ReactElement
 
diff --git a/src/components/TextSelection/TextSelectionProvider.tsx b/src/components/TextSelection/TextSelectionProvider.tsx
index 4547390..771063c 100644
--- a/src/components/TextSelection/TextSelectionProvider.tsx
+++ b/src/components/TextSelection/TextSelectionProvider.tsx
@@ -9,7 +9,7 @@ import selectionContext, { TextSelectionContext } from "./selectionContext"
 import TextSelectionNode from "./TextSelectionNode"
 
 export interface TextSelectionProviderProps {
-  root: Element
+  root: Node
 
   children: ReactNode
 }
@@ -101,9 +101,12 @@ function TextSelectionProvider(props: TextSelectionProviderProps) {
 
   // Watching for size change.
   useEffect(() => {
+    const parentElement = props.root.parentElement
+    if (parentElement == null) return
+
     const resizeObserver = new ResizeObserver(refreshTextNodes)
 
-    resizeObserver.observe(props.root)
+    resizeObserver.observe(parentElement)
     return () => {
       resizeObserver.disconnect()
     }