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

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.53",
+  "version": "2.0.0-alpha.54",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -19,7 +19,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.53";
+const version = "2.0.0-alpha.54";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];

package/dist/runtime/editor/components/Toolbar/index.vue

@@ -36,7 +36,7 @@
     <div
       v-show="activeSidebarRightBottom"
       id="bk-sidebar-content-right-bottom"
-      class="bk-sidebar bk-is-right-bottom"
+      class="bk-sidebar bk-is-right-bottom bk"
       :class="{ 'bk-is-hidden': !sidebarVisible }"
     />
   </div>

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

@@ -5,6 +5,7 @@ type __VLS_Props = {
     fieldName: string;
     host: EntityContext;
     initialHeight: number;
+    isFullscreen: boolean;
 };
 /**
  * Push a new value into the iframe's editor.

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

@@ -1,9 +1,15 @@
 <template>
-  <div class="bk-editable-field-frame">
+  <div
+    class="bk-editable-field-frame"
+    :class="{
+  'bk-is-fullscreen': isFullscreen
+}"
+  >
     <iframe
       ref="iframe"
-      :style="{ height: Math.max(height, 400) + 'px' }"
+      :style
       :src="url"
+      class="_bk_block _bk_w-full"
       @load="onIframeLoad"
     />
   </div>
@@ -26,10 +32,21 @@ const props = defineProps({
   type: { type: String, required: true },
   fieldName: { type: String, required: true },
   host: { type: Object, required: true },
-  initialHeight: { type: Number, required: true }
+  initialHeight: { type: Number, required: true },
+  isFullscreen: { type: Boolean, required: true }
 });
 const modelValue = defineModel({ type: String, ...{ required: true } });
 const emit = defineEmits(["formatted"]);
+const style = computed(() => {
+  if (props.isFullscreen) {
+    return {
+      height: "100%"
+    };
+  }
+  return {
+    height: Math.max(height.value, 400) + "px"
+  };
+});
 const iframe = useTemplateRef("iframe");
 function onIframeLoad() {
   if (!iframe.value || !PROPAGATE_WHEEL) {
@@ -124,22 +141,18 @@ onBeforeUnmount(() => {
 </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
-  }
-  }
+.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>

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

@@ -5,6 +5,7 @@ type __VLS_Props = {
     fieldName: string;
     host: EntityContext;
     initialHeight: number;
+    isFullscreen: boolean;
 };
 /**
  * Push a new value into the iframe's editor.

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

@@ -44,6 +44,7 @@
           :field-name="fieldName"
           :host="host"
           :initial-height="scrollHeight"
+          :is-fullscreen
           @formatted="onFormattedValue"
         />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.53",
+  "version": "2.0.0-alpha.54",
   "description": "Interactive page building experience for Nuxt",
   "keywords": [
     "cms",