@blokkli/editor 1.0.0

package/dist/runtime/components/Edit/Toolbar/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-show="activeSidebarLeft && sidebarVisible"
+      id="bk-sidebar-content-left"
+      class="bk-sidebar bk-is-left"
+      :class="{ 'bk-is-hidden': !sidebarVisible }"
+    />
+    <div
+      v-show="activeSidebarRight"
+      id="bk-sidebar-content-right"
+      class="bk-sidebar bk-is-right"
+      :class="{ 'bk-is-hidden': !sidebarVisible }"
+    />
+
+    <Transition name="bk-toolbar">
+      <div v-show="showToolbar" class="bk bk-top">
+        <div
+          class="bk-toolbar bk-control"
+          @touchstart.stop.passive
+          @touchmove.stop.passive
+        >
+          <div id="bk-toolbar-menu" class="bk-toolbar-area bk-is-menu" />
+          <div class="bk-toolbar-container bk-is-sidebar">
+            <div
+              id="bk-sidebar-tabs-left"
+              class="bk-sidebar-container-tabs bk-is-left"
+            />
+          </div>
+          <div id="bk-toolbar-after-menu" class="bk-toolbar-container" />
+          <div id="bk-toolbar-before-title" class="bk-toolbar-container" />
+          <div id="bk-toolbar-title" class="bk-toolbar-container" />
+          <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
+          <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
+          <div
+            id="bk-toolbar-before-sidebar"
+            class="bk-sidebar-container-tabs bk-toolbar-container"
+          />
+        </div>
+        <div
+          class="bk bk-sidebar-tabs"
+          :class="{ 'bk-has-sidebar-open': activeSidebarRight }"
+        >
+          <div id="bk-toolbar-before-sidebar-right" />
+          <div
+            id="bk-sidebar-tabs-right"
+            class="bk-sidebar-container-tabs bk-is-right"
+          />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import { onMounted, useBlokkli, onBeforeUnmount, computed } from '#imports'
+
+const { ui, selection, storage } = useBlokkli()
+
+const showToolbar = computed(
+  () =>
+    !ui.isMobile.value ||
+    (!selection.isDragging.value && !selection.isMultiSelecting.value),
+)
+
+const sidebarVisible = computed(() => {
+  if (ui.isMobile.value) {
+    return !selection.isDragging.value
+  }
+
+  return true
+})
+
+const activeSidebarLeft = storage.use('sidebar:active:left', '')
+const activeSidebarRight = storage.use('sidebar:active:right', '')
+const focusedSidebar = storage.use('sidebar:focused', '')
+
+const emit = defineEmits(['loaded'])
+
+const onWindowMouseDown = (e: MouseEvent) => {
+  if (
+    (e.target instanceof HTMLElement || e.target instanceof SVGElement) &&
+    !e.target.closest('.bk-sidebar-detached')
+  ) {
+    focusedSidebar.value = ''
+  }
+}
+
+onBlokkliEvent('sidebar:close', () => (activeSidebarRight.value = ''))
+
+onMounted(() => {
+  emit('loaded')
+  document.documentElement.addEventListener('mousedown', onWindowMouseDown)
+})
+
+onBeforeUnmount(() => {
+  document.documentElement.removeEventListener('mousedown', onWindowMouseDown)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'BlokkliToolbar',
+}
+</script>

package/dist/runtime/components/Edit/ViewportBlockingRect/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div ref="el">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * A component to wrap viewport blocking elements.
+ *
+ * A viewport blocking element is one that is either draggable by the user to
+ * any location or one that the app renders that blocks the usual viewport.
+ *
+ * These are registered in the UI provider, where other features can access
+ * them to determine the ideal placement for other overlays.
+ *
+ * This is primarly used for the "actions" bar on selected blocks, which tries
+ * to not collide the bar with any of the blocking rectangles.
+ */
+import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
+import {
+  useBlokkli,
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+} from '#imports'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const { ui } = useBlokkli()
+
+const x = ref(0)
+const y = ref(0)
+const width = ref(0)
+const height = ref(0)
+
+const rect = computed(() => {
+  return {
+    x: x.value,
+    y: y.value,
+    width: width.value,
+    height: height.value,
+  }
+})
+
+const el = ref<HTMLDivElement | null>(null)
+
+useAnimationFrame(() => {
+  if (!el.value) {
+    return
+  }
+
+  const rect = el.value.getBoundingClientRect()
+  x.value = rect.x
+  y.value = rect.y
+  width.value = rect.width
+  height.value = rect.height
+})
+
+watch(rect, (v) => {
+  ui.setViewportBlockingRectangle(props.id, v)
+})
+
+onMounted(() => {
+  ui.setViewportBlockingRectangle(props.id, rect.value)
+})
+
+onBeforeUnmount(() => {
+  ui.setViewportBlockingRectangle(props.id)
+})
+</script>

package/dist/runtime/components/Edit/index.d.ts

@@ -0,0 +1,14 @@
+import ItemIcon from './ItemIcon/index.vue.js';
+import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
+import RelativeTime from './RelativeTime/index.vue.js';
+import Resizable from './Resizable/index.vue.js';
+import Icon from './Icon/index.vue.js';
+import DialogModal from './Dialog/index.vue.js';
+import ScaleToFit from './ScaleToFit/index.vue.js';
+import Sortli from './Sortli/index.vue.js';
+import FormOverlay from './FormOverlay/index.vue.js';
+import AddListItem from './AddListItem/index.vue.js';
+import Loading from './Loading/index.vue.js';
+import Highlight from './Highlight/index.vue.js';
+import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
+export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, };

