@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

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

@@ -2,7 +2,7 @@ fragment blokkliProps on ParagraphsBlokkliProps {
   entityUuid
   entityType
   entityBundle
-  canEdit
+  permissions
   editLabel
   language
   hostOptions

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/features/comments.graphql

@@ -32,30 +32,33 @@ query pbComments(
 mutation pbAddComment(
   $entityType: EntityType!
   $entityUuid: String!
+  $langcode: String!
   $blockUuids: [String]!
   $body: String!
 ) {
-  state: paragraphsEditMutationState(
+  action: paragraphsBlokkliAddComment(
     entityType: $entityType
     entityUuid: $entityUuid
+    langcode: $langcode
+    body: $body
+    paragraphUuids: $blockUuids
   ) {
-    action: addComment(body: $body, paragraphUuids: $blockUuids) {
-      ...paragraphsBlokkliComment
-    }
+    ...paragraphsBlokkliComment
   }
 }
 
 mutation pbResolveComment(
   $entityType: EntityType!
   $entityUuid: String!
+  $langcode: String!
   $uuid: String!
 ) {
-  state: paragraphsEditMutationState(
+  action: paragraphsBlokkliResolveComment(
     entityType: $entityType
     entityUuid: $entityUuid
+    langcode: $langcode
+    uuid: $uuid
   ) {
-    action: resolveComment(uuid: $uuid) {
-      ...paragraphsBlokkliComment
-    }
+    ...paragraphsBlokkliComment
   }
 }

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,
@@ -527,13 +527,13 @@ export default defineBlokkliEditAdapter(
         ...ctx.value,
         blockUuids,
         body
-      }).then((v) => mapComments(v.data.state?.action || []));
+      }).then((v) => mapComments(v.data.action || []));
     }
     if (hasMutation("pbResolveComment")) {
       adapter.resolveComment = (uuid) => useGraphqlMutation("pbResolveComment", {
         ...ctx.value,
         uuid
-      }).then((v) => mapComments(v.data.state?.action || []));
+      }).then((v) => mapComments(v.data.action || []));
     }
     if (hasQuery("pbLibraryItems")) {
       adapter.getLibraryItems = (data) => {
@@ -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,9 +28,7 @@
       </div>
     </button>
   </Teleport>
-  <Teleport to="#bk-blokkli-item-actions-after">
-    <slot :items="selection.blocks.value" :uuids="uuids" />
-  </Teleport>
+  <slot :items="selection.items.value" :uuids="uuids" />
 </template>
 
 <script setup>
@@ -33,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({
@@ -44,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(() => {
@@ -77,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/Blocks/FromLibrary/index.vue

@@ -18,16 +18,18 @@
 import { computed, provide, defineBlokkli } from "#imports";
 import {
   INJECT_IS_IN_REUSABLE,
-  INJECT_REUSABLE_OPTIONS
+  INJECT_REUSABLE_OPTIONS,
+  INJECT_REUSABLE_UUID
 } from "#blokkli/helpers/symbols";
 const props = defineProps({
   libraryItem: { type: Object, required: false }
 });
-const { index, options, parentType, isEditing } = defineBlokkli({
+const { index, options, parentType, isEditing, uuid } = defineBlokkli({
   bundle: "from_library"
 });
 provide(INJECT_REUSABLE_OPTIONS, options);
 provide(INJECT_IS_IN_REUSABLE, true);
+provide(INJECT_REUSABLE_UUID, uuid);
 const item = computed(() => {
   const v = props.libraryItem?.block;
   if (v && "uuid" in v) {

package/dist/runtime/components/BlokkliEditable.vue

@@ -1,15 +1,24 @@
 <template>
-  <component :is="tag" v-bind="attrs">
+  <component :is="tag" ref="root">
     <slot :value="renderedValue" />
   </component>
 </template>
 
 <script setup>
-import { ref, computed, inject, onMounted, onBeforeUnmount } from "#imports";
 import {
+  ref,
+  computed,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef
+} from "#imports";
+import {
+  INJECT_APP,
   INJECT_EDIT_CONTEXT,
   INJECT_ENTITY_CONTEXT,
-  INJECT_IS_EDITING
+  INJECT_IS_EDITING,
+  INJECT_IS_IN_REUSABLE
 } from "#blokkli/helpers/symbols";
 const props = defineProps({
   name: { type: String, required: true },
@@ -17,38 +26,47 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" }
 });
 defineSlots();
+const root = useTemplateRef("root");
 const valueOverride = ref("");
 const isEditing = inject(INJECT_IS_EDITING, false);
 const entity = inject(INJECT_ENTITY_CONTEXT);
 const editContext = inject(INJECT_EDIT_CONTEXT, null);
+const app = inject(INJECT_APP, null);
+const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
 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;
   }
 };
 onMounted(() => {
-  if (!isEditing || !editContext) {
+  if (!isEditing || !editContext || !app || isInReusable) {
     return;
   }
   editContext.eventBus.on("editable:update", onEditableUpdateValue);
+  if (root.value instanceof HTMLElement && entity) {
+    app.directive.registerDirectiveElement(
+      root.value,
+      props.name,
+      entity,
+      "editable"
+    );
+  }
 });
 onBeforeUnmount(() => {
   if (editContext) {
     editContext.eventBus.off("editable:update", onEditableUpdateValue);
   }
+  if (app && root.value instanceof HTMLElement && entity) {
+    app.directive.unregisterDirectiveElement(
+      root.value,
+      props.name,
+      entity,
+      "editable"
+    );
+  }
 });
 </script>

package/dist/runtime/components/BlokkliField.vue

@@ -145,6 +145,9 @@ function filterVisible(item) {
   if (isEditing) {
     return true;
   }
+  if (!item.editContext?.isPublished) {
+    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,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;