@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -4,22 +4,15 @@
     :title="publishLabel"
     :description="publishDescription"
     :disabled="!mutations.length || !canEdit"
-    type="success"
+    :type="isScheduled ? 'yellow' : 'success'"
     :weight="0"
     :icon="icon"
     @click="onMenuClick"
   />
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
-      <PublishDialog
-        v-if="showDialog"
-        v-model:states="additionalEditStates"
-        v-model:revision-message="revisionMessage"
-        v-model:should-publish="shouldPublish"
-        @close="showDialog = false"
-        @submit="onSubmit"
-      />
-    </transition>
+    <BlokkliTransition name="slide-up">
+      <PublishDialog v-if="showDialog" @close="onClose" @submit="onSubmit" />
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -29,10 +22,13 @@ import {
   defineBlokkliFeature,
   computed,
   useRoute,
-  ref
+  ref,
+  nextTick
 } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import PublishDialog from "./Dialog/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { adapter, settings } = defineBlokkliFeature({
   id: "publish",
   icon: "publish",
@@ -50,30 +46,42 @@ const { adapter, settings } = defineBlokkliFeature({
   }
 });
 const route = useRoute();
-const { state, $t, broadcast, context } = useBlokkli();
-const { mutations, canEdit } = state;
+const { state, $t, broadcast, context, eventBus } = useBlokkli();
+const { mutations, canEdit, mutateWithLoadingState } = state;
 const hasPublishOptions = !!adapter.getPublishOptions;
 const isPublished = computed(() => !!state.entity.value.status);
+const isScheduled = computed(
+  () => !!state.publishOptions.value.publishOn
+);
 const showDialog = ref(false);
-const additionalEditStates = ref([]);
-const shouldPublish = ref(!!state.entity.value.status);
-const revisionMessage = ref("");
 const publishLabel = computed(() => {
   const suffix = hasPublishOptions ? "..." : "";
+  if (isScheduled.value) {
+    return $t("publishManageSchedule", "Manage scheduling") + suffix;
+  }
   if (isPublished.value) {
     return (settings.value.closeAfterPublish ? $t("publishAndCloseLabel", "Publish & Close") : $t("publishLabel", "Publish")) + suffix;
   }
   return (settings.value.closeAfterPublish ? $t("publishAndCloseLabelUnpublished", "Save & Close") : $t("publishLabelUnpublished", "Save")) + suffix;
 });
