search

ianstormtaylor / slate

A completely customizable framework for building rich text editors. (Currently in beta.)
http://slatejs.org
MIT License
29.71k stars 3.24k forks source link

iframe bug #3582

Open cucar opened 4 years ago

cucar commented 4 years ago

Slate events do not work in iframes. They used to work in v0.47. They seem to be broken now. Here's the sandbox to reproduce the issue: https://codesandbox.io/s/slate-reproductions-zysi3 It should be logging the changes to console but it gets ignored. In Firefox it does not seem to work at all. You can see the bug in Chrome and new Edge.

Thank you, Cagdas

<!DOCTYPE html>

import React, { useMemo } from 'react' import ReactDOM, { createPortal } from 'react-dom' import { createEditor } from 'slate' import { Slate, Editable, withReact } from 'slate-react' import { withHistory } from 'slate-history'

const App = () => { const editor = useMemo(() => withHistory(withReact(createEditor())), []) return createPortal( <Slate editor={editor} onChange={e => console.log(e)} defaultValue={[ { children: [ { text: 'This is editable plain text!', marks: [] } ] } ]}

<Editable placeholder="Enter some plain text..." style={{ padding: '10px', border: '1px solid #999' }} /> , document.getElementById('root').contentDocument.body ) }

const rootElement = document.getElementById('root') ReactDOM.render(, rootElement)

seeden commented 4 years ago

The main problem is that slatejs is using document directly. For example I am rendering some parts of application inside iframes and iframe has different document. Slatejs has no idea that it is inside iframe because it was created via main "document" outside of the iframe.

Simple solution is to to detect right document from slate div container.


const container = useRef();
const ownerDocument = container.current?.ownerDocument;