@zipify/wysiwyg 1.0.0-dev.16 → 1.0.0-dev.19

package/.github/dependabot.yaml

@@ -11,6 +11,7 @@ updates:
       day: "monday"
       timezone: "Europe/Kiev"
       time: "09:00"
+    versioning-strategy: "increase"
     pull-request-branch-name:
       separator: "_"
     labels:

package/dist/wysiwyg.css

@@ -68,6 +68,23 @@
     transition-property: background-color, color, opacity;
     will-change: background-color, color, opacity;
 }
+.zw-button--primary[data-v-610825a2] {
+    background-color: rgb(var(--zw-color-green));
+    color: rgb(var(--zw-color-white));
+    padding: var(--zw-offset-xxs) var(--zw-offset-sm);
+    line-height: var(--zw-line-height-md);
+}
+.zw-button--primary[data-v-610825a2],
+.zw-button--secondary[data-v-610825a2] {
+    color: rgb(var(--zw-color-white));
+    padding: var(--zw-offset-xxs) var(--zw-offset-sm);
+    font-weight: 600;
+    font-size: var(--zw-font-size-xs);
+}
+.zw-button--primary[data-v-610825a2]:not(:disabled):hover,
+.zw-button--secondary[data-v-610825a2]:not(:disabled):hover {
+    opacity: 0.9;
+}
 .zw-button--toolbar[data-v-610825a2]:not(.zw-button--icon) {
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }
@@ -86,7 +103,7 @@
 
 
 .zw-icon[data-v-d4624794] {
-    display: inline-block;
+    display: flex;
 }
 .zw-icon--auto-color[data-v-d4624794] {
     --zw-icon-foreground: currentColor;
@@ -541,7 +558,6 @@
 
 .zw-modal[data-v-0a3c1c80] {
     border-radius: 2px;
-    overflow: hidden;
     box-shadow: 0 0 4px rgba(var(--zw-color-black), 0.3);
     background-color: rgb(var(--zw-color-n15));
     max-height: var(--zw-modal-max-height);
@@ -574,6 +590,90 @@
 }
 
 
+.zw-field[data-v-49291160] {
+    display: flex;
+    flex-direction: column;
+}
+.zw-field__input[data-v-49291160] {
+    --border-color: rgb(var(--zw-color-n60));
+    --text-color: rgb(var(--zw-color-n85));
+
+    border: 1px solid var(--border-color);
+    background-color: transparent;
+    color: var(--text-color);
+    font-size: var(--zw-font-size-xxs);
+    outline: none;
+    padding: 6px;
+    line-height: var(--zw-line-height-xxs);
+}
+.zw-field__input[data-v-49291160]:hover {
+    --border-color: rgb(var(--zw-color-n80));
+    --text-color: rgb(var(--zw-color-n85));
+}
+.zw-field__input[data-v-49291160]:focus,
+.zw-field__input[data-v-49291160]:focus-within {
+    --border-color: rgb(var(--zw-color-white));
+    --text-color: rgb(var(--zw-color-white));
+}
+.zw-field__label[data-v-49291160] {
+    display: inline-block;
+    font-size: var(--zw-font-size-xxs);
+    padding-bottom: var(--zw-offset-xxs);
+    line-height: var(--zw-line-height-xxs);
+}
+.zw-field__label--error[data-v-49291160] {
+    font-size: var(--zw-font-size-xxs);
+    margin: var(--zw-offset-xxs) 0 0;
+    color: rgb(var(--zw-color-red));
+}
+
+
+.zw-checkbox[data-v-f7eea800] {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    padding: var(--zw-offset-xxs) var(--zw-offset-xxs) var(--zw-offset-xxs) 0;
+}
+.zw-checkbox__field + .zw-checkbox__indicator[data-v-f7eea800] {
+    color: var(--zw-color-n200);
+    box-shadow: inset 0 0 0 2px currentColor;
+}
+.zw-checkbox:hover .zw-checkbox__indicator[data-v-f7eea800] {
+    box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
+}
+.zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-f7eea800] {
+    color: rgb(var(--zw-color-green))
+}
+.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-f7eea800] {
+    background-color: rgb(var(--zw-color-green));
+}
+.zw-checkbox .zw-checkbox__indicator[data-v-f7eea800]::after {
+    content: "";
+    display: block;
+    height: 16px;
+    transform: scale(0.6);
+    transition: transform 0.2s ease-out;
+    width: 16px;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAyNiIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0uMyAxNGMtLjItLjItLjMtLjUtLjMtLjdzLjEtLjUuMy0uN2wxLjQtMS40Yy40LS40IDEtLjQgMS40IDBsLjEuMSA1LjUgNS45Yy4yLjIuNS4yLjcgMEwyMi44IDMuM2guMWMuNC0uNCAxLS40IDEuNCAwbDEuNCAxLjRjLjQuNC40IDEgMCAxLjRsLTE2IDE2LjZjLS4yLjItLjQuMy0uNy4zLS4zIDAtLjUtLjEtLjctLjNMLjUgMTQuMy4zIDE0eiIvPgo8L3N2Zz4K);
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-position: center center;
+}
+.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-f7eea800]::after {
+    transform: scale(0);
+}
+.zw-checkbox__field[data-v-f7eea800] {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+.zw-checkbox__label[data-v-f7eea800] {
+    font-size: var(--zw-font-size-xs);
+}
+
+
 .zw-dropdown__activator[data-v-4865ea7a] {
     width: 100%;
 }
@@ -586,6 +686,11 @@
 .zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-4865ea7a] {
     transform: rotateX(180deg);
 }
