@blokkli/editor 2.0.0-alpha.48 → 2.0.0-alpha.49

package/dist/modules/charts/runtime/features/charts/Editor/index.vue

@@ -11,15 +11,15 @@
           </button>
         </div>
 
-        <ChartTypePicker v-model="data.type" />
+        <ChartTypePicker v-model="chartData.type" />
       </div>
 
       <ChartTypeOptions
         v-if="chartDef"
-        v-model:title="data.title"
+        v-model:title="chartData.title"
         :options="chartDef.editor.options"
-        :type-options="data.typeOptions || {}"
-        @update:type-options="data.typeOptions = $event"
+        :type-options="chartData.typeOptions || {}"
+        @update:type-options="chartData.typeOptions = $event"
       />
     </div>
 
@@ -55,18 +55,18 @@
       <div class="bk-chart-editor-section">
         <label class="bk-form-label">{{ $t("chartsData", "Data") }}</label>
         <DataTable
-          :categories="data.categories"
-          :series="data.series"
-          :category-colors="data.categoryColors"
+          :categories="chartData.categories"
+          :series="chartData.series"
+          :category-colors="chartData.categoryColors"
           :has-multiple-series="caps.hasMultipleSeries"
           :has-series-colors="caps.hasSeriesColors"
           :has-category-colors="caps.hasCategoryColors"
           :colors="COLORS"
           :remove-row="removeRow"
           :remove-series="removeSeries"
-          @update:categories="data.categories = $event"
-          @update:series="data.series = $event"
-          @update:category-colors="data.categoryColors = $event"
+          @update:categories="chartData.categories = $event"
+          @update:series="chartData.series = $event"
+          @update:category-colors="chartData.categoryColors = $event"
         />
         <div class="bk-chart-data-table-actions">
           <button type="button" class="bk-button bk-is-small" @click="addRow">
@@ -88,8 +88,8 @@
 
       <div class="bk-chart-editor-section">
         <FootnoteEditor
-          :footnotes="data.footnotes"
-          @update:footnotes="data.footnotes = $event"
+          :footnotes="chartData.footnotes"
+          @update:footnotes="chartData.footnotes = $event"
         />
       </div>
     </div>
@@ -111,51 +111,48 @@ import Preview from "./Preview/index.vue";
 import ChartTypeOptions from "./ChartTypeOptions/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const props = defineProps({
+  data: { type: [Object, null], required: true },
   uuid: { type: String, required: true },
   optionKey: { type: String, required: true }
 });
