@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -12,15 +12,15 @@
       <div v-if="!state.stateAvailable.value" class="bk-state-unavailable">
         <h2>
           {{
-            $t('stateUnavailableTitle', 'The edit state could not be loaded.')
+            $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.',
-            )
+  "stateUnavailableText",
+  "This could be due to missing permissions or a temporary problem. Please try again later."
+)
           }}
         </p>
       </div>
@@ -37,10 +37,14 @@
   <DragInteractions v-if="!isInitializing" />
   <AnimationCanvas v-if="!isInitializing" />
   <SystemRequirements />
-  <slot v-if="!isInitializing" :mutated-entity="mutatedEntity" />
+  <slot
+    v-if="!isInitializing"
+    :key="definitions.renderKey.value"
+    :mutated-entity="mutatedEntity"
+  />
 </template>
 
-<script lang="ts" setup generic="T">
+<script setup>
 import {
   watch,
   ref,
@@ -50,162 +54,139 @@ import {
   onBeforeUnmount,
   useRoute,
   useRuntimeConfig,
-} from '#imports'
-import type { BlokkliApp } from '#blokkli/types'
-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 dropAreasProvider from './../../helpers/dropAreaProvider'
-import { eventBus } from '#blokkli/helpers/eventBus'
-import '#blokkli-build/theme'
-import '#blokkli-build/styles'
-import getAdapter from '#blokkli-build/compiled-edit-adapter'
+  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 type { AdapterContext } from '#blokkli/adapter'
-
-const props = withDefaults(
-  defineProps<{
-    entity?: T
-    entityType: string
-    entityUuid: string
-    entityBundle: string
-    language?: string
-    isolate?: boolean
-  }>(),
-  {
-    language: 'en',
-    entity: undefined,
-  },
-)
-
-const context = computed<AdapterContext>(() => {
+  INJECT_IS_EDITING
+} from "#blokkli/helpers/symbols";
+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 $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)
-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: Event) => {
-  e.preventDefault()
-  e.stopPropagation()
-}
-
-function onTouchMove(e: TouchEvent) {
-  e.preventDefault()
+    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: TouchEvent) {
+function onTouchStart(e) {
   if (e.touches.length === 2) {
-    e.preventDefault()
+    e.preventDefault();
   }
 }
-
-const setRootClasses = (unmount?: boolean) => {
-  document.documentElement.classList.remove('bk-use-animations')
-
+const setRootClasses = (unmount) => {
+  document.documentElement.classList.remove("bk-use-animations");
   if (ui.useAnimations.value && !unmount) {
-    document.documentElement.classList.add('bk-use-animations')
+    document.documentElement.classList.add("bk-use-animations");
   }
-}
-
-watch(ui.useAnimations, setRootClasses)
-
-const baseLogger = debug.createLogger('EditProvider')
-
+};
+watch(ui.useAnimations, setRootClasses);
+const baseLogger = debug.createLogger("EditProvider");
 onMounted(() => {
-  window.addEventListener('contextmenu', onContextMenu)
+  window.addEventListener("contextmenu", onContextMenu);
   if (props.isolate) {
-    document.documentElement.classList.add('bk-isolate-provider')
+    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 })
-})
-
+  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 the edit <BlokkliField> component to it doesn't have to be loaded
-// async every time.
-provide(INJECT_EDIT_FIELD_LIST_COMPONENT, DraggableList)
-provide(INJECT_IS_EDITING, true)
+  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,
-})
-provide<BlokkliApp>(INJECT_APP, {
+  definitions
+});
+provide(INJECT_APP, {
   adapter,
   eventBus,
   runtimeConfig,
@@ -226,8 +207,31 @@ provide<BlokkliApp>(INJECT_APP, {
   tour,
   dropAreas,
   debug,
-})
-
-const isProxyMode = computed(() => ui.isProxyMode.value)
-provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode)
+  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

@@ -0,0 +1,26 @@
+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/index.vue

@@ -22,9 +22,9 @@
       ref="wrapper"
       class="bk bk-add-list bk-control"
       :class="[
-        { 'bk-is-active': isActive || hasContextMenuOpen },
-        'bk-is-' + ui.addListOrientation.value,
-      ]"
+  { 'bk-is-active': isActive || hasContextMenuOpen },
+  'bk-is-' + ui.addListOrientation.value
+]"
       :style="style"
       @wheel.capture.passive="onWheel"
       @mouseenter="onMouseEnter"
