facebookarchive/draft-js

Support for Rendering within a Shadow DOM

Open

#1220 opened on May 22, 2017

View on GitHub
 (7 comments) (4 reactions) (0 assignees)JavaScript (22,554 stars) (2,646 forks)batch import
enhancementhelp wanted

Description

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
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactDraft.jsShadow DOM
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
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.