feat: Add the new design for edit article page (#10285)

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -59,6 +59,7 @@ export default {
   data() {
     return {
       plugins: [imagePastePlugin(this.handleImageUpload)],
+      isTextSelected: false, // Tracks text selection and prevents unnecessary re-renders on mouse selection
     };
   },
   watch: {
@@ -181,6 +182,7 @@ export default {
           if (tx.docChanged) {
             this.emitOnChange();
           }
+          this.checkSelection(state);
         },
         handleDOMEvents: {
           keyup: this.onKeyup,
@@ -226,6 +228,56 @@ export default {
     onFocus() {
       this.$emit('focus');
     },
+    checkSelection(editorState) {
+      const { from, to } = editorState.selection;
+      // Check if there's a selection (from and to are different)
+      const hasSelection = from !== to;
+      // If the selection state is the same as the previous state, do nothing
+      if (hasSelection === this.isTextSelected) return;
+      // Update the selection state
+      this.isTextSelected = hasSelection;
+
+      const { editor } = this.$refs;
+
+      // Toggle the 'has-selection' class based on whether there's a selection
+      editor.classList.toggle('has-selection', hasSelection);
+      // If there's a selection, update the menubar position
+      if (hasSelection) this.setMenubarPosition(editorState);
+    },
+    setMenubarPosition(editorState) {
+      if (!editorState.selection) return;
+
+      // Get the start and end positions of the selection
+      const { from, to } = editorState.selection;
+      const { editor } = this.$refs;
+      // Get the editor's position relative to the viewport
+      const { left: editorLeft, top: editorTop } =
+        editor.getBoundingClientRect();
+
+      // Get the editor's width
+      const editorWidth = editor.offsetWidth;
+      const menubarWidth = 480; // Menubar width (adjust as needed (px))
+
+      // Get the end position of the selection
+      const { bottom: endBottom, right: endRight } = editorView.coordsAtPos(to);
+      // Get the start position of the selection
+      const { left: startLeft } = editorView.coordsAtPos(from);
+
+      // Calculate the top position for the menubar (10px below the selection)
+      const top = endBottom - editorTop + 10;
+      // Calculate the left position for the menubar
+      // This centers the menubar on the selection while keeping it within the editor's bounds
+      const left = Math.max(
+        0,
+        Math.min(
+          (startLeft + endRight) / 2 - editorLeft,
+          editorWidth - menubarWidth
+        )
+      );
+      // Set the CSS custom properties for positioning the menubar
+      editor.style.setProperty('--selection-top', `${top}px`);
+      editor.style.setProperty('--selection-left', `${left}px`);
+    },
   },
 };
 </script>
@@ -259,6 +311,7 @@ export default {
 }
 
 .editor-root {
+  position: relative;
   width: 100%;
 }