-const { $t, state } = useBlokkli();
+const { $t } = useBlokkli();
 function getCurrentData() {
-  const rawData = state.mutatedOptions[props.uuid]?.data || state.getFieldListItem(props.uuid)?.options?.data;
-  if (rawData) {
-    try {
-      const parsed = JSON.parse(rawData);
-      if (parsed && Array.isArray(parsed.series) && parsed.series.length > 0) {
-        const fallbackId = getFirstColorId(COLORS);
-        for (const series of parsed.series) {
-          if (!COLORS[series.color]) {
-            series.color = fallbackId;
-          }
+  if (props.data) {
+    const parsed = JSON.parse(JSON.stringify(props.data));
+    if (parsed && Array.isArray(parsed.series) && parsed.series.length > 0) {
+      const fallbackId = getFirstColorId(COLORS);
+      for (const series of parsed.series) {
+        if (!COLORS[series.color]) {
+          series.color = fallbackId;
         }
-        if (Array.isArray(parsed.categoryColors)) {
-          for (let i = 0; i < parsed.categoryColors.length; i++) {
-            if (!COLORS[parsed.categoryColors[i]]) {
-              parsed.categoryColors[i] = fallbackId;
-            }
+      }
+      if (Array.isArray(parsed.categoryColors)) {
+        for (let i = 0; i < parsed.categoryColors.length; i++) {
+          if (!COLORS[parsed.categoryColors[i]]) {
+            parsed.categoryColors[i] = fallbackId;
           }
-        } else {
-          parsed.categoryColors = parsed.categories.map(
-            (_, i) => {
-              const ids = Object.keys(COLORS);
-              return ids[i % ids.length] || fallbackId;
-            }
-          );
-        }
-        if (!Array.isArray(parsed.footnotes)) {
-          parsed.footnotes = [];
-        }
-        if (!parsed.typeOptions || typeof parsed.typeOptions !== "object") {
-          parsed.typeOptions = getDefaultTypeOptions(parsed.type);
         }
-        return parsed;
+      } else {
+        parsed.categoryColors = parsed.categories.map(
+          (_, i) => {
+            const ids = Object.keys(COLORS);
+            return ids[i % ids.length] || fallbackId;
+          }
+        );
+      }
+      if (!Array.isArray(parsed.footnotes)) {
+        parsed.footnotes = [];
+      }
+      if (!parsed.typeOptions || typeof parsed.typeOptions !== "object") {
+        parsed.typeOptions = getDefaultTypeOptions(parsed.type);
       }
-    } catch {
+      return parsed;
     }
   }
   return getDefaultChartData(COLORS);
 }
 const {
-  data,
+  data: chartData,
   canUndo,
   canRedo,
   undo,
@@ -168,16 +165,16 @@ const {
 } = useChartEditorState(getCurrentData(), COLORS);
 const autoUpdate = ref(true);
 const previewData = ref(
-  JSON.parse(JSON.stringify(data.value))
+  JSON.parse(JSON.stringify(chartData.value))
 );
 const isStale = ref(false);
 let debounceTimer = null;
 function refreshPreview() {
-  previewData.value = JSON.parse(JSON.stringify(data.value));
+  previewData.value = JSON.parse(JSON.stringify(chartData.value));
   isStale.value = false;
 }
 watch(
-  data,
+  chartData,
   () => {
     if (autoUpdate.value) {
       if (debounceTimer) clearTimeout(debounceTimer);
@@ -197,7 +194,7 @@ watch(autoUpdate, (enabled) => {
 onBeforeUnmount(() => {
   if (debounceTimer) clearTimeout(debounceTimer);
 });
-const chartDef = computed(() => getChartType(data.value.type, $t));
+const chartDef = computed(() => getChartType(chartData.value.type, $t));
 const caps = computed(() => {
   const def = chartDef.value;
   return {
@@ -207,21 +204,21 @@ const caps = computed(() => {
   };
 });
 const typeOptionsCache = {
-  ...data.value.typeOptions
+  ...chartData.value.typeOptions
 };
 watch(
-  () => data.value.type,
+  () => chartData.value.type,
   (type) => {
     const defaults = getDefaultTypeOptions(type);
     const merged = {};
     for (const key of Object.keys(defaults)) {
       merged[key] = key in typeOptionsCache ? typeOptionsCache[key] : defaults[key];
     }
-    data.value.typeOptions = merged;
+    chartData.value.typeOptions = merged;
   }
 );
 watch(
-  () => data.value.typeOptions,
+  () => chartData.value.typeOptions,
   (opts) => {
     if (opts) {
       Object.assign(typeOptionsCache, opts);
@@ -230,7 +227,7 @@ watch(
   { deep: true }
 );
 function getData() {
-  return data.value;
+  return chartData.value;
 }
 onBlokkliEvent("keyPressed", (e) => {
   if (e.code === "z" && e.meta) {

package/dist/modules/charts/runtime/features/charts/Editor/index.vue.d.ts

@@ -1,5 +1,6 @@
 import type { BlokkliChartData } from '../../../types.js';
 type __VLS_Props = {
+    data: BlokkliChartData | null;
     uuid: string;
     optionKey: string;
 };

package/dist/modules/drupal/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.BVregnEC.mjs';
+import { B as BlokkliModule } from '../../shared/editor.DsGJIlGn.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/modules/drupal/index.mjs

@@ -2,7 +2,7 @@ import { createResolver } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
 import { join } from 'pathe';
 import { isObjectType, isInterfaceType } from 'graphql';
-import { d as defineBlokkliModule } from '../../shared/editor.CGf7C_0M.mjs';
+import { defineBlokkliModule } from '../index.mjs';
 import { useGraphqlModuleContext } from 'nuxt-graphql-middleware/utils';
 
 function toPascalCase(text) {

package/dist/modules/index.d.mts

@@ -0,0 +1,7 @@
+export { b as Blokkli, B as BlokkliModule, d as defineBlokkliModule } from '../shared/editor.DsGJIlGn.mjs';
+import 'nuxt/schema';
+import 'consola';
+import '../../dist/global/types/definitions.js';
+import '../../dist/global/types/theme.js';
+import '@nuxt/kit';
+import '../../dist/global/types/features.js';

package/dist/{shared/editor.CGf7C_0M.mjs → modules/index.mjs}

@@ -7,4 +7,4 @@ function defineBlokkliModule(init) {
   };
 }
 
-export { defineBlokkliModule as d };
+export { defineBlokkliModule };

package/dist/modules/table-of-contents/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.BVregnEC.mjs';
+import { B as BlokkliModule } from '../../shared/editor.DsGJIlGn.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/modules/table-of-contents/index.mjs

@@ -1,5 +1,5 @@
 import { createResolver, addComponent } from '@nuxt/kit';
-import { d as defineBlokkliModule } from '../../shared/editor.CGf7C_0M.mjs';
+import { defineBlokkliModule } from '../index.mjs';
 import { fileURLToPath } from 'node:url';
 
 const index = defineBlokkliModule({

package/dist/modules/tailwind/index.d.mts

@@ -0,0 +1,5 @@
+import { Config } from 'tailwindcss';
+
+declare const tailwindConfig: Config;
+
+export { tailwindConfig };

package/dist/modules/tailwind/index.mjs

@@ -0,0 +1,2 @@
+export { default as tailwindConfig } from '../../chunks/tailwindConfig.mjs';
+import 'tailwindcss/plugin';

package/dist/runtime/editor/components/NestedEditorOverlay/index.vue

@@ -90,10 +90,10 @@ const backLabel = computed(() => {
   if (!entityLabel) {
     return $t("libraryItemEditOverlayBack", "Back to page");
   }
-  return $t("libraryItemEditOverlayBackWithPage", 'Back to "@label"').replace(
-    "@label",
-    entityLabel
-  );
+  return $t(
+    "libraryItemEditOverlayBackWithPage",
+    'Save and go back to "@label"'
+  ).replace("@label", entityLabel);
 });
 const FADE_DURATION = 150;
 const EASING = "cubic-bezier(0.56, 0.04, 0.25, 1)";

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

@@ -118,7 +118,7 @@ defineDropHandler("new", {
       field.hostEntityBundle
     );
     const addBehaviour = definition?.editor?.addBehaviour || "form";
-    if (definition?.editor?.disableEdit || addBehaviour === "no-form" || addBehaviour.startsWith("editable:") || !adapter.formFrameBuilder) {
+    if (definition?.editor?.disableEdit || addBehaviour === "no-form" || addBehaviour.startsWith("editable:") || addBehaviour.startsWith("complex-option:") || !adapter.formFrameBuilder) {
       await state.mutateWithLoadingState(
         () => adapter.addNewBlock({
           bundle: itemBundle,

package/dist/runtime/editor/features/anchors/Overlay/index.vue

@@ -11,16 +11,27 @@
 </template>
 
 <script setup>
-import { useBlokkli, useRoute, computed } from "#imports";
+import { useBlokkli, useRoute, ref, onMounted } from "#imports";
 import { PluginBlockIndicator } from "#blokkli/editor/plugins";
 import { emitMessage } from "#blokkli/editor/events";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
 const route = useRoute();
-const { $t, adapter, dom } = useBlokkli();
-const items = computed(() => {
+const { $t, adapter, ui } = useBlokkli();
+function getAnchorItems() {
   const anchorItems = [];
-  for (const entry of Object.entries(dom.registeredBlocks.value)) {
-    const uuid = entry[0];
-    const element = entry[1];
+  const nodes = [...ui.providerElement.querySelectorAll("[id]")];
+  for (const element of nodes) {
+    if (!(element instanceof HTMLElement)) {
+      continue;
+    }
+    const block = element.closest("[data-bk-uuid]");
+    if (!(block instanceof HTMLElement)) {
+      continue;
+    }
+    const uuid = block.dataset.bkUuid;
+    if (!uuid) {
+      continue;
+    }
     if (!element || !uuid) {
       continue;
     }
@@ -32,7 +43,8 @@ const items = computed(() => {
     }
   }
   return anchorItems;
-});
+}
+const items = ref([]);
 function getLinkForClipboard(item) {
   if (adapter.buildAnchorLink) {
     return adapter.buildAnchorLink(item.id, item.uuid);
@@ -50,4 +62,10 @@ function onClick(item) {
     emitMessage(message, "success", void 0, true);
   }
 }
+onBlokkliEvent("state:reloaded", () => {
+  items.value = getAnchorItems();
+});
+onMounted(() => {
+  items.value = getAnchorItems();
+});
 </script>

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

@@ -0,0 +1,98 @@
+<template>
+  <NestedEditorOverlay
+    v-if="uuid"
+    :uuid
+    :title="config.editorTitle"
+    :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 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/dragging-overlay/index.vue

@@ -228,28 +228,44 @@ onBlokkliEvent("state:reloaded", async function() {
   }
   const allSelected = [...selection.uuids.value, newBlock.uuid];
   eventBus.emit("select", allSelected);
-  if (!dropResult?.focusEditable) {
-    return;
-  }
   const definition = definitions.getBlockDefinition(
     newBlock.bundle,
     newBlock.fieldListType
   );
-  if (!definition?.editor?.addBehaviour?.startsWith("editable:")) {
+  const addBehaviour = definition?.editor?.addBehaviour;
+  if (addBehaviour?.startsWith("complex-option:")) {
+    const optionKey = addBehaviour.split(":")[1];
+    if (!optionKey) {
+      return;
+    }
+    const option = definition?.options?.[optionKey];
+    if (option?.type !== "json" || !option.dataType) {
+      return;
+    }
+    eventBus.emit("option:edit-complex", {
+      uuid: newUuid,
+      key: optionKey,
+      dataType: option.dataType
+    });
     return;
   }
-  const editableField = definition.editor.addBehaviour.split(":")[1];
-  if (!editableField) {
+  if (!dropResult?.focusEditable) {
     return;
   }
-  const editableFieldElement = directive.getEditablesForBlock(newUuid).find((v) => v.fieldName === editableField);
-  if (!editableFieldElement) {
-    return;
+  if (addBehaviour?.startsWith("editable:")) {
+    const editableField = addBehaviour.split(":")[1];
+    if (!editableField) {
+      return;
+    }
+    const editableFieldElement = directive.getEditablesForBlock(newUuid).find((v) => v.fieldName === editableField);
+    if (!editableFieldElement) {
+      return;
+    }
+    eventBus.emit("editable:open", {
+      fieldName: editableField,
+      uuid: newUuid
+    });
   }
-  eventBus.emit("editable:open", {
-    fieldName: editableField,
-    uuid: newUuid
-  });
 });
 onBlokkliEvent("dragging:move", (e) => {
   mouseX.value = e.x;

package/dist/runtime/editor/translations/de.json

@@ -1267,10 +1267,6 @@
     "source": "Edit chart...",
     "translation": "Diagramm bearbeiten..."
   },
-  "chartsEditorSaveError": {
-    "source": "The chart could not be saved.",
-    "translation": "Das Diagramm konnte nicht gespeichert werden."
-  },
   "chartsEditorTitle": {
     "source": "Edit chart",
     "translation": "Diagramm bearbeiten"
@@ -1523,6 +1519,10 @@
     "source": "Shows all comments for the current page.",
     "translation": "Zeigt alle Kommentare auf der aktuellen Seite an."
   },
+  "complexOptionsSaveError": {
+    "source": "The data could not be saved.",
+    "translation": ""
+  },
   "conversionsConvertTo": {
     "source": "Convert to: @bundle",
     "translation": "Konvertieren zu: @bundle"
@@ -1636,7 +1636,7 @@
     "translation": "Dieser Blocktyp ist in diesem Feld nicht erlaubt."
   },
   "edit": {
-    "source": "Edit...",
+    "source": "Edit",
     "translation": "Bearbeiten..."
   },
   "editDisabledByDefinition": {
@@ -1851,14 +1851,6 @@
     "source": "Changelog",
     "translation": "Änderungsprotokoll"
   },
-  "feature_charts_description": {
-    "source": "Add and edit interactive charts.",
-    "translation": "Interaktive Diagramme hinzufügen und bearbeiten."
-  },
-  "feature_charts_label": {
-    "source": "Charts",
-    "translation": "Diagramme"
-  },
   "feature_clipboard_description": {
     "source": "Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.",
     "translation": "Stellt Zwischenablage-Integration bereit zum Kopieren/Einfügen von bestehenden Blöcken oder zum Einfügen von unterstützten Inhalten wie Text oder Bildern."
@@ -1883,6 +1875,14 @@
     "source": "Comments",
     "translation": "Kommentare"
   },
+  "feature_complex-options_description": {
+    "source": "Edit complex option types such as charts.",
+    "translation": ""
+  },
+  "feature_complex-options_label": {
+    "source": "Complex Options",
+    "translation": ""
+  },
   "feature_conversions_description": {
     "source": "Provides block actions to convert one or more blocks to a different bundle.",
     "translation": "Stellt Block-Aktionen bereit, um einen oder mehrere Blöcke in einen anderen Typ zu konvertieren."
@@ -2468,8 +2468,8 @@
     "translation": "Zurück zur Seite"
   },
   "libraryItemEditOverlayBackWithPage": {
-    "source": "Back to \"@label\"",
-    "translation": "Zurück zu «@label»"
+    "source": "Save and go back to \"@label\"",
+    "translation": "Speichern und zurück zu «@label»"
   },
   "libraryItemEditOverlayTitle": {
     "source": "Edit reusable block",

package/dist/runtime/editor/translations/fr.json

@@ -1267,10 +1267,6 @@
     "source": "Edit chart...",
     "translation": ""
   },
-  "chartsEditorSaveError": {
-    "source": "The chart could not be saved.",
-    "translation": ""
-  },
   "chartsEditorTitle": {
     "source": "Edit chart",
     "translation": ""
@@ -1523,6 +1519,10 @@
     "source": "Shows all comments for the current page.",
     "translation": ""
   },
+  "complexOptionsSaveError": {
+    "source": "The data could not be saved.",
+    "translation": ""
+  },
   "conversionsConvertTo": {
     "source": "Convert to: @bundle",
     "translation": ""
@@ -1636,7 +1636,7 @@
     "translation": ""
   },
   "edit": {
-    "source": "Edit...",
+    "source": "Edit",
     "translation": "Modifier"
   },
   "editDisabledByDefinition": {
@@ -1851,14 +1851,6 @@
     "source": "Changelog",
     "translation": ""
   },
-  "feature_charts_description": {
-    "source": "Add and edit interactive charts.",
-    "translation": ""
-  },
-  "feature_charts_label": {
-    "source": "Charts",
-    "translation": ""
-  },
   "feature_clipboard_description": {
     "source": "Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.",
     "translation": "Fournit l'intégration du presse-papiers pour copier/coller des blocs existants ou coller du contenu pris en charge comme du texte ou des images."
@@ -1883,6 +1875,14 @@
     "source": "Comments",
     "translation": "Commentaires"
   },
+  "feature_complex-options_description": {
+    "source": "Edit complex option types such as charts.",
+    "translation": ""
+  },
+  "feature_complex-options_label": {
+    "source": "Complex Options",
+    "translation": ""
+  },
   "feature_conversions_description": {
     "source": "Provides block actions to convert one or more blocks to a different bundle.",
     "translation": "Fournit des actions de bloc pour convertir un ou plusieurs blocs vers un type différent."
@@ -2468,7 +2468,7 @@
     "translation": ""
   },
   "libraryItemEditOverlayBackWithPage": {
-    "source": "Back to \"@label\"",
+    "source": "Save and go back to \"@label\"",
     "translation": ""
   },
   "libraryItemEditOverlayTitle": {