render(): React.Node {
const {
block,
children,
contentState,
decorator,
decoratorKey,
direction,
leafSet,
text,
} = this.props;
const blockKey = block.getKey();
const leavesForLeafSet = leafSet.get('leaves');
const DecoratorComponent = decorator.getComponentForKey(decoratorKey);
const decoratorProps = decorator.getPropsForKey(decoratorKey);
const decoratorOffsetKey = DraftOffsetKey.encode(
blockKey,
parseInt(decoratorKey, 10),
0,
);
const decoratedText = text.slice(
leavesForLeafSet.first().get('start'),
leavesForLeafSet.last().get('end'),
);
// Resetting dir to the same value on a child node makes Chrome/Firefox
// confused on cursor movement. See http://jsfiddle.net/d157kLck/3/
const dir = UnicodeBidiDirection.getHTMLDirIfDifferent(
UnicodeBidi.getDirection(decoratedText),
direction,
);
return (
<DecoratorComponent
{...decoratorProps}
contentState={contentState}
decoratedText={decoratedText}
dir={dir}
key={decoratorOffsetKey}
entityKey={block.getEntityAt(leafSet.get('start'))}
offsetKey={decoratorOffsetKey}>
{children}
</DecoratorComponent>
);
}
it('should accept LTR/RTL', function() {
expect(Dir.getHTMLDirIfDifferent(Dir.RTL, Dir.RTL)).toBe(null);
expect(Dir.getHTMLDirIfDifferent(Dir.RTL, Dir.LTR)).toBe('rtl');
expect(Dir.getHTMLDirIfDifferent(Dir.LTR, Dir.RTL)).toBe('ltr');
expect(Dir.getHTMLDirIfDifferent(Dir.LTR, Dir.LTR)).toBe(null);
});
return this.props.tree.map((leafSet, ii) => {
var leavesForLeafSet = leafSet.get('leaves');
var lastLeaf = leavesForLeafSet.size - 1;
var leaves = leavesForLeafSet.map((leaf, jj) => {
var offsetKey = DraftOffsetKey.encode(blockKey, ii, jj);
var start = leaf.get('start');
var end = leaf.get('end');
return (
<DraftEditorLeaf
key={offsetKey}
offsetKey={offsetKey}
block={block}
start={start}
selection={hasSelection ? this.props.selection : undefined}
forceSelection={this.props.forceSelection}
text={text.slice(start, end)}
styleSet={block.getInlineStyleAt(start)}
customStyleMap={this.props.customStyleMap}
customStyleFn={this.props.customStyleFn}
isLast={ii === lastLeafSet && jj === lastLeaf}
/>
);
}).toArray();
var decoratorKey = leafSet.get('decoratorKey');
if (decoratorKey == null) {
return leaves;
}
if (!this.props.decorator) {
return leaves;
}
var decorator = nullthrows(this.props.decorator);
var DecoratorComponent = decorator.getComponentForKey(decoratorKey);
if (!DecoratorComponent) {
return leaves;
}
var decoratorProps = decorator.getPropsForKey(decoratorKey);
var decoratorOffsetKey = DraftOffsetKey.encode(blockKey, ii, 0);
var decoratedText = text.slice(
leavesForLeafSet.first().get('start'),
leavesForLeafSet.last().get('end'),
);
// Resetting dir to the same value on a child node makes Chrome/Firefox
// confused on cursor movement. See http://jsfiddle.net/d157kLck/3/
var dir = UnicodeBidiDirection.getHTMLDirIfDifferent(
UnicodeBidi.getDirection(decoratedText),
this.props.direction,
);
return (
<DecoratorComponent
{...decoratorProps}
contentState={this.props.contentState}
decoratedText={decoratedText}
dir={dir}
key={decoratorOffsetKey}
entityKey={block.getEntityAt(leafSet.get('start'))}
offsetKey={decoratorOffsetKey}>
{leaves}
</DecoratorComponent>
);
}).toArray();