@blokkli/editor 1.0.0

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

@@ -0,0 +1,163 @@
+<template>
+  <div
+    ref="rootEl"
+    class="bk bk-dialog bk-control"
+    @wheel.passive.stop
+    @keydown.stop="onKeyDown"
+    @keyup.stop
+    @touchstart.passive.stop
+    @touchmove.stop
+    @touchend.stop
+  >
+    <div class="bk-dialog-background" @click="$emit('cancel')" />
+    <div class="bk-dialog-inner" :style="style">
+      <div class="bk bk-overlay-header">
+        <Icon v-if="icon" :name="icon" />
+        <h3>{{ title }}</h3>
+        <button @click="$emit('cancel')">
+          <Icon name="close" />
+        </button>
+      </div>
+
+      <div class="bk-dialog-content">
+        <div class="bk-dialog-content-inner">
+          <div v-if="lead" class="bk bk-dialog-lead">
+            {{ lead }}
+          </div>
+          <slot />
+        </div>
+      </div>
+      <div v-if="!hideButtons" class="bk bk-dialog-footer">
+        <button
+          class="bk-button"
+          :disabled="!canSubmit"
+          :class="[
+            { 'bk-is-loading': isLoading },
+            isDanger ? 'bk-is-danger' : 'bk-is-primary',
+          ]"
+          @click="$emit('submit')"
+        >
+          {{ submitLabel }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, onMounted, computed, ref } from '#imports'
+import type { BlokkliIcon } from '#blokkli/icons'
+import { Icon } from '#blokkli/components'
+import { modulo } from '#blokkli/helpers'
+
+const { ui } = useBlokkli()
+
+const emit = defineEmits(['submit', 'cancel'])
+
+const rootEl = ref<HTMLDivElement | null>(null)
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    lead?: string
+    width?: number | string
+    submitLabel?: string
+    canSubmit?: boolean
+    isDanger?: boolean
+    isLoading?: boolean
+    hideButtons?: boolean
+    icon?: BlokkliIcon
+  }>(),
+  {
+    width: 600,
+    canSubmit: true,
+    lead: '',
+    submitLabel: '',
+    icon: undefined,
+  },
+)
+
+const style = computed(() => {
+  if (ui.isMobile.value) {
+    return {}
+  }
+
+  if (typeof props.width === 'number') {
+    return {
+      maxWidth: props.width + 'px',
+    }
+  }
+
+  return {
+    width: props.width,
+  }
+})
+
+type FocusableElement =
+  | HTMLInputElement
+  | HTMLSelectElement
+  | HTMLButtonElement
+  | HTMLTextAreaElement
+
+const getFocusableElements = (): FocusableElement[] => {
+  if (!rootEl.value) {
+    return []
+  }
+  return [
+    ...rootEl.value.querySelectorAll('input,select,button,textarea'),
+  ] as FocusableElement[]
+}
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if (e.code === 'Escape') {
+    e.preventDefault()
+    emit('cancel')
+    return
+  }
+  if (!rootEl.value || e.code !== 'Tab') {
+    return
+  }
+  const prev = e.shiftKey
+  const focusableElements = getFocusableElements().filter((el) => {
+    const style = window.getComputedStyle(el)
+    if (style.pointerEvents === 'none') {
+      return false
+    }
+
+    return !el.disabled
+  }) as HTMLElement[]
+
+  const activeIndex = Math.max(
+    focusableElements.findIndex((el) => document.activeElement === el),
+    0,
+  )
+
+  const delta = prev ? -1 : 1
+
+  const indexToFocus = modulo(activeIndex + delta, focusableElements.length)
+  const elementToFocus = focusableElements[indexToFocus]
+
+  if (elementToFocus) {
+    elementToFocus.focus()
+    e.preventDefault()
+  }
+}
+
+onMounted(() => {
+  // Focus the first best match in the dialog. That is, an element that is not a button.
+  const focusableElements = getFocusableElements()
+  const bestMatch =
+    focusableElements.find((el) => !(el instanceof HTMLButtonElement)) ||
+    focusableElements[0]
+
+  if (bestMatch) {
+    bestMatch.focus()
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'BlokkliDialog',
+}
+</script>

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

@@ -0,0 +1,439 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import { falsy, getDistance, getInteractionCoordinates } from '#blokkli/helpers'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import type { Coord, Rectangle } from '#blokkli/types'
+import { watch, ref, useBlokkli, onMounted, onBeforeUnmount } from '#imports'
+
+const { dom, eventBus, selection, keyboard, ui, animation, state } =
+  useBlokkli()
+
+const rects = ref<{ uuid: string; rect: Rectangle }[]>([])
+
+function buildRects() {
+  const visible = dom.getVisibleBlocks()
+  rects.value = visible
+    .map((uuid) => {
+      const rect = dom.getBlockRect(uuid)
+      if (!rect) {
+        return
+      }
+      return { uuid, rect }
+    })
+    .filter(falsy)
+}
+
+watch(dom.isReady, buildRects)
+
+type InteractedElement = {
+  uuid?: string
+  editableFieldName?: string
+  timestamp: number
+  x: number
+  y: number
+}
+
+let lastInteractedElement: InteractedElement | null = null
+let pointerDownElement: InteractedElement | null = null
+let mouseStartCoordinates: Coord | null = null
+
+function getInteractedElement(
+  e: MouseEvent | TouchEvent,
+): InteractedElement | null {
+  const { x, y } = getInteractionCoordinates(e)
+  const elements = document.elementsFromPoint(x, y)
+
+  let editableFieldName = ''
+  let uuid = ''
+
+  for (let i = 0; i < elements.length; i++) {
+    let el: Element = elements[i]
+
+    if (!(el instanceof HTMLElement)) {
+      continue
+    }
+
+    if (el.dataset.blokkliEditableField) {
+      editableFieldName = el.dataset.blokkliEditableField
+    }
+
+    // elementsFromPoint() does not contain the <tr> element if the deepest element is a <td> or <th>.
+    // In this case, we have to use direct parent element which is always going to be <tr>.
+    // This fixes the scenario where the root element of a block is a <tr>.
+    if (el instanceof HTMLTableCellElement) {
+      const parent = el.parentElement
+      if (parent instanceof HTMLTableRowElement) {
+        el = parent
+      }
+    }
+
+    if (!(el instanceof HTMLElement)) {
+      continue
+    }
+
+    if (!el.dataset.uuid) {
+      continue
+    }
+    const block = dom.findBlock(el.dataset.uuid)
+    if (!block) {
+      continue
+    }
+    const draggableEl = dom.getDragElement(block)
+    if (draggableEl && el !== draggableEl && !elements.includes(draggableEl)) {
+      continue
+    }
+    uuid = el.dataset.uuid
+    break
+  }
+
+  if (editableFieldName || uuid) {
+    return { editableFieldName, uuid, timestamp: Date.now(), x, y }
+  }
+
+  return null
+}
+
+function onPointerMove(e: PointerEvent) {
+  e.preventDefault()
+  e.stopPropagation()
+  e.stopImmediatePropagation()
+  animation.setMouseCoords(e.clientX, e.clientY)
+  if (keyboard.isPressingSpace.value || state.editMode.value !== 'editing') {
+    return
+  }
+  if (e.pointerType === 'touch') {
+    return onTouchMove(e)
+  }
+  if (e.buttons !== 1) {
+    return
+  }
+  if (
+    !pointerDownElement ||
+    !mouseStartCoordinates ||
+    selection.isDragging.value ||
+    keyboard.isPressingSpace.value ||
+    selection.isMultiSelecting.value
+  ) {
+    return
+  }
+
+  const diffX = Math.abs(mouseStartCoordinates.x - e.clientX)
+  const diffY = Math.abs(mouseStartCoordinates.y - e.clientY)
+  // Only start dragging if at least 6px in any direction were moved.
+  if (diffX < 6 && diffY < 6) {
+    return
+  }
+
+  const interacted = getInteractedElement(e)
+  if (interacted && interacted.uuid) {
+    // The interacted block is part of the current selection.
+    if (selection.uuids.value.includes(interacted.uuid)) {
+      eventBus.emit('dragging:start', {
+        items: [...selection.blocks.value],
+        coords: { x: e.clientX, y: e.clientY },
+        mode: 'mouse',
+      })
+    } else {
+      const block = dom.findBlock(interacted.uuid)
+      if (block) {
+        eventBus.emit('dragging:start', {
+          items: [block],
+          coords: { x: e.clientX, y: e.clientY },
+          mode: 'mouse',
+        })
+      }
+    }
+  }
+}
+
+let pointerDownTimestamp = 0
+
+function onPointerDown(e: PointerEvent) {
+  if (!keyboard.isPressingSpace.value) {
+    e.preventDefault()
+    e.stopPropagation()
+    e.stopImmediatePropagation()
+  }
+
+  // If we are already dragging, return.
+  // This might be the case if a dragging:start event was manually triggered,
+  // e.g. when selecting a draggable item using the keyboard.
+  if (selection.isDragging.value) {
+    return
+  }
+  if (e.pointerType === 'touch') {
+    return onTouchStart(e)
+  }
+  pointerDownTimestamp = Date.now()
+  const coords = { x: e.clientX, y: e.clientY }
+
+  const interacted = getInteractedElement(e)
+  pointerDownElement = interacted
+  if (interacted) {
+    return
+  }
+  mouseStartCoordinates = coords
+  eventBus.emit('mouse:down', { ...coords, type: 'mouse', distance: 0 })
+}
+
+function onPointerUp(e: PointerEvent) {
+  e.preventDefault()
+  e.stopPropagation()
+  e.stopImmediatePropagation()
+  // This is required because emitting the mouse:up event would set this value to false.
+  const wasDragging = selection.isDragging.value
+  const wasMultiSelecting = selection.isMultiSelecting.value
+  pointerDownElement = null
+
+  if (e.pointerType === 'touch') {
+    return onTouchEnd(e)
+  }
+  const coords = getInteractionCoordinates(e)
+  const distance = mouseStartCoordinates
+    ? getDistance(mouseStartCoordinates, coords)
+    : 0
+  eventBus.emit('mouse:up', {
+    x: e.clientX,
+    y: e.clientY,
+    type: 'mouse',
+    distance,
+    duration: Date.now() - pointerDownTimestamp,
+  })
+
+  // Prevents selecting the block under the current pointer position when dragging or multi selecting is ending.
+  if (wasDragging || wasMultiSelecting) {
+    eventBus.emit('dragging:end')
+    return
+  }
+  if (keyboard.isPressingSpace.value) {
+    return
+  }
+  if (selection.editableActive.value) {
+    eventBus.emit('window:clickAway')
+    lastInteractedElement = null
+    return
+  }
+  const clicked = getInteractedElement(e)
+
+  // Handle double clicking.
+  if (
+    clicked &&
+    lastInteractedElement &&
+    (clicked.uuid === lastInteractedElement.uuid ||
+      clicked.editableFieldName === lastInteractedElement.editableFieldName)
+  ) {
+    const deltaTime = Date.now() - pointerDownTimestamp
+    const deltaX = Math.abs(lastInteractedElement.x - e.clientX)
+    const deltaY = Math.abs(lastInteractedElement.y - e.clientY)
+    if (deltaTime < 400 && deltaX < 3 && deltaY < 3) {
+      if (clicked.editableFieldName) {
+        eventBus.emit('editable:focus', {
+          fieldName: clicked.editableFieldName,
+          uuid: clicked.uuid,
+        })
+        return
+      }
+      if (lastInteractedElement.uuid) {
+        const block = dom.findBlock(lastInteractedElement.uuid)
+        if (!block) {
+          return
+        }
+        eventBus.emit('item:edit', {
+          uuid: lastInteractedElement.uuid,
+          bundle: block.itemBundle,
+        })
+      }
+    }
+  }
+  lastInteractedElement = clicked
+  if (clicked?.uuid) {
+    dom.refreshBlockRect(clicked.uuid)
+    if (keyboard.isPressingControl.value || selection.isMultiSelecting.value) {
+      // Toggle the clicked block.
+      eventBus.emit('select:toggle', clicked.uuid)
+    } else if (keyboard.isPressingShift.value) {
+      eventBus.emit('select:shiftToggle', clicked.uuid)
+    } else {
+      eventBus.emit('select', clicked.uuid)
+    }
+    return
+  }
+  eventBus.emit('window:clickAway')
+}
+
+let longPressTimeout: any = null
+
+let touchStartInteraction: InteractedElement | null = null
+let touchStartCoords: Coord | null = null
+let longPressInteraction: InteractedElement | null = null
+
+let touchStartTimestamp = 0
+
+function onTouchStart(e: PointerEvent) {
+  if (e.isPrimary) {
+    touchStartTimestamp = Date.now()
+  }
+  longPressInteraction = null
+  const coords = getInteractionCoordinates(e)
+  touchStartCoords = coords
+  eventBus.emit('mouse:down', { ...coords, type: 'touch', distance: 0 })
+  if (selection.isDragging.value) {
+    return
+  }
+  clearTimeout(longPressTimeout)
+
+  const interacted = getInteractedElement(e)
+  if (!interacted?.uuid) {
+    return
+  }
+
+  touchStartInteraction = interacted
+
+  longPressTimeout = setTimeout(() => {
+    // Block is already selected. Start dragging.
+    if (touchStartInteraction?.uuid) {
+      longPressInteraction = touchStartInteraction
+      if (
+        selection.uuids.value.includes(touchStartInteraction.uuid) &&
+        state.editMode.value === 'editing'
+      ) {
+        eventBus.emit('dragging:start', {
+          items: [...selection.blocks.value],
+          coords: {
+            x: touchStartInteraction.x,
+            y: touchStartInteraction.y,
+          },
+          mode: 'touch',
+        })
+        return
+      }
+
+      // Start multiselecting.
+      eventBus.emit('select:start', {
+        uuids: [...selection.uuids.value, touchStartInteraction.uuid],
+        mode: 'touch',
+      })
+    }
+  }, 500)
+}
+
+function onTouchMove(e: PointerEvent) {
+  if (!longPressTimeout || !touchStartInteraction) {
+    return
+  }
+  const coords = getInteractionCoordinates(e)
+
+  const deltaX = Math.abs(coords.x - touchStartInteraction.x)
+  const deltaY = Math.abs(coords.y - touchStartInteraction.y)
+
+  if (deltaX > 10 || deltaY > 10) {
+    clearTimeout(longPressTimeout)
+    longPressTimeout = null
+  }
+}
+
+function onTouchEnd(e: PointerEvent) {
+  const wasDragging = selection.isDragging.value
+  const coords = getInteractionCoordinates(e)
+  const distance = touchStartCoords ? getDistance(touchStartCoords, coords) : 0
+  if (e.isPrimary) {
+    eventBus.emit('mouse:up', {
+      ...coords,
+      type: 'touch',
+      distance,
+      duration: Date.now() - touchStartTimestamp,
+    })
+  }
+  clearTimeout(longPressTimeout)
+  longPressTimeout = null
+  if (wasDragging) {
+    return
+  }
+  if (!touchStartCoords) {
+    return
+  }
+
+  // If the distance is abve this value, don't do anything. The user is likely scrolling.
+  if (distance > 7) {
+    return
+  }
+  const interacted = getInteractedElement(e)
+  if (interacted?.uuid) {
+    // Prevent unselecting the block after a long press interaction, which has already selected the block.
+    if (longPressInteraction && longPressInteraction.uuid === interacted.uuid) {
+      return
+    }
+    if (selection.isMultiSelecting.value) {
+      eventBus.emit('select:toggle', interacted.uuid)
+    } else {
+      eventBus.emit('select', interacted.uuid)
+    }
+  } else {
+    eventBus.emit('window:clickAway')
+  }
+  longPressInteraction = null
+}
+
+onBlokkliEvent('dragging:start', (e) => {
+  mouseStartCoordinates = e.coords
+})
+
+function onClick(e: MouseEvent) {
+  e.preventDefault()
+  e.stopImmediatePropagation()
+  e.stopPropagation()
+}
+
+onMounted(() => {
+  const el = ui.rootElement()
+  const providerElement = ui.providerElement()
+
+  providerElement.addEventListener('click', onClick, {
+    capture: true,
+  })
+
+  el.addEventListener('click', onClick, {
+    capture: true,
+  })
+
+  el.addEventListener('pointerdown', onPointerDown, {
+    capture: true,
+  })
+
+  el.addEventListener('pointermove', onPointerMove, {
+    capture: true,
+  })
+
+  el.addEventListener('pointerup', onPointerUp, {
+    capture: true,
+  })
+})
+
+onBeforeUnmount(() => {
+  const el = ui.rootElement()
+  const providerElement = ui.providerElement()
+
+  providerElement.removeEventListener('click', onClick, {
+    capture: true,
+  })
+
+  el.removeEventListener('click', onClick, {
+    capture: true,
+  })
+
+  el.removeEventListener('pointerdown', onPointerDown, {
+    capture: true,
+  })
+
+  el.removeEventListener('pointermove', onPointerMove, {
+    capture: true,
+  })
+
+  el.removeEventListener('pointerup', onPointerUp, {
+    capture: true,
+  })
+})
+</script>

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

@@ -0,0 +1,110 @@
+<template>
+  <Component
+    :is="tag"
+    ref="root"
+    class="bk-draggable-list-container"
+    :data-field-name="name"
+    :data-field-label="fieldConfig?.label"
+    :data-field-is-nested="isNested"
+    :data-host-entity-type="entity.type"
+    :data-host-entity-uuid="entity.uuid"
+    :data-host-entity-bundle="entity.bundle"
+    :data-field-key="fieldKey"
+    :data-field-drop-alignment="dropAlignment"
+    :data-allowed-fragments="
+      allowedFragments ? allowedFragments.join(',') : undefined
+    "
+    :data-field-allowed-bundles="allowedBundles"
+    :data-field-list-type="fieldListType"
+    :data-field-cardinality="fieldConfig?.cardinality"
+  >
+    <BlokkliItem
+      v-for="(item, i) in list"
+      :key="item.uuid"
+      :uuid="item.uuid"
+      :bundle="item.bundle"
+      :is-new="item.isNew"
+      :options="item.options"
+      :props="item.props"
+      is-editing
+      :index="i"
+      :parent-type="isNested ? entity.bundle : ''"
+      data-editing="true"
+      data-element-type="existing"
+      :data-sortli-id="item.uuid"
+      :data-uuid="item.uuid"
+      :data-host-type="entity.type"
+      :data-host-bundle="entity.bundle"
+      :data-host-uuid="entity.uuid"
+      :data-item-bundle="item.bundle"
+      :data-host-field-name="name"
+      :data-host-field-list-type="fieldListType"
+      :data-is-nested="isNested"
+      :data-is-new="item.isNew"
+      :data-entity-type="runtimeConfig.itemEntityType"
+    />
+  </Component>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli, ref, onMounted, onBeforeUnmount } from '#imports'
+import type { FieldListItem, EntityContext, FieldConfig } from '#blokkli/types'
+import type { BlokkliFragmentName } from '#blokkli/definitions'
+import BlokkliItem from './../BlokkliItem.vue'
+
+const { dom, types, runtimeConfig } = useBlokkli()
+
+const root = ref<HTMLElement | null>(null)
+
+const props = defineProps<{
+  name: string
+  fieldKey: string
+  list: FieldListItem[]
+  entity: EntityContext
+  tag?: string
+  isNested: boolean
+  fieldListType: string
+  allowedFragments?: BlokkliFragmentName[]
+  dropAlignment?: 'vertical' | 'horizontal'
+}>()
+
+const fieldConfig = computed<FieldConfig>(() => {
+  const match = types.getFieldConfig(
+    props.entity.type,
+    props.entity.bundle,
+    props.name,
+  )
+
+  if (!match) {
+    throw new Error(
+      `Missing field configuration for field "${props.name}" on entity type "${props.entity.type}" with bundle "${props.entity.bundle}". Make sure the "name" prop passed to <BlokkliField> is correct.`,
+    )
+  }
+
+  return match
+})
+
+/**
+ * The allowed item bundles in this list.
+ */
+const allowedBundles = computed<string>(() => {
+  const bundles = fieldConfig.value.allowedBundles
+  if (!bundles.length) {
+    console.error(
+      `Field with name "${props.name}" on entity "${props.entity.type}" with bundle "${props.entity.bundle}" does not define any allowed bundles.`,
+    )
+  }
+
+  return bundles.join(',')
+})
+
+onMounted(() => {
+  if (root.value) {
+    dom.registerField(props.entity.uuid, props.name, root.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  dom.unregisterField(props.entity.uuid, props.name)
+})
+</script>