@blokkli/editor 1.0.0

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

@@ -0,0 +1,342 @@
+<template>
+  <div
+    v-if="availableOptions.length"
+    class="bk-blokkli-item-options"
+    @pointerup="onPointerUp"
+    @mouseleave="stopChangingOptions"
+  >
+    <OptionsFormItem
+      v-for="plugin in singleVisibleOptions"
+      :key="plugin.property"
+      :option="plugin.option"
+      :property="plugin.property"
+      :uuids="uuids"
+      class="bk-blokkli-item-options-item"
+      :class="{
+        'bk-is-disabled':
+          !state.canEdit.value || state.editMode.value !== 'editing',
+      }"
+      @keydown.stop
+      @update="setOptionValue(plugin.property, $event)"
+    />
+
+    <OptionsFormGroup
+      v-for="group in optionGroups"
+      :key="'group_' + group.label"
+      :label="group.label"
+      :is-active="group.label === activeGroup"
+      @toggle="onToggleGroup(group.label)"
+    >
+      <OptionsFormItem
+        v-for="plugin in group.options"
+        :key="plugin.property"
+        :option="plugin.option"
+        :property="plugin.property"
+        :uuids="uuids"
+        class="bk-blokkli-item-options-item"
+        :class="{
+          'bk-is-disabled':
+            !state.canEdit.value || state.editMode.value !== 'editing',
+        }"
+        is-grouped
+        @keydown.stop
+        @update="setOptionValue(plugin.property, $event)"
+      />
+    </OptionsFormGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, useBlokkli, onBeforeUnmount, onMounted } from '#imports'
+import { globalOptions } from '#blokkli/definitions'
+import { falsy } from '#blokkli/helpers'
+import OptionsFormItem from './Item.vue'
+import OptionsFormGroup from './Group.vue'
+import type {
+  BlockDefinitionInput,
+  BlockDefinitionOptionsInput,
+  FragmentDefinitionInput,
+} from '#blokkli/types'
+import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions'
+import { optionValueToStorable } from '#blokkli/helpers/options'
+import { getRuntimeOptionValue } from '#blokkli/helpers/runtimeHelpers'
+
+type OptionItem = {
+  property: string
+  option: BlockOptionDefinition
+}
+
+type OptionGroup = {
+  label: string
+  options: OptionItem[]
+}
+
+const activeGroup = ref('')
+
+function onToggleGroup(label: string) {
+  if (activeGroup.value === label) {
+    activeGroup.value = ''
+  } else {
+    activeGroup.value = label
+  }
+}
+
+const {
+  adapter,
+  eventBus,
+  state,
+  selection,
+  runtimeConfig,
+  dom,
+  theme,
+  context,
+} = useBlokkli()
+
+const props = defineProps<{
+  uuids: string[]
+  definition: BlockDefinitionInput | FragmentDefinitionInput
+}>()
+
+let pointerTimeout: null | number = null
+
+function onPointerUp(e: PointerEvent) {
+  if (pointerTimeout) {
+    clearTimeout(pointerTimeout)
+  }
+  selection.isChangingOptions.value = true
+
+  if (e.pointerType === 'touch') {
+    pointerTimeout = window.setTimeout(() => {
+      stopChangingOptions()
+    }, 2000)
+  }
+}
+
+function stopChangingOptions() {
+  if (pointerTimeout) {
+    clearTimeout(pointerTimeout)
+  }
+  if (!selection.isChangingOptions.value) {
+    return
+  }
+
+  // Refresh the rects of the blocks because they might have changed.
+  props.uuids.forEach((uuid) => {
+    dom.refreshBlockRect(uuid)
+    const block = dom.findBlock(uuid)
+    if (block) {
+      const el = dom.getDragElement(block)
+      if (el) {
+        theme.invalidateCachedStyle(el)
+      }
+    }
+  })
+  selection.isChangingOptions.value = false
+}
+
+class OptionCollector {
+  options: Record<string, Record<string, string>>
+
+  constructor() {
+    this.options = {}
+  }
+
+  set(uuid: string, key: string, value: string): void {
+    if (!this.options[uuid]) {
+      this.options[uuid] = {}
+    }
+
+    this.options[uuid][key] = value
+  }
+
+  get(uuid: string, key: string): string | undefined {
+    return this.options[uuid]?.[key]
+  }
+
+  getEntries() {
+    return Object.entries(this.options)
+      .map(([uuid, options]) => {
+        return Object.entries(options).map(([key, value]) => {
+          return {
+            uuid,
+            key,
+            value,
+          }
+        })
+      })
+      .flat()
+  }
+}
+
+const original = new OptionCollector()
+const updated = new OptionCollector()
+
+const availableOptions = computed<OptionItem[]>(() => {
+  if (!props.definition) {
+    return []
+  }
+  const options = (props.definition.options ||
+    {}) as BlockDefinitionOptionsInput
+  const global = (
+    (props.definition.globalOptions || []) as string[]
+  ).reduce<BlockDefinitionOptionsInput>((acc, v) => {
+    const globalDefinition: BlockOptionDefinition | null =
+      (globalOptions as any)[v] || null
+    if (globalDefinition) {
+      acc[v] = globalDefinition
+    }
+    return acc
+  }, {})
+
+  return Object.entries({ ...options, ...global }).map(([property, option]) => {
+    return {
+      property,
+      option,
+    }
+  })
+})
+
+/**
+ * The current mapped values, same as provided by defineBlokkli.
+ */
+const currentValues = computed(() => {
+  const getOptionValue = (
+    key: string,
+    defaultValue: string | boolean | string[] | number,
+  ) => {
+    const uuid = props.uuids[0]
+    if (!uuid) {
+      return ''
+    }
+    const blockMutatedOptions = state.mutatedOptions[uuid]
+    if (
+      blockMutatedOptions !== undefined &&
+      blockMutatedOptions[key] !== undefined
+    ) {
+      return state.mutatedOptions[uuid][key]
+    }
+    return defaultValue
+  }
+
+  return availableOptions.value.reduce<
+    Record<string, string | string[] | boolean | number>
+  >((acc, v) => {
+    acc[v.property] = getRuntimeOptionValue(
+      v.option,
+      getOptionValue(v.property, v.option.default),
+    )
+    return acc
+  }, {})
+})
+
+const visibleOptions = computed<OptionItem[]>(() => {
+  if (!props.definition.editor?.determineVisibleOptions) {
+    return availableOptions.value
+  }
+
+  const uuid = props.uuids[0]
+  const item = state.getFieldListItem(props.uuids[0])
+  const block = selection.blocks.value.find((v) => v.uuid === uuid)
+  if (!item) {
+    return []
+  }
+
+  const parentType =
+    block?.hostType === runtimeConfig.itemEntityType
+      ? block.parentBlockBundle
+      : undefined
+
+  const ctxProps =
+    item?.bundle === 'from_library'
+      ? (item?.props as any)?.libraryItem?.block?.props
+      : item?.props
+
+  const visibleKeys =
+    // We have to cast to any here because the types are guaranteed to be correct.
+    props.definition.editor!.determineVisibleOptions({
+      options: currentValues.value as any,
+      parentType: parentType as any,
+      props: ctxProps as any,
+      entity: context.value,
+    })
+
+  return availableOptions.value.filter((v) => visibleKeys.includes(v.property))
+})
+
+const singleVisibleOptions = computed(() =>
+  visibleOptions.value.filter((v) => !v.option.group),
+)
+
+const optionGroups = computed<OptionGroup[]>(() => {
+  return Object.values(
+    visibleOptions.value.reduce<Record<string, OptionGroup>>((acc, option) => {
+      if (option.option.group) {
+        if (!acc[option.option.group]) {
+          acc[option.option.group] = {
+            label: option.option.group,
+            options: [],
+          }
+        }
+
+        acc[option.option.group].options.push(option)
+      }
+      return acc
+    }, {}),
+  )
+})
+
+function setOptionValue(key: string, value: string) {
+  props.uuids.forEach((uuid) => {
+    updated.set(uuid, key, value)
+
+    if (!state.mutatedOptions[uuid]) {
+      state.mutatedOptions[uuid] = {}
+    }
+    state.mutatedOptions[uuid][key] = value
+    eventBus.emit('option:update', { uuid, key, value })
+  })
+}
+
+onMounted(() => {
+  props.uuids.forEach((uuid) => {
+    availableOptions.value.forEach((option) => {
+      original.set(
+        uuid,
+        option.property,
+        optionValueToStorable(
+          option.option,
+          currentValues.value[option.property],
+        ),
+      )
+    })
+  })
+})
+
+onBeforeUnmount(() => {
+  selection.isChangingOptions.value = false
+  const values = updated
+    .getEntries()
+    .map((entry) => {
+      // Check if the original value is the same as the updated value.
+      // If yes, we can skip updating it, since it's the same.
+      const originalValue = original.get(entry.uuid, entry.key)
+      if (originalValue === entry.value) {
+        return
+      }
+      return entry
+    })
+    .filter(falsy)
+
+  if (!values.length) {
+    return
+  }
+
+  state.mutateWithLoadingState(() => adapter.updateOptions!(values))
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'OptionsForm',
+}
+</script>

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

@@ -0,0 +1,88 @@
+<template>
+  <Teleport to="#bk-blokkli-item-actions-controls">
+    <OptionsForm
+      v-if="definition && !selection.isDragging.value && !ui.isAnimating.value"
+      :key="uuids.join('-') + state.refreshKey.value + ui.isAnimating.value"
+      :uuids="uuids"
+      :definition="definition"
+    />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
+import { falsy, onlyUnique } from '#blokkli/helpers'
+import { getDefinition, getFragmentDefinition } from '#blokkli/definitions'
+import OptionsForm from './Form/index.vue'
+import type {
+  BlockDefinitionInput,
+  FragmentDefinitionInput,
+} from '#blokkli/types'
+
+defineBlokkliFeature({
+  id: 'options',
+  label: 'Options',
+  icon: 'palette',
+  description: 'Renders the options form for one or more blocks.',
+  requiredAdapterMethods: ['updateOptions'],
+})
+
+const { selection, state, ui } = useBlokkli()
+
+const uuids = computed(() => selection.blocks.value.map((v) => v.uuid))
+
+const definition = computed<
+  BlockDefinitionInput<any, any> | FragmentDefinitionInput<any, any> | undefined
+>(() => {
+  const bundles = selection.blocks.value
+    .map((v) => v.reusableBundle || v.itemBundle)
+    .filter(onlyUnique)
+
+  // @TODO: Support shared global options.
+  if (bundles.length !== 1) {
+    return
+  }
+
+  const bundle = bundles[0]
+
+  if (bundle === 'blokkli_fragment') {
+    const fragments = selection.blocks.value.filter(
+      (v) => v.itemBundle === 'blokkli_fragment',
+    )
+
+    const fragmentNames = fragments
+      .map((v) => {
+        const props: any = state.getFieldListItem(v.uuid)?.props
+        if (props && props.name) {
+          return props.name
+        }
+      })
+      .filter(falsy)
+      .filter(onlyUnique)
+
+    if (fragmentNames.length !== 1) {
+      return
+    }
+
+    return getFragmentDefinition(fragmentNames[0])
+  }
+
+  const definitions = selection.blocks.value
+    .map((block) => {
+      return getDefinition(
+        bundle,
+        block.hostFieldListType,
+        block.parentBlockBundle,
+      )
+    })
+    .filter(falsy)
+
+  return definitions[0]
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Options',
+}
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="!state.owner.value?.currentUserIsOwner"
+      class="bk-owner-indicator"
+    >
+      <p
+        v-html="
+          $t(
+            'ownershipNote',
+            'This page is currently being edited by @name. Changes can only be made by one person at a time.',
+          ).replace('@name', name)
+        "
+      />
+      <button class="bk-button bk-is-danger" @click="takeOwnership">
+        {{ $t('ownershipTakeOwnership', 'Assign to me') }}
+      </button>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
+
+const { adapter } = defineBlokkliFeature({
+  id: 'ownership',
+  icon: 'user',
+  label: 'Ownership',
+  requiredAdapterMethods: ['takeOwnership'],
+  description:
+    'Renders a large button to take ownership of the current edit state.',
+})
+
+const { state, $t } = useBlokkli()
+
+const takeOwnership = () =>
+  state.mutateWithLoadingState(
+    () => adapter.takeOwnership(),
+    $t('ownershipError', 'Error in assigning'),
+    $t('ownershipSuccess', 'You are now the owner.'),
+  )
+
+const name = computed(() => {
+  const v = state.owner.value?.name
+  if (v) {
+    return `<strong>${v}</strong>`
+  }
+
+  return ''
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Ownership',
+}
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <PluginToolbarButton
+    id="preview_new_window"
+    :title="$t('previewNewWindow', 'Preview (new window)')"
+    region="after-menu"
+    icon="open_in_new"
+    :tour-text="
+      $t(
+        'previewNewWindowTourText',
+        'Opens a preview of the current changes in a new window.',
+      )
+    "
+    @click="openPreview"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli, useRoute, defineBlokkliFeature } from '#imports'
+import { PluginToolbarButton } from '#blokkli/plugins'
+
+defineBlokkliFeature({
+  id: 'preview',
+  label: 'Preview',
+  icon: 'preview',
+  description: 'Provides a button to open a preview in a new window.',
+})
+
+const { $t } = useBlokkli()
+
+const route = useRoute()
+
+const previewUrl = computed(() =>
+  route.fullPath.replace('blokkliEditing', 'blokkliPreview'),
+)
+
+function openPreview() {
+  window.open(previewUrl.value)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Preview',
+}
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <div class="bk-qr-code">
+    <QrCodeVue :value="fullUrl" :size="430" level="H" />
+    <p>
+      {{ $t('previewQrCodeText', 'You can also copy the link and share it.') }}
+    </p>
+    <input :value="fullUrl" class="bk-form-input" readonly @focus="onFocus" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli } from '#imports'
+import QrCodeVue from 'qrcode.vue'
+
+const { $t } = useBlokkli()
+
+const props = defineProps<{
+  url: string
+}>()
+
+const fullUrl = computed(() => {
+  return window.location.origin + props.url
+})
+
+function onFocus(e: FocusEvent) {
+  if (e.target && e.target instanceof HTMLInputElement) {
+    e.target.select()
+  }
+}
+</script>

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

@@ -0,0 +1,73 @@
+<template>
+  <PluginToolbarButton
+    v-if="!ui.isMobile.value"
+    id="preview_with_smartphone"
+    :title="$t('previewWithSmartphone', 'Preview (with smartphone)')"
+    :tour-text="
+      $t(
+        'previewWithSmartphoneTourText',
+        'Shows a QR code to quickly open a preview of the changes with your smartphone.',
+      )
+    "
+    region="after-menu"
+    icon="qrcode"
+    @click="qrCodeVisible = true"
+  />
+
+  <Teleport to="body">
+    <Transition appear name="bk-slide-up">
+      <DialogModal
+        v-if="qrCodeVisible"
+        :title="$t('previewDialogTitle', 'Preview with smartphone')"
+        :lead="
+          $t(
+            'previewDialogLead',
+            'Scan the QR code with your smartphone to open the preview.',
+          )
+        "
+        :submit-label="$t('close', 'Close')"
+        is-danger
+        hide-buttons
+        :width="490"
+        @submit="qrCodeVisible = false"
+        @cancel="qrCodeVisible = false"
+      >
+        <QrCode v-if="previewGrantUrl" :url="previewGrantUrl" />
+      </DialogModal>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, useBlokkli, defineBlokkliFeature } from '#imports'
+import { PluginToolbarButton } from '#blokkli/plugins'
+import QrCode from './QrCode/index.vue'
+import { DialogModal } from '#blokkli/components'
+
+const { adapter } = defineBlokkliFeature({
+  id: 'preview-grant',
+  label: 'Preview Grant',
+  icon: 'qrcode',
+  description:
+    'Provides a button to open a dialog with a QR code to preview the page on a smartphone.',
+  requiredAdapterMethods: ['getPreviewGrantUrl'],
+  viewports: ['desktop'],
+})
+
+const { $t, ui } = useBlokkli()
+
+const qrCodeVisible = ref(false)
+const previewGrantUrl = ref<string | undefined | null>('')
+
+watch(qrCodeVisible, async function (isVisible) {
+  if (isVisible && !previewGrantUrl.value) {
+    previewGrantUrl.value = await adapter.getPreviewGrantUrl()
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PreviewGrant',
+}
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+  <PluginMenuButton
+    id="publish"
+    :title="$t('publishLabel', 'Publish')"
+    :description="$t('publishDescription', 'Make all changes public')"
+    :disabled="!mutations.length || !canEdit"
+    type="success"
+    :weight="0"
+    icon="publish"
+    @click="onClick"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature } from '#imports'
+import { PluginMenuButton } from '#blokkli/plugins'
+
+const { adapter } = defineBlokkliFeature({
+  id: 'publish',
+  icon: 'publish',
+  label: 'Publish',
+  requiredAdapterMethods: ['publish'],
+  description:
+    'Provides a menu button to publish the changes of the current entity.',
+})
+
+const { state, $t, eventBus } = useBlokkli()
+const { mutations, canEdit, mutateWithLoadingState } = state
+
+const onClick = async () => {
+  const success = await mutateWithLoadingState(
+    adapter.publish,
+    $t('publishError', 'Changes could not be published.'),
+    $t('publishSuccess', 'Changes published successfully.'),
+  )
+
+  if (!success) {
+    const validations = state.violations.value
+    if (validations.length) {
+      eventBus.emit('publish:failed')
+    }
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Publish',
+}
+</script>