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

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

@@ -14,7 +14,7 @@
       class="_bk_w-[680px] _bk_max-h-300 _bk_overflow-y-auto _bk_p-10 _bk_bg-mono-200"
       @pointerup="onListPointerUp"
     >
-      <GrowOnly class="_bk_bg-white">
+      <GrowOnly class="_bk_bg-white _bk_shadow-md">
         <div
           v-for="(item, i) in localItems"
           :key="item.key"
@@ -43,13 +43,12 @@
               {{ item.label }}
             </span>
           </div>
-          <button
-            type="button"
-            class="_bk_size-25 _bk_mr-8 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_shrink-0 _bk_text-mono-400 _bk_hover:bg-red-light _bk_hover:text-red-dark _bk_disabled:opacity-30 _bk_disabled:pointer-events-none _bk_[&_svg]:size-[14px] _bk_[&_svg]:fill-current"
+          <ButtonAction
+            icon="bk_mdi_close"
+            class="_bk_mr-10 _bk_relative"
+            :label="$t('remove', 'Remove')"
             @click.stop.prevent="removeItem(i)"
-          >
-            <Icon name="bk_mdi_close" />
-          </button>
+          />
           <div
             class="bk-droppable-field-edit-indicator _bk_col-span-2"
             :class="{
@@ -129,14 +128,19 @@
         @click.prevent="onAddClick"
       >
         <Icon name="bk_mdi_image" />
-        {{ $t("droppableFieldOpenLibrary", "Media Library") }}
+        {{ $t("mediaLibrary", "Media Library") }}
       </button>
     </div>
   </ArtboardTooltip>
 </template>
 
 <script setup>
