@blokkli/editor 2.0.0-alpha.51 → 2.0.0-alpha.53

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

@@ -125,14 +125,21 @@ function onClick(items) {
     }
     return;
   }
-  const complexOption = getComplexOption(item);
-  if (complexOption) {
-    eventBus.emit("option:edit-complex", {
-      uuid: item.uuid,
-      key: complexOption.key,
-      dataType: complexOption.dataType
-    });
-    return;
+  const definition = definitions.getBlockDefinition(
+    item.bundle,
+    item.fieldListType,
+    item.parentBlockBundle
+  );
+  if (definition?.editor?.disableEdit) {
+    const complexOption = getComplexOption(item);
+    if (complexOption) {
+      eventBus.emit("option:edit-complex", {
+        uuid: item.uuid,
+        key: complexOption.key,
+        dataType: complexOption.dataType
+      });
+      return;
+    }
   }
   eventBus.emit("item:edit", {
     uuid: item.uuid,
@@ -140,15 +147,6 @@ function onClick(items) {
   });
 }
 onBlokkliEvent("item:doubleClick", function(block) {
-  const complexOption = getComplexOption(block);
-  if (complexOption) {
-    eventBus.emit("option:edit-complex", {
-      uuid: block.uuid,
-      key: complexOption.key,
-      dataType: complexOption.dataType
-    });
-    return;
-  }
   onClick([block]);
 });
 </script>

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

@@ -1,11 +1,20 @@
 <template>
   <div
-    class="bk-form-overlay-iframe"
+    class="_bk_relative _bk_h-full _bk_flex _bk_flex-col bk"
     @scroll.stop
     @touchstart.stop.capture.prevent
     @touchmove.stop.capture.prevent
   >
-    <iframe ref="iframe" allowtransparency :src="url" @load="onIFrameLoad" />
+    <NotEditStateInfo v-if="isNotEditState" />
+    <div class="_bk_relative _bk_flex-1">
+      <iframe
+        ref="iframe"
+        allowtransparency
+        :src="url"
+        class="_bk_absolute _bk_top-0 _bk_left-0 _bk_size-full"
+        @load="onIFrameLoad"
+      />
+    </div>
     <BlokkliTransition name="loading">
       <Loading v-if="!isLoaded" />
     </BlokkliTransition>
@@ -18,9 +27,14 @@ import {
   useBlokkli,
   onUnmounted,
   onMounted,
-  useTemplateRef
+  useTemplateRef,
+  computed
 } from "#imports";
-import { Loading, BlokkliTransition } from "#blokkli/editor/components";
+import {
+  Loading,
+  BlokkliTransition,
+  NotEditStateInfo
+} from "#blokkli/editor/components";
 const { eventBus } = useBlokkli();
 const iframe = useTemplateRef("iframe");
 const isLoaded = ref(false);
@@ -29,6 +43,9 @@ const props = defineProps({
   url: { type: String, required: true },
   form: { type: Object, required: true }
 });
+const isNotEditState = computed(() => {
+  return props.form.id === "entity:edit" || props.form.id === "entity:translate";
+});
 function onIFrameLoad() {
   isLoaded.value = true;
   if (iframe.value?.contentWindow) {

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

@@ -6,14 +6,22 @@ type __VLS_Props = {
     host: EntityContext;
     initialHeight: number;
 };
+/**
+ * Push a new value into the iframe's editor.
+ */
+declare function setValue(text: string): void;
 type __VLS_ModelProps = {
     modelValue: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    setValue: typeof setValue;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    formatted: (text: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onFormatted?: ((text: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -2,7 +2,7 @@
   <div class="bk-editable-field-frame">
     <iframe
       ref="iframe"
-      :style="{ height: Math.max(height, 150) + 'px' }"
+      :style="{ height: Math.max(height, 400) + 'px' }"
       :src="url"
       @load="onIframeLoad"
     />
@@ -29,6 +29,7 @@ const props = defineProps({
   initialHeight: { type: Number, required: true }
 });
 const modelValue = defineModel({ type: String, ...{ required: true } });
+const emit = defineEmits(["formatted"]);
 const iframe = useTemplateRef("iframe");
 function onIframeLoad() {
   if (!iframe.value || !PROPAGATE_WHEEL) {
@@ -95,18 +96,25 @@ const url = computed(() => {
     fieldName: props.fieldName
   });
 });
-const original = ref("");
 const onMessage = (e) => {
   if (typeof e.data === "object") {
     if (e.data.name === "blokkli__editable_field_update") {
       modelValue.value = e.data.data.text;
+    } else if (e.data.name === "blokkli__editable_field_update_formatted") {
+      emit("formatted", e.data.data.text);
     } else if (e.data.name === "blokkli__editable_field_update_height") {
       height.value = e.data.data.height;
     }
   }
 };
+function setValue(text) {
+  iframe.value?.contentWindow?.postMessage(
+    { name: "blokkli__editable_field_set_value", data: { text } },
+    "*"
+  );
+}
+defineExpose({ setValue });
 onMounted(() => {
-  original.value = modelValue.value;
   height.value = props.initialHeight;
   window.addEventListener("message", onMessage);
 });
@@ -114,3 +122,24 @@ onBeforeUnmount(() => {
   window.removeEventListener("message", onMessage);
 });
 </script>
+
+<style>
+.bk .bk-editable-field-frame iframe {
+  display: block;
+  width: 100%;
+  max-height: calc(100vh - 500px)
+}
+
+  @media (min-width: 1024px) {
+.bk .bk-editable-field-frame iframe {
+    min-width: 700px;
+    min-height: 400px
+  }
+  }
+
+  @media (min-width: 1280px) {
+.bk .bk-editable-field-frame iframe {
+    min-width: 700px
+  }
+  }
+</style>

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

@@ -6,14 +6,22 @@ type __VLS_Props = {
     host: EntityContext;
     initialHeight: number;
 };
+/**
+ * Push a new value into the iframe's editor.
+ */
+declare function setValue(text: string): void;
 type __VLS_ModelProps = {
     modelValue: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    setValue: typeof setValue;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    formatted: (text: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onFormatted?: ((text: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -133,3 +133,80 @@ onBeforeUnmount(() => {
   }
 });
 </script>
+
+<style>
+.bk.bk-readability-chunk-overlay {
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  transform-origin: 0 0
+}
+
+  .bk.bk-readability-chunk-overlay .bk-readability-chunk-rect {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border-radius: 4px;
+  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.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))
+}
+
+  .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.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.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)
+}
+
+  .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.bk-readability-chunk-overlay.bk-is-stale .bk-readability-chunk-rect {
+  opacity: 0.3
+}
+
+  .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
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="readabilityScore != null && readabilityBand"
-    class="bk-editable-field-readability"
+    class="bk-editable-field-readability _bk_group/tooltip"
     :class="{ 'bk-is-stale': stale }"
   >
     <span
@@ -12,73 +12,71 @@
       >{{ readability.analyzer.value.scoreLabel }}
       {{ readability.formatScore(readabilityScore) }}</span
     >
-    <div class="bk-tooltip">
-      <p>
-        {{
-          $t(
-  "readabilityTooltipDescription",
-  "@label measures how easy the text is to read."
-).replace("@label", readability.analyzer.value.scoreLabel)
-        }}
-      </p>
-      <p v-if="fieldType === 'markup'">
-        {{
-          $t(
-  "readabilityEntireText",
-  "This score is calculated for the entire text."
-)
-        }}
-      </p>
-      <div
-        v-if="scaleInfo"
-        class="bk-readability-scale"
-        :class="'bk-is-' + scaleInfo.direction"
-      >
-        <div class="bk-readability-scale-labels">
-          <span :style="{ left: thresholdPositions.first + '%' }">{{
-            scaleInfo.thresholds[0]
-          }}</span>
-          <span :style="{ left: thresholdPositions.second + '%' }">{{
-            scaleInfo.thresholds[1]
-          }}</span>
-        </div>
-        <div class="bk-readability-scale-bar">
-          <div class="bk-readability-scale-segments">
-            <div
-              class="bk-readability-scale-segment bk-is-left"
-              :style="{ width: thresholdPositions.first + '%' }"
-            />
-            <div
-              class="bk-readability-scale-segment bk-is-middle"
-              :style="{
+    <Tooltip
+      placement="below-right"
+      :label="
+  $t(
+    'readabilityTooltipDescription',
+    '@label measures how easy the text is to read.'
+  ).replace('@label', readability.analyzer.value.scoreLabel)
+"
+      :description="
+  fieldType === 'markup' ? $t(
+    'readabilityEntireText',
+    'This score is calculated for the entire text.'
+  ) : void 0
+"
+    >
+      <template #status>
+        <div
+          v-if="scaleInfo"
+          class="bk-readability-scale"
+          :class="'bk-is-' + scaleInfo.direction"
+        >
+          <div class="bk-readability-scale-labels">
+            <span :style="{ left: thresholdPositions.first + '%' }">{{
+              scaleInfo.thresholds[0]
+            }}</span>
+            <span :style="{ left: thresholdPositions.second + '%' }">{{
+              scaleInfo.thresholds[1]
+            }}</span>
+          </div>
+          <div class="bk-readability-scale-bar">
+            <div class="bk-readability-scale-segments">
+              <div
+                class="bk-readability-scale-segment bk-is-left"
+                :style="{ width: thresholdPositions.first + '%' }"
+              />
+              <div
+                class="bk-readability-scale-segment bk-is-middle"
+                :style="{
   left: thresholdPositions.first + '%',
   width: thresholdPositions.second - thresholdPositions.first + '%'
 }"
-            />
-            <div
-              class="bk-readability-scale-segment bk-is-right"
-              :style="{
+              />
+              <div
+                class="bk-readability-scale-segment bk-is-right"
+                :style="{
   left: thresholdPositions.second + '%',
   width: 100 - thresholdPositions.second + '%'
 }"
-            />
-          </div>
-          <div
-            class="bk-readability-scale-marker"
-            :style="{ left: markerPosition + '%' }"
-          >
-            <span>{{ readability.formatScore(readabilityScore) }}</span>
+              />
+            </div>
+            <div
+              class="bk-readability-scale-marker"
+              :style="{ left: markerPosition + '%' }"
+            >
+              <span>{{ readability.formatScore(readabilityScore) }}</span>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      </template>
+    </Tooltip>
   </div>
   <div v-else-if="tooShort" class="bk-editable-field-readability">
     <span class="bk-editable-field-readability-dot" />
     <span>{{ $t("readabilityTooShort", "Too short") }}</span>
-    <div class="bk-tooltip">
-      {{ minWordsText }}
-    </div>
+    <Tooltip :label="minWordsText" />
   </div>
 </template>
 
@@ -91,6 +89,7 @@ import {
   onBeforeUnmount,
   useBlokkli
 } from "#imports";
+import { Tooltip } from "#blokkli/editor/components";
 const { readability, context, $t } = useBlokkli();
 const props = defineProps({
   text: { type: String, required: true },