@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/features/editable-field/Overlay/index.vue

@@ -27,7 +27,13 @@
         }}</span>
       </button>
     </template>
-    <form ref="form" class="bk-editable-field-input" @submit.prevent="save">
+    <form
+      ref="form"
+      class="bk-editable-field-input"
+      data-test="editable-overlay"
+      :data-test-type="config.type"
+      @submit.prevent="save"
+    >
       <div ref="input">
         <InputContenteditable
           v-if="config.type === 'markup'"
@@ -63,6 +69,7 @@
         <button
           :disabled="!hasChanged"
           class="bk-artboard-tooltip-info-button bk-scheme-red"
+          data-test="editable-discard"
           @click.prevent="discard"
         >
           {{ $t("editableFieldDiscard", "Discard") }}
@@ -74,7 +81,7 @@
           @click.prevent="autoTranslate"
         >
           <Icon name="bk_mdi_translate" class="_bk_size-15" />
-          {{ $t("editableFieldTranslate", "Translate") }}
+          {{ $t("translate", "Translate") }}
           <Tooltip
             :label="
   $t(
@@ -101,6 +108,8 @@
         <div
           v-if="!isMarkup"
           class="bk-editable-field-info-count _bk_relative _bk_group/tooltip"
+          data-test="editable-char-count"
+          :data-test-count="count"
         >
           <span>{{ count }}</span>
           <span v-if="maxlength >= 1">&nbsp;/&nbsp;{{ maxlength }}</span>
@@ -362,7 +371,7 @@ onBeforeUnmount(async () => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-editable-field {
   --bk-bg: white;
   --bk-header-bg: rgb(var(--bk-theme-teal-normal) / 1);
@@ -370,293 +379,238 @@ onBeforeUnmount(async () => {
   --bk-border: rgb(var(--bk-theme-teal-normal) / 1);
   --bk-header-hover: rgb(var(--bk-theme-teal-dark) / 0.2);
 }
-
-  .bk.bk-editable-field.bk-is-fullscreen .bk-editable-field-input {
+.bk.bk-editable-field.bk-is-fullscreen .bk-editable-field-input {
   display: flex;
   max-width: none;
-  flex: 1 1 0%;
+  flex: 1;
   flex-direction: column;
 }
-
-  .bk.bk-editable-field.bk-is-fullscreen .bk-editable-field-input > div:first-child {
+:is(.bk.bk-editable-field.bk-is-fullscreen .bk-editable-field-input)  > div:first-child {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1;
   flex-direction: column;
 }
-
-  .bk.bk-editable-field.bk-is-fullscreen .bk-editable-field-input > div:first-child > * {
-  flex: 1 1 0%;
+:is(:is(.bk.bk-editable-field.bk-is-fullscreen .bk-editable-field-input) > div:first-child)  > * {
+  flex: 1;
 }
-
-  .bk.bk-editable-field .bk-editable-field-input {
+.bk.bk-editable-field .bk-editable-field-input {
   width: 100%;
-  min-width: 360px;
   max-width: 700px;
+  min-width: 360px;
 }
-
-  @media (min-width: 768px) {
-
+@media (width >= 48rem) {
   .bk.bk-editable-field .bk-editable-field-input {
     border-radius: 4px;
   }
-    }
-
-  .bk.bk-editable-field .bk-editable-field-input .bk-editable-field-textarea {
+}
+:is(.bk.bk-editable-field .bk-editable-field-input) .bk-editable-field-textarea {
   position: relative;
 }
-
-  @media (min-width: 1024px) {
-
-  .bk.bk-editable-field .bk-editable-field-input .bk-editable-field-textarea {
+@media (width >= 64rem) {
+  :is(.bk.bk-editable-field .bk-editable-field-input) .bk-editable-field-textarea {
     min-width: 600px;
   }
-      }
-
-  .bk.bk-editable-field .bk-editable-field-input textarea {
+}
+:is(.bk.bk-editable-field .bk-editable-field-input) textarea {
   display: block;
   resize: none;
   appearance: none;
   padding: 10px;
+  --bk-tw-border-style: none;
   border-style: none;
   --bk-tw-shadow: 0 0 #0000;
-  --bk-tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+  --bk-tw-outline-style: none;
+  outline-style: none;
   background-color: transparent;
 }
-
-  .bk.bk-editable-field .bk-editable-field-input textarea:focus {
+:is(:is(.bk.bk-editable-field .bk-editable-field-input) textarea):focus {
+  --bk-tw-border-style: none !important;
   border-style: none !important;
+}
+:is(:is(.bk.bk-editable-field .bk-editable-field-input) textarea):focus {
   --bk-tw-shadow: 0 0 #0000 !important;
-  --bk-tw-shadow-colored: 0 0 #0000 !important;
-  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow) !important;
-  outline: 2px solid transparent !important;
-  outline-offset: 2px !important;
-  --bk-tw-ring-offset-shadow: var(--bk-tw-ring-inset) 0 0 0 var(--bk-tw-ring-offset-width) var(--bk-tw-ring-offset-color) !important;
-  --bk-tw-ring-shadow: var(--bk-tw-ring-inset) 0 0 0 calc(0px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color) !important;
-  box-shadow: var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow, 0 0 #0000) !important;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow) !important;
 }
-
-  .bk.bk-editable-field .bk-editable-field-input textarea {
+:is(:is(.bk.bk-editable-field .bk-editable-field-input) textarea):focus {
+  --bk-tw-ring-shadow: var(--bk-tw-ring-inset,) 0 0 0 calc(0px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color, currentcolor) !important;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow) !important;
+}
+:is(:is(.bk.bk-editable-field .bk-editable-field-input) textarea):focus {
+  --bk-tw-outline-style: none !important;
+  outline-style: none !important;
+}
+:is(.bk.bk-editable-field .bk-editable-field-input) textarea {
   min-height: 50px;
   width: 100%;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: var(--text-base, 16px);
+  line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
 }
-
-  @media (min-width: 1024px) {
-
-  .bk.bk-editable-field .bk-editable-field-input textarea {
-    font-size: 18px;
-    line-height: 28px;
+@media (width >= 64rem) {
+  :is(.bk.bk-editable-field .bk-editable-field-input) textarea {
+    font-size: var(--text-lg, 18px);
+    line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
   }
 }
-
-  .bk.bk-editable-field .bk-editable-field-input textarea {
+:is(.bk.bk-editable-field .bk-editable-field-input) textarea {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
 }
-
-  .bk.bk-editable-field .bk-editable-field-translate {
+.bk.bk-editable-field .bk-editable-field-translate {
   display: flex;
   align-items: center;
   gap: 3px;
+  border-right-style: var(--bk-tw-border-style);
   border-right-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-right-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-  padding-left: 10px;
-  padding-right: 10px;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-teal-dark) / var(--bk-tw-text-opacity, 1));
+  border-right-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding-inline: 10px;
+  color: rgb(var(--bk-theme-teal-dark) / 1);
 }
-
-  .bk.bk-editable-field .bk-editable-field-translate:disabled {
-  opacity: 0.5;
+:is(.bk.bk-editable-field .bk-editable-field-translate):disabled {
+  opacity: 50%;
 }
-
-  .bk.bk-editable-field .bk-editable-field-info-error {
+.bk.bk-editable-field .bk-editable-field-info-error {
   margin-left: auto;
-  padding-left: 10px;
-  padding-right: 10px;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
+  padding-inline: 10px;
+  color: rgb(var(--bk-theme-red-normal) / 1);
 }
-
-  .bk.bk-editable-field .bk-editable-field-info-hint {
+.bk.bk-editable-field .bk-editable-field-info-hint {
   margin-left: auto;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-inline: 10px;
   text-align: right;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 400;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-font-weight: var(--font-weight-normal, 400);
+  font-weight: var(--font-weight-normal, 400);
+  color: rgb(var(--bk-theme-mono-500) / 1);
 }
-
-  .bk.bk-editable-field .bk-editable-field-readability {
+.bk.bk-editable-field .bk-editable-field-readability {
   position: relative;
   display: flex;
   height: 32px;
   cursor: default;
   align-items: center;
   gap: 5px;
+  border-left-style: var(--bk-tw-border-style);
   border-left-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-left-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-  padding-left: 10px;
-  padding-right: 10px;
-  font-size: 12px;
-  line-height: 16px;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
+  border-left-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding-inline: 10px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  color: rgb(var(--bk-theme-mono-600) / 1);
   transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 200ms;
   transition-duration: 200ms;
   cursor: help;
 }
-
-  .bk.bk-editable-field .bk-editable-field-readability.bk-is-stale {
-  opacity: 0.4;
+.bk-is-stale:is(.bk.bk-editable-field .bk-editable-field-readability) {
+  opacity: 40%;
 }
-
-  .bk.bk-editable-field .bk-readability-scale {
+.bk.bk-editable-field .bk-readability-scale {
   margin-top: 15px;
   width: 100%;
   padding-bottom: 25px;
 }
-
-  .bk.bk-editable-field .bk-readability-scale-labels {
+.bk.bk-editable-field .bk-readability-scale-labels {
   position: relative;
   height: 16px;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-50) / 1);
 }
-
-  .bk.bk-editable-field .bk-readability-scale-labels > span {
+:is(.bk.bk-editable-field .bk-readability-scale-labels)  > span {
   position: absolute;
-  top: -5px;
-  --bk-tw-translate-x: -50%;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+  top: calc(5px * -1);
+  --bk-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
 }
-
-  .bk.bk-editable-field .bk-readability-scale-bar {
+.bk.bk-editable-field .bk-readability-scale-bar {
   position: relative;
   height: 12px;
 }
-
-  .bk.bk-editable-field .bk-readability-scale-segments {
+.bk.bk-editable-field .bk-readability-scale-segments {
   position: absolute;
   inset: 0px;
   overflow: hidden;
-  border-radius: 9999px;
+  border-radius: calc(infinity * 1px);
 }
-
-  .bk.bk-editable-field .bk-readability-scale-segment {
+.bk.bk-editable-field .bk-readability-scale-segment {
   position: absolute;
   top: 0px;
   height: 100%;
 }
-
-  .bk.bk-editable-field .bk-readability-scale-segment.bk-is-left {
+.bk-is-left:is(.bk.bk-editable-field .bk-readability-scale-segment) {
   left: 0px;
 }
-
-  .bk.bk-editable-field .bk-readability-scale-segment.bk-is-middle {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
+.bk-is-middle:is(.bk.bk-editable-field .bk-readability-scale-segment) {
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
 }
-
-  /* higher_easier (e.g. FRE): low=hard, high=easy */
-
-  .bk.bk-editable-field .bk-readability-scale.bk-is-higher_easier .bk-is-left {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+:is(.bk.bk-editable-field .bk-readability-scale.bk-is-higher_easier) .bk-is-left {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
 }
-
-  .bk.bk-editable-field .bk-readability-scale.bk-is-higher_easier .bk-is-right {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+:is(.bk.bk-editable-field .bk-readability-scale.bk-is-higher_easier) .bk-is-right {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
 }
-
-  /* higher_harder (e.g. LIX): low=easy, high=hard */
-
-  .bk.bk-editable-field .bk-readability-scale.bk-is-higher_harder .bk-is-left {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+:is(.bk.bk-editable-field .bk-readability-scale.bk-is-higher_harder) .bk-is-left {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
 }
-
-  .bk.bk-editable-field .bk-readability-scale.bk-is-higher_harder .bk-is-right {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+:is(.bk.bk-editable-field .bk-readability-scale.bk-is-higher_harder) .bk-is-right {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
 }
-
-  .bk.bk-editable-field .bk-readability-scale-marker {
+.bk.bk-editable-field .bk-readability-scale-marker {
   position: absolute;
-  top: -5px;
-  bottom: -5px;
+  top: calc(5px * -1);
+  bottom: calc(5px * -1);
   width: 3px;
-  --bk-tw-translate-x: -50%;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-  border-radius: 9999px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
+  --bk-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  border-radius: calc(infinity * 1px);
+  background-color: white;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3);
 }
-
-  .bk.bk-editable-field .bk-readability-scale-marker > span {
+:is(.bk.bk-editable-field .bk-readability-scale-marker)  > span {
   position: absolute;
   top: 100%;
-  left: 50%;
+  left: calc(1 / 2 * 100%);
   margin-top: 5px;
-  --bk-tw-translate-x: -50%;
-  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+  --bk-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
   white-space: nowrap;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 700;
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+  color: white;
 }
-
-  .bk.bk-editable-field .bk-editable-field-readability-dot {
+.bk.bk-editable-field .bk-editable-field-readability-dot {
   height: 8px;
   width: 8px;
   flex-shrink: 0;
-  border-radius: 9999px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
+  border-radius: calc(infinity * 1px);
+  background-color: rgb(var(--bk-theme-mono-300) / 1);
 }
-
-  .bk.bk-editable-field .bk-editable-field-readability-dot.bk-is-easy {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+.bk-is-easy:is(.bk.bk-editable-field .bk-editable-field-readability-dot) {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
 }
-
-  .bk.bk-editable-field .bk-editable-field-readability-dot.bk-is-ok {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
+.bk-is-ok:is(.bk.bk-editable-field .bk-editable-field-readability-dot) {
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
 }
-
-  .bk.bk-editable-field .bk-editable-field-readability-dot.bk-is-hard {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+.bk-is-hard:is(.bk.bk-editable-field .bk-editable-field-readability-dot) {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
 }
-
-  .bk.bk-editable-field .bk-editable-field-info-count {
+.bk.bk-editable-field .bk-editable-field-info-count {
   display: flex;
   height: 32px;
   align-items: center;
+  border-left-style: var(--bk-tw-border-style);
   border-left-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-left-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-  padding-left: 10px;
-  padding-right: 10px;
+  border-left-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding-inline: 10px;
 }
 </style>

package/dist/runtime/editor/features/editable-mask/index.vue

@@ -38,11 +38,11 @@ export default {
 };
 </script>
 
-<style>
-html.bk-hide-non-editable .bk-main-canvas > * {
-    visibility: hidden
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(html.bk-hide-non-editable .bk-main-canvas)  > * {
+  visibility: hidden;
 }
-    html.bk-hide-non-editable .bk-main-canvas [data-blokkli-provider-active='true'] {
-    visibility: visible
+:is(html.bk-hide-non-editable .bk-main-canvas) [data-blokkli-provider-active='true'] {
+  visibility: visible;
 }
 </style>

package/dist/runtime/editor/features/entity-title/index.vue

@@ -3,7 +3,9 @@
     <button
       v-if="scheduledDate"
       class="bk-toolbar-title-scheduled _bk_group/tooltip"
-      @click.prevent="eventBus.emit('publish:show-dialog')"
+      data-test="toolbar-scheduled-date"
+      :data-test-scheduled-date="scheduledDate"
+      @click.prevent="onShowPublishDialog"
     >
       <Icon name="bk_mdi_calendar_clock" />
       <div class="bk-toolbar-title-scheduled-text">
@@ -18,8 +20,10 @@
     <button
       ref="buttonEl"
       class="bk-toolbar-button _bk_group/tooltip _bk_w-full _bk_justify-start _bk_relative"
+      data-test="entity-title"
+      :data-test-entity-status="statusIndicatorStatus"
       :disabled="!state.canEdit.value"
-      @click="eventBus.emit('editEntity')"
+      @click="onEditEntity"
     >
       <div class="bk-toolbar-title _bk_relative _bk_size-full">
         <div
@@ -53,6 +57,14 @@ defineBlokkliFeature({
 const { state, eventBus, $t, ui } = useBlokkli();
 const { entity, mutations } = state;
 const buttonEl = useTemplateRef("buttonEl");
+async function onEditEntity() {
+  await ui.flushPendingChanges();
+  eventBus.emit("editEntity");
+}
+async function onShowPublishDialog() {
+  await ui.flushPendingChanges();
+  eventBus.emit("publish:show-dialog");
+}
 const scheduledDate = computed(() => state.publishOptions.value?.publishOn);
 const formattedScheduledDate = computed(() => {
   if (!scheduledDate.value) {
@@ -86,7 +98,7 @@ defineCommands(() => {
       "@label",
       entity.value.label || "Page"
     ),
-    callback: () => eventBus.emit("editEntity"),
+    callback: onEditEntity,
     icon: "bk_mdi_edit"
   };
 });

package/dist/runtime/editor/features/exit/index.vue

@@ -22,7 +22,7 @@ function onClick() {
 defineMenuButton(() => {
   return {
     id: "exit",
-    title: $t("exitTitle", "Close"),
+    title: $t("close", "Close"),
     description: $t("exitDescription", "Close editor without publishing"),
     icon: "bk_mdi_exit_to_app",
     weight: 100,

package/dist/runtime/editor/features/fragments/Dialog/index.vue

@@ -25,6 +25,7 @@
               v-model="searchText"
               type="text"
               class="bk-form-input"
+              data-test="fragments-search"
               :placeholder="
   $t('fragmentsPlaceDialogSearchPlaceholder', 'Search fragments')
 "
@@ -44,6 +45,8 @@
   'bk-is-selected': selectedItem === item.name
 }"
             :data-bk-fragment-name="item.name"
+            data-test="fragment-option"
+            :data-test-fragment-name="item.name"
             @click="selectedItem = item.name"
           >
             <FragmentItem
@@ -57,7 +60,11 @@
       </div>
     </div>
     <template #footer>
-      <button class="bk-button bk-is-primary" @click="onSubmit">
+      <button
+        class="bk-button bk-scheme-accent"
+        data-test="fragments-submit"
+        @click="onSubmit"
+      >
         {{ $t("fragmentsPlaceDialogSubmitButton", "Add selected fragment") }}
       </button>
     </template>
@@ -120,93 +127,3 @@ const visible = computed(() => {
   return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.name);
 });
 </script>
-
-<style>
-.bk-vars .bk-library-dialog-list {
-display: grid;
-gap: 20px
-}
-    @container (min-width: 700px) {
-.bk-vars .bk-library-dialog-list {
-grid-template-columns: repeat(2, minmax(0, 1fr))
-}
-    }
-    .bk-vars .bk-library-dialog-list > li {
-cursor: pointer;
-overflow: hidden;
-border-radius: 4px;
-border-width: 1px
-}
-    .bk-vars .bk-library-dialog-list > li .bk-blokkli-item-label {
-pointer-events: none;
-font-weight: 600
-}
-    @media not all and (hover: none) {
-        .bk-vars .bk-library-dialog-list > li:not(.bk-is-selected):hover {
---bk-tw-border-opacity: 1;
-border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1))
-}
-          .bk-vars .bk-library-dialog-list > li:not(.bk-is-selected):hover .bk-block-preview-item-header {
---bk-tw-bg-opacity: 1;
-background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1))
-}
-      }
-    .bk-vars .bk-library-dialog-list > li.bk-is-selected {
---bk-tw-border-opacity: 1;
-border-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1))
-}
-    .bk-vars .bk-library-dialog-list > li.bk-is-selected .bk-block-preview-item-header {
---bk-tw-bg-opacity: 1;
-background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1));
---bk-tw-text-opacity: 1;
-color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
-}
-    .bk-vars .bk-library-dialog-list > li.bk-is-selected .bk-blokkli-item-label-icon {
---bk-tw-border-opacity: 1;
-border-color: rgb(var(--bk-theme-accent-500) / var(--bk-tw-border-opacity, 1));
---bk-tw-bg-opacity: 1;
-background-color: rgb(var(--bk-theme-accent-900) / var(--bk-tw-bg-opacity, 1));
---bk-tw-text-opacity: 1;
-color: rgb(var(--bk-theme-accent-100) / var(--bk-tw-text-opacity, 1))
-}
-    .bk-vars .bk-library-dialog-list > li.bk-is-selected .bk-blokkli-item-label {
---bk-tw-text-opacity: 1;
-color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
-}
-  .bk-vars .bk-library-dialog-content {
-position: relative
-}
-  .bk-vars .bk-reusable-dialog-form .bk-info-box {
-margin-top: 20px;
-margin-bottom: 20px
-}
-  .bk-vars .bk-library-dialog .bk-form-group,
-    .bk-vars .bk-library-dialog .bk-lead {
-margin-top: 20px;
-padding-left: 20px;
-padding-right: 20px
-}
-  .bk-vars .bk-library-dialog .bk-info-box {
-margin-left: 20px;
-margin-right: 20px;
-margin-top: 15px;
-margin-bottom: 15px
-}
-  .bk-vars .bk-library-dialog .bk-library-dialog-content {
-margin-top: 20px;
-margin-bottom: 20px;
-border-top-width: 1px;
---bk-tw-border-opacity: 1;
-border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-padding-left: 20px;
-padding-right: 20px;
-padding-top: 20px
-}
-  .bk-vars .bk-library-pagination {
-position: sticky;
-bottom: 0px;
-z-index: 50;
---bk-tw-bg-opacity: 1;
-background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1))
-}
-</style>