@revenexx/editor 0.1.0

package/dist/runtime/editor/features/comments/types.d.ts

@@ -0,0 +1,66 @@
+import type { BlokkliUser } from '#blokkli/editor/types/user';
+export type CommentItem = {
+    uuid: string;
+    blockUuids?: string[];
+    parentUuid?: string;
+    resolved: boolean;
+    body: string;
+    /**
+     * ISO 8601 timestamp (e.g. `2026-05-03T14:32:18Z`).
+     */
+    created: string;
+    /**
+     * ISO 8601 timestamp; set when the comment has been edited.
+     */
+    updated?: string;
+    /**
+     * The author of the comment, or `null` when the comment is anonymous or the
+     * author's account has since been deleted.
+     */
+    user: BlokkliUser | null;
+};
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Load all comments (roots and replies in a flat list).
+         */
+        loadComments?: () => Promise<CommentItem[]>;
+        /**
+         * Add a root comment to one or more blocks.
+         */
+        addComment?: (blockUuids: string[], body: string) => Promise<CommentItem[]>;
+        /**
+         * Reply to a root comment.
+         */
+        replyToComment?: (parentUuid: string, body: string) => Promise<CommentItem[]>;
+        /**
+         * Edit the body of an existing comment.
+         */
+        editComment?: (uuid: string, body: string) => Promise<CommentItem[]>;
+        /**
+         * Delete a comment. Deleting a root removes all of its replies.
+         */
+        deleteComment?: (uuid: string) => Promise<CommentItem[]>;
+        /**
+         * Resolve a thread (must be a root comment uuid).
+         */
+        resolveComment?: (uuid: string) => Promise<CommentItem[]>;
+        /**
+         * Reopen a previously resolved thread.
+         */
+        unresolveComment?: (uuid: string) => Promise<CommentItem[]>;
+        /**
+         * Toggle the checked state of a task item inside a comment body. The
+         * `taskIndex` is the document-order position (0-based) of the
+         * `<li data-type="taskItem">` to flip. Anyone with view access can
+         * toggle, regardless of comment ownership. Returns the updated comment.
+         */
+        toggleCommentTask?: (uuid: string, taskIndex: number) => Promise<CommentItem>;
+    }
+}
+declare module '#blokkli/editor/types/permissions' {
+    interface UserPermissionMap {
+        create_comments: 'Post comments.';
+        view_comments: 'Access comments.';
+    }
+}

package/dist/runtime/editor/features/complex-options/index.d.vue.ts

