@blokkli/editor 1.0.0

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/vertex.glsl

@@ -0,0 +1,57 @@
+precision mediump float;
+
+attribute vec2 a_position;
+attribute vec4 a_quad;
+attribute float a_rect_id;
+attribute float a_rect_type;
+
+uniform float u_scale;
+uniform float u_offset_x;
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+uniform float u_active_rect_id;
+uniform vec3 u_color_field_default;
+uniform vec3 u_color_field_active;
+uniform vec3 u_color_area_default;
+uniform vec3 u_color_area_active;
+uniform float u_dpi;
+
+varying vec4 v_quad;
+varying float v_intersecting;
+varying vec3 v_color_default;
+varying vec3 v_color_active;
+
+void main() {
+  vec2 offsetPosition = a_position * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  vec2 normalizedPosition = offsetPosition / u_resolution;
+
+  // Transform to screen space (-1 to 1)
+  vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+  screenSpacePosition.y = -screenSpacePosition.y;
+
+  // Output final position in clip space
+  gl_Position = vec4(screenSpacePosition, 0.0, 1.0);
+  v_intersecting = a_rect_id == u_active_rect_id ? 1.0 : 0.0;
+
+  // Transform the quad.
+  vec4 transformed_quad = vec4(
+    (a_quad.x * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y - a_quad.y * u_scale - a_quad.w * u_scale - u_offset_y) *
+      u_dpi,
+    a_quad.z * u_scale * u_dpi,
+    a_quad.w * u_scale * u_dpi
+  );
+  v_quad = transformed_quad;
+
+  // Set correct colors based on type.
+  if (a_rect_type < 0.5) {
+    v_color_default = u_color_field_default;
+    v_color_active = u_color_field_active;
+  } else {
+    v_color_default = u_color_area_default;
+    v_color_active = u_color_area_active;
+  }
+}

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

