@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.24

package/dist/runtime/components/Edit/Features/AddList/Blocks/index.vue

@@ -5,15 +5,16 @@
       v-show="type.isVisible"
       :id="type.id"
       :key="i + (type.id || 'undefined') + renderKey"
+      context="add-list-blocks"
       :label="type.label"
       :bundle="type.id"
-      :orientation="ui.addListOrientation.value"
       :disabled="type.isDisabled"
       :color="type.isFavorite ? 'yellow' : 'default'"
       data-element-type="new"
       :data-item-bundle="type.id"
     />
   </Sortli>
+
   <PluginTourItem
     v-if="shouldRender"
     id="block-add-list"
@@ -34,21 +35,22 @@ import { AddListItem, Sortli } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 import { PluginTourItem } from "#blokkli/plugins";
-import { getFieldKey, onlyUnique } from "#blokkli/helpers";
+import { getFieldKey } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 const props = defineProps({
-  hideDisabledBlocks: { type: Boolean, required: false }
+  hideDisabledBlocks: { type: Boolean, required: false },
+  selectableBundles: { type: Array, required: true },
+  generallyAvailableBundles: { type: Array, required: true }
 });
 const {
   selection,
   storage,
   types,
   context,
-  runtimeConfig,
   ui,
   eventBus,
   $t,
   state,
-  dom,
   definitions,
   blocks
 } = useBlokkli();
@@ -65,47 +67,9 @@ function buildItem(element) {
 }
 const shouldRender = computed(() => state.editMode.value === "editing");
 const searchText = ref("");
-const itemEntityType = runtimeConfig.itemEntityType;
 const favorites = storage.use("blockFavorites", []);