-import { ArtboardTooltip, GrowOnly, Icon } from "#blokkli/editor/components";
+import {
+  ArtboardTooltip,
+  GrowOnly,
+  Icon,
+  ButtonAction
+} from "#blokkli/editor/components";
 import {
   computed,
   ref,
@@ -202,10 +206,7 @@ const activeIndicator = computed(() => {
   return dropIndex.value;
 });
 const title = computed(
-  () => $t("droppableFieldEditLabel", "Edit @label").replace(
-    "@label",
-    props.config.label
-  )
+  () => $t("editLabel", "Edit @label").replace("@label", props.config.label)
 );
 const hasChanged = computed(() => {
   if (localItems.value.length !== originalItems.value.length) return true;
@@ -523,7 +524,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-droppable-field-edit {
   --bk-bg: white;
   --bk-header-bg: rgb(var(--bk-theme-teal-normal) / 1);
@@ -531,17 +532,18 @@ onBeforeUnmount(() => {
   --bk-border: rgb(var(--bk-theme-teal-normal) / 1);
   --bk-header-hover: rgb(var(--bk-theme-teal-dark) / 0.2);
 }
-
-  .bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator {
-    height: 4px;
+.bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator {
+  height: 4px;
+}
+.bk-is-visible:is(.bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator) {
+  background-color: rgb(var(--bk-theme-teal-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk-is-visible:is(.bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator) {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-teal-normal) / 1) 30%, transparent);
   }
-
-  .bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator.bk-is-visible {
-  background-color: rgb(var(--bk-theme-teal-normal) / 0.3);
 }
-
-  .bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator.bk-is-active {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-teal-normal) / var(--bk-tw-bg-opacity, 1));
+.bk-is-active:is(.bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator) {
+  background-color: rgb(var(--bk-theme-teal-normal) / 1);
 }
 </style>

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

@@ -2,7 +2,7 @@
   <PluginItemAction
     id="edit"
     edit-only
-    :title="$t('edit', 'Edit...')"
+    :title="$t('edit', 'Edit', { more: true })"
     :disabled="editDisabledReason"
     meta
     key-code="E"
@@ -67,14 +67,11 @@ const editDisabledReason = computed(() => {
     item.parentBlockBundle
   );
   if (definition?.editor?.disableEdit && !getComplexOption(item)) {
-    return $t(
-      "editDisabledByDefinition",
-      "Editing is disabled for this block type."
-    );
+    return $t("editingDisabled", "Editing is disabled for this block type.");
   }
   if (!permissions.checkBlockBundlePermission(item.bundle, "edit")) {
     return $t(
-      "editNoPermission",
+      "noEditPermission",
       "You do not have permission to edit this block."
     );
   }

package/dist/runtime/editor/features/edit-form/index.vue

@@ -58,7 +58,7 @@ const titleText = computed(() => {
     case "block:translate":
       return $t("editFormBlockTranslate", "Translate @label (@language)");
     case "block:edit":
-      return $t("editFormBlockEdit", "Edit @label");
+      return $t("editLabel", "Edit @label");
     case "entity:edit":
       return $t("editFormEntityEdit", "Edit @label");
     case "entity:translate":

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

@@ -10,6 +10,8 @@
       :style
       :src="url"
       class="_bk_block _bk_w-full"
+      data-test="editable-frame"
+      :data-test-src="url"
       @load="onIframeLoad"
     />
   </div>
@@ -140,19 +142,19 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
-.bk .bk-editable-field-frame:not(.bk-is-fullscreen) iframe {
-      max-height: calc(100vh - 500px);
-    }
-      @media (min-width: 1024px) {
-.bk .bk-editable-field-frame:not(.bk-is-fullscreen) iframe {
-            min-width: 700px;
-        min-height: 400px;
-      }
-      }
-      @media (min-width: 1280px) {
-.bk .bk-editable-field-frame:not(.bk-is-fullscreen) iframe {
-            min-width: 700px;
-      }
-      }
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk .bk-editable-field-frame):not(.bk-is-fullscreen) iframe {
+  max-height: calc(100vh - 500px);
+}
+@media (width >= 64rem) {
+  :is(.bk .bk-editable-field-frame):not(.bk-is-fullscreen) iframe {
+    min-width: 700px;
+    min-height: 400px;
+  }
+}
+@media (width >= 80rem) {
+  :is(.bk .bk-editable-field-frame):not(.bk-is-fullscreen) iframe {
+    min-width: 700px;
+  }
+}
 </style>

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

@@ -3,6 +3,7 @@
     id="bk-editable-field-textarea"
     v-model="modelValue"
     class="bk bk-editable-field-textarea"
+    data-test="editable-plaintext"
     enterkeyhint="done"
     submit-on-enter
     rows="2"

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

@@ -134,79 +134,76 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-readability-chunk-overlay {
   pointer-events: none;
   position: absolute;
   top: 0px;
   left: 0px;
-  transform-origin: 0 0
+  transform-origin: 0 0;
 }
-
-  .bk.bk-readability-chunk-overlay .bk-readability-chunk-rect {
+.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect {
   position: absolute;
   top: 0px;
   left: 0px;
   border-radius: 4px;
-  border-width: 2px
+  border-style: var(--bk-tw-border-style);
+  border-width: 2px;
 }
-
-  .bk.bk-readability-chunk-overlay .bk-readability-chunk-rect.bk-is-easy {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-border-opacity, 1));
-  background-color: rgb(var(--bk-theme-lime-light) / 0.3)
+.bk-is-easy:is(.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect) {
+  border-color: rgb(var(--bk-theme-lime-normal) / 1);
+  background-color: rgb(var(--bk-theme-lime-light) / 1);
 }
-
-  .bk.bk-readability-chunk-overlay .bk-readability-chunk-rect.bk-is-easy .bk-readability-chunk-badge {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+@supports (color: color-mix(in lab, red, red)) {
+  .bk-is-easy:is(.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect) {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-lime-light) / 1) 30%, transparent);
+  }
 }
-
-  .bk.bk-readability-chunk-overlay .bk-readability-chunk-rect.bk-is-ok {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-border-opacity, 1));
-  background-color: rgb(var(--bk-theme-yellow-light) / 0.3)
+.bk-is-easy:is(.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect) .bk-readability-chunk-badge {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
+  color: white;
 }
-
-  .bk.bk-readability-chunk-overlay .bk-readability-chunk-rect.bk-is-ok .bk-readability-chunk-badge {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1))
+.bk-is-ok:is(.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect) {
+  border-color: rgb(var(--bk-theme-yellow-normal) / 1);
+  background-color: rgb(var(--bk-theme-yellow-light) / 1);
 }
-
-  .bk.bk-readability-chunk-overlay .bk-readability-chunk-rect.bk-is-hard {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
-  background-color: rgb(var(--bk-theme-red-light) / 0.3)
+@supports (color: color-mix(in lab, red, red)) {
+  .bk-is-ok:is(.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect) {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-light) / 1) 30%, transparent);
+  }
 }
-
-  .bk.bk-readability-chunk-overlay .bk-readability-chunk-rect.bk-is-hard .bk-readability-chunk-badge {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+.bk-is-ok:is(.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect) .bk-readability-chunk-badge {
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
+  color: rgb(var(--bk-theme-yellow-dark) / 1);
 }
-
-  .bk.bk-readability-chunk-overlay.bk-is-stale .bk-readability-chunk-rect {
-  opacity: 0.3
+.bk-is-hard:is(.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect) {
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+  background-color: rgb(var(--bk-theme-red-light) / 1);
 }
-
-  .bk.bk-readability-chunk-overlay .bk-readability-chunk-badge {
+@supports (color: color-mix(in lab, red, red)) {
+  .bk-is-hard:is(.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect) {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-light) / 1) 30%, transparent);
+  }
+}
+.bk-is-hard:is(.bk.bk-readability-chunk-overlay .bk-readability-chunk-rect) .bk-readability-chunk-badge {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  color: white;
+}
+.bk.bk-readability-chunk-overlay.bk-is-stale .bk-readability-chunk-rect {
+  opacity: 30%;
+}
+.bk.bk-readability-chunk-overlay .bk-readability-chunk-badge {
   position: absolute;
   right: 0px;
   bottom: 100%;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
-  padding-left: 5px;
-  padding-right: 5px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  white-space: nowrap
+  padding-inline: 5px;
+  padding-block: 2px;
+  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);
+  white-space: nowrap;
 }
 </style>

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

@@ -3,6 +3,9 @@
     v-if="readabilityScore != null && readabilityBand"
     class="bk-editable-field-readability _bk_group/tooltip"
     :class="{ 'bk-is-stale': stale }"
+    data-test="editable-readability"
+    :data-test-band="readabilityBand"
+    :data-test-too-short="false"
   >
     <span
       class="bk-editable-field-readability-dot"
@@ -73,7 +76,12 @@
       </template>
     </Tooltip>
   </div>
-  <div v-else-if="tooShort" class="bk-editable-field-readability">
+  <div
+    v-else-if="tooShort"
+    class="bk-editable-field-readability"
+    data-test="editable-readability"
+    :data-test-too-short="true"
+  >
     <span class="bk-editable-field-readability-dot" />
     <span>{{ $t("readabilityTooShort", "Too short") }}</span>
     <Tooltip :label="minWordsText" />