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

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

@@ -1,6 +1,8 @@
 fragment paragraphsFieldItem on Paragraph {
   uuid
   bundle: entityBundle
-  isNew
   options: paragraphsBlokkliOptions
+  editContext: paragraphsBlokkliEditContext {
+    ...paragraphsBlokkliParagraphEditContext
+  }
 }

package/dist/modules/drupal/graphql/base/query.pbConfig.graphql

@@ -7,7 +7,7 @@ query pbConfig($entityType: String!, $entityBundle: String!) {
   }
   allTypes: entityQuery(entityType: PARAGRAPHS_TYPE, limit: 999) {
     items {
-      ...paragraphsType
+      ...blokkliParagraphsType
     }
   }
 
@@ -85,12 +85,3 @@ fragment paragraphsBlokkliSupportedClipboard on ParagraphsBlokkliSupportedClipbo
     videoProviders
   }
 }
-
-fragment paragraphsType on ParagraphsType {
-  id
-  label
-  icon: iconDefault
-  description
-  allowReusable
-  isTranslatable
-}

package/dist/modules/drupal/graphql/mutations/set_paragraph_schedule.graphql

@@ -0,0 +1,15 @@
+mutation pbSetParagraphSchedule(
+  $entityType: EntityType!
+  $entityUuid: String!
+  $langcode: String
+  $items: [ParagraphsBlokkliSetParagraphScheduleInput]!
+) {
+  state: paragraphsEditMutationState(
+    entityType: $entityType
+    entityUuid: $entityUuid
+  ) {
+    action: set_paragraph_schedule(items: $items) {
+      ...paragraphsBlokkliMutationResult
+    }
+  }
+}

package/dist/modules/drupal/index.mjs

@@ -201,6 +201,39 @@ fragment paragraphsBlokkliPublishOptions on ParagraphsBlokkliPublishOptions {
     } else {
       addGraphqlDocument("features/publish.graphql");
     }
+    const paragraphsBlokkliEditContextFields = [
+      ...getTypeFields("ParagraphsBlokkliParagraphEditContext").keys()
+    ];
+    graphql.addDocument(
+      "blokkli:paragraphsBlokkliParagraphEditContext",
+      `
+fragment paragraphsBlokkliParagraphEditContext on ParagraphsBlokkliParagraphEditContext {
+  ${paragraphsBlokkliEditContextFields.join("\n  ")}
+}
+`
+    );
+    addMutation("set_paragraph_schedule", "block-scheduler");
+    const paragraphsTypeFields = [
+      ...getTypeFields("ParagraphsType").keys()
+    ].filter((field) => {
+      return [
+        "id",
+        "label",
+        "description",
+        "allowReusable",
+        "isTranslatable",
+        "hasPublishOn",
+        "hasUnpublishOn"
+      ].includes(field);
+    });
+    graphql.addDocument(
+      "blokkli:paragraphsType",
+      `
+fragment blokkliParagraphsType on ParagraphsType {
+  ${paragraphsTypeFields.join("\n  ")}
+}
+`
+    );
   }
 });
 

package/dist/modules/drupal/runtime/adapter/index.js

@@ -100,7 +100,7 @@ export default defineBlokkliEditAdapter(
         clipboard: v.data.clipboards || [],
         availableFeatures: v.data.features,
         allTypes: (v.data.allTypes.items || []).filter(
-          (v2) => v2 && "icon" in v2
+          (v2) => v2 && "id" in v2
         ),
         fieldConfig: v.data.fieldConfig || [],
         editableFieldConfig: v.data.editableFieldConfig || [],
@@ -206,7 +206,7 @@ export default defineBlokkliEditAdapter(
     }).then(mapMutation);
     const moveBlock = (e) => useGraphqlMutation("pbMoveParagraph", {
       ...ctx.value,
-      uuid: e.item.uuid,
+      uuid: e.item.block.uuid,
       hostType: e.host.type,
       hostUuid: e.host.uuid,
       hostFieldName: e.host.fieldName,
@@ -895,6 +895,14 @@ export default defineBlokkliEditAdapter(
         revisionLogMessage: options.revisionLogMessage
       }).then(mapMutation);
     }
