@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.20

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,43 @@
 <template>
   <Teleport to="body">
-    <Transition name="bk-loading">
-      <Loading
-        v-if="isInitializing || !toolbarLoaded || !featuresLoaded"
-        screen
-      />
+    <Transition :name="ui.useAnimations.value ? 'bk-loading' : void 0">
+      <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 />
   <slot
     v-if="!isInitializing"
@@ -46,7 +48,6 @@
 
 <script setup>
 import {
-  watch,
   ref,
   computed,
   provide,
@@ -54,23 +55,27 @@ import {
   onBeforeUnmount,
   useRoute,
   useRuntimeConfig,
-  nextTick
+  nextTick,
+  inject
 } from "#imports";
 import Toolbar from "./Toolbar/index.vue";
 import Actions from "./Actions/index.vue";
 import Loading from "./Loading/index.vue";
 import Messages from "./Messages/index.vue";
 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";
@@ -83,6 +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";
@@ -92,15 +102,20 @@ import {
   INJECT_EDIT_FIELD_LIST_COMPONENT,
   INJECT_EDIT_LOGGER,
   INJECT_GLOBAL_PROXY_MODE,
-  INJECT_IS_EDITING
+  INJECT_IS_EDITING,
+  INJECT_PROVIDER_KEY
 } from "#blokkli/helpers/symbols";
+import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
   entityType: { type: String, required: true },
   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(() => {
@@ -112,6 +127,7 @@ const context = computed(() => {
   };
 });
 const adapter = await getAdapter(context);
+const providerKey = inject(INJECT_PROVIDER_KEY, "");
 const route = useRoute();
 const runtimeConfig = useRuntimeConfig().public.blokkli;
 const toolbarLoaded = ref(false);
@@ -119,22 +135,45 @@ const featuresLoaded = ref(false);
 const isInitializing = ref(true);
 const definitions = definitionProvider();
 const $t = textProvider(context);
-const state = await editStateProvider(adapter, context, $t);
-const storage = storageProvider();
+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);
-const dom = domProvider(ui, debug, definitions);
-const animation = animationProvider(ui);
+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 mutatedEntity = computed(() => state.mutatedEntity.value || props.entity);
+const indicators = indicatorsProvider();
+const plugins = pluginProvider();
+const directive = directiveProvider(debug, ui);
+const fields = fieldsProvider(state, dom, types);
+const mutatedEntity = computed(() => {
+  return {
+    ...props.entity ?? {},
+    ...state.mutatedEntity.value ?? {}
+  };
+});
+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();
@@ -147,24 +186,26 @@ function onTouchStart(e) {
     e.preventDefault();
   }
 }
-const setRootClasses = (unmount) => {
-  document.documentElement.classList.remove("bk-use-animations");
-  if (ui.useAnimations.value && !unmount) {
-    document.documentElement.classList.add("bk-use-animations");
-  }
-};
-watch(ui.useAnimations, setRootClasses);
+const shouldIsolate = computed(() => props.isolate);
+addElementClasses(
+  document.documentElement,
+  "bk-use-animations",
+  ui.useAnimations
+);
+addElementClasses(
+  document.documentElement,
+  "bk-isolate-provider",
+  shouldIsolate
+);
 const baseLogger = debug.createLogger("EditProvider");
-onMounted(() => {
+onMounted(async () => {
   window.addEventListener("contextmenu", onContextMenu);
-  if (props.isolate) {
-    document.documentElement.classList.add("bk-isolate-provider");
-  }
   document.documentElement.addEventListener("touchmove", onTouchMove);
   document.documentElement.addEventListener("touchstart", onTouchStart);
-  setRootClasses();
   baseLogger.log("EditProvider mounted");
   dom.init();
+  directive.init();
+  await nextTick();
   isInitializing.value = false;
   broadcast.emit("editorLoaded", { uuid: props.entityUuid });
 });
@@ -172,10 +213,8 @@ onBeforeUnmount(() => {
   window.removeEventListener("contextmenu", onContextMenu);
   isInitializing.value = true;
   toolbarLoaded.value = false;
-  document.documentElement.classList.remove("bk-isolate-provider");
   document.documentElement.removeEventListener("touchmove", onTouchMove);
   document.documentElement.removeEventListener("touchstart", onTouchStart);
-  setRootClasses(true);
 });
 provide(INJECT_EDIT_LOGGER, baseLogger);
 provide(INJECT_EDIT_FIELD_LIST_COMPONENT, DraggableList);
@@ -184,31 +223,81 @@ provide(INJECT_EDIT_CONTEXT, {
   eventBus,
   mutatedOptions: state.mutatedOptions,
   dom,
-  definitions
+  definitions,
+  useBlockRegistration
 });
 provide(INJECT_APP, {
+  $t,
   adapter,
+  animation,
+  broadcast,
+  commands,
+  context,
+  debug,
+  definitions,
+  dom,
+  dropAreas,
+  element,
   eventBus,
+  directive,
+  features,
+  indicators,
+  keyboard,
+  plugins,
   runtimeConfig,
+  selection,
+  blocks,
   state,
-  dom,
   storage,
-  types,
-  selection,
-  keyboard,
-  ui,
-  animation,
-  context,
-  $t,
-  broadcast,
-  features,
   theme,
-  commands,
   tour,
-  dropAreas,
-  debug,
-  definitions
+  types,
+  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

@@ -50,13 +50,12 @@ import {
   ref,
   computed,
   useBlokkli,
-  onMounted,
-  onBeforeUnmount,
   nextTick,
   defineBlokkliFeature
 } from "#imports";
 import { Sortli } from "#blokkli/components";
 import { PluginSidebar, PluginTourItem } from "#blokkli/plugins";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 const { settings } = defineBlokkliFeature({
   id: "add-list",
   icon: "plus",
@@ -87,21 +86,17 @@ 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_")
 );
 const isSidebar = computed(() => ui.addListOrientation.value === "sidebar");
 const shouldRender = computed(() => state.editMode.value === "editing");
 watch(ui.addListOrientation, () => {
-  setRootClasses();
   nextTick(() => {
     eventBus.emit("add-list:change");
   });
 });
-watch(shouldRender, () => {
-  setRootClasses();
-});
 const CLASS_LEFT = "bk-has-add-list-left";
 const CLASS_BOTTOM = "bk-has-add-list-bottom";
 const wrapper = ref(null);
@@ -109,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;
@@ -146,18 +139,6 @@ const onWheel = (e) => {
     e.stopPropagation();
   }
 };
-function setRootClasses() {
-  document.documentElement.classList.remove(CLASS_BOTTOM);
-  document.documentElement.classList.remove(CLASS_LEFT);
-  if (!shouldRender.value) {
-    return;
-  }
-  if (ui.addListOrientation.value === "horizontal") {
-    document.documentElement.classList.add(CLASS_BOTTOM);
-  } else if (ui.addListOrientation.value === "vertical") {
-    document.documentElement.classList.add(CLASS_LEFT);
-  }
-}
 const sidebarTitle = computed(() => $t("addListSidebarTitle", "Add blocks"));
 const tourText = computed(
   () => $t(
@@ -165,13 +146,20 @@ 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>"
   )
 );
-onMounted(() => {
-  setRootClasses();
-});
-onBeforeUnmount(() => {
-  document.documentElement.classList.remove(CLASS_BOTTOM);
-  document.documentElement.classList.remove(CLASS_LEFT);
-});
+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>