facebookarchive/draft-js

Support for Rendering within a Shadow DOM

Open

#1.220 geöffnet am 22. Mai 2017

Auf GitHub ansehen
 (7 Kommentare) (4 Reaktionen) (0 zugewiesene Personen)JavaScript (22.554 Stars) (2.646 Forks)batch import
enhancementhelp wanted

Beschreibung

Do you want to request a feature or report a bug?

Request a Feature

What is the current behavior?

Currently the draft editor throws errors at various times when rendered within a shadow dom.

Here is a CodePen I created to simplify the issue. This shows both the errors thrown when mounting, as well as when trying to focus(). https://codepen.io/michael_cox/pen/OmBPBm

More information can be found in this ticket for react-shadow: https://github.com/Wildhoney/ReactShadow/issues/31

A couple things I've found while diving into this:

What is the expected behavior?

Ideally the draft editor can be loaded in a shadow dom with the same functionality as when rendered normally.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

Testing draft 0.10.1 in Chrome 58, but I assume this is currently unsupported and would be an issue in any version.

Contributor Guide

Tech Stack
javascriptreact
Domain
frontend
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
half day
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
ReactDraft.jsShadow DOM
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
50
Research-Richtung
Examine DraftEditor.react.js (onSelect handler) and findAncestorOffsetKey.js (document.documentElement usage) to understand the current behavior. Reproduce the issue using the provided CodePen. Research Shadow DOM specifics: event handling and root element access. Consider solutions such as checking for shadowRoot and using that instead of document. Review the linked ReactShadow issue for additional context.