@harbour-enterprises/superdoc 0.14.0-next.2 → 0.14.0-next.21

package/dist/super-editor/style.css

@@ -64,20 +64,20 @@
   width: 16px;
 }
 
-.toolbar-item[data-v-2518a3d1] {
+.toolbar-item[data-v-8ac39508] {
   position: relative;
   z-index: 1;
   min-width: 30px;
   margin: 0 1px;
 }
-.visually-hidden[data-v-2518a3d1] {
+.visually-hidden[data-v-8ac39508] {
   position: absolute;
   left: -9999px;
   height: 1px;
   width: 1px;
   overflow: hidden;
 }
-.toolbar-button[data-v-2518a3d1] {
+.toolbar-button[data-v-8ac39508] {
   padding: 5px;
   height: 32px;
   max-height: 32px;
@@ -93,21 +93,21 @@
   position: relative;
   box-sizing: border-box;
 }
-.toolbar-button[data-v-2518a3d1]:hover {
+.toolbar-button[data-v-8ac39508]:hover {
   background-color: #dbdbdb;
 }
-.toolbar-button:hover .toolbar-icon.high-contrast[data-v-2518a3d1] {
+.toolbar-button:hover .toolbar-icon.high-contrast[data-v-8ac39508] {
       color: #fff;
 }
-.toolbar-button:hover.high-contrast[data-v-2518a3d1] {
+.toolbar-button:hover.high-contrast[data-v-8ac39508] {
     background-color: #000;
     color: #fff;
 }
-.toolbar-button[data-v-2518a3d1]:active,
-.active[data-v-2518a3d1] {
+.toolbar-button[data-v-8ac39508]:active,
+.active[data-v-8ac39508] {
   background-color: #c8d0d8;
 }
-.button-label[data-v-2518a3d1] {
+.button-label[data-v-8ac39508] {
   overflow: hidden;
   width: 100%;
   text-align: center;
@@ -117,37 +117,37 @@
   font-size: 15px;
   margin: 5px;
 }
-.toolbar-icon+.dropdown-caret[data-v-2518a3d1] {
+.toolbar-icon+.dropdown-caret[data-v-8ac39508] {
   margin-left: 4px;
 }
-.left[data-v-2518a3d1],
-.right[data-v-2518a3d1] {
+.left[data-v-8ac39508],
+.right[data-v-8ac39508] {
   width: 50%;
   height: 100%;
   background-color: #dbdbdb;
   border-radius: 60%;
 }
-.has-inline-text-input[data-v-2518a3d1]:hover {
+.has-inline-text-input[data-v-8ac39508]:hover {
   cursor: text;
 }
-.disabled[data-v-2518a3d1] {
+.disabled[data-v-8ac39508] {
   cursor: default;
 }
-.disabled[data-v-2518a3d1]:hover {
+.disabled[data-v-8ac39508]:hover {
   cursor: default;
   background-color: initial;
 }
-.disabled .toolbar-icon[data-v-2518a3d1],
-.disabled .caret[data-v-2518a3d1],
-.disabled .button-label[data-v-2518a3d1] {
+.disabled .toolbar-icon[data-v-8ac39508],
+.disabled .caret[data-v-8ac39508],
+.disabled .button-label[data-v-8ac39508] {
   opacity: 0.35;
 }
-.caret[data-v-2518a3d1] {
+.caret[data-v-8ac39508] {
   font-size: 1em;
   padding-left: 2px;
   padding-right: 2px;
 }
-.button-text-input[data-v-2518a3d1] {
+.button-text-input[data-v-8ac39508] {
   color: #47484a;
   border-radius: 4px;
   text-align: center;
@@ -161,13 +161,13 @@
   border: 1px solid #d8dee5;
   box-sizing: border-box;
 }
-.button-text-input.high-contrast[data-v-2518a3d1] {
+.button-text-input.high-contrast[data-v-8ac39508] {
     background-color: #fff;
 }
-.button-text-input[data-v-2518a3d1]::placeholder {
+.button-text-input[data-v-8ac39508]::placeholder {
   color: #47484a;
 }
-.dropdown-caret[data-v-2518a3d1] {
+.dropdown-caret[data-v-8ac39508] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -177,16 +177,16 @@
   height: 10px;
 }
 @media (max-width: 1280px) {
-.toolbar-item--doc-mode .button-label[data-v-2518a3d1] {
+.toolbar-item--doc-mode .button-label[data-v-8ac39508] {
     display: none;
 }
-.toolbar-item--doc-mode .toolbar-icon[data-v-2518a3d1] {
+.toolbar-item--doc-mode .toolbar-icon[data-v-8ac39508] {
     margin-right: 5px;
 }
-.toolbar-item--linked-styles[data-v-2518a3d1] {
+.toolbar-item--linked-styles[data-v-8ac39508] {
     width: auto !important;
 }
-.toolbar-item--linked-styles .button-label[data-v-2518a3d1] {
+.toolbar-item--linked-styles .button-label[data-v-8ac39508] {
     display: none;
 }
 }
@@ -267,7 +267,7 @@
   border-radius: 8px !important;
 }
 
-.button-group[data-v-d4f36abf] {
+.button-group[data-v-630d1841] {
   display: flex;
 }
 
@@ -291,12 +291,13 @@
 }
 
 /* Add isolation styles */
-.prosemirror-isolated[data-v-4cf86e1f] {
+.prosemirror-isolated[data-v-fa653ccf] {
   /* Make sure the component is above ProseMirror in z-index */
   z-index: 100;
   position: relative;
 }
-.ai-writer[data-v-4cf86e1f] {
+.ai-writer[data-v-fa653ccf] {
+  background-color: white;
   display: flex;
   flex-direction: column;
   width: 300px;
@@ -313,12 +314,12 @@
 }
 
 /* Chrome, Safari, and Opera */
-.ai-writer[data-v-4cf86e1f]::-webkit-scrollbar {
+.ai-writer[data-v-fa653ccf]::-webkit-scrollbar {
   display: none;
 }
 
 /* Replace .ai-editable with .ai-textarea */
-.ai-textarea[data-v-4cf86e1f] {
+.ai-textarea[data-v-fa653ccf] {
   padding-left: 8px;
   width: 100%;
   color: #47484a;
@@ -333,11 +334,11 @@
 }
 
 /* Add specific styles for textarea placeholder */
-.ai-textarea[data-v-4cf86e1f]::placeholder {
+.ai-textarea[data-v-fa653ccf]::placeholder {
   color: #666;
   font-weight: 400;
 }
-.ai-user-input-field[data-v-4cf86e1f] {
+.ai-user-input-field[data-v-fa653ccf] {
   line-height: 13px;
   display: flex;
   flex-direction: row;
@@ -347,27 +348,27 @@
   border-radius: 8px;
   margin-bottom: 10px;
 }
-.ai-textarea-icon[data-v-4cf86e1f] {
+.ai-textarea-icon[data-v-fa653ccf] {
   display: block;
   font-weight: 800;
   font-size: 14px;
   width: 16px;
   height: 16px;
 }
-.ai-textarea-icon svg[data-v-4cf86e1f] {
+.ai-textarea-icon svg[data-v-fa653ccf] {
   height: 16px;
   width: 16px;
 }
-.ai-textarea-icon.loading[data-v-4cf86e1f] {
-  animation: spin-4cf86e1f 2s linear infinite;
+.ai-textarea-icon.loading[data-v-fa653ccf] {
+  animation: spin-fa653ccf 2s linear infinite;
 }
-.loading i[data-v-4cf86e1f] {
+.loading i[data-v-fa653ccf] {
   display: flex;
 }
-.error[data-v-4cf86e1f] {
+.error[data-v-fa653ccf] {
   fill: #ed4337;
 }
-.ai-submit-button[data-v-4cf86e1f] {
+.ai-submit-button[data-v-fa653ccf] {
   border: none;
   padding: 0;
   margin: 0;
@@ -375,10 +376,10 @@
   display: flex;
   align-items: center;
 }
-.ai-submit-button[data-v-4cf86e1f]:hover {
+.ai-submit-button[data-v-fa653ccf]:hover {
   opacity: 0.8;
 }
-@keyframes spin-4cf86e1f {
+@keyframes spin-fa653ccf {
 from {
     transform: rotate(0deg);
 }
@@ -386,7 +387,7 @@ to {
     transform: rotate(360deg);
 }
 }
-.ai-loader[data-v-4cf86e1f] {
+.ai-loader[data-v-fa653ccf] {
   display: flex;
   height: 14px;
   justify-content: flex-end;
@@ -407,6 +408,9 @@ to {
   width: 100%;
   outline: none;
 }
+a {
+  text-decoration: auto;
+}
 /**
  * Basic ProseMirror styles.
  * https://github.com/ProseMirror/prosemirror-view/blob/master/style/prosemirror.css
@@ -449,24 +453,27 @@ to {
   padding: 0;
   display: inline-block;
 }
-.ProseMirror.header-footer-edit > p, .ProseMirror.header-footer-edit li, .ProseMirror.header-footer-edit span {
+/* TODO: This is going to be enabled again */
+/* .ProseMirror.header-footer-edit {
+  > p, li, span {
     color: #7e7e7e !important;
-  }
-.ProseMirror.header-footer-edit > p:before, .ProseMirror.header-footer-edit > p:after, .ProseMirror.header-footer-edit li:before, .ProseMirror.header-footer-edit li:after, .ProseMirror.header-footer-edit span:before, .ProseMirror.header-footer-edit span:after {
+    &:before, &:after {
       color: #7e7e7e !important;
     }
-.ProseMirror.header-footer-edit > p img, .ProseMirror.header-footer-edit > p a, .ProseMirror.header-footer-edit li img, .ProseMirror.header-footer-edit li a, .ProseMirror.header-footer-edit span img, .ProseMirror.header-footer-edit span a {
+    img, a {
       opacity: .5;
     }
-.ProseMirror.header-footer-edit .pagination-break-wrapper {
-    color: initial !important;
   }
-.ProseMirror.header-footer-edit .pagination-break-wrapper span {
+  .pagination-break-wrapper {
+    color: initial !important;
+    span {
       color: initial !important;
     }
-.ProseMirror.header-footer-edit .pagination-break-wrapper img, .ProseMirror.header-footer-edit .pagination-break-wrapper a {
+    img, a {
       opacity: 1;
     }
+  }
+} */
 /**
  * Hide marker for indented lists.
  * If a list-item contains a list but doesn't contain a "p" tag with text.
@@ -873,10 +880,16 @@ on the right if it is inside shape textbox.
 .pagination-section-footer img[contenteditable="false"] {
   pointer-events: none;
 }
-.pagination-section-header div[contenteditable="false"]:not([documentmode="viewing"]),
+.pagination-break-wrapper {
+  font-weight: normal;
+  font-style: normal;
+  color: initial;
+}
+/* TODO: This is going to be enabled again */
+/* .pagination-section-header div[contenteditable="false"]:not([documentmode="viewing"]),
 .pagination-section-footer div[contenteditable="false"]:not([documentmode="viewing"]) {
   opacity: 0.5;
-}
+} */
 .sd-editor-popover {
   background-color: #fff;
   border-radius: 8px;
@@ -1050,171 +1063,6 @@ on the right if it is inside shape textbox.
         color: #fff;
 }
 
-.link-input-ctn[data-v-64aa14bc] {
-  width: 320px;
-  display: flex;
-  flex-direction: column;
-  padding: 1em;
-  border-radius: 5px;
-  background-color: #fff;
-  box-sizing: border-box;
-}
-.link-input-ctn[data-v-64aa14bc] svg {
-    width: 100%;
-      height: 100%;
-      display: block;
-      fill: currentColor;
-}
-.link-input-ctn .input-row[data-v-64aa14bc] {
-      align-content: baseline;
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-}
-.link-input-ctn .input-row input[data-v-64aa14bc] {
-        font-size: 13px;
-        flex-grow: 1;
-        padding: 10px;
-        border-radius: 8px;
-        padding-left: 32px;
-        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
-        color: #666;
-        border: 1px solid #ddd;
-        box-sizing: border-box;
-}
-.link-input-ctn .input-row input[data-v-64aa14bc]:active,
-        .link-input-ctn .input-row input[data-v-64aa14bc]:focus {
-          outline: none;
-          border: 1px solid #1355ff;
-}
-.link-input-ctn .input-icon[data-v-64aa14bc] {
-  position: absolute;
-  transform: rotate(45deg);
-  left: 25px;
-  width: auto;
-  height: 12px;
-  color: #999;
-  pointer-events: none;
-}
-.link-input-ctn.high-contrast .input-icon[data-v-64aa14bc] {
-    color: #000;
-}
-.link-input-ctn.high-contrast .input-row input[data-v-64aa14bc] {
-    color: #000;
-    border-color: #000;
-}
-.open-link-icon[data-v-64aa14bc] {
-  margin-left: 10px;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  border: 1px solid transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-.open-link-icon[data-v-64aa14bc]:hover {
-  color: #1355ff;
-  background-color: white;
-  border: 1px solid #dbdbdb;
-}
-.open-link-icon[data-v-64aa14bc] svg {
-  width: 15px;
-  height: 15px;
-}
-.disabled[data-v-64aa14bc] {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-.link-buttons[data-v-64aa14bc] {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
-}
-.remove-btn__icon[data-v-64aa14bc] {
-  display: inline-flex;
-  width: 13px;
-  height: 13px;
-  flex-shrink: 0;
-  margin-right: 4px;
-}
-.link-buttons button[data-v-64aa14bc] {
-  margin-left: 5px;
-}
-.disable-btn[data-v-64aa14bc] {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-.go-to-anchor a[data-v-64aa14bc] {
-  font-size: 14px;
-  text-decoration: underline;
-}
-.clickable[data-v-64aa14bc] {
-  cursor: pointer;
-}
-.link-title[data-v-64aa14bc] {
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-.hasBottomMargin[data-v-64aa14bc] {
-  margin-bottom: 1em;
-}
-.remove-btn[data-v-64aa14bc] {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 16px;
-  border-radius: 8px;
-  outline: none;
-  background-color: white;
-  color: black;
-  font-weight: 400;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: 1px solid #ebebeb;
-  box-sizing: border-box;
-}
-.remove-btn[data-v-64aa14bc]:hover {
-  background-color: #dbdbdb;
-}
-.submit-btn[data-v-64aa14bc] {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 16px;
-  border-radius: 8px;
-  outline: none;
-  border: none;
-  background-color: #1355ff;
-  color: white;
-  font-weight: 400;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-}
-
-/* &.high-contrast {
-    background-color: black;
-  } */
-.submit-btn[data-v-64aa14bc]:hover {
-    background-color: #0d47c1;
-}
-.error[data-v-64aa14bc] {
-  border-color: red !important;
-  background-color: #ff00001a;
-}
-.submit[data-v-64aa14bc] {
-  cursor: pointer;
-}
-
 .document-mode[data-v-7febe4d9]  {
   display: flex;
   flex-direction: column;
@@ -1423,6 +1271,214 @@ on the right if it is inside shape textbox.
     padding: 0px 8px 2px;
 }
 
+.search-input-ctn[data-v-af870fbd] {
+  padding: 10px;
+  border-radius: 5px;
+}
+.search-input-ctn .search-input[data-v-af870fbd] {
+    min-width: 200px;
+    font-size: 13px;
+    flex-grow: 1;
+    padding: 10px;
+    border-radius: 8px;
+    color: #666;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
+}
+.search-input-ctn .search-input[data-v-af870fbd]:active, .search-input-ctn .search-input[data-v-af870fbd]:focus {
+      outline: none;
+      border: 1px solid #1355ff;
+}
+.search-input-ctn .row[data-v-af870fbd] {
+    display: flex;
+}
+.search-input-ctn .row.submit[data-v-af870fbd] {
+      margin-top: 10px;
+      flex-direction: row-reverse;
+}
+.search-input-ctn .submit-btn[data-v-af870fbd] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 16px;
+    border-radius: 8px;
+    outline: none;
+    border: none;
+    background-color: #1355ff;
+    color: white;
+    font-weight: 400;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+}
+
+.link-input-ctn[data-v-2632571a] {
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  border-radius: 5px;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+.link-input-ctn[data-v-2632571a] svg {
+    width: 100%;
+      height: 100%;
+      display: block;
+      fill: currentColor;
+}
+.link-input-ctn .input-row[data-v-2632571a] {
+      align-content: baseline;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+}
+.link-input-ctn .input-row input[data-v-2632571a] {
+        font-size: 13px;
+        flex-grow: 1;
+        padding: 10px;
+        border-radius: 8px;
+        padding-left: 32px;
+        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+        color: #666;
+        border: 1px solid #ddd;
+        box-sizing: border-box;
+}
+.link-input-ctn .input-row input[data-v-2632571a]:active,
+        .link-input-ctn .input-row input[data-v-2632571a]:focus {
+          outline: none;
+          border: 1px solid #1355ff;
+}
+.link-input-ctn .input-icon[data-v-2632571a] {
+  position: absolute;
+  transform: rotate(45deg);
+  left: 25px;
+  width: auto;
+  height: 12px;
+  color: #999;
+  pointer-events: none;
+}
+.link-input-ctn.high-contrast .input-icon[data-v-2632571a] {
+    color: #000;
+}
+.link-input-ctn.high-contrast .input-row input[data-v-2632571a] {
+    color: #000;
+    border-color: #000;
+}
+.open-link-icon[data-v-2632571a] {
+  margin-left: 10px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+.open-link-icon[data-v-2632571a]:hover {
+  color: #1355ff;
+  background-color: white;
+  border: 1px solid #dbdbdb;
+}
+.open-link-icon[data-v-2632571a] svg {
+  width: 15px;
+  height: 15px;
+}
+.disabled[data-v-2632571a] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.link-buttons[data-v-2632571a] {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+.remove-btn__icon[data-v-2632571a] {
+  display: inline-flex;
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+.link-buttons button[data-v-2632571a] {
+  margin-left: 5px;
+}
+.disable-btn[data-v-2632571a] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.go-to-anchor a[data-v-2632571a] {
+  font-size: 14px;
+  text-decoration: underline;
+}
+.clickable[data-v-2632571a] {
+  cursor: pointer;
+}
+.link-title[data-v-2632571a] {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.hasBottomMargin[data-v-2632571a] {
+  margin-bottom: 1em;
+}
+.remove-btn[data-v-2632571a] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 16px;
+  border-radius: 8px;
+  outline: none;
+  background-color: white;
+  color: black;
+  font-weight: 400;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid #ebebeb;
+  box-sizing: border-box;
+}
+.remove-btn[data-v-2632571a]:hover {
+  background-color: #dbdbdb;
+}
+.submit-btn[data-v-2632571a] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 16px;
+  border-radius: 8px;
+  outline: none;
+  border: none;
+  background-color: #1355ff;
+  color: white;
+  font-weight: 400;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+/* &.high-contrast {
+    background-color: black;
+  } */
+.submit-btn[data-v-2632571a]:hover {
+    background-color: #0d47c1;
+}
+.error[data-v-2632571a] {
+  border-color: red !important;
+  background-color: #ff00001a;
+}
+.submit[data-v-2632571a] {
+  cursor: pointer;
+}
+
 .toolbar-table-actions[data-v-f82e859a] {
   display: flex;
   flex-direction: column;
@@ -1487,47 +1543,85 @@ on the right if it is inside shape textbox.
   white-space: nowrap;
 }
 
-.search-input-ctn[data-v-af870fbd] {
-  padding: 10px;
-  border-radius: 5px;
+.slash-menu {
+  position: absolute;
+  z-index: 50;
+  width: 175px;
+  color: #47484a;
+  background: white;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
+  margin-top: 0.5rem;
+  font-size: 12px;
 }
-.search-input-ctn .search-input[data-v-af870fbd] {
-    min-width: 200px;
-    font-size: 13px;
-    flex-grow: 1;
-    padding: 10px;
-    border-radius: 8px;
-    color: #666;
-    border: 1px solid #ddd;
-    box-sizing: border-box;
-    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .15);
+
+/* Hide the input but keep it functional */
+.slash-menu-hidden-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  height: 0;
+  width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
 }
-.search-input-ctn .search-input[data-v-af870fbd]:active, .search-input-ctn .search-input[data-v-af870fbd]:focus {
-      outline: none;
-      border: 1px solid #1355ff;
+.slash-menu-items {
+  max-height: 300px;
+  overflow-y: auto;
 }
-.search-input-ctn .row[data-v-af870fbd] {
-    display: flex;
+.slash-menu-search {
+  padding: 0.5rem;
+  border-bottom: 1px solid #eee;
 }
-.search-input-ctn .row.submit[data-v-af870fbd] {
-      margin-top: 10px;
-      flex-direction: row-reverse;
+.slash-menu-search input {
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #ddd;
+  outline: none;
 }
-.search-input-ctn .submit-btn[data-v-af870fbd] {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px 16px;
-    border-radius: 8px;
-    outline: none;
-    border: none;
-    background-color: #1355ff;
-    color: white;
-    font-weight: 400;
-    font-size: 13px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-sizing: border-box;
+.slash-menu-search input:focus {
+  border-color: #0096fd;
+}
+
+/* Remove unused group styles */
+.slash-menu-group-label {
+  display: none;
+}
+.slash-menu-item {
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease;
+  display: flex;
+  align-items: center;
+}
+.slash-menu-item:hover {
+  background: #f5f5f5;
+}
+.slash-menu-item.is-selected {
+  background: #edf6ff;
+  color: #0096fd;
+  fill: #0096fd;
+}
+.slash-menu-item-icon {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+.slash-menu-item-icon svg {
+  height: 12px;
+  width: 12px;
+}
+.popover {
+  background: white;
+  border-radius: 6px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+}
+.slash-menu-divider {
+  height: 1px;
+  background: #eee;
+  margin: 4px 0;
 }
 .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}
 .vertical-indicator[data-v-ad77036c] {
@@ -1590,10 +1684,23 @@ on the right if it is inside shape textbox.
   user-select: none;
 }
 
-.editor-element[data-v-4b700df1] {
+
+/* @remarks - popover adds a slight shadow, this can be removed if needed */
+.generic-popover[data-v-93a6abe9] {
+  /* @remarks - this should ideally be handled by the content or component - but some are missing */
+  background-color: white;
+  position: absolute;
+  z-index: 1000;
+  border-radius: 6px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
+  min-width: 120px;
+  min-height: 40px;
+}
+
+.editor-element[data-v-b71313e5] {
   position: relative;
 }
-.super-editor-container[data-v-4b700df1] {
+.super-editor-container[data-v-b71313e5] {
   width: auto;
   height: auto;
   min-width: 8in;
@@ -1602,13 +1709,13 @@ on the right if it is inside shape textbox.
   display: flex;
   flex-direction: column;
 }
-.ruler[data-v-4b700df1] {
+.ruler[data-v-b71313e5] {
   margin-bottom: 2px;
 }
-.super-editor[data-v-4b700df1] {
+.super-editor[data-v-b71313e5] {
   color: initial;
 }
-.placeholder-editor[data-v-4b700df1] {
+.placeholder-editor[data-v-b71313e5] {
   position: absolute;
   top: 0;
   left: 0;
@@ -1620,7 +1727,7 @@ on the right if it is inside shape textbox.
   background-color: white;
   box-sizing: border-box;
 }
-.placeholder-title[data-v-4b700df1] {
+.placeholder-title[data-v-b71313e5] {
   display: flex;
   justify-content: center;
   margin-bottom: 40px;