package/dist/runtime/components/Edit/index.js

@@ -0,0 +1,28 @@
+import ItemIcon from "./ItemIcon/index.vue";
+import ShortcutIndicator from "./ShortcutIndicator/index.vue";
+import RelativeTime from "./RelativeTime/index.vue";
+import Resizable from "./Resizable/index.vue";
+import Icon from "./Icon/index.vue";
+import DialogModal from "./Dialog/index.vue";
+import ScaleToFit from "./ScaleToFit/index.vue";
+import Sortli from "./Sortli/index.vue";
+import FormOverlay from "./FormOverlay/index.vue";
+import AddListItem from "./AddListItem/index.vue";
+import Loading from "./Loading/index.vue";
+import Highlight from "./Highlight/index.vue";
+import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
+export {
+  ItemIcon,
+  ShortcutIndicator,
+  RelativeTime,
+  Icon,
+  Resizable,
+  DialogModal,
+  ScaleToFit,
+  Sortli,
+  FormOverlay,
+  AddListItem,
+  Loading,
+  Highlight,
+  ViewportBlockingRect
+};

package/dist/runtime/composables/defineBlokkli.d.ts

@@ -0,0 +1,6 @@
+import type { BlockDefinitionInput, BlockDefinitionOptionsInput, DefineBlokkliContext } from '#blokkli/types';
+import type { GlobalOptionsKey } from '#blokkli/generated-types';
+/**
+ * Define a blokkli component.
+ */
+export declare function defineBlokkli<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined>(config: BlockDefinitionInput<T, G>): DefineBlokkliContext<T, G>;

package/dist/runtime/composables/defineBlokkli.js

