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

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/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/runtime/adapter/index.js

@@ -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) => {

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

@@ -23,9 +23,7 @@
       </div>
     </button>
   </Teleport>
-  <Teleport to="#bk-blokkli-item-actions-after">
-    <slot :items="selection.blocks.value" :uuids="uuids" />
-  </Teleport>
+  <slot :items="selection.blocks.value" :uuids="uuids" />
 </template>
 
 <script setup>

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" v-bind="attrs" 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,10 +26,13 @@ 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.");
 }
@@ -41,14 +53,20 @@ const onEditableUpdateValue = (e) => {
   }
 };
 onMounted(() => {
-  if (!isEditing || !editContext) {
+  if (!isEditing || !editContext || !app || isInReusable) {
     return;
   }
   editContext.eventBus.on("editable:update", onEditableUpdateValue);
+  if (root.value instanceof HTMLElement && entity) {
+    app.editable.registerEditableField(root.value, props.name, entity);
+  }
 });
 onBeforeUnmount(() => {
   if (editContext) {
     editContext.eventBus.off("editable:update", onEditableUpdateValue);
   }
+  if (app && root.value instanceof HTMLElement && entity) {
+    app.editable.unregisterEditableField(root.value, props.name, entity);
+  }
 });
 </script>

package/dist/runtime/components/BlokkliProvider.vue

@@ -9,16 +9,16 @@
       <PreviewProvider
         v-if="isPreviewing"
         v-slot="{ mutatedEntity }"
-        :entity="entity"
-        :entity-type="entityType"
-        :entity-uuid="entityUuid"
-        :entity-bundle="entityBundle"
-        :language="language"
+        :entity
+        :entity-type
+        :entity-uuid
+        :entity-bundle
+        :language
       >
         <slot
           :entity="mutatedEntity"
-          :is-editing="isEditing"
-          :can-edit="canEdit"
+          :is-editing
+          :can-edit
           :is-preview="isPreviewing"
         />
       </PreviewProvider>
@@ -31,10 +31,11 @@
         :entity-bundle="entityBundle"
         :language="language"
         :isolate="isolate"
+        :permissions
       >
         <slot
-          :is-editing="isEditing"
-          :can-edit="canEdit"
+          :is-editing
+          :can-edit
           :is-preview="isPreviewing"
           :entity="mutatedEntity"
         />
@@ -43,18 +44,22 @@
 
     <slot
       v-else
-      :is-editing="isEditing"
-      :can-edit="canEdit"
+      :is-editing
+      :can-edit
       :is-preview="isPreviewing"
       :entity="entity"
     />
 
-    <EditIndicator
-      v-if="showIndicator"
-      :uuid="entityUuid"
-      :edit-label="editLabel"
-      @edit="edit"
-    />
+    <ClientOnly>
+      <EditIndicator
+        v-if="showIndicator"
+        :uuid="entityUuid"
+        :entity-type
+        :edit-label
+        :permissions
+        @edit="edit"
+      />
+    </ClientOnly>
   </div>
 </template>
 
@@ -92,26 +97,30 @@ const props = defineProps({
   entityType: { type: String, required: true },
   entityBundle: { type: String, required: true },
   entityUuid: { type: String, required: true },
-  canEdit: { type: Boolean, 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)
 );
+const canEdit = computed(() => props.permissions.includes("edit"));
+const canUseBlokkli = computed(() => !!props.permissions.length);
 const isEditing = computed(
-  () => props.canEdit && !!props.entityUuid && route.query.blokkliEditing === props.entityUuid
+  () => canUseBlokkli.value && !!props.entityUuid && route.query.blokkliEditing === props.entityUuid
 );
 const isPreviewing = computed(
   () => !!props.entityUuid && route.query.blokkliPreview === props.entityUuid
 );
 const showIndicator = computed(
-  () => props.canEdit && !route.query.blokkliEditing && !route.query.blokkliPreview
+  () => !!props.permissions.length && !route.query.blokkliEditing && !route.query.blokkliPreview
 );
 function edit() {
   router.push({

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

@@ -1,15 +1,16 @@
+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;
         entityType: string;
         entityBundle: string;
         entityUuid: string;
-        canEdit: boolean;
         tag?: string;
         language?: string;
         editLabel?: string;
         editPath?: string;
         hostOptions?: any;
+        permissions?: EditPermission[];
         /**
          * When set to true, during editing, everything except the provider element will be hidden.
          */

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

@@ -3,7 +3,7 @@
     <div class="bk bk-blokkli-item-actions bk-control" @click.stop>
       <div
         v-show="
-  !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected && shouldRender && !ui.hasAddTooltipOpen.value
+  !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected && shouldRender && !ui.hasTooltipOpen.value
 "
         ref="el"
         class="bk-blokkli-item-actions-inner"
@@ -39,6 +39,12 @@
                 <Icon v-if="ui.isTransforming.value" name="loader" />
                 <ItemIcon v-else-if="bundleIcon" :bundle="bundleIcon" />
                 <Icon v-else name="selection" />
+                <div
+                  v-if="itemBundle?.id === 'from_library'"
+                  class="bk-blokkli-item-actions-title-icon-reusable"
+                >
+                  <Icon name="reusable" />
+                </div>
               </div>
               <span class="bk-blokkli-item-actions-title-label">{{
                 title
@@ -57,8 +63,6 @@
             />
           </div>
 
-          <div id="bk-blokkli-item-actions-after" />
-
           <div
             v-show="selection.blocks.value.length"
             id="bk-blokkli-item-actions"
@@ -96,7 +100,8 @@ const { shouldRender } = useStickyToolbar(el, {
   shouldUpdate: () => !selection.isChangingOptions.value,
   getHeight: () => ACTIONS_HEIGHT,
   getWidth: () => scrollWidth,
-  getMargin: () => 20
+  getMargin: () => 20,
+  allowHorizontalOverflow: true
 });
 const controlsEl = ref(null);
 const mountedPlugins = ref([]);