feat(texteditor): implement insertion toolbar actions

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

@@ -1,32 +1,151 @@
 <template>
 
   <div class="editor-container">
-    <EditorToolbar />
-    <EditorContentWrapper />
+    <EditorToolbar
+      @insert-image="target => openCreateModal({ targetElement: target })"
+      @insert-link="linkHandler.openLinkEditor()"
+      @insert-math="target => mathHandler.openCreateMathModal({ targetElement: target })"
+    />
+
+    <div
+      v-if="linkHandler.isBubbleMenuOpen.value"
+      :style="linkHandler.popoverStyle.value"
+    >
+      <LinkBubbleMenu
+        v-if="isReady"
+        :editor="editor"
+      />
+    </div>
+
+    <div
+      v-if="linkHandler.isEditorOpen.value"
+      :style="linkHandler.popoverStyle.value"
+    >
+      <LinkEditor
+        :mode="linkHandler.editorMode.value"
+        :initial-state="linkHandler.editorInitialState.value"
+        @save="linkHandler.saveLink"
+        @remove="linkHandler.removeLink"
+        @close="linkHandler.closeLinkEditor"
+      />
+    </div>
+
+    <div
+      v-if="modalMode"
+      class="image-upload-popover-wrapper"
+      :class="{ 'has-overlay': isModalCentered }"
+      @click.self="closeModal"
+    >
+      <ImageUploadModal
+        :style="popoverStyle"
+        :mode="modalMode"
+        :initial-data="modalInitialData"
+        @close="closeModal"
+        @insert="handleInsert"
+        @update="handleUpdate"
+        @remove="handleRemove"
+      />
+    </div>
+
+    <div
+      v-if="mathHandler.isMathModalOpen.value"
+      class="math-modal-popover-wrapper"
+      :class="{ 'has-overlay': mathHandler.isModalCentered.value }"
+      @click.self="mathHandler.closeMathModal()"
+    >
+      <FormulasMenu
+        :style="mathHandler.popoverStyle.value"
+        :mode="mathHandler.mathModalMode.value"
+        :initial-latex="mathHandler.mathModalInitialLatex.value"
+        @save="mathHandler.handleSaveMath"
+        @close="mathHandler.closeMathModal"
+      />
+    </div>
+
+    <EditorContentWrapper
+      @drop.native.prevent="handleDrop"
+      @dragover.native.prevent
+    />
   </div>
 
 </template>
 
 
 <script>
 
-  import { defineComponent, provide } 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';
+  import ImageUploadModal from './components/image/ImageUploadModal.vue';
+  import { useImageHandling } from './composables/useImageHandling';
+  import '../assets/styles/code-theme-dark.css';
+  import { useLinkHandling } from './composables/useLinkHandling';
+  import LinkBubbleMenu from './components/link/LinkBubbleMenu.vue';
+  import LinkEditor from './components/link/LinkEditor.vue';
+  import { useMathHandling } from './composables/useMathHandling';
+  import FormulasMenu from './components/math/FormulasMenu.vue';
 
   export default defineComponent({
     name: 'RichTextEditor',
     components: {
       EditorToolbar,
       EditorContentWrapper,
+      ImageUploadModal,
+      LinkBubbleMenu,
+      LinkEditor,
+      FormulasMenu,
     },
     setup() {
-      const { editor, isReady } = useEditor();
-
-      // Provide editor instance to all child components
+      const { editor, isReady, initializeEditor } = useEditor();
       provide('editor', editor);
       provide('isReady', isReady);
+
+      const linkHandler = useLinkHandling(editor);
+      provide('linkHandler', linkHandler);
+
+      const mathHandler = useMathHandling(editor);
+      provide('mathHandler', mathHandler);
+
+      onMounted(() => {
+        initializeEditor();
+      });
+
+      const {
+        modalMode,
+        modalInitialData,
+        popoverStyle,
+        isModalCentered,
+        openCreateModal,
+        closeModal,
+        handleInsert,
+        handleUpdate,
+        handleRemove,
+      } = useImageHandling(editor);
+
+      const handleDrop = event => {
+        const file = event.dataTransfer.files[0];
+        if (file) {
+          openCreateModal(file);
+        }
+      };
+
+      return {
+        isReady,
+        modalMode,
+        modalInitialData,
+        popoverStyle,
+        openCreateModal,
+        closeModal,
+        handleInsert,
+        handleUpdate,
+        handleRemove,
+        handleDrop,
+        isModalCentered,
+        linkHandler,
+        editor,
+        mathHandler,
+      };
     },
   });
 
@@ -36,8 +155,9 @@
 <style scoped>
 
   .editor-container {
+    position: relative;
     width: 1000px;
-    margin: 40px auto;
+    margin: 80px auto;
     font-family:
       'Noto Sans',
       -apple-system,
@@ -51,6 +171,47 @@
     border-radius: 8px;
   }
 
