From 1557524091bb5f73155eb9ec0b36a53437fc4ac0 Mon Sep 17 00:00:00 2001 From: Flarnie Marchan Date: Sun, 26 Feb 2017 17:54:56 -0800 Subject: [PATCH 1/3] Add text directionality override prop to DraftEditor Credit for this change goes to @mmmoussa - Added an optional textDirectionality prop of type DraftTextDirectionality to the DraftEditor component which allows overriding the directionality of all blocks in the editor. - Fixed lint errors in the modified Draft.js files. Note that we will be updating the DraftTextDirectionality type definition to move it to the `fbjs` shared utils, possibly along with related text directionality utilities. --- docs/APIReference-Editor.md | 13 +++++++++++++ src/component/base/DraftEditor.react.js | 5 +++-- src/component/base/DraftEditorProps.js | 5 +++++ src/component/base/DraftTextDirectionality.js | 16 ++++++++++++++++ .../contents/DraftEditorContents.react.js | 12 ++++++++---- 5 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 src/component/base/DraftTextDirectionality.js diff --git a/docs/APIReference-Editor.md b/docs/APIReference-Editor.md index 459af43caf..f22ea6ad48 100644 --- a/docs/APIReference-Editor.md +++ b/docs/APIReference-Editor.md @@ -57,6 +57,19 @@ to fit it within your UI design. If this value is not set, text alignment will be based on the characters within the editor, on a per-block basis. +#### textDirectionality +``` +textDirectionality?: DraftTextDirectionality +``` +Optionally set the overriding text directionality for this editor. The values +include 'RTL' for right-to-left text, like Hebrew or Arabic, and 'LTR' for +left-to-right text, like English or Spanish. This directionality will apply to +the entire contents, regardless of default text direction for input text. + +If this value is not set, text directionality will be based on the characters +within the editor, on a per-block basis. + + #### blockRendererFn ``` blockRendererFn?: (block: ContentBlock) => ?Object diff --git a/src/component/base/DraftEditor.react.js b/src/component/base/DraftEditor.react.js index 33b84db7aa..a2732d706f 100644 --- a/src/component/base/DraftEditor.react.js +++ b/src/component/base/DraftEditor.react.js @@ -283,6 +283,7 @@ class DraftEditor extends React.Component { editorKey={this._editorKey} editorState={this.props.editorState} key={'contents' + this.state.contentsKey} + textDirectionality={this.props.textDirectionality} /> @@ -355,8 +356,8 @@ class DraftEditor extends React.Component { this.update( EditorState.forceSelection( editorState, - editorState.getSelection() - ) + editorState.getSelection(), + ), ); } } diff --git a/src/component/base/DraftEditorProps.js b/src/component/base/DraftEditorProps.js index 0ccded7219..1fe571cd4c 100644 --- a/src/component/base/DraftEditorProps.js +++ b/src/component/base/DraftEditorProps.js @@ -17,6 +17,7 @@ import type {DraftBlockRenderMap} from 'DraftBlockRenderMap'; import type {DraftDragType} from 'DraftDragType'; import type {DraftEditorCommand} from 'DraftEditorCommand'; import type {DraftTextAlignment} from 'DraftTextAlignment'; +import type {DraftTextDirectionality} from 'DraftTextDirectionality'; import type {DraftInlineStyle} from 'DraftInlineStyle'; import type {DraftHandleValue} from 'DraftHandleValue'; import type EditorState from 'EditorState'; @@ -42,6 +43,10 @@ export type DraftEditorProps = { // regardless of input characters. textAlignment?: DraftTextAlignment, + // Specify whether text directionality should be forced in a direction + // regardless of input characters. + textDirectionality?: DraftTextDirectionality, + // For a given `ContentBlock` object, return an object that specifies // a custom block component and/or props. If no object is returned, // the default `TextEditorBlock` is used. diff --git a/src/component/base/DraftTextDirectionality.js b/src/component/base/DraftTextDirectionality.js new file mode 100644 index 0000000000..defb65b911 --- /dev/null +++ b/src/component/base/DraftTextDirectionality.js @@ -0,0 +1,16 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule DraftTextDirectionality + * @flow + */ + +'use strict'; + +// TODO: (t16333390) import this type from 'fbjs' +export type DraftTextDirectionality = 'LTR' | 'RTL' | 'NEUTRAL'; diff --git a/src/component/contents/DraftEditorContents.react.js b/src/component/contents/DraftEditorContents.react.js index 1066de85c6..6ead414019 100644 --- a/src/component/contents/DraftEditorContents.react.js +++ b/src/component/contents/DraftEditorContents.react.js @@ -29,6 +29,7 @@ type Props = { blockRendererFn: Function, blockStyleFn: (block: ContentBlock) => string, editorState: EditorState, + textDirectionality?: BidiDirection, }; /** @@ -123,7 +124,10 @@ class DraftEditorContents extends React.Component { customEditable = customRenderer.editable; } - const direction = directionMap.get(key); + const {textDirectionality} = this.props; + const direction = textDirectionality + ? textDirectionality + : directionMap.get(key); const offsetKey = DraftOffsetKey.encode(key, 0, 0); const componentProps = { contentState: content, @@ -161,7 +165,7 @@ class DraftEditorContents extends React.Component { ); className = joinClasses( className, - getListItemClasses(blockType, depth, shouldResetCount, direction) + getListItemClasses(blockType, depth, shouldResetCount, direction), ); } @@ -221,7 +225,7 @@ class DraftEditorContents extends React.Component { key: info.key + '-wrap', 'data-offset-key': info.offsetKey, }, - blocks + blocks, ); outputBlocks.push(wrapperElement); } else { @@ -244,7 +248,7 @@ function getListItemClasses( type: string, depth: number, shouldResetCount: boolean, - direction: BidiDirection + direction: BidiDirection, ): string { return cx({ 'public/DraftStyleDefault/unorderedListItem': From 9f35a7ba13cfe3dedb343a1ec930417d1dd2f6c7 Mon Sep 17 00:00:00 2001 From: Flarnie Marchan Date: Mon, 27 Feb 2017 07:16:12 -0800 Subject: [PATCH 2/3] Hold off on updating docs with textDirectionality Since we haven't released this new prop yet let's not add it to the documentation until we do. --- docs/APIReference-Editor.md | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/docs/APIReference-Editor.md b/docs/APIReference-Editor.md index f22ea6ad48..459af43caf 100644 --- a/docs/APIReference-Editor.md +++ b/docs/APIReference-Editor.md @@ -57,19 +57,6 @@ to fit it within your UI design. If this value is not set, text alignment will be based on the characters within the editor, on a per-block basis. -#### textDirectionality -``` -textDirectionality?: DraftTextDirectionality -``` -Optionally set the overriding text directionality for this editor. The values -include 'RTL' for right-to-left text, like Hebrew or Arabic, and 'LTR' for -left-to-right text, like English or Spanish. This directionality will apply to -the entire contents, regardless of default text direction for input text. - -If this value is not set, text directionality will be based on the characters -within the editor, on a per-block basis. - - #### blockRendererFn ``` blockRendererFn?: (block: ContentBlock) => ?Object From 36e473f19a32a0240ba2d396dc0b98fb04bcdac8 Mon Sep 17 00:00:00 2001 From: Flarnie Marchan Date: Fri, 24 Mar 2017 16:42:00 -0700 Subject: [PATCH 3/3] Use BidiDirection instead of own directionality type Thanks to @zpao for pointing out that fbjs has BidiDirction. --- src/component/base/DraftEditorProps.js | 4 ++-- src/component/base/DraftTextDirectionality.js | 16 ---------------- 2 files changed, 2 insertions(+), 18 deletions(-) delete mode 100644 src/component/base/DraftTextDirectionality.js diff --git a/src/component/base/DraftEditorProps.js b/src/component/base/DraftEditorProps.js index 1fe571cd4c..d0f327cfbc 100644 --- a/src/component/base/DraftEditorProps.js +++ b/src/component/base/DraftEditorProps.js @@ -12,12 +12,12 @@ 'use strict'; +import type {BidiDirection} from 'UnicodeBidiDirection'; import type ContentBlock from 'ContentBlock'; import type {DraftBlockRenderMap} from 'DraftBlockRenderMap'; import type {DraftDragType} from 'DraftDragType'; import type {DraftEditorCommand} from 'DraftEditorCommand'; import type {DraftTextAlignment} from 'DraftTextAlignment'; -import type {DraftTextDirectionality} from 'DraftTextDirectionality'; import type {DraftInlineStyle} from 'DraftInlineStyle'; import type {DraftHandleValue} from 'DraftHandleValue'; import type EditorState from 'EditorState'; @@ -45,7 +45,7 @@ export type DraftEditorProps = { // Specify whether text directionality should be forced in a direction // regardless of input characters. - textDirectionality?: DraftTextDirectionality, + textDirectionality?: BidiDirection, // For a given `ContentBlock` object, return an object that specifies // a custom block component and/or props. If no object is returned, diff --git a/src/component/base/DraftTextDirectionality.js b/src/component/base/DraftTextDirectionality.js deleted file mode 100644 index defb65b911..0000000000 --- a/src/component/base/DraftTextDirectionality.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - * @providesModule DraftTextDirectionality - * @flow - */ - -'use strict'; - -// TODO: (t16333390) import this type from 'fbjs' -export type DraftTextDirectionality = 'LTR' | 'RTL' | 'NEUTRAL';