@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.50

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

@@ -1,239 +0,0 @@
-<template>
-  <Teleport to="body">
-    <Transition name="bk-loading">
-      <Loading
-        v-if="isInitializing || !toolbarLoaded || !featuresLoaded"
-        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>
-    </div>
-  </Teleport>
-  <Actions v-if="!isInitializing" />
-  <Toolbar @loaded="toolbarLoaded = true" />
-  <AppMenu v-if="toolbarLoaded" />
-  <Features
-    v-if="!isInitializing && toolbarLoaded"
-    :key="route.fullPath"
-    @loaded="featuresLoaded = true"
-  />
-  <DragInteractions v-if="!isInitializing" />
-  <AnimationCanvas v-if="!isInitializing" />
-  <SystemRequirements />
-  <slot
-    v-if="!isInitializing"
-    :key="definitions.renderKey.value"
-    :mutated-entity="mutatedEntity"
-  />
-</template>
-
-<script setup>
-import {
-  watch,
-  ref,
-  computed,
-  provide,
-  onMounted,
-  onBeforeUnmount,
-  useRoute,
-  useRuntimeConfig,
-  nextTick
-} 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 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 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 domProvider from "./../../helpers/domProvider";
-import textProvider from "./../../helpers/textProvider";
-import storageProvider from "./../../helpers/storageProvider";
-import uiProvider from "./../../helpers/uiProvider";
-import broadcastProvider from "./../../helpers/broadcastProvider";
-import featuresProvider from "./../../helpers/featuresProvider";
-import themeProvider from "./../../helpers/themeProvider";
-import commandsProvider from "./../../helpers/commandsProvider";
-import tourProvider from "./../../helpers/tourProvider";
-import debugProvider from "./../../helpers/debugProvider";
-import definitionProvider from "./../../helpers/definitionProvider";
-import dropAreasProvider from "./../../helpers/dropAreaProvider";
-import { eventBus } from "#blokkli/helpers/eventBus";
-import "#blokkli-build/styles.css";
-import getAdapter from "#blokkli-build/edit-adapter";
-import {
-  INJECT_APP,
-  INJECT_EDIT_CONTEXT,
-  INJECT_EDIT_FIELD_LIST_COMPONENT,
-  INJECT_EDIT_LOGGER,
-  INJECT_GLOBAL_PROXY_MODE,
-  INJECT_IS_EDITING
-} from "#blokkli/helpers/symbols";
-import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
-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 }
-});
-defineSlots();
-const context = computed(() => {
-  return {
-    entityType: props.entityType,
-    entityUuid: props.entityUuid,
-    entityBundle: props.entityBundle,
-    language: props.language
-  };
-});
-const adapter = await getAdapter(context);
-const route = useRoute();
-const runtimeConfig = useRuntimeConfig().public.blokkli;
-const toolbarLoaded = ref(false);
-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 debug = debugProvider(storage);
-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 keyboard = keyboardProvider(animation);
-const selection = selectionProvider(dom);
-const types = await typesProvider(adapter, selection, context);
-const mutatedEntity = computed(() => state.mutatedEntity.value || props.entity);
-const onContextMenu = (e) => {
-  e.preventDefault();
-  e.stopPropagation();
-};
-function onTouchMove(e) {
-  e.preventDefault();
-}
-function onTouchStart(e) {
-  if (e.touches.length === 2) {
-    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 baseLogger = debug.createLogger("EditProvider");
-onMounted(() => {
-  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();
-  isInitializing.value = false;
-  broadcast.emit("editorLoaded", { uuid: props.entityUuid });
-});
-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);
-provide(INJECT_IS_EDITING, true);
-provide(INJECT_EDIT_CONTEXT, {
-  eventBus,
-  mutatedOptions: state.mutatedOptions,
-  dom,
-  definitions,
-  useBlockRegistration
-});
-provide(INJECT_APP, {
-  adapter,
-  eventBus,
-  runtimeConfig,
-  state,
-  dom,
-  storage,
-  types,
-  selection,
-  keyboard,
-  ui,
-  animation,
-  context,
-  $t,
-  broadcast,
-  features,
-  theme,
-  commands,
-  tour,
-  dropAreas,
-  debug,
-  definitions
-});
-const isProxyMode = computed(() => ui.isProxyMode.value);
-provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode);
-if (import.meta.hot) {
-  let onAfterUpdate = function() {
-    try {
-      eventBus.emit("state:reloaded");
-      dom.updateVisibleRects();
-      nextTick(() => {
-        const uuid = selection.uuids.value[0];
-        if (uuid) {
-          eventBus.emit("scrollIntoView", {
-            uuid,
-            center: true
-          });
-        }
-      });
-    } catch {
-    }
-  };
-  import.meta.hot.accept("#blokkli/runtime-helpers", () => {
-  });
-  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
-  });
-  import.meta.hot.on("vite:afterUpdate", onAfterUpdate);
-}
-</script>

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