@@ -0,0 +1,108 @@
+import {
+  INJECT_BLOCK_ITEM,
+  INJECT_EDIT_CONTEXT,
+  INJECT_FIELD_LIST_BLOCKS,
+  INJECT_FIELD_LIST_TYPE,
+  INJECT_REUSABLE_OPTIONS,
+  INJECT_PROVIDER_BLOCKS
+} from "../helpers/symbols.js";
+import {
+  computed,
+  inject,
+  getCurrentInstance,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import { globalOptionsDefaults } from "#blokkli/default-global-options";
+import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
+export function defineBlokkli(config) {
+  const optionKeys = [
+    ...Object.keys(config.options || {}),
+    ...config.globalOptions || []
+  ];
+  const fieldListType = inject(
+    INJECT_FIELD_LIST_TYPE,
+    computed(() => "default")
+  );
+  const siblings = inject(
+    INJECT_FIELD_LIST_BLOCKS
+  );
+  const rootBlocks = inject(
+    INJECT_PROVIDER_BLOCKS
+  );
+  const item = inject(INJECT_BLOCK_ITEM);
+  const uuid = item?.value.uuid || "";
+  const index = item?.value.index !== void 0 ? item.value.index : computed(() => 0);
+  const fromLibraryOptions = inject(
+    INJECT_REUSABLE_OPTIONS,
+    null
+  );
+  const editContext = inject(INJECT_EDIT_CONTEXT, null);
+  const options = computed(() => {
+    if (config.bundle === "from_library" || config.bundle === "blokkli_fragment") {
+      return {
+        ...item?.value.options || {},
+        ...editContext?.mutatedOptions[uuid] || {}
+      };
+    }
+    const result = optionKeys.reduce((acc, key) => {
+      if (editContext) {
+        const overrideOptions = editContext.mutatedOptions[uuid] || {};
+        if (overrideOptions[key] !== void 0) {
+          acc[key] = overrideOptions[key];
+          return acc;
+        }
+      }
+      if (fromLibraryOptions && fromLibraryOptions.value[key] !== void 0) {
+        acc[key] = fromLibraryOptions.value[key];
+        return acc;
+      }
+      if (item?.value.options && item.value.options[key] !== void 0) {
+        acc[key] = item.value.options[key];
+        return acc;
+      }
+      return acc;
+    }, {});
+    optionKeys.forEach((key) => {
+      const definition = config.options?.[key] || globalOptionsDefaults[key];
+      if (!definition) {
+        return;
+      }
+      const value = result[key] === void 0 || result[key] === null ? definition.default : result[key];
+      result[key] = getRuntimeOptionValue(definition, value);
+    });
+    return result;
+  });
+  const parentType = computed(() => item?.value.parentType);
+  const isEditing = !!item?.value.isEditing;
+  onMounted(() => {
+    if (!item?.value || !isEditing || !editContext || !editContext.dom || // Block is already registered by the from_library block.
+    fromLibraryOptions || // The defineBlokkliFragment composable registers the block itself.
+    config.bundle === "blokkli_fragment") {
+      return;
+    }
+    const instance = getCurrentInstance();
+    editContext.dom.registerBlock(
+      uuid,
+      instance,
+      config.bundle,
+      fieldListType.value,
+      item.value.parentType
+    );
+  });
+  onBeforeUnmount(() => {
+    if (editContext && editContext.dom && uuid && config.bundle !== "blokkli_fragment") {
+      editContext.dom.unregisterBlock(uuid);
+    }
+  });
+  return {
+    uuid,
+    index,
+    options,
+    isEditing,
+    parentType,
+    fieldListType,
+    siblings,
+    rootBlocks
+  };
+}

package/dist/runtime/composables/defineBlokkliFeature.d.ts

@@ -0,0 +1,28 @@
+import { type ComputedRef } from '#imports';
+import type { BlokkliAdapter, AdapterMethods } from '#blokkli/adapter';
+import type { FeatureDefinition } from '#blokkli/types';
+import type { ValidFeatureKey } from '#blokkli-runtime/features';
+import type { DebugLogger } from '#blokkli/helpers/debugProvider';
+type SettingType<S> = S extends {
+    type: 'checkbox';
+} ? boolean : S extends {
+    type: 'radios';
+    options: infer O;
+} ? keyof O : S extends {
+    type: 'slider';
+    default: infer N;
+} ? N : never;
+type SettingsTypes<S> = {
+    [P in keyof S]: SettingType<S[P]>;
+};
+type PickRequiredMethods<T, Methods extends AdapterMethods[]> = {
+    [K in Methods[number]]: NonNullable<BlokkliAdapter<T>[K]>;
+};
+type CombinedAdapter<T, Methods extends AdapterMethods[]> = PickRequiredMethods<T, Methods> & BlokkliAdapter<T>;
+type DefineBlokkliFeature<T, Methods extends AdapterMethods[], F extends FeatureDefinition<Methods, ValidFeatureKey>> = {
+    adapter: CombinedAdapter<T, Methods>;
+    settings: ComputedRef<SettingsTypes<F['settings']>>;
+    logger: DebugLogger;
+};
+export declare function defineBlokkliFeature<T, Methods extends AdapterMethods[], F extends FeatureDefinition<Methods, ValidFeatureKey>>(feature: F): DefineBlokkliFeature<T, Methods, F>;
+export {};

package/dist/runtime/composables/defineBlokkliFeature.js

@@ -0,0 +1,62 @@
+import {
+  computed,
+  useBlokkli,
+  onMounted,
+  onUnmounted,
+  provide
+} from "#imports";
+import { settingsOverride } from "#blokkli/config";
+import { INJECT_EDIT_LOGGER } from "#blokkli/helpers/symbols";
+export function defineBlokkliFeature(feature) {
+  const { adapter, storage, features, debug } = useBlokkli();
+  const logger = debug.createLogger(feature.label || feature.id);
+  const storageKey = computed(() => `feature:${feature.id}:settings`);
+  const defaults = Object.entries(feature.settings || {}).reduce((acc, [key, config]) => {
+    const overrideKey = `feature:${feature.id}:${key}`;
+    const override = settingsOverride[overrideKey];
+    if (override && "default" in override && override.default !== void 0) {
+      acc[key] = override.default;
+    } else if ("default" in config) {
+      acc[key] = config.default;
+    }
+    return acc;
+  }, {});
+  const settingsStorage = storage.use(storageKey, defaults);
+  const settingsEnforced = computed(
+    () => Object.keys(feature.settings || {}).reduce(
+      (acc, key) => {
+        const overrideKey = `feature:${feature.id}:${key}`;
+        const override = settingsOverride[overrideKey];
+        if (override?.disable) {
+          acc[key] = defaults[key];
+        }
+        return acc;
+      },
+      {}
+    )
+  );
+  const settings = computed(() => {
+    return {
+      // Default settings defined by the feature.
+      ...defaults,
+      // Settings altered by the user.
+      ...settingsStorage.value,
+      // Settings always enforced via config.
+      ...settingsEnforced.value
+    };
+  });
+  onMounted(() => {
+    features.mount(feature);
+    logger.log("Feature mounted");
+  });
+  onUnmounted(() => {
+    features.unmount(feature.id);
+    logger.log("Feature unmounted");
+  });
+  provide(INJECT_EDIT_LOGGER, logger);
+  return {
+    adapter,
+    settings,
+    logger
+  };
+}

package/dist/runtime/composables/defineBlokkliFragment.d.ts

@@ -0,0 +1,3 @@
+import type { BlockDefinitionOptionsInput, DefineBlokkliContext, FragmentDefinitionInput } from '#blokkli/types';
+import type { GlobalOptionsKey } from '#blokkli/generated-types';
+export declare function defineBlokkliFragment<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined>(config: FragmentDefinitionInput<T, G>): DefineBlokkliContext<T, G>;

package/dist/runtime/composables/defineBlokkliFragment.js

@@ -0,0 +1,54 @@
+import {
+  INJECT_EDIT_CONTEXT,
+  INJECT_FRAGMENT_CONTEXT
+} from "../helpers/symbols.js";
+import { getRuntimeOptionValue } from "../helpers/runtimeHelpers/index.js";
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onBeforeUnmount,
+  onMounted
+} from "#imports";
+import { globalOptionsDefaults } from "#blokkli/default-global-options";
+export function defineBlokkliFragment(config) {
+  const ctx = inject(INJECT_FRAGMENT_CONTEXT);
+  const editContext = inject(INJECT_EDIT_CONTEXT, null);
+  const optionKeys = [
+    ...Object.keys(config.options || {}),
+    ...config.globalOptions || []
+  ];
+  const options = computed(() => {
+    const result = optionKeys.reduce((acc, key) => {
+      acc[key] = ctx.options.value[key];
+      return acc;
+    }, {});
+    optionKeys.forEach((key) => {
+      const definition = config.options?.[key] || globalOptionsDefaults[key];
+      if (!definition) {
+        return;
+      }
+      const value = result[key] === void 0 || result[key] === null ? definition.default : result[key];
+      result[key] = getRuntimeOptionValue(definition, value);
+    });
+    return result;
+  });
+  onMounted(() => {
+    if (editContext && editContext.dom) {
+      const instance = getCurrentInstance();
+      editContext.dom.registerBlock(
+        ctx.uuid,
+        instance,
+        "blokkli_fragment",
+        ctx.fieldListType.value,
+        ctx.parentType.value
+      );
+    }
+  });
+  onBeforeUnmount(() => {
+    if (editContext && ctx.uuid && editContext.dom) {
+      editContext.dom.unregisterBlock(ctx.uuid);
+    }
+  });
+  return { ...ctx, options };
+}

package/dist/runtime/composables/useBlokkli.d.ts

@@ -0,0 +1,8 @@
+import type { BlokkliApp } from '#blokkli/types';
+/**
+ * Use the blokkli editor app.
+ *
+ * The app is only available when the editor is mounted. Calling this
+ * composable in normal rendering does not work.
+ */
+export declare function useBlokkli(): BlokkliApp;

package/dist/runtime/composables/useBlokkli.js

@@ -0,0 +1,5 @@
+import { INJECT_APP } from "../helpers/symbols.js";
+import { inject } from "#imports";
+export function useBlokkli() {
+  return inject(INJECT_APP);
+}

package/dist/runtime/constants/index.d.ts

@@ -0,0 +1,4 @@
+export declare const SETTINGS_GROUP: readonly ["appearance", "behavior", "advanced"];
+export declare const VIEWPORT: readonly ["mobile", "desktop"];
+export type SettingsGroup = (typeof SETTINGS_GROUP)[number];
+export type Viewport = (typeof VIEWPORT)[number];

package/dist/runtime/constants/index.js

@@ -0,0 +1,2 @@
+export const SETTINGS_GROUP = ["appearance", "behavior", "advanced"];
+export const VIEWPORT = ["mobile", "desktop"];