@harbour-enterprises/superdoc 0.13.0-RC3 → 0.13.0-next.2

package/dist/super-editor/style.css

@@ -64,13 +64,20 @@
   width: 16px;
 }
 
-.toolbar-item[data-v-6eb57404] {
+.toolbar-item[data-v-2518a3d1] {
   position: relative;
   z-index: 1;
   min-width: 30px;
   margin: 0 1px;
 }
-.toolbar-button[data-v-6eb57404] {
+.visually-hidden[data-v-2518a3d1] {
+  position: absolute;
+  left: -9999px;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+.toolbar-button[data-v-2518a3d1] {
   padding: 5px;
   height: 32px;
   max-height: 32px;
@@ -86,21 +93,21 @@
   position: relative;
   box-sizing: border-box;
 }
-.toolbar-button[data-v-6eb57404]:hover {
+.toolbar-button[data-v-2518a3d1]:hover {
   background-color: #dbdbdb;
 }
-.toolbar-button:hover .toolbar-icon.high-contrast[data-v-6eb57404] {
+.toolbar-button:hover .toolbar-icon.high-contrast[data-v-2518a3d1] {
       color: #fff;
 }
-.toolbar-button:hover.high-contrast[data-v-6eb57404] {
+.toolbar-button:hover.high-contrast[data-v-2518a3d1] {
     background-color: #000;
     color: #fff;
 }
-.toolbar-button[data-v-6eb57404]:active,
-.active[data-v-6eb57404] {
+.toolbar-button[data-v-2518a3d1]:active,
+.active[data-v-2518a3d1] {
   background-color: #c8d0d8;
 }
-.button-label[data-v-6eb57404] {
+.button-label[data-v-2518a3d1] {
   overflow: hidden;
   width: 100%;
   text-align: center;
@@ -110,37 +117,37 @@
   font-size: 15px;
   margin: 5px;
 }
-.toolbar-icon+.dropdown-caret[data-v-6eb57404] {
+.toolbar-icon+.dropdown-caret[data-v-2518a3d1] {
   margin-left: 4px;
 }
-.left[data-v-6eb57404],
-.right[data-v-6eb57404] {
+.left[data-v-2518a3d1],
+.right[data-v-2518a3d1] {
   width: 50%;
   height: 100%;
   background-color: #dbdbdb;
   border-radius: 60%;
 }
-.has-inline-text-input[data-v-6eb57404]:hover {
+.has-inline-text-input[data-v-2518a3d1]:hover {
   cursor: text;
 }
-.disabled[data-v-6eb57404] {
+.disabled[data-v-2518a3d1] {
   cursor: default;
 }
-.disabled[data-v-6eb57404]:hover {
+.disabled[data-v-2518a3d1]:hover {
   cursor: default;
   background-color: initial;
 }
-.disabled .toolbar-icon[data-v-6eb57404],
-.disabled .caret[data-v-6eb57404],
-.disabled .button-label[data-v-6eb57404] {
+.disabled .toolbar-icon[data-v-2518a3d1],
+.disabled .caret[data-v-2518a3d1],
+.disabled .button-label[data-v-2518a3d1] {
   opacity: 0.35;
 }
-.caret[data-v-6eb57404] {
+.caret[data-v-2518a3d1] {
   font-size: 1em;
   padding-left: 2px;
   padding-right: 2px;
 }
-.button-text-input[data-v-6eb57404] {
+.button-text-input[data-v-2518a3d1] {
   color: #47484a;
   border-radius: 4px;
   text-align: center;
@@ -154,13 +161,13 @@
   border: 1px solid #d8dee5;
   box-sizing: border-box;
 }
-.button-text-input.high-contrast[data-v-6eb57404] {
+.button-text-input.high-contrast[data-v-2518a3d1] {
     background-color: #fff;
 }
-.button-text-input[data-v-6eb57404]::placeholder {
+.button-text-input[data-v-2518a3d1]::placeholder {
   color: #47484a;
 }
-.dropdown-caret[data-v-6eb57404] {
+.dropdown-caret[data-v-2518a3d1] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -170,16 +177,16 @@
   height: 10px;
 }
 @media (max-width: 1280px) {
-.toolbar-item--doc-mode .button-label[data-v-6eb57404] {
+.toolbar-item--doc-mode .button-label[data-v-2518a3d1] {
     display: none;
 }
-.toolbar-item--doc-mode .toolbar-icon[data-v-6eb57404] {
+.toolbar-item--doc-mode .toolbar-icon[data-v-2518a3d1] {
     margin-right: 5px;
 }
-.toolbar-item--linked-styles[data-v-6eb57404] {
+.toolbar-item--linked-styles[data-v-2518a3d1] {
     width: auto !important;
 }
-.toolbar-item--linked-styles .button-label[data-v-6eb57404] {
+.toolbar-item--linked-styles .button-label[data-v-2518a3d1] {
     display: none;
 }
 }
@@ -209,10 +216,10 @@
   background-color: #c8d0d8;
 }
 
-.overflow-menu[data-v-c637209b] {
+.overflow-menu[data-v-53852ffa] {
   position: relative;
 }
-.overflow-menu_items[data-v-c637209b] {
+.overflow-menu_items[data-v-53852ffa] {
     position: absolute;
     width: 200px;
     top: calc(100% + 3px);
@@ -224,13 +231,13 @@
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
     box-sizing: border-box;
 }
-.superdoc-toolbar-overflow[data-v-c637209b] {
+.superdoc-toolbar-overflow[data-v-53852ffa] {
   min-width: auto !important;
   max-width: 200px;
   flex-wrap: wrap;
 }
 @media (max-width: 300px) {
-.overflow-menu_items[data-v-c637209b] {
+.overflow-menu_items[data-v-53852ffa] {
     right: auto;
     left: 0;
     transform: translateX(-50%);
@@ -260,11 +267,11 @@
   border-radius: 8px !important;
 }
 
-.button-group[data-v-b09e5a20] {
+.button-group[data-v-d4f36abf] {
   display: flex;
 }
 
-.superdoc-toolbar[data-v-2a400574] {
+.superdoc-toolbar[data-v-9d38c912] {
   display: flex;
   width: 100%;
   justify-content: space-between;
@@ -272,12 +279,12 @@
   box-sizing: border-box;
 }
 @media (max-width: 1280px) {
-.superdoc-toolbar-group-side[data-v-2a400574] {
+.superdoc-toolbar-group-side[data-v-9d38c912] {
     min-width: auto !important;
 }
 }
 @media (max-width: 768px) {
-.superdoc-toolbar[data-v-2a400574] {
+.superdoc-toolbar[data-v-9d38c912] {
     padding: 4px 10px;
     justify-content: inherit;
 }
@@ -418,33 +425,8 @@ to {
 .ProseMirror pre {
   white-space: pre-wrap;
 }
-.ProseMirror ol,
-.ProseMirror ul {
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-}
-.ProseMirror ol,
-.ProseMirror ul {
-  padding-inline-start: 0;
-  padding-left: 0 ;
-}
-.ProseMirror ol,
-.ProseMirror ul {
-  /* list-style: none !important; */
-}
-.ProseMirror li::marker {
-  content: none;
-}
-.ProseMirror li::marker {
-  padding: 0;
-  margin: 0;
-}
-.ProseMirror li > p {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
+.ProseMirror li {
+  position: relative;
 }
 .ProseMirror.header-footer-edit > p, .ProseMirror.header-footer-edit li, .ProseMirror.header-footer-edit span {
     color: #7e7e7e !important;
@@ -477,6 +459,31 @@ to {
 .ProseMirror li:has(> ul:first-child, > ol:first-child):not(:has(> p))::marker {
   content: '';
 }
+.ProseMirror li::marker {
+  font-size: var(--marker-font-size);
+  font-family: var(--marker-font-family);
+}
+.ProseMirror li[data-marker-type] {
+  list-style: none;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 0.5em;
+  align-items: start;
+}
+.ProseMirror li[data-marker-type]::marker {
+  content: "";
+}
+.ProseMirror li[data-marker-type]::before {
+  content: attr(data-marker-type);
+  white-space: pre;
+  font-size: var(--marker-font-size);
+  font-family: var(--marker-font-family);
+  grid-column: 1;
+}
+.ProseMirror li[data-marker-type] > * {
+  grid-column: 2;
+  margin: 0;
+}
 .ProseMirror-hideselection *::selection {
   background: transparent;
 }
@@ -791,6 +798,22 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
 .sd-ai-highlight-pulse {
   animation: ai-pulse 1.5s ease-in-out infinite;
 }
+.sd-editor-auto-page-number,
+.sd-editor-auto-total-pages {
+  transition: all 250ms ease;
+  border-bottom: 1px solid #9A9A9A;
+  cursor: not-allowed;
+}
+.sd-editor-auto-page-numbe:hover,
+.sd-editor-auto-total-pages:hover {
+  border-bottom: 1px solid #4f4f4f;
+}
+.sd-editor-auto-page-number-content {
+  pointer-events: none;
+}
+:root {
+  --sd-editor-separator-height: 18px;
+}
 .pagination-section-header {
   cursor: default;
 }
@@ -813,14 +836,24 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
 .pagination-separator {
   position: relative;
   display: block;
-  height: 18px;
-  min-height: 18px;
+  height: var(--sd-editor-separator-height);
+  min-height: var(--sd-editor-separator-height);
   min-width: 100%;
   width: 100%;
   border-top: 1px solid #DBDBDB;
   border-bottom: 1px solid #DBDBDB;
   cursor: default;
 }
+.pagination-separator--table {
+  border: 0;
+}
+.pagination-separator-floating {
+  position: absolute;
+  height: var(--sd-editor-separator-height);
+  border-top: 1px solid #DBDBDB;
+  border-bottom: 1px solid #DBDBDB;
+  pointer-events: none;
+}
 .pagination-inner {
   position: absolute;
   top: 0;
@@ -901,28 +934,91 @@ on the right if it is inside shape textbox.
 .sd-editor-comment-highlight:hover {
   background-color: #1354FF55;
 }
-.sd-editor-list-item-node-view {
-  position: relative;
+/* Resize handles container */
+.sd-editor-resize-container {
+  position: absolute;
+  pointer-events: none;
+  z-index: 11;
 }
-.sd-editor-list-item-numbering {
+/* Resize handles */
+.sd-editor-resize-handle {
   position: absolute;
-  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  background-color: #4dabf7;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+  transition: all 0.1s ease;
+}
+.sd-editor-resize-handle:hover {
+  background-color: #228be6;
+  transform: scale(1.1);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+}
+/* Handle positions */
+.sd-editor-resize-handle-nw {
+  top: -6px;
+  left: -6px;
+  cursor: nwse-resize;
+}
+.sd-editor-resize-handle-ne {
+  top: -6px;
+  right: -6px;
+  cursor: nesw-resize;
+}
+.sd-editor-resize-handle-sw {
+  bottom: -6px;
+  left: -6px;
+  cursor: nesw-resize;
+}
+.sd-editor-resize-handle-se {
+  bottom: -6px;
+  right: -6px;
+  cursor: nwse-resize;
+}
+/* Hide handles when editor loses focus */
+.ProseMirror:not(.ProseMirror-focused) .sd-editor-resize-container {
+  display: none;
 }
-.sd-editor-list-item-numbering-selected {
-  background-color: red;
+/* Smooth transitions for resizing */
+.sd-editor-resizable-wrapper * {
+  transition: none;
 }
-.sd-editor-list-item-content-dom {
-
+.sd-editor-resizable-wrapper *:not([style*='width']) {
+  transition: all 0.2s ease;
+}
+/* Resize feedback indicator */
+.sd-editor-resizable-wrapper::after {
+  content: 'Drag corners to resize';
+  position: absolute;
+  bottom: -25px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(77, 171, 247, 0.9);
+  color: white;
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 12;
+}
+.sd-editor-resizable-wrapper:hover::after {
+  opacity: 1;
 }
 
-.alignment-buttons[data-v-58d8a9bb] {
+.alignment-buttons[data-v-3f28435a] {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 8px;
   box-sizing: border-box;
 }
-.alignment-buttons .button-icon[data-v-58d8a9bb] {
+.alignment-buttons .button-icon[data-v-3f28435a] {
     cursor: pointer;
     padding: 5px;
     font-size: 16px;
@@ -934,16 +1030,16 @@ on the right if it is inside shape textbox.
     align-items: center;
     box-sizing: border-box;
 }
-.alignment-buttons .button-icon[data-v-58d8a9bb]:hover {
+.alignment-buttons .button-icon[data-v-3f28435a]:hover {
       background-color: #d8dee5;
 }
-.alignment-buttons .button-icon[data-v-58d8a9bb] svg {
+.alignment-buttons .button-icon[data-v-3f28435a] svg {
       width: 100%;
       height: 100%;
       display: block;
       fill: currentColor;
 }
-.alignment-buttons.high-contrast .button-icon[data-v-58d8a9bb]:hover {
+.alignment-buttons.high-contrast .button-icon[data-v-3f28435a]:hover {
         background-color: #000;
         color: #fff;
 }
@@ -1113,19 +1209,19 @@ on the right if it is inside shape textbox.
   cursor: pointer;
 }
 
-.document-mode[data-v-050d9d49]  {
+.document-mode[data-v-7febe4d9]  {
   display: flex;
   flex-direction: column;
   padding: 10px;
   box-sizing: border-box;
 }
-.document-mode[data-v-050d9d49] svg {
+.document-mode[data-v-7febe4d9] svg {
     width: 100%;
   height: 100%;
   display: block;
   fill: currentColor;
 }
-.document-mode .option-item[data-v-050d9d49] {
+.document-mode .option-item[data-v-7febe4d9] {
   display: flex;
   flex-direction: row;
   background-color: white;
@@ -1134,35 +1230,35 @@ on the right if it is inside shape textbox.
   cursor: pointer;
   box-sizing: border-box;
 }
-.document-mode .option-item[data-v-050d9d49]:hover {
+.document-mode .option-item[data-v-7febe4d9]:hover {
     background-color: #c8d0d8;
 }
-.document-mode.high-contrast .option-item[data-v-050d9d49]:hover {
+.document-mode.high-contrast .option-item[data-v-7febe4d9]:hover {
       background-color: #000;
       color: #fff;
 }
-.document-mode.high-contrast .option-item:hover .icon-column__icon[data-v-050d9d49] {
+.document-mode.high-contrast .option-item:hover .icon-column__icon[data-v-7febe4d9] {
         color: #fff;
 }
-.document-mode.high-contrast .option-item:hover .text-column >.document-mode-type[data-v-050d9d49],
-        .document-mode.high-contrast .option-item:hover .text-column >.document-mode-description[data-v-050d9d49] {
+.document-mode.high-contrast .option-item:hover .text-column >.document-mode-type[data-v-7febe4d9],
+        .document-mode.high-contrast .option-item:hover .text-column >.document-mode-description[data-v-7febe4d9] {
           color: #fff;
 }
-.disabled[data-v-050d9d49] {
+.disabled[data-v-7febe4d9] {
   opacity: 0.5;
   cursor: not-allowed !important;
   pointer-events: none;
 }
-.document-mode-column[data-v-050d9d49] {
+.document-mode-column[data-v-7febe4d9] {
   display: flex;
   flex-direction: column;
 }
-.document-mode-type[data-v-050d9d49] {
+.document-mode-type[data-v-7febe4d9] {
   font-weight: 400;
   font-size: 15px;
   color: #222;
 }
-.icon-column[data-v-050d9d49] {
+.icon-column[data-v-7febe4d9] {
   margin-right: 5px;
   justify-content: flex-start;
   align-items: center;
@@ -1171,7 +1267,7 @@ on the right if it is inside shape textbox.
   height: 100%;
   box-sizing: border-box;
 }
-.icon-column__icon[data-v-050d9d49] {
+.icon-column__icon[data-v-7febe4d9] {
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -1179,23 +1275,23 @@ on the right if it is inside shape textbox.
     height: 18px;
     color: #47484a;
 }
-.icon-column__icon[data-v-050d9d49] svg {
+.icon-column__icon[data-v-7febe4d9] svg {
   width: auto;
   /* needed for safari */
   max-height: 18px;
 }
-.document-mode-description[data-v-050d9d49] {
+.document-mode-description[data-v-7febe4d9] {
   font-size: 12px;
   color: #666;
 }
 
-.style-name[data-v-bf5a8c1e] {
+.style-name[data-v-2cf079a2] {
   padding: 16px 10px;
 }
-.style-name[data-v-bf5a8c1e]:hover {
+.style-name[data-v-2cf079a2]:hover {
   background-color: #c8d0d8;
 }
-.linked-style-buttons[data-v-bf5a8c1e] {
+.linked-style-buttons[data-v-2cf079a2] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -1206,7 +1302,7 @@ on the right if it is inside shape textbox.
   margin: 0;
   overflow: auto;
 }
-.button-icon[data-v-bf5a8c1e] {
+.button-icon[data-v-2cf079a2] {
   cursor: pointer;
   padding: 5px;
   font-size: 16px;
@@ -1218,21 +1314,21 @@ on the right if it is inside shape textbox.
   align-items: center;
   box-sizing: border-box;
 }
-.button-icon[data-v-bf5a8c1e]:hover {
+.button-icon[data-v-2cf079a2]:hover {
   background-color: #d8dee5;
 }
-.button-icon[data-v-bf5a8c1e] svg {
+.button-icon[data-v-2cf079a2] svg {
   width: 100%;
   height: 100%;
   display: block;
   fill: currentColor;
 }
 
-.option-row[data-v-d96a82fa] {
+.option-row[data-v-e89b7f5f] {
   display: flex;
   flex-direction: row;
 }
-.option[data-v-d96a82fa] {
+.option[data-v-e89b7f5f] {
   border-radius: 50%;
   cursor: pointer;
   padding: 3px;
@@ -1242,80 +1338,80 @@ on the right if it is inside shape textbox.
   position: relative;
   box-sizing: border-box;
 }
-.option[data-v-d96a82fa]:hover {
+.option[data-v-e89b7f5f]:hover {
   background-color: #dbdbdb;
 }
-.option__icon[data-v-d96a82fa] {
+.option__icon[data-v-e89b7f5f] {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
 }
-.option__check[data-v-d96a82fa] {
+.option__check[data-v-e89b7f5f] {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
   position: absolute;
 }
 
-.options-grid-wrap[data-v-9246bdef] {
+.options-grid-wrap[data-v-a00a9a3e] {
   padding: 5px;
   border-radius: 5px;
 }
-.none-option[data-v-9246bdef] {
+.none-option[data-v-a00a9a3e] {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 4px;
 }
-.none-option[data-v-9246bdef]:hover {
+.none-option[data-v-a00a9a3e]:hover {
     opacity: 0.65;
 }
-.none-icon[data-v-9246bdef] {
+.none-icon[data-v-a00a9a3e] {
   width: 16px;
 }
-.option-grid-ctn[data-v-9246bdef] {
+.option-grid-ctn[data-v-a00a9a3e] {
   display: flex;
   flex-direction: column;
   background-color: #fff;
   z-index: 3;
   box-sizing: border-box;
 }
-.option-grid-ctn__subtitle[data-v-9246bdef] {
+.option-grid-ctn__subtitle[data-v-a00a9a3e] {
     padding: 3px;
     font-size: 12px;
     font-weight: 600;
 }
-.option-grid-ctn[data-v-9246bdef] svg {
+.option-grid-ctn[data-v-a00a9a3e] svg {
   width: 100%;
   height: 100%;
   display: block;
   fill: currentColor;
 }
 
-.toolbar-table-grid-wrapper .toolbar-table-grid[data-v-617bf152] {
+.toolbar-table-grid-wrapper .toolbar-table-grid[data-v-3e1154b8] {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 2px;
     padding: 8px;
     box-sizing: border-box;
 }
-.toolbar-table-grid-wrapper .toolbar-table-grid__item[data-v-617bf152] {
+.toolbar-table-grid-wrapper .toolbar-table-grid__item[data-v-3e1154b8] {
     width: 20px;
     height: 20px;
     border: 1px solid #d3d3d3;
     cursor: pointer;
     transition: all .15s;
 }
-.toolbar-table-grid-wrapper .toolbar-table-grid__item.selected[data-v-617bf152] {
+.toolbar-table-grid-wrapper .toolbar-table-grid__item.selected[data-v-3e1154b8] {
     background-color: #dbdbdb;
 }
-.toolbar-table-grid-wrapper.high-contrast .toolbar-table-grid__item[data-v-617bf152] {
+.toolbar-table-grid-wrapper.high-contrast .toolbar-table-grid__item[data-v-3e1154b8] {
       border-color: #000;
 }
-.toolbar-table-grid-wrapper.high-contrast .toolbar-table-grid__item.selected[data-v-617bf152] {
+.toolbar-table-grid-wrapper.high-contrast .toolbar-table-grid__item.selected[data-v-3e1154b8] {
       background: #000;
 }
-.toolbar-table-grid-wrapper .toolbar-table-grid-value[data-v-617bf152] {
+.toolbar-table-grid-wrapper .toolbar-table-grid-value[data-v-3e1154b8] {
     font-size: 13px;
     line-height: 1.1;
     padding: 0px 8px 2px;
@@ -1488,7 +1584,10 @@ on the right if it is inside shape textbox.
   user-select: none;
 }
 
-.super-editor-container[data-v-f27b7c30] {
+.editor-element[data-v-4b700df1] {
+  position: relative;
+}
+.super-editor-container[data-v-4b700df1] {
   width: auto;
   height: auto;
   min-width: 8in;
@@ -1497,13 +1596,13 @@ on the right if it is inside shape textbox.
   display: flex;
   flex-direction: column;
 }
-.ruler[data-v-f27b7c30] {
+.ruler[data-v-4b700df1] {
   margin-bottom: 2px;
 }
-.super-editor[data-v-f27b7c30] {
+.super-editor[data-v-4b700df1] {
   color: initial;
 }
-.placeholder-editor[data-v-f27b7c30] {
+.placeholder-editor[data-v-4b700df1] {
   position: absolute;
   top: 0;
   left: 0;
@@ -1515,7 +1614,7 @@ on the right if it is inside shape textbox.
   background-color: white;
   box-sizing: border-box;
 }
-.placeholder-title[data-v-f27b7c30] {
+.placeholder-title[data-v-4b700df1] {
   display: flex;
   justify-content: center;
   margin-bottom: 40px;