@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

package/dist/runtime/components/Edit/Features/EditableField/index.vue

@@ -1,198 +1,145 @@
 <template>
   <Teleport to="body">
-    <Transition :name="hasTransition ? 'bk-editable' : undefined">
+    <Transition :name="hasTransition ? 'bk-editable' : void 0">
       <Overlay v-if="editable" v-bind="editable" :key="key" @close="close" />
     </Transition>
   </Teleport>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   ref,
   useBlokkli,
   watch,
-  defineBlokkliFeature,
-} from '#imports'
-import Overlay from './Overlay/index.vue'
-import type {
-  DraggableExistingBlock,
-  EditableFieldConfig,
-  EntityContext,
-} from '#blokkli/types'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-import { falsy } from '#blokkli/helpers'
-
+  defineBlokkliFeature
+} from "#imports";
+import Overlay from "./Overlay/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineCommands from "#blokkli/helpers/composables/defineCommands";
+import { falsy } from "#blokkli/helpers";
 defineBlokkliFeature({
-  id: 'editable-field',
-  icon: 'textbox',
-  label: 'Editable Field',
-  requiredAdapterMethods: ['updateFieldValue', 'getEditableFieldConfig'],
-  description: 'Implements a form overlay to edit a single field of a block.',
-})
-
-type Editable = {
-  fieldName: string
-  host: DraggableExistingBlock | EntityContext
-  element: HTMLElement
-  config: EditableFieldConfig
-  isComponent?: boolean
-  value?: string
-}
-
-const { selection, adapter, types, $t, dom, runtimeConfig, state } =
-  useBlokkli()
-const editable = ref<Editable | null>(null)
-const hasTransition = ref(false)
-
+  id: "editable-field",
+  icon: "textbox",
+  label: "Editable Field",
+  requiredAdapterMethods: ["updateFieldValue", "getEditableFieldConfig"],
+  description: "Implements a form overlay to edit a single field of a block."
+});
+const { selection, adapter, types, $t, dom, runtimeConfig, state } = useBlokkli();
+const editable = ref(null);
+const hasTransition = ref(false);
 const key = computed(() => {
   if (!editable.value) {
-    return ''
+    return "";
   }
-  return editable.value.host.uuid + editable.value.fieldName
-})
-
-const getHost = (
-  uuid?: string,
-): DraggableExistingBlock | EntityContext | undefined => {
+  return editable.value.host.uuid + editable.value.fieldName;
+});
+const getHost = (uuid) => {
   if (uuid) {
-    const block = dom.findBlock(uuid)
+    const block = dom.findBlock(uuid);
     if (block) {
-      return block
+      return block;
     }
   }
-
-  return dom.findClosestEntityContext(dom.getActiveProviderElement())
-}
-
-const buildEditable = (
-  fieldName: string,
-  uuid?: string,
-): Editable | undefined => {
-  const host = getHost(uuid)
+  return dom.findClosestEntityContext(dom.getActiveProviderElement());
+};
+const buildEditable = (fieldName, uuid) => {
+  const host = getHost(uuid);
   if (!host) {
-    return
+    return;
   }
-  const hostEntityType =
-    'type' in host ? host.type : runtimeConfig.itemEntityType
-  const hostEntityBundle = 'bundle' in host ? host.bundle : host.itemBundle
-
+  const hostEntityType = "type" in host ? host.type : runtimeConfig.itemEntityType;
+  const hostEntityBundle = "bundle" in host ? host.bundle : host.itemBundle;
   const config = types.editableFieldConfig.forName(
     hostEntityType,
     hostEntityBundle,
-    fieldName,
-  )
-
+    fieldName
+  );
   if (!config) {
-    let message = `Failed to load editable field config for field "${fieldName}" on entity type "${hostEntityType}" of bundle "${hostEntityBundle}"`
+    let message = `Failed to load editable field config for field "${fieldName}" on entity type "${hostEntityType}" of bundle "${hostEntityBundle}"`;
     if (uuid) {
-      message += ` with uuid "${uuid}"`
+      message += ` with uuid "${uuid}"`;
     }
-    throw new Error(message)
+    throw new Error(message);
   }