-const publishDescription = computed(
-  () => isPublished.value ? $t("publishDescription", "Publish all changes.") : $t(
+const publishDescription = computed(() => {
+  if (isScheduled.value) {
+    return $t(
+      "publishDescriptionScheduled",
+      "View or change the scheduled publication"
+    );
+  }
+  return isPublished.value ? $t("publishDescription", "Publish all changes.") : $t(
     "publishDescriptionUnpublished",
     "Save all changes while keeping page unpublished"
-  )
-);
-const icon = computed(
-  () => isPublished.value ? "publish" : "save"
-);
+  );
+});
+const icon = computed(() => {
+  if (state.publishOptions.value?.publishOn) {
+    return "calendar-clock";
+  }
+  return isPublished.value ? "publish" : "save";
+});
 const onMenuClick = async () => {
   if (hasPublishOptions) {
     showDialog.value = true;
@@ -82,6 +90,24 @@ const onMenuClick = async () => {
   await publishCurrent();
 };
 async function publishCurrent() {
+  const success = await mutateWithLoadingState(
+    () => adapter.publish({
+      hostEntityType: context.value.entityType,
+      hostEntityUuid: context.value.entityUuid,
+      closeAfterPublish: settings.value.closeAfterPublish
+    }),
+    $t("publishError", "Changes could not be published."),
+    $t("publishSuccess", "Changes published successfully.")
+  );
+  if (!success) {
+    const validations = state.violations.value;
+    if (validations.length) {
+      eventBus.emit("publish:failed");
+      eventBus.emit("sidebar:open", "violations");
+    }
+    return;
+  }
+  onSubmit();
 }
 function onSubmit() {
   broadcast.emit("published", { uuid: context.value.entityUuid });
@@ -89,6 +115,13 @@ function onSubmit() {
     window.location.href = route.path;
   }
 }
+async function onClose() {
+  await nextTick();
+  showDialog.value = false;
+}
+onBlokkliEvent("publish:show-dialog", () => {
+  showDialog.value = true;
+});
 </script>
 
 <script>

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

@@ -1,22 +1,11 @@
-import { Icon } from '#blokkli/components';
 type __VLS_Props = {
     detached?: boolean;
     isResizing?: boolean;
 };
-declare const isLoading: import("vue").Ref<boolean, boolean>;
-declare const iframe: import("vue").Ref<HTMLIFrameElement | null, HTMLIFrameElement | null>;
-declare const src: import("vue").ComputedRef<string>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_5: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
-    Icon: typeof Icon;
-    isLoading: typeof isLoading;
-    iframe: typeof iframe;
-    src: typeof src;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -13,7 +13,7 @@
   />
 
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <DialogModal
         v-if="showConfirm"
         :title="$t('revertDialogTitle', 'Irrevocably discard changes')"
@@ -28,14 +28,14 @@
         @submit="onSubmit"
         @cancel="showConfirm = false"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import { useBlokkli, ref, defineBlokkliFeature } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
-import { DialogModal } from "#blokkli/components";
+import { DialogModal, BlokkliTransition } from "#blokkli/components";
 const { adapter } = defineBlokkliFeature({
   id: "revert",
   icon: "revert",

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Transition name="bk-search">
+    <BlokkliTransition name="search">
       <div
         v-if="isRendered"
         v-show="isVisible"
@@ -15,7 +15,7 @@
           @close="isVisible = false"
         />
       </div>
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
   <PluginToolbarButton
     id="search"
@@ -37,6 +37,7 @@
 <script setup>
 import { nextTick, ref, useBlokkli, defineBlokkliFeature } from "#imports";
 import Overlay from "./Overlay/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 import { PluginToolbarButton } from "#blokkli/plugins";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 defineBlokkliFeature({
@@ -45,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);
@@ -59,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

@@ -0,0 +1,85 @@
+<template>
+  <ArtboardTooltip
+    id="add-buttons"
+    :title="label"
+    :anchor-el
+    :anchor-coordinates
+    class="bk-selection-add-overlay"
+    @close="$emit('close')"
+  >
+    <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)"
+      >
+        <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>
+  </ArtboardTooltip>
+</template>
+
+<script setup>
+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: false },
+  anchorCoordinates: { type: Object, required: false },
+  label: { type: String, required: true }
+});
+defineEmits(["select", "action", "close"]);
+const listEl = useTemplateRef("listEl");
+let hasScrollbar = null;
+const { types, plugins, storage } = useBlokkli();
+const favorites = storage.use("blockFavorites", []);
+const items = computed(() => {
+  return props.bundles.filter((bundle) => !isInternalBundle(bundle)).map((bundle) => {
+    return {
+      bundle,
+      label: types.getBlockBundleDefinition(bundle)?.label ?? bundle,
+      isFavorite: favorites.value.includes(bundle)
+    };
+  }).sort((a, b) => {
+    if (a.isFavorite && !b.isFavorite) return -1;
+    if (!a.isFavorite && b.isFavorite) return 1;
+    return a.label.localeCompare(b.label);
+  });
+});
+const actions = computed(() => {
+  return plugins.getAddActions().filter((action) => {
+    if (!action.itemBundle) {
+      return true;
+    }
+    return props.bundles.includes(action.itemBundle);
+  });
+});
+const onWheel = (e) => {
+  if (hasScrollbar === null) {
+    const element = listEl.value;
+    hasScrollbar = element && element.scrollHeight > element.clientHeight;
+  }
+  if (hasScrollbar) {
+    e.stopPropagation();
+  }
+};
+</script>

package/dist/runtime/components/Edit/Features/{CommandPalette/Palette/Group → Selection/AddButtons/Overlay}/index.vue.d.ts