@@ -44,7 +44,7 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   watch,
   ref,
@@ -53,156 +53,129 @@ import {
   onMounted,
   onBeforeUnmount,
   nextTick,
-  defineBlokkliFeature,
-} from '#imports'
-import { Sortli } from '#blokkli/components'
-import { PluginSidebar, PluginTourItem } from '#blokkli/plugins'
-
+  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.',
+  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'],
+      type: "radios",
+      label: "Add List",
+      default: "vertical",
+      group: "appearance",
+      viewports: ["desktop"],
       options: {
         vertical: {
-          label: 'Vertical',
-          icon: 'ui-list-vertical',
+          label: "Vertical",
+          icon: "ui-list-vertical"
         },
         horizontal: {
-          label: 'Horizontal',
-          icon: 'ui-list-horizontal',
+          label: "Horizontal",
+          icon: "ui-list-horizontal"
         },
         sidebar: {
-          label: 'Sidebar',
-          icon: 'ui-list-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')
-
+  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()
+  setRootClasses();
   nextTick(() => {
-    eventBus.emit('add-list:change')
-  })
-})
+    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<HTMLDivElement | null>(null)
-const isActive = ref(false)
-let mouseTimeout: any = null
-
+  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
-  ) {
+  if (settings.value.orientation === "vertical" && (isActive.value || hasContextMenuOpen.value) && wrapper.value) {
     const labels = [
-      ...wrapper.value.querySelectorAll('.bk-list-item-label span'),
-    ] as HTMLSpanElement[]
-
-    // Determine which label has the largest width.
+      ...wrapper.value.querySelectorAll(".bk-list-item-label span")
+    ];
     const width = labels.reduce((acc, el) => {
       if (el.offsetWidth > acc) {
-        return el.offsetWidth
+        return el.offsetWidth;
       }
-      return acc
-    }, 0)
+      return acc;
+    }, 0);
     return {
-      '--bk-add-list-width': width + 90,
-    }
+      "--bk-add-list-width": width + 90
+    };
   }
-
-  return undefined
-})
-
+  return void 0;
+});
 function onMouseEnter() {
-  clearTimeout(mouseTimeout)
+  clearTimeout(mouseTimeout);
   mouseTimeout = setTimeout(() => {
-    isActive.value = true
-  }, 200)
+    isActive.value = true;
+  }, 200);
 }
 function onMouseLeave() {
-  clearTimeout(mouseTimeout)
-  isActive.value = false
+  clearTimeout(mouseTimeout);
+  isActive.value = false;
 }
-
-const onWheel = (e: WheelEvent) => {
+const onWheel = (e) => {
   if (e.ctrlKey || e.metaKey) {
-    return
+    return;
   }
-  if (ui.addListOrientation.value === 'horizontal' && e.deltaX) {
-    e.stopPropagation()
-    return
+  if (ui.addListOrientation.value === "horizontal" && e.deltaX) {
+    e.stopPropagation();
+    return;
   }
-
-  if (ui.addListOrientation.value === 'vertical' && e.deltaY) {
-    e.stopPropagation()
+  if (ui.addListOrientation.value === "vertical" && e.deltaY) {
+    e.stopPropagation();
   }
-}
-
+};
 function setRootClasses() {
-  document.documentElement.classList.remove(CLASS_BOTTOM)
-  document.documentElement.classList.remove(CLASS_LEFT)
-
+  document.documentElement.classList.remove(CLASS_BOTTOM);
+  document.documentElement.classList.remove(CLASS_LEFT);
   if (!shouldRender.value) {
-    return
+    return;
   }
-
-  if (ui.addListOrientation.value === 'horizontal') {
-    document.documentElement.classList.add(CLASS_BOTTOM)
-  } else if (ui.addListOrientation.value === 'vertical') {
-    document.documentElement.classList.add(CLASS_LEFT)
+  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>',
-  ),
-)
-
+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()
-})
-
+  setRootClasses();
+});
 onBeforeUnmount(() => {
-  document.documentElement.classList.remove(CLASS_BOTTOM)
-  document.documentElement.classList.remove(CLASS_LEFT)
-})
+  document.documentElement.classList.remove(CLASS_BOTTOM);
+  document.documentElement.classList.remove(CLASS_LEFT);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'AddList',
-}
+  name: "AddList"
+};
 </script>

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

@@ -0,0 +1,2 @@
+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;