@revenexx/editor 0.1.0

package/dist/runtime/editor/features/add-list/Blocks/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <Sortli
+    v-if="shouldRender"
+    id="blokkli-add-list-blocks"
+    :build-item
+  >
+    <AddListItem
+      v-for="type in sortedList"
+      v-show="type.isVisible"
+      :id="type.id"
+      :key="type.id"
+      context="add-list-blocks"
+      :label="type.label"
+      :bundle="type.id"
+      :disabled="type.isDisabled"
+      :description="type.description"
+      :color="type.isFavorite ? 'yellow' : 'default'"
+      :is-auto-add="type.isAutoAdd"
+      data-element-type="new"
+      use-help
+      :help-active
+      :data-item-bundle="type.id"
+      @help="onHelp(type, $event)"
+      @start-help="onStartHelp(type, $event)"
+    />
+  </Sortli>
+
+  <PluginTourItem
+    v-if="shouldRender"
+    id="block-add-list"
+    :title="$t('blockAddListTourTitle', 'Favorite blocks')"
+    :text="
+  $t(
+    'blockAddListTourText',
+    'Right-click on a block to add or remove them from your favorites. Favorites are highlighted and always displayed at the top of the list.'
+  )
+"
+    selector="#blokkli-add-list-blocks"
+  />
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import { AddListItem, Sortli } from "#blokkli/editor/components";
+import { isInternalBundle } from "#blokkli/editor/helpers/bundles";
+import { PluginTourItem } from "#blokkli/editor/plugins";
+import { getFieldKey } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
+import { defineCommands } from "#blokkli/editor/composables";
+const props = defineProps({
+  hideDisabledBlocks: { type: Boolean, required: false },
+  selectableBundles: { type: Array, required: true },
+  generallyAvailableBundles: { type: Array, required: true },
+  helpActive: { type: Boolean, required: true }
+});
+const emit = defineEmits(["help", "startHelp"]);
+function onHelp(item, element) {
+  if (!props.helpActive) {
+    return;
+  }
+  emit("help", {
+    type: "bundle",
+    id: item.id,
+    element
+  });
+}
+function onStartHelp(item, element) {
+  if (props.helpActive) {
+    return;
+  }
+  emit("startHelp", {
+    type: "bundle",
+    id: item.id,
+    element
+  });
+}
+const {
+  selection,
+  storage,
+  types,
+  context,
+  ui,
+  eventBus,
+  $t,
+  state,
+  definitions,
+  blocks,
+  permissions
+} = useBlokkli();
+function buildItem(element) {
+  const itemBundle = element.dataset.sortliId;
+  if (!itemBundle) {
+    return;
+  }
+  return {
+    itemType: "new",
+    itemBundle,
+    element: () => element
+  };
+}
+const shouldRender = computed(() => state.editMode.value === "editing");
+const searchText = ref("");
+const favorites = storage.use("blockFavorites", []);
+function determineVisibility(bundle, label) {
+  if (ui.isMobile.value && !props.selectableBundles.includes(bundle)) {
+    return false;
+  }
+  if (searchText.value && !label.toLowerCase().includes(searchText.value.toLowerCase())) {
+    return false;
+  }
+  const definition = definitions.getDefaultDefinition(bundle);
+  if (definition?.editor?.maxInstances) {
+    const existingInstancesOfBundle = state.getBlockBundleCount(bundle);
+    return existingInstancesOfBundle < definition.editor.maxInstances;
+  }
+  return true;
+}
+const sortedList = computed(() => {
+  const autoAdd = definitions.bundlesWithAutoAdd.value;
+  return [...props.generallyAvailableBundles].filter((v) => !isInternalBundle(v.id)).filter((v) => permissions.checkBlockBundlePermission(v.id, "add")).map((v) => {
+    const isVisible = determineVisibility(v.id, v.label);
+    const isDisabled = !v.id || !props.selectableBundles.includes(v.id);
+    const isAutoAdd = autoAdd.includes(v.id);
+    return {
+      ...v,
+      isDisabled,
+      isVisible: isVisible && (!props.hideDisabledBlocks || !isDisabled),
+      isFavorite: favorites.value.includes(v.id),
+      isAutoAdd
+    };
+  }).sort((a, b) => {
+    if (a.isFavorite && !b.isFavorite) return -1;
+    if (!a.isFavorite && b.isFavorite) return 1;
+    return a.label.localeCompare(b.label);
+  });
+});
+const getBundlesForAppendCommands = () => {
+  const item = selection.item.value;
+  if (!item) {
+    return [];
+  }
+  const field = types.getFieldConfig(
+    item.host.type,
+    item.host.bundle,
+    item.host.fieldName
+  );
+  if (field) {
+    if (field.cardinality !== -1) {
+      const key = getFieldKey(item.host.uuid, item.host.fieldName);
+      const count = state.getFieldBlockCount(key);
+      if (count >= field.cardinality) {
+        return [];
+      }
+    }
+    return field.allowedBundles.filter((v) => !isInternalBundle(v));
+  }
+  return [];
+};
+const getAppendEndCommands = () => {
+  if (selection.items.value.length !== 0) {
+    return [];
+  }
+  return types.fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle
+  ).flatMap((field) => {
+    if (field.cardinality !== -1) {
+      const key = getFieldKey(context.value.entityUuid, field.name);
+      const count = state.getFieldBlockCount(key);
+      if (count >= field.cardinality) {
+        return [];
+      }
+    }
+    return field.allowedBundles.filter((v) => !isInternalBundle(v)).map((bundle) => {
+      const definition = types.getBlockBundleDefinition(bundle);
+      return {
+        id: "block_add_list:append_end:" + bundle + field.name,
+        label: $t(
+          "addBlockCommand.appendInField",
+          'Append "@block" in "@field"'
+        ).replace("@block", definition?.label || bundle).replace("@field", field.label),
+        group: "add",
+        bundle,
+        callback: () => commandCallbackAppendEnd(bundle, field.name)
+      };
+    });
+  });
+};
+const commandCallbackAppendEnd = (bundle, fieldName) => {
+  const field = state.mutatedFields.value.find(
+    (v) => v.name === fieldName && v.entityType === context.value.entityType && v.entityUuid === context.value.entityUuid
+  );
+  if (!field) {
+    return;
+  }
+  const afterUuid = field.list[field.list.length - 1]?.uuid || void 0;
+  eventBus.emit("block:append", {
+    bundle,
+    afterUuid: afterUuid ?? null,
+    host: {
+      type: context.value.entityType,
+      uuid: context.value.entityUuid,
+      fieldName
+    }
+  });
+};
+const commandCallbackInsert = (bundle, fieldName, hostType, hostUuid) => {
+  const field = state.mutatedFields.value.find(
+    (v) => v.name === fieldName && v.entityType === hostType && v.entityUuid === hostUuid
+  );
+  const afterUuid = field ? field.list[field.list.length - 1]?.uuid : void 0;
+  eventBus.emit("block:append", {
+    bundle,
+    afterUuid: afterUuid ?? null,
+    host: {
+      type: hostType,
+      uuid: hostUuid,
+      fieldName
+    }
+  });
+};
+const getInsertCommands = (block) => {
+  if (!block) {
+    return [];
+  }
+  const nestedFields = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.bundle).map((field) => {
+    return {
+      ...field,
+      uuid: block.uuid
+    };
+  });
+  const commands = nestedFields.flatMap(
+    (field) => {
+      return field.allowedBundles.map((bundle) => {
+        const label = types.getBlockBundleDefinition(bundle)?.label || bundle;
+        return {
+          id: "block_add_list:insert:" + field.name + ":" + bundle,
+          label: $t(
+            "addBlockCommand.insertInField",
+            'Insert "@block" into "@field"'
+          ).replace("@block", label).replace("@field", field.label),
+          group: "add",
+          bundle,
+          callback: () => commandCallbackInsert(
+            bundle,
+            field.name,
+            field.entityType,
+            field.uuid
+          )
+        };
+      });
+    }
+  );
+  if (block.host.type === itemEntityType) {
+    const parentBlock = blocks.getBlock(block.host.uuid);
+    if (parentBlock) {
+      getInsertCommands(parentBlock).forEach((parentCommand) => {
+        commands.push(parentCommand);
+      });
+    }
+  }
+  return commands;
+};
+const commandCallbackAppend = (bundle) => {
+  const block = selection.items.value[0];
+  if (!block) {
+    return;
+  }
+  eventBus.emit("block:append", {
+    bundle,
+    afterUuid: selection.uuids.value[0],
+    host: {
+      type: block.host.type,
+      uuid: block.host.uuid,
+      fieldName: block.host.fieldName
+    }
+  });
+};
+const getAppendCommands = () => {
+  return getBundlesForAppendCommands().map((bundle) => {
+    const definition = types.getBlockBundleDefinition(bundle);
+    return {
+      id: "block_add_list:append:" + bundle,
+      label: $t("addBlockCommand.appendRoot", 'Append "@block"').replace(
+        "@block",
+        definition?.label || bundle
+      ),
+      group: "add",
+      bundle,
+      callback: () => commandCallbackAppend(bundle)
+    };
+  });
+};
+defineCommands(() => {
+  if (state.editMode.value !== "editing") {
+    return;
+  }
+  return [
+    ...getAppendCommands(),
+    ...getInsertCommands(selection.items.value[0]),
+    ...getAppendEndCommands()
+  ].filter(
+    (v) => v.bundle && permissions.checkBlockBundlePermission(v.bundle, "add")
+  );
+});
+</script>
+
+<script>
+export default {
+  name: "AddListBlocks"
+};
+</script>