@@ -1,22 +1,17 @@
-import type { Command } from '#blokkli/types';
+import type { Coord } from '#blokkli/types';
 type __VLS_Props = {
+    bundles: string[];
+    anchorEl?: HTMLElement;
+    anchorCoordinates?: Coord;
     label: string;
-    commands: Array<Command & {
-        _id: number;
-    }>;
-    visibleIds: {
-        id: number;
-        positions: number[];
-    }[] | undefined;
-    focusedId: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => void;
-    focus: (id: string) => void;
+    action: (id: string) => void;
     select: (id: string) => void;
+    close: () => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onFocus?: ((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;

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/fragment.glsl

@@ -0,0 +1,106 @@
+precision highp float;
+
+varying vec4 v_quad;
+varying vec2 v_circle_center;
+varying float v_visible;
+varying float v_is_hovered;
+varying float v_scale_fade;
+varying float v_rect_id;
+
+uniform float u_dpi;
+uniform vec3 u_color;
+uniform vec3 u_color_hover;
+uniform vec3 u_color_field;
+uniform vec3 u_color_field_hover;
+
+void main() {
+  // Early exit if not visible or fully faded out
+  if (v_visible < 0.5 || v_scale_fade < 0.01) {
+    discard;
+  }
+
+  // Calculate distance from pixel to circle center
+  vec2 pixelPos = gl_FragCoord.xy;
+  float dist = distance(pixelPos, v_circle_center);
+
+  // Circle radius (includes border)
+  float radius = v_quad.z / 2.0;
+
+  // Border width in pixels (must match vertex shader) - scaled by DPI
+  float borderWidth = 4.0 * u_dpi;
+
+  // Inner circle radius (without border)
+  float innerRadius = radius - borderWidth;
+
+  // Anti-aliased circle
+  float edgeSoftness = 1.0 * u_dpi;
+  float alpha = 1.0 - smoothstep(radius - edgeSoftness, radius, dist);
+
+  if (alpha < 0.01) {
+    discard;
+  }
+
+  // Calculate position relative to circle center
+  vec2 offset = pixelPos - v_circle_center;
+
+  // Plus dimensions relative to inner circle radius
+  // Reduce thickness at low DPI (zoomed out)
+  float plusThicknessBase = u_dpi <= 0.5 ? 1.25 : 1.5;
+  float plusThickness = plusThicknessBase * u_dpi;
+  float plusLength = innerRadius * 0.5; // 50% of inner radius
+  float plusSoftness = 0.25 * u_dpi;
+
+  // Calculate soft plus factor (0 = not plus, 1 = fully plus)
+  float horizontalDist = max(abs(offset.y) - plusThickness, 0.0);
+  float verticalDist = max(abs(offset.x) - plusThickness, 0.0);
+
+  float horizontalBarFactor = 0.0;
+  if (abs(offset.x) < plusLength) {
+    horizontalBarFactor = 1.0 - smoothstep(0.0, plusSoftness, horizontalDist);
+  }
+
+  float verticalBarFactor = 0.0;
+  if (abs(offset.y) < plusLength) {
+    verticalBarFactor = 1.0 - smoothstep(0.0, plusSoftness, verticalDist);
+  }
+
+  float plusFactor = max(horizontalBarFactor, verticalBarFactor);
+
+  // Check if pixel is in the border area (outside the inner circle)
+  bool isBorder = dist >= innerRadius && dist <= radius;
+
+  // Determine base fill color
+  vec3 fillColor;
+  bool isFieldButton = v_rect_id >= 2.0;
+  if (isFieldButton) {
+    fillColor = v_is_hovered > 0.5 ? u_color_field_hover : u_color_field;
+  } else {
+    fillColor = v_is_hovered > 0.5 ? u_color_hover : u_color;
+  }
+
+  // Determine final color
+  vec3 finalColor;
+  if (isBorder) {
+    // Soft border transition - blend from fill color to white over 0.5px
+    float transitionRange = 0.5 * u_dpi;
+    float borderStart = innerRadius;
+    float borderEnd = innerRadius + transitionRange;
+
+    // Calculate blend factor (0 = fill color, 1 = white)
+    float blendFactor = smoothstep(borderStart, borderEnd, dist);
+
+    // Blend between fill color and white
+    finalColor = mix(fillColor, vec3(1.0, 1.0, 1.0), blendFactor);
+  } else {
+    // Circle background
+    finalColor = fillColor;
+  }
+
+  // Apply soft plus on top
+  if (plusFactor > 0.0) {
+    finalColor = mix(finalColor, vec3(1.0, 1.0, 1.0), plusFactor);
+  }
+
+  // Apply scale fade to alpha
+  gl_FragColor = vec4(finalColor, alpha);
+}