@harbour-enterprises/superdoc 1.0.0-alpha.14 → 1.0.0-alpha.16

package/dist/style.css

@@ -19069,20 +19069,20 @@ body {
     mix-blend-mode: difference;
 }
 
-.comment-doc[data-v-13d89078] {
+.comment-doc[data-v-df7ef0d6] {
   position: relative;
 }
-.comments-layer[data-v-13d89078] {
+.comments-layer[data-v-df7ef0d6] {
   position: relative;
 }
-.comment-anchor[data-v-13d89078] {
+.comment-anchor[data-v-df7ef0d6] {
   position: absolute;
   cursor: pointer;
   z-index: 3;
   border-radius: 4px;
   transition: background-color 250ms ease;
 }
-.comments-container[data-v-13d89078] {
+.comments-container[data-v-df7ef0d6] {
   /* pointer-events: none;  */
 }
 
@@ -19134,7 +19134,7 @@ span[data-v-36fffb56] {
 }
 
 
-.comments-dialog[data-v-25f7474c] {
+.comments-dialog[data-v-01544401] {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -19147,14 +19147,14 @@ span[data-v-36fffb56] {
   box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.15);
   z-index: 5;
 }
-.is-active[data-v-25f7474c] {
+.is-active[data-v-01544401] {
   z-index: 10;
 }
-.overflow-menu[data-v-25f7474c] {
+.overflow-menu[data-v-01544401] {
   flex-shrink: 1;
   display: flex;
 }
-.overflow-menu i[data-v-25f7474c] {
+.overflow-menu i[data-v-01544401] {
   width: 20px;
   height: 20px;
   display: flex;
@@ -19166,69 +19166,69 @@ span[data-v-36fffb56] {
   margin-left: 2px;
   cursor: pointer;
 }
-.overflow-menu i[data-v-25f7474c]:hover {
+.overflow-menu i[data-v-01544401]:hover {
   background-color: #DBDBDB;
 }
-.comment-entry[data-v-25f7474c] {
+.comment-entry[data-v-01544401] {
   flex-grow: 1;
   margin: 5px 0;
 }
-.comment-entry input[data-v-25f7474c] {
+.comment-entry input[data-v-01544401] {
   border-radius: 12px;
   padding: 6px 10px;
   outline: none;
   border: 1px solid #DBDBDB;
   width: 100%;
 }
-.comment-header[data-v-25f7474c] {
+.comment-header[data-v-01544401] {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.comment-header-left[data-v-25f7474c] {
+.comment-header-left[data-v-01544401] {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.avatar[data-v-25f7474c] {
+.avatar[data-v-01544401] {
   margin-right: 10px;
 }
-.user-info[data-v-25f7474c] {
+.user-info[data-v-01544401] {
   display: flex;
   flex-direction: column;
   font-size: 12px;
 }
-.user-name[data-v-25f7474c] {
+.user-name[data-v-01544401] {
   font-weight: 600;
   line-height: 1.2em;
 }
-.user-timestamp[data-v-25f7474c] {
+.user-timestamp[data-v-01544401] {
   line-height: 1.2em;
   font-size: 12px;
   color: #999;
 }
-.sd-button[data-v-25f7474c] {
+.sd-button[data-v-01544401] {
   margin-right: 5px;
   font-size: 12px;
 }
-.comment[data-v-25f7474c] {
+.comment[data-v-01544401] {
   font-size: 14px;
   margin: 5px 0;
 }
-.conversation-item[data-v-25f7474c] {
+.conversation-item[data-v-01544401] {
   border-bottom: 1px solid #DBDBDB;
   padding-bottom: 10px;
 }
-.comment-footer[data-v-25f7474c] {
+.comment-footer[data-v-01544401] {
   margin: 5px 0;
 }
 
-.section-wrapper[data-v-858cd0cf] {
+.section-wrapper[data-v-2284c669] {
   position: relative;
   min-height: 100%;
   width: 300px;
 }
-.floating-comment[data-v-858cd0cf] {
+.floating-comment[data-v-2284c669] {
   position: absolute;
   min-width: 300px;
 }
@@ -19278,7 +19278,7 @@ img[data-v-47d1dee5] {
 }
 
 /* Right sidebar drawer */
-.right-sidebar[data-v-49e265f8] {
+.right-sidebar[data-v-f1f5c2b0] {
   width: 320px;
   padding: 0 10px;
   min-height: 100%;
@@ -19286,50 +19286,50 @@ img[data-v-47d1dee5] {
 }
 
 /* General Styles */
-.box-sizing[data-v-49e265f8], .layers[data-v-49e265f8] {
+.box-sizing[data-v-f1f5c2b0], .layers[data-v-f1f5c2b0] {
   box-sizing: border-box;
 }
-.cursor-pointer[data-v-49e265f8], .tools i[data-v-49e265f8], .toolbar-item[data-v-49e265f8] {
+.cursor-pointer[data-v-f1f5c2b0], .tools i[data-v-f1f5c2b0], .toolbar-item[data-v-f1f5c2b0] {
   cursor: pointer;
 }
-.flex[data-v-49e265f8] {
+.flex[data-v-f1f5c2b0] {
   display: flex;
 }
-.flex-column[data-v-49e265f8] {
+.flex-column[data-v-f1f5c2b0] {
   flex-direction: column;
 }
-.flex-center[data-v-49e265f8] {
+.flex-center[data-v-f1f5c2b0] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 /* Layer Styles */
-.comments-layer[data-v-49e265f8] {
+.comments-layer[data-v-f1f5c2b0] {
   position: absolute;
   top: 0;
   height: 100%;
 }
-.layers[data-v-49e265f8] {
+.layers[data-v-f1f5c2b0] {
   position: relative;
 }
 
 /* Document Styles */
-.docx[data-v-49e265f8] {
+.docx[data-v-f1f5c2b0] {
   border: 1px solid #DFDFDF;
   pointer-events: auto;
 }
-.sub-document[data-v-49e265f8] {
+.sub-document[data-v-f1f5c2b0] {
   position: relative;
 }
 
 /* Toolbar Styles */
-.toolbar[data-v-49e265f8] {
+.toolbar[data-v-f1f5c2b0] {
   height: 25px;
   background-color: #fff;
   margin-bottom: 5px;
 }
-.toolbar-item[data-v-49e265f8] {
+.toolbar-item[data-v-f1f5c2b0] {
   width: 20px;
   height: 20px;
   border-radius: 8px;
@@ -19341,12 +19341,12 @@ img[data-v-47d1dee5] {
   justify-content: center;
   transition: all 250ms ease;
 }
-.toolbar-item[data-v-49e265f8]:hover {
+.toolbar-item[data-v-f1f5c2b0]:hover {
   background-color: #DBDBDB;
 }
 
 /* Tools Styles */
-.tools[data-v-49e265f8] {
+.tools[data-v-f1f5c2b0] {
   position: absolute;
   width: 50px;
   height: 50px;
@@ -19357,7 +19357,7 @@ img[data-v-47d1dee5] {
   align-items: center;
   justify-content: center;
 }
-.tools i[data-v-49e265f8] {
+.tools i[data-v-f1f5c2b0] {
   font-size: 20px;
   border-radius: 12px;
   border: none;
@@ -19365,11 +19365,11 @@ img[data-v-47d1dee5] {
   background-color: #DBDBDB;
 }
 @media (max-width: 768px) {
-.sub-document[data-v-49e265f8] {
+.sub-document[data-v-f1f5c2b0] {
     max-width: 100%;
     overflow: hidden;
 }
-.right-sidebar[data-v-49e265f8] {
+.right-sidebar[data-v-f1f5c2b0] {
     padding: 10px;
     width: 55px;
     position: relative;

package/dist/superdoc.cjs.js

@@ -37437,10 +37437,11 @@ const _sfc_main$b = {
     };
     const setFloatingCommentOffset = (conversation, e) => {
       const floatingConvo = visibleConversations.value.find((c2) => c2.id === conversation.conversationId);
-      const parentTop = props.parent.getBoundingClientRect().top;
-      const top = floatingConvo.position.top;
-      const eTop = e.target.getBoundingClientRect().top;
-      floatingCommentsOffset.value = top - eTop + parentTop;
+      conversation.selection.getContainerLocation(props.parent).top;
+      props.parent.getBoundingClientRect().top;
+      floatingConvo.position.top;
+      e.target.getBoundingClientRect().top;
+      floatingCommentsOffset.value = conversation.selection.selectionBounds.top;
     };
     const handleHighlightClick = (conversation, e) => {
       conversation.isFocused = true;
@@ -37472,7 +37473,7 @@ const _sfc_main$b = {
     };
   }
 };
-const CommentsLayer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-13d89078"]]);
+const CommentsLayer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-df7ef0d6"]]);
 function OrderedMap(content) {
   this.content = content;
 }
@@ -48516,6 +48517,19 @@ const _sfc_main$8 = {
       });
       if (pendingComment.value && pendingComment.value.conversationId === props.data.conversationId) {
         const newConversation = { ...pendingComment.value };
+        const selection = pendingComment.value.selection.getValues();
+        const bounds = selection.selectionBounds;
+        if (bounds.top > bounds.bottom) {
+          const temp = bounds.top;
+          bounds.top = bounds.bottom;
+          bounds.bottom = temp;
+        }
+        if (bounds.left > bounds.right) {
+          const temp = bounds.left;
+          bounds.left = bounds.right;
+          bounds.right = temp;
+        }
+        newConversation.selection = useSelection(selection);
         pendingComment.value = null;
         selectionPosition.value = null;
         newConversation.comments.push(comment);
@@ -48562,6 +48576,8 @@ const _sfc_main$8 = {
     const cleanConversations = () => {
       if (props.data.comments.length)
         return;
+      if (pendingComment.value)
+        selectionPosition.value = null;
       const id = props.data.conversationId;
       pendingComment.value = null;
       props.currentDocument.removeConversation(id);
@@ -48671,7 +48687,7 @@ const _sfc_main$8 = {
     };
   }
 };
-const CommentDialog = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-25f7474c"]]);
+const CommentDialog = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-01544401"]]);
 function useFloatingConveration(params) {
   const id = params.conversationId;
   const conversation = ref(params);
@@ -48754,6 +48770,9 @@ const _sfc_main$7 = {
       }
       if (currentItem.id === activeComment.value) {
         floatingCommentsOffset.value += currentItem.offset;
+        updatedPosition.top;
+        const diff = updatedPosition.top - proposedPosition.top;
+        floatingCommentsOffset.value += diff;
       }
       return updatedPosition;
     };
@@ -48793,6 +48812,14 @@ const _sfc_main$7 = {
       };
     });
     watch(documentsWithConverations, (newVal) => newVal.length && initialize());
+    watch(activeComment, (newVal) => {
+      setTimeout(() => {
+        if (!activeComment.value) {
+          floatingCommentsOffset.value = 0;
+          initialize();
+        }
+      });
+    });
     onMounted(() => {
       initialize();
     });
@@ -48825,7 +48852,7 @@ const _sfc_main$7 = {
     };
   }
 };
-const FloatingComments = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-858cd0cf"]]);
+const FloatingComments = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-2284c669"]]);
 const _sfc_main$6 = {
   __name: "TextField",
   props: {
@@ -52081,9 +52108,8 @@ const _sfc_main = {
         zIndex: 10
       };
     };
-    const handleSelectionDrag = (selection, e) => {
-      if (!selection.selectionBounds)
-        return;
+    const setSelectionPosition = (selection) => {
+      activeSelection.value = selection;
       const containerBounds = selection.getContainerLocation(layers.value);
       let left = selection.selectionBounds.left;
       let top = selection.selectionBounds.top + containerBounds.top;
@@ -52102,7 +52128,11 @@ const _sfc_main = {
         height: Math.abs(selection.selectionBounds.bottom - selection.selectionBounds.top) + "px",
         borderRadius: "4px"
       };
-      activeSelection.value = selection;
+    };
+    const handleSelectionDrag = (selection, e) => {
+      if (!selection.selectionBounds)
+        return;
+      setSelectionPosition(selection);
     };
     const handleSelectionDragEnd = () => {
       if (!selectionPosition.value)
@@ -52114,18 +52144,23 @@ const _sfc_main = {
         comments: showAddComment
       };
       if (tool in toolOptions) {
+        setSelectionPosition(activeSelection.value);
         toolOptions[tool](activeSelection.value, selectionPosition.value);
       }
       activeSelection.value = null;
       toolsMenuPosition.value = null;
     };
     const handleDocumentMouseDown = (e) => {
+      if (pendingComment.value)
+        return;
       selectionPosition.value = null;
-      document.removeEventListener("mousedown", handleDocumentMouseDown);
     };
     const handleHighlightClick = () => {
       toolsMenuPosition.value = null;
     };
+    const cancelPendingComment = () => {
+      selectionPosition.value = null;
+    };
     onMounted(() => {
       if ("comments" in modules && !modules.comments.readOnly) {
         document.addEventListener("mousedown", handleDocumentMouseDown);
@@ -52135,6 +52170,7 @@ const _sfc_main = {
       document.removeEventListener("mousedown", handleDocumentMouseDown);
     });
     return (_ctx, _cache) => {
+      const _directive_click_outside = resolveDirective("click-outside");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createBaseVNode("div", {
           class: "layers",
@@ -52202,13 +52238,15 @@ const _sfc_main = {
           ])
         ], 512),
         (unref(pendingComment) || unref(documentsWithConverations).length) && layers.value && unref(isReady) ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          unref(pendingComment) ? (openBlock(), createBlock(CommentDialog, {
+          unref(pendingComment) ? withDirectives((openBlock(), createBlock(CommentDialog, {
             key: 0,
             data: unref(pendingComment),
             "current-document": unref(getDocument2)(unref(pendingComment).documentId),
             user: unref(user),
             parent: layers.value
-          }, null, 8, ["data", "current-document", "user", "parent"])) : createCommentVNode("", true),
+          }, null, 8, ["data", "current-document", "user", "parent"])), [
+            [_directive_click_outside, cancelPendingComment]
+          ]) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(documentsWithConverations), (doc2) => {
             return openBlock(), createBlock(FloatingComments, {
               parent: layers.value,
@@ -52220,7 +52258,7 @@ const _sfc_main = {
     };
   }
 };
-const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-49e265f8"]]);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f1f5c2b0"]]);
 const createMyApp = () => {
   const app = createApp(App);
   const pinia = createPinia();