diff --git a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx index c3117e4eb1..3caafdbab2 100644 --- a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx +++ b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx @@ -50,6 +50,7 @@ export class FormattingOptionsTreeSelect extends React.Component { label={gettext('Formatting options')} labelHidden inlineLabel + zIndex={1051} /> ); } diff --git a/scripts/core/editor3/components/Editor3.tsx b/scripts/core/editor3/components/Editor3.tsx index 94a61a7185..5fdf26c788 100644 --- a/scripts/core/editor3/components/Editor3.tsx +++ b/scripts/core/editor3/components/Editor3.tsx @@ -43,6 +43,7 @@ const mapStateToProps = (state) => ({ const mapDispatchToProps = (dispatch) => ({ onChange: (editorState: EditorState) => dispatch(actions.changeEditorState(editorState)), onTab: (e) => dispatch(actions.handleEditorTab(e)), + showPopup: (type, data) => dispatch(actions.showPopup(type, data)), dragDrop: (transfer, mediaType) => dispatch(actions.dragDrop(transfer, mediaType)), unlock: () => dispatch(actions.setLocked(false)), dispatch: (x) => dispatch(x), diff --git a/scripts/core/editor3/components/Editor3Component.tsx b/scripts/core/editor3/components/Editor3Component.tsx index 265eac455e..92ac479a67 100644 --- a/scripts/core/editor3/components/Editor3Component.tsx +++ b/scripts/core/editor3/components/Editor3Component.tsx @@ -26,7 +26,7 @@ import UnstyledBlock from './UnstyledBlock'; import UnstyledWrapper from './UnstyledWrapper'; import * as Suggestions from '../helpers/suggestions'; import {getCurrentAuthor} from '../helpers/author'; -import {setSpellcheckerProgress, applySpellcheck} from '../actions'; +import {setSpellcheckerProgress, applySpellcheck, PopupTypes} from '../actions'; import {noop} from 'lodash'; import {getSpellcheckWarningsByBlock} from './spellchecker/SpellcheckerDecorator'; import {getSpellchecker} from './spellchecker/default-spellcheckers'; @@ -142,6 +142,7 @@ interface IProps { onTab?(event): void; dragDrop?(): void; dispatch?(action: any): void; + showPopup?(type: any, data: any): void; } interface IState { @@ -278,7 +279,19 @@ export class Editor3Component extends React.Component { } keyBindingFn(e) { - const {key, shiftKey} = e; + const {key, shiftKey, ctrlKey} = e; + const selectionState = this.props.editorState.getSelection(); + + if ( + key === 'k' + && ctrlKey + && this.props.editorFormat.includes('link') + && selectionState.isCollapsed() !== true + ) { + this.props.showPopup(PopupTypes.Link, selectionState); + e.preventDefault(); + return ''; + } if (key === 'ArrowDown' || key === 'ArrowUp') { const autocompleteEl = document.querySelector(`.${editor3AutocompleteClassName}`) as HTMLElement | null; @@ -301,10 +314,7 @@ export class Editor3Component extends React.Component { // ctrl + X if (key === 'x' && KeyBindingUtil.hasCommandModifier(e)) { - const {editorState} = this.props; - const selection = editorState.getSelection(); - - if (!selection.isCollapsed()) { + if (!selectionState.isCollapsed()) { document.execCommand('copy'); // add selected text to clipboard return 'delete'; } diff --git a/scripts/core/editor3/components/toolbar/index.tsx b/scripts/core/editor3/components/toolbar/index.tsx index 9fd8cc65b7..45d6619dba 100644 --- a/scripts/core/editor3/components/toolbar/index.tsx +++ b/scripts/core/editor3/components/toolbar/index.tsx @@ -195,7 +195,7 @@ class ToolbarComponent extends React.Component { )} {has('embed') && (