@@ -0,0 +1,3 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/complex-options/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <NestedEditorOverlay
+    v-if="uuid"
+    :uuid
+    :title="
+  getText(config.editTitle.key, config.editTitle.defaultTranslation)
+"
+    :icon="config.editorIcon"
+    theme="accent"
+    :element
+    @submit="onSubmit"
+    @close="onSubmit"
+  >
+    <component
+      :is="config.editorComponent"
+      ref="editorRef"
+      :data
+      :uuid
+      :option-key="optionKey"
+    />
+  </NestedEditorOverlay>
+</template>
+
+<script setup>
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  defineBlokkliFeature,
+  ref,
+  useTemplateRef,
+  useBlokkli,
+  computed
+} from "#imports";
+import { NestedEditorOverlay } from "#blokkli/editor/components";
+import { COMPLEX_OPTION_TYPES } from "#blokkli-build/complex-option-types";
+defineBlokkliFeature({
+  id: "complex-options",
+  icon: "bk_mdi_edit",
+  label: "Complex Options",
+  description: "Edit complex option types such as charts.",
+  requiredAdapterMethods: ["updateOptions"]
+});
+const { $t, state, adapter, dom, blocks } = useBlokkli();
+const getText = $t;
+const uuid = ref(null);
+const optionKey = ref("");
+const dataType = ref("");
+const config = computed(() => {
+  if (!dataType.value) {
+    return null;
+  }
+  return COMPLEX_OPTION_TYPES[dataType.value];
+});
+const element = computed(() => {
+  if (!uuid.value) {
+    return null;
+  }
+  const block = blocks.getBlock(uuid.value);
+  if (!block) {
+    return null;
+  }
+  return dom.getDragElement(block);
+});
+const data = computed(() => {
+  if (!uuid.value || !optionKey.value) {
+    return null;
+  }
+  const rawData = state.mutatedOptions[uuid.value]?.[optionKey.value] || state.getFieldListItem(uuid.value)?.options?.[optionKey.value];
+  if (rawData) {
+    try {
+      return JSON.parse(rawData);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+});
+const editorRef = useTemplateRef("editorRef");
+async function onSubmit() {
+  if (!uuid.value || !editorRef.value) return;
+  const editorData = editorRef.value.getData();
+  await state.mutateWithLoadingState(
+    () => adapter.updateOptions([
+      {
+        uuid: uuid.value,
+        key: optionKey.value,
+        value: JSON.stringify(editorData)
+      }
+    ]),
+    $t("complexOptionsSaveError", "The data could not be saved.")
+  );
+  uuid.value = null;
+}
+onBlokkliEvent("option:edit-complex", (e) => {
+  if (!(e.dataType in COMPLEX_OPTION_TYPES)) {
+    return;
+  }
+  uuid.value = e.uuid;
+  optionKey.value = e.key;
+  dataType.value = e.dataType;
+});
+</script>

package/dist/runtime/editor/features/complex-options/index.vue.d.ts

@@ -0,0 +1,3 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/conversions/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/conversions/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div />
+</template>
+
+<script setup>
+import {
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  useLazyAsyncData,
+  watch
+} from "#imports";
+import { falsy } from "#blokkli/helpers";
+import { defineItemDropdownAction } from "#blokkli/editor/composables";
+const { adapter } = defineBlokkliFeature({
+  id: "conversions",
+  label: "Conversions",
+  icon: "bk_mdi_swap_horizontal_circle",
+  requiredAdapterMethods: ["getConversions", "convertBlocks"],
+  description: "Provides block actions to convert one or more blocks to a different bundle."
+});
+const { types, selection, state, $t } = useBlokkli();
+const {
+  data: conversions,
+  execute,
+  status
+} = await useLazyAsyncData(() => adapter.getConversions(), {
+  immediate: false,
+  default: () => []
+});
+watch(selection.uuids, () => {
+  if (status.value === "idle") {
+    execute();
+  }
+});
+async function onConvert(targetBundle) {
+  if (!targetBundle) {
+    return;
+  }
+  await state.mutateWithLoadingState(
+    () => adapter.convertBlocks(
+      selection.items.value.map((v) => v.uuid),
+      targetBundle
+    ),
+    $t("failedToConvert", "The block could not be converted.")
+  );
+}
+const possibleConversions = computed(() => {
+  if (selection.bundles.value.length !== 1) {
+    return [];
+  }
+  const sourceType = selection.bundles.value[0];
+  const titleBase = $t("conversionsConvertTo", "Convert to: @bundle");
+  return conversions.value.filter(
+    (v) => v.sourceBundle === sourceType && types.allowedTypesInList.value.includes(v.targetBundle)
+  ).map((v) => types.getBlockBundleDefinition(v.targetBundle)).filter(falsy).map((v) => {
+    return {
+      id: v.id,
+      label: titleBase.replace("@bundle", v.label),
+      bundle: v.id
+    };
+  });
+});
+defineItemDropdownAction(() => {
+  if (possibleConversions.value.length) {
+    return possibleConversions.value.map((conversion) => ({
+      id: "conversion-" + conversion.id,
+      label: conversion.label,
+      bundle: conversion.bundle,
+      group: "conversions",
+      weight: 900,
+      callback: () => {
+        onConvert(conversion.id);
+      }
+    }));
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "Conversions"
+};
+</script>

package/dist/runtime/editor/features/conversions/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/conversions/types.d.ts

@@ -0,0 +1,16 @@
+export interface ConversionItem {
+    sourceBundle: string;
+    targetBundle: string;
+}
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Get all possible conversions.
+         */
+        getConversions?: () => Promise<ConversionItem[]>;
+        /**
+         * Convert multiple items.
+         */
+        convertBlocks?: (uuids: string[], targetBundle: string) => Promise<MutationResponseLike<T>>;
+    }
+}

package/dist/runtime/editor/features/debug/DebugSection.d.vue.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    title: string;
+    defaultOpen?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/features/debug/DebugSection.vue

@@ -0,0 +1,24 @@
+<template>
+  <section class="bk-debug-section">
+    <h2 class="bk-debug-section-header" @click="toggle">
+      <span class="bk-debug-section-indicator">{{ isOpen ? "\u25BC" : "\u25B6" }}</span>
+      {{ title }}
+    </h2>
+    <div v-if="isOpen" class="bk-debug-section-content">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+const props = defineProps({
+  title: { type: String, required: true },
+  defaultOpen: { type: Boolean, required: false }
+});
+const { storage } = useBlokkli();
+const isOpen = storage.use("debugSection" + props.title, false);
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+</script>

package/dist/runtime/editor/features/debug/DebugSection.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    title: string;
+    defaultOpen?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/features/debug/Main.d.vue.ts

@@ -0,0 +1,7 @@
+import type { DebugLogger } from '#blokkli/editor/providers/debug';
+type __VLS_Props = {
+    logger: DebugLogger;
+};
+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;

package/dist/runtime/editor/features/debug/Main.vue

@@ -0,0 +1,250 @@
+<template>
+  <PluginSidebar id="debug" title="Debug" icon="bk_mdi_bug_report" weight="200">
+    <div class="bk-debug">
+      <DebugSection title="Keyboard">
+        <SectionKeyboard />
+      </DebugSection>
+
+      <DebugSection title="Selection">
+        <SectionSelection />
+      </DebugSection>
+
+      <DebugSection title="Rendering">
+        <SectionRendering />
+      </DebugSection>
+
+      <DebugSection title="Logging">
+        <SectionLogging :logger />
+      </DebugSection>
+
+      <DebugSection title="Icons">
+        <SectionIcons />
+      </DebugSection>
+
+      <DebugSection title="Features">
+        <SectionFeatures />
+      </DebugSection>
+    </div>
+  </PluginSidebar>
+
+  <PluginDebugOverlay id="viewport" title="Show viewport overlay">
+    <DebugViewport />
+  </PluginDebugOverlay>
+
+  <PluginDebugOverlay id="rects" title="Show field and block rects">
+    <DebugRects />
+  </PluginDebugOverlay>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { PluginSidebar, PluginDebugOverlay } from "#blokkli/editor/plugins";
+import DebugSection from "./DebugSection.vue";
+import SectionKeyboard from "./Section/Keyboard.vue";
+import SectionSelection from "./Section/Selection.vue";
+import SectionRendering from "./Section/Rendering.vue";
+import SectionLogging from "./Section/Logging.vue";
+import SectionIcons from "./Section/Icons.vue";
+import SectionFeatures from "./Section/Features.vue";
+import DebugViewport from "./Viewport/index.vue";
+import DebugRects from "./Rects/index.vue";
+import { defineItemDropdownAction } from "#blokkli/editor/composables";
+defineProps({
+  logger: { type: Object, required: true }
+});
+const { selection } = useBlokkli();
+async function copyUuid() {
+  const uuid = selection.uuids.value.at(0);
+  if (!uuid) {
+    return;
+  }
+  const type = "text/plain";
+  const clipboardItemData = {
+    [type]: uuid
+  };
+  const clipboardItem = new ClipboardItem(clipboardItemData);
+  await navigator.clipboard.write([clipboardItem]);
+}
+defineItemDropdownAction(() => {
+  if (selection.uuids.value.length === 1) {
+    return {
+      id: "debug-copy-uuid",
+      label: "Copy UUID",
+      icon: "bk_mdi_bug_report",
+      group: "debug",
+      weight: 200,
+      callback: copyUuid
+    };
+  }
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk .bk-debug) .bk-debug-section {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
+}
+:is(.bk .bk-debug) .bk-debug-section-header {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 5px;
+  -webkit-user-select: none;
+  user-select: none;
+  padding: 20px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  text-transform: uppercase;
+}
+:is(:is(.bk .bk-debug) .bk-debug-section-header):hover {
+  opacity: 80%;
+}
+:is(.bk .bk-debug) .bk-debug-section-content {
+  padding-inline: 20px;
+  padding-bottom: 20px;
+}
+:is(.bk .bk-debug) .bk-debug-section-indicator {
+  display: inline-block;
+  width: 15px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+}
+:is(:is(.bk .bk-debug) .bk-debug-list)  > div {
+  display: flex;
+  justify-content: space-between;
+}
+:is(:is(:is(.bk .bk-debug) .bk-debug-list) > div):not(:last-child) {
+  margin-bottom: 5px;
+}
+:is(:is(.bk .bk-debug) .bk-debug-features) h3 {
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(:is(.bk .bk-debug) .bk-debug-features) p {
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+:is(:is(.bk .bk-debug) .bk-debug-features)  > div {
+  display: flex;
+  gap: 5px;
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding-block: 10px;
+}
+.bk .bk-debug-visible-viewport {
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999999999;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk .bk-debug-visible-viewport {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 10%, transparent);
+  }
+}
+:is(.bk .bk-debug-visible-viewport)  > div {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  padding: 2px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  color: white;
+}
+.bk .bk-debug-intersection-rects {
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999999999;
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk .bk-debug-intersection-rects {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-normal) / 1) 25%, transparent);
+  }
+}
+.bk .bk-debug-intersection-rects {
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 1px;
+  outline-offset: calc(1px * -1);
+  outline-color: rgb(var(--bk-theme-yellow-normal) / 1);
+}
+.bk .bk-debug-visible-viewport-padded {
+  pointer-events: none;
+  position: fixed;
+  z-index: 9999999;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+:is(.bk .bk-debug-visible-viewport-padded)  > div {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  padding: 2px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  color: white;
+}
+.bk .bk-debug-viewport-blocking-rect {
+  pointer-events: none;
+  position: fixed;
+  z-index: 9999999;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+.bk .bk-debug-viewport-lines {
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999999999;
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
+}
+.bk ._bk_debug-rect {
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999999999;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-accent-700) / 1);
+  background-color: rgb(var(--bk-theme-accent-700) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk ._bk_debug-rect {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-accent-700) / 1) 10%, transparent);
+  }
+}
+.bk .bk-debug-icons {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 15px;
+  text-align: center;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+}
+:is(.bk .bk-debug-icons) .bk-icon {
+  padding: 10px;
+}
+:is(.bk .bk-debug-icons) svg {
+  aspect-ratio: 1 / 1;
+  height: auto;
+  width: 100%;
+}
+.bk .bk-debug-rects {
+  pointer-events: none;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 99999999999;
+  height: 100%;
+  width: 100%;
+}
+</style>

package/dist/runtime/editor/features/debug/Main.vue.d.ts

@@ -0,0 +1,7 @@
+import type { DebugLogger } from '#blokkli/editor/providers/debug';
+type __VLS_Props = {
+    logger: DebugLogger;
+};
+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;

package/dist/runtime/editor/features/debug/Rects/index.d.vue.ts

@@ -0,0 +1,3 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;