@blokkli/editor 1.0.0

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

@@ -0,0 +1,138 @@
+<template>
+  <DialogModal
+    :title="$t('settingsDialogTitle', 'Change settings')"
+    :width="700"
+    hide-buttons
+    icon="cog"
+    @cancel="$emit('cancel')"
+  >
+    <div class="bk bk-settings">
+      <div v-for="group in groups" :key="group.key" class="bk-form-section">
+        <h3 class="bk-settings-group-title">
+          <span>{{ group.label }}</span>
+        </h3>
+        <FeatureSetting
+          v-for="setting in group.settings"
+          :key="group.key + setting.settingsKey"
+          :feature-id="setting.featureId"
+          :settings-key="setting.settingsKey"
+          :setting="setting.setting"
+        />
+      </div>
+    </div>
+  </DialogModal>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, computed } from '#imports'
+import { DialogModal } from '#blokkli/components'
+import FeatureSetting from './FeatureSetting/index.vue'
+import type { ValidFeatureKey } from '#blokkli-runtime/features'
+import type { FeatureDefinitionSetting } from '#blokkli/types'
+import { SETTINGS_GROUP, type SettingsGroup } from '#blokkli/constants'
+import type { BlokkliIcon } from '#blokkli/icons'
+import { settingsOverride } from '#blokkli/config'
+
+const { $t, features, ui } = useBlokkli()
+
+type FeatureSetting = {
+  featureId: ValidFeatureKey
+  settingsKey: string
+  setting: FeatureDefinitionSetting
+}
+
+type GroupedSettings = {
+  id: SettingsGroup
+  key: string
+  label: string
+  icon: BlokkliIcon
+  settings: FeatureSetting[]
+}
+
+const getGroupLabel = (key: SettingsGroup): string => {
+  if (key === 'behavior') {
+    return $t('settingsBehaviour', 'Behaviour')
+  } else if (key === 'appearance') {
+    return $t('settingsAppearance', 'Appearance')
+  } else if (key === 'advanced') {
+    return $t('settingsAdvanced', 'Advanced')
+  }
+  return key
+}
+
+const getGroupIcon = (key: SettingsGroup): BlokkliIcon => {
+  if (key === 'behavior') {
+    return 'tools'
+  } else if (key === 'appearance') {
+    return 'palette'
+  } else if (key === 'advanced') {
+    return 'bug'
+  }
+  return 'question'
+}
+
+const shouldRenderSetting = (
+  key: keyof typeof settingsOverride,
+  setting: FeatureDefinitionSetting,
+): boolean => {
+  // Setting is disabled in module config.
+  if (settingsOverride[key]?.disable) {
+    return false
+  }
+  if (setting.viewports?.length) {
+    return setting.viewports.includes(ui.appViewport.value)
+  }
+  return true
+}
+
+const settingTypeOrder = ['checkbox', 'slider', 'method']
+
+const groups = computed<GroupedSettings[]>(() => {
+  return Object.values(
+    features.features.value.reduce<Record<string, GroupedSettings>>(
+      (acc, feature) => {
+        Object.entries(feature.settings || {}).forEach(
+          ([settingsKey, setting]) => {
+            const key: any = `feature:${feature.id}:${settingsKey}`
+            if (shouldRenderSetting(key, setting)) {
+              const group = setting.group || 'advanced'
+              if (!acc[group]) {
+                acc[group] = {
+                  id: group as any,
+                  key: group,
+                  label: getGroupLabel(group),
+                  icon: getGroupIcon(group),
+                  settings: [],
+                }
+              }
+
+              acc[group].settings.push({
+                featureId: feature.id,
+                settingsKey,
+                setting,
+              })
+            }
+          },
+        )
+        return acc
+      },
+      {},
+    ),
+  )
+    .map((group) => {
+      group.settings
+        .sort((a, b) => b.settingsKey.localeCompare(a.settingsKey))
+        .sort(
+          (a, b) =>
+            settingTypeOrder.indexOf(a.setting.type) -
+            settingTypeOrder.indexOf(b.setting.type),
+        )
+      return group
+    })
+    .sort((a, b) => SETTINGS_GROUP.indexOf(a.id) - SETTINGS_GROUP.indexOf(b.id))
+})
+
+defineEmits<{
+  (e: 'cancel'): void
+}>()
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <PluginMenuButton
+    id="settings"
+    :title="$t('settingsMenuTitle', 'Settings')"
+    :description="
+      $t('settingsMenuDescription', 'Personal settings for the editor')
+    "
+    secondary
+    icon="cog"
+    @click="onClick"
+  />
+  <Teleport to="body">
+    <transition appear name="bk-slide-up">
+      <SettingsDialog v-if="showSettings" @cancel="showSettings = false" />
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  useBlokkli,
+  defineBlokkliFeature,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+} from '#imports'
+import { PluginMenuButton } from '#blokkli/plugins'
+import SettingsDialog from './Dialog/index.vue'
+
+const { $t, storage } = useBlokkli()
+
+const LOW_PERFORMANCE_CLASS = 'bk-low-performance-mode'
+
+const { settings } = defineBlokkliFeature({
+  id: 'settings',
+  label: 'Settings',
+  icon: 'cog',
+  description: 'Provides a menu button to display a settings dialog.',
+
+  settings: {
+    useAnimations: {
+      type: 'checkbox',
+      default: true,
+      label: 'Use animations',
+      group: 'advanced',
+    },
+    lowPerformanceMode: {
+      type: 'checkbox',
+      default: false,
+      label: 'Enable low performance mode',
+      group: 'advanced',
+    },
+    resetAllSettings: {
+      type: 'method',
+      label: 'Reset all settings',
+      method: () => {
+        storage.clearAll()
+      },
+      group: 'advanced',
+    },
+  },
+})
+
+const showSettings = ref(false)
+
+const onClick = () => (showSettings.value = true)
+
+function setRootClass() {
+  if (settings.value.lowPerformanceMode) {
+    document.documentElement.classList.add(LOW_PERFORMANCE_CLASS)
+  } else {
+    document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS)
+  }
+}
+
+watch(settings, setRootClass)
+
+onMounted(() => {
+  setRootClass()
+})
+
+onBeforeUnmount(() => {
+  document.documentElement.classList.remove(LOW_PERFORMANCE_CLASS)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Settings',
+}
+</script>

package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <div ref="el" class="bk-structure-field" :data-structure-field-key="key">
+    <button
+      v-if="totalFieldsOfType > 1"
+      class="bk-structure-field-label"
+      @click.prevent.stop.capture="onClickFieldLabel"
+    >
+      {{ config?.label || name }}
+    </button>
+    <div class="bk-structure-field-items">
+      <div
+        v-for="(item, index) in list"
+        :key="item.uuid"
+        class="bk-structure-field-item"
+      >
+        <div
+          v-if="
+            index === 0 && showTargets && !selection.uuidsMap.value[item.uuid]
+          "
+          :style="targetStyle"
+          class="bk-structure-field-target bk-is-before"
+          @pointerup.stop.capture="onMouseUp()"
+        />
+        <Item
+          :uuid="item.uuid"
+          :bundle="item.bundle"
+          :level="level"
+          :visible-field-keys="visibleFieldKeys"
+          :is-selected-from-parent="isSelectedFromParent"
+          :is-visible="isVisible"
+        />
+        <div
+          v-if="
+            showTargets &&
+            (!selection.isDraggingExisting.value ||
+              !selection.uuidsMap.value[item.uuid]) &&
+            (!list[index + 1] ||
+              !selection.isDraggingExisting.value ||
+              !selection.uuidsMap.value[list[index + 1].uuid])
+          "
+          :style="targetStyle"
+          class="bk-structure-field-target bk-is-after"
+          @pointerup.stop.capture="onMouseUp(item.uuid)"
+        />
+      </div>
+      <div
+        v-if="!list.length && showTargets"
+        class="bk-structure-field-target bk-is-after"
+        :style="targetStyle"
+        @pointerup.stop.capture="onMouseUp()"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  useBlokkli,
+  computed,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+} from '#imports'
+import Item from './../Item/index.vue'
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    entityUuid: string
+    entityType: string
+    entityBundle: string
+    allowedBundles: string[]
+    cardinality: number
+    level?: number
+    visibleFieldKeys: Record<string, boolean>
+    isSelectedFromParent?: boolean
+  }>(),
+  {
+    level: 0,
+  },
+)
+
+const targetStyle = computed(() => {
+  return {
+    zIndex: 50 + props.level,
+  }
+})
+
+const { types, state, selection, dom, eventBus } = useBlokkli()
+
+const mutatedField = computed(() =>
+  state.getMutatedField(props.entityUuid, props.name),
+)
+
+const list = computed(() => mutatedField.value?.list || [])
+const key = computed(() => props.entityUuid + ':' + props.name)
+
+function onMouseUp(preceedingUuid?: string) {
+  const field = dom.findField(props.entityUuid, props.name)
+
+  if (!field) {
+    return
+  }
+
+  eventBus.emit('dragging:drop', {
+    field,
+    preceedingUuid,
+    items: selection.dragItems.value,
+    host: {
+      type: field.hostEntityType,
+      uuid: field.hostEntityUuid,
+      fieldName: field.name,
+    },
+  })
+
+  const uuid = selection.uuids.value[0]
+  if (uuid) {
+    nextTick(() => {
+      eventBus.emit('scrollIntoView', { uuid, center: true })
+    })
+  }
+}
+
+function onClickFieldLabel() {
+  eventBus.emit(
+    'select',
+    list.value.map((v) => v.uuid),
+  )
+}
+
+const el = ref<HTMLDivElement | null>(null)
+
+const observer = inject<IntersectionObserver>('bk_structure_observer')
+
+const isVisible = computed(() => !!props.visibleFieldKeys[key.value])
+
+const bundlesAllowed = computed(() =>
+  selection.dragItemsBundles.value.every((bundle) =>
+    props.allowedBundles.includes(bundle),
+  ),
+)
+
+const showTargets = computed(
+  () =>
+    selection.isDragging.value &&
+    isVisible.value &&
+    !props.isSelectedFromParent &&
+    (props.cardinality === -1 || list.value.length < props.cardinality) &&
+    bundlesAllowed.value,
+)
+
+const config = computed(() =>
+  types.getFieldConfig(props.entityType, props.entityBundle, props.name),
+)
+
+const totalFieldsOfType = computed(
+  () =>
+    types.fieldConfig.forEntityTypeAndBundle(
+      props.entityType,
+      props.entityBundle,
+    ).length,
+)
+
+onMounted(() => {
+  if (el.value && observer) {
+    observer.observe(el.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (el.value && observer) {
+    observer.unobserve(el.value)
+  }
+})
+
+defineOptions({
+  name: 'StructureListField',
+})
+</script>

package/dist/runtime/components/Edit/Features/Structure/List/Item/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    class="bk-structure-item"
+    :class="{ 'bk-is-selected': isSelected }"
+    :bk-structure-uuid="uuid"
+    @pointerdown.stop.prevent="onMouseDown"
+  >
+    <button class="bk-structure-item-label">
+      <ItemIcon :bundle="bundle" :class="{ 'bk-is-selected': isSelected }" />
+      {{ type?.label || bundle }}
+    </button>
+    <List
+      :entity-uuid="uuid"
+      :entity-type="runtimeConfig.itemEntityType"
+      :entity-bundle="bundle"
+      :level="level + 1"
+      :visible-field-keys="visibleFieldKeys"
+      :is-selected-from-parent="isSelectedFromParent || isSelected"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBlokkli, computed, onBeforeUnmount } from '#imports'
+import List from './../../List/index.vue'
+import { ItemIcon } from '#blokkli/components'
+import type { DraggableExistingStructureBlock } from '#blokkli/types'
+import { falsy } from '#blokkli/helpers'
+
+const props = withDefaults(
+  defineProps<{
+    uuid: string
+    bundle: string
+    level?: number
+    visibleFieldKeys: Record<string, boolean>
+    isVisible: boolean
+    isSelectedFromParent?: boolean
+  }>(),
+  {
+    level: 0,
+  },
+)
+
+function getRootEl(): HTMLElement {
+  const rootEl = document.querySelector('#bk-structure')
+
+  if (!(rootEl instanceof HTMLElement)) {
+    throw new TypeError('Failed to locate root structure element.')
+  }
+
+  return rootEl
+}
+
+const { runtimeConfig, types, selection, eventBus, state } = useBlokkli()
+
+const canMove = computed(() => state.editMode.value === 'editing')
+
+const isSelected = computed(() => selection.uuids.value.includes(props.uuid))
+
+const type = computed(() => types.getBlockBundleDefinition(props.bundle))
+
+let isDragging = false
+let startX = 0
+let startY = 0
+
+function onMouseUp(e: MouseEvent) {
+  getRootEl().removeEventListener('pointermove', onMouseMove)
+  getRootEl().removeEventListener('pointerup', onMouseUp)
+  if (isDragging) {
+    isDragging = false
+    return
+  }
+  if (e.ctrlKey || e.metaKey) {
+    eventBus.emit('select:toggle', props.uuid)
+  } else {
+    eventBus.emit('select', props.uuid)
+    eventBus.emit('scrollIntoView', {
+      uuid: props.uuid,
+      immediate: true,
+      center: true,
+    })
+  }
+}
+
+function buildDraggableItems(): DraggableExistingStructureBlock[] {
+  return selection.blocks.value
+    .map<DraggableExistingStructureBlock | null>((block) => {
+      const el = document.querySelector(`[bk-structure-uuid="${block.uuid}"]`)
+      if (!(el instanceof HTMLElement)) {
+        return null
+      }
+      return {
+        itemType: 'existing_structure',
+        uuid: block.uuid,
+        itemBundle: block.itemBundle,
+        element: function () {
+          return el
+        },
+      }
+    })
+    .filter(falsy)
+}
+
+function onMouseMove(e: MouseEvent) {
+  if (!canMove.value) {
+    return
+  }
+  const diff = Math.abs(startX - e.clientX) + Math.abs(startY - e.clientY)
+
+  if (diff > 10) {
+    getRootEl().removeEventListener('pointermove', onMouseMove)
+    getRootEl().removeEventListener('pointerup', onMouseUp)
+    isDragging = true
+    startX = 0
+    startY = 0
+
+    // The user has started dragging a block that is not yet selected.
+    if (!selection.uuids.value.includes(props.uuid)) {
+      eventBus.emit('select', props.uuid)
+    }
+
+    eventBus.emit('dragging:start', {
+      items: buildDraggableItems(),
+      coords: {
+        x: e.clientX,
+        y: e.clientY,
+      },
+      mode: 'mouse',
+    })
+  }
+}
+
+function onMouseDown(e: MouseEvent) {
+  startX = e.clientX
+  startY = e.clientY
+
+  getRootEl().addEventListener('pointermove', onMouseMove)
+  getRootEl().addEventListener('pointerup', onMouseUp)
+}
+
+onBeforeUnmount(() => {
+  getRootEl().removeEventListener('pointermove', onMouseMove)
+  getRootEl().removeEventListener('pointerup', onMouseUp)
+})
+
+defineOptions({
+  name: 'StructureListItem',
+})
+</script>

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

@@ -0,0 +1,55 @@
+<template>
+  <ul v-if="fields.length" class="bk-structure-list" :data-level="level">
+    <li
+      v-for="field in fields"
+      :key="field.entityType + field.entityBundle + field.name + entityUuid"
+      :data-bundle="entityBundle"
+      :data-name="field.name"
+    >
+      <Field
+        :name="field.name"
+        :cardinality="field.cardinality"
+        :allowed-bundles="field.allowedBundles"
+        :entity-uuid="entityUuid"
+        :entity-type="entityType"
+        :entity-bundle="entityBundle"
+        :show-label="fields.length > 1"
+        :level="level"
+        :visible-field-keys="visibleFieldKeys"
+        :is-selected-from-parent="isSelectedFromParent"
+      />
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli } from '#imports'
+import Field from './Field/index.vue'
+
+const props = withDefaults(
+  defineProps<{
+    entityUuid: string
+    entityType: string
+    entityBundle: string
+    visibleFieldKeys: Record<string, boolean>
+    level?: number
+    isSelectedFromParent?: boolean
+  }>(),
+  {
+    level: 0,
+  },
+)
+
+const { types } = useBlokkli()
+
+const fields = computed(() => {
+  return types.fieldConfig.forEntityTypeAndBundle(
+    props.entityType,
+    props.entityBundle,
+  )
+})
+
+defineOptions({
+  name: 'StructureList',
+})
+</script>

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

