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

package/dist/runtime/components/Edit/DraggableList.vue

@@ -19,7 +19,6 @@
         :key="item.uuid + fieldListType + definitions.renderKey.value"
         :uuid="item.uuid"
         :bundle="item.bundle"
-        :is-new="item.isNew"
         :options="item.options"
         :props="item.props"
         is-editing
@@ -36,7 +35,6 @@
         :data-host-field-name="name"
         :data-host-field-list-type="fieldListType"
         :data-is-nested="isNested"
-        :data-is-new="item.isNew"
         :data-entity-type="runtimeConfig.itemEntityType"
         :data-bk-is-muted="isMuted(item)"
       />
@@ -54,7 +52,6 @@
       :key="item.uuid + fieldListType"
       :uuid="item.uuid"
       :bundle="item.bundle"
-      :is-new="item.isNew"
       :options="item.options"
       :props="item.props"
       is-editing
@@ -71,7 +68,6 @@
       :data-host-field-name="name"
       :data-host-field-list-type="fieldListType"
       :data-is-nested="isNested"
-      :data-is-new="item.isNew"
       :data-entity-type="runtimeConfig.itemEntityType"
       :data-bk-is-muted="isMuted(item)"
     />
@@ -105,7 +101,7 @@ const props = defineProps({
   language: { type: String, required: false, default: void 0 },
   tag: { type: String, required: false, default: "div" },
   isNested: { type: Boolean, required: true },
-  fieldListType: { type: String, required: true },
+  fieldListType: { type: null, required: true },
   allowedFragments: { type: Array, required: false, default: void 0 },
   dropAlignment: { type: String, required: false, default: void 0 },
   proxyMode: { type: Boolean, required: false },
@@ -162,18 +158,30 @@ function isMuted(item) {
   if (!item) {
     return true;
   }
+  if (!item.editContext?.isPublished) {
+    return true;
+  }
   const isVisible = isVisibleByOptions(item, props.language);
   const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
   return !(isVisible && isVisibleCustom);
 }
+const data = computed(() => {
+  return {
+    fieldListType: props.fieldListType,
+    allowedFragments: props.allowedFragments ?? [],
+    isNested: props.isNested,
+    nestingLevel: props.nestingLevel,
+    dropAlignment: props.dropAlignment ?? null
+  };
+});
 watch(root, function(newRoot) {
   if (newRoot) {
-    dom.updateFieldElement(props.entity, props.name, newRoot);
+    dom.updateFieldElement(props.entity, props.name, newRoot, data.value);
   }
 });
 onMounted(() => {
   if (root.value) {
-    dom.registerField(props.entity, props.name, root.value);
+    dom.registerField(props.entity, props.name, root.value, data.value);
   }
 });
 onBeforeUnmount(() => {

package/dist/runtime/components/Edit/DraggableList.vue.d.ts

@@ -1,6 +1,6 @@
-import type { FieldListItem, EntityContext } from '#blokkli/types';
+import type { FieldListItem, EntityContext, FieldDropAlignment } from '#blokkli/types';
 import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import type { FieldListItemTyped } from '#blokkli-build/generated-types';
+import type { FieldListItemTyped, ValidFieldListTypes } from '#blokkli-build/generated-types';
 type __VLS_Props = {
     name: string;
     fieldKey: string;
@@ -9,9 +9,9 @@ type __VLS_Props = {
     language?: string;
     tag?: string;
     isNested: boolean;
-    fieldListType: string;
+    fieldListType: ValidFieldListTypes;
     allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: 'vertical' | 'horizontal';
+    dropAlignment?: FieldDropAlignment;
     proxyMode?: boolean;
     globalProxyMode?: boolean;
     nestingLevel: number;
@@ -19,9 +19,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     allowedFragments: BlokkliFragmentName[];
+    dropAlignment: FieldDropAlignment;
     tag: string;
     language: string;
-    dropAlignment: "vertical" | "horizontal";
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/EditIndicator.vue

@@ -1,21 +1,19 @@
 <template>
   <Teleport to="body">
-    <div v-show="isVisible" class="bk">
-      <div class="bk-edit-indicator" :style="style">
-        <button
-          ref="button"
-          class="bk-button bk-is-primary"
-          @mouseenter="isHovering = true"
-          @mouseleave="isHovering = false"
-          @click="$emit('edit')"
-        >
-          {{ label }}
-        </button>
-      </div>
+    <div class="bk">
+      <button
+        ref="button"
+        class="bk-edit-indicator bk-button bk-is-primary"
+        @mouseenter="isHovering = true"
+        @mouseleave="isHovering = false"
+        @click="$emit('edit')"
+      >
+        {{ label }}
+      </button>
 
       <div
-        v-if="overlayStyle"
-        :style="overlayStyle"
+        v-show="isHovering"
+        ref="overlay"
         class="bk-edit-indicator-overlay"
       />
     </div>
@@ -24,47 +22,123 @@
 
 <script setup>
 import textProvider from "#blokkli/helpers/textProvider";
-import { ref, computed } from "#imports";
+import { ref, onMounted, onBeforeUnmount, useState, computed } from "#imports";
 import "#blokkli-build/styles.css";
 import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
 const props = defineProps({
   uuid: { type: String, required: true },
-  editLabel: { type: String, required: false }
+  entityType: { type: String, required: true },
+  editLabel: { type: String, required: false },
+  permissions: { type: Array, required: true }
 });
+const key = computed(() => props.entityType + ":" + props.uuid);
 const $t = textProvider();
-const label = computed(
-  () => props.editLabel || $t("editIndicatorLabel", "Edit blocks")
-);
+const label = computed(() => {
+  if (props.editLabel) {
+    return props.editLabel;
+  } else if (props.permissions.includes("edit")) {
+    return $t("editIndicatorLabel", "Edit blocks");
+  } else if (props.permissions.includes("review")) {
+    return $t("editIndicatorLabelReview", "Review changes");
+  } else if (props.permissions.includes("view")) {
+    return $t("editIndicatorLabelView", "View changes");
+  }
+  return null;
+});
 defineEmits(["edit"]);
 const isHovering = ref(false);
-const style = ref({});
 const button = ref(null);
-const isVisible = ref(false);
-const overlayStyle = ref(null);
-function calculateIdealYPosition(elementHeight, bounds) {
-  const idealTop = Math.min(
-    Math.max(bounds.top, bounds.bottom - elementHeight - 20),
-    20
-  );
-  return Math.max(idealTop, bounds.y + 20);
+const overlay = ref(null);
+const targetElement = ref(null);
+const indicatorRegistry = useState(
+  "blokkliEditIndicators",
+  () => []
+);
+const isManager = computed(() => {
+  return indicatorRegistry.value[0]?.key === key.value;
+});
+function calculateIdealYPosition(buttonHeight, bounds, gap) {
+  const elementHeight = bounds.bottom - bounds.top;
+  let position;
+  if (elementHeight < 100) {
+    position = bounds.top + elementHeight / 2 - buttonHeight / 2;
+  } else {
+    position = bounds.top + gap;
+  }
+  position = Math.max(position, gap);
+  return Math.min(position, bounds.bottom - buttonHeight - gap);
 }
-useAnimationFrame(() => {
-  const el = document.querySelector(`[data-provider-uuid="${props.uuid}"]`);
-  isVisible.value = window.innerWidth > 1024;
-  if (isVisible.value && el && el instanceof HTMLElement && button.value) {
-    const rect = el.getBoundingClientRect();
-    const buttonHeight = button.value.getBoundingClientRect().height;
-    const y = calculateIdealYPosition(buttonHeight, rect);
-    style.value.transform = `translateY(${y}px)`;
-    if (isHovering.value) {
-      overlayStyle.value = {
-        width: rect.width + "px",
-        height: rect.height + "px",
-        transform: `translate(${rect.x}px, ${rect.y}px)`
-      };
-    } else {
-      overlayStyle.value = null;
+const GAP = 15;
+const indicators = computed(() => {
+  const indicators2 = [...indicatorRegistry.value];
+  return indicators2.sort((a, b) => {
+    const position = a.targetElement.compareDocumentPosition(b.targetElement);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return 0;
+  });
+});
+function updateAllIndicatorPositions() {
+  const positions = [];
+  const heights = [];
+  for (let i = 0; i < indicators.value.length; i++) {
+    const data = indicators.value[i];
+    const rect = data.targetElement.getBoundingClientRect();
+    const buttonHeight = data.buttonElement.offsetHeight;
+    let idealY = calculateIdealYPosition(buttonHeight, rect, GAP);
+    for (let j = 0; j < i; j++) {
+      const prevRect = indicators.value[j].targetElement.getBoundingClientRect();
+      const prevElementTop = prevRect.top;
+      const prevElementHeight = prevRect.height;
+      const collisionPosition = prevElementTop + prevElementHeight + GAP;
+      if (idealY < collisionPosition) {
+        idealY = collisionPosition;
+      }
     }
+    const elementBottom = rect.bottom - buttonHeight - GAP;
+    if (elementBottom < idealY) {
+      idealY = elementBottom;
+    }
+    idealY = Math.round(idealY);
+    positions.push(idealY);
+    heights.push(buttonHeight);
+    data.buttonElement.style.transform = `translateY(${idealY}px)`;
+  }
+}
+onMounted(() => {
+  const el = document.querySelector(`[data-provider-uuid="${props.uuid}"]`);
+  if (el && el instanceof HTMLElement) {
+    targetElement.value = el;
+  }
+  if (button.value && targetElement.value) {
+    indicatorRegistry.value.push({
+      key: key.value,
+      targetElement: targetElement.value,
+      buttonElement: button.value
+    });
+  }
+});
+onBeforeUnmount(() => {
+  indicatorRegistry.value = indicatorRegistry.value.filter(
+    (i) => i.key !== key.value
+  );
+});
+useAnimationFrame(() => {
+  if (!button.value || !targetElement.value) {
+    return;
+  }
+  if (isManager.value) {
+    updateAllIndicatorPositions();
+  }
+  if (isHovering.value && overlay.value) {
+    const rect = targetElement.value.getBoundingClientRect();
+    overlay.value.style.width = rect.width + "px";
+    overlay.value.style.height = rect.height + "px";
+    overlay.value.style.transform = `translate(${rect.x}px, ${rect.y}px)`;
   }
 });
 </script>

package/dist/runtime/components/Edit/EditIndicator.vue.d.ts

@@ -1,7 +1,10 @@
 import '#blokkli-build/styles.css';
+import type { EditPermission } from '#blokkli/types';
 type __VLS_Props = {
     uuid: string;
+    entityType: string;
     editLabel?: string;
+    permissions: EditPermission[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     edit: (...args: any[]) => void;

package/dist/runtime/components/Edit/EditProvider.vue

@@ -1,41 +1,41 @@
 <template>
   <Teleport to="body">
     <Transition :name="ui.useAnimations.value ? 'bk-loading' : void 0">
-      <Loading
-        v-if="isInitializing || !toolbarLoaded || !featuresLoaded"
-        screen
-      />
+      <Loading v-if="showLoading" screen />
     </Transition>
 
     <div id="bk-banner-container">
-      <Messages />
-      <div v-if="!state.stateAvailable.value" class="bk-state-unavailable">
-        <h2>
-          {{
-            $t("stateUnavailableTitle", "The edit state could not be loaded.")
-          }}
-        </h2>
-        <p>
-          {{
-            $t(
-  "stateUnavailableText",
-  "This could be due to missing permissions or a temporary problem. Please try again later."
-)
-          }}
-        </p>
+      <div id="bk-banner-list" class="bk">
+        <Banner
+          v-if="!state.stateAvailable.value"
+          id="state-unavailable"
+          icon="sad"
+          scheme="red"
+          :text="stateNotAvailableText"
+        />
+        <Banner
+          v-if="viewOnlyBanner"
+          id="view-only"
+          :icon="viewOnlyBanner.icon"
+          scheme="yellow"
+          :text="viewOnlyBanner.text"
+        />
       </div>
+      <Messages />
     </div>
   </Teleport>
+  <Teleport to="#nuxt-root">
+    <div id="bk-canvas-overlay" class="bk bk-canvas-overlay" />
+  </Teleport>
   <Actions v-if="!isInitializing" />
   <Toolbar @loaded="toolbarLoaded = true" />
   <AppMenu v-if="toolbarLoaded" />
   <Indicators />
   <Features
-    v-if="!isInitializing && toolbarLoaded"
+    v-if="isReady"
     :key="route.fullPath"
     @loaded="featuresLoaded = true"
   />
-  <DragInteractions v-if="!isInitializing" />
   <AnimationCanvas v-if="!isInitializing" />
   <Konami />
   <SystemRequirements />
@@ -66,15 +66,16 @@ import Features from "./Features/index.vue";
 import Indicators from "./Indicators/index.vue";
 import AppMenu from "./AppMenu/index.vue";
 import DraggableList from "./DraggableList.vue";
-import DragInteractions from "./DragInteractions/index.vue";
 import AnimationCanvas from "./AnimationCanvas/index.vue";
 import SystemRequirements from "./SystemRequirements/index.vue";
 import Konami from "./Konami/index.vue";
+import Banner from "./Banner/index.vue";
 import animationProvider from "./../../helpers/animationProvider";
 import keyboardProvider from "./../../helpers/keyboardProvider";
 import selectionProvider from "./../../helpers/selectionProvider";
 import editStateProvider from "./../../helpers/stateProvider";
 import typesProvider from "./../../helpers/typesProvider";
+import elementProvider from "./../../helpers/providers/element";
 import domProvider from "./../../helpers/domProvider";
 import textProvider from "./../../helpers/textProvider";
 import storageProvider from "./../../helpers/storageProvider";
@@ -87,8 +88,11 @@ import tourProvider from "./../../helpers/tourProvider";
 import debugProvider from "./../../helpers/debugProvider";
 import definitionProvider from "./../../helpers/definitionProvider";
 import dropAreasProvider from "./../../helpers/dropAreaProvider";
+import blocksProvider from "./../../helpers/providers/blocks";
 import indicatorsProvider from "./../../helpers/indicatorsProvider";
 import pluginProvider from "./../../helpers/pluginProvider";
+import directiveProvider from "./../../helpers/providers/directive";
+import fieldsProvider from "./../../helpers/providers/fields";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -109,7 +113,9 @@ const props = defineProps({
   entityUuid: { type: String, required: true },
   entityBundle: { type: String, required: true },
   language: { type: String, required: false, default: "en" },
-  isolate: { type: Boolean, required: false }
+  isolate: { type: Boolean, required: false },
+  permissions: { type: Array, required: true },
+  providerEl: { type: null, required: true }
 });
 defineSlots();
 const context = computed(() => {
@@ -129,24 +135,40 @@ const featuresLoaded = ref(false);
 const isInitializing = ref(true);
 const definitions = definitionProvider();
 const $t = textProvider(context);
-const state = await editStateProvider(adapter, context, $t, providerKey);
-const storage = await storageProvider(adapter);
+const state = await editStateProvider(
+  adapter,
+  context,
+  $t,
+  providerKey,
+  props.permissions
+);
+const storage = await storageProvider(adapter, context);
 const debug = debugProvider(storage);
+const element = elementProvider(debug);
 const features = featuresProvider(storage);
-const theme = themeProvider();
 const commands = commandsProvider();
 const tour = tourProvider();
 const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
-const ui = uiProvider(storage, state, context);
-const dom = domProvider(ui, debug, definitions);
-const animation = animationProvider(ui, storage);
+const ui = uiProvider(props.providerEl, storage, state, context, element);
+const dom = domProvider(ui, debug, definitions, state, element);
+const theme = themeProvider(element);
+const blocks = blocksProvider(state, dom, context);
+const selection = selectionProvider(blocks);
+const animation = animationProvider(ui, storage, selection, element);
 const keyboard = keyboardProvider(animation);
-const selection = selectionProvider(dom);
 const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
 const plugins = pluginProvider();
+const directive = directiveProvider(ui);
+const fields = fieldsProvider(state, dom, types);
 const mutatedEntity = computed(() => state.mutatedEntity.value || props.entity);
+const isReady = computed(
+  () => !isInitializing.value && dom.isReady.value && directive.isReady.value && toolbarLoaded.value
+);
+const showLoading = computed(() => {
+  return !isReady.value || !featuresLoaded.value;
+});
 const onContextMenu = (e) => {
   e.preventDefault();
   e.stopPropagation();
@@ -177,6 +199,7 @@ onMounted(() => {
   document.documentElement.addEventListener("touchstart", onTouchStart);
   baseLogger.log("EditProvider mounted");
   dom.init();
+  directive.init();
   isInitializing.value = false;
   broadcast.emit("editorLoaded", { uuid: props.entityUuid });
 });
@@ -208,20 +231,67 @@ provide(INJECT_APP, {
   definitions,
   dom,
   dropAreas,
+  element,
   eventBus,
+  directive,
   features,
   indicators,
   keyboard,
   plugins,
   runtimeConfig,
   selection,
+  blocks,
   state,
   storage,
   theme,
   tour,
   types,
-  ui
+  ui,
+  fields
+});
+function textWithHighlight(title, text) {
+  return `<strong>${title}</strong> ${text}`;
+}
+const stateNotAvailableText = computed(() => {
+  return textWithHighlight(
+    $t("stateUnavailableTitle", "The edit state could not be loaded."),
+    $t(
+      "stateUnavailableText",
+      "This could be due to missing permissions or a temporary problem. Please try again later."
+    )
+  );
 });
+const viewOnlyBanner = computed(
+  () => {
+    if (props.permissions.includes("edit")) {
+      return null;
+    }
+    if (props.permissions.includes("review")) {
+      return {
+        text: textWithHighlight(
+          $t("viewBannerReviewTitle", "You are in review mode."),
+          $t(
+            "viewBannerReviewText",
+            "You can view and add comments but cannot edit content."
+          )
+        ),
+        icon: "comment"
+      };
+    } else if (props.permissions.includes("view")) {
+      return {
+        text: textWithHighlight(
+          $t("viewBannerViewTitle", "You are in view-only mode."),
+          $t(
+            "viewBannerViewText",
+            "You can view comments but cannot edit content."
+          )
+        ),
+        icon: "eye"
+      };
+    }
+    return null;
+  }
+);
 const isProxyMode = computed(() => ui.isProxyMode.value);
 provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode);
 if (import.meta.hot) {

package/dist/runtime/components/Edit/EditProvider.vue.d.ts

@@ -1,3 +1,4 @@
+import type { EditPermission } from '#blokkli/types';
 import '#blokkli-build/styles.css';
 declare const _default: <T>(__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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
@@ -7,6 +8,8 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         entityBundle: string;
         language?: string;
         isolate?: boolean;
+        permissions: EditPermission[];
+        providerEl: HTMLElement;
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

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

@@ -86,7 +86,7 @@ const { settings } = defineBlokkliFeature({
   },
   screenshot: "feature-add-list.jpg"
 });
-const { state, $t, eventBus, ui } = useBlokkli();
+const { state, $t, eventBus, ui, element } = useBlokkli();
 const hasContextMenuOpen = computed(
   () => ui.openContextMenu.value.startsWith("add_list_item_")
 );
@@ -104,17 +104,15 @@ const isActive = ref(false);
 let mouseTimeout = null;
 const style = computed(() => {
   if (settings.value.orientation === "vertical" && (isActive.value || hasContextMenuOpen.value) && wrapper.value) {
-    const labels = [
-      ...wrapper.value.querySelectorAll(".bk-list-item-label span")
-    ];
-    const width = labels.reduce((acc, el) => {
-      if (el.offsetWidth > acc) {
-        return el.offsetWidth;
-      }
-      return acc;
-    }, 0);
+    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": width + 90
+      "--bk-add-list-width": largestWidth + 90
     };
   }
   return void 0;