+    if (hasMutation("pbSetParagraphSchedule")) {
+      adapter.setBlockScheduleDate = (blocks) => useGraphqlMutation("pbSetParagraphSchedule", {
+        entityType: ctx.value.entityType,
+        entityUuid: ctx.value.entityUuid,
+        langcode: ctx.value.langcode,
+        items: blocks
+      }).then(mapMutation);
+    }
     return adapter;
   }
 );

package/dist/runtime/adapter/index.d.ts

@@ -179,6 +179,23 @@ export type BlokkliAdapterScheduleOptions = {
      */
     date: string;
 };
+export type BlokkliAdapterSetBlockScheduleOptions = {
+    /**
+     * The UUID of the block.
+     */
+    uuid: string;
+    /**
+     * The schedule type.
+     */
+    type: 'publish' | 'unpublish';
+    /**
+     * The date. If empty, remove the schedule date.
+     */
+    date?: string;
+};
+export type BlokkliAdapterUnscheduleBlockOptions = {
+    uuid: string;
+};
 export type BlokkliAdapterUnscheduleOptions = {
     /**
      * The host entity type.
@@ -344,6 +361,10 @@ export interface BlokkliAdapter<T> {
      * Unschedule an already scheduled edit state.
      */
     unscheduleEditState?: (options: BlokkliAdapterUnscheduleOptions) => Promise<MutationResponseLike<T | undefined | null>>;
+    /**
+     * Schedule a block.
+     */
+    setBlockScheduleDate?: (blocks: BlokkliAdapterSetBlockScheduleOptions[]) => Promise<MutationResponseLike<T | undefined | null>>;
     /**
      * Set a specific history index.
      */

package/dist/runtime/blokkliPlugins/ContextMenu/Menu/index.vue

@@ -40,6 +40,9 @@ const innerStyle = computed(() => {
   };
 });
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Escape") {
     emit("close");
   }

package/dist/runtime/blokkliPlugins/ItemAction/index.vue

@@ -1,14 +1,19 @@
 <template>
   <Teleport to="#bk-blokkli-item-actions">
     <button
+      v-if="shouldRender"
       ref="el"
       :disabled="isDisabled"
-      :class="{ 'bk-is-active': active, 'bk-is-last': weight === 'last' }"
+      class="bk-item-action"
+      :class="[
+  { 'bk-is-active': active, 'bk-is-last': weight === 'last' },
+  $attrs.class
+]"
       :style="weight !== 'last' ? { order: weight || 0 } : void 0"
       @click.prevent.stop="onClick"
     >
       <slot name="icon">
-        <Icon v-if="icon" :name="icon" />
+        <Icon v-if="icon" :name="icon" class="bk-item-action-icon" />
       </slot>
       <div class="bk-tooltip">
         <span>{{ title }}</span>
@@ -23,7 +28,7 @@
       </div>
     </button>
   </Teleport>
-  <slot :items="selection.blocks.value" :uuids="uuids" />
+  <slot :items="selection.items.value" :uuids="uuids" />
 </template>
 
 <script setup>
@@ -31,7 +36,7 @@ import { computed, ref, useBlokkli } from "#imports";
 import { Icon, ShortcutIndicator } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
