From c70e30f83d6d01738196714074d69462a0306d64 Mon Sep 17 00:00:00 2001
From: katsew <y.katsew@gmail.com>
Date: Mon, 26 Apr 2021 18:35:54 +0900
Subject: [PATCH] fix: shadow-dom example not found in examples (#4226)

---
 site/examples/{shadow-dom.js => shadow-dom.tsx} | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)
 rename site/examples/{shadow-dom.js => shadow-dom.tsx} (75%)

diff --git a/site/examples/shadow-dom.js b/site/examples/shadow-dom.tsx
similarity index 75%
rename from site/examples/shadow-dom.js
rename to site/examples/shadow-dom.tsx
index 01f0ce6da..e834c7d87 100644
--- a/site/examples/shadow-dom.js
+++ b/site/examples/shadow-dom.tsx
@@ -1,17 +1,17 @@
 import ReactDOM from 'react-dom'
 import React, { useState, useMemo, useRef, useEffect } from 'react'
-import { createEditor } from 'slate'
+import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 
 const ShadowDOM = () => {
-  const container = useRef(null)
+  const container = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (container.current.shadowRoot) return
+    if (container.current!.shadowRoot) return
 
     // Create a shadow DOM
-    const outerShadowRoot = container.current.attachShadow({ mode: 'open' })
+    const outerShadowRoot = container.current!.attachShadow({ mode: 'open' })
     const host = document.createElement('div')
     outerShadowRoot.appendChild(host)
 
@@ -28,7 +28,7 @@ const ShadowDOM = () => {
 }
 
 const ShadowEditor = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
@@ -38,8 +38,9 @@ const ShadowEditor = () => {
   )
 }
 
-const initialValue = [
+const initialValue: Descendant[] = [
   {
+    type: 'paragraph',
     children: [{ text: 'This Editor is rendered within a nested Shadow DOM.' }],
   },
 ]