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

package/dist/runtime/plugins/blokkliDirectives.js

@@ -0,0 +1,96 @@
+import {
+  INJECT_APP,
+  INJECT_ENTITY_CONTEXT,
+  INJECT_IS_IN_REUSABLE
+} from "#blokkli/helpers/symbols";
+import { defineNuxtPlugin } from "#imports";
+function getInjection(vnode, symbol) {
+  return vnode.ctx?.provides?.[symbol];
+}
+function getBlokkliApp(vnode) {
+  return getInjection(vnode, INJECT_APP);
+}
+function getEntityContext(vnode) {
+  return getInjection(vnode, INJECT_ENTITY_CONTEXT);
+}
+function isInReusable(vnode) {
+  return !!getInjection(vnode, INJECT_IS_IN_REUSABLE);
+}
+function getFieldName(binding) {
+  const fieldName = binding.value?.name || binding.arg;
+  if (fieldName && typeof fieldName === "string") {
+    return fieldName;
+  }
+}
+function isEditing() {
+  if (import.meta.client) {
+    return window.location.search.includes("blokkliEditing");
+  }
+  return false;
+}
+function createDirective(type) {
+  const dataset = type === "editable" ? "blokkliEditableField" : "blokkliDroppableField";
+  return {
+    created(el, binding, vnode) {
+      if (import.meta.client) {
+        if (!isEditing()) {
+          return;
+        }
+        if (isInReusable(vnode)) {
+          return;
+        }
+        const fieldName = getFieldName(binding);
+        if (!fieldName) {
+          return;
+        }
+        el.dataset[dataset] = fieldName;
+      }
+    },
+    mounted(el, binding, vnode) {
+      if (!isEditing()) {
+        return;
+      }
+      if (isInReusable(vnode)) {
+        return;
+      }
+      const app = getBlokkliApp(vnode);
+      if (!app) {
+        return;
+      }
+      const entity = getEntityContext(vnode);
+      if (!entity) {
+        return;
+      }
+      const fieldName = getFieldName(binding);
+      if (!fieldName) {
+        return;
+      }
+      app.directive.registerDirectiveElement(el, fieldName, entity, type);
+    },
+    beforeUnmount(el, binding, vnode) {
+      if (!isEditing()) {
+        return;
+      }
+      const app = getBlokkliApp(vnode);
+      if (!app) {
+        return;
+      }
+      const entity = getEntityContext(vnode);
+      if (!entity) {
+        return;
+      }
+      const fieldName = getFieldName(binding);
+      if (!fieldName) {
+        return;
+      }
+      app.directive.unregisterDirectiveElement(el, fieldName, entity, type);
+    }
+  };
+}
+export default defineNuxtPlugin({
+  name: "blokkli:directives",
+  setup(nuxtApp) {
+    nuxtApp.vueApp.directive("blokkli-editable", createDirective("editable"));
+    nuxtApp.vueApp.directive("blokkli-droppable", createDirective("droppable"));
+  }
+});

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

@@ -8,6 +8,7 @@ import type { KeyboardProvider } from '../helpers/keyboardProvider.js';
 import type { UiProvider } from '../helpers/uiProvider.js';
 import type { AnimationProvider } from '../helpers/animationProvider.js';
 import type { StateProvider } from '../helpers/stateProvider.js';
+import type { DirectiveProvider } from '../helpers/providers/directive.js';
 import type { TextProvider } from '../helpers/textProvider.js';
 import type { PluginProvider } from '../helpers/pluginProvider.js';
 import type { eventBus } from './../helpers/eventBus.js';
@@ -19,7 +20,7 @@ import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { SettingsGroup, Viewport } from '#blokkli/constants';
 import type { BlockBundleWithNested, FieldListItemTyped, GlobalOptionsKey, ValidChunkNames, ValidFieldListTypes, ValidGlobalConfigKeys, BundleProps } from '#blokkli-build/generated-types';
 import type { ThemeProvider } from '#blokkli/helpers/themeProvider';
