@blokkli/editor 1.2.0 → 1.3.1

package/dist/runtime/adapter/drupal/graphql/base.graphql

@@ -84,11 +84,14 @@ fragment paragraphsBlokkliMutationResult on ParagraphsBlokkliMutationResult {
 query pbEditState(
   $entityType: EntityType!
   $entityUuid: String!
-  $langcode: String
+  $langcode: String!
+  $historyIndex: Int
 ) {
   state: getParagraphsEditState(
     entityType: $entityType
     entityUuid: $entityUuid
+    langcode: $langcode
+    historyIndex: $historyIndex
   ) {
     ...paragraphsBlokkliEditState
   }
@@ -436,8 +439,16 @@ mutation pbUndo(
   }
 }
 
-query pbGetPreviewGrantUrl($entityType: EntityType!, $entityUuid: String!) {
-  getParagraphsEditState(entityType: $entityType, entityUuid: $entityUuid) {
+query pbGetPreviewGrantUrl(
+  $entityType: EntityType!
+  $entityUuid: String!
+  $langcode: String!
+) {
+  getParagraphsEditState(
+    entityType: $entityType
+    entityUuid: $entityUuid
+    langcode: $langcode
+  ) {
     previewUrl
   }
 }

package/dist/runtime/adapter/drupal/graphql/comments.graphql

@@ -13,10 +13,15 @@ fragment paragraphsBlokkliComment on CommentBlokkliNode {
   }
 }
 
-query pbComments($entityType: EntityType!, $entityUuid: String!) {
+query pbComments(
+  $entityType: EntityType!
+  $entityUuid: String!
+  $langcode: String!
+) {
   state: getParagraphsEditState(
     entityType: $entityType
     entityUuid: $entityUuid
+    langcode: $langcode
   ) {
     comments {
       ...paragraphsBlokkliComment

package/dist/runtime/adapter/drupal/graphql/transform.graphql

@@ -1,5 +1,13 @@
-query pbGetTransformPlugins {
-  paragraphsBlokkliGetTransformPlugins {
+query pbGetTransformPlugins(
+  $entityType: EntityType!
+  $entityUuid: String!
+  $langcode: String!
+) {
+  paragraphsBlokkliGetTransformPlugins(
+    entityType: $entityType
+    entityUuid: $entityUuid
+    langcode: $langcode
+  ) {
     id
     label
     bundles

package/dist/runtime/adapter/drupal/graphqlMiddleware.js

@@ -14,8 +14,10 @@ export default defineBlokkliEditAdapter(
   async (providedContext) => {
     const ctx = computed(() => {
       return {
-        ...providedContext.value,
-        entityType: providedContext.value.entityType.toUpperCase()
+        entityType: providedContext.value.entityType.toUpperCase(),
+        entityBundle: providedContext.value.entityBundle,
+        entityUuid: providedContext.value.entityUuid,
+        langcode: providedContext.value.language
       };
     });
     const config = await useGraphqlQuery("pbConfig", {
@@ -63,9 +65,18 @@ export default defineBlokkliEditAdapter(
     const getAllBundles = () => {
       return Promise.resolve(config.allTypes);
     };
-    const loadState = (langcode) => useGraphqlQuery("pbEditState", {
+    const loadState = async () => {
+      const state = await useGraphqlQuery("pbEditState", {
+        ...ctx.value
+      }).then((v) => v?.data.state);
+      if (!state) {
+        throw new Error("Failed to load state.");
+      }
+      return state;
+    };
+    const loadStateAtIndex = (historyIndex) => useGraphqlQuery("pbEditState", {
       ...ctx.value,
-      langcode: langcode || void 0
+      historyIndex
     }).then((v) => v?.data.state);
     const getDisabledFeatures = () => {
       const features = config.availableFeatures;
@@ -318,7 +329,7 @@ export default defineBlokkliEditAdapter(
     const getPreviewGrantUrl = () => useGraphqlQuery("pbGetPreviewGrantUrl", ctx.value).then(
       (v) => v.data.getParagraphsEditState?.previewUrl
     );
-    const getTransformPlugins = () => useGraphqlQuery("pbGetTransformPlugins").then((v) => v.data.paragraphsBlokkliGetTransformPlugins || []).then(
+    const getTransformPlugins = () => useGraphqlQuery("pbGetTransformPlugins", ctx.value).then((v) => v.data.paragraphsBlokkliGetTransformPlugins || []).then(
       (plugins) => plugins.map((plugin) => {
         return {
           id: plugin.id,
@@ -345,9 +356,9 @@ export default defineBlokkliEditAdapter(
     const getLibraryItemEditUrl = (uuid) => {
       const url = buildFormUrl(
         ["blokkli", "library-item", uuid],
-        ctx.value.language
+        ctx.value.langcode
       ).url;
-      return `${url}&blokkliEditing=${uuid}&language=${ctx.value.language}`;
+      return `${url}&blokkliEditing=${uuid}&language=${ctx.value.langcode}`;
     };
     const formFrameBuilder = (e) => {
       const entityType = ctx.value.entityType.toLowerCase();
@@ -364,12 +375,12 @@ export default defineBlokkliEditAdapter(
             e.data.host.fieldName,
             e.data.afterUuid
           ],
-          ctx.value.language
+          ctx.value.langcode
         );
       } else if (e.id === "block:edit") {
         return buildFormUrl(
           `/paragraphs_blokkli/${entityType}/${ctx.value.entityUuid}/edit/${e.data.uuid}`,
-          ctx.value.language
+          ctx.value.langcode
         );
       } else if (e.id === "block:translate") {
         return buildFormUrl(
@@ -378,8 +389,8 @@ export default defineBlokkliEditAdapter(
         );
       } else if (e.id === "entity:edit") {
         return buildFormUrl(
-          `/paragraphs_blokkli/${entityType}/${ctx.value.entityUuid}/edit_entity/${ctx.value.language}`,
-          ctx.value.language
+          `/paragraphs_blokkli/${entityType}/${ctx.value.entityUuid}/edit_entity/${ctx.value.langcode}`,
+          ctx.value.langcode
         );
       } else if (e.id === "entity:translate") {
         return buildFormUrl(
@@ -389,7 +400,7 @@ export default defineBlokkliEditAdapter(
       } else if (e.id === "batchTranslate") {
         return buildFormUrl(
           `/paragraphs_blokkli/${entityType}/${ctx.value.entityUuid}/translate-paragraphs`,
-          ctx.value.language
+          ctx.value.langcode
         );
       }
     };
@@ -404,7 +415,6 @@ export default defineBlokkliEditAdapter(
     };
     const updateFieldValue = (e) => useGraphqlMutation("pbUpdateFieldValue", {
       ...ctx.value,
-      langcode: ctx.value.language,
       uuid: e.uuid,
       fieldName: e.fieldName,
       value: e.fieldValue
@@ -419,7 +429,7 @@ export default defineBlokkliEditAdapter(
         e.fieldName,
         e.uuid
       ].filter(falsy).join("/");
-      return buildFormUrl(url, ctx.value.language).url;
+      return buildFormUrl(url, ctx.value.langcode).url;
     };
     const fragmentsAddBlock = (e) => useGraphqlMutation("pbAddFragmentParagraph", {
       ...ctx.value,
@@ -431,20 +441,17 @@ export default defineBlokkliEditAdapter(
     }).then(mapMutation);
     const mediaLibraryReplaceMedia = (e) => useGraphqlMutation("pbReplaceMedia", {
       ...ctx.value,
-      langcode: providedContext.value.language,
       uuid: e.host.uuid,
       fieldName: e.host.fieldName,
       mediaId: e.mediaId
     }).then(mapMutation);
     const mediaLibraryReplaceEntityMedia = (e) => useGraphqlMutation("pbReplaceHostEntityMedia", {
       ...ctx.value,
-      langcode: providedContext.value.language,
       fieldName: e.host.fieldName,
       mediaId: e.mediaId
     }).then(mapMutation);
     const updateEntityFieldValue = (e) => useGraphqlMutation("pbUpdateHostEntityFieldValue", {
       ...ctx.value,
-      langcode: providedContext.value.language,
       fieldName: e.fieldName,
       value: e.fieldValue
     }).then(mapMutation);
@@ -666,7 +673,8 @@ export default defineBlokkliEditAdapter(
       clipboardMapBundle,
       addBlockFromClipboardItem,
       changeLanguage,
-      getLibraryItemEditUrl
+      getLibraryItemEditUrl,
+      loadStateAtIndex
     };
   }
 );

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

@@ -139,9 +139,13 @@ export type BlokkliAdapterPublishOptions = {
 };
 export interface BlokkliAdapter<T> {
     /**
-     * Load the state for the given langcode.
+     * Load the state.
      */
-    loadState(langcode?: string | undefined | null): Promise<T | undefined>;
+    loadState(): Promise<T | undefined>;
+    /**
+     * Load the unchanged state.
+     */
+    loadStateAtIndex?: (index: number) => Promise<T | undefined>;
     mapState(state: T): MappedState;
     /**
      * Get disabled features at runtime.

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

@@ -73,6 +73,7 @@
       <div class="bk">
         <div class="bk-sidebar-title">
           <span>{{ title }}</span>
+          <div v-if="beta" class="bk-beta-indicator">BETA</div>
           <button v-if="!ui.isMobile.value" @click.prevent.stop="onDetach">
             <Icon name="expand" />
           </button>
@@ -116,6 +117,7 @@ const props = withDefaults(
     icon: BlokkliIcon
     weight?: string | number
     renderAlways?: boolean
+    disabled?: boolean
     region?: 'left' | 'right'
     minWidth?: number
     minHeight?: number
@@ -123,6 +125,7 @@ const props = withDefaults(
     meta?: boolean
     shift?: boolean
     keyCode?: string
+    beta?: boolean
   }>(),
   {
     region: 'right',
@@ -147,7 +150,7 @@ const detachedKey = computed(() => 'sidebar:detached:' + props.id)
 const storageKey = computed(() => 'sidebar:active:' + props.region)
 const isDetached = storage.use(detachedKey, false)
 const isDisabled = computed(
-  () => props.editOnly && state.editMode.value !== 'editing',
+  () => props.editOnly && state.editMode.value !== 'editing' && !props.disabled,
 )
 const activeSidebar = storage.use(storageKey, '')
 

package/dist/runtime/components/BlokkliField.vue

@@ -107,7 +107,7 @@ const isGlobalProxyMode = inject<ComputedRef<boolean> | null>(
   null,
 )
 const isInReusable = inject(INJECT_IS_IN_REUSABLE, false)
-const isPreview = inject<boolean>(INJECT_IS_PREVIEW, false)
+const isPreview = inject<ComputedRef<boolean> | null>(INJECT_IS_PREVIEW, null)
 const isNested = inject(INJECT_IS_NESTED, false)
 const nestingLevel = inject<number>(INJECT_NESTING_LEVEL, 0)
 const mutatedFields = inject<Record<string, MutatedField> | null>(
@@ -179,7 +179,13 @@ function filterVisible(item?: FieldListItemTyped | FieldListItem): boolean {
 }
 
 const filteredList = computed<FieldListItemTyped[]>(() => {
-  if (mutatedFields && !isInReusable && editContext && fieldKey.value) {
+  if (
+    mutatedFields &&
+    !isInReusable &&
+    editContext &&
+    fieldKey.value &&
+    (isPreview?.value || isEditing)
+  ) {
     return ((mutatedFields[fieldKey.value] || {}).list || [])
       .map((v) => {
         const mutatedOptions = editContext.mutatedOptions[v.uuid] || {}

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

@@ -15,6 +15,9 @@
           id="bk-blokkli-item-actions-controls"
           ref="controlsEl"
           class="bk-blokkli-item-actions-controls"
+          :class="{
+            'bk-is-locked': ui.isTransforming.value,
+          }"
         >
           <div id="bk-blokkli-item-actions-title">
             <button
@@ -30,7 +33,8 @@
               @click.prevent="showDropdown = !showDropdown"
             >
               <div class="bk-blokkli-item-actions-title-icon">
-                <ItemIcon v-if="bundleIcon" :bundle="bundleIcon" />
+                <Icon v-if="ui.isTransforming.value" name="loader" />
+                <ItemIcon v-else-if="bundleIcon" :bundle="bundleIcon" />
                 <Icon v-else name="selection" />
               </div>
               <span class="bk-blokkli-item-actions-title-label">{{
@@ -79,7 +83,11 @@ import { getFragmentDefinition } from '#blokkli/definitions'
 
 const { selection, $t, types, state, ui, dom } = useBlokkli()
 
-const editingEnabled = computed(() => state.editMode.value === 'editing')
+const editingEnabled = computed(
+  () =>
+    state.editMode.value === 'editing' ||
+    state.editMode.value === 'translating',
+)
 
 const ACTIONS_HEIGHT = 50
 
@@ -105,6 +113,9 @@ const bundleIcon = computed(() => {
 })
 
 const title = computed(() => {
+  if (ui.transformLabel.value) {
+    return ui.transformLabel.value
+  }
   if (itemBundle.value) {
     if (itemBundle.value.id === 'blokkli_fragment') {
       const fragments = selection.uuids.value
@@ -189,7 +200,11 @@ onBeforeUnmount(() => {
 })
 
 onBlokkliEvent('canvas:draw', () => {
-  if (!selection.blocks.value.length || ui.isMobile.value) {
+  if (
+    !selection.blocks.value.length ||
+    ui.isMobile.value ||
+    selection.isChangingOptions.value
+  ) {
     return
   }
 
@@ -221,8 +236,8 @@ onBlokkliEvent('canvas:draw', () => {
   const padding = ui.visibleViewportPadded.value
   const rect = limitPlacedRect(
     {
-      x: minX,
-      y: minY - ACTIONS_HEIGHT - 15,
+      x: minX - 5 * Math.min(scale, 1),
+      y: minY - ACTIONS_HEIGHT - 15 * Math.min(scale, 1),
       width: scrollWidth,
       height: ACTIONS_HEIGHT,
     },
@@ -238,7 +253,7 @@ onBlokkliEvent('canvas:draw', () => {
   if (el.value) {
     el.value.style.transform = ui.isMobile.value
       ? ''
-      : `translate3d(${Math.round(ideal.x)}px, ${Math.round(ideal.y)}px, 0)`
+      : `translate3d(${ideal.x}px, ${ideal.y}px, 0)`
   }
 })
 
@@ -259,6 +274,12 @@ onBlokkliEvent('plugin:unmount', (e) => {
   }
   mountedPlugins.value = mountedPlugins.value.filter((v) => v.type !== e.id)
 })
+
+watch(ui.isTransforming, function (isTransforming) {
+  if (isTransforming) {
+    showDropdown.value = false
+  }
+})
 </script>
 
 <script lang="ts">

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

@@ -113,6 +113,7 @@ onBlokkliEvent('animationFrame', (e) => {
     ...e,
     artboardOffset: offset,
     artboardScale: scale,
+    time: e.time,
   })
 })
 

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

@@ -187,6 +187,9 @@ function onPointerDown(e: PointerEvent) {
   keyboard.setShortcutStateFromEvent(e)
 
   rootEl.removeEventListener('pointermove', onPointerMove)
+  if (state.isLoading.value) {
+    return
+  }
   rootEl.addEventListener('pointermove', onPointerMove)
 
   if (e.pointerType === 'touch') {
@@ -230,6 +233,10 @@ function onPointerUp(e: PointerEvent) {
   const wasMultiSelecting = selection.isMultiSelecting.value
   pointerDownElement = null
 
+  if (state.isLoading.value) {
+    return
+  }
+
   if (e.pointerType === 'touch') {
     return onTouchEnd(e)
   }

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

@@ -6,9 +6,27 @@
         screen
       />
     </Transition>
+
+    <div id="bk-banner-container">
+      <Messages />
+      <div v-if="!state.stateAvailable.value" class="bk-state-unavailable">
+        <h2>
+          {{
+            $t('stateUnavailableTitle', 'The edit state could not be loaded.')
+          }}
+        </h2>
+        <p>
+          {{
+            $t(
+              'stateUnavailableText',
+              'This could be due to missing permissions or a temporary problem. Please try again later.',
+            )
+          }}
+        </p>
+      </div>
+    </div>
   </Teleport>
   <Actions v-if="!isInitializing" />
-  <Messages />
   <Toolbar @loaded="toolbarLoaded = true" />
   <AppMenu v-if="toolbarLoaded" />
   <Features
@@ -107,20 +125,20 @@ const toolbarLoaded = ref(false)
 const featuresLoaded = ref(false)
 const isInitializing = ref(true)
 
+const $t = textProvider(context)
+const state = await editStateProvider(adapter, context, $t)
 const storage = storageProvider()
 const debug = debugProvider(storage)
-const features = featuresProvider()
+const features = featuresProvider(storage)
 const theme = themeProvider()
 const commands = commandsProvider()
 const tour = tourProvider()
 const dropAreas = dropAreasProvider()
 const broadcast = broadcastProvider()
-const ui = uiProvider(storage)
+const ui = uiProvider(storage, state)
 const dom = domProvider(ui, debug)
 const animation = animationProvider(ui)
 const keyboard = keyboardProvider(animation)
-const $t = textProvider(context)
-const state = await editStateProvider(adapter, context, $t)
 const selection = selectionProvider(dom)
 const types = await typesProvider(adapter, selection, context)
 

package/dist/runtime/components/Edit/Features/Artboard/index.vue

@@ -82,6 +82,8 @@ const { settings } = defineBlokkliFeature({
       type: 'checkbox',
       default: true,
       label: 'Persist position and zoom',
+      description:
+        'Stores and restores the last position and zoom factor of the artboard.',
       group: 'artboard',
       viewports: ['desktop'],
     },
@@ -89,6 +91,8 @@ const { settings } = defineBlokkliFeature({
       type: 'checkbox',
       default: true,
       label: 'Use smooth scrolling',
+      description:
+        'Applies smooth animations when scrolling or zooming the artboard.',
       group: 'artboard',
       viewports: ['desktop'],
     },

package/dist/runtime/components/Edit/Features/BlockAddList/index.vue

@@ -83,6 +83,7 @@ const { settings } = defineBlokkliFeature({
     hideDisabledBlocks: {
       type: 'checkbox',
       label: "Hide blocks that can't be added",
+      description: `Hides blocks from the "Add List" if they can't be added to anywhere.`,
       group: 'appearance',
       default: false,
     },

package/dist/runtime/components/Edit/Features/Clipboard/index.vue

@@ -92,7 +92,9 @@ const { settings, logger } = defineBlokkliFeature({
     openSidebarOnPaste: {
       type: 'checkbox',
       default: true,
-      label: 'Open sidebar when pasting from clipboard',
+      label: 'Open sidebar when pasting',
+      description:
+        'Automatically opens the sidebar when pasting content from the clipboard.',
       group: 'behavior',
     },
   },

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/index.vue

@@ -4,6 +4,7 @@
     @keydown="onKeyDown"
     @keyup.stop
     @click.stop
+    @mousemove.once="hasUsedMouse = true"
   >
     <div class="bk-command-palette-input">
       <Icon name="command" />
@@ -25,7 +26,7 @@
         :visible-ids="visibleIds"
         :focused-id="focusedId"
         @close="$emit('close')"
-        @focus="focusedId = $event"
+        @focus="onFocus"
         @select="onSelect($event)"
       />
     </div>
@@ -55,6 +56,14 @@ const emit = defineEmits(['close'])
 const inputEl = ref<HTMLInputElement | null>(null)
 const text = ref('')
 const focusedId = ref('')
+const hasUsedMouse = ref(false)
+
+function onFocus(id: string) {
+  if (!hasUsedMouse.value) {
+    return
+  }
+  focusedId.value = id
+}
 
 type GroupedCommands = {
   id: CommandGroup
@@ -251,7 +260,10 @@ const onKeyDown = (e: KeyboardEvent) => {
     } else {
       focusNext()
     }
-  } else if (e.code === 'ArrowDown') {
+  } else if (
+    e.code === 'ArrowDown' ||
+    (e.code === 'KeyJ' && (e.ctrlKey || e.metaKey))
+  ) {
     e.preventDefault()
     focusNext()
   } else if (e.code === 'ArrowUp') {

package/dist/runtime/components/Edit/Features/Debug/index.vue

@@ -51,11 +51,25 @@
               <input
                 :checked="overlay.active"
                 type="checkbox"
-                class="peer"
                 @change="debug.toggleOverlay(overlay.id)"
               />
-              <div />
-              <span>{{ overlay.label }}</span>
+              <div class="bk-checkbox-toggle-toggle" />
+              <div class="bk-checkbox-toggle-label">
+                <div>{{ overlay.label }}</div>
+              </div>
+            </label>
+          </div>
+          <div>
+            <label class="bk-checkbox-toggle">
+              <input
+                :checked="ui.isTransforming.value"
+                type="checkbox"
+                @change="toggleTransforming"
+              />
+              <div class="bk-checkbox-toggle-toggle" />
+              <div class="bk-checkbox-toggle-label">
+                <div>Set transforming</div>
+              </div>
             </label>
           </div>
         </div>
@@ -124,7 +138,7 @@ const { logger } = defineBlokkliFeature({
   description: 'Provides debugging functionality.',
 })
 
-const { keyboard, selection, eventBus, features, debug } = useBlokkli()
+const { keyboard, selection, eventBus, features, debug, ui } = useBlokkli()
 
 const iconItems = computed(() => Object.keys(icons) as BlokkliIcon[])
 
@@ -162,6 +176,14 @@ const onEvent = (name: string | number | symbol, data: any) => {
   logger.log('Event: ' + String(name), data)
 }
 
+function toggleTransforming() {
+  if (ui.isTransforming.value) {
+    ui.setTransform()
+  } else {
+    ui.setTransform('Transform plugin label')
+  }
+}
+
 onMounted(() => {
   eventBus.on('*', onEvent)
 })