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

package/dist/runtime/helpers/uiProvider.js

@@ -136,8 +136,38 @@ export default function(providerElement, storage, state, context, element) {
     }
     return 50;
   });
-  const activeSidebarLeft = storage.use("sidebar:active:left", "");
-  const activeSidebarRight = storage.use("sidebar:active:right", "");
+  const activeSidebarsLeft = ref([]);
+  const activeSidebarsRight = ref([]);
+  function setActiveSidebar(region, id) {
+    if (region === "left") {
+      if (activeSidebarsLeft.value.includes(id)) {
+        return;
+      }
+      activeSidebarsLeft.value.push(id);
+    } else {
+      if (activeSidebarsRight.value.includes(id)) {
+        return;
+      }
+      activeSidebarsRight.value.push(id);
+    }
+  }
+  function removeActiveSidebar(region, id) {
+    if (region === "left") {
+      activeSidebarsLeft.value = activeSidebarsLeft.value.filter(
+        (v) => v !== id
+      );
+    } else {
+      activeSidebarsRight.value = activeSidebarsRight.value.filter(
+        (v) => v !== id
+      );
+    }
+  }
+  const hasSidebarLeft = computed(() => {
+    return !!activeSidebarsLeft.value.length;
+  });
+  const hasSidebarRight = computed(() => {
+    return !!activeSidebarsRight.value.length;
+  });
   const settingsStorage = storage.use("feature:add-list:settings", {
     orientation: "vertical"
   });
