@blokkli/editor 1.2.0 → 1.3.0

package/dist/runtime/helpers/animationProvider.js

@@ -22,7 +22,8 @@ export default function(ui) {
     eventBus.emit("animationFrame", {
       mouseX,
       mouseY,
-      fieldAreas: []
+      fieldAreas: [],
+      time
     });
   });
   function onWindowMouseMove(e) {

package/dist/runtime/helpers/featuresProvider.d.ts

@@ -1,23 +1,16 @@
 import type { FeatureDefinition, AdapterMethods } from '#blokkli/types';
-import type { ValidFeatureKey } from '#blokkli-runtime/features';
+import { type ValidFeatureKey } from '#blokkli-runtime/features';
 import { type ComputedRef } from '#imports';
+import type { StorageProvider } from './storageProvider.js';
 export type FeaturesProvider = {
     features: ComputedRef<FeatureDefinition<AdapterMethods[], ValidFeatureKey>[]>;
-    mount: (feature: FeatureDefinition<AdapterMethods[], ValidFeatureKey>) => void;
-    unmount: (id: string) => void;
-};
-export default function (): {
-    features: ComputedRef<{
+    betaFeatures: ComputedRef<{
         id: ValidFeatureKey;
-        label?: string | undefined;
-        icon: import("../../../.nuxt/blokkli/icons").BlokkliIcon;
-        description?: string | undefined;
-        dependencies?: ValidFeatureKey[] | undefined;
-        viewports?: import("../constants").Viewport[] | undefined;
-        requiredAdapterMethods?: (keyof import("../adapter").BlokkliAdapter<any>)[] | undefined;
-        settings?: Record<string, import("#blokkli/types").FeatureDefinitionSetting> | undefined;
-        screenshot?: string | undefined;
+        label: string;
+        description?: string;
     }[]>;
+    enabledBetaFeatures: ComputedRef<ValidFeatureKey[]>;
     mount: (feature: FeatureDefinition<AdapterMethods[], ValidFeatureKey>) => void;
     unmount: (id: string) => void;
 };
+export default function (storage: StorageProvider): FeaturesProvider;

package/dist/runtime/helpers/featuresProvider.js

@@ -1,7 +1,33 @@
+import {
+  featureComponents
+} from "#blokkli-runtime/features";
 import { computed, ref } from "#imports";
-export default function() {
+import { falsy } from "./index.js";
+export default function(storage) {
   const mountedFeatures = ref([]);
+  const settingsSettings = storage.use(
+    "feature:settings:settings",
+    {}
+  );
+  const enabledBetaFeatures = computed(() => {
+    return Object.entries(settingsSettings.value).map(([key, value]) => {
+      const [a, b] = key.split(":");
+      if (a === "beta" && b && value === true) {
+        return b;
+      }
+      return null;
+    }).filter(falsy);
+  });
   const features = computed(() => mountedFeatures.value);
+  const betaFeatures = computed(
+    () => featureComponents.filter((v) => v.beta).map((v) => {
+      return {
+        id: v.id,
+        label: v.label,
+        description: v.description
+      };
+    })
+  );
   const unmount = (id) => {
     mountedFeatures.value = mountedFeatures.value.filter((v) => v.id !== id);
   };
@@ -10,6 +36,8 @@ export default function() {
   };
   return {
     features,
+    betaFeatures,
+    enabledBetaFeatures,
     mount,
     unmount
   };

package/dist/runtime/helpers/stateProvider.d.ts

@@ -26,6 +26,7 @@ export type StateProvider = {
     editMode: Readonly<Ref<EditMode>>;
     mutatedEntity: Readonly<Ref<any>>;
     canEdit: ComputedRef<boolean>;
+    stateAvailable: ComputedRef<boolean>;
     isLoading: Readonly<Ref<boolean>>;
     getFieldBlockCount: (key: string) => number;
     getBlockBundleCount: (bundle: string) => number;

package/dist/runtime/helpers/stateProvider.js

@@ -12,6 +12,8 @@ import { falsy, getFieldKey } from "#blokkli/helpers";
 import { eventBus, emitMessage } from "#blokkli/helpers/eventBus";
 import { nextTick } from "#imports";
 export default async function(adapter, context, $t) {
+  const stateLoaded = ref(false);
+  const stateLoadError = ref(false);
   const owner = ref(null);
   const refreshKey = ref("");
   const mutatedFields = ref([]);
@@ -183,12 +185,22 @@ export default async function(adapter, context, $t) {
     return false;
   };
   async function loadState() {
-    const state = await adapter.loadState();
-    if (state) {
+    try {
+      const state = await adapter.loadState();
+      if (!state) {
+        throw new Error("Missing state.");
+      }
       setContext(adapter.mapState(state));
+      stateLoadError.value = false;
+      stateLoaded.value = true;
+    } catch {
+      stateLoadError.value = true;
+      stateLoaded.value = false;
     }
   }
-  const canEdit = computed(() => !!owner.value?.currentUserIsOwner);
+  const canEdit = computed(
+    () => stateLoaded.value && !!owner.value?.currentUserIsOwner && !stateLoadError.value
+  );
   const isTranslation = computed(
     () => context.value.language !== translation.value.sourceLanguage && translation.value.isTranslatable
   );
@@ -204,13 +216,20 @@ export default async function(adapter, context, $t) {
   onBlokkliEvent("reloadState", async () => {
     await loadState();
   });
-  onBlokkliEvent("reloadEntity", async () => {
+  onBlokkliEvent("reloadEntity", async (cb) => {
     await refreshNuxtData();
     await loadState();
+    if (cb) {
+      cb();
+    }
   });
   provide(INJECT_MUTATED_FIELDS_MAP, mutatedFieldsMap);
   await loadState();
+  const stateAvailable = computed(
+    () => stateLoaded.value && !stateLoadError.value
+  );
   return {
+    stateAvailable,
     refreshKey,
     owner: readonly(owner),
     mutatedFields,

package/dist/runtime/helpers/uiProvider.d.ts

@@ -2,6 +2,7 @@ import { type Ref, type ComputedRef } from 'vue';
 import type { StorageProvider } from './storageProvider.js';
 import type { AddListOrientation, Coord, Rectangle, Size } from '#blokkli/types';
 import type { Viewport } from '#blokkli/constants';
+import type { StateProvider } from './stateProvider.js';
 export type UiProvider = {
     rootElement: () => HTMLElement;
     artboardElement: () => HTMLElement;
@@ -16,6 +17,9 @@ export type UiProvider = {
     isArtboard: () => boolean;
     isAnimating: Ref<boolean>;
     isProxyMode: Ref<boolean>;
+    isTransforming: ComputedRef<boolean>;
+    setTransform: (label?: string | null | undefined) => void;
+    transformLabel: ComputedRef<string>;
     useAnimations: ComputedRef<boolean>;
     lowPerformanceMode: ComputedRef<boolean>;
     toolbarHeight: ComputedRef<number>;
@@ -34,4 +38,4 @@ export type UiProvider = {
     getAbsoluteElementRect: (v: HTMLElement | Rectangle, scale?: number, offset?: Coord) => Rectangle;
     getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
 };
-export default function (storage: StorageProvider): UiProvider;
+export default function (storage: StorageProvider, state: StateProvider): UiProvider;

package/dist/runtime/helpers/uiProvider.js

@@ -9,13 +9,14 @@ import { eventBus } from "./eventBus.js";
 import { falsy } from "./index.js";
 const ARTBOARD_CLASS = "bk-is-artboard";
 const CLASS_PROXY_MODE = "bk-is-proxy-mode";
-export default function(storage) {
+export default function(storage, state) {
   let cachedRootElement = null;
   let cachedArtboardElement = null;
   let cachedProviderElement = null;
   const isProxyMode = ref(false);
   const menuIsOpen = ref(false);
   const isAnimating = ref(false);
+  const transformLabel = ref("");
   const openContextMenu = ref("");
   const selectionTopLeft = ref({ x: 0, y: 0 });
   const useAnimationsSetting = storage.use("useAnimations", true);
@@ -27,6 +28,7 @@ export default function(storage) {
   const viewportBlockingRectsMap = ref(
     {}
   );
+  const isTransforming = computed(() => !!transformLabel.value);
   const artboardSize = ref({
     width: 1,
     height: 1
@@ -134,7 +136,7 @@ export default function(storage) {
   const visibleViewportX = computed(() => {
     let x = 0;
     if (!isMobile.value) {
-      if (addListOrientation.value === "vertical") {
+      if (addListOrientation.value === "vertical" && state.editMode.value === "editing") {
         x += 70;
       }
       if (activeSidebarLeft.value) {
@@ -256,6 +258,9 @@ export default function(storage) {
       height: rect.height * scale
     };
   }
+  function setTransform(label) {
+    transformLabel.value = label || "";
+  }
   return {
     menu: {
       isOpen: menuIsOpen,
@@ -269,6 +274,9 @@ export default function(storage) {
     isDesktop,
     isArtboard,
     isAnimating,
+    isTransforming,
+    setTransform,
+    transformLabel: computed(() => transformLabel.value),
     useAnimations,
     visibleViewport,
     visibleViewportPadded,

package/dist/runtime/icons/diff.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>select-compare</title><path d="M13,23H11V1H13V23M9,19H5V5H9V3H5C3.89,3 3,3.89 3,5V19C3,20.11 3.9,21 5,21H9V19M19,7V9H21V7H19M19,5H21C21,3.89 20.1,3 19,3V5M21,15H19V17H21V15M19,11V13H21V11H19M17,3H15V5H17V3M19,21C20.11,21 21,20.11 21,19H19V21M17,19H15V21H17V19Z" /></svg>

package/dist/runtime/icons/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>information-slab-circle</title><path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22M11 7H13V9H11V7M14 17H10V15H11V13H10V11H13V15H14V17Z" /></svg>

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

@@ -213,6 +213,23 @@ export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsI
      * ```
      */
     fieldLayout?: string[][];
+    /**
+     * Define how this component's props should be rendered in the diff view.
+     *
+     * By default, the diff feature assumes all props to be text and will render
+     * plaintext props as HTML and convert complex props (such as arrays or objects)
+     * to string using JSON.stringify().
+     *
+     * You can instead return a string representation of each prop that is used
+     * to display the prop instead.
+     *
+     * For example, if the prop is an image, you may return the filename of the
+     * image instead. If the prop is a number, you can return the formatted number.
+     *
+     * You can also return HTML as the value. The feature uses an HTML differ to
+     * render the diff.
+     */
+    mapDiffProps?: (props?: any) => Record<string, string>;
 };
 export type BlockDefinitionRenderForParent = {
     parentBundle: BlockBundleWithNested;
@@ -680,6 +697,7 @@ export type AnimationFrameEvent = {
     fieldAreas: AnimationFrameFieldArea[];
     mouseX: number;
     mouseY: number;
+    time: number;
 };
 export type Message = {
     type: 'success' | 'error';
@@ -700,6 +718,7 @@ export type CanvasDrawEvent = {
     mouseY: number;
     artboardOffset: Coord;
     artboardScale: number;
+    time: number;
 };
 export type MakeReusableEvent = {
     label: string;
@@ -859,7 +878,8 @@ export type EventbusEvents = {
     editEntity: undefined;
     translateEntity: EntityTranslation;
     reloadState: undefined;
-    reloadEntity: undefined;
+    reloadEntity: (() => void) | undefined;
+    'entity:translated': string;
     'select:start': SelectStartEvent;
     'select:toggle': string;
     'select:shiftToggle': string;
@@ -971,6 +991,7 @@ export type FeatureDefinitionSettingRadios = {
 export type FeatureDefinitionSettingCheckbox = {
     type: 'checkbox';
     label: string;
+    description?: string;
     default: boolean;
     group?: SettingsGroup;
     viewports?: Viewport[];
@@ -994,15 +1015,52 @@ export type FeatureDefinitionSettingMethod = {
 };
 export type FeatureDefinitionSetting = FeatureDefinitionSettingCheckbox | FeatureDefinitionSettingRadios | FeatureDefinitionSettingMethod | FeatureDefinitionSettingSlider;
 export type FeatureDefinition<Methods extends AdapterMethods[] = [], T extends string = ''> = {
+    /**
+     * The unique ID of the feature.
+     */
     id: T;
+    /**
+     * The label of the feature.
+     */
     label?: string;
+    /**
+     * The icon of the feature.
+     */
     icon: BlokkliIcon;
+    /**
+     * Description of the feature.
+     */
     description?: string;
+    /**
+     * Dependencies of the feature.
+     *
+     * Loads this feature only after all of the given features have loaded.
+     *
+     * If one of the dependencies does not load, this feature won't load too.
+     */
     dependencies?: T[];
+    /**
+     * The viewports for which this feature will be loaded.
+     */
     viewports?: Viewport[];
+    /**
+     * The adapter methods required for this feature to work.
+     *
+     * If the adapter does not implement all methods, the feature won't load.
+     */
     requiredAdapterMethods?: [...Methods];
+    /**
+     * Feature-specific settings that will be rendered in the settings dialog.
+     */
     settings?: Record<string, FeatureDefinitionSetting>;
+    /**
+     * Name of the screenshot image file, relative to the feature directory.
+     */
     screenshot?: string;
+    /**
+     * If true, the feature has to be explicitly enabled before it is loaded.
+     */
+    beta?: boolean;
 };
 export type KeyboardShortcut = {
     group?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",
@@ -53,6 +53,7 @@
     "estree-walker-ts": "^1.0.1",
     "fzf": "^0.5.2",
     "get-video-id": "^4.1.7",
+    "html-diff-ts": "^1.4.2",
     "mitt": "^3.0.1",
     "qrcode.vue": "^3.4.1",
     "twgl.js": "^5.5.4"