@blokkli/editor 2.0.0-alpha.19 → 2.0.0-alpha.20

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.19",
+  "version": "2.0.0-alpha.20",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -15,7 +15,7 @@ import fs from 'node:fs';
 import { defu, createDefu } from 'defu';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.19";
+const version = "2.0.0-alpha.20";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {

package/dist/modules/drupal/graphql/base/fragment.paragraphsFieldItem.graphql

@@ -2,6 +2,7 @@ fragment paragraphsFieldItem on Paragraph {
   uuid
   bundle: entityBundle
   options: paragraphsBlokkliOptions
+  isVisible: paragraphsBlokkliIsVisible
   editContext: paragraphsBlokkliEditContext {
     ...paragraphsBlokkliParagraphEditContext
   }

package/dist/runtime/components/BlokkliEditable.vue

@@ -22,7 +22,7 @@ import {
 } from "#blokkli/helpers/symbols";
 const props = defineProps({
   name: { type: String, required: true },
-  value: { type: String, required: true },
+  value: { type: String, required: false, default: "" },
   tag: { type: String, required: false, default: "div" }
 });
 defineSlots();
@@ -36,7 +36,7 @@ const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
 if (!entity) {
   throw new Error("Missing entity context.");
 }
-const renderedValue = computed(() => valueOverride.value || props.value);
+const renderedValue = computed(() => valueOverride.value || props.value || "");
 const onEditableUpdateValue = (e) => {
   if (e.name === props.name && e.entityUuid === entity.uuid) {
     valueOverride.value = e.value;

package/dist/runtime/components/BlokkliEditable.vue.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     name: string;
-    value: string;
+    value?: string;
     tag?: string;
 };
 type __VLS_Slots = {
@@ -9,6 +9,7 @@ type __VLS_Slots = {
     }): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    value: string;
     tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/BlokkliField.vue

@@ -4,23 +4,23 @@
     :is="DraggableList"
     v-if="DraggableList && isEditing && canEdit && !isInReusable && entity"
     :list="filteredList"
-    :name="name"
-    :entity="entity"
-    :field-key="fieldKey"
-    :allowed-fragments="allowedFragments"
-    :nesting-level="nestingLevel"
-    :drop-alignment="dropAlignment"
-    :field-list-type="fieldListType"
+    :name
+    :entity
+    :field-key
+    :allowed-fragments
+    :nesting-level
+    :drop-alignment
+    :field-list-type
     :class="[
   attrs.class,
   listClass,
   editClass,
   { [nonEmptyClass]: filteredList.length }
 ]"
-    :is-nested="isNested"
+    :is-nested
     :language="providerEntity?.language"
-    :proxy-mode="proxyMode"
-    :tag="tag"
+    :proxy-mode
+    :tag
     :global-proxy-mode="!!isGlobalProxyMode"
     :should-render-item="shouldRenderItem"
   />
@@ -81,6 +81,20 @@ if (import.meta.hot) {
   import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
   });
 }
+const props = defineProps({
+  name: { type: String, required: true },
+  list: { type: [Array, Object, null], required: false, default: () => [] },
+  tag: { type: String, required: false, default: "div" },
+  fieldListType: { type: null, required: false, default: "default" },
+  editOnly: { type: Boolean, required: false },
+  listClass: { type: [String, Object, Array], required: false, default: "" },
+  editClass: { type: [String, Object, Array], required: false, default: "" },
+  nonEmptyClass: { type: String, required: false, default: "" },
+  allowedFragments: { type: null, required: false, default: () => [] },
+  dropAlignment: { type: String, required: false, default: void 0 },
+  proxyMode: { type: Boolean, required: false },
+  shouldRenderItem: { type: Function, required: false, default: void 0 }
+});
 const DraggableList = inject(
   INJECT_EDIT_FIELD_LIST_COMPONENT,
   null
@@ -116,26 +130,12 @@ if (!providerEntity) {
     "Missing bl\xF6kkli injection: " + INJECT_PROVIDER_CONTEXT.toString()
   );
 }
