@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

package/dist/runtime/components/Edit/Features/Options/Form/Item.vue

@@ -113,7 +113,12 @@ const showLabel = computed(() => {
 const label = computed(
   () => $blokkliText(`blockOption_${props.property}_label`, props.option.label)
 );
-const description = computed(() => props.option.description);
+const description = computed(
+  () => $blokkliText(
+    `blockOption_${props.property}_description`,
+    props.option.description
+  )
+);
 const checkboxOptions = computed(() => {
   if (props.option.type !== "checkboxes") {
     return [];

package/dist/runtime/components/Edit/Features/Options/Form/index.vue

@@ -56,6 +56,7 @@ import {
   BK_VISIBLE_LANGUAGES
 } from "#blokkli/helpers/symbols";
 import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
+import { itemEntityType } from "#blokkli-build/config";
 if (import.meta.hot) {
   import.meta.hot.accept("#blokkli/runtime-helpers", () => {
   });
@@ -94,11 +95,11 @@ const {
   eventBus,
   state,
   selection,
-  runtimeConfig,
   dom,
   theme,
   context,
-  definitions
+  definitions,
+  blocks
 } = useBlokkli();
 const props = defineProps({
   uuids: { type: [Array, String], required: true },
@@ -136,7 +137,7 @@ function stopChangingOptions() {
   if (Array.isArray(props.uuids)) {
     props.uuids.forEach((uuid) => {
       dom.refreshBlockRect(uuid);
-      const block = dom.findBlock(uuid);
+      const block = blocks.getBlock(uuid);
       if (block) {
         const el = dom.getDragElement(block);
         if (el) {
@@ -146,6 +147,7 @@ function stopChangingOptions() {
     });
   }
   selection.isChangingOptions.value = false;
+  eventBus.emit("option:finish-change");
 }
 class OptionCollector {
   options;
@@ -247,11 +249,11 @@ const visibleOptions = computed(() => {
   }
   const uuid = props.uuids[0];
   const item = state.getFieldListItem(uuid);
-  const block = selection.blocks.value.find((v) => v.uuid === uuid);
+  const block = selection.items.value.find((v) => v.uuid === uuid);
   if (!item) {
     return [];
   }
-  const parentType = block?.hostType === runtimeConfig.itemEntityType ? block.parentBlockBundle : void 0;
+  const parentType = block?.host.type === itemEntityType ? block.parentBlockBundle : void 0;
   const ctxProps = item?.bundle === BUNDLE_FROM_LIBRARY ? item?.props?.libraryItem?.block?.props : item?.props;
   const visibleKeys = (
     // We have to cast to any here because the types are guaranteed to be correct.
@@ -260,7 +262,7 @@ const visibleOptions = computed(() => {
       parentType,
       props: ctxProps,
       entity: context.value,
-      fieldListType: block?.hostFieldListType || "default"
+      fieldListType: block?.fieldListType ?? "default"
     })
   );
   return availableOptions.value.filter(

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

@@ -24,7 +24,7 @@ defineBlokkliFeature({
 });
 const { selection, state, ui, definitions, context } = useBlokkli();
 const uuids = computed(() => {
-  const uuids2 = selection.blocks.value.map((v) => v.uuid);
+  const uuids2 = selection.items.value.map((v) => v.uuid);
   if (uuids2.length) {
     return uuids2;
   } else if (selection.hasHostSelected.value) {
@@ -47,14 +47,14 @@ const definition = computed(() => {
       context.value.entityBundle
     );
   }
-  const bundles = selection.blocks.value.map((v) => v.reusableBundle || v.itemBundle).filter(onlyUnique);
+  const bundles = selection.items.value.map((v) => v.library?.reusableBundle || v.bundle).filter(onlyUnique);
   if (bundles.length !== 1) {
     return;
   }
   const bundle = bundles[0];
   if (bundle === "blokkli_fragment") {
-    const fragments = selection.blocks.value.filter(
-      (v) => v.itemBundle === "blokkli_fragment"
+    const fragments = selection.items.value.filter(
+      (v) => v.bundle === "blokkli_fragment"
     );
     const fragmentNames = fragments.map((v) => {
       const props = state.getFieldListItem(v.uuid)?.props;
@@ -67,10 +67,10 @@ const definition = computed(() => {
     }
     return definitions.getFragmentDefinition(fragmentNames[0]);
   }
-  return selection.blocks.value.map((block) => {
+  return selection.items.value.map((block) => {
     return definitions.getBlockDefinition(
       bundle,
-      block.hostFieldListType,
+      block.fieldListType,
       block.parentBlockBundle
     );
   }).filter(falsy).at(0);

package/dist/runtime/components/Edit/Features/Ownership/Renderer.vue

@@ -0,0 +1,35 @@
+<template>
+  <Banner
+    id="ownership"
+    icon="user"
+    :text
+    :button="$t('ownershipTakeOwnership', 'Assign to me')"
+    @click="$emit('submit')"
+  />
+</template>
+
+<script setup>
+import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
+import { Banner } from "#blokkli/components";
+defineEmits(["submit"]);
+const { state, $t, ui } = useBlokkli();
+const name = computed(() => {
+  const v = state.owner.value?.name;
+  if (v) {
+    return `<strong>${v}</strong>`;
+  }
+  return "";
+});
+const text = computed(() => {
+  return $t(
+    "ownershipNote",
+    "This page is currently being edited by @name. Changes can only be made by one person at a time."
+  ).replace("@name", name.value);
+});
+onMounted(() => {
+  ui.setSelectionColor("ownership", "mono");
+});
+onBeforeUnmount(() => {
+  ui.removeSelectionColor("ownership");
+});
+</script>

package/dist/runtime/components/Edit/Features/Ownership/Renderer.vue.d.ts

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

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

@@ -1,26 +1,12 @@
 <template>
-  <Teleport to="body">
-    <div
-      v-if="!state.owner.value?.currentUserIsOwner"
-      class="bk-owner-indicator"
-    >
-      <p
-        v-html="
-  $t(
-    'ownershipNote',
-    'This page is currently being edited by @name. Changes can only be made by one person at a time.'
-  ).replace('@name', name)
-"
-      />
-      <button class="bk-button bk-is-danger" @click="takeOwnership">
-        {{ $t("ownershipTakeOwnership", "Assign to me") }}
-      </button>
-    </div>
+  <Teleport to="#bk-banner-list">
+    <Renderer v-if="shouldRender" @submit="takeOwnership" />
   </Teleport>
 </template>
 
 <script setup>
-import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import Renderer from "./Renderer.vue";
 const { adapter } = defineBlokkliFeature({
   id: "ownership",
   icon: "user",
@@ -29,18 +15,14 @@ const { adapter } = defineBlokkliFeature({
   description: "Renders a large button to take ownership of the current edit state."
 });
 const { state, $t } = useBlokkli();
+const shouldRender = computed(
+  () => !state.owner.value?.currentUserIsOwner && state.permissions.value.includes("edit")
+);
 const takeOwnership = () => state.mutateWithLoadingState(
   () => adapter.takeOwnership(),
   $t("ownershipError", "Error in assigning"),
   $t("ownershipSuccess", "You are now the owner.")
 );
-const name = computed(() => {
-  const v = state.owner.value?.name;
-  if (v) {
-    return `<strong>${v}</strong>`;
-  }
-  return "";
-});
 </script>
 
 <script>

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

@@ -13,6 +13,7 @@
 "
     key-code="P"
     icon="tree"
+    @update:model-value="onToggleProxyMode"
   />
 </template>
 
@@ -26,7 +27,10 @@ defineBlokkliFeature({
   description: "Displays the blocks as a structure in the preview.",
   viewports: ["desktop"]
 });
-const { $t, ui } = useBlokkli();
+const { $t, ui, eventBus } = useBlokkli();
+function onToggleProxyMode() {
+  eventBus.emit("state:reloaded");
+}
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Publish/Dialog/index.vue

@@ -37,23 +37,24 @@
           </label>
           <div class="bk-publish-schedule-date-wrapper">
             <div v-if="isAlreadyScheduled" class="bk-publish-scheduled-display">
-              {{
-                ui.formatDate(scheduleDate, {
-  weekday: "long",
-  year: "numeric",
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit"
-})
-              }}
+              {{ formatScheduleDate(scheduleDate) }}
             </div>
             <ScheduleDate
               v-else
               v-model="scheduleDate"
               :disabled="isLoading"
               :error="scheduleDateError"
-            />
+            >
+              <div
+                class="bk-schedule-date-info"
+                v-text="
+  $t(
+    'publishScheduledInfo',
+    'You can still make changes until the scheduled publication date.'
+  )
+"
+              />
+            </ScheduleDate>
             <button
               v-if="isAlreadyScheduled"
               type="button"
@@ -90,6 +91,16 @@
         />
       </FormItem>
 
+      <FormItem v-if="publishMode !== 'save' && scheduledBlocks.length">
+        <InfoBox>
+          <p
+            v-for="(text, index) in scheduledBlocks"
+            :key="'infobox' + index"
+            v-html="text"
+          />
+        </InfoBox>
+      </FormItem>
+
       <FormItem v-if="successItems.length && showTable">
         <h2 class="bk-heading-2">
           {{ $t("publishSuccessfullyPublished", "Successfully published") }}
@@ -171,14 +182,29 @@ import {
   onMounted,
   onUnmounted
 } from "#imports";
-import { DialogModal, FormTextarea, FormItem } from "#blokkli/components";
+import {
+  DialogModal,
+  FormTextarea,
+  FormItem,
+  ScheduleDate,
+  InfoBox
+} from "#blokkli/components";
 import { emitMessage } from "#blokkli/helpers/eventBus";
 import Item from "./Item.vue";
 import PublishOption, {} from "./PublishOption.vue";
 import Summary from "./Summary.vue";
-import ScheduleDate from "./ScheduleDate.vue";
 const showTable = false;
 const { adapter, $t, state, context, ui } = useBlokkli();
+const formatScheduleDate = (date) => {
+  return ui.formatDate(date, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+};
 const isMutating = ref(false);
 const mutationStatusItems = ref({});
 const publishedIds = ref([]);
@@ -205,6 +231,33 @@ const {
 } = await useAsyncData(() => {
   return adapter.getPublishOptions();
 });
+const scheduledBlocks = computed(() => {
+  const referenceTimestamp = publishMode.value === "scheduled" && scheduleDate.value ? new Date(scheduleDate.value).getTime() : currentTimestamp.value;
+  const grouped = state.getAllUuids().reduce((acc, uuid) => {
+    const item = state.getFieldListItem(uuid);
+    if (!item?.editContext?.publishOn) {
+      return acc;
+    }
+    const publishDate = new Date(item.editContext.publishOn).getTime();
+    if (publishDate <= referenceTimestamp) {
+      return acc;
+    }
+    const dateKey = item.editContext.publishOn;
+    acc[dateKey] = (acc[dateKey] || 0) + 1;
+    return acc;
+  }, {});
+  return Object.entries(grouped).map(([date, count]) => {
+    const formattedDate = formatScheduleDate(date);
+    const message = count === 1 ? $t(
+      "publishScheduledBlockSingular",
+      "1 block is scheduled to be published on @date"
+    ) : $t(
+      "publishScheduledBlockPlural",
+      "@count blocks are scheduled to be published on @date"
+    );
+    return message.replace("@count", count.toString()).replace("@date", `<strong>${formattedDate}</strong>`);
+  });
+});
 const canSchedule = computed(() => !!publishOptions.value?.canSchedule);
 const publishOn = computed(
   () => publishOptions.value?.publishOn ?? null
@@ -403,7 +456,7 @@ const resultStateLabel = computed(() => {
     );
   }
   if (publishMode.value === "scheduled" && scheduleDate.value) {
-    const formattedDate = ui.formatDate(scheduleDate.value);
+    const formattedDate = formatScheduleDate(scheduleDate.value);
     if (isCurrentlyPublished.value) {
       return $t(
         "publishResultScheduledChanges",
@@ -500,7 +553,7 @@ async function onSubmit() {
     return;
   }
   if (publishMode.value === "scheduled") {
-    const formattedDate = ui.formatDate(scheduleDate.value);
+    const formattedDate = formatScheduleDate(scheduleDate.value);
     const message = $t(
       "publishScheduleSuccess",
       "Publication scheduled for @date"

package/dist/runtime/components/Edit/Features/Search/Overlay/Results/Page/index.vue

@@ -10,7 +10,7 @@
       @mouseenter="index = i"
     >
       <div class="bk-search-item-icon">
-        <ItemIcon :bundle="item.item.itemBundle" />
+        <ItemIcon :bundle="item.item.bundle" />
       </div>
       <div class="bk-search-item-content">
         <Highlight
@@ -49,7 +49,7 @@ const props = defineProps({
   search: { type: String, required: true },
   tab: { type: String, required: true }
 });
-const { eventBus, state, types, dom } = useBlokkli();
+const { eventBus, state, types, dom, blocks, element } = useBlokkli();
 const buildForKey = ref("");
 const items = ref([]);
 const index = ref(0);
@@ -92,28 +92,28 @@ const scrollItemIntoView = () => {
   }
 };
 const buildSearchText = (el) => {
-  let text = el.textContent || "";
-  el.querySelectorAll("img").forEach((img) => {
-    if (img.alt) {
-      text += " " + img.alt;
-    }
-    if (img.title) {
-      text += " " + img.title;
+  if (!el) {
+    return "";
+  }
+  const altTexts = element.queryAll(el, "img", "buildSearchText", (el2) => {
+    if (el2 instanceof HTMLImageElement) {
+      return [el2.alt, el2.title].filter(Boolean).join("");
     }
-  });
-  return text;
+  }).join(" ");
+  return (el.textContent ?? "") + altTexts;
 };
 const buildIndex = () => {
   if (buildForKey.value === state.refreshKey.value) {
     return;
   }
-  const newItems = dom.getAllBlocks().map((item) => {
-    const title = types.getBlockBundleDefinition(item.itemBundle)?.label || item.itemBundle;
+  const newItems = blocks.getAllBlocks().map((item) => {
+    const title = types.getBlockBundleDefinition(item.bundle)?.label || item.bundle;
+    const element2 = dom.getDragElement(item);
     return {
       item,
-      title: item.editTitle || title,
+      title,
       context: title,
-      text: buildSearchText(item.element())
+      text: buildSearchText(element2)
     };
   }).filter(falsy);
   items.value = newItems;

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

@@ -46,7 +46,7 @@ defineBlokkliFeature({
   label: "Search",
   description: "Provides an overlay with shortcut to search for blocks on the current page or existing content to add as blocks."
 });
-const { $t, selection } = useBlokkli();
+const { $t, selection, ui } = useBlokkli();
 const isRendered = ref(false);
 const isVisible = ref(false);
 const overlay = ref(null);
@@ -60,6 +60,9 @@ function onClick() {
   });
 }
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Escape") {
     isVisible.value = false;
   }

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue

@@ -1,86 +1,57 @@
 <template>
-  <div
-    ref="el"
-    class="bk bk-selection-add-overlay"
-    :class="'bk-is-' + placementY"
-    :style="{
-  '--bk-caret-x': caretX
-}"
+  <ArtboardTooltip
+    id="add-buttons"
+    :title="label"
+    :anchor-el
+    :anchor-coordinates
+    class="bk-selection-add-overlay"
+    @close="$emit('close')"
   >
-    <div class="bk bk-selection-add-overlay-inner bk-caret-tooltip-inner">
-      <div v-if="label" class="bk-selection-add-overlay-label">
-        <div v-html="label" />
-        <button @click="$emit('close')">
-          <Icon name="close" />
-        </button>
-      </div>
-      <div
-        ref="listEl"
-        class="bk-selection-add-overlay-list bk-scrollbar-dark"
-        @wheel="onWheel"
+    <div
+      ref="listEl"
+      class="bk-selection-add-overlay-list bk-scrollbar-dark"
+      @wheel="onWheel"
+    >
+      <button
+        v-for="item in items"
+        :key="item.bundle"
+        tabindex="-1"
+        @click.prevent="$emit('select', item.bundle)"
       >
-        <button
-          v-for="item in items"
-          :key="item.bundle"
-          tabindex="-1"
-          @click.prevent="$emit('select', item.bundle)"
-        >
-          <AddListItemIcon
-            :bundle="item.bundle"
-            :color="item.isFavorite ? 'yellow' : 'default'"
-          />
-          <span>{{ item.label }}</span>
-        </button>
-        <button
-          v-for="action in actions"
-          :key="'action:' + action.id"
-          tabindex="-1"
-          @click.prevent="$emit('action', action.id)"
-        >
-          <AddListItemIcon :icon="action.icon" :color="action.color" />
-          <span>{{ action.title }}</span>
-        </button>
-      </div>
+        <AddListItemIcon
+          :bundle="item.bundle"
+          :color="item.isFavorite ? 'yellow' : 'default'"
+        />
+        <span>{{ item.label }}</span>
+      </button>
+      <button
+        v-for="action in actions"
+        :key="'action:' + action.id"
+        tabindex="-1"
+        @click.prevent="$emit('action', action.id)"
+      >
+        <AddListItemIcon :icon="action.icon" :color="action.color" />
+        <span>{{ action.title }}</span>
+      </button>
     </div>
-  </div>
+  </ArtboardTooltip>
 </template>
 
 <script setup>
-import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
-import {
-  useTemplateRef,
-  useBlokkli,
-  computed,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
-import { Icon, AddListItemIcon } from "#blokkli/components";
+import { useTemplateRef, useBlokkli, computed } from "#imports";
+import { AddListItemIcon, ArtboardTooltip } from "#blokkli/components";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 const props = defineProps({
   bundles: { type: Array, required: true },
-  anchorEl: { type: null, required: true },
-  label: { type: String, required: false }
+  anchorEl: { type: null, required: false },
+  anchorCoordinates: { type: Object, required: false },
+  label: { type: String, required: true }
 });
 defineEmits(["select", "action", "close"]);
-const el = useTemplateRef("el");
 const listEl = useTemplateRef("listEl");
 let hasScrollbar = null;
-const { types, ui, plugins, storage } = useBlokkli();
+const { types, plugins, storage } = useBlokkli();
 const favorites = storage.use("blockFavorites", []);
-const { placementY, caretX } = useStickyToolbar(el, {
-  getAnchorElement() {
-    return props.anchorEl;
-  },
-  getPlacementY() {
-    return "auto";
-  },
-  getPlacementX() {
-    return "center";
-  },
-  getCaretWidth() {
-    return 30;
-  }
-});
 const items = computed(() => {
   return props.bundles.filter((bundle) => !isInternalBundle(bundle)).map((bundle) => {
     return {
@@ -111,10 +82,4 @@ const onWheel = (e) => {
     e.stopPropagation();
   }
 };
-onMounted(() => {
-  ui.hasAddTooltipOpen.value = true;
-});
-onBeforeUnmount(() => {
-  ui.hasAddTooltipOpen.value = false;
-});
 </script>

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

@@ -1,15 +1,17 @@
+import type { Coord } from '#blokkli/types';
 type __VLS_Props = {
     bundles: string[];
-    anchorEl: HTMLElement;
-    label?: string;
+    anchorEl?: HTMLElement;
+    anchorCoordinates?: Coord;
+    label: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (id: string) => void;
     action: (id: string) => void;
+    select: (id: string) => void;
     close: () => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onSelect?: ((id: string) => any) | undefined;
     onAction?: ((id: string) => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;