@windoc/react 0.3.11 → 0.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windoc/react",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "React bindings for windoc editor",
   "homepage": "https://aliansyahfirdaus.github.io/windoc/",
   "repository": {
@@ -50,7 +50,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@windoc/core": "^0.3.11"
+    "@windoc/core": "^0.3.13"
   },
   "devDependencies": {
     "@types/react": "^19",

package/src/styles/editor.css

@@ -130,21 +130,78 @@ ul {
 .menu-item .select {
     border: none;
     font-size: 12px;
-    line-height: 28px;
+    display: flex;
+    align-items: center;
+    height: 100%;
     user-select: none;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
-.menu-item .select::after {
-    position: absolute;
-    content: "";
-    top: 12px;
-    width: 0;
-    height: 0;
-    right: 8px;
-    border-color: #667085 transparent transparent;
-    border-style: solid solid none;
-    border-width: 3px 3px 0;
+/* Shared split select group: label + arrow */
+.menu-item > .menu-item__select-group {
+    width: auto;
+    height: 28px;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    cursor: default;
+    position: relative;
+}
+
+.menu-item > .menu-item__select-group:hover {
+    background: transparent;
+    border-color: transparent;
+}
+
+.menu-item__select-text {
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 8px;
+    border: 1px solid #d0d5dd;
+    border-right-color: #fff;
+    border-radius: 8px 0 0 8px;
+    background: #fff;
+    color: #344054;
+    font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: all 0.2s;
+}
+
+.menu-item__select-text:hover {
+    background: #f2f4f7;
+    border-color: #667085;
+    border-right-color: #fff;
+}
+
+.menu-item__select-arrow {
+    width: 14px;
+    height: 28px;
+    padding-right: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d0d5dd;
+    border-left-color: #fff;
+    border-radius: 0 8px 8px 0;
+    background: #fff;
+    color: #667085;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s;
+    flex-shrink: 0;
+}
+
+.menu-item__select-arrow:hover {
+    background: #f2f4f7;
+    border-color: #667085;
 }
 
 .menu-item .options {
@@ -188,58 +245,6 @@ ul {
     color: #3b82f6;
 }
 
-.menu-item .menu-item__font {
-    width: auto;
-    min-width: 65px;
-    height: 28px;
-    position: relative;
-    border: 1px solid #d0d5dd;
-    border-radius: 8px;
-    background: #fff;
-    padding: 0 20px 0 8px;
-    margin: 0 2px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.menu-item .menu-item__font:hover {
-    background: #f2f4f7;
-    border-color: #667085;
-}
-
-.menu-item .menu-item__size {
-    width: auto;
-    min-width: 45px;
-    height: 28px;
-    text-align: center;
-    position: relative;
-    border: 1px solid #d0d5dd;
-    border-radius: 8px;
-    background: #fff;
-    padding: 0 20px 0 8px;
-    margin: 0 2px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.menu-item .menu-item__size:hover {
-    background: #f2f4f7;
-    border-color: #667085;
-}
-
-.menu-item__font .select,
-.menu-item__size .select {
-    width: 100%;
-    height: 100%;
-}
-
-.menu-item .menu-item__font .options {
-    width: 150px;
-}
-
-.menu-item .menu-item__size .options {
-    width: 60px;
-}
 
 .menu-item__undo.no-allow,
 .menu-item__redo.no-allow,
@@ -283,71 +288,107 @@ ul {
     background-image: url("./images/italic.svg");
 }
 
-.menu-item .menu-item__underline {
+/* Split underline button: icon + arrow as two connected buttons */
+.menu-item > .menu-item__underline-group {
     width: auto;
-    min-width: 38px;
     height: 28px;
-    position: relative;
-    border: 1px solid #d0d5dd;
-    border-radius: 8px;
-    background: #fff;
-    padding: 0 18px 0 4px;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    padding: 0;
     margin: 0 2px;
     display: flex;
     align-items: center;
-    transition: all 0.2s;
+    cursor: default;
+    position: relative;
 }
 
-.menu-item .menu-item__underline svg {
+.menu-item > .menu-item__underline-group:hover {
+    background: transparent;
+    border-color: transparent;
+}
+
+.menu-item__underline-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d0d5dd;
+    border-right-color: #fff;
+    border-radius: 8px 0 0 8px;
+    background: #fff;
+    color: #475467;
+    cursor: pointer;
+    transition: all 0.2s;
     flex-shrink: 0;
-    width: 16px;
-    height: 16px;
 }
 
-.menu-item .menu-item__underline:hover {
+.menu-item__underline-btn:hover {
     background: #f2f4f7;
     border-color: #667085;
 }
 
-.menu-item__underline > i {
+.menu-item__underline-btn.active {
+    border-color: #3b82f6;
+    background: #eff6ff;
+    color: #3b82f6;
+}
+
+.menu-item__underline-arrow {
+    width: 14px;
+    padding-right: 2px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d0d5dd;
+    border-left-color: #fff;
+    border-radius: 0 8px 8px 0;
+    background: #fff;
+    color: #667085;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s;
     flex-shrink: 0;
-    background-image: url("./images/underline.svg");
 }
 
-.menu-item__underline .select {
-    width: 100%;
-    height: 100%;
+.menu-item__underline-arrow:hover {
+    background: #f2f4f7;
+    border-color: #667085;
 }
 
-.menu-item .menu-item__underline .options {
+.menu-item__underline-arrow .options {
     width: 128px;
+    left: auto;
+    right: 0;
 }
 
-.menu-item .menu-item__underline li {
+.menu-item__underline-arrow li {
     padding: 1px 5px;
 }
 
-.menu-item__underline li i {
+.menu-item__underline-arrow li i {
     pointer-events: none;
 }
 
-.menu-item__underline li[data-decoration-style="solid"] {
+.menu-item__underline-arrow li[data-decoration-style="solid"] {
     background-image: url("./images/line-single.svg");
 }
 
-.menu-item__underline li[data-decoration-style="double"] {
+.menu-item__underline-arrow li[data-decoration-style="double"] {
     background-image: url("./images/line-double.svg");
 }
 
-.menu-item__underline li[data-decoration-style="dashed"] {
+.menu-item__underline-arrow li[data-decoration-style="dashed"] {
     background-image: url("./images/line-dash-small-gap.svg");
 }
 
-.menu-item__underline li[data-decoration-style="dotted"] {
+.menu-item__underline-arrow li[data-decoration-style="dotted"] {
     background-image: url("./images/line-dot.svg");
 }
 
-.menu-item__underline li[data-decoration-style="wavy"] {
+.menu-item__underline-arrow li[data-decoration-style="wavy"] {
     background-image: url("./images/line-wavy.svg");
 }
 
@@ -364,7 +405,9 @@ ul {
 }
 
 .menu-item__color,
-.menu-item__highlight {
+.menu-item__highlight,
+.menu-item__td-bg-color,
+.menu-item__td-border-color {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -382,7 +425,9 @@ ul {
 }
 
 .menu-item__color:hover,
-.menu-item__highlight:hover {
+.menu-item__highlight:hover,
+.menu-item__td-bg-color:hover,
+.menu-item__td-border-color:hover {
     background: #f2f4f7;
     border-color: #667085;
 }
@@ -412,35 +457,15 @@ ul {
     background-color: #ffff00;
 }
 
-.menu-item .menu-item__title {
-    width: auto;
-    min-width: 60px;
-    height: 28px;
-    position: relative;
-    border: 1px solid #d0d5dd;
-    border-radius: 8px;
-    background: #fff;
-    padding: 0 20px 0 8px;
-    margin: 0 2px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    transition: all 0.2s;
-}
-
-.menu-item .menu-item__title:hover {
-    background: #f2f4f7;
-    border-color: #667085;
+.menu-item__td-bg-color span {
+    background-color: transparent;
+    border: 1px dashed #ccc;
 }
 
-.menu-item__title .select {
-    width: 100%;
-    height: 100%;
+.menu-item__td-border-color span {
+    background-color: #000000;
 }
 
-.menu-item__title .options {
-    width: 100px;
-}
 
 .menu-item__left i {
     background-image: url("./images/left.svg");
@@ -470,45 +495,74 @@ ul {
     background-image: url("./images/row-margin.svg");
 }
 
-.menu-item__list {
+/* Split list button: icon + arrow */
+.menu-item > .menu-item__list-group {
+    width: auto;
+    height: 28px;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    padding: 0;
+    margin: 0 2px;
+    display: flex;
+    align-items: center;
+    cursor: default;
     position: relative;
+}
+
+.menu-item > .menu-item__list-group:hover {
+    background: transparent;
+    border-color: transparent;
+}
+
+.menu-item__list-btn {
     width: 28px;
     height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #d0d5dd;
-    border-radius: 8px;
+    border-right-color: #fff;
+    border-radius: 8px 0 0 8px;
     background: #fff;
     color: #475467;
-    margin: 0 2px;
     cursor: pointer;
     transition: all 0.2s;
+    flex-shrink: 0;
 }
 
-.menu-item__list:hover {
+.menu-item__list-btn:hover {
     background: #f2f4f7;
     border-color: #667085;
 }
 
-.menu-item__list i {
-    background-image: url("./images/list.svg");
-}
-
-.menu-item__list .options {
-    width: 110px;
-}
-
-.menu-item__list .options > ul > li * {
-    pointer-events: none;
+.menu-item__list-btn.active {
+    border-color: #3b82f6;
+    background: #eff6ff;
+    color: #3b82f6;
 }
 
-.menu-item__list .options > ul > li li {
-    margin-left: 18px;
+.menu-item__list-arrow {
+    width: 14px;
+    padding-right: 2px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #d0d5dd;
+    border-left-color: #fff;
+    border-radius: 0 8px 8px 0;
+    background: #fff;
+    color: #667085;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s;
+    flex-shrink: 0;
 }
 
-.menu-item__list .options > ul > li[data-list-style="checkbox"] li::marker {
-    font-size: 11px;
+.menu-item__list-arrow:hover {
+    background: #f2f4f7;
+    border-color: #667085;
 }
 
 .menu-item__image i {
@@ -892,36 +946,6 @@ ul {
     background-image: url("./images/print.svg");
 }
 
-.menu-item .menu-item__column {
-    width: auto;
-    min-width: 65px;
-    height: 28px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    border: 1px solid #d0d5dd;
-    border-radius: 8px;
-    background: #fff;
-    color: #475467;
-    padding: 0 20px 0 8px;
-    margin: 0 2px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.menu-item .menu-item__column:hover {
-    background: #f2f4f7;
-    border-color: #667085;
-}
-
-.menu-item__column .select {
-    width: 100%;
-    height: 100%;
-}
-
-.menu-item .menu-item__column .options {
-    width: 130px;
-}
 
 .option-divider {
     height: 1px;
@@ -952,36 +976,6 @@ ul {
     text-align: center;
 }
 
-.menu-item__line-height {
-    width: auto;
-    min-width: 52px;
-    height: 28px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    border: 1px solid #d0d5dd;
-    border-radius: 8px;
-    background: #fff;
-    color: #475467;
-    padding: 0 20px 0 8px;
-    margin: 0 2px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.menu-item__line-height:hover {
-    background: #f2f4f7;
-    border-color: #667085;
-}
-
-.menu-item__line-height .select {
-    width: 100%;
-    height: 100%;
-}
-
-.menu-item__line-height .options {
-    width: 60px;
-}
 
 .catalog {
     width: 250px;