@@ -0,0 +1,83 @@
+<template>
+  <PluginSidebar
+    id="structure"
+    :title="$t('structureToolbarLabel', 'Structure')"
+    :tour-text="
+      $t(
+        'structureTourText',
+        'Shows a structured list of all blocks on the current page. Click on any block to quickly jump to it.',
+      )
+    "
+    icon="tree"
+    weight="-90"
+  >
+    <div
+      v-if="isLoaded"
+      id="bk-structure"
+      class="bk bk-structure bk-control"
+      @wheel.stop
+    >
+      <List
+        :entity-bundle="context.entityBundle"
+        :entity-type="context.entityType"
+        :entity-uuid="context.entityUuid"
+        :visible-field-keys="visibleFieldKeys"
+      />
+    </div>
+  </PluginSidebar>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  useBlokkli,
+  defineBlokkliFeature,
+  provide,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+} from '#imports'
+import { PluginSidebar } from '#blokkli/plugins'
+import List from './List/index.vue'
+
+defineBlokkliFeature({
+  id: 'structure',
+  icon: 'tree',
+  label: 'Structure',
+  description:
+    'Provides a sidebar button to render a structured list of all blocks on the current page.',
+})
+
+const { $t, context } = useBlokkli()
+
+const isLoaded = ref(false)
+
+const visibleFieldKeys = reactive<Record<string, boolean>>({})
+
+const observer = new IntersectionObserver(function (entries) {
+  for (const entry of entries) {
+    if (entry.target instanceof HTMLElement) {
+      const key = entry.target.dataset.structureFieldKey
+      if (key) {
+        visibleFieldKeys[key] = entry.isIntersecting
+      }
+    }
+  }
+})
+
+provide('bk_structure_observer', observer)
+
+onMounted(() => {
+  isLoaded.value = true
+})
+
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Structure',
+}
+</script>