Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Add text directionality override prop to DraftEditor #1034

Merged
merged 3 commits into from
Mar 30, 2017
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/component/base/DraftEditor.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
</div>
</div>
Expand Down Expand Up @@ -355,8 +356,8 @@ class DraftEditor extends React.Component {
this.update(
EditorState.forceSelection(
editorState,
editorState.getSelection()
)
editorState.getSelection(),
),
);
}
}
Expand Down
5 changes: 5 additions & 0 deletions src/component/base/DraftEditorProps.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fbjs already has UnicodeBidiDirection. I just gave it a quick test in your branch and it seems to work. You should be good to go without DraftTextDirectionality.

import type {BidiDirection} from 'UnicodeBidiDirection';

import type {DraftInlineStyle} from 'DraftInlineStyle';
import type {DraftHandleValue} from 'DraftHandleValue';
import type EditorState from 'EditorState';
Expand All @@ -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.
Expand Down
16 changes: 16 additions & 0 deletions src/component/base/DraftTextDirectionality.js
Original file line number Diff line number Diff line change
@@ -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';
12 changes: 8 additions & 4 deletions src/component/contents/DraftEditorContents.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ type Props = {
blockRendererFn: Function,
blockStyleFn: (block: ContentBlock) => string,
editorState: EditorState,
textDirectionality?: BidiDirection,
};

/**
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -161,7 +165,7 @@ class DraftEditorContents extends React.Component {
);
className = joinClasses(
className,
getListItemClasses(blockType, depth, shouldResetCount, direction)
getListItemClasses(blockType, depth, shouldResetCount, direction),
);
}

Expand Down Expand Up @@ -221,7 +225,7 @@ class DraftEditorContents extends React.Component {
key: info.key + '-wrap',
'data-offset-key': info.offsetKey,
},
blocks
blocks,
);
outputBlocks.push(wrapperElement);
} else {
Expand All @@ -244,7 +248,7 @@ function getListItemClasses(
type: string,
depth: number,
shouldResetCount: boolean,
direction: BidiDirection
direction: BidiDirection,
): string {
return cx({
'public/DraftStyleDefault/unorderedListItem':
Expand Down