@blokkli/editor 1.0.0

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

@@ -0,0 +1,223 @@
+<template>
+  <slot :mutated-entity="mutatedEntity" />
+</template>
+
+<script lang="ts" setup generic="T">
+import {
+  ref,
+  reactive,
+  computed,
+  provide,
+  onMounted,
+  onBeforeUnmount,
+  useRouter,
+  useAsyncData,
+} from '#imports'
+import type {
+  MutatedOptions,
+  MutatedField,
+  UpdateBlockOptionEvent,
+  ItemEditContext,
+} from '#blokkli/types'
+import '#blokkli/styles'
+import getAdapter from '#blokkli/compiled-edit-adapter'
+import {
+  INJECT_EDIT_CONTEXT,
+  INJECT_IS_PREVIEW,
+  INJECT_MUTATED_FIELDS_MAP,
+} from '#blokkli/helpers/symbols'
+import { frameEventBus } from '#blokkli/helpers/frameEventBus'
+import broadcastProvider from '#blokkli/helpers/broadcastProvider'
+import { getFieldKey, intersects } from '#blokkli/helpers'
+import type { AdapterContext } from '../../adapter'
+import { eventBus } from '#blokkli/helpers/eventBus'
+
+const props = defineProps<{
+  entity?: T
+  entityType: string
+  entityUuid: string
+  entityBundle: string
+  language: string
+}>()
+
+const context = computed<AdapterContext>(() => {
+  return {
+    entityType: props.entityType,
+    entityBundle: props.entityBundle,
+    entityUuid: props.entityUuid,
+    language: props.language,
+  }
+})
+const adapter = await getAdapter(context)
+const router = useRouter()
+const broadcast = broadcastProvider()
+
+let timeout: any = null
+let lastChanged: number = 0
+const mutatedFieldsMap = reactive<Record<string, MutatedField | undefined>>({})
+const mutatedOptions = reactive<MutatedOptions>({})
+const mutatedEntityFromState = ref<T | null>(null)
+
+const mutatedEntity = computed(
+  () => mutatedEntityFromState.value || props.entity,
+)
+
+const { data, refresh } = await useAsyncData(() =>
+  adapter.loadState().then((v) => adapter.mapState(v)),
+)
+
+function updateMutatedFields(fields: MutatedField[]) {
+  fields.forEach((field) => {
+    const key = getFieldKey(field.entityUuid, field.name)
+    mutatedFieldsMap[key] = field
+  })
+}
+
+const updateState = () => {
+  const fields = data.value?.mutatedState?.fields || []
+  updateMutatedFields(fields)
+  mutatedEntityFromState.value = data.value?.mutatedEntity
+
+  const options = (mutatedOptions.value =
+    data.value?.mutatedState?.mutatedOptions || {})
+  const optionKeys = Object.keys(options)
+
+  for (let i = 0; i < optionKeys.length; i++) {
+    const key = optionKeys[i]
+    const newOptions = options[key]
+    const existing = mutatedOptions[key]
+    if (!existing || JSON.stringify(existing) !== JSON.stringify(newOptions)) {
+      mutatedOptions[key] = newOptions
+    }
+  }
+}
+
+updateState()
+
+provide(INJECT_MUTATED_FIELDS_MAP, mutatedFieldsMap)
+provide(INJECT_IS_PREVIEW, true)
+provide<ItemEditContext>(INJECT_EDIT_CONTEXT, {
+  mutatedOptions,
+  eventBus,
+})
+
+/**
+ * Listen to window messages and emit the matching frameEventBus event.
+ */
+function onMessage(e: MessageEvent) {
+  if (
+    e.data &&
+    typeof e.data === 'object' &&
+    e.data.name &&
+    typeof e.data.name === 'string' &&
+    e.data.name.startsWith('blokkli__')
+  ) {
+    const name = e.data.name.replace('blokkli__', '')
+    const data = e.data.data
+    frameEventBus.emit(name, data)
+  }
+}
+
+const onMouseDown = () => {
+  broadcast.emit('previewFocused')
+}
+
+/**
+ * Check the last changed date and update the mutated state if there is an
+ * update.
+ */
+function checkChangedDate() {
+  clearTimeout(timeout)
+
+  const delay = adapter.getLastChanged ? 1000 : 5000
+
+  timeout = setTimeout(async () => {
+    const changed = adapter.getLastChanged
+      ? await adapter.getLastChanged()
+      : Date.now()
+    if (changed) {
+      if (lastChanged !== 0 && lastChanged !== changed) {
+        await refresh()
+        updateState()
+      }
+      lastChanged = changed
+      checkChangedDate()
+    }
+  }, delay)
+}
+
+const onWheel = (e: WheelEvent) => {
+  if (e.ctrlKey) {
+    e.preventDefault()
+  }
+}
+
+const isInIframe = () => window.parent !== window
+
+const onFocusItem = (uuid: string) => {
+  const el = document.querySelector(`[data-uuid="${uuid}"]`)
+  if (el) {
+    const elRect = el.getBoundingClientRect()
+    if (
+      !intersects(elRect, {
+        x: 0,
+        y: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    ) {
+      el.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center',
+      })
+    }
+  }
+}
+const onUpdateOption = (option: UpdateBlockOptionEvent) => {
+  const { uuid, key, value } = option
+
+  if (!mutatedOptions.value[uuid]) {
+    mutatedOptions[uuid] = {}
+  }
+  if (!mutatedOptions.value[uuid]) {
+    mutatedOptions[uuid] = {}
+  }
+  mutatedOptions[uuid][key] = value
+}
+
+onMounted(() => {
+  if (isInIframe()) {
+    frameEventBus.on('mutatedFields', updateMutatedFields)
+    frameEventBus.on('focus', onFocusItem)
+    frameEventBus.on('updateOption', onUpdateOption)
+    // We are a preview inside the iframe of the main editing app.
+    // In this case updated state is passed in via postMessage from the main
+    // editing app.
+    document.body.classList.add('bk-body-preview')
+    document.documentElement.classList.add('bk-html-preview')
+    window.addEventListener('message', onMessage)
+    window.addEventListener('wheel', onWheel, { passive: false })
+    document.documentElement.addEventListener('mousedown', onMouseDown)
+
+    // Prevent navigating away from the preview when clicking Nuxt links.
+    router.push = () => Promise.resolve()
+    router.replace = () => Promise.resolve()
+  } else {
+    // We are a standalone page in preview mode. Setup polling for changes.
+    checkChangedDate()
+  }
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(timeout)
+  document.body.classList.remove('bk-body-preview')
+  document.documentElement.classList.remove('bk-html-preview')
+  window.removeEventListener('wheel', onWheel)
+  window.removeEventListener('message', onMessage)
+  document.documentElement.removeEventListener('mousedown', onMouseDown)
+  frameEventBus.off('mutatedFields', updateMutatedFields)
+  frameEventBus.off('focus', onFocusItem)
+  frameEventBus.off('updateOption', onUpdateOption)
+})
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <slot :formatted="formatted" />
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, onBeforeUnmount } from '#imports'
+import { getRelativeTimeString } from '#blokkli/helpers'
+
+const props = defineProps<{
+  timestamp: number
+}>()
+
+const incrementToggle = ref(0)
+let interval: any = null
+
+const formatted = computed(() => {
+  // Adding the toggle value forces an update every 5 seconds, so the relative time stays correct.
+  const date = new Date(props.timestamp * 1000 + incrementToggle.value)
+  return getRelativeTimeString(date)
+})
+
+onMounted(() => {
+  interval = setInterval(() => {
+    incrementToggle.value = incrementToggle.value ? 0 : 1
+  }, 1000)
+})
+
+onBeforeUnmount(() => {
+  clearInterval(interval)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'RelativeTime',
+}
+</script>

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

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="bk-resizable"
+    :style="style"
+    :class="{ 'bk-is-resizing': isResizing }"
+    @wheel.passive.stop
+  >
+    <div class="bk-resizable-inner">
+      <slot />
+    </div>
+    <button class="bk-resizable-handle" @mousedown="onMouseDown" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, useBlokkli, computed, onBeforeUnmount } from '#imports'
+
+const { storage, ui } = useBlokkli()
+
+const props = defineProps<{
+  id: string
+}>()
+
+const storageKey = computed(() => 'resizable:width:' + props.id)
+const persistedWidth = storage.use(storageKey, 600)
+const width = ref(persistedWidth.value)
+const startX = ref(0)
+const startWidth = ref(0)
+const isResizing = ref(false)
+
+const style = computed(() => {
+  if (ui.isMobile.value) {
+    return {}
+  }
+
+  return { width: width.value + 'px' }
+})
+
+function onMouseMove(e: MouseEvent) {
+  if (ui.isMobile.value) {
+    return
+  }
+  e.stopPropagation()
+  e.preventDefault()
+  width.value = Math.max(
+    Math.min(
+      startWidth.value + (startX.value - e.clientX),
+      window.innerWidth - 200,
+    ),
+    350,
+  )
+}
+
+function onMouseUp(e: MouseEvent) {
+  if (ui.isMobile.value) {
+    return
+  }
+  e.stopPropagation()
+  e.preventDefault()
+  isResizing.value = false
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+  persistedWidth.value = width.value
+}
+
+function onMouseDown(e: MouseEvent) {
+  if (ui.isMobile.value || e.button !== 0) {
+    return
+  }
+  startX.value = e.clientX
+  startWidth.value = width.value
+  isResizing.value = true
+  e.preventDefault()
+  e.stopPropagation()
+
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Resizable',
+}
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div ref="root" class="bk-scale-to-fit" :style="style">
+    <div ref="wrapper" class="bk-scale-to-fit-wrapper">
+      <div ref="inner" class="bk-scale-to-fit-wrapper-item" :style="innerStyle">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
+import { ref, computed } from '#imports'
+
+const props = defineProps<{
+  width?: number
+}>()
+
+const root = ref<HTMLDivElement | null>(null)
+const inner = ref<HTMLDivElement | null>(null)
+const wrapper = ref<HTMLDivElement | null>(null)
+const rootWidth = ref(260)
+const nativeWidth = ref(0)
+const nativeHeight = ref(0)
+const computedHeight = ref(0)
+
+const style = computed(() => {
+  return {
+    height: computedHeight.value + 'px',
+  }
+})
+
+const innerStyle = computed(() => {
+  return {
+    width: props.width ? props.width + 'px' : 'auto',
+    transform: `scale(${rootWidth.value / nativeWidth.value})`,
+  }
+})
+
+useAnimationFrame(() => {
+  if (root.value) {
+    rootWidth.value = root.value.offsetWidth
+  }
+  if (inner.value) {
+    const rect = inner.value.getBoundingClientRect()
+    nativeHeight.value = inner.value.offsetHeight
+    nativeWidth.value = Math.max(inner.value.offsetWidth, rootWidth.value)
+    computedHeight.value = rect.height
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ScaleToFit',
+}
+</script>

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

@@ -0,0 +1,90 @@
+<template>
+  <kbd :title="label" class="bk-shortcut">
+    <template v-if="meta"> <kbd>CTRL</kbd> + </template>
+    <template v-if="shift"> <kbd>SHIFT</kbd> + </template>
+    <kbd>{{ keyLabel }}</kbd>
+  </kbd>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli, onMounted, onBeforeUnmount } from '#imports'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import defineShortcut from '#blokkli/helpers/composables/defineShortcut'
+
+const props = defineProps<{
+  group?: string
+  viewOnly?: boolean
+  meta?: boolean
+  shift?: boolean
+  keyCode: string
+  label: string
+}>()
+
+const emit = defineEmits(['pressed'])
+
+const { state } = useBlokkli()
+
+const key = computed(() =>
+  [props.meta, props.shift, props.keyCode.toLowerCase()].join('-'),
+)
+
+const keyLabel = computed(() => {
+  if (props.keyCode === 'Delete') {
+    return '⌫'
+  } else if (props.keyCode === 'ArrowDown') {
+    return '↓'
+  } else if (props.keyCode === 'ArrowUp') {
+    return '↑'
+  } else if (props.keyCode === 'ArrowRight') {
+    return '→'
+  } else if (props.keyCode === 'ArrowLeft') {
+    return '←'
+  } else if (props.keyCode === 'Digit0' || props.keyCode === '0') {
+    return ''
+  }
+
+  return props.keyCode.toUpperCase()
+})
+
+if (!props.viewOnly) {
+  defineShortcut({
+    meta: props.meta,
+    shift: props.shift,
+    code: props.keyCode,
+    label: props.label,
+    group: props.group,
+  })
+}
+
+onBlokkliEvent('keyPressed', (e) => {
+  const checkKey = [e.meta, e.shift, e.code.toLowerCase()].join('-')
+  if (key.value !== checkKey) {
+    return
+  }
+
+  e.originalEvent.preventDefault()
+
+  if (state.isLoading.value) {
+    return
+  }
+  emit('pressed')
+})
+
+onMounted(() => {
+  if (props.viewOnly) {
+    return
+  }
+})
+
+onBeforeUnmount(() => {
+  if (props.viewOnly) {
+    return
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ShortcutIndicator',
+}
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <div
+    @pointerdown.capture.prevent="onPointerDown"
+    @pointerup.capture.prevent="onPointerUp"
+    @pointermove.capture.prevent="onPointerMove"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Coord, DraggableItem } from '#blokkli/types'
+import { useBlokkli } from '#imports'
+import {
+  buildDraggableItem,
+  getDistance,
+  getInteractionCoordinates,
+} from '#blokkli/helpers'
+
+const { eventBus } = useBlokkli()
+
+let pointerStartCoords: Coord | null = null
+let activeItem: DraggableItem | null = null
+
+function onPointerDown(e: PointerEvent) {
+  if (!(e.target instanceof HTMLElement || e.target instanceof SVGElement)) {
+    return
+  }
+  if (e.button !== 0) {
+    pointerStartCoords = null
+    return
+  }
+  pointerStartCoords = getInteractionCoordinates(e)
+
+  const sortliItem = e.target.closest('[data-sortli-id]')
+  if (!sortliItem) {
+    return
+  }
+
+  const item = buildDraggableItem(sortliItem)
+
+  if (!item) {
+    return
+  }
+
+  activeItem = item
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!pointerStartCoords || !activeItem || e.pointerType === 'touch') {
+    return
+  }
+
+  const coords = getInteractionCoordinates(e)
+  const distance = getDistance(coords, pointerStartCoords)
+
+  if (distance > 7) {
+    eventBus.emit('dragging:start', {
+      items: [activeItem],
+      coords,
+      mode: 'mouse',
+    })
+    activeItem = null
+    pointerStartCoords = null
+  }
+}
+
+function onPointerUp(e: PointerEvent) {
+  if (!pointerStartCoords || !activeItem) {
+    pointerStartCoords = null
+    activeItem = null
+    return
+  }
+  const coords = getInteractionCoordinates(e)
+  const distance = getDistance(coords, pointerStartCoords)
+  if (e.pointerType === 'touch' && distance < 5) {
+    eventBus.emit('dragging:start', {
+      items: [activeItem],
+      coords,
+      mode: 'touch',
+    })
+  }
+
+  pointerStartCoords = null
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Sortli',
+}
+</script>

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

@@ -0,0 +1,91 @@
+<template>
+  <Teleport v-if="showDialog" to="body">
+    <transition appear name="bk-slide-up">
+      <DialogModal
+        :title="$t('systemRequirementsDialogTitle', 'System Requirements')"
+        :width="700"
+        :submit-label="$t('systemRequirementsDialogButton', 'Continue anyway')"
+        :lead="
+          $t(
+            'systemRequirementsDialogLead',
+            'blökkli has detected that your browser does not meet one or more system requirements. For the best experience, please use a browser that supports all the listed requirements.',
+          )
+        "
+        icon="sad"
+        @submit="dismiss"
+        @cancel="dismiss"
+      >
+        <ul class="bk-system-requirements">
+          <li
+            v-for="requirement in requirements"
+            :key="requirement.id"
+            :class="{
+              'bk-is-success': requirement.supported === true,
+              'bk-is-error': requirement.supported === false,
+              'bk-is-warning': requirement.supported === null,
+            }"
+          >
+            <div>
+              <h3>
+                <span>{{ requirement.title }}</span>
+                <div class="bk-system-requirements-icon">
+                  <Icon :name="requirement.supported ? 'check' : 'close'" />
+                </div>
+              </h3>
+              <p>{{ requirement.description }}</p>
+            </div>
+          </li>
+        </ul>
+
+        <p>
+          {{
+            $t(
+              'systemRequirementsDialogText',
+              'blökkli has been tested and optimized for the latest versions of Chrome, Firefox, Edge, and Safari. Features like WebGL are well supported, but they may sometimes be disabled for performance or security reasons.',
+            )
+          }}
+        </p>
+      </DialogModal>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useBlokkli, computed } from '#imports'
+import { DialogModal, Icon } from '#blokkli/components'
+
+const { $t, storage, animation } = useBlokkli()
+
+const hasDismissed = storage.use('system_requirements_dismissed', false)
+
+type SystemRequirement = {
+  id: string
+  title: string
+  description: string
+  supported: boolean | null
+}
+
+const requirements = computed<SystemRequirement[]>(() => {
+  return [
+    {
+      id: 'webgl',
+      title: 'WebGL',
+      description: $t(
+        'systemRequirementsWebglText',
+        'blökkli uses WebGL for fast rendering of UI elements such as selected blocks and drag-and-drop indicators. If WebGL is not supported, Blökkli will resort to fallback rendering, which is slower and lacks full feature support.',
+      ),
+      supported: animation.webglSupported.value,
+    },
+  ]
+})
+
+const showDialog = computed(
+  () =>
+    !hasDismissed.value &&
+    requirements.value.some((v) => v.supported === false),
+)
+
+function dismiss() {
+  hasDismissed.value = true
+}
+</script>