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 或其他机制，批处理，或者相反，延迟数据存储的更新。在数据被更新后，对相关的 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.

为了在使用延迟或批处理机制时避免这一点，你应该将延迟行为从你的 Editor 状态传播中分离开。你必须让你的 Editorstate 传播到你的 Editor 组件时没有延迟，并独立执行批量更新而不影响你的 Editor 组件的状态。

Missing Draft.css

缺少 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 资源，通过打包到一个单独的文件 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 应该在编辑器渲染时包含在内，这些样式设置了默认的文字对齐方向，间距和其他重要的特性。如果没有它，你可能会遭遇 block 定位，对齐和鼠标行为的各种问题。

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

自定义 OSX 按键绑定

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.

由于浏览器不能访问系统级别的自定义快捷键，所以拦截没有被绑定到默认系统按键上的编辑行为意图是不可能的。

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.

例如，语法检查器，可能会修改 contentEditable 元素中的 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

输入法和 IE 浏览器

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

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

Mobile Support

移动支持

At this time Draft does not fully support mobile browsers. There are some known issues with certain Android keyboards and with international input methods. Full mobile support is a goal that the framework is moving towards for the future.

现在 Draft 还不能完全支持移动端浏览器。存在一些关于某些安卓设备的键盘和输入法的已知问题。完全的移动支持是框架未来的一个目标。

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）。我们期望你的浏览器原生的，或者依靠 polyfill 的帮助支持这些 API 。一个这种 polyfill 是 es6-shim ，我们在很多示例中使用过它，但是你也可以选择使用 babel-polyfill ，如果它更适合你的使用场景。

When using either polyfill/shim, you should include it as early as possibly 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-react-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' 的问题以获取现状。