@blokkli/editor 2.0.0-alpha.53 → 2.0.0-alpha.55

package/dist/runtime/editor/features/droppable-field-edit/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <Teleport v-if="ui.mainLayoutElement.value" :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="caret-tooltip" :enabled="hasTransition">
+      <Overlay
+        v-if="activeField"
+        v-bind="activeField"
+        :key="activeFieldKey"
+        @close="close"
+      />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  computed,
+  ref,
+  useBlokkli,
+  defineBlokkliFeature,
+  watch,
+  defineAsyncComponent
+} from "#imports";
+import {
+  onBlokkliEvent,
+  defineDropAreas,
+  defineCommands,
+  defineDropHandler
+} from "#blokkli/editor/composables";
+import { itemEntityType } from "#blokkli-build/config";
+import { falsy } from "#blokkli/helpers";
+import { BlokkliTransition } from "#blokkli/editor/components";
+const Overlay = defineAsyncComponent(() => import("./Overlay/index.vue"));
+defineBlokkliFeature({
+  id: "droppable-field-edit",
+  icon: "bk_mdi_edit",
+  label: "Droppable Field Edit",
+  description: "Editing mode for multi-value droppable fields (add, remove, reorder items).",
+  requiredAdapterMethods: ["getDroppableFieldItems", "updateDroppableField"]
+});
+const {
+  selection,
+  ui,
+  directive,
+  types,
+  state,
+  adapter,
+  fieldValue,
+  permissions,
+  $t
+} = useBlokkli();
+const activeField = ref(null);
+const hasTransition = ref(false);
+const activeFieldKey = computed(() => {
+  if (!activeField.value) {
+    return "";
+  }
+  return activeField.value.entity.uuid + activeField.value.fieldName;
+});
+function openField(field) {
+  hasTransition.value = !activeField.value;
+  selection.activeDroppableFieldLabel.value = field.config.label;
+  activeField.value = field;
+}
+function close() {
+  activeField.value = null;
+  selection.activeDroppableFieldLabel.value = null;
+}
+defineCommands(() => {
+  if (selection.items.value.length !== 1) {
+    return [];
+  }
+  const block = selection.items.value[0];
+  return directive.getDroppableElements().filter(
+    (field) => field.uuid === block.uuid && field.type === itemEntityType
+  ).map((field) => {
+    const config = types.getDroppableFieldConfig(field.fieldName, field);
+    if (config.type !== "reference") {
+      return;
+    }
+    return {
+      id: `feature:droppable-field:edit:${field.uuid}:${field.fieldName}`,
+      group: "selection",
+      label: $t("droppableFieldCommandEdit", 'Edit field "@name"').replace(
+        "@name",
+        config.label
+      ),
+      icon: "bk_mdi_edit",
+      disabled: false,
+      callback: () => openField({
+        fieldName: field.fieldName,
+        entity: {
+          type: field.type,
+          bundle: field.bundle,
+          uuid: field.uuid
+        },
+        element: field.element,
+        config
+      })
+    };
+  }).filter(falsy);
+});
+onBlokkliEvent("droppable:open", (e) => {
+  if (!state.canEdit.value) {
+    return;
+  }
+  const droppableElements = directive.getDroppableElements();
+  const field = droppableElements.find(
+    (f) => f.uuid === e.uuid && f.fieldName === e.fieldName
+  );
+  if (!field) {
+    return;
+  }
+  const config = types.getDroppableFieldConfig(e.fieldName, field);
+  if (config.type !== "reference") {
+    return;
+  }
+  openField({
+    fieldName: e.fieldName,
+    entity: {
+      type: field.type,
+      bundle: field.bundle,
+      uuid: field.uuid
+    },
+    element: field.element,
+    config
+  });
+});
+watch(selection.activeDroppableFieldLabel, (v) => {
+  if (!v && activeField.value) {
+    hasTransition.value = true;
+    activeField.value = null;
+  }
+});
+watch(activeField, (v) => {
+  if (!v && selection.activeDroppableFieldLabel.value) {
+    selection.activeDroppableFieldLabel.value = null;
+  }
+});
+defineDropAreas((dragItems) => {
+  if (activeField.value) {
+    return;
+  }
+  if (!adapter.updateDroppableField || !adapter.getDroppableFieldItems) {
+    return;
+  }
+  if (dragItems.length !== 1) {
+    return;
+  }
+  const item = dragItems[0];
+  if (item.itemType !== "media_library") {
+    return;
+  }
+  return directive.getDroppableElements().map((field) => {
+    if (field.type !== itemEntityType) {
+      return;
+    }
+    const config = types.getDroppableFieldConfig(field.fieldName, field);
+    if (config.cardinality === 1) {
+      return;
+    }
+    const allowedBundles = config.allowed.find(
+      (v) => v.type === "media"
+    )?.bundles;
+    if (!allowedBundles || !allowedBundles.includes(item.mediaBundle)) {
+      return;
+    }
+    const currentCount = fieldValue.getDroppableFieldCount(
+      field.fieldName,
+      field
+    );
+    if (config.cardinality > 0 && currentCount >= config.cardinality) {
+      return;
+    }
+    const host = {
+      uuid: field.uuid,
+      type: field.type,
+      fieldName: field.fieldName
+    };
+    return {
+      id: `droppable-field-add:${field.uuid}:${field.fieldName}`,
+      label: $t("droppableFieldAdd", "Add to @field").replace(
+        "@field",
+        config.label
+      ),
+      element: field.element,
+      icon: "bk_mdi_add",
+      onDrop: () => {
+        const currentIds = fieldValue.getDroppableFieldIds(
+          field.fieldName,
+          field
+        );
+        const itemIds = [...currentIds, item.mediaId];
+        return state.mutateWithLoadingState(
+          () => adapter.updateDroppableField({ host, itemIds }),
+          $t("droppableFieldAddFailed", "Failed to add item.")
+        );
+      }
+    };
+  }).filter(falsy);
+});
+defineDropHandler("droppable_field_item", {
+  resolveBundles({ items, field }) {
+    const item = items[0];
+    return field.allowedBundles.filter(
+      (b) => item.itemBundles.includes(b) && permissions.checkBlockBundlePermission(b, "add")
+    );
+  },
+  async execute({ items, host, afterUuid, bundle }) {
+    if (!adapter.addEntityReferenceBlock) {
+      throw new Error('Adapter does not implement "addEntityReferenceBlock".');
+    }
+    const item = items[0];
+    await state.mutateWithLoadingState(
+      () => adapter.addEntityReferenceBlock({
+        entityId: item.entityId,
+        entityType: item.entityType,
+        entityBundle: item.entityBundle,
+        host,
+        bundle,
+        afterUuid
+      })
+    );
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "DroppableFieldEdit"
+};
+</script>

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

@@ -0,0 +1,70 @@
+import type { BlokkliItemHost } from '#blokkli/editor/types/field';
+export type DroppableFieldItem = {
+    id: string;
+    entityType: string;
+    bundle: string;
+    label: string;
+    thumbnailSrc?: string;
+    /**
+     * The block bundles that can be produced from this referenced entity when
+     * dropped onto the page. Mirrors `MediaLibraryItem.targetBundles`.
+     */
+    targetBundles: string[];
+};
+export type DroppableFieldGetItemsEvent = {
+    host: BlokkliItemHost;
+};
+export type DroppableFieldUpdateEvent = {
+    host: BlokkliItemHost;
+    /**
+     * The new ordered list of entity IDs the field should hold. Missing IDs are
+     * removed; unknown IDs are attached.
+     */
+    itemIds: string[];
+};
+export interface DraggableDroppableFieldItem {
+    itemType: 'droppable_field_item';
+    element: () => HTMLElement;
+    itemBundles: string[];
+    entityId: string;
+    entityType: string;
+    entityBundle: string;
+    label: string;
+    thumbnailSrc?: string;
+}
+export type AddEntityReferenceBlockEvent = {
+    entityId: string;
+    entityType: string;
+    entityBundle: string;
+    host: BlokkliItemHost;
+    bundle: string;
+    afterUuid: string | null;
+};
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Get all items of a multi-value droppable field.
+         */
+        getDroppableFieldItems?: (e: DroppableFieldGetItemsEvent) => Promise<DroppableFieldItem[]>;
+        /**
+         * Atomically update the items of a multi-value droppable field.
+         *
+         * `itemIds` is the complete desired state as an ordered list of entity
+         * IDs. IDs already in the field are kept (and reordered); missing IDs are
+         * removed; new IDs are attached.
+         */
+        updateDroppableField?: (e: DroppableFieldUpdateEvent) => Promise<MutationResponseLike<T>>;
+        /**
+         * Create a new block by referencing an existing entity.
+         *
+         * Generic counterpart to `mediaLibraryAddBlock` / `addContentSearchItem` —
+         * all three route to the same Drupal `pbAddEntityReference` mutation.
+         */
+        addEntityReferenceBlock?: (e: AddEntityReferenceBlockEvent) => Promise<MutationResponseLike<T>> | undefined;
+    }
+}
+declare module '#blokkli/editor/types/draggable' {
+    interface DraggableItemTypes {
+        droppable_field_item: DraggableDroppableFieldItem;
+    }
+}

