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

package/dist/style.css

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

package/dist/superdoc.cjs.js

@@ -37426,9 +37426,10 @@ const _sfc_main$b = {
       const { selection } = conversation;
       const containerBounds = selection.getContainerLocation(props.parent);
       const placement = conversation.selection.selectionBounds;
+      const top = parseFloat(placement.top) + containerBounds.top;
       return {
         position: "absolute",
-        top: placement.top + containerBounds.top + "px",
+        top: top + "px",
         left: placement.left + "px",
         width: placement.right - placement.left + "px",
         height: placement.bottom - placement.top + "px"
@@ -37471,7 +37472,7 @@ const _sfc_main$b = {
     };
   }
 };
-const CommentsLayer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-caca3a11"]]);
+const CommentsLayer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-13d89078"]]);
 function OrderedMap(content) {
   this.content = content;
 }
@@ -48493,7 +48494,7 @@ const _sfc_main$8 = {
     const superdocStore = useSuperdocStore();
     const commentsStore = useCommentsStore();
     const { COMMENT_EVENTS } = commentsStore;
-    const { getConfig, activeComment, pendingComment } = storeToRefs(commentsStore);
+    const { getConfig, activeComment, pendingComment, floatingCommentsOffset } = storeToRefs(commentsStore);
     const { areDocumentsReady } = superdocStore;
     const { selectionPosition } = storeToRefs(superdocStore);
     const { proxy } = getCurrentInstance();
@@ -48568,6 +48569,7 @@ const _sfc_main$8 = {
     };
     const handleClickOutside = (e) => {
       if (activeComment.value === props.data.conversationId) {
+        floatingCommentsOffset.value = 0;
         emit2("dialog-exit");
         if (e.target.dataset.id)
           activeComment.value = e.target.dataset.id;
@@ -48669,7 +48671,7 @@ const _sfc_main$8 = {
     };
   }
 };
-const CommentDialog = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-8a710b97"]]);
+const CommentDialog = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-25f7474c"]]);
 function useFloatingConveration(params) {
   const id = params.conversationId;
   const conversation = ref(params);
@@ -48719,12 +48721,11 @@ const _sfc_main$7 = {
       const dialog = visibleConversations.value[dialogIndex];
       if (!dialog)
         return;
-      const containerBounds = floatingCommentsContainer.value.getBoundingClientRect();
       const selectionBounds = dialog.conversation.selection.getContainerLocation(props.parent);
       const position = elementRef.value.getBoundingClientRect();
       const selection = dialog.conversation.selection.selectionBounds;
-      const top = selection.top + position.top + selectionBounds.top - containerBounds.top;
-      const left = selection.left + position.left;
+      const top = parseFloat(selection.top) + selectionBounds.top;
+      const left = parseFloat(selection.left) + position.left;
       dialog.position = {
         top,
         left,
@@ -48746,7 +48747,7 @@ const _sfc_main$7 = {
       const topComparison = proposedPosition.top < previousPosition.bottom;
       if (topComparison) {
         const height = proposedPosition.bottom - proposedPosition.top;
-        const newTop = previousPosition.bottom + 2;
+        const newTop = previousPosition.bottom + 5;
         currentItem.offset = newTop - proposedPosition.top;
         updatedPosition.top = newTop;
         updatedPosition.bottom = updatedPosition.top + height;
@@ -48780,10 +48781,8 @@ const _sfc_main$7 = {
       const conversations = [...firstDoc.conversations];
       sortedConversations.value = conversations.sort(sortByLocation);
       visibleConversations.value.push(useFloatingConveration(sortedConversations.value[0]));
-      if (!activeComment.value)
-        floatingCommentsOffset.value = 0;
     };
-    const getPosition = (convo) => {
+    const getCommentPosition = (convo) => {
       return {
         top: convo.position.top + "px"
       };
@@ -48793,11 +48792,7 @@ const _sfc_main$7 = {
         marginTop: floatingCommentsOffset.value * (-1 / 2) + "px"
       };
     });
-    watch(documentsWithConverations, (newVal) => {
-      if (!newVal.length)
-        return;
-      initialize();
-    });
+    watch(documentsWithConverations, (newVal) => newVal.length && initialize());
     onMounted(() => {
       initialize();
     });
@@ -48813,22 +48808,24 @@ const _sfc_main$7 = {
           class: "sidebar-container"
         }, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(visibleConversations), (floatingConversation) => {
-            return openBlock(), createBlock(CommentDialog, {
-              class: "floating-comment",
-              onReady: handleDialogReady,
-              onDialogExit: initialize,
-              style: normalizeStyle(getPosition(floatingConversation)),
-              data: floatingConversation.conversation,
-              "current-document": __props.currentDocument,
-              user: unref(user)
-            }, null, 8, ["style", "data", "current-document", "user"]);
+            return openBlock(), createElementBlock("div", null, [
+              createVNode(CommentDialog, {
+                class: "floating-comment",
+                onReady: handleDialogReady,
+                onDialogExit: initialize,
+                style: normalizeStyle(getCommentPosition(floatingConversation)),
+                data: floatingConversation.conversation,
+                "current-document": __props.currentDocument,
+                user: unref(user)
+              }, null, 8, ["style", "data", "current-document", "user"])
+            ]);
           }), 256))
         ], 4)
       ], 512)) : createCommentVNode("", true);
     };
   }
 };