@@ -1,26 +0,0 @@
-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> & {
-        entity?: T;
-        entityType: string;
-        entityUuid: string;
-        entityBundle: string;
-        language?: string;
-        isolate?: boolean;
-    } & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {
-        default(props: {
-            mutatedEntity: T;
-            key: string;
-        }): any;
-    };
-    emit: {};
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/runtime/components/Edit/Features/AddList/docs.md

@@ -1,4 +0,0 @@
-## Extending the list
-
-Use the [Add Action](/plugins/add-action) plugin to add custom actions to the
-list.

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

@@ -1,181 +0,0 @@
-<template>
-  <PluginSidebar
-    v-if="isSidebar && shouldRender"
-    id="add_list"
-    :title="sidebarTitle"
-    :tour-text="tourText"
-    render-always
-    icon="plus"
-    weight="-10"
-    @updated="eventBus.emit('add-list:change')"
-  >
-    <div>
-      <div id="blokkli-add-list-sidebar-before" />
-      <Sortli class="bk bk-list-sidebar">
-        <div id="blokkli-add-list-blocks" />
-        <div id="blokkli-add-list-actions" />
-      </Sortli>
-    </div>
-  </PluginSidebar>
-  <Teleport v-else-if="shouldRender" to="body">
-    <div
-      ref="wrapper"
-      class="bk bk-add-list bk-control"
-      :class="[
-  { 'bk-is-active': isActive || hasContextMenuOpen },
-  'bk-is-' + ui.addListOrientation.value
-]"
-      :style="style"
-      @wheel.capture.passive="onWheel"
-      @mouseenter="onMouseEnter"
-      @mouseleave="onMouseLeave"
-    >
-      <Sortli class="bk-list">
-        <div id="blokkli-add-list-blocks" />
-        <div id="blokkli-add-list-actions" />
-      </Sortli>
-    </div>
-    <PluginTourItem
-      id="add-blocks"
-      selector=".bk-list"
-      :title="sidebarTitle"
-      :text="tourText"
-    />
-  </Teleport>
-</template>
-
-<script setup>
-import {
-  watch,
-  ref,
-  computed,
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-  defineBlokkliFeature
-} from "#imports";
-import { Sortli } from "#blokkli/components";
-import { PluginSidebar, PluginTourItem } from "#blokkli/plugins";
-const { settings } = defineBlokkliFeature({
-  id: "add-list",
-  icon: "plus",
-  label: "Add List",
-  description: "Provides the container to render a list of blocks to add or add actions.",
-  settings: {
-    orientation: {
-      type: "radios",
-      label: "Add List",
-      default: "vertical",
-      group: "appearance",
-      viewports: ["desktop"],
-      options: {
-        vertical: {
-          label: "Vertical",
-          icon: "ui-list-vertical"
-        },
-        horizontal: {
-          label: "Horizontal",
-          icon: "ui-list-horizontal"
-        },
-        sidebar: {
-          label: "Sidebar",
-          icon: "ui-list-sidebar"
-        }
-      }
-    }
-  },
-  screenshot: "feature-add-list.jpg"
-});
-const { state, $t, eventBus, ui } = 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);
-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);
-    return {
-      "--bk-add-list-width": width + 90
-    };
-  }
-  return void 0;
-});
-function onMouseEnter() {
-  clearTimeout(mouseTimeout);
-  mouseTimeout = setTimeout(() => {
-    isActive.value = true;
-  }, 200);
-}
-function onMouseLeave() {
-  clearTimeout(mouseTimeout);
-  isActive.value = false;
-}
-const onWheel = (e) => {
-  if (e.ctrlKey || e.metaKey) {
-    return;
-  }
-  if (ui.addListOrientation.value === "horizontal" && e.deltaX) {
-    e.stopPropagation();
-    return;
-  }
-  if (ui.addListOrientation.value === "vertical" && e.deltaY) {
-    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(
-    "addListTourText",
-    "<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);
-});
-</script>
-
-<script>
-export default {
-  name: "AddList"
-};
-</script>

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

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Artboard/Overview/index.vue

@@ -1,93 +0,0 @@
-<template>
-  <div
-    ref="overviewEl"
-    class="bk bk-artboard-overview"
-    @touchstart.stop
-    @pointerdown.stop
-    @mousedown.stop
-    @mousemove.stop
-  >
-    <div ref="overviewArtboardEl" class="bk-artboard-overview-artboard">
-      <canvas ref="canvas" />
-    </div>
-    <div class="bk-artboard-overview-visible">
-      <button ref="overviewVisibleEl" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { overview } from "artboard-deluxe";
-import { onBeforeUnmount, onMounted, ref, useBlokkli, computed } from "#imports";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const props = defineProps({
-  artboard: { type: Object, required: true }
-});
-const { theme, dom, ui, selection } = useBlokkli();
-const overviewFillColor = computed(() => {
-  return theme.getColorString("mono", "500", 0.2);
-});
-const selectedColor = computed(() => {
-  return theme.getColorString("accent", "700", 1);
-});
-const overviewEl = ref();
-const overviewArtboardEl = ref();
-const overviewVisibleEl = ref();
-const canvas = ref();
-let pluginOverview = null;
-function updateCanvas() {
-  const ctx = canvas.value?.getContext("2d");
-  if (!ctx || !canvas.value || !overviewArtboardEl.value) {
-    return;
-  }
-  const rect = overviewArtboardEl.value.getBoundingClientRect();
-  canvas.value.width = rect.width;
-  canvas.value.height = rect.height;
-  ctx.clearRect(0, 0, rect.width, rect.height);
-  const rects = Object.entries(dom.getBlockRects());
-  const scale = rect.width / ui.artboardSize.value.width;
-  const LINE_WIDTH = 2.5;
-  ctx.fillStyle = overviewFillColor.value;
-  ctx.lineWidth = LINE_WIDTH;
-  ctx.strokeStyle = selectedColor.value;
-  for (let i = 0; i < rects.length; i++) {
-    const [uuid, blockRect] = rects[i];
-    ctx.fillRect(
-      Math.round(blockRect.x * scale),
-      Math.round(blockRect.y * scale),
-      Math.round(blockRect.width * scale),
-      Math.round(blockRect.height * scale)
-    );
-    if (selection.isBlockSelected(uuid)) {
-      ctx.strokeRect(
-        Math.round(blockRect.x * scale) + LINE_WIDTH / 2,
-        Math.round(blockRect.y * scale) + LINE_WIDTH / 2,
-        Math.round(blockRect.width * scale) - LINE_WIDTH,
-        Math.round(blockRect.height * scale) - LINE_WIDTH
-      );
-    }
-  }
-}
-onBlokkliEvent("animationFrame", updateCanvas);
-onMounted(() => {
-  if (overviewEl.value && overviewArtboardEl.value && overviewVisibleEl.value) {
-    pluginOverview = props.artboard.addPlugin(
-      overview({
-        element: overviewEl.value,
-        artboardElement: overviewArtboardEl.value,
-        visibleAreaElement: overviewVisibleEl.value,
-        padding: 20,
-        autoHeight: true
-      })
-    );
-  }
-});
-onBeforeUnmount(() => {
-  if (pluginOverview) {
-    props.artboard.removePlugin(pluginOverview);
-  }
-});
-defineOptions({
-  name: "ArtboardOverview"
-});
-</script>

package/dist/runtime/components/Edit/Features/Artboard/Overview/index.vue.d.ts

@@ -1,6 +0,0 @@
-import { type Artboard } from 'artboard-deluxe';
-type __VLS_Props = {
-    artboard: Artboard;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Artboard/Scrollbar/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div
-      class="bk bk-artboard-scrollbar"
-      :class="'bk-orientation-' + orientation"
-    >
-      <div ref="el">
-        <button ref="thumb" />
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import { scrollbar } from "artboard-deluxe";
-import { onBeforeUnmount, onMounted, ref } from "#imports";
-const props = defineProps({
-  artboard: { type: Object, required: true },
-  orientation: { type: String, required: true }
-});
-const el = ref();
-const thumb = ref();
-let scrollbarPlugin = null;
-onMounted(() => {
-  if (el.value && thumb.value) {
-    const plugin = scrollbar({
-      element: el.value,
-      thumbElement: thumb.value,
-      orientation: props.orientation
-    });
-    scrollbarPlugin = props.artboard.addPlugin(plugin);
-  }
-});
-onBeforeUnmount(() => {
-  if (scrollbarPlugin) {
-    props.artboard.removePlugin(scrollbarPlugin);
-  }
-});
-defineOptions({
-  name: "ArtboardScrollbar"
-});
-</script>

package/dist/runtime/components/Edit/Features/Artboard/Scrollbar/index.vue.d.ts

@@ -1,7 +0,0 @@
-import { type Artboard } from 'artboard-deluxe';
-type __VLS_Props = {
-    artboard: Artboard;
-    orientation: 'x' | 'y';
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;