package/dist/runtime/editor/features/editable-field/Overlay/Frame/index.d.vue.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     fieldName: string;
     host: EntityContext;
     initialHeight: number;
+    isFullscreen: boolean;
 };
 /**
  * Push a new value into the iframe's editor.

package/dist/runtime/editor/features/editable-field/Overlay/Frame/index.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="bk-editable-field-frame">
+  <div
+    class="bk-editable-field-frame"
+    :class="{
+  'bk-is-fullscreen': isFullscreen
+}"
+  >
     <iframe
       ref="iframe"
-      :style="{ height: Math.max(height, 400) + 'px' }"
+      :style
       :src="url"
+      class="_bk_block _bk_w-full"
       @load="onIframeLoad"
     />
   </div>
@@ -26,10 +32,21 @@ const props = defineProps({
   type: { type: String, required: true },
   fieldName: { type: String, required: true },
   host: { type: Object, required: true },
-  initialHeight: { type: Number, required: true }
+  initialHeight: { type: Number, required: true },
+  isFullscreen: { type: Boolean, required: true }
 });
 const modelValue = defineModel({ type: String, ...{ required: true } });
 const emit = defineEmits(["formatted"]);
+const style = computed(() => {
+  if (props.isFullscreen) {
+    return {
+      height: "100%"
+    };
+  }
+  return {
+    height: Math.max(height.value, 400) + "px"
+  };
+});
 const iframe = useTemplateRef("iframe");
 function onIframeLoad() {
   if (!iframe.value || !PROPAGATE_WHEEL) {
@@ -124,22 +141,18 @@ onBeforeUnmount(() => {
 </script>
 
 <style>
-.bk .bk-editable-field-frame iframe {
-  display: block;
-  width: 100%;
-  max-height: calc(100vh - 500px)
-}
-
-  @media (min-width: 1024px) {
-.bk .bk-editable-field-frame iframe {
-    min-width: 700px;
-    min-height: 400px
-  }
-  }
-
-  @media (min-width: 1280px) {
-.bk .bk-editable-field-frame iframe {
-    min-width: 700px
-  }
-  }
+.bk .bk-editable-field-frame:not(.bk-is-fullscreen) iframe {
+      max-height: calc(100vh - 500px);
+    }
+      @media (min-width: 1024px) {
+.bk .bk-editable-field-frame:not(.bk-is-fullscreen) iframe {
+            min-width: 700px;
+        min-height: 400px;
+      }
+      }
+      @media (min-width: 1280px) {
+.bk .bk-editable-field-frame:not(.bk-is-fullscreen) iframe {
+            min-width: 700px;
+      }
+      }
 </style>

package/dist/runtime/editor/features/editable-field/Overlay/Frame/index.vue.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     fieldName: string;
     host: EntityContext;
     initialHeight: number;
+    isFullscreen: boolean;
 };
 /**
  * Push a new value into the iframe's editor.

package/dist/runtime/editor/features/editable-field/Overlay/Plaintext/index.d.vue.ts

@@ -8,13 +8,13 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    discard: (...args: any[]) => void;
     save: (...args: any[]) => void;
+    discard: (...args: any[]) => void;
     "update:modelValue": (value: string) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    onDiscard?: ((...args: any[]) => any) | undefined;
     onSave?: ((...args: any[]) => any) | undefined;
+    onDiscard?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/editable-field/Overlay/Plaintext/index.vue.d.ts

@@ -8,13 +8,13 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    discard: (...args: any[]) => void;
     save: (...args: any[]) => void;
+    discard: (...args: any[]) => void;
     "update:modelValue": (value: string) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    onDiscard?: ((...args: any[]) => any) | undefined;
     onSave?: ((...args: any[]) => any) | undefined;
+    onDiscard?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/editable-field/Overlay/ReadabilityIndicator/ChunkOverlay.vue

@@ -41,7 +41,7 @@ const chunks = ref([]);
 const stale = ref(false);
 let timeout = null;
 let lastFullUpdate = 0;
-const scoreLabel = computed(() => readability.analyzer.value.scoreLabel);
+const scoreLabel = readability.scoreLabel;
 function formatScore(value) {
   return readability.formatScore(value);
 }

package/dist/runtime/editor/features/editable-field/Overlay/ReadabilityIndicator/index.vue

@@ -9,7 +9,7 @@
       :class="'bk-is-' + readabilityBand"
     />
     <span
-      >{{ readability.analyzer.value.scoreLabel }}
+      >{{ readability.scoreLabel.value }}
       {{ readability.formatScore(readabilityScore) }}</span
     >
     <Tooltip
@@ -18,7 +18,7 @@
   $t(
     'readabilityTooltipDescription',
     '@label measures how easy the text is to read.'
-  ).replace('@label', readability.analyzer.value.scoreLabel)
+  ).replace('@label', readability.scoreLabel.value)
 "
       :description="
   fieldType === 'markup' ? $t(
@@ -100,13 +100,9 @@ const readabilityScore = ref(null);
 const tooShort = ref(false);
 const stale = ref(false);
 let timeout = null;
-const scaleInfo = computed(() => {
-  const analyzer = readability.analyzer.value;
-  if (analyzer.getScaleInfo) {
-    return analyzer.getScaleInfo(context.value.language);
-  }
-  return null;
-});
+const scaleInfo = computed(
+  () => readability.getScaleInfo(context.value.language)
+);
 const thresholdPositions = computed(() => {
   const info = scaleInfo.value;
   if (!info) return { first: 33, second: 66 };
@@ -128,10 +124,7 @@ const minWordsText = computed(
   () => $t(
     "readabilityTooShortTooltip",
     "Text needs at least @count words for readability analysis."
-  ).replace(
-    "@count",
-    String(readability.analyzer.value.minWordsForConfidence || 100)
-  )
+  ).replace("@count", String(readability.minWordsForConfidence.value || 100))
 );
 async function analyze(text) {
   if (!text.trim()) {

package/dist/runtime/editor/features/editable-field/Overlay/index.vue

@@ -44,6 +44,7 @@
           :field-name="fieldName"
           :host="host"
           :initial-height="scrollHeight"
+          :is-fullscreen
           @formatted="onFormattedValue"
         />
 
@@ -152,7 +153,8 @@ const {
   context,
   fieldValue,
   element: elementProvider,
-  storage
+  storage,
+  readability
 } = useBlokkli();
 const props = defineProps({
   fieldName: { type: String, required: true },
@@ -209,7 +211,7 @@ const errorText = computed(() => {
   return void 0;
 });
 const isReadabilityField = computed(
-  () => props.config.type === "plain" || props.config.type === "markup" || props.config.type === "frame"
+  () => readability.isAvailable.value && (props.config.type === "plain" || props.config.type === "markup" || props.config.type === "frame")
 );
 const readabilityFieldType = computed(
   () => props.config.type === "frame" || props.config.type === "markup" ? "markup" : "plain"
@@ -282,8 +284,6 @@ async function save() {
   }
   isClosing.value = true;
   if (hasChanged.value) {
-    console.log("modelValue", modelValue.value);
-    console.log("originalText", originalText.value);
     if (errorText.value) {
       restoreOriginalState();
     } else {

package/dist/runtime/editor/features/fragments/index.vue

@@ -12,18 +12,23 @@
 </template>
 
 <script setup>
-import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import FragmentsDialog from "./Dialog/index.vue";
+import {
+  ref,
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  defineAsyncComponent
+} from "#imports";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import { defineAddAction } from "#blokkli/editor/composables";
 import { fragmentBlockBundle } from "#blokkli-build/config";
+const FragmentsDialog = defineAsyncComponent(() => import("./Dialog/index.vue"));
 const { adapter } = defineBlokkliFeature({
   id: "fragments",
   icon: "bk_mdi_newspaper",
   label: "Fragments",
   description: "Provides way to add content fragments defined by the frontend.",
-  requiredAdapterMethods: ["fragmentsAddBlock"],
-  dependencies: ["add-list"]
+  requiredAdapterMethods: ["fragmentsAddBlock"]
 });
 const { state, $t, types, dom, ui, permissions } = useBlokkli();
 const canAddFragment = computed(

package/dist/runtime/editor/features/help/index.vue

@@ -26,9 +26,14 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  defineAsyncComponent
+} from "#imports";
 import { PluginSidebar } from "#blokkli/editor/plugins";
-import Shortcuts from "./Shortcuts/index.vue";
+const Shortcuts = defineAsyncComponent(() => import("./Shortcuts/index.vue"));
 defineBlokkliFeature({
   id: "help",
   icon: "bk_mdi_help",

package/dist/runtime/editor/features/highlights/Renderer/index.vue

@@ -31,12 +31,6 @@
 
 <script setup>
 import { useBlokkli, computed, ref } from "#imports";
-import {
-  setBuffersAndAttributes,
-  drawBufferInfo,
-  setUniforms,
-  createBufferInfoFromArrays
-} from "twgl.js";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
@@ -129,8 +123,8 @@ class HighlightsRectangleBufferCollector extends RectangleBufferCollector {
       this.activeData.push(a);
     }
   }
-  createBufferInfo(gl) {
-    return createBufferInfoFromArrays(gl, {
+  createBufferInfo(gl, twgl) {
+    return twgl.createBufferInfoFromArrays(gl, {
       a_position: {
         numComponents: 3,
         data: this.positions,
@@ -179,7 +173,7 @@ class HighlightsRectangleBufferCollector extends RectangleBufferCollector {
       indices: this.indices
     });
   }
-  getBufferInfo(gl, force) {
+  getBufferInfo(gl, twgl, force) {
     const activeId = ui.activeHighlightId.value;
     const key = activeId + "_" + groups.value.map((group, index) => {
       const colors = group.highlights.map((h) => h.color).join(",");
@@ -234,29 +228,29 @@ class HighlightsRectangleBufferCollector extends RectangleBufferCollector {
       }
       this.prevKey = key;
     }
-    if (hasChanged && gl) {
-      this.bufferInfo = this.createBufferInfo(gl);
+    if (hasChanged && gl && twgl) {
+      this.bufferInfo = this.createBufferInfo(gl, twgl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
 }
-const { collector } = defineRenderer("highlights-overlay", {
+const { collector } = await defineRenderer("highlights-overlay", {
   zIndex: 500,
   collector: () => new HighlightsRectangleBufferCollector(),
   program: () => ({ shaders: [vs, fs] }),
   enabled: () => !selection.isMultiSelecting.value && !selection.isDragging.value && !ui.isChangingOptions.value && !selection.activeEditableLabel.value && !ui.isApproving.value,
-  render: (_ctx, gl, program) => {
+  render: (_ctx, gl, program, twgl) => {
     gl.useProgram(program.program);
-    const { info } = collector.getBufferInfo(gl);
+    const { info } = collector.getBufferInfo(gl, twgl);
     if (!info) {
       return;
     }
-    setUniforms(program, {
+    twgl.setUniforms(program, {
       u_opacity: 1
     });
     animation.setSharedUniforms(gl, program);
-    setBuffersAndAttributes(gl, program, info);
-    drawBufferInfo(gl, info, gl.TRIANGLES);
+    twgl.setBuffersAndAttributes(gl, program, info);
+    twgl.drawBufferInfo(gl, info, gl.TRIANGLES);
   },
   renderFallback: (ctx, ctx2d) => {
     collector.getBufferInfo();

package/dist/runtime/editor/features/history/index.vue

@@ -48,11 +48,12 @@ import {
   watch,
   defineBlokkliFeature,
   onMounted,
-  onBeforeUnmount
+  onBeforeUnmount,
+  defineAsyncComponent
 } from "#imports";
 import { PluginSidebar, PluginToolbarButton } from "#blokkli/editor/plugins";
-import HistoryList from "./List/index.vue";
 import { MOUSE_BUTTON } from "#blokkli/editor/helpers/dom";
+const HistoryList = defineAsyncComponent(() => import("./List/index.vue"));
 const { adapter, settings } = defineBlokkliFeature({
   id: "history",
   icon: "bk_mdi_history",