-
-  // Adapter doesn't support editable frames, return.
-  if (config.type === 'frame' && !adapter.buildEditableFrameUrl) {
-    return
+  if (config.type === "frame" && !adapter.buildEditableFrameUrl) {
+    return;
   }
-
-  const hostElement =
-    'itemBundle' in host ? host.element() : dom.getActiveProviderElement()
+  const hostElement = "itemBundle" in host ? host.element() : dom.getActiveProviderElement();
   const element = hostElement.querySelector(
-    `[data-blokkli-editable-field="${fieldName}"]`,
-  )
-
+    `[data-blokkli-editable-field="${fieldName}"]`
+  );
   if (!(element instanceof HTMLElement)) {
-    return
+    return;
   }
-
   return {
     fieldName,
     host,
     element,
-    isComponent: element.dataset.blokkliEditableComponent === 'true',
-    value: element.dataset.blokkliEditableValue || '',
-    config,
-  }
-}
-
-onBlokkliEvent('editable:focus', (e) => {
+    isComponent: element.dataset.blokkliEditableComponent === "true",
+    value: element.dataset.blokkliEditableValue || "",
+    config
+  };
+};
+onBlokkliEvent("editable:focus", (e) => {
   if (!state.canEdit.value) {
-    return
+    return;
   }
-  hasTransition.value = !editable.value
-  editable.value = buildEditable(e.fieldName, e.uuid) || null
+  hasTransition.value = !editable.value;
+  editable.value = buildEditable(e.fieldName, e.uuid) || null;
   if (editable.value) {
-    selection.editableActive.value = true
+    selection.editableActive.value = true;
   }
-})
-
+});
 defineCommands(() => {
-  // Find editable fields in the current selection.
-  const editables: Editable[] = selection.blocks.value.flatMap((v) => {
-    return [...v.element().querySelectorAll('[data-blokkli-editable-field]')]
-      .map((el) => {
-        if (!(el instanceof HTMLElement)) {
-          return
-        }
-
-        // Find closest block.
-        const block = el.closest('[data-uuid]')
-        if (!(block instanceof HTMLElement)) {
-          return
-        }
-
-        // Skip editable fields of nested blocks because this would lead to a
-        // ton of commands with the same name, e.g. when the selected block
-        // has 20 nested blocks with editable fields. This would be pretty
-        // useless.
-        if (block.dataset.uuid !== v.uuid) {
-          return
-        }
-
-        const name = el.dataset.blokkliEditableField
-        if (!name) {
-          return
-        }
-
-        return buildEditable(name, block.dataset.uuid)
-      })
-      .filter(falsy)
-  })
-
+  const editables = selection.blocks.value.flatMap((v) => {
+    return [...v.element().querySelectorAll("[data-blokkli-editable-field]")].map((el) => {
+      if (!(el instanceof HTMLElement)) {
+        return;
+      }
+      const block = el.closest("[data-uuid]");
+      if (!(block instanceof HTMLElement)) {
+        return;
+      }
+      if (block.dataset.uuid !== v.uuid) {
+        return;
+      }
+      const name = el.dataset.blokkliEditableField;
+      if (!name) {
+        return;
+      }
+      return buildEditable(name, block.dataset.uuid);
+    }).filter(falsy);
+  });
   return editables.map((v) => {
     return {
-      id: 'feature:editable:edit:' + v.host.uuid + ':' + v.fieldName,
-      group: 'selection',
-      label: $t('editableCommandEdit', 'Edit field "@name"').replace(
-        '@name',
-        v.config.label,
+      id: "feature:editable:edit:" + v.host.uuid + ":" + v.fieldName,
+      group: "selection",
+      label: $t("editableCommandEdit", 'Edit field "@name"').replace(
+        "@name",
+        v.config.label
       ),
-      icon: 'textbox',
+      icon: "textbox",
       disabled: false,
       callback: () => {
-        editable.value = v
-      },
-    }
-  })
-})
-
+        editable.value = v;
+      }
+    };
+  });
+});
 watch(selection.editableActive, (isActive) => {
   if (!isActive) {
-    hasTransition.value = true
-    editable.value = null
+    hasTransition.value = true;
+    editable.value = null;
   }
-})
-
+});
 watch(editable, (v) => {
   if (!v && selection.editableActive.value) {
-    selection.editableActive.value = false
+    selection.editableActive.value = false;
   }
-})
-
+});
 const close = () => {
-  editable.value = null
-  selection.editableActive.value = false
-}
+  editable.value = null;
+  selection.editableActive.value = false;
+};
 </script>

