PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #1235 from matrix-org/luke/fix-rte-inline-code-format

Browse source 
Mimic ctrl+j of RT mode in MD mode
This commit is contained in:
Luke Barnard 2017-07-19 17:44:56 +01:00 committed by GitHub
commit 61d5d078dd
2 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/RichText.js
View file

@ -279,3 +279,14 @@ export function attachImmutableEntitiesToEmoji(editorState: EditorState): Editor
return editorState;
}
export function hasMultiLineSelection(editorState: EditorState): boolean {
const selectionState = editorState.getSelection();
const anchorKey = selectionState.getAnchorKey();
const currentContent = editorState.getCurrentContent();
const currentContentBlock = currentContent.getBlockForKey(anchorKey);
const start = selectionState.getStartOffset();
const end = selectionState.getEndOffset();
const selectedText = currentContentBlock.getText().slice(start, end);
return selectedText.includes('\n');
}

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

@ -528,7 +528,6 @@ export default class MessageComposerInput extends React.Component {
this.enableRichtext(!this.state.isRichtextEnabled);
return true;
}
let newState: ?EditorState = null;
// Draft handles rich text mode commands by default but we need to do it ourselves for Markdown.
@ -536,7 +535,6 @@ export default class MessageComposerInput extends React.Component {
// These are block types, not handled by RichUtils by default.
const blockCommands = ['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item'];
const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState);
if (blockCommands.includes(command)) {
newState = RichUtils.toggleBlockType(this.state.editorState, command);
} else if (command === 'strike') {
@ -550,14 +548,26 @@ export default class MessageComposerInput extends React.Component {
}
}
} else {
let contentState = this.state.editorState.getCurrentContent();
const contentState = this.state.editorState.getCurrentContent();
const multipleLinesSelected = RichText.hasMultiLineSelection(this.state.editorState);
const selectionState = this.state.editorState.getSelection();
const start = selectionState.getStartOffset();
const end = selectionState.getEndOffset();
// If multiple lines are selected or nothing is selected, insert a code block
// instead of applying inline code formatting. This is an attempt to mimic what
// happens in non-MD mode.
const treatInlineCodeAsBlock = multipleLinesSelected || start === end;
const textMdCodeBlock = (text) => `\`\`\`\n${text}\n\`\`\`\n`;
const modifyFn = {
'bold': (text) => `**${text}**`,
'italic': (text) => `*${text}*`,
'underline': (text) => `<u>${text}</u>`,
'strike': (text) => `<del>${text}</del>`,
'code-block': (text) => `\`\`\`\n${text}\n\`\`\`\n`,
// ("code" is triggered by ctrl+j by draft-js by default)
'code': (text) => treatInlineCodeAsBlock ? textMdCodeBlock(text) : `\`${text}\``,
'code-block': textMdCodeBlock,
'blockquote': (text) => text.split('\n').map((line) => `> ${line}\n`).join('') + '\n',
'unordered-list-item': (text) => text.split('\n').map((line) => `\n- ${line}`).join(''),
'ordered-list-item': (text) => text.split('\n').map((line, i) => `\n${i + 1}. ${line}`).join(''),
@ -568,6 +578,7 @@ export default class MessageComposerInput extends React.Component {
'italic': -1,
'underline': -4,
'strike': -6,
'code': treatInlineCodeAsBlock ? -5 : -1,
'code-block': -5,
'blockquote': -2,
}[command];