@harbour-enterprises/superdoc 1.0.0-alpha.64 → 1.0.0-alpha.66

package/dist/style.css

@@ -72,10 +72,6 @@ body {
 .superdoc {
   display: flex;
 }
-.superdoc .ProseMirror p {
-  margin: 0;
-  padding: 0;
-}
 
 .superdoc-field {
   border-radius: 8px;
@@ -167,6 +163,21 @@ body {
 .input-active {
   border: 1px solid #1355FF !important;
 }
+
+/* li,ol,ul {
+  margin: 0;
+  padding: 0;
+} */
+.custom-list-item {
+  list-style-type: none;
+}
+.custom-list-item::before {
+  margin-right: 0.5em;
+  content: attr(data-bullet-type);
+}
+.custom-list-item p {
+  display: inline;
+}
 .open-link-icon[data-v-68133520] {
   margin-left: 10px;
   width: 30px;
@@ -309,7 +320,7 @@ body {
   transition: all 0.2s ease;
 }
 
-.option-grid-ctn[data-v-d7e1f60b] {
+.option-grid-ctn[data-v-91b0a068] {
   display: flex;
   flex-direction: column;
   padding: 5px;
@@ -317,11 +328,11 @@ body {
   background-color: #fff;
   z-index: 3;
 }
-.option-row[data-v-d7e1f60b] {
+.option-row[data-v-91b0a068] {
   display: flex;
   flex-direction: row;
 }
-.option[data-v-d7e1f60b] {
+.option[data-v-91b0a068] {
   border-radius: 50%;
   cursor: pointer;
   padding: 3px;
@@ -330,20 +341,20 @@ body {
   justify-content: center;
   position: relative;
 }
-.option[data-v-d7e1f60b]:hover {
+.option[data-v-91b0a068]:hover {
   background-color: #DBDBDB;
 }
-.active-check[data-v-d7e1f60b] {
+.active-check[data-v-91b0a068] {
   position: absolute;
 }
 
-.alignment-buttons[data-v-a6ab9011] {
+.alignment-buttons[data-v-888328d5] {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 8px;
 }
-.button-icon[data-v-a6ab9011] {
+.button-icon[data-v-888328d5] {
   cursor: pointer;
   padding: 12px;
   font-size: 16px;
@@ -354,7 +365,7 @@ body {
   justify-content: center;
   align-items: center;
 }
-.button-icon[data-v-a6ab9011]:hover {
+.button-icon[data-v-888328d5]:hover {
   background-color: #d8dee5;
 }
 
@@ -431,19 +442,17 @@ body {
   margin-top: -3px;
 }
 
-.toolbar-item[data-v-05264249] {
+.toolbar-item[data-v-9aaab741] {
   position: relative;
   z-index: 100;
-  margin: 0 1px;
   min-width: 30px;
+  margin: 0 1px;
 }
-.toolbar-button[data-v-05264249] {
-  padding: 0;
+.toolbar-button[data-v-9aaab741] {
+  padding: 5px;
   height: 32px;
   max-height: 32px;
   border-radius: 6px;
-  margin-top: 3.5px;
-  margin-bottom: 4px;
 
   overflow-y: visible;
   display: flex;
@@ -455,17 +464,14 @@ body {
   user-select: none;
   position: relative;
 }
-.dropdown-caret[data-v-05264249] {
-  margin-right: 5px;
-}
-.toolbar-button[data-v-05264249]:hover {
+.toolbar-button[data-v-9aaab741]:hover {
   background-color: #DBDBDB;
 }
-.toolbar-button[data-v-05264249]:active,
-.active[data-v-05264249] {
+.toolbar-button[data-v-9aaab741]:active,
+.active[data-v-9aaab741] {
   background-color: #c8d0d8;
 }
-.button-label[data-v-05264249] {
+.button-label[data-v-9aaab741] {
   overflow: hidden;
   width: 100%;
   text-align: center;
@@ -474,38 +480,35 @@ body {
   font-weight: 400;
   font-size: 15px;
   margin: 5px;
-  text-align: center;
 }
-.toolbar-icon[data-v-05264249] {
-  margin: 0 5px;
+.toolbar-icon + .dropdown-caret[data-v-9aaab741] {
+  margin-left: 4px;
 }
-.left[data-v-05264249], .right[data-v-05264249] {
+.left[data-v-9aaab741], .right[data-v-9aaab741] {
   width: 50%;
   height: 100%;
   background-color: #DBDBDB;
   border-radius: 60%;
 }
-.has-inline-text-input[data-v-05264249]:hover {
+.has-inline-text-input[data-v-9aaab741]:hover {
   cursor: text;
 }
-.disabled[data-v-05264249] {
+.disabled[data-v-9aaab741] {
   cursor: default;
 }
-.disabled[data-v-05264249]:hover {
+.disabled[data-v-9aaab741]:hover {
   cursor: default;
   background-color: initial;
 }
-.disabled .toolbar-icon[data-v-05264249], .disabled .caret[data-v-05264249], .disabled .button-label[data-v-05264249] {
+.disabled .toolbar-icon[data-v-9aaab741], .disabled .caret[data-v-9aaab741], .disabled .button-label[data-v-9aaab741] {
   opacity: .35;
 }
-.caret[data-v-05264249] {
+.caret[data-v-9aaab741] {
   font-size: 1em;
   padding-left: 2px;
   padding-right: 2px;
 }
-.button-text-input[data-v-05264249] {
-  border: none;
-  outline: none;
+.button-text-input[data-v-9aaab741] {
   border-radius: 4px;
   text-align: center;
   width: 30px;
@@ -517,16 +520,19 @@ body {
   outline: none;
   border: 1px solid #d8dee5;
 }
+@media (max-width: 1120px) {
+.doc-mode .button-label[data-v-9aaab741] {
+      display: none;
+}
+.doc-mode .toolbar-icon[data-v-9aaab741] {
+      margin-right: 5px;
+}
+}
 
-.toolbar-separator[data-v-c8577aaf] {
+.toolbar-separator[data-v-149293cd] {
   height: 32px;
-  /* padding-left: 12px;
-  padding-right: 12px; */
   border-radius: 6px;
-  margin-top: 3.5px;
-  margin-bottom: 4px;
   text-overflow: ellipsis;
-  overflow-y: visible;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -535,20 +541,47 @@ body {
   user-select: none;
   overflow: hidden;
 }
-.toolbar-separator .separator-inner[data-v-c8577aaf] {
+.toolbar-separator .separator-inner[data-v-149293cd] {
   width: 1.5px;
   height: 20px;
   background-color: #DBDBDB;
 }
-.toolbar-button[data-v-c8577aaf]:hover {
+.toolbar-button[data-v-149293cd]:hover {
   color: black;
   background-color: #d8dee5;
 }
-.toolbar-button[data-v-c8577aaf]:active,
-.active[data-v-c8577aaf] {
+.toolbar-button[data-v-149293cd]:active,
+.active[data-v-149293cd] {
   background-color: #c8d0d8;
 }
 
+.overflow-menu[data-v-7623b594] {
+  position: relative;
+}
+.overflow-menu_items[data-v-7623b594] {
+    position: absolute;
+    width: 200px;
+    top: calc(100% + 3px);
+    right: 0;
+    padding: 4px 8px;
+    background-color: #fff;
+    border-radius: 8px;
+    z-index: 100;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .25);
+}
+.superdoc-toolbar-overflow[data-v-7623b594] {
+  min-width: auto !important;
+  max-width: 200px;
+  flex-wrap: wrap;
+}
+@media (max-width: 300px) {
+.overflow-menu_items[data-v-7623b594] {
+    right: auto;
+    left: 0;
+    transform: translateX(-50%);
+}
+}
+
 .n-dropdown {
   border-radius: 8px;
   min-width: 80px;
@@ -558,50 +591,32 @@ body {
   font-size: 14px;
   border-radius: 8px !important;
 }
-.n-dropdown-option-body:hover::before,
-.n-dropdown-option-body:hover::after {
-  background-color: #d8dee5 !important;
+.n-dropdown-option-body:hover::before, .n-dropdown-option-body:hover::after {
+      background-color: #d8dee5 !important;
 }
 .toolbar-dropdown {
   cursor: pointer;
 }
 
-.button-group[data-v-e4a974a1] {
+.button-group[data-v-7282bacf] {
   display: flex;
 }
-@media (max-width: 700px) {
-.mobile[data-v-e4a974a1] {
-    display: initial;
-}
-}
-@media (min-width: 700px) and (max-width: 800px) {
-.mobile[data-v-e4a974a1] {
-    display: none;
-}
-.tablet[data-v-e4a974a1] {
-    display: initial;
-}
-}
-@media (min-width: 800px) {
-.mobile[data-v-e4a974a1] {
-    display: none;
-}
-.tablet[data-v-e4a974a1] {
-    display: none;
-}
-.desktop[data-v-e4a974a1] {
-    display: initial;
-}
-}
 
-.superdoc-toolbar[data-v-b18849d0] {
+.superdoc-toolbar[data-v-d6286fd6] {
   display: flex;
   width: 100%;
-  height: 39px;
   justify-content: space-between;
+  padding: 4px 16px;
+}
+@media (max-width: 1120px) {
+.superdoc-toolbar-group-side[data-v-d6286fd6] {
+    min-width: auto !important;
+}
+}
+@media (max-width: 768px)  {
+.superdoc-toolbar[data-v-d6286fd6] {
+    padding: 4px 10px;
 }
-.superdoc-toolbar-group-side[data-v-b18849d0] {
-  width: 200px;
 }
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
 .super-editor[data-v-15fe97d5] {
@@ -18699,7 +18714,7 @@ readers do not read off random characters that represent icons */
   border:2px solid transparent;
 }
 .superdoc-viewer{
-  
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -18731,23 +18746,23 @@ readers do not read off random characters that represent icons */
     mix-blend-mode: difference;
 }
 
-.comment-doc[data-v-5e1817c5] {
+.comment-doc[data-v-4783d332] {
   position: relative;
 }
-.comments-layer[data-v-5e1817c5] {
+.comments-layer[data-v-4783d332] {
   position: relative;
 }
-.comment-anchor[data-v-5e1817c5] {
+.comment-anchor[data-v-4783d332] {
   position: absolute;
   cursor: pointer;
   z-index: 3;
   border-radius: 4px;
   transition: background-color 250ms ease;
 }
-.bypass[data-v-5e1817c5] {
+.bypass[data-v-4783d332] {
   display: none;
 }
-.comments-container[data-v-5e1817c5] {
+.comments-container[data-v-4783d332] {
   /* pointer-events: none;  */
 }
 
@@ -18800,23 +18815,23 @@ span[data-v-36fffb56] {
   background-color: #F3F3F5;
 }
 
-.change-type[data-v-464575a4] {
+.change-type[data-v-ecf623de] {
   font-style: italic;
   font-weight: 600;
 }
-.comment-separator[data-v-464575a4] {
+.comment-separator[data-v-ecf623de] {
   background-color: #DBDBDB;
   height: 1px;
   width: 100%;
   margin: 15px 0;
 }
-.existing-internal-input[data-v-464575a4] {
+.existing-internal-input[data-v-ecf623de] {
   margin-bottom: 10px;
 }
-.initial-internal-dropdown[data-v-464575a4] {
+.initial-internal-dropdown[data-v-ecf623de] {
   margin-top: 10px;
 }
-.comments-dialog[data-v-464575a4] {
+.comments-dialog[data-v-ecf623de] {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -18830,14 +18845,14 @@ span[data-v-36fffb56] {
   z-index: 5;
   width: 300px;
 }
-.is-active[data-v-464575a4] {
+.is-active[data-v-ecf623de] {
   z-index: 10;
 }
-.overflow-menu[data-v-464575a4] {
+.overflow-menu[data-v-ecf623de] {
   flex-shrink: 1;
   display: flex;
 }
-.overflow-menu i[data-v-464575a4] {
+.overflow-menu__icon[data-v-ecf623de] {
   width: 20px;
   height: 20px;
   display: flex;
@@ -18846,77 +18861,84 @@ span[data-v-36fffb56] {
   border-radius: 50%;
   cursor: pointer;
   transition: all 250ms ease;
+  padding: 3px;
   margin-left: 2px;
   cursor: pointer;
 }
-.overflow-menu i[data-v-464575a4]:hover {
+.overflow-menu__icon[data-v-ecf623de]:hover {
   background-color: #DBDBDB;
 }
-.comment-header[data-v-464575a4] {
+.overflow-menu__icon[data-v-ecf623de] svg {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+  fill: currentColor;
+}
+.comment-header[data-v-ecf623de] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 10px;
 }
-.comment-header-left[data-v-464575a4] {
+.comment-header-left[data-v-ecf623de] {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.avatar[data-v-464575a4] {
+.avatar[data-v-ecf623de] {
   margin-right: 10px;
 }
-.user-info[data-v-464575a4] {
+.user-info[data-v-ecf623de] {
   display: flex;
   flex-direction: column;
   font-size: 12px;
 }
-.user-name[data-v-464575a4] {
+.user-name[data-v-ecf623de] {
   font-weight: 600;
   line-height: 1.2em;
 }
-.user-timestamp[data-v-464575a4] {
+.user-timestamp[data-v-ecf623de] {
   line-height: 1.2em;
   font-size: 12px;
   color: #999;
 }
-.input-section[data-v-464575a4] {
+.input-section[data-v-ecf623de] {
   margin-top: 10px;
 }
-.sd-button[data-v-464575a4] {
+.sd-button[data-v-ecf623de] {
   font-size: 12px;
   margin-left: 5px;
 }
-.comment[data-v-464575a4] {
+.comment[data-v-ecf623de] {
   font-size: 13px;
   margin: 10px 0;
 }
-.conversation-item[data-v-464575a4] {
+.conversation-item[data-v-ecf623de] {
   border-bottom: 1px solid #DBDBDB;
   padding-bottom: 10px;
 }
-.comment-footer[data-v-464575a4] {
+.comment-footer[data-v-ecf623de] {
   margin: 5px 0 5px;
   display: flex;
   justify-content: flex-end;
   width: 100%;
 }
-.internal-dropdown[data-v-464575a4] {
+.internal-dropdown[data-v-ecf623de] {
   display: inline-block;
 }
-.comment-editing[data-v-464575a4] {
+.comment-editing[data-v-ecf623de] {
   padding-bottom: 10px;
 }
-.comment-editing button[data-v-464575a4] {
+.comment-editing button[data-v-ecf623de] {
   margin-left: 5px;
 }
-.comment-entry[data-v-464575a4] {
+.comment-entry[data-v-ecf623de] {
   border-radius: 8px;
   border: 1px solid #DBDBDB !important;
   width: 100%;
   transition: all 250ms ease;
 }
-.tracked-change[data-v-464575a4] {
+.tracked-change[data-v-ecf623de] {
   margin: 0;
 }
 
@@ -18974,7 +18996,7 @@ img[data-v-718ded21] {
   border: 2px solid #B015B3;
 }
 
-.super-editor {
+.super-editor-in-viewer {
   --header-height: 36px;
 
   font-family: sans-serif;
@@ -18983,7 +19005,7 @@ img[data-v-718ded21] {
   height: 100%;
   position: relative;
 }
-.super-editor__header {
+.super-editor-in-viewer__header {
     display: flex;
     align-items: center;
     height: var(--header-height);
@@ -18991,39 +19013,39 @@ img[data-v-718ded21] {
     background: #fff;
     box-shadow: rgb(0 0 0 / 10%) 0px -1px 0px 0px inset;
 }
-.super-editor__header .signer-redlining__yes-no-ctn {
+.super-editor-in-viewer__header .signer-redlining__yes-no-ctn {
       margin-top: 0;
 }
-.super-editor__header-zoom-btns {
+.super-editor-in-viewer__header-zoom-btns {
     display: flex;
     align-items: center;
     gap: 10px;
 }
-.super-editor__zoom-btn {
+.super-editor-in-viewer__zoom-btn {
     font-size: 18px;
     color: #363636;
     cursor: pointer;
     transition: all 0.2s;
 }
-.super-editor__zoom-btn--active,
-    .super-editor__zoom-btn:hover {
+.super-editor-in-viewer__zoom-btn--active,
+    .super-editor-in-viewer__zoom-btn:hover {
       color: var(--hrbr-primary-color-active);
 }
-.super-editor__zoom-btn--disabled {
+.super-editor-in-viewer__zoom-btn--disabled {
       color: #848484;
       pointer-events: none;
 }
-.super-editor__zoom-btn i {
+.super-editor-in-viewer__zoom-btn i {
       display: block;
 }
-.super-editor__main {
+.super-editor-in-viewer__main {
     position: absolute;
     top: var(--header-height);
     left: 0;
     right: 0;
     bottom: 0;
 }
-.super-editor__document {
+.super-editor-in-viewer__document {
     position: absolute;
     top: 0;
     left: 0;
@@ -19033,15 +19055,15 @@ img[data-v-718ded21] {
     overflow: auto;
     background: #fff;
 }
-.super-editor__document-wrapper {
+.super-editor-in-viewer__document-wrapper {
     width: 100%;
     height: auto;
 }
-.super-editor__content-container {
+.super-editor-in-viewer__content-container {
     max-height: 0;
     overflow: visible;
 }
-.super-editor__content {
+.super-editor-in-viewer__content {
     min-width: 800px;
     padding: 38px 75px 75px;
     /* opacity: 0;
@@ -19049,7 +19071,7 @@ img[data-v-718ded21] {
     transition: opacity 0.3s ease, visibility 0.3s ease;
     transform-origin: 0 0;
 }
-.super-editor__content--visible {
+.super-editor-in-viewer__content--visible {
     opacity: 1;
     visibility: visible;
 }
@@ -19059,74 +19081,74 @@ img[data-v-718ded21] {
 }
 }
 
-.selection-layer[data-v-88384bc4] {
+.selection-layer[data-v-f8be1585] {
   position: absolute;
   min-height: 100%;
   min-width: 100%;
   z-index: 10;
   pointer-events: none;
 }
-.temp-selection[data-v-88384bc4] {
+.temp-selection[data-v-f8be1585] {
   position: absolute;
 }
 /* Right sidebar drawer */
-.right-sidebar[data-v-88384bc4] {
+.right-sidebar[data-v-f8be1585] {
   width: 320px;
   padding: 0 10px;
   min-height: 100%;
   position: relative;
   z-index: 100;
 }
-.fa-tool-icon[data-v-88384bc4] {
+.fa-tool-icon[data-v-f8be1585] {
   cursor: pointer;
 }
 
 /* General Styles */
-.box-sizing[data-v-88384bc4], .layers[data-v-88384bc4] {
+.box-sizing[data-v-f8be1585], .layers[data-v-f8be1585] {
   box-sizing: border-box;
 }
-.cursor-pointer[data-v-88384bc4], .tools .tool-icon[data-v-88384bc4], .toolbar-item[data-v-88384bc4] {
+.cursor-pointer[data-v-f8be1585], .tools .tool-icon[data-v-f8be1585], .toolbar-item[data-v-f8be1585] {
   cursor: pointer;
 }
-.flex[data-v-88384bc4] {
+.flex[data-v-f8be1585] {
   display: flex;
 }
-.flex-column[data-v-88384bc4] {
+.flex-column[data-v-f8be1585] {
   flex-direction: column;
 }
-.flex-center[data-v-88384bc4] {
+.flex-center[data-v-f8be1585] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 /* Layer Styles */
-.comments-layer[data-v-88384bc4] {
+.comments-layer[data-v-f8be1585] {
   position: absolute;
   top: 0;
   height: 100%;
   position: relative;
 }
-.layers[data-v-88384bc4] {
+.layers[data-v-f8be1585] {
   position: relative;
 }
 
 /* Document Styles */
-.docx[data-v-88384bc4] {
+.docx[data-v-f8be1585] {
   border: 1px solid #DFDFDF;
   pointer-events: auto;
 }
-.sub-document[data-v-88384bc4] {
+.sub-document[data-v-f8be1585] {
   position: relative;
 }
 
 /* Toolbar Styles */
-.toolbar[data-v-88384bc4] {
+.toolbar[data-v-f8be1585] {
   height: 25px;
   background-color: #fff;
   margin-bottom: 5px;
 }
-.toolbar-item[data-v-88384bc4] {
+.toolbar-item[data-v-f8be1585] {
   width: 20px;
   height: 20px;
   border-radius: 8px;
@@ -19138,12 +19160,12 @@ img[data-v-718ded21] {
   justify-content: center;
   transition: all 250ms ease;
 }
-.toolbar-item[data-v-88384bc4]:hover {
+.toolbar-item[data-v-f8be1585]:hover {
   background-color: #DBDBDB;
 }
 
 /* Tools Styles */
-.tools[data-v-88384bc4] {
+.tools[data-v-f8be1585] {
   position: absolute;
   width: 50px;
   height: 50px;
@@ -19154,19 +19176,35 @@ img[data-v-718ded21] {
   align-items: center;
   justify-content: center;
 }
-.tools .tool-icon[data-v-88384bc4] {
+.tools .tool-icon[data-v-f8be1585] {
   font-size: 20px;
   border-radius: 12px;
   border: none;
   outline: none;
   background-color: #DBDBDB;
+  cursor: pointer;
+}
+.tools__icon[data-v-f8be1585] svg {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+  fill: currentColor;
+}
+.layers[data-v-f8be1585] {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+.document[data-v-f8be1585] {
+  position: relative;
 }
 @media (max-width: 768px) {
-.sub-document[data-v-88384bc4] {
+.sub-document[data-v-f8be1585] {
     max-width: 100%;
     overflow: hidden;
 }
-.right-sidebar[data-v-88384bc4] {
+.right-sidebar[data-v-f8be1585] {
     padding: 10px;
     width: 55px;
     position: relative;