-import type { GlobalOptionsType } from '#blokkli-build/definitions';
+import type { BlokkliFragmentName, GlobalOptionsType } from '#blokkli-build/definitions';
 import type { CommandsProvider } from '#blokkli/helpers/commandsProvider';
 import type { TourProvider } from '#blokkli/helpers/tourProvider';
 import type { DropAreaProvider } from '#blokkli/helpers/dropAreaProvider';
@@ -28,7 +29,10 @@ import type { DebugProvider } from '#blokkli/helpers/debugProvider';
 import type getVideoId from 'get-video-id';
 import type { DefinitionProvider } from '../helpers/definitionProvider.js';
 import type { IndicatorsProvider } from '#blokkli/helpers/indicatorsProvider';
-export type MutateWithLoadingStateFunction = (promise: () => Promise<MutationResponseLike<any>> | undefined, errorMessage?: string, successMessage?: string) => Promise<boolean>;
+import type { BlocksProvider } from '#blokkli/helpers/providers/blocks';
+import type { FieldsProvider } from '#blokkli/helpers/providers/fields';
+import type { ElementProvider } from '#blokkli/helpers/providers/element';
+export type MutateWithLoadingStateFunction = (promise: () => Promise<MutationResponseLike<any>> | undefined, errorMessage?: string | false, successMessage?: string) => Promise<boolean>;
 type GetType<T> = T extends {
     options: infer O;
 } ? T extends {
@@ -341,8 +345,8 @@ export type InjectedBlokkliItem = {
 export type FieldListItem = {
     uuid: string;
     bundle: string;
-    isNew?: boolean;
     options?: Record<string, any>;
+    editContext?: BlockEditContext;
     props?: Record<string, any>;
 };
 export type MutatedField = {
@@ -381,6 +385,7 @@ export type BlokkliProviderEntityContext = {
     bundle: string;
     language?: string;
 };
+export type EditPermission = 'view' | 'edit' | 'review';
 export type EditEntity = {
     label?: string;
     status?: boolean;
@@ -568,8 +573,10 @@ export interface BlockBundleDefinition {
     description?: string;
     allowReusable?: boolean;
     isTranslatable?: boolean;
+    hasPublishOn?: boolean;
+    hasUnpublishOn?: boolean;
 }
-export type EditMode = 'readonly' | 'editing' | 'translating';
+export type EditMode = 'readonly' | 'editing' | 'translating' | 'review';
 export type MutatedOptions = {
     [uuid: string]: {
         [key: string]: string;
@@ -684,36 +691,12 @@ export type DraggableStyle = {
 };
 export interface DraggableExistingStructureBlock {
     itemType: 'existing_structure';
-    uuid: string;
-    itemBundle: string;
+    block: RenderedFieldListItem;
     element: () => HTMLElement;
 }
 export interface DraggableExistingBlock {
     itemType: 'existing';
-    element: () => HTMLElement;
-    entityType: string;
-    hostType: string;
-    hostBundle: string;
-    hostUuid: string;
-    hostFieldName: string;
-    hostFieldListType: ValidFieldListTypes;
-    itemBundle: string;
-    isNew: boolean;
-    uuid: string;
-    isNested: boolean;
-    /**
-     * The bundle if this item is reusable.
-     */
-    reusableBundle?: string;
-    /**
-     * The UUID of the library item this block belongs to.
-     */
-    libraryItemUuid?: string;
-    /**
-     * The title to use when displaying the block in lists during editing.
-     */
-    editTitle?: string;
-    parentBlockBundle: BlockBundleWithNested | undefined;
+    block: RenderedFieldListItem;
 }
 export interface DraggableNewItem {
     itemType: 'new';
@@ -848,11 +831,15 @@ export type Coord = {
 };
 export type Rectangle = Size & Coord;
 export type CanvasDrawEvent = {
+    gl: WebGLRenderingContext;
     mouseX: number;
     mouseY: number;
+    mouseArtboard: Coord;
     artboardOffset: Coord;
     artboardScale: number;
+    artboardSize: Size;
     time: number;
+    selectedUuids: string[];
 };
 export type MakeReusableEvent = {
     label: string;
@@ -936,8 +923,9 @@ export type BlokkliFieldElement = {
     allowedFragments: string[];
     cardinality: number;
     element: HTMLElement;
-    dropAlignment?: 'vertical' | 'horizontal';
+    dropAlignment: FieldDropAlignment | null;
 };
+export type FieldDropAlignment = 'vertical' | 'horizontal';
 export type ActionPlacedEvent = {
     id: string;
     preceedingUuid?: string;
@@ -1021,7 +1009,6 @@ export type EventbusEvents = {
     'dragging:start': DraggableStartEvent;
     'dragging:drop': DropTargetEvent;
     'dragging:end': undefined;
-    setActiveFieldKey: string;
     'add:block:new': AddNewBlockEvent;
     updateMutatedFields: UpdateMutatedFieldsEvent;
     animationFrame: AnimationFrameEvent;
@@ -1036,17 +1023,20 @@ export type EventbusEvents = {
     'select:toggle': string;
     'select:shiftToggle': string;
     'select:end': string[] | undefined;
-    'select:previous': undefined;
-    'select:next': undefined;
     'item:dropped': undefined;
     'block:append': BlockAppendEvent;
-    'item:doubleClick': DraggableExistingBlock;
+    'item:doubleClick': RenderedFieldListItem;
     scrollIntoView: ScrollIntoViewEvent;
     'animationFrame:before': AnimationFrameBeforeEvent;
+    'animationFrame:after': undefined;
     'canvas:draw': CanvasDrawEvent;
     'state:reloaded': undefined;
     addContentSearchItem: AddContentSearchItemEvent;
     'option:update': UpdateBlockOptionEvent;
+    /**
+     * Emitted after finishing changing options.
+     */
+    'option:finish-change': undefined;
     'plugin:mount': PluginMountEvent;
     'plugin:unmount': PluginUnmountEvent;
     'editable:focus': EditableFieldFocusEvent;
@@ -1113,7 +1103,9 @@ export interface BlokkliApp {
     storage: StorageProvider;
     types: BlockDefinitionProvider;
     selection: SelectionProvider;
+    blocks: BlocksProvider;
     keyboard: KeyboardProvider;
+    element: ElementProvider;
     ui: UiProvider;
     animation: AnimationProvider;
     definitions: DefinitionProvider;
@@ -1129,6 +1121,8 @@ export interface BlokkliApp {
     debug: DebugProvider;
     indicators: IndicatorsProvider;
     plugins: PluginProvider;
+    directive: DirectiveProvider;
+    fields: FieldsProvider;
 }
 export type PasteExistingBlocksEvent = {
     uuids: string[];
@@ -1384,5 +1378,42 @@ export type AddAction = {
     description?: string;
     enabled?: boolean;
 };
+export type BlockEditContext = {
+    isPublished: boolean;
+    isNew: boolean;
+    publishOn?: string | null;
+    unpublishOn?: string | null;
+};
+export type RenderedFieldListItem = {
+    uuid: string;
+    bundle: string;
+    isNew: boolean;
+    isPublished: boolean;
+    host: DraggableHostData & {
+        bundle: string;
+    };
+    fieldListType: ValidFieldListTypes;
+    parentBlockBundle: BlockBundleWithNested | null;
+    library: {
+        label: string;
+        libraryItemUuid: string;
+        reusableBundle: string;
+    } | null;
+    isNested: boolean;
+    publishOn?: string | null;
+    unpublishOn?: string | null;
+};
+export type BlokkliDirectiveType = 'editable' | 'droppable';
+export type RegisteredField = {
+    element: HTMLElement;
+    entity: EntityContext;
+    fieldName: string;
+    fieldListType: ValidFieldListTypes;
+    allowedFragments: BlokkliFragmentName[];
+    isNested: boolean;
+    nestingLevel: number;
+    dropAlignment: FieldDropAlignment | null;
+};
+export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment'>;
 declare const _default: {};
 export default _default;

package/package.json

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