-const props = defineProps({
-  name: { type: String, required: true },
-  list: { type: [Array, Object, null], required: false, default: () => [] },
-  tag: { type: String, required: false, default: "div" },
-  fieldListType: { type: null, required: false, default: "default" },
-  editOnly: { type: Boolean, required: false },
-  listClass: { type: String, required: false, default: "" },
-  editClass: { type: String, required: false, default: "" },
-  nonEmptyClass: { type: String, required: false, default: "" },
-  allowedFragments: { type: Array, required: false, default: () => [] },
-  dropAlignment: { type: String, required: false, default: void 0 },
-  proxyMode: { type: Boolean, required: false },
-  shouldRenderItem: { type: Function, required: false, default: void 0 }
-});
 const canEdit = ref(true);
 const fieldKey = computed(() => {
   if (canEdit.value) {
     return entity.uuid + ":" + props.name;
   }
-  return void 0;
+  return "";
 });
 const fieldListType = computed(() => props.fieldListType);
 function filterVisible(item) {
@@ -145,6 +145,9 @@ function filterVisible(item) {
   if (isEditing) {
     return true;
   }
+  if (!item.isVisible) {
+    return false;
+  }
   const isVisible = isVisibleByOptions(item, providerEntity.value.language);
   const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
   return isVisible && isVisibleCustom;

package/dist/runtime/components/BlokkliField.vue.d.ts

@@ -1,27 +1,63 @@
 import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import type { FieldListItem, FieldDropAlignment } from '#blokkli/types';
+import type { FieldListItem, FieldDropAlignment, VueClassProp } from '#blokkli/types';
 import type { ValidFieldListTypes, FieldListItemTyped } from '#blokkli-build/generated-types';
-type __VLS_Slots = {
-    default(props: {
-        items: FieldListItemTyped[];
-    }): any;
-    after(props: {
-        items: FieldListItemTyped[];
-    }): any;
-};
 type __VLS_Props = {
+    /**
+     * The name of the field.
+     */
     name: string;
+    /**
+     * The field list items. Can be an array or a single item, also allows nullable values in an array.
+     */
     list?: Array<FieldListItem | null | undefined> | FieldListItem | null;
+    /**
+     * The tag to use for rendering the root element.
+     */
     tag?: string;
+    /**
+     * The field list types. The available types can be defined in the "fieldListTypes" module option.
+     */
     fieldListType?: ValidFieldListTypes;
+    /**
+     * If true, the field list items are only rendered in edit mode.
+     * In normal mode, you are responsible yourself to render the items.
+     */
     editOnly?: boolean;
-    listClass?: string;
-    editClass?: string;
+    /**
+     * The classes to render for the list. Same as passing classes via the :class prop.
+     */
+    listClass?: VueClassProp;
+    /**
+     * Classes only applied during editing.
+     */
+    editClass?: VueClassProp;
+    /**
+     * Classes to apply if the field is not empty.
+     */
     nonEmptyClass?: string;
-    allowedFragments?: BlokkliFragmentName[];
+    /**
+     * Define which fragments are allowed in this field.
+     *
+     * Note that this is only used during editing. It defines which fragments
+     * can be added here. If you change this prop but there are existing
+     * fragments already in the field list, they will continue to be rendered.
+     *
+     * Note that in addition, also the "blokkli_fragment" block must be allowed
+     * as a bundle in this field.
+     */
+    allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
+    /**
+     * Force an alignment during drag and drop interactions.
+     */
     dropAlignment?: FieldDropAlignment;
     /**
      * Renders proxy blocks during editing.
+     *
+     * Doing this will *not* render the actual block components.
+     *
+     * During editing, a separate element is rendered with "position: absolute"
+     * that contains "proxy blocks" for drag and drop interactions. This means
+     * that you need to have a wrapper somewhere with "position: relative".
      */
     proxyMode?: boolean;
     /**
@@ -29,15 +65,23 @@ type __VLS_Props = {
      */
     shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
 };
+type __VLS_Slots = {
+    default(props: {
+        items: FieldListItemTyped[];
+    }): any;
+    after(props: {
+        items: FieldListItemTyped[];
+    }): any;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     list: Array<FieldListItem | null | undefined> | FieldListItem | null;
     fieldListType: ValidFieldListTypes;
-    allowedFragments: BlokkliFragmentName[];
+    allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
     dropAlignment: FieldDropAlignment;
     tag: string;
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
-    listClass: string;
-    editClass: string;
+    listClass: VueClassProp;
+    editClass: VueClassProp;
     nonEmptyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/BlokkliProvider.vue

@@ -80,6 +80,19 @@ import {
   INJECT_ENTITY_CONTEXT,
   INJECT_PROVIDER_CONTEXT
 } from "../helpers/symbols";
+const props = defineProps({
+  entityType: { type: String, required: true },
+  entityBundle: { type: String, required: true },
+  entityUuid: { type: String, required: true },
+  tag: { type: String, required: false, default: "div" },
+  language: { type: String, required: false, default: "" },
+  editLabel: { type: String, required: false, default: "" },
+  editPath: { type: String, required: false, default: void 0 },
+  hostOptions: { type: Object, required: false, default: void 0 },
+  permissions: { type: Array, required: false, default: () => [] },
+  isolate: { type: Boolean, required: false },
+  entity: { type: null, required: false, default: void 0 }
+});
 defineSlots();
 const providerEl = useTemplateRef("providerEl");
 const PreviewProvider = defineAsyncComponent(
@@ -96,21 +109,6 @@ const EditIndicator = defineAsyncComponent(
 );
 const route = useRoute();
 const router = useRouter();
-const props = defineProps({
-  entity: { type: null, required: false, default: void 0 },
-  entityType: { type: String, required: true },
-  entityBundle: { type: String, required: true },
-  entityUuid: { type: String, required: true },
-  tag: { type: String, required: false, default: "div" },
-  language: { type: String, required: false, default: "" },
-  editLabel: { type: String, required: false, default: "" },
-  editPath: { type: String, required: false, default: void 0 },
-  hostOptions: { type: null, required: false, default: void 0 },
-  permissions: { type: Array, required: false, default: () => {
-    return [];
-  } },
-  isolate: { type: Boolean, required: false }
-});
 const shouldRender = ref(false);
 const isInEditor = computed(
   () => props.entityUuid && props.entityType && props.entityBundle && (isPreviewing.value || isEditing.value)

package/dist/runtime/components/BlokkliProvider.vue.d.ts

@@ -1,21 +1,57 @@
 import type { EditPermission } from '#blokkli/types';
-declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
-        entity?: T;
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & ({
+        /**
+         * The entity type.
+         */
         entityType: string;
+        /**
+         * The entity bundle.
+         */
         entityBundle: string;
+        /**
+         * The entity UUID.
+         */
         entityUuid: string;
+        /**
+         * The tag to use for the root element.
+         */
         tag?: string;
+        /**
+         * The current language code.
+         */
         language?: string;
+        /**
+         * The override label for the edit button.
+         */
         editLabel?: string;
+        /**
+         * The path to use to open the editor. Defaults to the current route.path value.
+         */
         editPath?: string;
-        hostOptions?: any;
+        /**
+         * The host options as a key value object.
+         */
+        hostOptions?: Record<string, any>;
+        /**
+         * The edit permissions.
+         */
         permissions?: EditPermission[];
         /**
-         * When set to true, during editing, everything except the provider element will be hidden.
+         * Whether to isolate the provider element during editing.
          */
         isolate?: boolean;
-    } & Partial<{}>> & import("vue").PublicProps;
+    } & ({
+        /**
+         * The entity data. Will be merged with the mutatedEntity data during editing.
+         */
+        entity: T;
+    } | {
+        /**
+         * The entity data. Will be merged with the mutatedEntity data during editing.
+         */
+        entity?: never;
+    })) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
@@ -23,7 +59,7 @@ declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<type
             isEditing: boolean;
             canEdit: boolean;
             isPreview: boolean;
-            entity?: T | undefined;
+            entity: T;
         }): any;
     };
     emit: {};

package/dist/runtime/components/Edit/DraggableList.vue

@@ -12,7 +12,6 @@
     <div
       ref="root"
       class="bk-field-list-proxy-list bk-draggable-list-container"
-      v-bind="fieldAttributes"
     >
       <BlokkliItem
         v-for="(item, i) in list"
@@ -45,7 +44,6 @@
     v-else
     ref="root"
     :class="['bk-draggable-list-container', attrs.class]"
-    v-bind="fieldAttributes"
   >
     <BlokkliItem
       v-for="(item, i) in list"
@@ -91,7 +89,7 @@ import {
   INJECT_FIELD_PROXY_MODE,
   INJECT_IS_EDITING
 } from "#blokkli/helpers/symbols";
-const { dom, types, runtimeConfig, selection, definitions } = useBlokkli();
+const { dom, runtimeConfig, selection, definitions } = useBlokkli();
 const root = ref(null);
 const props = defineProps({
   name: { type: String, required: true },
@@ -102,7 +100,9 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   isNested: { type: Boolean, required: true },
   fieldListType: { type: null, required: true },
-  allowedFragments: { type: Array, required: false, default: void 0 },
+  allowedFragments: { type: null, required: false, default: () => {
+    return [];
+  } },
   dropAlignment: { type: String, required: false, default: void 0 },
   proxyMode: { type: Boolean, required: false },
   globalProxyMode: { type: Boolean, required: false },
@@ -115,45 +115,6 @@ provide(INJECT_IS_EDITING, true);
 const proxyVisible = computed(
   () => props.proxyMode && (selection.uuids.value.length || selection.isDragging.value || selection.isMultiSelecting.value)
 );
-const fieldConfig = computed(() => {
-  const match = types.getFieldConfig(
-    props.entity.type,
-    props.entity.bundle,
-    props.name
-  );
-  if (!match) {
-    throw new Error(
-      `Missing field configuration for field "${props.name}" on entity type "${props.entity.type}" with bundle "${props.entity.bundle}". Make sure the "name" prop passed to <BlokkliField> is correct.`
-    );
-  }
-  return match;
-});
-const allowedBundles = computed(() => {
-  const bundles = fieldConfig.value.allowedBundles;
-  if (!bundles.length) {
-    console.error(
-      `Field with name "${props.name}" on entity "${props.entity.type}" with bundle "${props.entity.bundle}" does not define any allowed bundles.`
-    );
-  }
-  return bundles.join(",");
-});
-const fieldAttributes = computed(() => {
-  return {
-    "data-field-name": props.name,
-    "data-field-label": fieldConfig.value.label,
-    "data-field-is-nested": props.isNested,
-    "data-bk-nesting-level": props.nestingLevel,
-    "data-host-entity-type": props.entity.type,
-    "data-host-entity-uuid": props.entity.uuid,
-    "data-host-entity-bundle": props.entity.bundle,
-    "data-field-key": props.fieldKey,
-    "data-field-drop-alignment": props.dropAlignment,
-    "data-allowed-fragments": props.allowedFragments ? props.allowedFragments.join(",") : void 0,
-    "data-field-allowed-bundles": allowedBundles.value,
-    "data-field-list-type": props.fieldListType,
-    "data-field-cardinality": fieldConfig.value.cardinality
-  };
-});
 function isMuted(item) {
   if (!item) {
     return true;
@@ -166,9 +127,10 @@ function isMuted(item) {
   return !(isVisible && isVisibleCustom);
 }
 const data = computed(() => {
+  const allowedFragments = Array.isArray(props.allowedFragments) ? props.allowedFragments : [props.allowedFragments];
   return {
     fieldListType: props.fieldListType,
-    allowedFragments: props.allowedFragments ?? [],
+    allowedFragments,
     isNested: props.isNested,
     nestingLevel: props.nestingLevel,
     dropAlignment: props.dropAlignment ?? null

package/dist/runtime/components/Edit/DraggableList.vue.d.ts

@@ -10,7 +10,7 @@ type __VLS_Props = {
     tag?: string;
     isNested: boolean;
     fieldListType: ValidFieldListTypes;
-    allowedFragments?: BlokkliFragmentName[];
+    allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
     dropAlignment?: FieldDropAlignment;
     proxyMode?: boolean;
     globalProxyMode?: boolean;
@@ -18,7 +18,7 @@ type __VLS_Props = {
     shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    allowedFragments: BlokkliFragmentName[];
+    allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
     dropAlignment: FieldDropAlignment;
     tag: string;
     language: string;

package/dist/runtime/components/Edit/EditProvider.vue

@@ -160,9 +160,14 @@ const keyboard = keyboardProvider(animation);
 const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
 const plugins = pluginProvider();
-const directive = directiveProvider(ui);
+const directive = directiveProvider(debug, ui);
 const fields = fieldsProvider(state, dom, types);
-const mutatedEntity = computed(() => state.mutatedEntity.value || props.entity);
+const mutatedEntity = computed(() => {
+  return {
+    ...props.entity ?? {},
+    ...state.mutatedEntity.value ?? {}
+  };
+});
 const isReady = computed(
   () => !isInitializing.value && dom.isReady.value && directive.isReady.value && toolbarLoaded.value
 );
@@ -193,13 +198,14 @@ addElementClasses(
   shouldIsolate
 );
 const baseLogger = debug.createLogger("EditProvider");
-onMounted(() => {
+onMounted(async () => {
   window.addEventListener("contextmenu", onContextMenu);
   document.documentElement.addEventListener("touchmove", onTouchMove);
   document.documentElement.addEventListener("touchstart", onTouchStart);
   baseLogger.log("EditProvider mounted");
   dom.init();
   directive.init();
+  await nextTick();
   isInitializing.value = false;
   broadcast.emit("editorLoaded", { uuid: props.entityUuid });
 });