@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.60

package/dist/runtime/editor/features/block-transfer/SummaryDialog/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <DialogModal
+    id="block-transfer-summary"
+    :title="$t('blockTransferSummaryTitle', 'Import summary')"
+    :submit-label="$t('close', 'Close')"
+    :width="700"
+    :lead="leadText"
+    mono
+    @cancel="$emit('close')"
+    @submit="$emit('close')"
+  >
+    <div class="bk _bk_flex _bk_flex-col _bk_gap-20">
+      <PanelSection
+        v-if="summary.skippedBundles.length"
+        :title="$t('blockTransferSkippedBundles', 'Skipped block types')"
+        :help="
+  $t(
+    'blockTransferSkippedBundlesHelp',
+    'These block types were not imported because they don\u2019t exist on the target site or you don\u2019t have permission to use them.'
+  )
+"
+        padded
+      >
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th>{{ $t("bundle", "Bundle") }}</th>
+              <th class="_bk_text-right!">
+                {{ $t("blockTransferCount", "Count") }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in summary.skippedBundles"
+              :key="row.bundle"
+            >
+              <td>
+                <code>{{ row.bundle }}</code>
+              </td>
+              <td class="_bk_text-right!">{{ row.count }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </PanelSection>
+
+      <PanelSection
+        v-if="summary.droppedFields.length"
+        :title="$t('blockTransferDroppedFields', 'Removed fields')"
+        :help="
+  $t(
+    'blockTransferDroppedFieldsHelp',
+    'These fields were dropped because they no longer exist on the target block type.'
+  )
+"
+        padded
+      >
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th>{{ $t("bundle", "Bundle") }}</th>
+              <th>{{ $t("blockTransferFieldName", "Field") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(row, i) in summary.droppedFields"
+              :key="`${row.bundle}-${row.fieldName}-${i}`"
+            >
+              <td>
+                <code>{{ row.bundle }}</code>
+              </td>
+              <td>
+                <code>{{ row.fieldName }}</code>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </PanelSection>
+
+      <PanelSection
+        v-if="summary.referencesResolvedByLabel.length"
+        :title="
+  $t(
+    'blockTransferReferencesByLabel',
+    'References matched by label \u2014 please verify'
+  )
+"
+        :help="
+  $t(
+    'blockTransferReferencesByLabelHelp',
+    'These references could not be matched by ID and were resolved by label instead. Verify they point to the correct entity.'
+  )
+"
+        padded
+      >
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th>{{ $t("blockTransferEntityType", "Entity type") }}</th>
+              <th>{{ $t("blockTransferLabel", "Label") }}</th>
+              <th>{{ $t("blockTransferTargetId", "Target ID") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(row, i) in summary.referencesResolvedByLabel"
+              :key="`${row.entityType}-${row.targetId}-${i}`"
+            >
+              <td>
+                <code>{{ row.entityType }}</code>
+              </td>
+              <td>{{ row.label }}</td>
+              <td>
+                <code>{{ row.targetId }}</code>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </PanelSection>
+
+      <PanelSection
+        v-if="summary.referencesUnresolved.length"
+        :title="
+  $t('blockTransferReferencesUnresolved', 'Unresolved references')
+"
+        :help="
+  $t(
+    'blockTransferReferencesUnresolvedHelp',
+    'These references could not be resolved on the target site and were left empty.'
+  )
+"
+        padded
+      >
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th>{{ $t("blockTransferEntityType", "Entity type") }}</th>
+              <th>{{ $t("blockTransferLabel", "Label") }}</th>
+              <th>{{ $t("blockTransferReason", "Reason") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(row, i) in summary.referencesUnresolved"
+              :key="`${row.uuid ?? row.label ?? ''}-${i}`"
+            >
+              <td>
+                <code>{{ row.entityType }}</code>
+              </td>
+              <td>{{ row.label || "\u2014" }}</td>
+              <td>{{ row.reason }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </PanelSection>
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { DialogModal } from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+const props = defineProps({
+  summary: { type: Object, required: true }
+});
+defineEmits(["close"]);
+const { $t } = useBlokkli();
+const leadText = computed(() => {
+  const imported = $t("blocksImported", "@count blocks imported.").replace(
+    "@count",
+    String(props.summary.paragraphsImported)
+  );
+  if (props.summary.referencesResolvedByUuid > 0) {
+    const refs = $t(
+      "blockTransferReferencesByUuid",
+      "@count references resolved exactly."
+    ).replace("@count", String(props.summary.referencesResolvedByUuid));
+    return `${imported} ${refs}`;
+  }
+  return imported;
+});
+</script>

package/dist/runtime/editor/features/block-transfer/SummaryDialog/index.vue.d.ts

@@ -0,0 +1,11 @@
+import type { BlockTransferImportSummary } from '../types.js';
+type __VLS_Props = {
+    summary: BlockTransferImportSummary;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/block-transfer/index.d.vue.ts

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

package/dist/runtime/editor/features/block-transfer/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <div class="bk _bk_absolute _bk_pointer-events-none _bk_invisible">
+      <div ref="dragPreviewRef" class="bk-block-transfer-drag-preview">
+        <Icon name="bk_mdi_upload" />
+        <span>
+          {{
+            $t("blocksCount", "@count blocks").replace(
+  "@count",
+  String(pendingDrag?.count ?? 0)
+)
+          }}
+        </span>
+      </div>
+    </div>
+    <BlokkliTransition name="slide-up">
+      <SummaryDialog v-if="summary" :summary @close="summary = null" />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  defineAsyncComponent,
+  defineBlokkliFeature,
+  ref,
+  useBlokkli,
+  useTemplateRef
+} from "#imports";
+import { BlokkliTransition, Icon } from "#blokkli/editor/components";
+import {
+  defineDropHandler,
+  defineItemDropdownAction,
+  onBlokkliEvent
+} from "#blokkli/editor/composables";
+import { emitMessage, eventBus } from "#blokkli/editor/events";
+const SummaryDialog = defineAsyncComponent(
+  () => import("./SummaryDialog/index.vue")
+);
+const { adapter } = defineBlokkliFeature({
+  id: "block-transfer",
+  label: "Block Transfer",
+  icon: "bk_mdi_upload",
+  description: "Export selected blocks to a portable clipboard envelope and paste them back in any bl\xF6kkli editor."
+});
+const { $t, state, ui, selection, animation, types, context, permissions } = useBlokkli();
+const summary = ref(null);
+const pendingDrag = ref(null);
+const dragPreviewRef = useTemplateRef("dragPreviewRef");
+async function onClickExport() {
+  if (!adapter.exportBlocksToTransferable) {
+    return;
+  }
+  const uuids = selection.uuids.value;
+  if (!uuids.length) {
+    return;
+  }
+  let envelope = null;
+  try {
+    envelope = await adapter.exportBlocksToTransferable({ uuids });
+  } catch (_e) {
+    envelope = null;
+  }
+  if (!envelope) {
+    emitMessage(
+      $t("blockTransferExportError", "Could not export the selected blocks."),
+      "error"
+    );
+    return;
+  }
+  try {
+    await ui.setClipboardData({
+      type: "block_transfer",
+      bundles: envelope.bundles,
+      transferable: envelope.transferable
+    });
+  } catch (_e) {
+    emitMessage(
+      $t(
+        "blockTransferClipboardError",
+        "Failed to write to the clipboard. Please check your browser permissions."
+      ),
+      "error"
+    );
+    return;
+  }
+  emitMessage(
+    $t("blockTransferExportSuccess", "Blocks exported to clipboard."),
+    "success"
+  );
+}
+defineItemDropdownAction(() => {
+  if (!adapter.exportBlocksToTransferable || !permissions.hasPermission("transfer_blocks") || !selection.items.value.length || state.editMode.value !== "editing") {
+    return;
+  }
+  return {
+    id: "block-transfer-export",
+    label: $t("blockTransferExport", "Export to clipboard"),
+    description: $t(
+      "blockTransferExportDescription",
+      "Copy the selected blocks to the clipboard so you can paste them into another field, page or bl\xF6kkli editor."
+    ),
+    icon: "bk_mdi_upload",
+    group: "clipboard",
+    weight: 110,
+    callback: onClickExport
+  };
+});
+function summaryHasWarnings(s) {
+  return s.skippedBundles.length > 0 || s.droppedFields.length > 0 || s.referencesResolvedByLabel.length > 0 || s.referencesUnresolved.length > 0;
+}
+async function runImport(transferable, host, afterUuid) {
+  await state.mutateWithLoadingState(
+    async () => {
+      const result = await adapter.importBlocksFromTransferable({
+        transferable,
+        host,
+        afterUuid
+      });
+      if (result.success && result.importSummary) {
+        if (summaryHasWarnings(result.importSummary)) {
+          summary.value = result.importSummary;
+        } else {
+          emitMessage(
+            $t("blocksImported", "@count blocks imported.").replace(
+              "@count",
+              String(result.importSummary.paragraphsImported)
+            ),
+            "success"
+          );
+        }
+      }
+      return result;
+    },
+    $t("blockTransferImportError", "Could not import the blocks.")
+  );
+}
+onBlokkliEvent("clipboard:paste", ({ data }) => {
+  if (data.type !== "block_transfer") return;
+  if (!Array.isArray(data.bundles) || typeof data.transferable !== "string") {
+    return;
+  }
+  const bundles = data.bundles.filter((b) => typeof b === "string");
+  const { transferable } = data;
+  if (!adapter.importBlocksFromTransferable || !permissions.hasPermission("transfer_blocks")) {
+    emitMessage(
+      $t(
+        "blockTransferImportUnsupported",
+        "Importing exported blocks is not supported by this editor."
+      ),
+      "warning"
+    );
+    return;
+  }
+  if (ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value || state.editMode.value !== "editing") {
+    return;
+  }
+  const hostFields = types.fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle
+  );
+  if (!hostFields.length) {
+    emitMessage(
+      $t("blockTransferPasteNoTarget", "No place to paste imported content."),
+      "warning"
+    );
+    return;
+  }
+  if (hostFields.length === 1) {
+    const field = hostFields[0];
+    runImport(transferable, {
+      type: context.value.entityType,
+      uuid: context.value.entityUuid,
+      fieldName: field.name
+    });
+    return;
+  }
+  if (!dragPreviewRef.value) {
+    return;
+  }
+  const el = dragPreviewRef.value;
+  pendingDrag.value = { count: bundles.length };
+  const item = {
+    itemType: "block_transfer",
+    transferable,
+    itemBundles: bundles,
+    element: () => el
+  };
+  eventBus.emit("dragging:start", {
+    items: [item],
+    coords: animation.getMouseCoords(),
+    mode: "mouse"
+  });
+});
+onBlokkliEvent("dragging:end", () => {
+  pendingDrag.value = null;
+});
+defineDropHandler("block_transfer", {
+  execute: async ({ items, host, afterUuid }) => {
+    const item = items[0];
+    if (!item || !adapter.importBlocksFromTransferable) {
+      return;
+    }
+    await runImport(item.transferable, host, afterUuid ?? void 0);
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "BlockTransfer"
+};
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-block-transfer-drag-preview {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+  background-color: rgb(var(--bk-theme-accent-700) / 1);
+  padding-inline: 15px;
+  padding-block: 10px;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  color: white;
+  --bk-tw-shadow: 0 4px 6px -1px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+}
+.bk-block-transfer-drag-preview svg {
+  width: 24px;
+  height: 24px;
+  fill: currentcolor;
+}
+</style>

package/dist/runtime/editor/features/block-transfer/index.vue.d.ts

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

package/dist/runtime/editor/features/block-transfer/types.d.ts

@@ -0,0 +1,101 @@
+import type { BlokkliItemHost } from '#blokkli/editor/types/field';
+import type { MutationResponseLike } from '#blokkli/editor/adapter';
+export type BlockTransferImportSummary = {
+    paragraphsImported: number;
+    skippedBundles: {
+        bundle: string;
+        count: number;
+    }[];
+    droppedFields: {
+        bundle: string;
+        fieldName: string;
+    }[];
+    referencesResolvedByUuid: number;
+    referencesResolvedByLabel: {
+        entityType: string;
+        label: string;
+        targetId: string;
+    }[];
+    referencesUnresolved: {
+        entityType: string;
+        uuid: string | null;
+        label: string | null;
+        reason: string;
+    }[];
+};
+export type ExportBlocksToTransferableEvent = {
+    uuids: string[];
+};
+/**
+ * The structured result of a block export.
+ *
+ * The adapter is the single owner of the `transferable` string format —
+ * the editor never inspects, parses or modifies it. The `bundles` array
+ * (root-level block bundles, in order) is provided by the adapter as
+ * metadata so the editor can drive the paste UX (drop-field
+ * highlighting, count, listing) without peeking into the opaque
+ * payload.
+ */
+export type BlockTransferEnvelope = {
+    bundles: string[];
+    transferable: string;
+};
+export type ImportBlocksFromTransferableEvent = {
+    transferable: string;
+    host: BlokkliItemHost;
+    afterUuid?: string;
+};
+export type BlockTransferImportResponse<T> = MutationResponseLike<T> & {
+    importSummary?: BlockTransferImportSummary;
+};
+export type BlockTransferClipboardPayload = {
+    type: 'block_transfer';
+    bundles: string[];
+    transferable: string;
+};
+export interface DraggableBlockTransferItem {
+    itemType: 'block_transfer';
+    transferable: string;
+    itemBundles: string[];
+    element: () => HTMLElement;
+}
+declare module '#blokkli/editor/types/draggable' {
+    interface DraggableItemTypes {
+        block_transfer: DraggableBlockTransferItem;
+    }
+}
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Serialize the given blocks into a portable envelope.
+         *
+         * Returns the root-level block bundles alongside an opaque
+         * `transferable` string. The string is round-tripped verbatim into
+         * `importBlocksFromTransferable` — the editor never inspects,
+         * modifies or re-serializes it.
+         *
+         * Returns null when the backend denies the export or otherwise
+         * can't produce an envelope.
+         */
+        exportBlocksToTransferable?(e: ExportBlocksToTransferableEvent): Promise<BlockTransferEnvelope | null>;
+        /**
+         * Import blocks from a previously produced transferable string.
+         *
+         * Runs as a single mutation so the entire paste can be undone in one
+         * step. The optional `importSummary` on the response surfaces
+         * skipped bundles, dropped fields and reference-resolution details
+         * for the post-paste UI.
+         */
+        importBlocksFromTransferable?(e: ImportBlocksFromTransferableEvent): Promise<BlockTransferImportResponse<T>>;
+    }
+}
+declare module '#blokkli/editor/types/clipboard' {
+    interface BlokkliClipboardTypes {
+        block_transfer: BlockTransferClipboardPayload;
+    }
+}
+declare module '#blokkli/editor/types/permissions' {
+    interface UserPermissionMap {
+        transfer_blocks: 'Export blocks to a portable clipboard envelope and import them in any blökkli editor.';
+    }
+}

package/dist/runtime/editor/features/breadcrumbs/Crumb/index.d.vue.ts

@@ -0,0 +1,31 @@
+import type { Crumb } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** A data crumb to render; omit and use the slot for one-off crumbs. */
+    crumb?: Crumb;
+    /** The first crumb (the root) has no leading separator. */
+    isFirst?: boolean;
+    isLast: boolean;
+    /** Whether this crumb may shrink with an ellipsis (field crumbs always do). */
+    shrinkable?: boolean;
+    /** Test identity for slot crumbs (root/host/editable); data crumbs use their type. */
+    testId?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** A data crumb to render; omit and use the slot for one-off crumbs. */
+    crumb?: Crumb;
+    /** The first crumb (the root) has no leading separator. */
+    isFirst?: boolean;
+    isLast: boolean;
+    /** Whether this crumb may shrink with an ellipsis (field crumbs always do). */
+    shrinkable?: boolean;
+    /** Test identity for slot crumbs (root/host/editable); data crumbs use their type. */
+    testId?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/features/breadcrumbs/Crumb/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <li
+    class="_bk_flex _bk_items-center _bk_h-full _bk_text-base _bk_leading-none _bk_relative"
+    :class="[
+  canShrink ? '_bk_shrink _bk_min-w-0' : '_bk_shrink-0',
+  isLast ? '_bk_text-mono-50 _bk_pointer-events-none' : ''
+]"
+  >
+    <span v-if="!isFirst" class="_bk_text-mono-400 _bk_shrink-0">»</span>
+
+    <template v-if="crumb">
+      <button
+        v-if="crumb.type === 'block'"
+        type="button"
+        class="_bk_group _bk_flex _bk_items-center _bk_h-full _bk_px-10 _bk_relative _bk_hover:text-white"
+        :class="isLast ? '_bk_font-bold _bk_text-white' : '_bk_font-medium _bk_text-mono-300'"
+        @click.prevent="onClickBlock"
+      >
+        <span
+          class="_bk_truncate _bk_leading-[24px] _bk_group-hover:underline _bk_group-hover:underline-offset-4"
+        >
+          {{ crumb.label }}
+        </span>
+      </button>
+
+      <span
+        v-else-if="crumb.type === 'multiple'"
+        class="_bk_flex _bk_items-center _bk_h-full _bk_px-10 _bk_relative"
+        :class="isLast ? '_bk_font-bold _bk_text-white' : '_bk_text-mono-300'"
+      >
+        {{ crumb.count }} {{ $t("multipleItemsLabel", "Items") }}
+      </span>
+
+      <button
+        v-else-if="crumb.type === 'field'"
+        type="button"
+        class="_bk_group _bk_flex _bk_items-center _bk_h-full _bk_px-10 _bk_relative _bk_hover:text-white _bk_uppercase _bk_text-xs _bk_tracking-wide _bk_min-w-0"
+        :class="isLast ? '_bk_font-bold _bk_text-white' : '_bk_font-medium _bk_text-mono-300'"
+        @click.prevent="onClickField"
+      >
+        <span
+          class="_bk_truncate _bk_px-[8px] _bk_pt-[4px] _bk_pb-2 _bk_border"
+          :class="
+  isLast ? '_bk_bg-mono-600 _bk_text-white _bk_border-mono-200' : '_bk_bg-mono-800 _bk_text-mono-300 _bk_border-mono-600 _bk_group-hover:bg-mono-700 _bk_group-hover:text-white _bk_group-hover:border-mono-500'
+"
+        >
+          {{ crumb.label }}
+        </span>
+      </button>
+    </template>
+
+    <!-- The one-off crumbs (artboard root, host, active field) are rendered by
+         the parent — this shell only provides the separator + positioning. -->
+    <slot v-else />
+  </li>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+const props = defineProps({
+  crumb: { type: Object, required: false },
+  isFirst: { type: Boolean, required: false },
+  isLast: { type: Boolean, required: true },
+  shrinkable: { type: Boolean, required: false },
+  testId: { type: String, required: false }
+});
+const { $t, state, eventBus } = useBlokkli();
+const canShrink = computed(
+  () => (props.shrinkable || props.crumb?.type === "field") && !props.isLast
+);
+function onClickBlock() {
+  if (props.crumb?.type !== "block") {
+    return;
+  }
+  eventBus.emit("select", props.crumb.uuid);
+  eventBus.emit("scrollIntoView", { uuid: props.crumb.uuid });
+}
+function onClickField() {
+  if (props.crumb?.type !== "field") {
+    return;
+  }
+  const field = state.getMutatedField(
+    props.crumb.entityUuid,
+    props.crumb.fieldName
+  );
+  if (!field || !field.list.length) {
+    return;
+  }
+  eventBus.emit(
+    "select",
+    field.list.map((item) => item.uuid)
+  );
+}
+</script>
+
+<script>
+export default {
+  name: "BreadcrumbsCrumb"
+};
+</script>