package/dist/runtime/components/Edit/Features/EditableField/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/EditableMask/index.vue

@@ -6,59 +6,51 @@
     :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.',
-      )
-    "
+  $t(
+    'maskTourText',
+    'Toggle between showing or hiding non-editable parts of the page.'
+  )
+"
     icon="texturebox"
     key-code="M"
   />
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   useBlokkli,
   defineBlokkliFeature,
   ref,
   watch,
   onMounted,
-  onBeforeUnmount,
-} from '#imports'
-import { PluginViewOption } from '#blokkli/plugins'
-
-const HIDE_CLASS = 'bk-hide-non-editable'
-
+  onBeforeUnmount
+} from "#imports";
+import { PluginViewOption } from "#blokkli/plugins";
+const HIDE_CLASS = "bk-hide-non-editable";
 defineBlokkliFeature({
-  id: 'editable-mask',
-  icon: 'texturebox',
-  label: 'Editable Mask',
-  description: 'Provides a view option to hide non-editable parts of the page.',
-  viewports: ['desktop'],
-})
-
-const { $t } = useBlokkli()
-
-const isActive = ref(false)
-
+  id: "editable-mask",
+  icon: "texturebox",
+  label: "Editable Mask",
+  description: "Provides a view option to hide non-editable parts of the page.",
+  viewports: ["desktop"]
+});
+const { $t } = useBlokkli();
+const isActive = ref(false);
 const setRootClass = () => {
-  document.documentElement.classList.remove(HIDE_CLASS)
+  document.documentElement.classList.remove(HIDE_CLASS);
   if (isActive.value) {
-    document.documentElement.classList.add(HIDE_CLASS)
+    document.documentElement.classList.add(HIDE_CLASS);
   }
-}
-
-watch(isActive, setRootClass)
-
-onMounted(setRootClass)
-
+};
+watch(isActive, setRootClass);
+onMounted(setRootClass);
 onBeforeUnmount(() => {
-  document.documentElement.classList.remove(HIDE_CLASS)
-})
+  document.documentElement.classList.remove(HIDE_CLASS);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'EditableMask',
-}
+  name: "EditableMask"
+};
 </script>

package/dist/runtime/components/Edit/Features/EditableMask/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/EntityTitle/index.vue

@@ -11,9 +11,9 @@
           <span
             class="bk-status-indicator"
             :class="{
-              'bk-is-success': entity.status && !mutations.length,
-              'bk-is-warning': entity.status && mutations.length,
-            }"
+  'bk-is-success': entity.status && !mutations.length,
+  'bk-is-warning': entity.status && mutations.length
+}"
           />
           <strong>{{ entity.label }}</strong>
           <span>&nbsp;{{ entity.bundleLabel }}</span>
