@revenexx/editor 0.1.0

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

@@ -0,0 +1,511 @@
+<template>
+  <Teleport to="#nuxt-root">
+    <div id="bk-canvas-overlay" class="bk bk-canvas-overlay" />
+  </Teleport>
+
+  <Teleport to="body">
+    <Transition :name="ui.useAnimations.value ? 'bk-loading' : void 0">
+      <Loading v-if="showLoading" screen />
+    </Transition>
+
+    <div
+      ref="mainLayoutElement"
+      class="bk-vars bk-main-layout"
+      :lang="ui.interfaceLanguage.value"
+    >
+      <Toolbar @loaded="toolbarLoaded = true" />
+      <div ref="viewportElement" class="bk bk-viewport" />
+      <Messages />
+      <Actions v-if="!isInitializing" />
+      <div
+        id="bk-banner-container"
+        class="bk _bk_relative _bk_z-translations-banner-mobile _bk_lg:z-translations-banner-desktop _bk_grid _bk_pointer-events-auto"
+        :style="{
+  gridArea: 'banner'
+}"
+      >
+        <div id="bk-banner-list" class="_bk_grid _bk_gap-10">
+          <Banner
+            v-if="!state.stateAvailable.value"
+            id="state-unavailable"
+            scheme="red"
+          >
+            <BannerInner
+              icon="bk_mdi_sentiment_dissatisfied"
+              :text="stateNotAvailableText"
+            />
+          </Banner>
+          <Banner v-else-if="viewOnlyBanner" id="view-only" scheme="yellow">
+            <BannerInner
+              :icon="viewOnlyBanner.icon"
+              :text="viewOnlyBanner.text"
+            />
+          </Banner>
+        </div>
+      </div>
+
+      <Konami />
+      <SystemRequirements />
+      <Overlay />
+    </div>
+  </Teleport>
+
+  <Indicators />
+  <FeaturesRenderer
+    v-if="isReady"
+    :key="route.fullPath"
+    @loaded="featuresLoaded = true"
+  />
+  <AnimationCanvas v-if="!isInitializing" />
+  <slot
+    v-if="!isInitializing"
+    :key="definitions.renderKey.value"
+    :mutated-entity
+  />
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  provide,
+  onMounted,
+  onBeforeUnmount,
+  useRoute,
+  nextTick,
+  inject,
+  onUnmounted,
+  watch,
+  useTemplateRef
+} 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 FeaturesRenderer from "./FeaturesRenderer/index.vue";
+import Indicators from "./Indicators/index.vue";
+import DraggableList from "./DraggableList.vue";
+import BlokkliEditableEdit from "./BlokkliEditableEdit.vue";
+import AnimationCanvas from "./AnimationCanvas/index.vue";
+import SystemRequirements from "./SystemRequirements/index.vue";
+import Overlay from "./Overlay/index.vue";
+import Konami from "./Konami/index.vue";
+import Banner from "./Banner/index.vue";
+import BannerInner from "./Banner/Inner.vue";
+import animationProvider from "#blokkli/editor/providers/animation";
+import keyboardProvider from "#blokkli/editor/providers/keyboard";
+import selectionProvider from "#blokkli/editor/providers/selection";
+import editStateProvider from "#blokkli/editor/providers/state";
+import typesProvider from "#blokkli/editor/providers/types";
+import elementProvider from "#blokkli/editor/providers/element";
+import domProvider from "#blokkli/editor/providers/dom";
+import textProvider from "#blokkli/editor/providers/texts";
+import storageProvider from "#blokkli/editor/providers/storage";
+import uiProvider from "#blokkli/editor/providers/ui";
+import broadcastProvider from "#blokkli/editor/providers/broadcast";
+import featuresProvider from "#blokkli/editor/providers/features";
+import themeProvider from "#blokkli/editor/providers/theme";
+import commandsProvider from "#blokkli/editor/providers/commands";
+import tourProvider from "#blokkli/editor/providers/tour";
+import debugProvider from "#blokkli/editor/providers/debug";
+import definitionProvider from "#blokkli/editor/providers/definition";
+import blocksProvider from "#blokkli/editor/providers/blocks";
+import indicatorsProvider from "#blokkli/editor/providers/indicators";
+import pluginProvider from "#blokkli/editor/providers/plugin";
+import directiveProvider from "#blokkli/editor/providers/directive";
+import fieldsProvider from "#blokkli/editor/providers/fields";
+import iconsProvider from "#blokkli/editor/providers/icons";
+import permissionsProvider from "#blokkli/editor/providers/permissions";
+import userProvider from "#blokkli/editor/providers/user";
+import adaptersProvider from "#blokkli/editor/providers/adapters";
+import analyzeProviderFn from "#blokkli/editor/providers/analyze";
+import readabilityProviderFn from "#blokkli/editor/providers/readability";
+import fieldValueProviderFn from "#blokkli/editor/providers/fieldValue";
+import dragdropProvider from "#blokkli/editor/providers/dragdrop";
+import cacheProvider from "#blokkli/editor/providers/cache";
+import workspacesProvider from "#blokkli/editor/providers/workspaces";
+import configProvider from "#blokkli/editor/providers/config";
+import { eventBus } from "#blokkli/editor/events";
+import "#blokkli-build/styles.css";
+import getAdapter from "#blokkli-build/edit-adapter";
+import getExtensions from "#blokkli-build/adapter-extensions";
+import {
+  INJECT_ALL_COMPONENTS_CHUNK,
+  INJECT_APP,
+  INJECT_EDIT_CONTEXT,
+  INJECT_EDIT_FIELD_LIST_COMPONENT,
+  INJECT_EDIT_EDITABLE_COMPONENT,
+  INJECT_EDIT_LOGGER,
+  INJECT_ENTITY_CONTEXT,
+  INJECT_GLOBAL_PROXY_MODE,
+  INJECT_IS_EDITING,
+  INJECT_ITEM_PROPS_OVERRIDE,
+  INJECT_PROVIDER_KEY
+} from "#blokkli/helpers/injections";
+import { allComponents } from "#blokkli-build/chunk-editing";
+import { falsy } from "#blokkli/helpers";
+import {
+  addElementClasses,
+  useBlockRegistration,
+  useGlobalBlokkliObject
+} from "#blokkli/editor/composables";
+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 },
+  permissions: { type: Array, required: true },
+  providerEl: { type: null, required: true },
+  providerType: { type: null, required: true }
+});
+defineSlots();
+const emit = defineEmits(["ready"]);
+const mainLayoutElement = useTemplateRef("mainLayoutElement");
+const viewportElement = useTemplateRef("viewportElement");
+const entityContext = computed(() => {
+  return {
+    uuid: props.entityUuid,
+    type: props.entityType,
+    bundle: props.entityBundle
+  };
+});
+const context = computed(() => {
+  return {
+    entityType: props.entityType,
+    entityUuid: props.entityUuid,
+    entityBundle: props.entityBundle,
+    language: props.language
+  };
+});
+const adapter = await getAdapter(context);
+const adapters = await adaptersProvider(adapter, getExtensions, context);
+const providerKey = inject(INJECT_PROVIDER_KEY, "");
+const route = useRoute();
+const toolbarLoaded = ref(false);
+const featuresLoaded = ref(false);
+const isInitializing = ref(true);
+const definitions = definitionProvider(props.providerType);
+const $t = await textProvider(context.value.language);
+const state = await editStateProvider(
+  eventBus,
+  adapter,
+  context,
+  $t,
+  providerKey,
+  props.permissions.filter(falsy)
+);
+const config = configProvider();
+const storage = await storageProvider(adapter, context);
+const plugins = pluginProvider();
+const debug = debugProvider(eventBus, storage);
+const baseLogger = debug.createLogger("EditProvider");
+baseLogger.log("Entity: ", context.value);
+const element = elementProvider(debug);
+const features = featuresProvider(storage);
+const commands = commandsProvider();
+const tour = tourProvider();
+const broadcast = broadcastProvider();
+const icons = iconsProvider();
+const ui = uiProvider(
+  eventBus,
+  props.providerEl,
+  storage,
+  context,
+  element,
+  mainLayoutElement,
+  viewportElement,
+  $t
+);
+const dom = domProvider(ui, debug, state, element);
+const theme = themeProvider(element);
+const blocks = blocksProvider(state, dom, context);
+const permissionsInstance = await permissionsProvider(adapter, blocks);
+const user = await userProvider(adapter);
+const selection = selectionProvider(blocks, permissionsInstance);
+const keyboard = keyboardProvider(eventBus);
+const animation = animationProvider(
+  eventBus,
+  ui,
+  storage,
+  selection,
+  debug,
+  keyboard
+);
+const types = await typesProvider(adapter, selection, context);
+const indicators = indicatorsProvider();
+const directive = directiveProvider(debug, ui);
+const fields = fieldsProvider(dom, types, state);
+const fieldValue = fieldValueProviderFn(
+  directive,
+  state,
+  types,
+  definitions,
+  blocks
+);
+const readability = await readabilityProviderFn(
+  adapters,
+  context,
+  directive,
+  fieldValue
+);
+const analyze = analyzeProviderFn(adapters, state, ui, context, $t, readability);
+const dragdrop = dragdropProvider();
+const cache = cacheProvider();
+const workspaces = workspacesProvider(adapter, context, state);
+const mutatedEntityProps = computed(() => state.mutatedItemProps.HOST);
+const mutatedEntity = computed(() => {
+  return {
+    ...props.entity,
+    ...state.mutatedEntity.value,
+    ...mutatedEntityProps.value
+  };
+});
+const isReady = computed(
+  () => !isInitializing.value && dom.isReady.value && directive.isReady.value && toolbarLoaded.value && mainLayoutElement.value
+);
+watch(isReady, (v) => {
+  if (v) {
+    baseLogger.log("is ready");
+  }
+});
+const showLoading = computed(() => {
+  return !isReady.value || !featuresLoaded.value;
+});
+const onContextMenu = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+function onTouchMove(e) {
+  e.preventDefault();
+}
+function onTouchStart(e) {
+  if (e.touches.length === 2) {
+    e.preventDefault();
+  }
+}
+const shouldIsolate = computed(() => props.isolate);
+addElementClasses(
+  document.documentElement,
+  "bk-use-animations",
+  ui.useAnimations
+);
+addElementClasses(
+  document.documentElement,
+  "bk-isolate-provider",
+  shouldIsolate
+);
+function setElementSymbolProperty(el, symbol, value) {
+  el[symbol] = value;
+}
+provide(INJECT_EDIT_LOGGER, baseLogger);
+provide(INJECT_ALL_COMPONENTS_CHUNK, allComponents);
+provide(INJECT_EDIT_FIELD_LIST_COMPONENT, DraggableList);
+provide(INJECT_EDIT_EDITABLE_COMPONENT, BlokkliEditableEdit);
+provide(INJECT_IS_EDITING, true);
+provide(INJECT_EDIT_CONTEXT, {
+  eventBus,
+  mutatedOptions: state.mutatedOptions,
+  dom,
+  definitions,
+  useBlockRegistration,
+  selectedUuids: computed(() => selection.uuids.value)
+});
+const app = {
+  $t,
+  adapter,
+  adapters,
+  animation,
+  broadcast,
+  commands,
+  context,
+  debug,
+  definitions,
+  dom,
+  element,
+  eventBus,
+  directive,
+  features,
+  indicators,
+  keyboard,
+  plugins,
+  selection,
+  blocks,
+  state,
+  storage,
+  theme,
+  tour,
+  types,
+  ui,
+  fields,
+  icons,
+  permissions: permissionsInstance,
+  user,
+  analyze,
+  readability,
+  fieldValue,
+  dragdrop,
+  cache,
+  workspaces,
+  config
+};
+provide(INJECT_APP, app);
+useGlobalBlokkliObject().setApp(app);
+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: "bk_mdi_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: "bk_mdi_visibility"
+      };
+    }
+    return null;
+  }
+);
+const isProxyMode = computed(() => ui.isProxyMode.value);
+provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode);
+provide(INJECT_ITEM_PROPS_OVERRIDE, state.mutatedItemProps);
+if (import.meta.hot) {
+  import.meta.hot.accept("#blokkli/runtime-helpers", () => {
+  });
+  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
+  });
+  import.meta.hot.on("vite:afterUpdate", (payload) => {
+    const hasUpdatedRenderer = payload.updates.find(
+      (v) => v.path.includes("/Renderer/")
+    );
+    if (hasUpdatedRenderer) {
+      animation.reset();
+    }
+    try {
+      eventBus.emit("state:reloaded");
+      dom.updateVisibleRects();
+      nextTick(() => {
+        const uuid = selection.uuids.value[0];
+        if (uuid) {
+          eventBus.emit("scrollIntoView", {
+            uuid,
+            center: true
+          });
+        }
+      });
+    } catch {
+    }
+  });
+}
+onMounted(async () => {
+  baseLogger.log("onMounted - START");
+  setElementSymbolProperty(props.providerEl, INJECT_APP, app);
+  setElementSymbolProperty(
+    props.providerEl,
+    INJECT_ENTITY_CONTEXT,
+    entityContext.value
+  );
+  window.addEventListener("contextmenu", onContextMenu);
+  document.documentElement.addEventListener("touchmove", onTouchMove);
+  document.documentElement.addEventListener("touchstart", onTouchStart);
+  dom.init();
+  directive.init();
+  await nextTick();
+  isInitializing.value = false;
+  broadcast.emit("editorLoaded", { uuid: props.entityUuid });
+  emit("ready");
+  baseLogger.log("onMounted - END");
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("contextmenu", onContextMenu);
+  isInitializing.value = true;
+  toolbarLoaded.value = false;
+  document.documentElement.removeEventListener("touchmove", onTouchMove);
+  document.documentElement.removeEventListener("touchstart", onTouchStart);
+});
+onUnmounted(() => {
+  setElementSymbolProperty(props.providerEl, INJECT_APP);
+  setElementSymbolProperty(props.providerEl, INJECT_ENTITY_CONTEXT);
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-viewport {
+  position: relative;
+  grid-area: viewport;
+}
+.bk-vars.bk-main-layout {
+  pointer-events: none;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 0) /* "main-layout" */;
+  display: grid;
+  height: 100vh;
+  width: 100vw;
+  --bk-toolbar-height: 40px;
+  grid-template-areas: 'toolbar toolbar      toolbar       toolbar     '
+    'left    right        right         right       '
+    'left    mode         mode          mode        '
+    'left    sidebar-left viewport      scrollbar-y '
+    'left    sidebar-left banner        scrollbar-y '
+    'left    breadcrumbs  breadcrumbs   breadcrumbs ';
+  grid-template-columns: auto auto 1fr 16px;
+  grid-template-rows: var(--bk-toolbar-height) auto auto 1fr auto auto;
+}
+@media (width >= 48rem) {
+  .bk-vars.bk-main-layout {
+    --bk-toolbar-height: 50px;
+    grid-template-areas: 'toolbar toolbar      toolbar       toolbar     toolbar       right'
+      'left    mode         mode          scrollbar-y sidebar-right right'
+      'left    sidebar-left viewport      scrollbar-y sidebar-right right'
+      'left    sidebar-left banner        scrollbar-y sidebar-right right'
+      'left    breadcrumbs  breadcrumbs   breadcrumbs sidebar-right right';
+    grid-template-columns: auto auto 1fr 16px auto minmax(0, 50px);
+    grid-template-rows: var(--bk-toolbar-height) auto 1fr auto auto;
+  }
+}
+.bk.bk-canvas-overlay {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 10000) /* "canvas-overlay" */;
+  width: 100%;
+  height: 100%;
+}
+html.bk-isolate-provider [data-provider-uuid]:not([data-blokkli-provider-active='true']) {
+  display: none !important;
+}
+html.bk-html-root:not(.bk-use-animations) *,html.bk-html-root:not(.bk-use-animations) *:before,html.bk-html-root:not(.bk-use-animations) *:after {
+  transition: none !important;
+}
+</style>

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