-const { selection } = useBlokkli();
+const { selection, state } = useBlokkli();
 const el = ref(null);
 const uuids = computed(() => selection.uuids.value);
 const props = defineProps({
@@ -42,26 +47,33 @@ const props = defineProps({
   keyCode: { type: String, required: false },
   meta: { type: Boolean, required: false },
   multiple: { type: Boolean, required: false },
+  editOnly: { type: Boolean, required: false },
   weight: { type: [Number, String], required: false },
   icon: { type: null, required: false },
   tourText: { type: String, required: false }
 });
 const isDisabled = computed(
-  () => props.disabled || !props.multiple && selection.blocks.value.length > 1
+  () => props.disabled || !props.multiple && selection.items.value.length > 1
 );
+const shouldRender = computed(() => {
+  if (props.editOnly) {
+    return state.editMode.value === "editing";
+  }
+  return true;
+});
 const emit = defineEmits(["click"]);
 const onClick = () => {
   if (isDisabled.value || !uuids.value.length) {
     return;
   }
-  emit("click", selection.blocks.value);
+  emit("click", selection.items.value);
 };
 defineCommands(() => ({
   id: "plugin:item_action:" + props.id,
   group: "selection",
   label: props.title,
   icon: props.icon,
-  disabled: props.disabled || !selection.blocks.value.length,
+  disabled: props.disabled || !selection.items.value.length,
   callback: onClick
 }));
 defineTourItem(() => {
@@ -75,10 +87,8 @@ defineTourItem(() => {
     element: () => el.value
   };
 });
-</script>
-
-<script>
-export default {
-  name: "PluginItemAction"
-};
+defineOptions({
+  name: "PluginItemAction",
+  inheritAttrs: false
+});
 </script>

package/dist/runtime/blokkliPlugins/ItemAction/index.vue.d.ts

@@ -1,6 +1,6 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { DraggableExistingBlock } from '#blokkli/types';
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+import type { RenderedFieldListItem } from '#blokkli/types';
+type __VLS_Props = {
     id: string;
     /**
      * The title of the action.
@@ -27,55 +27,31 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
      */
     multiple?: boolean;
     /**
-     * The weight, used for positioning the button.
-     */
-    weight?: number | string | "last";
-    icon?: BlokkliIcon;
-    tourText?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (items: DraggableExistingBlock[]) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    id: string;
-    /**
-     * The title of the action.
-     */
-    title: string;
-    /**
-     * Whether the action is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the button should be displayed in an active state (e.g. when it's a dropdown).
+     * Whether the action is only available in edit mode.
      */
-    active?: boolean;
-    /**
-     * The key code to use for the shortcut.
-     */
-    keyCode?: string;
-    /**
-     * Wheter the shortcut needs the meta modifier key.
-     */
-    meta?: boolean;
-    /**
-     * Whether the action supports multiple items.
-     */
-    multiple?: boolean;
+    editOnly?: boolean;
     /**
      * The weight, used for positioning the button.
      */
-    weight?: number | string | "last";
+    weight?: number | string | 'last';
     icon?: BlokkliIcon;
     tourText?: string;
-}> & Readonly<{
-    onClick?: ((items: DraggableExistingBlock[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    icon?: (props: {}) => any;
+};
+declare var __VLS_5: {}, __VLS_19: {
+    items: RenderedFieldListItem[];
+    uuids: string[];
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_5) => any;
 } & {
-    default?: (props: {
-        items: DraggableExistingBlock[];
-        uuids: string[];
-    }) => any;
-}>;
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (items: RenderedFieldListItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((items: RenderedFieldListItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/blokkliPlugins/TourItem/index.vue

@@ -4,13 +4,14 @@
 
 <script setup>
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
-import { getCurrentInstance } from "#imports";
+import { getCurrentInstance, useBlokkli } from "#imports";
 const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
   text: { type: String, required: true },
   selector: { type: String, required: false }
 });
+const { element } = useBlokkli();
 const findElement = (el) => {
   if (el instanceof Text) {
     return findElement(el.nextElementSibling);
@@ -25,10 +26,14 @@ defineTourItem(() => {
     title: props.title,
     text: props.text,
     element: () => {
-      const provided = props.selector ? document.querySelector(props.selector) : void 0;
-      const element = provided || findElement(instance?.vnode.el);
-      if (element instanceof HTMLElement) {
-        return element;
+      const provided = props.selector ? element.query(
+        document.documentElement,
+        props.selector,
+        `TourItem Plugin: ${props.id}`
+      ) : void 0;
+      const el = provided || findElement(instance?.vnode.el);
+      if (el instanceof HTMLElement) {
+        return el;
       }
     }
   };

package/dist/runtime/components/BlokkliEditable.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" v-bind="attrs" ref="root">
+  <component :is="tag" ref="root">
     <slot :value="renderedValue" />
   </component>
 </template>
@@ -37,16 +37,6 @@ if (!entity) {
   throw new Error("Missing entity context.");
 }
 const renderedValue = computed(() => valueOverride.value || props.value);
-const attrs = computed(() => {
-  if (isEditing && props.name) {
-    return {
-      "data-blokkli-editable-field": props.name,
-      "data-blokkli-editable-component": "true",
-      "data-blokkli-editable-value": props.value
-    };
-  }
-  return void 0;
-});
 const onEditableUpdateValue = (e) => {
   if (e.name === props.name && e.entityUuid === entity.uuid) {
     valueOverride.value = e.value;
@@ -58,7 +48,12 @@ onMounted(() => {
   }
   editContext.eventBus.on("editable:update", onEditableUpdateValue);
   if (root.value instanceof HTMLElement && entity) {
-    app.editable.registerEditableField(root.value, props.name, entity);
+    app.directive.registerDirectiveElement(
+      root.value,
+      props.name,
+      entity,
+      "editable"
+    );
   }
 });
 onBeforeUnmount(() => {
@@ -66,7 +61,12 @@ onBeforeUnmount(() => {
     editContext.eventBus.off("editable:update", onEditableUpdateValue);
   }
   if (app && root.value instanceof HTMLElement && entity) {
-    app.editable.unregisterEditableField(root.value, props.name, entity);
+    app.directive.unregisterDirectiveElement(
+      root.value,
+      props.name,
+      entity,
+      "editable"
+    );
   }
 });
 </script>

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

@@ -1,5 +1,5 @@
 import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import type { FieldListItem } from '#blokkli/types';
+import type { FieldListItem, FieldDropAlignment } from '#blokkli/types';
 import type { ValidFieldListTypes, FieldListItemTyped } from '#blokkli-build/generated-types';
 type __VLS_Slots = {
     default(props: {
@@ -19,7 +19,7 @@ type __VLS_Props = {
     editClass?: string;
     nonEmptyClass?: string;
     allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: 'vertical' | 'horizontal';
+    dropAlignment?: FieldDropAlignment;
     /**
      * Renders proxy blocks during editing.
      */
@@ -33,8 +33,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     list: Array<FieldListItem | null | undefined> | FieldListItem | null;
     fieldListType: ValidFieldListTypes;
     allowedFragments: BlokkliFragmentName[];
+    dropAlignment: FieldDropAlignment;
     tag: string;
-    dropAlignment: "vertical" | "horizontal";
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
     listClass: string;
     editClass: string;

package/dist/runtime/components/BlokkliItem.vue

@@ -38,10 +38,10 @@ const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType;
 const componentProps = defineProps({
   uuid: { type: String, required: true },
   bundle: { type: String, required: true },
-  isNew: { type: Boolean, required: false },
   options: { type: null, required: false, default: () => ({}) },
   props: { type: null, required: false, default: () => ({}) },
   index: { type: Number, required: false, default: 0 },
+  editContext: { type: Object, required: false, default: void 0 },
   parentType: { type: String, required: false, default: "" },
   isEditing: { type: Boolean, required: false, default: false }
 });

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

@@ -1,19 +1,20 @@
+import type { BlockEditContext } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
     uuid: string;
     bundle: string;
-    isNew?: boolean;
     options?: any;
     props?: any;
     index?: number;
+    editContext?: BlockEditContext;
     parentType?: string;
     isEditing?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     uuid: string;
     bundle: string;
-    isNew?: boolean;
     options?: any;
     props?: any;
     index?: number;
+    editContext?: BlockEditContext;
     parentType?: string;
     isEditing?: boolean;
 }> & Readonly<{}>, {
@@ -21,6 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     options: any;
     parentType: string;
     isEditing: boolean;
+    editContext: BlockEditContext;
     props: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/BlokkliProvider.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="providerEl"
     :data-provider-uuid="entityUuid"
     :data-provider-entity-type="entityType"
     :data-provider-entity-bundle="entityBundle"
@@ -23,14 +24,15 @@
         />
       </PreviewProvider>
       <EditProvider
-        v-else-if="isEditing && shouldRender"
+        v-else-if="isEditing && shouldRender && providerEl"
         v-slot="{ mutatedEntity }"
-        :entity="entity"
-        :entity-type="entityType"
-        :entity-uuid="entityUuid"
-        :entity-bundle="entityBundle"
-        :language="language"
-        :isolate="isolate"
+        :provider-el
+        :entity
+        :entity-type
+        :entity-uuid
+        :entity-bundle
+        :language
+        :isolate
         :permissions
       >
         <slot
@@ -71,13 +73,15 @@ import {
   useRouter,
   provide,
   ref,
-  onMounted
+  onMounted,
+  useTemplateRef
 } from "#imports";
 import {
   INJECT_ENTITY_CONTEXT,
   INJECT_PROVIDER_CONTEXT
 } from "../helpers/symbols";
 defineSlots();
+const providerEl = useTemplateRef("providerEl");
 const PreviewProvider = defineAsyncComponent(
   () => import("./Edit/PreviewProvider.vue")
 );

package/dist/runtime/components/Edit/Actions/index.vue

@@ -20,7 +20,6 @@
             <button
               class="bk-blokkli-item-actions-type-button"
               :disabled="!shouldRenderButton"
-              :title="title"
               :class="{
   'is-open': showDropdown,
   'is-interactive': shouldRenderButton,
@@ -50,9 +49,14 @@
                 title
               }}</span>
               <span
-                v-if="selection.blocks.value.length > 1"
+                v-if="selection.items.value.length > 1"
                 class="bk-blokkli-item-actions-title-count"
-                >{{ selection.blocks.value.length }}</span
+                >{{ selection.items.value.length }}</span
+              >
+              <span
+                v-show="selectedIsNew"
+                class="bk-blokkli-item-actions-title-pill"
+                >{{ $t("selectedIsNew", "New") }}</span
               >
               <Icon v-if="shouldRenderButton" name="caret" class="bk-caret" />
             </button>
@@ -64,7 +68,7 @@
           </div>
 
           <div
-            v-show="selection.blocks.value.length"
+            v-show="!selection.hasHostSelected.value"
             id="bk-blokkli-item-actions"
             class="bk-blokkli-item-actions-buttons"
           />
@@ -84,7 +88,7 @@ import {
   onBeforeUnmount,
   useTemplateRef
 } from "#imports";
-import { onlyUnique, falsy } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 import { ItemIcon, Icon } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
@@ -107,9 +111,9 @@ const controlsEl = ref(null);
 const mountedPlugins = ref([]);
 const showDropdown = ref(false);
 const hasAnythingSelected = computed(
-  () => selection.hasHostSelected.value || !!selection.blocks.value.length
+  () => selection.hasHostSelected.value || !!selection.items.value.length
 );
-watch(selection.blocks, () => {
+watch(selection.items, () => {
   showDropdown.value = false;
 });
 watch(selection.hasHostSelected, () => {
@@ -117,7 +121,7 @@ watch(selection.hasHostSelected, () => {
 });
 const bundleIcon = computed(() => {
   if (itemBundle.value?.id === "from_library") {
-    const reusableBundle = selection.blocks.value[0]?.reusableBundle;
+    const reusableBundle = selection.items.value[0]?.library?.reusableBundle;
     if (reusableBundle) {
       return reusableBundle;
     }
@@ -125,7 +129,7 @@ const bundleIcon = computed(() => {
   return itemBundle.value?.id;
 });
 const hasSelectedHost = computed(() => {
-  return selection.blocks.value.length === 0;
+  return selection.items.value.length === 0;
 });
 const title = computed(() => {
   if (ui.transformLabel.value) {
@@ -150,25 +154,32 @@ const title = computed(() => {
         return fragments.join(", ");
       }
     } else if (itemBundle.value.id === "from_library") {
-      const title2 = selection.blocks.value[0]?.editTitle;
+      const title2 = selection.items.value[0]?.library?.label;
       if (title2) {
         return title2;
       }
     }
     return itemBundle.value.label;
-  } else if (!selection.blocks.value.length) {
+  } else if (!selection.items.value.length) {
     return state.entity.value.label;
   }
   return $t("multipleItemsLabel", "Items");
 });
-const itemBundleIds = computed(
-  () => selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique)
-);
+const selectedIsNew = computed(() => {
+  if (selection.uuids.value.length !== 1) {
+    return false;
+  }
+  const uuid = selection.uuids.value[0];
+  if (!uuid) {
+    return false;
+  }
+  return !!state.getFieldListItem(uuid)?.editContext?.isNew;
+});
 const itemBundle = computed(() => {
-  if (itemBundleIds.value.length !== 1) {
+  if (selection.bundles.value.length !== 1) {
     return;
   }
-  const bundle = itemBundleIds.value[0];
+  const bundle = selection.bundles.value[0];
   return types.getBlockBundleDefinition(bundle);
 });
 const observer = new ResizeObserver((entries) => {