1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-09-02 19:52:32 +02:00

fix: shadow-dom example not found in examples (#4226)

This commit is contained in:
katsew
2021-04-26 18:35:54 +09:00
committed by GitHub
parent de159f99f8
commit c70e30f83d

View File

@@ -1,17 +1,17 @@
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import React, { useState, useMemo, useRef, useEffect } from 'react' 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 { Slate, Editable, withReact } from 'slate-react'
import { withHistory } from 'slate-history' import { withHistory } from 'slate-history'
const ShadowDOM = () => { const ShadowDOM = () => {
const container = useRef(null) const container = useRef<HTMLDivElement>(null)
useEffect(() => { useEffect(() => {
if (container.current.shadowRoot) return if (container.current!.shadowRoot) return
// Create a shadow DOM // Create a shadow DOM
const outerShadowRoot = container.current.attachShadow({ mode: 'open' }) const outerShadowRoot = container.current!.attachShadow({ mode: 'open' })
const host = document.createElement('div') const host = document.createElement('div')
outerShadowRoot.appendChild(host) outerShadowRoot.appendChild(host)
@@ -28,7 +28,7 @@ const ShadowDOM = () => {
} }
const ShadowEditor = () => { const ShadowEditor = () => {
const [value, setValue] = useState(initialValue) const [value, setValue] = useState<Descendant[]>(initialValue)
const editor = useMemo(() => withHistory(withReact(createEditor())), []) const editor = useMemo(() => withHistory(withReact(createEditor())), [])
return ( 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.' }], children: [{ text: 'This Editor is rendered within a nested Shadow DOM.' }],
}, },
] ]