SplitChildren gets rid of all: inherit

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",

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[]

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)}
     </>
   )
 }

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

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
 

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()
     }