fix(texteditor): replace bubblemenu extensions to solve dependency conflict

Author: habibayman

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue

@@ -6,18 +6,19 @@
       @insert-link="linkHandler.openLinkEditor()"
     />
 
-    <!-- This div holds the bubble menu component and is passed to the editor -->
-    <div ref="bubbleMenu">
+    <div
+      v-if="linkHandler.isBubbleMenuOpen.value"
+      :style="linkHandler.popoverStyle.value"
+    >
       <LinkBubbleMenu
         v-if="isReady"
         :editor="editor"
       />
     </div>
 
-    <!-- The Popover for creating/editing links -->
     <div
       v-if="linkHandler.isEditorOpen.value"
-      :style="linkHandler.editorStyle.value"
+      :style="linkHandler.popoverStyle.value"
     >
       <LinkEditor
         :mode="linkHandler.editorMode.value"
@@ -56,7 +57,7 @@
 
 <script>
 
-  import { defineComponent, provide, onMounted, ref } from 'vue';
+  import { defineComponent, provide, onMounted } from 'vue';
   import EditorToolbar from './components/EditorToolbar.vue';
   import EditorContentWrapper from './components/EditorContentWrapper.vue';
   import { useEditor } from './composables/useEditor';
@@ -80,12 +81,12 @@
       const { editor, isReady, initializeEditor } = useEditor();
       provide('editor', editor);
       provide('isReady', isReady);
-      const bubbleMenu = ref(null);
+
+      const linkHandler = useLinkHandling(editor);
+      provide('linkHandler', linkHandler);
 
       onMounted(() => {
-        if (bubbleMenu.value) {
-          initializeEditor(bubbleMenu.value, linkHandler.isEditorOpen);
-        }
+        initializeEditor();
       });
 
       const {
@@ -100,11 +101,8 @@
         handleRemove,
       } = useImageHandling(editor);
 
-      const linkHandler = useLinkHandling(editor);
-      provide('linkHandler', linkHandler);
-
       const handleDrop = event => {
-        const file = event.dataTransfer?.files[0];
+        const file = event.dataTransfer.files[0];
         if (file) {
           openCreateModal(file);
         }
@@ -124,7 +122,6 @@
         isModalCentered,
         linkHandler,
         editor,
-        bubbleMenu,
       };
     },
   });

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useEditor.js

@@ -4,7 +4,6 @@ import StarterKitExtension from '@tiptap/starter-kit';
 import UnderlineExtension from '@tiptap/extension-underline';
 import { Superscript } from '@tiptap/extension-superscript';
 import { Subscript } from '@tiptap/extension-subscript';
-import { BubbleMenu } from '@tiptap/extension-bubble-menu';
 import { Small } from '../extensions/SmallTextExtension';
 import { Image } from '../extensions/Image';
 import { CodeBlockSyntaxHighlight } from '../extensions/CodeBlockSyntaxHighlight';
@@ -14,8 +13,7 @@ export function useEditor() {
   const editor = ref(null);
   const isReady = ref(false);
 
-  // Accept the bubble menu element as an argument
-  const initializeEditor = (bubbleMenuElement, isLinkEditorOpen) => {
+  const initializeEditor = () => {
     editor.value = new Editor({
       extensions: [
         StarterKitExtension.configure({
@@ -29,17 +27,6 @@ export function useEditor() {
         Subscript,
         Image,
         CustomLink, // Use our custom Link extension
-        BubbleMenu.configure({
-          // Use the passed-in element directly
-          element: bubbleMenuElement,
-          tippyOptions: {
-            placement: 'bottom-start',
-            inertia: true,
-          },
-          shouldShow: ({ editor }) => {
-            return !isLinkEditorOpen.value && editor.isActive('link');
-          },
-        }),
       ],
       content: '<p></p>',
       editorProps: {

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useLinkHandling.js

@@ -1,8 +1,9 @@
-import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { ref, watch, onUnmounted } from 'vue';
 
 export function useLinkHandling(editor) {
   const isEditorOpen = ref(false);
-  const editorStyle = ref({});
+  const isBubbleMenuOpen = ref(false);
+  const popoverStyle = ref({});
   const editorInitialState = ref({ text: '', href: '' });
   const editorMode = ref('create');
   const savedSelection = ref(null);
@@ -23,33 +24,28 @@ export function useLinkHandling(editor) {
   const openLinkEditor = (mode = 'create') => {
     if (!editor.value) return;
 
+    closeBubbleMenu(); // Ensure bubble menu is closed
+
     const { state } = editor.value;
     const { from, to, empty } = state.selection;
 
-    editorStyle.value = calculatePosition();
+    popoverStyle.value = calculatePosition();
     editorMode.value = mode;
 
     if (mode === 'edit') {
-      // For editing, use TipTap's extendMarkRange to get the full link range
       const linkAttrs = editor.value.getAttributes('link');
       if (!linkAttrs.href) {
         closeLinkEditor();
         return;
       }
-
-      // Execute the extendMarkRange command to actually extend the selection
       editor.value.chain().focus().extendMarkRange('link').run();
-
-      // Get the new selection after extending
       const newSelection = editor.value.state.selection;
-
       savedSelection.value = { from: newSelection.from, to: newSelection.to };
       editorInitialState.value = {
         href: linkAttrs.href,
         text: state.doc.textBetween(newSelection.from, newSelection.to, ' '),
       };
     } else {
-      // For creating, use current selection
       savedSelection.value = { from, to };
       editorInitialState.value = {
         href: '',
@@ -63,69 +59,105 @@ export function useLinkHandling(editor) {
   const closeLinkEditor = () => {
     isEditorOpen.value = false;
     savedSelection.value = null;
-    editorMode.value = 'create'; // Reset to default
+    editorMode.value = 'create';
+  };
+
+  const openBubbleMenu = () => {
+    if (isEditorOpen.value) return;
+    popoverStyle.value = calculatePosition();
+    isBubbleMenuOpen.value = true;
+  };
+
+  const closeBubbleMenu = () => {
+    isBubbleMenuOpen.value = false;
+  };
+
+  const closeAll = () => {
+    closeLinkEditor();
+    closeBubbleMenu();
   };
 
   const saveLink = ({ text, href }) => {
     if (!editor.value || !savedSelection.value) {
-      return closeLinkEditor();
+      return closeAll();
     }
 
     const { from, to } = savedSelection.value;
-
     const tr = editor.value.state.tr;
     const linkMark = editor.value.state.schema.marks.link.create({ href });
-
     tr.replaceWith(from, to, editor.value.state.schema.text(text, [linkMark]));
     editor.value.view.dispatch(tr);
 
-    closeLinkEditor();
+    closeAll();
   };
 
   const removeLink = () => {
     editor.value?.chain().focus().extendMarkRange('link').unsetLink().run();
-    closeLinkEditor();
+    closeAll();
   };
 
-  watch(isEditorOpen, isOpen => {
-    const handler = event => {
-      const popover = document.querySelector('.link-editor-popover');
+  const handleSelectionUpdate = () => {
+    if (editor.value.isActive('link')) {
+      openBubbleMenu();
+    } else {
+      closeBubbleMenu();
+    }
+  };
+
+  watch([isEditorOpen, isBubbleMenuOpen], ([editorIsOpen, bubbleIsOpen]) => {
+    const isOpen = editorIsOpen || bubbleIsOpen;
+    const clickHandler = event => {
+      const popover =
+        document.querySelector('.link-editor-popover') ||
+        document.querySelector('.link-bubble-menu');
       if (popover && !popover.contains(event.target)) {
-        closeLinkEditor();
+        closeAll();
       }
     };
+    const scrollHandler = () => closeAll();
+
     if (isOpen) {
       setTimeout(() => {
-        document.addEventListener('mousedown', handler, true);
+        document.addEventListener('mousedown', clickHandler, true);
+        document.addEventListener('scroll', scrollHandler, true);
       }, 0);
     } else {
-      document.removeEventListener('mousedown', handler, true);
+      document.removeEventListener('mousedown', clickHandler, true);
+      document.removeEventListener('scroll', scrollHandler, true);
     }
   });
 
-  const handleOpenLinkEditorEvent = () => {
-    openLinkEditor();
-  };
-
-  onMounted(() => {
-    if (editor?.value) {
-      editor.value.on('open-link-editor', handleOpenLinkEditorEvent);
-    }
-  });
+  watch(
+    () => editor.value,
+    (newEditor, oldEditor) => {
+      if (oldEditor) {
+        oldEditor.off('open-link-editor', openLinkEditor);
+        oldEditor.off('selectionUpdate', handleSelectionUpdate);
+      }
+      if (newEditor) {
+        newEditor.on('open-link-editor', openLinkEditor);
+        newEditor.on('selectionUpdate', handleSelectionUpdate);
+      }
+    },
+    { immediate: true },
+  );
 
   onUnmounted(() => {
     if (editor?.value) {
-      editor.value.off('open-link-editor', handleOpenLinkEditorEvent);
+      editor.value.off('open-link-editor', openLinkEditor);
+      editor.value.off('selectionUpdate', handleSelectionUpdate);
     }
   });
 
   return {
     isEditorOpen,
-    editorStyle,
+    isBubbleMenuOpen,
+    popoverStyle,
     editorInitialState,
     editorMode,
     openLinkEditor,
     closeLinkEditor,
+    closeBubbleMenu,
     saveLink,
     removeLink,
   };

package.json

@@ -55,7 +55,6 @@
   "dependencies": {
     "@sentry/vue": "^7.112.2",
     "@tiptap/core": "^2.14.0",
-    "@tiptap/extension-bubble-menu": "^2.23.1",
     "@tiptap/extension-code-block-lowlight": "^2.23.0",
     "@tiptap/extension-link": "^2.23.1",
     "@tiptap/extension-subscript": "^2.14.0",

pnpm-lock.yaml

@@ -9,8 +9,6 @@ const baseConfig = require('kolibri-tools/lib/webpack.config.base');
 const { merge } = require('webpack-merge');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const tippyPath = path.dirname(require.resolve('tippy.js/package.json', { paths: [require.resolve('@tiptap/core')] }));
-
 const BundleTracker = require('kolibri-tools/lib/webpackBundleTracker');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
@@ -150,11 +148,6 @@ module.exports = (env = {}) => {
         // needed to reference Vuetify styles in the shadow DOM
         vuetify: path.resolve('node_modules', 'vuetify'),
         static: staticFilesDir,
-        // Temp fix
-        // Added this alias to resolve the tippy.js conflict.
-        // It redirects the old, invalid import path from kolibri-design-system
-        // to the correct file in the newer tippy.js version required by Tiptap.
-        'tippy.js/umd': path.join(tippyPath, 'dist/tippy.umd.js'),
       },
       extensions: ['.js', '.vue', '.css'],
       symlinks: true,