+  .image-upload-popover-wrapper,
+  .math-modal-popover-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .image-upload-popover-wrapper > *,
+  .math-modal-popover-wrapper > * {
+    pointer-events: auto;
+  }
+
+  /* Overlay for edit mode to allow clicking outside to close */
+  .image-upload-popover-wrapper.has-overlay,
+  .math-modal-popover-wrapper.has-overlay {
+    pointer-events: auto;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .image-upload-modal-content {
+    position: relative;
+    padding: 2rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .close-modal {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 1.5rem;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+  }
+
 </style>
 
 

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js

@@ -148,6 +148,167 @@ const MESSAGES = {
     message: 'Clipboard access failed. Try copying again.',
     context: 'Message shown when clipboard access fails during paste operation',
   },
+
+  // Image Upload
+  editImage: {
+    message: 'Edit image',
+    context: 'Title for the image modal when editing an existing image.',
+  },
+  uploadImage: {
+    message: 'Upload image',
+    context: 'Title for the image modal when uploading a new image.',
+  },
+  closeModal: {
+    message: 'Close modal',
+    context: 'Accessibility label for the button that closes the modal window.',
+  },
+  cancelLoading: {
+    message: 'Cancel loading',
+    context: 'Button label to cancel an image upload that is in progress.',
+  },
+  cancel: {
+    message: 'Cancel',
+    context: 'Generic button label for a cancel action.',
+  },
+  multipleFilesDroppedWarning: {
+    message: 'Multiple files were dropped. Only the first file has been selected.',
+    context: 'Warning message shown when a user drops multiple files into the upload area.',
+  },
+  replaceFile: {
+    message: 'Replace file',
+    context: 'Button label to replace an existing image file.',
+  },
+  selectFile: {
+    message: 'Select file',
+    context: 'Button label to open a file picker to select an image.',
+  },
+  imagePreview: {
+    message: 'Image preview',
+    context: 'Alt text for the image preview in the upload modal.',
+  },
+  altTextLabel: {
+    message: 'Alt text (Optional)',
+    context: 'Label for the alt text input field.',
+  },
+  altTextPlaceholder: {
+    message: 'Describe your image...',
+    context: 'Placeholder text for the alt text input field.',
+  },
+  altTextDescription: {
+    message:
+      'Alt text is necessary to enable visually impaired learners to answer questions, and it also displays when the image fails to load',
+    context: 'Description of the purpose and importance of alt text.',
+  },
+  imageDropZoneText: {
+    message: 'Drag and drop an image here or upload manually',
+    context: 'Instructional text inside the image drop zone.',
+  },
+  selectFileToUpload: {
+    message: 'Select file to upload',
+    context: 'Accessibility label for the button that opens the file picker.',
+  },
+  supportedFileTypes: {
+    message: 'Supported file types: png, jpg, jpeg, svg, webp',
+    context: 'A list of supported image file formats.',
+  },
+  removeImage: {
+    message: 'Remove image',
+    context: 'Button label to remove an image from the editor.',
+  },
+  remove: {
+    message: 'Remove',
+    context: 'Generic button label for a remove action.',
+  },
+  saveChanges: {
+    message: 'Save changes',
+    context: 'Button label to save changes made to an image.',
+  },
+  save: {
+    message: 'Save',
+    context: 'Generic button label for a save action.',
+  },
+  insert: {
+    message: 'Insert',
+    context: 'Generic button label for an insert action.',
+  },
+  defaultImageName: {
+    message: 'Image',
+    context: 'Default name for an image when a file name is not available.',
+  },
+
+  // Link
+  goToLink: {
+    message: 'Go to link',
+    context: 'Text for a link that opens the URL in a new tab.',
+  },
+  copyLink: {
+    message: 'Copy link',
+    context: 'Button title to copy the link URL to the clipboard.',
+  },
+  editLink: {
+    message: 'Edit link',
+    context: 'Button title to open the link editor modal.',
+  },
+  edit: {
+    message: 'Edit',
+    context: 'Generic button label for an edit action.',
+  },
+  removeLink: {
+    message: 'Remove link',
+    context: 'Button title to remove the link from the text.',
+  },
+  linkActions: {
+    message: 'Link actions',
+    context: 'Accessibility label for the toolbar containing link-related actions.',
+  },
+  opensInNewTab: {
+    message: '(opens in new tab)',
+    context: 'Accessibility text indicating that a link will open in a new browser tab.',
+  },
+  addLink: {
+    message: 'Add link',
+    context: 'Title for the link editor modal.',
+  },
+  close: {
+    message: 'Close',
+    context: 'Generic button label or title for a close action.',
+  },
+  text: {
+    message: 'Text',
+    context: 'Label for the link text input field.',
+  },
+  link: {
+    message: 'Link',
+    context: 'Label for the link URL input field.',
+  },
+
+  // Math
+  formulasMenuTitle: {
+    message: 'Special Characters',
+    context: 'Title for the menu containing special characters and mathematical symbols.',
+  },
+
+  // Error Messages
+  noFileProvided: {
+    message: 'No file provided.',
+    context: 'Error message when no file is provided for upload',
+  },
+  invalidFileType: {
+    message: 'Invalid file type. Please use: ',
+    context: 'Error message when an unsupported file type is uploaded',
+  },
+  fileTooLarge: {
+    message: 'File is too large. Maximum size is ',
+    context: 'Error message when uploaded file exceeds size limit',
+  },
+  fileSizeUnit: {
+    message: 'MB.',
+    context: 'Unit for file size in megabytes',
+  },
+  failedToProcessImage: {
+    message: 'Failed to process the image file.',
+    context: 'Error message when image processing fails',
+  },
 };
 
 let TipTapEditorStrings = null;