From b26d6dabb4bbabd395b28c0b5fef3e12ce3bbe3d Mon Sep 17 00:00:00 2001 From: thecalcc Date: Wed, 13 Sep 2023 14:19:47 +0300 Subject: [PATCH 1/3] Formatting options z-index fix --- .../workspace/content/views/FormattingOptionsMultiSelect.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx index c3117e4eb1..3f0a41f4bf 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={2000} /> ); } From 5376ba81c8299dabe5fa75cf77290a4c8d2c665d Mon Sep 17 00:00:00 2001 From: thecalcc Date: Wed, 13 Sep 2023 14:21:25 +0300 Subject: [PATCH 2/3] Link formatting option shotcut --- scripts/core/editor3/components/Editor3.tsx | 1 + scripts/core/editor3/components/Editor3Component.tsx | 11 +++++++++-- scripts/core/editor3/components/toolbar/index.tsx | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) 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..b486d7389e 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,13 @@ export class Editor3Component extends React.Component { } keyBindingFn(e) { - const {key, shiftKey} = e; + const {key, shiftKey, ctrlKey} = e; + + if (key == 'k' && ctrlKey && this.props.editorFormat.includes('link')) { + this.props.showPopup(PopupTypes.Link, this.props.editorState.getSelection()); + e.preventDefault(); + return ''; + } if (key === 'ArrowDown' || key === 'ArrowUp') { const autocompleteEl = document.querySelector(`.${editor3AutocompleteClassName}`) as HTMLElement | null; 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') && ( From e00cc15c15b4946a8454e15a30f812f88229b18f Mon Sep 17 00:00:00 2001 From: thecalcc Date: Wed, 13 Sep 2023 15:05:17 +0300 Subject: [PATCH 3/3] Changes after review --- .../views/FormattingOptionsMultiSelect.tsx | 2 +- .../core/editor3/components/Editor3Component.tsx | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx index 3f0a41f4bf..3caafdbab2 100644 --- a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx +++ b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx @@ -50,7 +50,7 @@ export class FormattingOptionsTreeSelect extends React.Component { label={gettext('Formatting options')} labelHidden inlineLabel - zIndex={2000} + zIndex={1051} /> ); } diff --git a/scripts/core/editor3/components/Editor3Component.tsx b/scripts/core/editor3/components/Editor3Component.tsx index b486d7389e..92ac479a67 100644 --- a/scripts/core/editor3/components/Editor3Component.tsx +++ b/scripts/core/editor3/components/Editor3Component.tsx @@ -280,9 +280,15 @@ export class Editor3Component extends React.Component { keyBindingFn(e) { const {key, shiftKey, ctrlKey} = e; + const selectionState = this.props.editorState.getSelection(); - if (key == 'k' && ctrlKey && this.props.editorFormat.includes('link')) { - this.props.showPopup(PopupTypes.Link, 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 ''; } @@ -308,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'; }