For now, made LinkEditModal openable

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropup.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import {
   UncontrolledDropdown,
   DropdownToggle,
@@ -5,19 +7,37 @@ import {
   DropdownItem,
 } from 'reactstrap';
 
+import type { GlobalCodeMirrorEditorKey } from '../../../consts';
 import { AcceptedUploadFileType } from '../../../consts/accepted-upload-file-type';
+import type Linker from '../../../services/link-util/Linker';
+import { useCodeMirrorEditorIsolated } from '../../../stores';
+import { useLinkEditModal } from '../../../stores/use-link-edit-modal';
+
 
 import { AttachmentsButton } from './AttachmentsButton';
 
 
 type Props = {
+  editorKey: string | GlobalCodeMirrorEditorKey,
   onFileOpen: () => void,
   acceptedFileType: AcceptedUploadFileType,
 }
 
 export const AttachmentsDropup = (props: Props): JSX.Element => {
+  const { onFileOpen, acceptedFileType, editorKey } = props;
+
+  const { open: openLinkEditModal } = useLinkEditModal();
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
+
+  const onClickOpenLinkEditModal = useCallback(() => {
+    const onSubmit = (linkText: string) => {
+      return;
+    };
+    const defaultMarkdownLink = {} as Linker;
+
+    openLinkEditModal(defaultMarkdownLink, onSubmit);
+  }, [openLinkEditModal]);
 
-  const { onFileOpen, acceptedFileType } = props;
   return (
     <>
       <UncontrolledDropdown direction="up" className="lh-1">
@@ -31,7 +51,7 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
           </DropdownItem>
           <DropdownItem divider />
           <AttachmentsButton onFileOpen={onFileOpen} acceptedFileType={acceptedFileType} />
-          <DropdownItem className="d-flex gap-1 align-items-center">
+          <DropdownItem className="d-flex gap-1 align-items-center" onClick={onClickOpenLinkEditModal}>
             <span className="material-symbols-outlined fs-5">link</span>
             Link
           </DropdownItem>

packages/editor/src/components/CodeMirrorEditor/Toolbar/Toolbar.tsx

@@ -22,7 +22,7 @@ export const Toolbar = memo((props: Props): JSX.Element => {
   const { editorKey, onFileOpen, acceptedFileType } = props;
   return (
     <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
-      <AttachmentsDropup onFileOpen={onFileOpen} acceptedFileType={acceptedFileType} />
+      <AttachmentsDropup editorKey={editorKey} onFileOpen={onFileOpen} acceptedFileType={acceptedFileType} />
       <TextFormatTools editorKey={editorKey} />
       <EmojiButton
         editorKey={editorKey}