@@ -32,56 +32,48 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-import { useBlokkli, defineBlokkliFeature, ref, computed } from '#imports'
-import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
-
+<script setup>
+import defineCommands from "#blokkli/helpers/composables/defineCommands";
+import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
+import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
 defineBlokkliFeature({
-  id: 'entity-title',
-  icon: 'title',
-  label: 'Entity Title',
-  description: 'Renders the title and status of the page entity.',
-})
-
-const { state, eventBus, $t } = useBlokkli()
-const { entity, mutations } = state
-const buttonEl = ref<HTMLButtonElement | null>(null)
-
-const statusPublished = computed(() =>
-  $t('pageIsPublished', 'Page is published'),
-)
-
-const statusPending = computed(() =>
-  $t(
-    'pageIsPublishedWithPendingChanges',
-    'Page is published (changes pending)',
-  ),
-)
-
-const statusUnpublished = computed(() =>
-  $t('pageIsNotPublished', 'Page is not published'),
-)
-
+  id: "entity-title",
+  icon: "title",
+  label: "Entity Title",
+  description: "Renders the title and status of the page entity."
+});
+const { state, eventBus, $t } = useBlokkli();
+const { entity, mutations } = state;
+const buttonEl = ref(null);
+const statusPublished = computed(
+  () => $t("pageIsPublished", "Page is published")
+);
+const statusPending = computed(
+  () => $t(
+    "pageIsPublishedWithPendingChanges",
+    "Page is published (changes pending)"
+  )
+);
+const statusUnpublished = computed(
+  () => $t("pageIsNotPublished", "Page is not published")
+);
 defineCommands(() => {
   return {
-    id: 'feature:entity-title:edit-entity',
-    group: 'misc',
-    label: $t('editFormEntityEdit', 'Edit @label').replace(
-      '@label',
-      entity.value.label || 'Page',
+    id: "feature:entity-title:edit-entity",
+    group: "misc",
+    label: $t("editFormEntityEdit", "Edit @label").replace(
+      "@label",
+      entity.value.label || "Page"
     ),
-    callback: () => eventBus.emit('editEntity'),
-    icon: 'edit',
-  }
-})
-
+    callback: () => eventBus.emit("editEntity"),
+    icon: "edit"
+  };
+});
 const tourText = computed(() => {
   const intro = $t(
-    'entityTitleTourText',
-    '<p>Shows the title and status of the current page.</p><p>Click on the title to open the page edit form.</p>',
-  )
-
+    "entityTitleTourText",
+    "<p>Shows the title and status of the current page.</p><p>Click on the title to open the page edit form.</p>"
+  );
   return `
 ${intro}
 <ul>
@@ -89,21 +81,20 @@ ${intro}
 <li><div class="bk-status-indicator bk-is-warning"></div>${statusPending.value}</li>
 <li><div class="bk-status-indicator bk-is-success"></div>${statusPublished.value}</li>
 </ul>
-`
-})
-
+`;
+});
 defineTourItem(() => {
   return {
-    id: 'entity-title',
-    title: $t('entityTitleTourTitle', 'Page'),
+    id: "entity-title",
+    title: $t("entityTitleTourTitle", "Page"),
     text: tourText.value,
-    element: buttonEl.value,
-  }
-})
+    element: buttonEl.value
+  };
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'EntityTitle',
-}
+  name: "EntityTitle"
+};
 </script>

package/dist/runtime/components/Edit/Features/EntityTitle/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Exit/index.vue

@@ -9,31 +9,27 @@
   />
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, useRoute, nextTick, defineBlokkliFeature } from '#imports'
-import { PluginMenuButton } from '#blokkli/plugins'
-
+<script setup>
+import { useBlokkli, useRoute, nextTick, defineBlokkliFeature } from "#imports";
+import { PluginMenuButton } from "#blokkli/plugins";
 defineBlokkliFeature({
-  id: 'exit',
-  label: 'Exit',
-  icon: 'exit',
-  description: 'Provides a menu button to exit the editor without saving.',
-})
-
-const { $t, broadcast, context } = useBlokkli()
-
-const route = useRoute()
-
+  id: "exit",
+  label: "Exit",
+  icon: "exit",
+  description: "Provides a menu button to exit the editor without saving."
+});
+const { $t, broadcast, context } = useBlokkli();
+const route = useRoute();
 function onClick() {
   nextTick(() => {
-    broadcast.emit('closeEditor', { uuid: context.value.entityUuid })
-    window.location.href = route.path
-  })
+    broadcast.emit("closeEditor", { uuid: context.value.entityUuid });
+    window.location.href = route.path;
+  });
 }
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Exit',
-}
+  name: "Exit"
+};
 </script>

package/dist/runtime/components/Edit/Features/Exit/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/FieldAreas/Overlay/index.vue

@@ -15,19 +15,8 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, useBlokkli } from '#imports'
-
-const { eventBus, selection } = useBlokkli()
-
-type FieldArea = {
-  key: string
-  name: string
-  label: string
-  style: {
-    transform: string
-  }
-}
-
-const areas = ref<FieldArea[]>([])
+<script setup>
+import { ref, useBlokkli } from "#imports";
+const { eventBus, selection } = useBlokkli();
+const areas = ref([]);
 </script>

package/dist/runtime/components/Edit/Features/FieldAreas/Overlay/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;