-const getAllowedTypesForSelected = (p) => {
-  if (types.itemBundlesWithNested.includes(p.bundle)) {
-    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
-  }
-  if (p.host.type === itemEntityType) {
-    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.host.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
-  } else {
-    return types.getFieldConfig(
-      context.value.entityType,
-      context.value.entityBundle,
-      p.host.fieldName
-    )?.allowedBundles || [];
-  }
-};
-const bundlesForRenderedFields = computed(() => {
-  return dom.registeredFieldTypes.value.flatMap((field) => {
-    return types.getFieldConfig(
-      field.entityType,
-      field.entityBundle,
-      field.fieldName
-    )?.allowedBundles || [];
-  }).filter(onlyUnique);
-});
-const generallyAvailableBundles = computed(
-  () => types.generallyAvailableBundles.filter(
-    (v) => (
-      // Exclude bundles for which no field is currently being rendered.
-      bundlesForRenderedFields.value.includes(v.id)
-    )
-  )
-);
-const selectableBundles = computed(() => {
-  if (selection.items.value.length) {
-    return selection.items.value.flatMap((v) => getAllowedTypesForSelected(v));
-  }
-  return generallyAvailableBundles.value.map((v) => v.id || "");
-});
 function determineVisibility(bundle, label) {
-  if (ui.isMobile.value && !selectableBundles.value.includes(bundle)) {
+  if (ui.isMobile.value && !props.selectableBundles.includes(bundle)) {
     return false;
   }
   if (searchText.value && !label.toLowerCase().includes(searchText.value.toLowerCase())) {
@@ -119,9 +83,9 @@ function determineVisibility(bundle, label) {
   return true;
 }
 const sortedList = computed(() => {
-  return [...generallyAvailableBundles.value].filter((v) => !isInternalBundle(v.id)).map((v) => {
+  return [...props.generallyAvailableBundles].filter((v) => !isInternalBundle(v.id)).map((v) => {
     const isVisible = determineVisibility(v.id, v.label);
-    const isDisabled = !v.id || !selectableBundles.value.includes(v.id);
+    const isDisabled = !v.id || !props.selectableBundles.includes(v.id);
     return {
       ...v,
       isDisabled,
@@ -252,7 +216,7 @@ const getInsertCommands = (block) => {
       });
     }
   );
-  if (block.host.type === runtimeConfig.itemEntityType) {
+  if (block.host.type === itemEntityType) {
     const parentBlock = blocks.getBlock(block.host.uuid);
     if (parentBlock) {
       getInsertCommands(parentBlock).forEach((parentCommand) => {

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

@@ -1,6 +1,11 @@
+import type { BlockBundleDefinition } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
     hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,43 +1,25 @@
 <template>
-  <PluginSidebar
-    v-if="isSidebar && shouldRender"
-    id="add_list"
-    :title="sidebarTitle"
-    :tour-text="tourText"
-    render-always
-    icon="plus"
-    weight="-10"
-    @updated="eventBus.emit('add-list:change')"
-  >
-    <div>
-      <div id="blokkli-add-list-sidebar-before" />
-      <div class="bk bk-list-sidebar">
-        <AddListBlocks />
-        <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction" />
-      </div>
-    </div>
-  </PluginSidebar>
-  <Teleport v-else-if="shouldRender" to="body">
+  <Teleport v-if="shouldRender" :to="ui.mainLayoutElement.value">
     <div
       ref="wrapper"
       class="bk bk-add-list bk-control"
-      :class="[
-  { 'bk-is-active': isActive || hasContextMenuOpen },
-  'bk-is-' + ui.addListOrientation.value
-]"
-      :style="style"
       @wheel.capture.passive="onWheel"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
     >
-      <div class="bk-list">
-        <AddListBlocks />
-        <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction" />
+      <div
+        class="bk-add-list-inner"
+        :class="{
+  'bk-is-active': isActive
+}"
+      >
+        <AddListBlocks :selectable-bundles :generally-available-bundles />
+        <AddListActions :selectable-bundles />
       </div>
     </div>
     <PluginTourItem
       id="add-blocks"
-      selector=".bk-list"
+      :element="wrapper"
       :title="sidebarTitle"
       :text="tourText"
     />
@@ -45,45 +27,18 @@
 </template>
 
 <script setup>
-import {
-  watch,
-  ref,
-  computed,
-  useBlokkli,
-  nextTick,
-  defineBlokkliFeature
-} from "#imports";
-import { Sortli } from "#blokkli/components";
-import { PluginSidebar, PluginTourItem } from "#blokkli/plugins";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginTourItem } from "#blokkli/plugins";
 import AddListBlocks from "./Blocks/index.vue";
-const { settings } = defineBlokkliFeature({
+import AddListActions from "./Actions/index.vue";
+import { itemEntityType } from "#blokkli-build/config";
+import { onlyUnique } from "#blokkli/helpers";
+defineBlokkliFeature({
   id: "add-list",
   icon: "plus",
   label: "Add List",
   description: "Provides the container to render a list of blocks to add or add actions.",
   settings: {
-    orientation: {
-      type: "radios",
-      label: "Add List",
-      default: "vertical",
-      group: "appearance",
-      viewports: ["desktop"],
-      options: {
-        vertical: {
-          label: "Vertical",
-          icon: "ui-list-vertical"
-        },
-        horizontal: {
-          label: "Horizontal",
-          icon: "ui-list-horizontal"
-        },
-        sidebar: {
-          label: "Sidebar",
-          icon: "ui-list-sidebar"
-        }
-      }
-    },
     hideDisabledBlocks: {
       type: "checkbox",
       label: "Hide blocks that can't be added",
@@ -94,71 +49,75 @@ const { settings } = defineBlokkliFeature({
   },
   screenshot: "feature-add-list.jpg"
 });
-function buildItemAction(element2) {
-  const actionType = element2.dataset.sortliId;
-  if (!actionType) {
-    return;
+const { $t, ui, selection, state, tour, types, context, dom } = useBlokkli();
+const getAllowedTypesForSelected = (p) => {
+  if (types.itemBundlesWithNested.includes(p.bundle)) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
   }
-  const itemBundle = element2.dataset.itemBundle;
-  return {
-    itemType: "action",
-    actionType,
-    itemBundle,
-    element: () => element2
-  };
-}
-const { state, $t, eventBus, ui, element } = useBlokkli();
-const hasContextMenuOpen = computed(
-  () => ui.openContextMenu.value.startsWith("add_list_item_")
+  if (p.host.type === itemEntityType) {
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.host.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
+  } else {
+    return types.getFieldConfig(
+      context.value.entityType,
+      context.value.entityBundle,
+      p.host.fieldName
+    )?.allowedBundles || [];
+  }
+};
+const bundlesForRenderedFields = computed(() => {
+  return dom.registeredFieldTypes.value.flatMap((field) => {
+    return types.getFieldConfig(
+      field.entityType,
+      field.entityBundle,
+      field.fieldName
+    )?.allowedBundles || [];
+  }).filter(onlyUnique);
+});
+const generallyAvailableBundles = computed(
+  () => types.generallyAvailableBundles.filter(
+    (v) => (
+      // Exclude bundles for which no field is currently being rendered.
+      bundlesForRenderedFields.value.includes(v.id)
+    )
+  )
 );
-const isSidebar = computed(() => ui.addListOrientation.value === "sidebar");
-const shouldRender = computed(() => state.editMode.value === "editing");
-watch(ui.addListOrientation, () => {
-  nextTick(() => {
-    eventBus.emit("add-list:change");
-  });
+const selectableBundles = computed(() => {
+  if (selection.items.value.length) {
+    return selection.items.value.flatMap((v) => getAllowedTypesForSelected(v));
+  }
+  return generallyAvailableBundles.value.map((v) => v.id || "");
 });
-const CLASS_LEFT = "bk-has-add-list-left";
-const CLASS_BOTTOM = "bk-has-add-list-bottom";
+const shouldRender = computed(
+  () => state.canEdit.value && state.editMode.value === "editing"
+);
+const hasContextMenuOpen = computed(
+  () => ui.openContextMenu.value.startsWith("add_list_item_add-list-blocks")
+);
 const wrapper = ref(null);
-const isActive = ref(false);
+const isHovered = ref(false);
 let mouseTimeout = null;
-const style = computed(() => {
-  if (settings.value.orientation === "vertical" && (isActive.value || hasContextMenuOpen.value) && wrapper.value) {
-    const widths = element.queryAll(
-      wrapper.value,
-      ".bk-list-item-label span",
-      "AddList vertical sidebar style",
-      (el) => el.offsetWidth
-    );
-    const largestWidth = Math.max(...widths);
-    return {
-      "--bk-add-list-width": largestWidth + 90
-    };
-  }
-  return void 0;
+const isActive = computed(() => {
+  return (isHovered.value || hasContextMenuOpen.value || tour.isTouring.value) && !selection.isDragging.value;
 });
 function onMouseEnter() {
-  clearTimeout(mouseTimeout);
+  if (mouseTimeout) {
+    clearTimeout(mouseTimeout);
+    isHovered.value = true;
+    return;
+  }
   mouseTimeout = setTimeout(() => {
-    isActive.value = true;
+    isHovered.value = true;
   }, 200);
 }
 function onMouseLeave() {
   clearTimeout(mouseTimeout);
-  isActive.value = false;
+  isHovered.value = false;
 }
 const onWheel = (e) => {
   if (e.ctrlKey || e.metaKey) {
     return;
   }
-  if (ui.addListOrientation.value === "horizontal" && e.deltaX) {
-    e.stopPropagation();
-    return;
-  }
-  if (ui.addListOrientation.value === "vertical" && e.deltaY) {
-    e.stopPropagation();
-  }
+  e.stopPropagation();
 };
 const sidebarTitle = computed(() => $t("addListSidebarTitle", "Add blocks"));
 const tourText = computed(
@@ -167,20 +126,6 @@ const tourText = computed(
     "<p>This shows the list of available blocks that can be placed. Add a block by dragging the icon into the page.</p><p>When an existing block is selected, some blocks may be greyed out. This indicates which blocks can be placed inside or after the selected block.</p>"
   )
 );
-addElementClasses(
-  document.documentElement,
-  CLASS_BOTTOM,
-  computed(
-    () => ui.addListOrientation.value === "horizontal" && shouldRender.value
-  )
-);
-addElementClasses(
-  document.documentElement,
-  CLASS_LEFT,
-  computed(
-    () => ui.addListOrientation.value === "vertical" && shouldRender.value
-  )
-);
 </script>
 
 <script>

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

@@ -38,7 +38,10 @@
     key-code="O"
     weight="90"
   >
-    <Teleport v-if="isActive && dom.isReady.value" to="body">
+    <Teleport
+      v-if="isActive && dom.isReady.value"
+      :to="ui.mainLayoutElement.value"
+    >
       <Overview :artboard="artboard" />
     </Teleport>
   </PluginViewOption>
@@ -166,45 +169,63 @@ watch(options, function(newOptions) {
 const AUTOSCROLL_EDGE_ZONE = 130;
 const AUTOSCROLL_SPEED = 12;
 let autoScrollSpeed = 1;
+let lastScrollDirection = 0;
 function edgeStep(distance) {
   const ratio = distance / AUTOSCROLL_EDGE_ZONE;
   return Math.pow(ratio, 3) * AUTOSCROLL_SPEED;
 }
 let hasLeftAddList = false;
+let hasLeftEdgeZone = false;
 onBlokkliEvent("dragging:end", () => {
   hasLeftAddList = false;
+  hasLeftEdgeZone = false;
+  autoScrollSpeed = 1;
+  lastScrollDirection = 0;
 });
-onBlokkliEvent("animationFrame:before", ({ time, mouseY, mouseX }) => {
+function handleAutoScroll(mouseX, mouseY) {
   if (selection.isDragging.value) {
-    if (ui.addListOrientation.value === "horizontal") {
-      if (!hasLeftAddList) {
-        if (isInsideRect(mouseX, mouseY, ui.visibleViewportPadded.value)) {
-          hasLeftAddList = true;
-        } else {
-          return;
-        }
+    if (!hasLeftAddList) {
+      if (isInsideRect(mouseX, mouseY, ui.visibleViewportPadded.value)) {
+        hasLeftAddList = true;
+      } else {
+        return;
       }
     }
-    const viewportHeight = ui.viewport.value.height;
+    const viewportHeight = ui.visibleViewport.value.height;
     const currentOffset = artboard.getOffset();
-    const y = Math.min(Math.max(mouseY, 0), viewportHeight);
+    const y = Math.min(
+      Math.max(mouseY - ui.visibleViewport.value.y, 0),
+      viewportHeight
+    );
+    const isInEdgeZone = y < AUTOSCROLL_EDGE_ZONE || y > viewportHeight - AUTOSCROLL_EDGE_ZONE;
+    if (!isInEdgeZone && !hasLeftEdgeZone) {
+      hasLeftEdgeZone = true;
+    }
     let dy = 0;
-    if (y < AUTOSCROLL_EDGE_ZONE) {
-      const dist = AUTOSCROLL_EDGE_ZONE - y;
-      dy = edgeStep(dist);
-    } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
-      const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
-      dy = -edgeStep(dist);
-    } else {
+    let currentDirection = 0;
+    if (hasLeftEdgeZone && isInEdgeZone) {
+      if (y < AUTOSCROLL_EDGE_ZONE) {
+        const dist = AUTOSCROLL_EDGE_ZONE - y;
+        dy = edgeStep(dist);
+        currentDirection = 1;
+      } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
+        const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
+        dy = -edgeStep(dist);
+        currentDirection = -1;
+      }
+    }
+    if (currentDirection !== 0 && currentDirection !== lastScrollDirection) {
       autoScrollSpeed = 1;
+      lastScrollDirection = currentDirection;
     }
     if (dy !== 0) {
       artboard.setOffset(null, currentOffset.y + dy * autoScrollSpeed);
       autoScrollSpeed = Math.min(autoScrollSpeed * 1.01, 2.25);
     }
-  } else {
-    autoScrollSpeed = 1;
   }
+}
+onBlokkliEvent("animationFrame:before", ({ time, mouseY, mouseX }) => {
+  handleAutoScroll(mouseX, mouseY);
   artboard.loop(time);
   const artboardSize = artboard.getArtboardSize();
   if (artboardSize) {

package/dist/runtime/components/Edit/Features/Artboard/Scrollbar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value" defer>
     <div
       class="bk bk-artboard-scrollbar"
       :class="'bk-orientation-' + orientation"
@@ -13,11 +13,12 @@
 
 <script setup>
 import { scrollbar } from "artboard-deluxe";
-import { onBeforeUnmount, onMounted, ref } from "#imports";
+import { onBeforeUnmount, onMounted, ref, useBlokkli } from "#imports";
 const props = defineProps({
   artboard: { type: Object, required: true },
   orientation: { type: String, required: true }
 });
+const { ui } = useBlokkli();
 const el = ref();
 const thumb = ref();
 let scrollbarPlugin = null;

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

@@ -68,37 +68,11 @@ import { useBlokkli, ref } from "#imports";
 import ResultMarkup from "./ResultMarkup/index.vue";
 const { $t, adapter } = useBlokkli();
 const emit = defineEmits(["close", "submit"]);
-const prompt = ref(
-  `Write content for a page talking about VueJS. Please come up with good titles and content for each section.
-
-# Origins
-Write about when Vue was created and by whom.
-
-# Release of Vue 2
-When was it released, what were the changes.
-
-# Release of Vue 3
-Write about the big changes introduced in Vue 3.
-
-# Comparison to React
-`
-);
+const prompt = ref("");
 const isGenerating = ref(false);
 const result = ref({
   type: "markup",
-  content: `
-<h2>Origins</h2>
-<p>Vue was created in 2014 by Evan You, a former Google engineer. It was initially released to the public in February 2014.</p>
-
-<h2>Release of Vue 2</h2>
-<p>Vue 2 was released in September 2016. This release introduced significant improvements in performance and the virtual DOM implementation, making Vue even more efficient and capable.</p>
-
-<h2>Release of Vue 3</h2>
-<p>Vue 3, released in September 2020, brought several major changes, including the composition API, better TypeScript integration, and significant improvements in terms of performance, tree-shaking, and the overall developer experience.</p>
-
-<h2>Comparison to React</h2>
-<p>Vue is often compared to React due to their shared focus on building user interfaces. While React is developed and maintained by Facebook, Vue is an open-source project led by Evan You. Both frameworks have their strengths and weaknesses, and the choice between them often depends on the specific requirements of a project and the preferences of the development team.</p>
-`
+  content: ""
 });
 const onSubmit = () => {
   if (!result.value) {

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

@@ -1,25 +1,14 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
       <Overlay v-if="placedAction" @close="onClose" @submit="onSubmit" />
     </BlokkliTransition>
   </Teleport>
-
-  <PluginAddAction
-    type="assistant"
-    :title="$t('assistantAddAction', 'Add with AI Assistant')"
-    :description="
-  $t('assistantAddActionDescription', 'Add content using an AI assistant.')
-"
-    icon="robot"
-    color="rose"
-    @placed="placedAction = $event"
-  />
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
-import { PluginAddAction } from "#blokkli/plugins";
+import defineAddAction from "#blokkli/helpers/composables/defineAddAction";
 import { BlokkliTransition } from "#blokkli/components";
 import Overlay from "./Overlay/index.vue";
 const { adapter } = defineBlokkliFeature({
@@ -34,7 +23,7 @@ const { adapter } = defineBlokkliFeature({
   screenshot: "feature-assistant.jpg",
   dependencies: ["add-list"]
 });
-const { state, $t } = useBlokkli();
+const { state, $t, ui } = useBlokkli();
 const placedAction = ref(null);
 const onClose = () => {
   placedAction.value = null;
@@ -52,6 +41,21 @@ const onSubmit = async (result) => {
   }
   onClose();
 };
+defineAddAction(() => {
+  return {
+    id: "assistant",
+    title: $t("assistantAddAction", "Add with AI Assistant"),
+    description: $t(
+      "assistantAddActionDescription",
+      "Add content using an AI assistant."
+    ),
+    icon: "robot",
+    color: "rose",
+    callback: (data) => {
+      placedAction.value = data;
+    }
+  };
+});
 </script>
 
 <script>

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

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="block-scheduler"
     :title="$t('blockSchedulerDialogTitle', 'Manage scheduling')"
     :submit-label="$t('blockSchedulerDialogSubmit', 'Save schedule')"
     :width="900"

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

@@ -23,7 +23,7 @@
       </div>
     </template>
   </PluginItemAction>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <SchedulerDialog
         v-if="isVisible"
@@ -48,7 +48,7 @@ defineBlokkliFeature({
   description: "Adds support for scheduling blocks.",
   requiredAdapterMethods: ["setBlockScheduleDate"]
 });
-const { $t, state, selection, types } = useBlokkli();
+const { $t, state, selection, types, ui } = useBlokkli();
 const bundlesWithPublish = computed(
   () => types.generallyAvailableBundles.filter((v) => v.hasPublishOn).map((v) => v.id)
 );

package/dist/runtime/components/Edit/Features/Clipboard/List/index.vue

@@ -3,7 +3,7 @@
     <div
       v-for="(item, index) in items"
       :key="index + item.data + renderKey"
-      class="bk-parent bk-sidebar-padding"
+      class="bk-parent bk-sidebar-padding bk-clipboard-list-item"
       :data-sortli-id="index"
     >
       <div class="bk-clipboard-item">