Add: linkmodal by shortcut key mod+k

src/editors/simple-slate-editor/index.js

@@ -8,6 +8,7 @@ import EventProxy from '../../utils/event-handler';
 import withPropsEditor from './with-props-editor';
 import { focusEditor } from '../../extension/core';
 import { isDocumentEmpty, isMac } from '../../utils/common';
+import InsertElementDialog from '../../extension/commons/insert-element-dialog';
 
 import './style.css';
 
@@ -122,6 +123,7 @@ const SimpleSlateEditor = ({ value, editorApi, onSave, columns, onContentChanged
           </div>
         </Slate>
       </div>
+      <InsertElementDialog editor={editor} />
     </div >
   );
 };

src/extension/commons/insert-element-dialog/index.js

@@ -0,0 +1,49 @@
+import React, {useState, useCallback, useEffect } from 'react'
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENTS } from '../../../constants/event-types';
+import { ELementTypes } from '../../constants';
+import LinkModal from '../../plugins/link/menu/link-modal';
+import { Editor } from 'slate';
+
+const InsertElementDialog = ({ editor }) => {
+    const [dialogType, setDialogType] = useState('');
+    const [isOpenLinkModal, setIsOpenLinkModal] = useState(false);
+    const [linkInfo, setLinkInfo] = useState({ linkTitle: '', linkUrl: '' });
+
+    useEffect(() => {
+        const eventBus = EventBus.getInstance();
+        const toggleDialogSubscribe = eventBus.subscribe(INTERNAL_EVENTS.INSERT_ELEMENT, toggleDialog);
+        return () => {
+          toggleDialogSubscribe();
+        };
+      }, []);
+
+    const toggleDialog = useCallback(({ type }) => {
+        setDialogType(type);
+        setIsOpenLinkModal(true);
+        if (editor.selection) {
+            const selectedText = Editor.string(editor, editor.selection);
+            setLinkInfo({ ...linkInfo, linkTitle: selectedText });
+          }
+    }, [editor, setIsOpenLinkModal, setLinkInfo, setDialogType]);
+
+    const onCloseModal = useCallback(() => {
+        setIsOpenLinkModal(false);
+        setLinkInfo({ linkTitle: '', linkUrl: '' });
+      }, []);
+
+    if(ELementTypes.LINK === dialogType){
+        return (isOpenLinkModal && (
+            <LinkModal
+              onCloseModal={onCloseModal}
+              editor={editor}
+              linkTitle={linkInfo.linkTitle}
+              linkUrl={linkInfo.linkUrl}
+            />
+          ))
+    }else{
+        return null;
+    }
+};
+
+export default InsertElementDialog;

src/extension/plugins/link/plugin.js

@@ -1,14 +1,19 @@
-import { Editor, Node, Transforms, Range, Path } from 'slate';
+import { Editor, Node, Transforms, Range, Path, Text } from 'slate';
 import slugid from 'slugid';
 import { getNodeType, getSelectedNodeByType } from '../../core/queries';
 import { generateLinkNode, getLinkInfo, isLinkType } from './helper';
 import { LINK } from '../../constants/element-types';
+import { ELementTypes } from '../../constants';
+import { INTERNAL_EVENTS } from '../../../constants/event-types';
 import { isImage, isUrl } from '../../../utils/common';
 import { focusEditor } from '../../core/transforms/focus-editor';
 import { insertImage } from '../image/helper';
+import isHotkey from 'is-hotkey';
+import EventBus from '../../../utils/event-bus';
+import { getSelectedElems } from '../../core/queries';
 
 const withLink = (editor) => {
-  const { isInline, insertBreak, deleteBackward, insertText, normalizeNode, insertData } = editor;
+  const { isInline, insertBreak, deleteBackward, insertText, normalizeNode, insertData, onHotKeyDown } = editor;
   const newEditor = editor;
 
   // Rewrite isInline
@@ -83,6 +88,27 @@ const withLink = (editor) => {
     return deleteBackward(unit);
   };
 
+  // Add 'mod+k' shortcut Key
+  newEditor.onHotKeyDown = (e) => {
+    if (isHotkey('mod+k', e)) {
+      e.preventDefault();
+      const { selection } = newEditor;
+      const isCollapsed = Range.isCollapsed(selection);
+      const eventBus = EventBus.getInstance();
+      if (isCollapsed){
+        eventBus.dispatch(INTERNAL_EVENTS.INSERT_ELEMENT, { type: ELementTypes.LINK, editor });
+      } else {
+        const [firstSelectedNode, ...restNodes] = getSelectedElems(newEditor);
+        if (!firstSelectedNode || restNodes.length) return; // If select more than one node or not select any node, return
+        const isSelectTextNodes = firstSelectedNode.children.some(node => Text.isText(node));
+        if (!isSelectTextNodes) return;
+        const linkTitle = window.getSelection().toString();
+        eventBus.dispatch(INTERNAL_EVENTS.INSERT_ELEMENT, { type: ELementTypes.LINK, editor: newEditor, linkTitle: linkTitle });
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(e);
+  };
+
   // Rewrite normalizeNode
   newEditor.normalizeNode = ([node, path]) => {
     const type = getNodeType(node);