Link shortcut and formatting options zindex fix (#4326)

superdesk · Sep 14, 2023 · a679c67 · a679c67
1 parent 6392995
commit a679c67
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git 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<IProps> {
                 label={gettext('Formatting options')}
                 labelHidden
                 inlineLabel
+                zIndex={1051}
             />
         );
     }

diff --git 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
@@ -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<IProps, IState> {
     }
 
     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<IProps, IState> {
 
         // 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
@@ -195,7 +195,7 @@ class ToolbarComponent extends React.Component<IProps, IState> {
                         <SelectionButton
                             onClick={showPopup(PopupTypes.Link)}
                             iconName="link"
-                            tooltip={gettext('Link')}
+                            tooltip={gettext('Link (Ctrl+K)')}
                         />
                     )}
                     {has('embed') && (