@@ -0,0 +1,410 @@
+<template>
+  <DropTargets
+    v-if="dragItems.length && isVisible"
+    v-slot="{ color, label }"
+    :items="dragItems"
+    :box="box"
+    :mouse-x="mouseX"
+    :mouse-y="mouseY"
+    :is-touch="isTouching"
+  >
+    <DragItems
+      ref="dragItemsComponent"
+      :x="mouseX"
+      :y="mouseY"
+      :start-coords="startCoords"
+      :items="dragItems"
+      :is-touch="isTouching"
+      :active-color="color"
+      :active-label="label"
+    />
+  </DropTargets>
+</template>
+
+<script lang="ts" setup>
+import DragItems from './DragItems/index.vue'
+import DropTargets from './DropTargets/index.vue'
+import {
+  ref,
+  useBlokkli,
+  onUnmounted,
+  defineBlokkliFeature,
+  nextTick,
+} from '#imports'
+
+import type {
+  DropTargetEvent,
+  BlokkliDefinitionAddBehaviour,
+  BlokkliFieldElement,
+  Coord,
+  DraggableActionItem,
+  DraggableClipboardItem,
+  DraggableExistingBlock,
+  DraggableHostData,
+  DraggableItem,
+  DraggableMediaLibraryItem,
+  DraggableReusableItem,
+  DraggableSearchContentItem,
+  Rectangle,
+  DraggableExistingStructureBlock,
+} from '#blokkli/types'
+import { getDefinition } from '#blokkli/definitions'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+const { adapter } = defineBlokkliFeature({
+  icon: 'drag',
+  id: 'dragging-overlay',
+  label: 'Dragging Overlay',
+  description: 'Renders an overlay when dragging or placing a block.',
+  screenshot: 'feature-dragging-overlay.jpg',
+})
+
+const { eventBus, state, ui, animation, dom, selection } = useBlokkli()
+
+const dragItemsComponent = ref<InstanceType<typeof DragItems> | null>(null)
+const isVisible = ref(false)
+const isTouching = ref(false)
+const mouseX = ref(0)
+const mouseY = ref(0)
+const startCoords = ref<Coord>({
+  x: 0,
+  y: 0,
+})
+
+const box = ref<Rectangle>({
+  x: 0,
+  y: 0,
+  width: 10,
+  height: 10,
+})
+
+const dragItems = ref<DraggableItem[]>([])
+
+function isSameItemType(items: DraggableItem[]): boolean {
+  return items.every((item) => item.itemType === items[0].itemType)
+}
+
+type FilteredItemType<T extends DraggableItem> = T extends {
+  itemType: 'existing'
+}
+  ? { itemType: 'existing'; items: T[] }
+  : T extends { itemType: 'existing_structure' }
+    ? { itemType: 'existing_structure'; items: T[] }
+    : { itemType: T['itemType']; item: T }
+
+function filterItemType<T extends DraggableItem>(
+  items: T[],
+): FilteredItemType<T> {
+  if (!items.length) {
+    throw new Error('Items array is empty')
+  }
+
+  if (!isSameItemType(items)) {
+    throw new Error('Items of different types')
+  }
+
+  const itemType = items[0].itemType
+
+  if (itemType === 'existing' || itemType === 'existing_structure') {
+    return { itemType, items } as any
+  }
+
+  if (items.length > 1) {
+    throw new Error(`Only a single item of type '${itemType}' is allowed.`)
+  }
+
+  return { itemType, item: items[0] } as FilteredItemType<T>
+}
+
+const onDropNew = async (
+  bundle: string,
+  host: DraggableHostData,
+  afterUuid?: string,
+) => {
+  const field = dom.findField(host.uuid, host.fieldName)
+  if (!field) {
+    throw new Error(
+      `Failed to locate field with name "${host.fieldName}" on UUID "${host.uuid}"`,
+    )
+  }
+  const definition = getDefinition(
+    bundle,
+    field.fieldListType,
+    field.hostEntityBundle as any,
+  )
+  const addBehaviour: BlokkliDefinitionAddBehaviour =
+    definition?.editor?.addBehaviour || 'form'
+  if (
+    definition?.editor?.disableEdit ||
+    addBehaviour === 'no-form' ||
+    addBehaviour.startsWith('editable:') ||
+    !adapter.formFrameBuilder
+  ) {
+    await state.mutateWithLoadingState(() =>
+      adapter.addNewBlock({
+        bundle,
+        host,
+        afterUuid,
+      }),
+    )
+  } else {
+    eventBus.emit('add:block:new', {
+      bundle,
+      host,
+      afterUuid,
+    })
+  }
+}
+
+const onDropExisting = async (
+  items: Array<DraggableExistingBlock | DraggableExistingStructureBlock>,
+  host: DraggableHostData,
+  afterUuid?: string,
+) => {
+  const uuids = items.map((v) => v.uuid)
+  await state.mutateWithLoadingState(() =>
+    adapter.moveMultipleBlocks({
+      uuids,
+      afterUuid,
+      host,
+    }),
+  )
+
+  if (ui.isMobile.value) {
+    eventBus.emit('scrollIntoView', {
+      uuid: uuids[0],
+      center: true,
+    })
+  }
+}
+
+const onDropReusable = async (
+  item: DraggableReusableItem,
+  host: DraggableHostData,
+  afterUuid?: string,
+) => {
+  await state.mutateWithLoadingState(() =>
+    adapter.addLibraryItem({
+      libraryItemUuid: item.libraryItemUuid,
+      host,
+      afterUuid,
+    }),
+  )
+}
+
+const onDropClipboardItem = async (
+  item: DraggableClipboardItem,
+  host: DraggableHostData,
+  afterUuid?: string,
+) => {
+  eventBus.emit('drop:clipboardItem', {
+    id: item.clipboardId,
+    host,
+    blockBundle: item.itemBundle,
+    afterUuid,
+  })
+}
+
+const onDropMediaLibraryItem = async (
+  item: DraggableMediaLibraryItem,
+  host: DraggableHostData,
+  afterUuid?: string,
+) => {
+  if (adapter.mediaLibraryAddBlock) {
+    await state.mutateWithLoadingState(() =>
+      adapter.mediaLibraryAddBlock({
+        preceedingUuid: afterUuid,
+        host,
+        item,
+      }),
+    )
+  }
+}
+
+const onDropSearchContentItem = async (
+  item: DraggableSearchContentItem,
+  host: DraggableHostData,
+  afterUuid?: string,
+) => {
+  await state.mutateWithLoadingState(() =>
+    adapter.addContentSearchItem({
+      item: item.searchItem,
+      host,
+      bundle: item.itemBundle,
+      afterUuid,
+    }),
+  )
+}
+
+const onDropAction = (
+  action: DraggableActionItem,
+  host: DraggableHostData,
+  field: BlokkliFieldElement,
+  afterUuid?: string,
+) => {
+  eventBus.emit('action:placed', {
+    preceedingUuid: afterUuid,
+    action,
+    host,
+    field,
+  })
+}
+
+const onDrop = (e: DropTargetEvent) => {
+  mouseX.value = 0
+  mouseY.value = 0
+
+  nextTick(async () => {
+    const afterUuid = e.preceedingUuid
+    const host = e.host
+    const typed = filterItemType(e.items)
+    if (
+      typed.itemType === 'existing' ||
+      typed.itemType === 'existing_structure'
+    ) {
+      await onDropExisting(typed.items, host, afterUuid)
+    } else if (typed.itemType === 'new') {
+      await onDropNew(typed.item.itemBundle, host, afterUuid)
+    } else if (typed.itemType === 'reusable') {
+      await onDropReusable(typed.item, host, afterUuid)
+    } else if (typed.itemType === 'clipboard') {
+      await onDropClipboardItem(typed.item, host, afterUuid)
+    } else if (typed.itemType === 'search_content') {
+      await onDropSearchContentItem(typed.item, host, afterUuid)
+    } else if (typed.itemType === 'action') {
+      onDropAction(typed.item, host, e.field, afterUuid)
+    } else if (typed.itemType === 'media_library') {
+      await onDropMediaLibraryItem(typed.item, host, afterUuid)
+    }
+
+    eventBus.emit('dragging:end')
+    eventBus.emit('item:dropped')
+
+    // @TODO: Reimplement feature.
+    // Try to find the new block that has been added.
+    const newUuid =
+      state.mutations.value[state.mutations.value.length - 1]?.plugin
+        ?.affectedItemUuid
+    if (!newUuid) {
+      return
+    }
+    const newBlock = dom.findBlock(newUuid)
+    if (!newBlock) {
+      return
+    }
+
+    const allSelected = [...selection.uuids.value, newBlock.uuid]
+
+    eventBus.emit('select', allSelected)
+
+    if (typed.itemType !== 'new') {
+      return
+    }
+
+    const definition = getDefinition(
+      newBlock.itemBundle,
+      newBlock.hostFieldListType,
+    )
+
+    if (!definition?.editor?.addBehaviour?.startsWith('editable:')) {
+      return
+    }
+
+    const editableField = definition.editor.addBehaviour.split(':')[1]
+
+    if (!editableField) {
+      return
+    }
+
+    const editableFieldElement = newBlock
+      .element()
+      .querySelector(`[data-blokkli-editable-field="${editableField}"]`)
+    if (!(editableFieldElement instanceof HTMLElement)) {
+      return
+    }
+
+    eventBus.emit('editable:focus', {
+      fieldName: editableField,
+      uuid: newUuid,
+    })
+  })
+}
+
+onBlokkliEvent('dragging:drop', onDrop)
+
+function loop() {
+  if (!isVisible.value) {
+    isVisible.value = true
+  }
+
+  if (!dragItemsComponent.value) {
+    return
+  }
+
+  box.value = dragItemsComponent.value.getRect()
+}
+
+const onMouseUp = (e: MouseEvent) => {
+  e.preventDefault()
+  e.stopPropagation()
+  if (!ui.isMobile.value) {
+    eventBus.emit('dragging:end')
+  }
+}
+
+function onMouseMove(e: MouseEvent) {
+  mouseX.value = e.clientX
+  mouseY.value = e.clientY
+}
+
+onBlokkliEvent('dragging:start', (e) => {
+  isTouching.value = e.mode === 'touch'
+  startCoords.value = e.coords
+  animation.requestDraw()
+  const item = e.items[0]
+  if (!item) {
+    return
+  }
+  if ('element' in item) {
+    eventBus.on('animationFrame', loop)
+    if (!isTouching.value) {
+      document.removeEventListener('pointerup', onMouseUp)
+      document.addEventListener('pointerup', onMouseUp)
+      document.removeEventListener('pointermove', onMouseMove, {
+        capture: true,
+      })
+      document.addEventListener('pointermove', onMouseMove, { capture: true })
+    }
+  }
+  dragItems.value = e.items
+})
+
+onBlokkliEvent('dragging:end', () => {
+  isVisible.value = false
+  dragItems.value = []
+  eventBus.off('animationFrame', loop)
+  document.removeEventListener('pointerup', onMouseUp)
+  document.removeEventListener('pointermove', onMouseMove, { capture: true })
+})
+
+onBlokkliEvent('keyPressed', (e) => {
+  if (e.code === 'Escape') {
+    eventBus.emit('dragging:end')
+  }
+})
+
+onBlokkliEvent('block:append', (e) => {
+  onDropNew(e.bundle, e.host, e.afterUuid)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('pointerup', onMouseUp)
+  document.removeEventListener('pointermove', onMouseMove, { capture: true })
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DraggingOverlay',
+}
+</script>

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

@@ -0,0 +1,109 @@
+<template>
+  <PluginItemAction
+    id="duplicate"
+    :title="$t('duplicate', 'Duplicate')"
+    :disabled="!canDuplicate"
+    meta
+    key-code="D"
+    multiple
+    icon="duplicate"
+    :weight="-90"
+    @click="onClick"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
+
+import type {
+  BlokkliFieldElement,
+  DraggableExistingBlock,
+} from '#blokkli/types'
+import { PluginItemAction } from '#blokkli/plugins'
+
+const { state, $t, selection, dom } = useBlokkli()
+
+const { adapter } = defineBlokkliFeature({
+  id: 'duplicate',
+  icon: 'duplicate',
+  label: 'Duplicate',
+  requiredAdapterMethods: ['duplicateBlocks'],
+  description: 'Provides an action to duplicate one or more blocks in place.',
+})
+
+function onClick(items: DraggableExistingBlock[]) {
+  state.mutateWithLoadingState(
+    () => adapter.duplicateBlocks(items.map((v) => v.uuid)),
+    $t('duplicateError', 'The items could not be duplicated.'),
+  )
+}
+
+const findField = (uuid: string): BlokkliFieldElement | undefined => {
+  try {
+    return dom.getBlockField(uuid)
+  } catch (_e) {
+    // Noop.
+  }
+}
+
+const canDuplicate = computed<boolean>(() => {
+  if (state.editMode.value !== 'editing') {
+    return false
+  }
+
+  const blocksByField: Record<string, DraggableExistingBlock[]> = {}
+  const fieldsByKey: Record<string, BlokkliFieldElement> = {}
+
+  const selectedCount = selection.blocks.value.length
+  for (let i = 0; i < selectedCount; i++) {
+    const block = selection.blocks.value[i]
+    const field = findField(block.uuid)
+    if (!field) {
+      return false
+    }
+
+    const count = state.getFieldBlockCount(field.key)
+
+    // Early return if the field is already full.
+    if (field.cardinality !== -1 && count >= field.cardinality) {
+      return false
+    }
+
+    if (!blocksByField[field.key]) {
+      blocksByField[field.key] = []
+    }
+    blocksByField[field.key].push(block)
+    fieldsByKey[field.key] = field
+  }
+
+  const entries = Object.entries(blocksByField)
+  for (let i = 0; i < entries.length; i++) {
+    const [fieldKey, blocks] = entries[i]
+    const field = fieldsByKey[fieldKey]
+    const count = state.getFieldBlockCount(field.key)
+    // Check cardinality of the field.
+    if (field.cardinality !== -1 && count + blocks.length > field.cardinality) {
+      return false
+    }
+
+    // Check if all bundles are allowed in the field. The restrictions may
+    // have changed and the block to be duplicated isn't allowed anymore in
+    // the field.
+    const bundles = blocks.map((v) => v.itemBundle)
+    if (
+      !field.allowedBundles.length ||
+      bundles.some((bundle) => !field.allowedBundles.includes(bundle))
+    ) {
+      return false
+    }
+  }
+
+  return true
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Duplicate',
+}
+</script>

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

@@ -0,0 +1,63 @@
+<template>
+  <PluginItemAction
+    id="edit"
+    :title="$t('edit', 'Edit')"
+    :disabled="disabled"
+    meta
+    key-code="E"
+    icon="edit"
+    :weight="-100"
+    @click="onClick"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
+import type { DraggableExistingBlock } from '#blokkli/types'
+import { PluginItemAction } from '#blokkli/plugins'
+import { getDefinition } from '#blokkli/definitions'
+
+defineBlokkliFeature({
+  id: 'edit',
+  icon: 'edit',
+  label: 'Edit',
+  description: 'Provides an action to edit a block.',
+  requiredAdapterMethods: ['formFrameBuilder'],
+})
+
+const { eventBus, selection, state, $t } = useBlokkli()
+
+const disabled = computed(() => {
+  if (state.editMode.value !== 'editing') {
+    return true
+  }
+  if (selection.blocks.value.length !== 1) {
+    return true
+  }
+
+  const block = selection.blocks.value[0]
+  const definition = getDefinition(
+    block.itemBundle,
+    block.hostFieldListType,
+    block.parentBlockBundle,
+  )
+  return definition?.editor?.disableEdit === true
+})
+
+function onClick(items: DraggableExistingBlock[]) {
+  if (items.length !== 1) {
+    return
+  }
+
+  eventBus.emit('item:edit', {
+    uuid: items[0].uuid,
+    bundle: items[0].itemBundle,
+  })
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Edit',
+}
+</script>

package/dist/runtime/components/Edit/Features/EditForm/Frame/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="bk-form-overlay-iframe"
+    @scroll.stop
+    @touchstart.stop.capture.prevent
+    @touchmove.stop.capture.prevent
+  >
+    <iframe ref="iframe" allowtransparency :src="url" @load="onIFrameLoad" />
+    <Transition name="bk-loading">
+      <Loading v-if="!isLoaded" />
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, useBlokkli, onUnmounted, onMounted } from '#imports'
+import type { AdapterFormFrameBuilder } from '#blokkli/adapter'
+import { Loading } from '#blokkli/components'
+
+const { eventBus } = useBlokkli()
+
+const iframe = ref<HTMLIFrameElement | null>(null)
+const isLoaded = ref(false)
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const props = defineProps<{
+  url: string
+  form: AdapterFormFrameBuilder
+}>()
+
+function onIFrameLoad() {
+  isLoaded.value = true
+  if (iframe.value?.contentWindow) {
+    iframe.value.contentWindow?.focus()
+  }
+}
+
+function onMessage(e: MessageEvent): void {
+  if (!e.data || typeof e.data !== 'object') {
+    return
+  }
+  if (e.data.event !== 'BLOKKLI') {
+    return
+  }
+
+  const { action } = e.data
+
+  if (action === 'SAVE') {
+    if (
+      props.form.id === 'entity:edit' ||
+      props.form.id === 'entity:translate'
+    ) {
+      eventBus.emit('reloadEntity')
+    } else {
+      eventBus.emit('reloadState')
+    }
+    emit('close')
+  } else if (action === 'CANCEL') {
+    emit('close')
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('message', onMessage)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('message', onMessage)
+})
+</script>