+.zw-dropdown__activator--gray[data-v-4865ea7a] {
+    background-color: rgb(var(--zw-color-n20));
+    font-size: var(--zw-font-size-xxs);
+    color: rgb(var(--zw-color-white));
+}
 
 
 .zw-dropdown__option[data-v-10a0f0b7] {
@@ -672,6 +777,11 @@
 }
 
 
+.zw-font-size-control[data-v-a2e458ce] {
+    width: 64px;
+}
+
+
 .zw-alignment-control__modal[data-v-9713d430] {
     padding: var(--zw-offset-xxs);
 }
@@ -702,15 +812,77 @@
 }
 
 
+.zw-link-modal-header[data-v-1b67b282] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--zw-offset-sm);
+    border-bottom: 2px solid rgb(var(--zw-color-n5));
+}
+.zw-link-modal-header__title[data-v-1b67b282] {
+    text-transform: uppercase;
+    font-weight: var(--zw-font-weight-semibold);
+    font-size: var(--zw-font-size-xxs);
+    color: rgb(var(--zw-color-white));
+}
+.zw-link-modal-header__unlink-icon[data-v-1b67b282] {
+    margin-right: var(--zw-offset-xxs);
+}
+.zw-link-modal-header__unlink-button[data-v-1b67b282] {
+    color: rgb(var(--zw-color-n80));
+    font-size: var(--zw-font-size-xxs);
+    transition: 0.1s opacity ease-out;
+    will-change: opacity;
+}
+.zw-link-modal-header__unlink-button[data-v-1b67b282]:disabled {
+    opacity: 0.35;
+}
+.zw-link-modal-header__unlink-button[data-v-1b67b282]:hover {
+    color: rgb(var(--zw-color-white));
+}
+
+
+.zw-link-modal__apply[data-v-77b6c3ac] {
+    display: flex;
+    justify-content: flex-end;
+}
+
+
+.zw-link-modal[data-v-30870bdc] {
+    width: 266px;
+}
+.zw-link-modal__body[data-v-30870bdc] {
+    padding: var(--zw-offset-sm);
+}
+[data-v-30870bdc] .zw-link-modal-dropdown__option {
+    width: 234px;
+}
+
+
 .zw-toolbar[data-v-05accea6] {
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));
     z-index: 999999;
 }
+.zw-toolbar[data-v-05accea6]::before,
+.zw-toolbar[data-v-05accea6]::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: calc(var(--zw-toolbar-offset-y) + 4px);
+    position: absolute;
+    --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
+}
+.zw-toolbar[data-v-05accea6]::before {
+    top: var(--zw-toolbar-safe-zone);
+}
+.zw-toolbar[data-v-05accea6]::after {
+    bottom: var(--zw-toolbar-safe-zone);
+}
 .zw-toolbar--enter-active[data-v-05accea6],
 .zw-toolbar--leave-active[data-v-05accea6] {
-    transition: opacity 0.15s ease-out;
+    transition: opacity 150ms ease-out;
 }
 .zw-toolbar--leave-active[data-v-05accea6] {
     transition: opacity 0s ease-in;
@@ -730,13 +902,17 @@
     --zw-color-n80: 196, 196, 196;  /* #C4C4C4 */
     --zw-color-n85: 217, 217, 217;  /* #D9D9D9 */
     --zw-color-n90: 230, 230, 230;  /* #E6E6E6 */
+    --zw-color-n200: 194, 200, 209;  /* #C2C8D1 */
     --zw-color-black: 0, 0, 0;
     --zw-color-white: 255, 255, 255;
+    --zw-color-green: 59, 180, 74; /* #3BB44A */
+    --zw-color-red: 234, 58, 58; /* #EA3A3A */
 
     --zw-offset-xxs: 4px;
     --zw-offset-xs: 8px;
     --zw-offset-xsm: 12px;
     --zw-offset-sm: 16px;
+    --zw-offset-md: 24px;
 
     --zw-font-weight-thin: 400;
     --zw-font-weight-semibold: 500;
@@ -764,6 +940,8 @@ $builder-N90: #E6E6E6;
 $builder-N94: #F0F0F0;
 $builder-N96: #F5F5F5;
 $builder-N98: #FAFAFA;
+$builder-N200: #C2C8D1;
+$builder-R50: #EA3A3A;
 
 $font-size-xxs: 12px;
 $font-size-xs:  14px;
@@ -782,6 +960,14 @@ $font-height--md: 1.72;
     outline: none;
 }
 
