Issues and Pitfalls(问题和缺陷)

This article addresses some known issues with the Draft editor framework, as well as some common pitfalls that we have encountered while using the framework at Facebook.

本文讨论了有关编辑器框架Draft的一些已知问题，以及我们在Facebook上使用该框架时遇到的一些常见陷阱。

Common Pitfalls

Delayed state updates

A common pattern for unidirectional data management is to batch or otherwise delay updates to data stores, using a setTimeout or another mechanism. Stores are updated, then emit changes to the relevant React components to propagate re-rendering.

单向数据管理的一个常见模式是使用setTimeout或其他机制对数据stores进行批处理或以其他方式延迟更新。stores被更新，然后向相关的React组件传播以让组件重新渲染。

When delays are introduced to a React application with a Draft editor, however, it is possible to cause significant interaction problems. This is because the editor expects immediate updates and renders that stay in sync with the user’s typing behavior. Delays can prevent updates from being propagated through the editor component tree, which can cause a disconnect between keystrokes and updates.

但是，当使用Draft编辑器像React应用程序那样引入延迟时，可能会导致严重的交互问题。这是因为编辑器期望立即更新并呈现与用户输入行为同步的内容。延迟会阻止更新在编辑器组件树中传播，这会导致用户键盘输入和更新之间的断开。

To avoid this while still using a delaying or batching mechanism, you should separate the delay behavior from your Editor state propagation. That is, you must always allow your EditorState to propagate to your Editor component without delay, and independently perform batched updates that do not affect the state of your Editor component.

为了避免这种情况，同时仍然使用延迟或批处理机制，您应该将延迟行为与编辑器状态传播分离开来。也就是说，您必须始终允许您的EditorState毫不延迟地传播到您的编辑器组件，并独立地执行不影响编辑器组件状态的批量更新。

Missing Draft.css

The Draft framework includes a handful of CSS resources intended for use with the editor, available in a single file via the build, Draft.css.

Draft框架包含了一些用于编辑器的CSS资源,可通过构建repo然后在Draft.css中获得。

This CSS should be included when rendering the editor, as these styles set defaults for text alignment, spacing, and other important features. Without it, you may encounter issues with block positioning, alignment, and cursor behavior.

在渲染编辑器时应该包括这个CSS，因为这些样式设置了文本对齐、间距和其他重要特性的默认值。如果没有它，您可能会遇到块定位、对齐和游标行为方面的问题。

If you choose to write your own CSS independent of Draft.css, you will most likely need to replicate much of the default styling.

如果你选择写自己的CSS独立于Draft.css，您很可能需要复制大部分默认样式。

Known Issues

Custom OSX Keybindings

Because the browser has no access to OS-level custom keybindings, it is not possible to intercept edit intent behaviors that do not map to default system key bindings.

因为浏览器没有权限访问到OS级别的自定义按键绑定,所有有可能截取到跟默认系统按键绑定不匹配的编辑意图行为。

The result of this is that users who use custom keybindings may encounter issues with Draft editors, since their key commands may not behave as expected.

这样做的结果是，使用自定义键绑定的用户在使用Draft编辑器时可能会遇到问题，因为他们的按键命令的行为可能与预期的不同。

Browser plugins/extensions

As with any React application, browser plugins and extensions that modify the DOM can cause Draft editors to break.

与任何React应用程序一样，修改DOM的浏览器插件和扩展可能会导致Draft编辑器崩溃。

Grammar checkers, for instance, may modify the DOM within contentEditable elements, adding styles like underlines and backgrounds. Since React cannot reconcile the DOM if the browser does not match its expectations, the editor state may fail to remain in sync with the DOM.

例如，语法检查器可以在内容可修饰的元素中修改DOM，添加诸如下划线和背景之类的样式。由于React无法在浏览器与预期不匹配的情况下协调DOM，因此编辑器状态可能无法与DOM保持同步。

Certain old ad blockers are also known to break the native DOM Selection API — a bad idea no matter what! — and since Draft depends on this API to maintain controlled selection state, this can cause trouble for editor interaction.

某些老的广告拦截器也会破坏本地DOM选择API——不管怎样，这都不是一个好主意!——由于Draft依赖于此API来维护受控选择状态，这可能会给编辑器交互带来麻烦。

IME and Internet Explorer

As of IE11, Internet Explorer demonstrates notable issues with certain international input methods, most significantly Korean input.

从IE11开始，IE浏览器在某些国际输入法上出现了明显的问题，最明显的是韩文输入法。

Polyfills

Some of Draft’s code and that of its dependencies make use of ES2015 language features. Syntax features like class are compiled away via Babel when Draft is built, but it does not include polyfills for APIs now included in many modern browsers (for instance: String.prototype.startsWith). We expect your browser supports these APIs natively or with the assistance of a polyfill. One such polyfill is es6-shim, which we use in many examples but you are free to use babel-polyfill if that’s more your scene.

Draft的一些代码及其依赖项利用了ES2015语言特性。像class这样的语法特性在Draft构建时通过Babel编译掉了，但是它不包括现在许多现代浏览器中包含的api的填充(例如:String.prototype.startsWith)。我们希望您的浏览器能够支持这些api，或者在polyfill的帮助下支持这些api。其中一个这样的填充是es6-shim，我们在很多例子中使用，但你可以自由使用babel-polyfill，如果你的场景更多的话。

When using either polyfill/shim, you should include it as early as possible in your application’s entrypoint (at the very minimum, before you import Draft). For instance, using create-react-app and targeting IE11, src/index.js is probably a good spot to import your polyfill:

当使用polyfill/shim时，您应该尽早将其包含在应用程序的入口点中(至少在导入Draft之前)。例如，使用create- response-app并以IE11为目标，src/index.js可能是一个导入你的polyfill的好地方:

src/index.js

import 'babel-polyfill';
// or
import 'es6-shim';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));

Mobile Not Yet Supported

Draft.js is moving towards full mobile support, but does not officially support mobile browsers at this point. There are some known issues affecting Android and iOS - see issues tagged ‘android’ or ‘ios’ for the current status.

Draft.js正在向完全移动端支持转变，但目前还没有正式支持移动浏览器。有一些已知的影响Android和iOS的问题-请查看标记为“Android”或“iOS”的问题的当前状态。