[feat] link, autoLink

package.json

@@ -11,10 +11,12 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "^0.6.6",
+    "@tiptap/extension-link": "^2.0.0-beta.43",
     "@tiptap/extension-placeholder": "^2.0.0-beta.53",
     "@tiptap/react": "^2.0.0-beta.114",
     "@tiptap/starter-kit": "^2.0.0-beta.191",
     "@tiptap/suggestion": "^2.0.0-beta.97",
+    "classnames": "^2.3.1",
     "daisyui": "^2.19.0",
     "fuzzysort": "^2.0.1",
     "react": "^18.0.0",

src/components/Modal.tsx

@@ -0,0 +1,92 @@
+// import { onMounted, ref } from 'vue'
+// import { v4 as uuidv4 } from 'uuid'
+// import { onClickOutside } from '@vueuse/core'
+// import React, { useState } from 'react'
+
+// interface ModalProps {
+
+// }
+
+// const Modal: React.FC<ModalProps> = () => {
+//   const modalBoxRef = useRef<HTMLDivElement | null>(null)
+
+//   const [isModalOpen, setIsModalOpen] = useState(false)
+
+//   const open = () => setIsModalOpen(true)
+
+//   const close =
+// }
+
+// const modalBoxRef = ref<HTMLDivElement | null>(null)
+
+// const isModalOpen = ref(false)
+
+// const open = () => isModalOpen.value = true
+
+// const close = () => isModalOpen.value = false
+
+// const toggle = () => isModalOpen.value = !isModalOpen.value
+
+// const uuid = uuidv4()
+
+// // ! TODO: handle close on Escape click
+// // const onKeyPress = ({ code }: KeyboardEvent) => code === 'Escape' && close()
+
+// onMounted(() => {
+//   setTimeout(() => {
+//     if (!modalBoxRef.value) return
+
+//     onClickOutside(modalBoxRef, close)
+
+//     // window.addEventListener('keypress', onKeyPress)
+//   }, 100)
+
+// })
+
+// // onUnmounted(() => {
+// //   window.removeEventListener('keypress', onKeyPress)
+// // })
+// </script>
+
+// <template>
+//   <!-- The button to open modal -->
+//   <slot
+//     name="trigger"
+//     :open-modal="open"
+//     :close-modal="close"
+//     :toggle-modal="toggle"
+//   />
+
+//   <!-- Put this part before </body> tag -->
+//   <Teleport to="body">
+//     <input
+//       :id="uuid"
+//       type="checkbox"
+//       class="modal-toggle"
+//       :checked="isModalOpen"
+//     >
+
+//     <div class="modal">
+//       <div
+//         ref="modalBoxRef"
+//         class="modal-box relative flex flex-col gap-4"
+//       >
+//         <span
+//           class="btn btn-sm btn-circle absolute right-2 top-2"
+//           @click.stop.prevent="close"
+//         >
+//           <i class="i-mdi-close" />
+//         </span>
+
+//         <h3 class="text-lg font-bold">
+//           <slot name="title" />
+//         </h3>
+
+//         <slot name="default" />
+//       </div>
+//     </div>
+//   </Teleport>
+// </template>
+
+// <style scoped>
+// </style>

src/tiptap/Tiptap.tsx

@@ -1,12 +1,13 @@
-import { useEditor, EditorContent } from "@tiptap/react";
+/* eslint-disable */
 import { Editor } from "@tiptap/core";
-import { useCallback, useEffect } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { useCallback, useState } from "react";
 import "tippy.js/animations/shift-toward-subtle.css";
 // import applyDevTools from "prosemirror-dev-tools";
 
-import { extensions } from "./extensions";
+import { getExtensions } from "./extensions";
+import { CustomBubbleMenu, LinkBubbleMenu } from "./menus";
 import { content } from "./mocks";
-import { CustomBubbleMenu } from "./menus";
 
 import "./styles/tiptap.scss";
 
@@ -16,19 +17,11 @@ export const Tiptap = () => {
     []
   );
 
-  const editor = useEditor({
-    extensions,
-    content,
-    editorProps: {
-      attributes: {
-        class: "prose focus:outline-none w-full",
-        spellcheck: "false",
-      },
-    },
-    onUpdate({ editor: e }) {
-      logContent(e);
-    },
-  });
+  const [isAddingNewLink, setIsAddingNewLink] = useState(false);
+
+  const openLinkModal = () => setIsAddingNewLink(true);
+
+  const closeLinkModal = () => setIsAddingNewLink(false);
 
   const addImage = () =>
     editor?.commands.setMedia({
@@ -53,6 +46,20 @@ export const Tiptap = () => {
       height: "400",
     });
 
+  const editor = useEditor({
+    extensions: getExtensions({ openLinkModal }),
+    content,
+    editorProps: {
+      attributes: {
+        class: "prose focus:outline-none w-full",
+        spellcheck: "false",
+      },
+    },
+    onUpdate({ editor: e }) {
+      logContent(e);
+    },
+  });
+
   return (
     editor && (
       <section className="flex flex-col gap-2">
@@ -72,8 +79,12 @@ export const Tiptap = () => {
             Add Video
           </button>
         </span>
+
         <EditorContent className="w-full" editor={editor} />
+
         <CustomBubbleMenu editor={editor} />
+
+        <LinkBubbleMenu editor={editor} />
       </section>
     )
   );

src/tiptap/extensions/bubble-menu/BubbleMenu.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable consistent-return */
+import React, { useEffect, useState } from "react";
+
+import { BubbleMenuPlugin, BubbleMenuPluginProps } from "./bubble-menu-plugin";
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export type BubbleMenuProps = Omit<
+  Optional<BubbleMenuPluginProps, "pluginKey">,
+  "element"
+> & {
+  className?: string;
+  children: React.ReactNode;
+};
+
+export const BubbleMenu: React.FC<BubbleMenuProps> = ({
+  editor,
+  pluginKey = "bubbleMenu",
+  tippyOptions = {},
+  shouldShow = null,
+  className,
+  children,
+}) => {
+  const [element, setElement] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+
+    if (editor.isDestroyed) {
+      return;
+    }
+
+    const plugin = BubbleMenuPlugin({
+      pluginKey,
+      editor,
+      element,
+      tippyOptions,
+      shouldShow,
+    });
+
+    editor.registerPlugin(plugin);
+
+    return () => {
+      editor.unregisterPlugin(pluginKey);
+    };
+  }, [editor, element, pluginKey, shouldShow, tippyOptions]);
+
+  return (
+    <div
+      ref={setElement}
+      className={className}
+      style={{ visibility: "hidden" }}
+    >
+      {children}
+    </div>
+  );
+};
+
+BubbleMenu.defaultProps = {
+  className: "",
+};