-const FloatingComments = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-0e8a08a9"]]);
+const FloatingComments = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-858cd0cf"]]);
 const _sfc_main$6 = {
   __name: "TextField",
   props: {
@@ -52138,94 +52135,92 @@ const _sfc_main = {
       document.removeEventListener("mousedown", handleDocumentMouseDown);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createBaseVNode("div", _hoisted_1, [
-          createBaseVNode("div", {
-            class: "layers",
-            ref_key: "layers",
-            ref: layers
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createBaseVNode("div", {
+          class: "layers",
+          ref_key: "layers",
+          ref: layers
+        }, [
+          toolsMenuPosition.value && !unref(getConfig)?.readOnly ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "tools",
+            style: normalizeStyle(toolsMenuPosition.value)
           }, [
-            toolsMenuPosition.value && !unref(getConfig)?.readOnly ? (openBlock(), createElementBlock("div", {
+            createBaseVNode("i", {
+              class: "fas fa-comment-alt-lines",
+              "data-id": "is-tool",
+              onClick: _cache[0] || (_cache[0] = withModifiers(($event) => handleToolClick("comments"), ["stop", "prevent"]))
+            })
+          ], 4)) : createCommentVNode("", true),
+          !unref(getConfig)?.readOnly && unref(selectionPosition) ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            style: normalizeStyle(unref(selectionPosition)),
+            class: "sd-highlight sd-initial-highlight"
+          }, null, 4)) : createCommentVNode("", true),
+          createBaseVNode("div", _hoisted_2, [
+            "hrbr-fields" in unref(modules) && layers.value ? (openBlock(), createBlock(HrbrFieldsLayer, {
               key: 0,
-              class: "tools",
-              style: normalizeStyle(toolsMenuPosition.value)
-            }, [
-              createBaseVNode("i", {
-                class: "fas fa-comment-alt-lines",
-                "data-id": "is-tool",
-                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => handleToolClick("comments"), ["stop", "prevent"]))
-              })
-            ], 4)) : createCommentVNode("", true),
-            !unref(getConfig)?.readOnly && unref(selectionPosition) ? (openBlock(), createElementBlock("div", {
+              fields: unref(modules)["hrbr-fields"],
+              class: "comments-layer",
+              style: { "z-index": "5", "background-color": "blue" },
+              ref_key: "hrbrFieldsLayer",
+              ref: hrbrFieldsLayer
+            }, null, 8, ["fields"])) : createCommentVNode("", true),
+            unref(isReady) && "comments" in unref(modules) && layers.value ? (openBlock(), createBlock(CommentsLayer, {
               key: 1,
-              style: normalizeStyle(unref(selectionPosition)),
-              class: "sd-highlight sd-initial-highlight"
-            }, null, 4)) : createCommentVNode("", true),
-            createBaseVNode("div", _hoisted_2, [
-              "hrbr-fields" in unref(modules) && layers.value ? (openBlock(), createBlock(HrbrFieldsLayer, {
-                key: 0,
-                fields: unref(modules)["hrbr-fields"],
-                class: "comments-layer",
-                style: { "z-index": "5", "background-color": "blue" },
-                ref_key: "hrbrFieldsLayer",
-                ref: hrbrFieldsLayer
-              }, null, 8, ["fields"])) : createCommentVNode("", true),
-              unref(isReady) && "comments" in unref(modules) && layers.value ? (openBlock(), createBlock(CommentsLayer, {
-                key: 1,
-                class: "comments-layer",
-                style: { "z-index": "3" },
-                ref_key: "commentsLayer",
-                ref: commentsLayer,
-                parent: layers.value,
-                user: unref(user),
-                onHighlightClick: handleHighlightClick
-              }, null, 8, ["parent", "user"])) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(documents), (doc2) => {
-                return openBlock(), createElementBlock("div", {
-                  class: "sub-document",
-                  ref_for: true,
-                  ref_key: "documentContainers",
-                  ref: documentContainers
-                }, [
-                  doc2.type === "pdf" ? (openBlock(), createBlock(_sfc_main$c, {
-                    key: 0,
-                    "document-data": doc2,
-                    onSelectionChange: handleSelectionChange,
-                    onSelectionDrag: handleSelectionDrag,
-                    onSelectionDragEnd: handleSelectionDragEnd,
-                    onReady: handlePdfReady,
-                    onPageLoaded: unref(handlePageReady)
-                  }, null, 8, ["document-data", "onPageLoaded"])) : createCommentVNode("", true),
-                  doc2.type === "docx" ? (openBlock(), createBlock(DocumentEditor, {
-                    key: 1,
-                    "document-data": doc2,
-                    onReady: handlePdfReady
-                  }, null, 8, ["document-data"])) : createCommentVNode("", true)
-                ], 512);
-              }), 256))
-            ])
-          ], 512),
-          (unref(pendingComment) || unref(documentsWithConverations).length) && layers.value && unref(isReady) ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            unref(pendingComment) ? (openBlock(), createBlock(CommentDialog, {
-              key: 0,
-              data: unref(pendingComment),
-              "current-document": unref(getDocument2)(unref(pendingComment).documentId),
+              class: "comments-layer",
+              style: { "z-index": "3" },
+              ref_key: "commentsLayer",
+              ref: commentsLayer,
+              parent: layers.value,
               user: unref(user),
-              parent: layers.value
-            }, null, 8, ["data", "current-document", "user", "parent"])) : createCommentVNode("", true),
-            (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(documentsWithConverations), (doc2) => {
-              return openBlock(), createBlock(FloatingComments, {
-                parent: layers.value,
-                "current-document": doc2
-              }, null, 8, ["parent", "current-document"]);
+              onHighlightClick: handleHighlightClick
+            }, null, 8, ["parent", "user"])) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(documents), (doc2) => {
+              return openBlock(), createElementBlock("div", {
+                class: "sub-document",
+                ref_for: true,
+                ref_key: "documentContainers",
+                ref: documentContainers
+              }, [
+                doc2.type === "pdf" ? (openBlock(), createBlock(_sfc_main$c, {
+                  key: 0,
+                  "document-data": doc2,
+                  onSelectionChange: handleSelectionChange,
+                  onSelectionDrag: handleSelectionDrag,
+                  onSelectionDragEnd: handleSelectionDragEnd,
+                  onReady: handlePdfReady,
+                  onPageLoaded: unref(handlePageReady)
+                }, null, 8, ["document-data", "onPageLoaded"])) : createCommentVNode("", true),
+                doc2.type === "docx" ? (openBlock(), createBlock(DocumentEditor, {
+                  key: 1,
+                  "document-data": doc2,
+                  onReady: handlePdfReady
+                }, null, 8, ["document-data"])) : createCommentVNode("", true)
+              ], 512);
             }), 256))
-          ])) : createCommentVNode("", true)
-        ])
+          ])
+        ], 512),
+        (unref(pendingComment) || unref(documentsWithConverations).length) && layers.value && unref(isReady) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          unref(pendingComment) ? (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),
+          (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(documentsWithConverations), (doc2) => {
+            return openBlock(), createBlock(FloatingComments, {
+              parent: layers.value,
+              "current-document": doc2
+            }, null, 8, ["parent", "current-document"]);
+          }), 256))
+        ])) : createCommentVNode("", true)
       ]);
     };
   }
 };
-const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-014ab368"]]);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-49e265f8"]]);
 const createMyApp = () => {
   const app = createApp(App);
   const pinia = createPinia();