@@ -0,0 +1,38 @@
+import '#blokkli-build/styles.css';
+import type { EditPermission } from '#blokkli/types/provider';
+import type { ValidProviderTypes } from '#blokkli-build/generated-types';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        entity?: T;
+        entityType: string;
+        entityUuid: string;
+        entityBundle: string;
+        language?: string;
+        isolate?: boolean;
+        permissions: Array<EditPermission | null>;
+        providerEl: HTMLElement;
+        providerType: ValidProviderTypes;
+    } & {
+        onReady?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default(props: {
+            mutatedEntity: T;
+            key: string;
+        }): any;
+    };
+    emit: (e: "ready") => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/editor/components/FeaturesRenderer/index.d.vue.ts

@@ -0,0 +1,7 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loaded: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onLoaded?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/FeaturesRenderer/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <Component
+    :is="featureComponents[feature]"
+    v-for="feature in availableFeatures"
+    :key="feature"
+  />
+</template>
+
+<script setup>
+import {
+  featureComponents
+} from "#blokkli-build/features";
+import { useBlokkli, computed, watch } from "#imports";
+const emit = defineEmits(["loaded"]);
+const { adapter, adapters, features, ui, debug, permissions } = useBlokkli();
+const logger = debug.createLogger("Features");
+const renderedFeatures = computed(
+  () => features.mountedFeatures.value.map((v) => v.id)
+);
+const disabledFeatures = adapter.getDisabledFeatures ? await adapter.getDisabledFeatures() : await Promise.resolve([]);
+const availableFeatures = computed(() => {
+  return features.definitions.value.filter((feature) => {
+    if (disabledFeatures.includes(feature.id)) {
+      return false;
+    }
+    if (feature.requiredAdapterMethods?.length) {
+      const hasAllMethods = feature.requiredAdapterMethods.every((method) => {
+        if (adapter[method]) {
+          return true;
+        }
+        return adapters.extensions.some((ext) => ext.methods[method]);
+      });
+      if (!hasAllMethods) {
+        return false;
+      }
+    }
+    if (feature.requiredPermissions?.length) {
+      const hasAllPermissions = feature.requiredPermissions.every(
+        (permission) => permissions.hasPermission(permission)
+      );
+      if (!hasAllPermissions) {
+        return false;
+      }
+    }
+    if (feature.beta && !features.enabledBetaFeatures.value.includes(
+      feature.id
+    )) {
+      return false;
+    }
+    return !feature.viewports?.length || feature.viewports.includes(ui.appViewport.value);
+  }).map((v) => {
+    return v.id;
+  });
+});
+const hasLoadedFeatures = computed(
+  () => renderedFeatures.value.length === availableFeatures.value.length
+);
+const unwatchInit = watch(
+  hasLoadedFeatures,
+  (hasLoaded) => {
+    if (hasLoaded) {
+      emit("loaded");
+      logger.log("Features loaded", renderedFeatures.value);
+      unwatchInit();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+
+<script>
+export default {
+  name: "Features"
+};
+</script>

package/dist/runtime/editor/components/FeaturesRenderer/index.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loaded: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onLoaded?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/FileDropHandler/index.d.vue.ts

@@ -0,0 +1,23 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    icon: BlokkliIcon;
+    label: string;
+    accept?: (item: DataTransferItem) => boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drop: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDrop?: ((files: File[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};