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

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

@@ -27,7 +27,11 @@
         }}</span>
       </button>
     </template>
-    <form ref="form" class="bk-editable-field-input" @submit.prevent="save">
+    <form
+      ref="form"
+      class="bk-editable-field-input"
+      @submit.prevent="save"
+    >
       <div ref="input">
         <InputContenteditable
           v-if="config.type === 'markup'"
@@ -74,7 +78,7 @@
           @click.prevent="autoTranslate"
         >
           <Icon name="bk_mdi_translate" class="_bk_size-15" />
-          {{ $t("editableFieldTranslate", "Translate") }}
+          {{ $t("translate", "Translate") }}
           <Tooltip
             :label="
   $t(
@@ -362,7 +366,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 +374,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

@@ -1,25 +1,13 @@
 <template>
-  <PluginViewOption
-    id="mask"
-    v-model="isActive"
-    :label="$t('maskToggle', 'Toggle non-editable areas')"
-    :title-on="$t('maskHide', 'Hide non-editable areas')"
-    :title-off="$t('maskShow', 'Show non-editable areas')"
-    :tour-text="
-  $t(
-    'maskTourText',
-    'Toggle between showing or hiding non-editable parts of the page.'
-  )
-"
-    icon="bk_mdi_texture"
-    key-code="M"
-  />
+  <div />
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
-import { PluginViewOption } from "#blokkli/editor/plugins";
-import { addElementClasses } from "#blokkli/editor/composables";
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import {
+  addElementClasses,
+  defineViewOption
+} from "#blokkli/editor/composables";
 defineBlokkliFeature({
   id: "editable-mask",
   icon: "bk_mdi_texture",
@@ -28,8 +16,21 @@ defineBlokkliFeature({
   viewports: ["desktop"]
 });
 const { $t } = useBlokkli();
-const isActive = ref(false);
-addElementClasses(document.documentElement, "bk-hide-non-editable", isActive);
+const { isVisible } = defineViewOption({
+  id: "mask",
+  label: $t("viewOptionNonEditableAreas", "Only editable areas"),
+  description: $t(
+    "viewOptionNonEditableAreasDescription",
+    "Hides parts of the page that cannot be edited."
+  ),
+  tourText: $t(
+    "maskTourText",
+    "Toggle between showing or hiding non-editable parts of the page."
+  ),
+  icon: "bk_mdi_texture",
+  keyCode: "M"
+});
+addElementClasses(document.documentElement, "bk-hide-non-editable", isVisible);
 </script>
 
 <script>
@@ -38,11 +39,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,7 @@
     <button
       v-if="scheduledDate"
       class="bk-toolbar-title-scheduled _bk_group/tooltip"
-      @click.prevent="eventBus.emit('publish:show-dialog')"
+      @click.prevent="onShowPublishDialog"
     >
       <Icon name="bk_mdi_calendar_clock" />
       <div class="bk-toolbar-title-scheduled-text">
@@ -19,7 +19,7 @@
       ref="buttonEl"
       class="bk-toolbar-button _bk_group/tooltip _bk_w-full _bk_justify-start _bk_relative"
       :disabled="!state.canEdit.value"
-      @click="eventBus.emit('editEntity')"
+      @click="onEditEntity"
     >
       <div class="bk-toolbar-title _bk_relative _bk_size-full">
         <div
@@ -53,6 +53,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 +94,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,