package/dist/runtime/editor/features/add-list/Blocks/index.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockBundleDefinition } from '#blokkli/editor/types/definitions';
+import type { AddListHelp } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
+    helpActive: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    help: (date: AddListHelp) => void;
+    startHelp: (date: AddListHelp) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
+    helpActive: boolean;
+}> & Readonly<{
+    onHelp?: ((date: AddListHelp) => any) | undefined;
+    onStartHelp?: ((date: AddListHelp) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/add-list/Help/Item.d.vue.ts

@@ -0,0 +1,12 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+type __VLS_Props = {
+    type: 'bundle' | 'action';
+    id: string;
+    actions: AddAction[];
+    isVisible: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    height: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/add-list/Help/Item.vue

@@ -0,0 +1,195 @@
+<template>
+  <div
+    ref="el"
+    class="bk-add-list-help-item"
+    :style="{
+  visibility: isVisible ? 'visible' : 'hidden'
+}"
+  >
+    <div v-if="type === 'bundle'" class="bk-add-list-help-image">
+      <img v-if="imageUrl" :src="imageUrl" />
+      <div v-else>
+        <ItemIcon :bundle="undefined" :icon />
+      </div>
+    </div>
+    <h2>
+      <ItemIconBox :bundle :icon :color />
+      <span>{{ title }}</span>
+    </h2>
+
+    <hr />
+
+    <div
+      v-if="text"
+      class="bk-add-list-help-description"
+      v-html="text"
+    />
+
+    <template v-for="section in sections" :key="section.title">
+      <hr />
+      <div
+        class="bk-add-list-help-label _bk_uppercase _bk_text-sm _bk_font-semibold _bk_text-mono-300 _bk_tracking-wider _bk_mb-10"
+      >
+        {{ section.title }}
+      </div>
+      <div
+        v-for="field in section.fields"
+        :key="field.name"
+        class="bk-add-list-help-fields-item"
+      >
+        <ul>
+          <li v-if="section.fields.length > 1" class="bk-is-field">
+            {{ field.label }}
+          </li>
+          <li
+            v-for="allowed in field.items"
+            :key="field.name + allowed.bundle + allowed.label"
+            class="bk-is-bundle"
+          >
+            <ItemIconBox
+              :bundle="allowed.bundle"
+              :icon="allowed.icon"
+              is-tiny
+            />
+            <span>{{ allowed.label }}</span>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ItemIconBox, ItemIcon } from "#blokkli/editor/components";
+import { itemEntityType, fragmentBlockBundle } from "#blokkli-build/config";
+import { computed, ref, useBlokkli, useTemplateRef } from "#imports";
+import { onElementResize } from "#blokkli/editor/composables";
+import { falsy } from "#blokkli/helpers";
+const props = defineProps({
+  type: { type: String, required: true },
+  id: { type: String, required: true },
+  actions: { type: Array, required: true },
+  isVisible: { type: Boolean, required: true }
+});
+const el = useTemplateRef("el");
+const height = ref(0);
+onElementResize(el, (size) => {
+  height.value = size.height;
+});
+defineExpose({
+  height
+});
+const { types, $t, definitions, dom } = useBlokkli();
+const reusableBlockTypes = computed(
+  () => types.generallyAvailableBundles.filter((v) => v.allowReusable)
+);
+const fragments = computed(() => {
+  const available = dom.generallyAvailableFragments.value;
+  return definitions.fragmentDefinitions.value.filter((definition) => {
+    return available.includes(definition.name);
+  }).map((v) => {
+    return {
+      bundle: fragmentBlockBundle,
+      label: v.label,
+      icon: v.editor?.icon ?? "bk_mdi_newspaper"
+    };
+  });
+});
+const bundleDefinition = computed(() => {
+  if (props.type === "bundle") {
+    return types.getBlockBundleDefinition(props.id);
+  }
+  return void 0;
+});
+const action = computed(() => {
+  if (props.type === "action") {
+    return props.actions.find((v) => v.id === props.id);
+  }
+  return void 0;
+});
+const title = computed(() => {
+  return bundleDefinition.value?.label ?? action.value?.title ?? "";
+});
+const text = computed(() => {
+  return bundleDefinition.value?.description ?? action.value?.description;
+});
+const imageUrl = computed(() => {
+  if (bundle.value) {
+    const imagePath = definitions.getBlockImage(bundle.value);
+    if (imagePath) {
+      return imagePath;
+    }
+  }
+  return bundleDefinition.value?.imageUrl;
+});
+const bundle = computed(() => {
+  return bundleDefinition.value?.id;
+});
+const icon = computed(() => {
+  return action.value?.icon;
+});
+const color = computed(() => {
+  return action.value?.color;
+});
+const fields = computed(() => {
+  if (props.type !== "bundle") {
+    return [];
+  }
+  const fieldConfigs = types.fieldConfig.forEntityTypeAndBundle(
+    itemEntityType,
+    props.id
+  );
+  return fieldConfigs.map((field) => {
+    const items = field.allowedBundles.map((bundleId) => {
+      return types.getBlockBundleDefinition(bundleId);
+    }).filter(falsy).map((block) => {
+      return {
+        bundle: block.id,
+        label: block.label
+      };
+    });
+    return {
+      name: field.name,
+      label: field.label,
+      items
+    };
+  });
+});
+const sections = computed(() => {
+  const result = [];
+  if (fields.value.length) {
+    result.push({
+      title: $t("allowedBlocks", "Allowed Blocks"),
+      fields: fields.value
+    });
+  }
+  if (props.type === "action" && props.id === "library" && reusableBlockTypes.value.length) {
+    result.push({
+      title: $t("availableBlocks", "Available blocks"),
+      fields: [
+        {
+          name: "reusable",
+          label: "",
+          items: reusableBlockTypes.value.map((block) => ({
+            bundle: block.id,
+            label: block.label
+          }))
+        }
+      ]
+    });
+  }
+  if (props.type === "action" && props.id === "fragment" && fragments.value) {
+    result.push({
+      title: $t("availableFragments", "Available fragments"),
+      fields: [
+        {
+          name: "fragments",
+          label: "",
+          items: fragments.value
+        }
+      ]
+    });
+  }
+  return result;
+});
+</script>

package/dist/runtime/editor/features/add-list/Help/Item.vue.d.ts

@@ -0,0 +1,12 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+type __VLS_Props = {
+    type: 'bundle' | 'action';
+    id: string;
+    actions: AddAction[];
+    isVisible: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    height: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/add-list/Help/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+import type { BlockBundleDefinition } from '#blokkli/editor/types/definitions';
+type __VLS_Props = {
+    isVisible: boolean;
+    type?: 'bundle' | 'action';
+    id?: string;
+    element?: HTMLElement;
+    actions: AddAction[];
+    bundles: BlockBundleDefinition[];
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;