+.zw-wysiwyg__placeholder:first-child:last-child::before {
+    content: attr(data-placeholder);
+    color: rgb(var(--zw-color-n70));
+    float: left;
+    height: 0;
+    pointer-events: none;
+}
+
 .zw-style {
     font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
     font-family: var(--zw-font-family, var(--zw-preset-font-family));
@@ -794,30 +980,109 @@ $font-height--md: 1.72;
 @media (min-width: 1200px) {
 
     .zw-style {
-        font-size: var(--zw-desktop-font-size, var(--zw-preset-desktop-font-size));
-        text-align: var(--zw-desktop-text-align, var(--zw-preset-desktop-text-align));
-        line-height: var(--zw-desktop-line-height, var(--zw-preset-desktop-line-height));
+        font-size: var(--zw-font-size-desktop, var(--zw-preset-desktop-font-size));
+        text-align: var(--zw-text-align-desktop, var(--zw-preset-desktop-text-align));
+        line-height: var(--zw-line-height-desktop, var(--zw-preset-desktop-line-height));
     }
 }
 
 @media (min-width: 769px) and (max-width: 1199.98px) {
 
     .zw-style {
-        font-size: var(--zw-tablet-font-size, var(--zw-preset-tablet-font-size));
-        text-align: var(--zw-tablet-text-align, var(--zw-preset-tablet-text-align));
-        line-height: var(--zw-tablet-line-height, var(--zw-preset-tablet-line-height));
+        font-size: var(--zw-font-size-tablet, var(--zw-preset-tablet-font-size));
+        text-align: var(--zw-text-align-tablet, var(--zw-preset-tablet-text-align));
+        line-height: var(--zw-line-height-tablet, var(--zw-preset-tablet-line-height));
     }
 }
 
 @media (max-width: 768.98px) {
 
     .zw-style {
-        font-size: var(--zw-mobile-font-size, var(--zw-preset-mobile-font-size));
-        text-align: var(--zw-mobile-text-align, var(--zw-preset-mobile-text-align));
-        line-height: var(--zw-mobile-line-height, var(--zw-preset-mobile-line-height));
+        font-size: var(--zw-font-size-mobile, var(--zw-preset-mobile-font-size));
+        text-align: var(--zw-text-align-mobile, var(--zw-preset-mobile-text-align));
+        line-height: var(--zw-line-height-mobile, var(--zw-preset-mobile-line-height));
+    }
+}
+
+/* ProseMirror styles */
+
+.ProseMirror {
+    position: relative;
+}
+
+.ProseMirror {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    white-space: break-spaces;
+    -webkit-font-variant-ligatures: none;
+    font-variant-ligatures: none;
+    font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror [contenteditable="false"] {
+    white-space: normal;
+}
+
+.ProseMirror [contenteditable="false"] [contenteditable="true"] {
+    white-space: pre-wrap;
+}
+
+.ProseMirror pre {
+    white-space: pre-wrap;
+}
+
+img.ProseMirror-separator {
+    display: inline !important;
+    border: none !important;
+    margin: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+}
+
+.ProseMirror-gapcursor {
+    display: none;
+    pointer-events: none;
+    position: absolute;
+    margin: 0;
+}
+
+.ProseMirror-gapcursor::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 20px;
+    border-top: 1px solid #000;
+    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+
+    to {
+        visibility: hidden;
     }
 }
 
+.ProseMirror-hideselection *::selection {
+    background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+    background: transparent;
+}
+
+.ProseMirror-hideselection * {
+    caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+    display: block;
+}
+
+.tippy-box[data-animation=fade][data-state=hidden] {
+    opacity: 0
+}
+
 .zw-text--truncate {
     white-space: nowrap;
     overflow: hidden;
@@ -829,9 +1094,25 @@ $font-height--md: 1.72;
     position: relative;
 }
 
+.zw-margin-bottom--xxs {
+    margin-bottom: var(--zw-offset-xxs);
+}
+
 .zw-margin-bottom--xs {
     margin-bottom: var(--zw-offset-xs);
 }
 
+.zw-margin-bottom--sm {
+    margin-bottom: var(--zw-offset-sm);
+}
+
+.zw-margin-bottom--md {
+    margin-bottom: var(--zw-offset-md);
+}
+
+.zw-margin-right--xs {
+    margin-right: var(--zw-offset-xs);
+}
+