mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-26 04:35:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1269 from matrix-org/luke/upgrade-dep-draft-js-0.11.0

Browse source 
Upgrade draft-js to 0.11.0-alpha
This commit is contained in:
David Baker 2017-08-03 15:55:52 +01:00 committed by GitHub
commit ee5fc12cb0
3 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -53,7 +53,7 @@
"classnames": "^2.1.2", "classnames": "^2.1.2",
"commonmark": "^0.27.0", "commonmark": "^0.27.0",
"counterpart": "^0.18.0", "counterpart": "^0.18.0",
"draft-js": "^0.10.1", "draft-js": "^0.11.0-alpha",
"draft-js-export-html": "^0.5.0", "draft-js-export-html": "^0.5.0",
"draft-js-export-markdown": "^0.2.0", "draft-js-export-markdown": "^0.2.0",
"emojione": "2.2.7", "emojione": "2.2.7",

16
src/RichText.js
View file

@ -51,7 +51,8 @@ export const contentStateToHTML = (contentState: ContentState) => {
}; };
export function htmlToContentState(html: string): ContentState { export function htmlToContentState(html: string): ContentState {
return ContentState.createFromBlockArray(convertFromHTML(html)); const blockArray = convertFromHTML(html).contentBlocks;
return ContentState.createFromBlockArray(blockArray);
} }
function unicodeToEmojiUri(str) { function unicodeToEmojiUri(str) {
@ -90,7 +91,7 @@ function findWithRegex(regex, contentBlock: ContentBlock, callback: (start: numb
// Workaround for https://github.com/facebook/draft-js/issues/414 // Workaround for https://github.com/facebook/draft-js/issues/414
let emojiDecorator = { let emojiDecorator = {
strategy: (contentBlock, callback) => { strategy: (contentState, contentBlock, callback) => {
findWithRegex(EMOJI_REGEX, contentBlock, callback); findWithRegex(EMOJI_REGEX, contentBlock, callback);
}, },
component: (props) => { component: (props) => {
@ -119,7 +120,7 @@ export function getScopedRTDecorators(scope: any): CompositeDecorator {
export function getScopedMDDecorators(scope: any): CompositeDecorator { export function getScopedMDDecorators(scope: any): CompositeDecorator {
let markdownDecorators = ['HR', 'BOLD', 'ITALIC', 'CODE', 'STRIKETHROUGH'].map( let markdownDecorators = ['HR', 'BOLD', 'ITALIC', 'CODE', 'STRIKETHROUGH'].map(
(style) => ({ (style) => ({
strategy: (contentBlock, callback) => { strategy: (contentState, contentBlock, callback) => {
return findWithRegex(MARKDOWN_REGEX[style], contentBlock, callback); return findWithRegex(MARKDOWN_REGEX[style], contentBlock, callback);
}, },
component: (props) => ( component: (props) => (
@ -130,7 +131,7 @@ export function getScopedMDDecorators(scope: any): CompositeDecorator {
})); }));
markdownDecorators.push({ markdownDecorators.push({
strategy: (contentBlock, callback) => { strategy: (contentState, contentBlock, callback) => {
return findWithRegex(MARKDOWN_REGEX.LINK, contentBlock, callback); return findWithRegex(MARKDOWN_REGEX.LINK, contentBlock, callback);
}, },
component: (props) => ( component: (props) => (
@ -238,7 +239,7 @@ export function attachImmutableEntitiesToEmoji(editorState: EditorState): Editor
const existingEntityKey = block.getEntityAt(start); const existingEntityKey = block.getEntityAt(start);
if (existingEntityKey) { if (existingEntityKey) {
// avoid manipulation in case the emoji already has an entity // avoid manipulation in case the emoji already has an entity
const entity = Entity.get(existingEntityKey); const entity = newContentState.getEntity(existingEntityKey);
if (entity && entity.get('type') === 'emoji') { if (entity && entity.get('type') === 'emoji') {
return; return;
} }
@ -248,7 +249,10 @@ export function attachImmutableEntitiesToEmoji(editorState: EditorState): Editor
.set('anchorOffset', start) .set('anchorOffset', start)
.set('focusOffset', end); .set('focusOffset', end);
const emojiText = plainText.substring(start, end); const emojiText = plainText.substring(start, end);
const entityKey = Entity.create('emoji', 'IMMUTABLE', { emojiUnicode: emojiText }); newContentState = newContentState.createEntity(
'emoji', 'IMMUTABLE', { emojiUnicode: emojiText }
);
const entityKey = newContentState.getLastCreatedEntityKey();
newContentState = Modifier.replaceText( newContentState = Modifier.replaceText(
newContentState, newContentState,
selection, selection,

30
src/components/views/rooms/MessageComposerInput.js
View file

@ -165,17 +165,18 @@ export default class MessageComposerInput extends React.Component {
this.client = MatrixClientPeg.get(); this.client = MatrixClientPeg.get();
} }
findLinkEntities(contentBlock, callback) { findLinkEntities(contentState: ContentState, contentBlock: ContentBlock, callback) {
contentBlock.findEntityRanges( contentBlock.findEntityRanges(
(character) => { (character) => {
const entityKey = character.getEntity(); const entityKey = character.getEntity();
return ( return (
entityKey !== null && entityKey !== null &&
Entity.get(entityKey).getType() === 'LINK' contentState.getEntity(entityKey).getType() === 'LINK'
); );
}, callback, }, callback,
); );
} }
/* /*
* "Does the right thing" to create an EditorState, based on: * "Does the right thing" to create an EditorState, based on:
* - whether we've got rich text mode enabled * - whether we've got rich text mode enabled
@ -188,7 +189,7 @@ export default class MessageComposerInput extends React.Component {
strategy: this.findLinkEntities.bind(this), strategy: this.findLinkEntities.bind(this),
component: (entityProps) => { component: (entityProps) => {
const Pill = sdk.getComponent('elements.Pill'); const Pill = sdk.getComponent('elements.Pill');
const {url} = Entity.get(entityProps.entityKey).getData(); const {url} = entityProps.contentState.getEntity(entityProps.entityKey).getData();
if (Pill.isPillUrl(url)) { if (Pill.isPillUrl(url)) {
return <Pill url={url} room={this.props.room} offsetKey={entityProps.offsetKey}/>; return <Pill url={url} room={this.props.room} offsetKey={entityProps.offsetKey}/>;
} }
@ -713,7 +714,7 @@ export default class MessageComposerInput extends React.Component {
const hasLink = blocks.some((block) => { const hasLink = blocks.some((block) => {
return block.getCharacterList().filter((c) => { return block.getCharacterList().filter((c) => {
const entityKey = c.getEntity(); const entityKey = c.getEntity();
return entityKey && Entity.get(entityKey).getType() === 'LINK'; return entityKey && contentState.getEntity(entityKey).getType() === 'LINK';
}).size > 0; }).size > 0;
}); });
shouldSendHTML = hasLink; shouldSendHTML = hasLink;
@ -734,8 +735,8 @@ export default class MessageComposerInput extends React.Component {
const pt = contentState.getBlocksAsArray().map((block) => { const pt = contentState.getBlocksAsArray().map((block) => {
let blockText = block.getText(); let blockText = block.getText();
let offset = 0; let offset = 0;
this.findLinkEntities(block, (start, end) => { this.findLinkEntities(contentState, block, (start, end) => {
const entity = Entity.get(block.getEntityAt(start)); const entity = contentState.getEntity(block.getEntityAt(start));
if (entity.getType() !== 'LINK') { if (entity.getType() !== 'LINK') {
return; return;
} }
@ -936,32 +937,27 @@ export default class MessageComposerInput extends React.Component {
} }
const {range = null, completion = '', href = null, suffix = ''} = displayedCompletion; const {range = null, completion = '', href = null, suffix = ''} = displayedCompletion;
let contentState = activeEditorState.getCurrentContent();
let entityKey; let entityKey;
let mdCompletion;
if (href) { if (href) {
entityKey = Entity.create('LINK', 'IMMUTABLE', { contentState = contentState.createEntity('LINK', 'IMMUTABLE', {
url: href, url: href,
isCompletion: true, isCompletion: true,
}); });
entityKey = contentState.getLastCreatedEntityKey();
} }
let selection; let selection;
if (range) { if (range) {
selection = RichText.textOffsetsToSelectionState( selection = RichText.textOffsetsToSelectionState(
range, activeEditorState.getCurrentContent().getBlocksAsArray(), range, contentState.getBlocksAsArray(),
); );
} else { } else {
selection = activeEditorState.getSelection(); selection = activeEditorState.getSelection();
} }
let contentState = Modifier.replaceText( contentState = Modifier.replaceText(contentState, selection, completion, null, entityKey);
activeEditorState.getCurrentContent(),
selection,
mdCompletion || completion,
null,
entityKey,
);
// Move the selection to the end of the block // Move the selection to the end of the block
const afterSelection = contentState.getSelectionAfter(); const afterSelection = contentState.getSelectionAfter();
@ -1047,7 +1043,7 @@ export default class MessageComposerInput extends React.Component {
offset -= sum; offset -= sum;
const entityKey = block.getEntityAt(offset); const entityKey = block.getEntityAt(offset);
const entity = entityKey ? Entity.get(entityKey) : null; const entity = entityKey ? contentState.getEntity(entityKey) : null;
if (entity && entity.getData().isCompletion) { if (entity && entity.getData().isCompletion) {
// This is a completed mention, so do not insert MD link, just text // This is a completed mention, so do not insert MD link, just text
return text; return text;