facebookarchive/draft-js

Support for Rendering within a Shadow DOM

Open

#1.220 aberto em 22 de mai. de 2017

Ver no 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.

Guia do colaborador

Pilha de tecnologia
javascriptreact
Domain
frontend
Tipo Issue
feature
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
half day
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
stale
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
ReactDraft.jsShadow DOM
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
50
Direção de pesquisa
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.