mirror of
https://github.com/element-hq/element-web
synced 2024-10-26 04:35:55 +03:00
Merge pull request #1269 from matrix-org/luke/upgrade-dep-draft-js-0.11.0
Upgrade draft-js to 0.11.0-alpha
This commit is contained in:
commit
ee5fc12cb0
3 changed files with 24 additions and 24 deletions
|
@ -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",
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue