fix(texteditor)[link]: edit link bug

Author: habibayman

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

@@ -20,6 +20,7 @@
       :style="linkHandler.editorStyle.value"
     >
       <LinkEditor
+        :mode="linkHandler.editorMode.value"
         :initial-state="linkHandler.editorInitialState.value"
         @save="linkHandler.saveLink"
         @remove="linkHandler.removeLink"

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageDropZone.vue

@@ -80,7 +80,9 @@
   }
 
   .drop-zone:focus {
-    outline: 2px solid #3498db;
+    background: #e6e6e6;
+    border-radius: 4px;
+    outline: 2px solid #0097f2;
   }
 
 </style>

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue

@@ -259,4 +259,10 @@
     opacity: 1;
   }
 
+  button:focus-visible {
+    background: #e6e6e6;
+    border-radius: 4px;
+    outline: 2px solid #0097f2;
+  }
+
 </style>

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue

@@ -336,6 +336,7 @@
 
   .close-button {
     font-size: 2rem;
+    line-height: 1;
     color: black;
     cursor: pointer;
     background: none;
@@ -413,7 +414,6 @@
   .select-file-link {
     flex-shrink: 0;
     margin-left: 1rem;
-    font-weight: 400;
     color: #4368f5;
     text-decoration: underline;
     cursor: pointer;
@@ -504,4 +504,11 @@
     font-size: 12px;
   }
 
+  button:focus-visible,
+  input:focus {
+    background: #e6e6e6;
+    border-radius: 4px;
+    outline: 2px solid #0097f2;
+  }
+
 </style>

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/link/LinkBubbleMenu.vue

@@ -84,7 +84,7 @@
 
       return {
         href,
-        onEdit: openLinkEditor,
+        onEdit: () => openLinkEditor('edit'),
         onRemove: removeLink,
         copyToClipboard,
         goToLink$,
@@ -149,7 +149,6 @@
   .bubble-menu-button:focus-visible {
     background: #e6e6e6;
     outline: 2px solid #0097f2;
-    outline-offset: 2px;
   }
 
   .bubble-menu-button img {

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/link/LinkEditor.vue

@@ -8,7 +8,7 @@
     aria-modal="true"
   >
     <div class="modal-header">
-      <h3 :id="headingId">{{ addLink$() }}</h3>
+      <h3 :id="headingId">{{ isEditMode ? editLink$() : addLink$() }}</h3>
       <button
         class="close-button"
         :title="close$()"
@@ -41,7 +41,23 @@
       </div>
     </div>
 
-    <div class="footer">
+    <div
+      class="footer"
+      :class="{ 'edit-mode': isEditMode }"
+    >
+      <button
+        v-if="isEditMode"
+        class="remove-link-button"
+        @click="$emit('remove')"
+      >
+        <img
+          src="../../../assets/icon-linkOff.svg"
+          aria-hidden="true"
+          class="remove-link-icon"
+        >
+        <span> {{ removeLink$() }} </span>
+      </button>
+
       <button
         class="save-button"
         :disabled="!validateForm()"
@@ -57,18 +73,21 @@
 
 <script>
 
-  import { defineComponent, ref, watch } from 'vue';
+  import { defineComponent, ref, watch, computed } from 'vue';
   import { useFocusTrap } from '../../composables/useFocusTrap';
   import { getTipTapEditorStrings } from '../../TipTapEditorStrings';
 
   export default defineComponent({
     name: 'LinkEditor',
     setup(props, { emit }) {
-      const { addLink$, close$, text$, link$, save$, closeModal$ } = getTipTapEditorStrings();
+      const { addLink$, close$, text$, link$, save$, closeModal$, editLink$, removeLink$ } =
+        getTipTapEditorStrings();
       const rootEl = ref(null);
       const formData = ref({ text: '', href: '' });
       const headingId = `link-editor-heading-${Math.random().toString(36).substr(2, 9)}`;
 
+      const isEditMode = computed(() => props.mode === 'edit');
+
       watch(
         () => props.initialState,
         newState => {
@@ -92,16 +111,20 @@
         formData,
         onSave,
         validateForm,
+        isEditMode,
         headingId,
         addLink$,
         close$,
         text$,
         link$,
         save$,
         closeModal$,
+        editLink$,
+        removeLink$,
       };
     },
     props: {
+      mode: { type: String, default: 'create' },
       initialState: { type: Object, required: true },
     },
     emits: ['save', 'remove', 'close'],
@@ -152,11 +175,6 @@
     border: 0;
   }
 
-  .close-button:focus-visible {
-    outline: 2px solid #0097f2;
-    outline-offset: 2px;
-  }
-
   .form-group {
     position: relative;
     display: flex;
@@ -183,15 +201,20 @@
   }
 
   .form-group input:focus {
+    border-bottom: 0;
     outline: 2px solid #0097f2;
-    outline-offset: 2px;
+    outline-offset: 1px;
   }
 
   .footer {
     display: flex;
     justify-content: flex-end;
   }
 
+  .footer.edit-mode {
+    justify-content: space-between;
+  }
+
   .save-button {
     padding: 8px 16px;
     font-weight: bold;
@@ -207,9 +230,27 @@
     cursor: not-allowed;
   }
 
-  .save-button:focus-visible {
+  .remove-link-button {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    color: #4368f5;
+    text-decoration: underline;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: 2px;
+  }
+
+  .remove-link-icon {
+    filter: brightness(0) saturate(100%) invert(32%) sepia(97%) saturate(2640%) hue-rotate(230deg)
+      brightness(103%) contrast(94%);
+  }
+
+  button:focus-visible {
+    background: #e6e6e6;
+    border-radius: 4px;
     outline: 2px solid #0097f2;
-    outline-offset: 2px;
   }
 
 </style>

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/FormatDropdown.vue

@@ -234,7 +234,6 @@
     background: #e6e6e6;
     border-radius: 4px;
     outline: 2px solid #0097f2;
-    outline-offset: 2px;
   }
 
   .dropdown-icon {
@@ -268,7 +267,6 @@
       'Segoe UI',
       sans-serif;
     font-size: 14px;
-    font-weight: 400;
     line-height: 140%;
     color: #000000;
     cursor: pointer;

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/PasteDropdown.vue

@@ -259,7 +259,6 @@
     background: #e6e6e6;
     border-radius: 4px;
     outline: 2px solid #0097f2;
-    outline-offset: 2px;
   }
 
   .toolbar-icon {
@@ -304,7 +303,6 @@
     background: #e6e6e6;
     border-radius: 4px;
     outline: 2px solid #0097f2;
-    outline-offset: 2px;
   }
 
   .dropdown-arrow {
@@ -343,7 +341,6 @@
       'Segoe UI',
       sans-serif;
     font-size: 14px;
-    font-weight: 400;
     line-height: 140%;
     color: #000000;
     cursor: pointer;

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue

@@ -129,7 +129,6 @@
     background: #e6e6e6;
     border-radius: 4px;
     outline: 2px solid #0097f2;
-    outline-offset: 2px;
   }
 
   .toolbar-icon {

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

@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 
 export function useImageHandling(editor) {
   const modalMode = ref(null); // 'create' or 'edit'
@@ -84,6 +84,22 @@ export function useImageHandling(editor) {
     closeModal();
   };
 
+  watch(modalMode, mode => {
+    const handler = event => {
+      const popover = document.querySelector('.image-upload-modal');
+      if (popover && !popover.contains(event.target)) {
+        closeModal();
+      }
+    };
+    if (mode) {
+      setTimeout(() => {
+        document.addEventListener('mousedown', handler, true);
+      }, 0);
+    } else {
+      document.removeEventListener('mousedown', handler, true);
+    }
+  });
+
   onMounted(() => {
     if (editor?.value) {
       editor.value.on('open-image-editor', openEditModal);