@@ -150,7 +180,7 @@ export default function(providerElement, storage, state, context, element) {
       if (addListOrientation.value === "vertical" && state.editMode.value === "editing") {
         x += 70;
       }
-      if (activeSidebarLeft.value) {
+      if (hasSidebarLeft.value) {
         x += 400;
       }
     }
@@ -164,7 +194,7 @@ export default function(providerElement, storage, state, context, element) {
       return viewportWidth.value;
     }
     let width = viewportWidth.value - visibleViewportX.value - 50;
-    if (activeSidebarRight.value) {
+    if (hasSidebarRight.value) {
       width -= 351;
     }
     return width;
@@ -262,12 +292,12 @@ export default function(providerElement, storage, state, context, element) {
   addElementClasses(
     document.documentElement,
     "bk-has-sidebar-left",
-    activeSidebarLeft
+    hasSidebarLeft
   );
   addElementClasses(
     document.documentElement,
     "bk-has-sidebar-right",
-    activeSidebarRight
+    hasSidebarRight
   );
   addElementClasses(document.documentElement, ["bk-html-root"]);
   addElementClasses(document.body, "bk-body");
@@ -346,6 +376,10 @@ export default function(providerElement, storage, state, context, element) {
     setSelectionColor,
     removeSelectionColor,
     setBannerHeight,
-    removeBanner
+    removeBanner,
+    setActiveSidebar,
+    removeActiveSidebar,
+    hasSidebarLeft,
+    hasSidebarRight
   };
 }

package/dist/runtime/helpers/webgl/index.d.ts

@@ -19,7 +19,6 @@ type PendingRect<T> = {
     checkOverlap: boolean;
 };
 export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
-    gl?: WebGLRenderingContext;
     added: Set<string>;
     rects: Record<string, T>;
     positions: number[];
@@ -34,13 +33,13 @@ export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
     placedRects: PlacedRectangle[];
     deferredMode: boolean;
     pendingRects: PendingRect<T>[];
-    constructor(gl?: WebGLRenderingContext, options?: RectangleBufferCollectorOptions);
+    constructor(options?: RectangleBufferCollectorOptions);
     reset(): void;
     getIdealPosition(x: number, y: number, width: number, height: number, isEmptyField?: boolean): Rectangle;
     addRectangle(rect: Omit<T, 'index'>, type: number, checkOverlap?: boolean): void;
     processPendingRects(): void;
     getIndex(id: string): number | undefined;
     updateRectangle(): void;
-    createBufferInfo(): BufferInfo | null;
+    createBufferInfo(gl: WebGLRenderingContext): BufferInfo;
 }
 export {};

package/dist/runtime/helpers/webgl/index.js

@@ -1,7 +1,6 @@
 import { createBufferInfoFromArrays } from "twgl.js";
 import { intersects } from "../index.js";
 export class RectangleBufferCollector {
-  gl;
   added = /* @__PURE__ */ new Set();
   rects = {};
   positions = [];
@@ -16,8 +15,7 @@ export class RectangleBufferCollector {
   placedRects = [];
   deferredMode = false;
   pendingRects = [];
-  constructor(gl, options) {
-    this.gl = gl;
+  constructor(options) {
     this.deferredMode = options?.deferredMode || false;
   }
   reset() {
@@ -279,40 +277,37 @@ export class RectangleBufferCollector {
   }
   updateRectangle() {
   }
-  createBufferInfo() {
-    if (!this.gl) {
-      return null;
-    }
-    return createBufferInfoFromArrays(this.gl, {
+  createBufferInfo(gl) {
+    return createBufferInfoFromArrays(gl, {
       a_position: {
         numComponents: 3,
         data: this.positions,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_rect_id: {
         numComponents: 1,
         data: this.rectId,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_state: {
         numComponents: 1,
         data: this.state,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_rect_type: {
         numComponents: 1,
         data: this.types,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_rect_radius: {
         numComponents: 4,
         data: this.radius,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       a_quad: {
         numComponents: 4,
         data: this.quad,
-        type: this.gl.FLOAT
+        type: gl.FLOAT
       },
       indices: this.indices
     });

package/dist/runtime/icons/dock-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 18H9V6H20Z" /></svg>

package/dist/runtime/icons/dock-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z" /></svg>

package/dist/runtime/icons/dock-window.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 18V20H4A2 2 0 0 1 2 18V8H4V18M22 6V14A2 2 0 0 1 20 16H8A2 2 0 0 1 6 14V6A2 2 0 0 1 8 4H20A2 2 0 0 1 22 6M20 6H8V14H20Z" /></svg>

package/dist/runtime/plugins/blokkliDirectives.js

@@ -78,7 +78,7 @@ function createDirective(type) {
       if (!fieldName) {
         return;
       }
-      app.directive.registerDirectiveElement(el, fieldName, entity, type);
+      app.directive.registerDirectiveElement(el, fieldName, entity, type, false);
     },
     beforeUnmount(el, binding, vnode) {
       if (!isEditing()) {

package/dist/runtime/types/index.d.ts

@@ -737,23 +737,6 @@ export interface DraggableMediaLibraryItem {
     mediaBundle: string;
 }
 export type DraggableItem = DraggableClipboardItem | DraggableNewItem | DraggableActionItem | DraggableExistingBlock | DraggableExistingStructureBlock | DraggableReusableItem | DraggableSearchContentItem | DraggableMediaLibraryItem;
-/**
- * Defines a droppable entity field.
- */
-export type DroppableEntityField = {
-    /**
-     * The droppable field element.
-     */
-    element: HTMLElement;
-    /**
-     * The host.
-     */
-    host: DraggableExistingBlock | EntityContext;
-    /**
-     * The name of the field on which entities can be dropped.
-     */
-    fieldName: string;
-};
 export type MoveBlockEvent = {
     afterUuid?: string;
     item: DraggableExistingBlock;
@@ -817,7 +800,7 @@ export type AnimationFrameEvent = {
     time: number;
 };
 export type Message = {
-    type: 'success' | 'error';
+    type: 'success' | 'error' | 'warning';
     message: string;
     additional?: string | Error | unknown;
     replace?: boolean;
@@ -832,7 +815,6 @@ export type Coord = {
 };
 export type Rectangle = Size & Coord;
 export type CanvasDrawEvent = {
-    gl: WebGLRenderingContext;
     mouseX: number;
     mouseY: number;
     mouseArtboard: Coord;
@@ -841,6 +823,7 @@ export type CanvasDrawEvent = {
     artboardSize: Size;
     time: number;
     selectedUuids: string[];
+    dpi: number;
 };
 export type MakeReusableEvent = {
     label: string;
@@ -880,7 +863,6 @@ export type ScrollIntoViewEvent = {
 export type PluginMountEvent = {
     type: 'ItemDropdown';
     id: string;
-    isRendering: ComputedRef<boolean>;
 };
 export type PluginUnmountEvent = {
     type: 'ItemDropdown';
@@ -1031,6 +1013,7 @@ export type EventbusEvents = {
     'animationFrame:before': AnimationFrameBeforeEvent;
     'animationFrame:after': undefined;
     'canvas:draw': CanvasDrawEvent;
+    'state:reload:before': undefined;
     'state:reloaded': undefined;
     addContentSearchItem: AddContentSearchItemEvent;
     'option:update': UpdateBlockOptionEvent;
@@ -1043,7 +1026,6 @@ export type EventbusEvents = {
     'editable:focus': EditableFieldFocusEvent;
     'editable:update': EditableFieldUpdateEvent;
     'editable:save': undefined;
-    'droppable:focus': DroppableEntityField;
     'drop:clipboardItem': DropClipboardItemEvent;
     'sidebar:close': undefined;
     'sidebar:open': string;
@@ -1417,5 +1399,6 @@ export type RegisteredField = {
 };
 export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment'>;
 export type VueClassProp = string | Record<string, boolean> | VueClassProp[];
+export type SidebarRegion = 'left' | 'right';
 declare const _default: {};
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.23",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",

package/dist/runtime/blokkliPlugins/DroppableEdit/index.vue

@@ -1,56 +0,0 @@
-<template>
-  <Teleport to="body">
-    <BlokkliTransition name="slide-in">
-      <FormOverlay
-        v-if="isVisible"
-        :id="id"
-        :title="title"
-        :icon="icon"
-        @close="onClose"
-      >
-        <slot />
-        <template #footer>
-          <button class="bk-button bk-is-primary" @click="onSubmit">
-            {{ $t("droppableEditFormSave", "Save") }}
-          </button>
-        </template>
-      </FormOverlay>
-    </BlokkliTransition>
-  </Teleport>
-</template>
-
-<script setup>
-import { FormOverlay, BlokkliTransition } from "#blokkli/components";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { ref, useBlokkli } from "#imports";
-const props = defineProps({
-  id: { type: String, required: true },
-  title: { type: String, required: true },
-  icon: { type: null, required: true },
-  entityType: { type: String, required: true }
-});
-const emit = defineEmits(["save"]);
-const { $t, types, state } = useBlokkli();
-const droppable = ref(null);
-const isVisible = ref(false);
-const onClose = () => {
-  isVisible.value = false;
-};
-const onSubmit = () => {
-  if (droppable.value) {
-    emit("save", droppable.value.field);
-  }
-  isVisible.value = false;
-  droppable.value = null;
-};
-onBlokkliEvent("droppable:focus", (field) => {
-  if (state.editMode.value !== "editing") {
-    return;
-  }
-  const config = types.getDroppableFieldConfig(field.fieldName, field.host);
-  if (config.allowedEntityType === props.entityType) {
-    isVisible.value = true;
-    droppable.value = { field, config };
-  }
-});
-</script>

package/dist/runtime/blokkliPlugins/DroppableEdit/index.vue.d.ts

@@ -1,24 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { DroppableEntityField } from '#blokkli/types';
-type __VLS_Props = {
-    id: string;
-    title: string;
-    icon: BlokkliIcon;
-    entityType: string;
-};
-declare var __VLS_18: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_18) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    save: (data: DroppableEntityField) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSave?: ((data: DroppableEntityField) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/blokkliPlugins/ItemDropdown/index.vue

@@ -1,76 +0,0 @@
-<template>
-  <Teleport v-if="enabled" to="#bk-blokkli-item-actions-dropdown">
-    <div
-      v-show="items.length"
-      :style="{
-  order: weight
-}"
-    >
-      <ol>
-        <li v-for="item in itemsMapped" :key="item.id">
-          <button
-            class="bk-blokkli-item-actions-type-dropdown-button"
-            :disabled="!item.enabled"
-            @click.prevent="onClick(item)"
-          >
-            <div class="bk-blokkli-item-actions-type-dropdown-icon">
-              <Icon v-if="item.icon" :name="item.icon" />
-              <ItemIcon v-else-if="item.bundle" :bundle="item.bundle" />
-            </div>
-            <div>
-              <div>{{ item.label }}</div>
-            </div>
-            <div v-if="item.description" class="bk-tooltip">
-              {{ item.description }}
-            </div>
-          </button>
-        </li>
-      </ol>
-    </div>
-  </Teleport>
-</template>
-
-<script>
-import { Icon, ItemIcon } from "#blokkli/components";
-import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
-</script>
-
-<script setup>
-const props = defineProps({
-  id: { type: String, required: true },
-  title: { type: String, required: true },
-  enabled: { type: Boolean, required: true },
-  items: { type: Array, required: true },
-  icon: { type: null, required: false },
-  weight: { type: [String, Number], required: false }
-});
-const emit = defineEmits(["select"]);
-const itemsMapped = computed(() => {
-  return props.items.map((item) => {
-    return {
-      ...item,
-      icon: item.icon ?? props.icon,
-      enabled: item.enabled !== false
-    };
-  });
-});
-const { eventBus } = useBlokkli();
-const isRendering = computed(() => props.enabled);
-function onClick(item) {
-  emit("select", item);
-  eventBus.emit("action:selected");
-}
-onMounted(() => {
-  eventBus.emit("plugin:mount", {
-    type: "ItemDropdown",
-    id: props.id,
-    isRendering
-  });
-});
-onBeforeUnmount(() => {
-  eventBus.emit("plugin:unmount", {
-    type: "ItemDropdown",
-    id: props.id
-  });
-});
-</script>

package/dist/runtime/blokkliPlugins/ItemDropdown/index.vue.d.ts

@@ -1,31 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-type Item = {
-    id: string;
-    label: string;
-    description?: string;
-    enabled?: boolean;
-    icon?: BlokkliIcon;
-    bundle?: string;
-};
-declare const _default: <T extends Item>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onSelect?: ((item: T) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSelect"> & {
-        id: string;
-        title: string;
-        enabled: boolean;
-        items: T[];
-        icon?: BlokkliIcon;
-        weight?: string | number;
-    } & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {};
-    emit: (e: "select", item: T) => void;
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/runtime/components/Edit/Features/BlockAddList/docs.md

@@ -1,15 +0,0 @@
-## Selectable blocks
-
-Renders a list of block bundles that can be added to the current page.
-
-## Rendered bundles
-
-The component uses the data returned by [adapter.getAllBundles] to get a list of
-all block bundles. It then uses the value from [adapter.getFieldConfig] to only
-render block bundles that can actually be added in the current edit session.
-
-_can be added_ is defined as such:
-
-- It can be added to any of the fields directly inside `<BlokkliProvider>`
-- It can be added to any of the nested fields of blocks that are allowed on the
-  page