@blokkli/editor 1.0.0

package/dist/runtime/components/Edit/Features/Transform/docs.md

@@ -0,0 +1,67 @@
+## Overview
+
+The `transform` feature implements a way to apply transform plugins to one or
+more selected blocks.
+
+The [getTransformPlugins()](/adapter/getTransformPlugins) method should return a
+list of available transform plugins. The editor then lists the plugins that are
+available for the selected blocks.
+
+## Usage in editor
+
+The matching transform plugins are displayed in the block actions overlay for
+one or more selected blocks. Selecting a transform plugin calls the
+[applyTransformPlugin()](/adapter/applyTransformPlugin) method on the adapter
+once (e.g. not separately for every block).
+
+In addition, when dragging a block over another block where a transform plugin
+would be available, the editor shows a small overlay of the first matching
+transform plugin. When the user presses the CTRL key and then drops the selected
+block onto the matching block, the transform plugin is also applied.
+
+## Examples
+
+A transform plugin can do basically anything with the selection. Some ideas:
+
+- Merge text of two or more text blocks
+- Automatically translate the contents of a block to another language
+- Extract parts of the block into new blocks, e.g. split every `<p>` into a
+  separate text block
+- Wrap all selected blocks into a new block (e.g. with 5 image blocks selected,
+  adds a new gallery block containing the image blocks)
+
+## Defining a transform plugin
+
+Every transform plugin is required to define these properties:
+
+### id: `string`
+
+A unique ID of the transform plugin.
+
+### label: `string`
+
+The human readable label of the plugin which is shown in the dropdown in the
+editor.
+
+### bundles: `string[]`
+
+Contains all block bundles for which the transform is available.
+
+### targetBundles: `string[]`
+
+The possible bundles that could result after the transform is applied.
+
+For example, when writing a transform plugin that converts blocks of bundle
+`image` into a gallery block, the value of targetBundles should be
+`['gallery']`.
+
+### min: `number`
+
+The minimum number of blocks required. A transform plugin that merges text
+blocks would set a minimum value of `2`. A plugin that translates text content
+could define the min value as `1`.
+
+### max: `number`
+
+The maximum number of blocks supported by the plugin. A value of `-1` indicates
+unlimited amount of blocks.

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

@@ -0,0 +1,177 @@
+<template>
+  <PluginItemDropdown
+    id="transform"
+    :title="$t('transformTo', 'Other actions')"
+    :enabled="!!(itemBundleIds.length && possibleTransforms.length)"
+  >
+    <button
+      v-for="transform in possibleTransforms"
+      :key="transform.id"
+      @click.prevent="onTransform(transform, selection.uuids.value)"
+    >
+      <div>
+        <div>{{ transform.label }}</div>
+      </div>
+    </button>
+  </PluginItemDropdown>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  watch,
+  useBlokkli,
+  defineBlokkliFeature,
+  useLazyAsyncData,
+} from '#imports'
+import { PluginItemDropdown } from '#blokkli/plugins'
+import { onlyUnique } from '#blokkli/helpers'
+import type {
+  DraggableExistingBlock,
+  DropArea,
+  TransformPlugin,
+} from '#blokkli/types'
+import { filterTransforms } from '#blokkli/helpers/transform'
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+import defineDropAreas from '#blokkli/helpers/composables/defineDropAreas'
+
+const { adapter } = defineBlokkliFeature({
+  id: 'transform',
+  icon: 'script',
+  label: 'Transform',
+  requiredAdapterMethods: ['getTransformPlugins', 'applyTransformPlugin'],
+  description: 'Provides integration for block transform plugins.',
+  screenshot: 'feature-transform.jpg',
+})
+
+const { types, selection, state, $t, dom } = useBlokkli()
+
+const {
+  data: plugins,
+  execute,
+  status,
+} = await useLazyAsyncData(
+  () => {
+    return adapter.getTransformPlugins()
+  },
+  { immediate: false, default: () => [] },
+)
+
+watch(selection.uuids, async () => {
+  if (status.value === 'idle') {
+    execute()
+  }
+})
+
+async function onTransform(plugin: TransformPlugin, uuids: string[]) {
+  await state.mutateWithLoadingState(
+    () =>
+      adapter.applyTransformPlugin({
+        uuids,
+        pluginId: plugin.id,
+      }),
+    $t(
+      'failedToTransform',
+      'The action "@name" could not be executed.',
+    ).replace('@name', plugin.label),
+  )
+}
+
+const itemBundleIds = computed(() =>
+  selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique),
+)
+
+const possibleTransforms = computed<TransformPlugin[]>(() =>
+  filterTransforms(
+    plugins.value || [],
+    selection.uuids.value,
+    itemBundleIds.value,
+    types.allowedTypesInList.value,
+  ),
+)
+
+defineCommands(() =>
+  possibleTransforms.value.map((transform) => ({
+    id: 'transform:' + transform.id,
+    label: transform.label,
+    group: 'selection',
+    icon: 'script',
+    callback: () => onTransform(transform, selection.uuids.value),
+  })),
+)
+
+const getPossibleDropTransforms = (
+  plugins: TransformPlugin[],
+  allBlocks: DraggableExistingBlock[],
+  dragItems: DraggableExistingBlock[],
+): PossibleTransform[] => {
+  // Filter out the dragged items from allBlocks.
+  const notDraggedBlocks = allBlocks.filter(
+    (block) => !dragItems.find((dragItem) => dragItem.uuid === block.uuid),
+  )
+
+  // Determine possible plugins based on the dragged items.
+  const validPlugins = plugins.filter((plugin) => {
+    const draggedBundles = dragItems.map((item) => item.itemBundle)
+    return (
+      draggedBundles.every((bundle) => plugin.bundles.includes(bundle)) &&
+      dragItems.length + 1 >= plugin.min &&
+      (plugin.max === -1 || dragItems.length + 1 <= plugin.max)
+    )
+  })
+
+  // Find possible transformations for each valid plugin
+  const possibleTransforms: PossibleTransform[] = []
+  validPlugins.forEach((plugin) => {
+    notDraggedBlocks.forEach((block) => {
+      if (plugin.targetBundles.includes(block.itemBundle)) {
+        possibleTransforms.push({
+          plugin,
+          block,
+        })
+      }
+    })
+  })
+
+  return possibleTransforms
+}
+
+type PossibleTransform = {
+  plugin: TransformPlugin
+  block: DraggableExistingBlock
+}
+
+defineDropAreas((dragItems) => {
+  const existing = dragItems.filter(
+    (v) => v.itemType === 'existing',
+  ) as DraggableExistingBlock[]
+
+  if (!existing.length) {
+    return
+  }
+
+  const uuids = existing.map((v) => v.uuid)
+
+  return getPossibleDropTransforms(
+    plugins.value,
+    dom.getAllBlocks(),
+    existing,
+  ).map<DropArea>((v) => {
+    return {
+      id: `transform:${v.plugin.id}:${v.block.uuid}`,
+      label: v.plugin.label,
+      element: v.block.element(),
+      onDrop: () => {
+        const transformUuids = [v.block.uuid, ...uuids]
+        return onTransform(v.plugin, transformUuids)
+      },
+    }
+  })
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Transform',
+}
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+  <div class="bk bk-translations-banner">
+    <Icon name="translate" />
+    <p v-html="text" />
+    <button class="bk-translations-banner-close" @click="onClick">
+      {{ $t('translationsBannerButton', 'Edit source language instead') }}
+      <Icon name="close" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useBlokkli } from '#imports'
+import { Icon } from '#blokkli/components'
+import type { Language } from '#blokkli/types'
+
+const props = defineProps<{
+  activeLanguage: Language
+}>()
+
+const { $t, adapter, state } = useBlokkli()
+
+const onClick = () => {
+  const sourceLanguage = state.translation.value.sourceLanguage
+  if (!sourceLanguage) {
+    throw new Error(
+      'Missing property "sourceLanguage" in TranslationState object.',
+    )
+  }
+
+  const sourceTranslation = state.translation.value.translations?.find(
+    (v) => v.id === sourceLanguage,
+  )
+
+  if (!sourceTranslation) {
+    throw new Error(
+      `Failed to find translation for language "${sourceLanguage}".`,
+    )
+  }
+
+  adapter.changeLanguage!(sourceTranslation)
+}
+
+const text = computed(() => {
+  return $t(
+    'translationsBannerText',
+    'You are currently editing the <strong>@language</strong> translation. Some features like adding, moving or deleting blocks are not available.',
+  ).replace('@language', props.activeLanguage.name)
+})
+</script>

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

@@ -0,0 +1,193 @@
+<template>
+  <Teleport to="#bk-toolbar-after-title">
+    <PluginTourItem
+      v-if="items.length"
+      id="translations"
+      :title="$t('translationsTourTitle', 'Translations')"
+      :text="
+        $t(
+          'translationsTourText',
+          'Quickly switch between available translations. A greyed out language indicates the content is not yet translated. Clicking on it opens the form to create a new translation for this language.',
+        )
+      "
+    >
+      <div class="bk-translations">
+        <button
+          v-if="isDropdown"
+          class="bk-toolbar-button"
+          :class="{ 'bk-is-active': isOpen }"
+          @click.stop.prevent="isOpen = !isOpen"
+        >
+          {{ activeLangcode }}
+        </button>
+        <div
+          v-if="isOpen || !isDropdown"
+          :class="
+            isDropdown
+              ? 'bk-translations-dropdown'
+              : 'bk-blokkli-item-options-radios bk-is-language'
+          "
+        >
+          <label
+            v-for="item in items"
+            :key="item.id"
+            :class="{ 'bk-is-muted': !item.translation?.exists }"
+          >
+            <div>
+              <input
+                type="radio"
+                :checked="item.checked"
+                :value="item.id"
+                name="pb_language"
+                @click.stop.prevent="onClick(item, $event)"
+              />
+              <span>{{ item.code }}</span>
+              <div :class="{ 'bk-tooltip': !isDropdown }">{{ item.label }}</div>
+            </div>
+          </label>
+        </div>
+      </div>
+    </PluginTourItem>
+  </Teleport>
+
+  <Teleport to="body">
+    <Banner
+      v-if="state.editMode.value === 'translating'"
+      :active-language="activeLanguage"
+    />
+  </Teleport>
+
+  <PluginMenuButton
+    id="translations"
+    :title="$t('translationsBatchTranslateMenuTitle', 'Translate...')"
+    :description="
+      $t('translationsBatchTranslateMenuDescription', 'Translate all blocks')
+    "
+    :disabled="editMode !== 'translating'"
+    :weight="60"
+    icon="translate"
+    @click="eventBus.emit('batchTranslate')"
+  />
+
+  <PluginItemAction
+    v-if="editMode === 'translating'"
+    id="translate"
+    :title="$t('translationsItemAction', 'Translate')"
+    icon="translate"
+    @click="onTranslate"
+  />
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  onMounted,
+} from '#imports'
+import { falsy } from '#blokkli/helpers'
+import {
+  PluginMenuButton,
+  PluginItemAction,
+  PluginTourItem,
+} from '#blokkli/plugins'
+import type {
+  DraggableExistingBlock,
+  EntityTranslation,
+  Language,
+} from '#blokkli/types'
+import Banner from './Banner/index.vue'
+
+const { adapter } = defineBlokkliFeature({
+  id: 'translations',
+  label: 'Translations',
+  icon: 'translate',
+  requiredAdapterMethods: ['changeLanguage'],
+  description: 'Adds support for block translations.',
+})
+
+const { eventBus, state, context, $t, ui } = useBlokkli()
+const { translation, editMode } = state
+
+const isOpen = ref(false)
+
+const isDropdown = computed(() => ui.isMobile.value || items.value.length > 5)
+const activeLangcode = computed(() => context.value.language)
+const activeLanguage = computed<Language>(() => {
+  return (
+    translation.value.availableLanguages?.find(
+      (v) => v.id === activeLangcode.value,
+    ) || {
+      id: activeLangcode.value,
+      name: activeLangcode.value,
+    }
+  )
+})
+
+type TranslationStateItem = {
+  id: string
+  code: string
+  label: string
+  checked: boolean
+  translation?: EntityTranslation
+}
+
+const items = computed<TranslationStateItem[]>(() => {
+  return (translation.value.availableLanguages || [])
+    .map((language) => {
+      if (language && language.id) {
+        return {
+          id: language.id,
+          code: language.id.toUpperCase(),
+          label: language.name,
+          checked: context.value.language === language.id,
+          translation: (translation.value.translations || []).find(
+            (v) => v.id === language.id,
+          ),
+        }
+      }
+      return null
+    })
+    .filter(falsy)
+})
+
+function onClick(item: TranslationStateItem, event: Event) {
+  if (item.translation?.exists) {
+    return adapter.changeLanguage(item.translation)
+  }
+
+  event.preventDefault()
+  if (item.translation) {
+    eventBus.emit('translateEntity', item.translation)
+  }
+}
+
+function onTranslate(items: DraggableExistingBlock[]) {
+  eventBus.emit('item:edit', {
+    uuid: items[0].uuid,
+    bundle: items[0].itemBundle,
+  })
+}
+
+onMounted(() => {
+  // Make sure the user is not trying to edit a translation that does not exist.
+  const translationExists = !!translation.value.translations?.find(
+    (v) => v.id === context.value.language,
+  )
+  if (!translationExists) {
+    const sourceTranslation = translation.value.translations?.find(
+      (v) => v.id === translation.value.sourceLanguage,
+    )
+    if (sourceTranslation) {
+      return adapter.changeLanguage(sourceTranslation)
+    }
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Translations',
+}
+</script>

package/dist/runtime/components/Edit/Features/Validations/Overlay/Item.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :style="style">
+    <div v-html="messages.join(', ')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBlokkli, ref, computed } from '#imports'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import type { Rectangle } from '#blokkli/types'
+
+const { dom } = useBlokkli()
+
+const props = defineProps<{
+  uuid: string
+  messages: string[]
+}>()
+
+const rect = ref<Rectangle | null>(null)
+
+const style = computed(() => {
+  if (!rect.value) {
+    return
+  }
+
+  return {
+    transform: `translate(${rect.value.x}px, ${rect.value.y}px)`,
+    width: rect.value.width + 'px',
+    height: rect.value.height + 'px',
+  }
+})
+
+onBlokkliEvent('canvas:draw', () => {
+  const newRect = dom.getBlockRect(props.uuid)
+  if (!newRect) {
+    return
+  }
+
+  if (
+    newRect.width === rect.value?.width &&
+    newRect.height === rect.value.height &&
+    newRect.x === rect.value.x &&
+    newRect.y === rect.value.y
+  ) {
+    return
+  }
+
+  rect.value = newRect
+})
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <Teleport to=".bk-main-canvas">
+    <div class="bk bk-validations-overlay">
+      <OverlayItem v-for="item in items" :key="item.uuid" v-bind="item" />
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { falsy } from '#blokkli/helpers'
+import type { Validation } from '#blokkli/types'
+import { useBlokkli, computed } from '#imports'
+import OverlayItem from './Item.vue'
+
+const props = defineProps<{
+  validations: Validation[]
+}>()
+
+const { runtimeConfig } = useBlokkli()
+
+const items = computed(() =>
+  Object.entries(
+    props.validations
+      .map((v) => {
+        if (v.entityType === runtimeConfig.itemEntityType && v.entityUuid) {
+          return {
+            uuid: v.entityUuid,
+            message: v.message,
+          }
+        }
+
+        return null
+      })
+      .filter(falsy)
+      .reduce<Record<string, string[]>>((acc, v) => {
+        if (!acc[v.uuid]) {
+          acc[v.uuid] = []
+        }
+
+        acc[v.uuid].push(v.message)
+
+        return acc
+      }, {}),
+  ).map((v) => {
+    return {
+      uuid: v[0],
+      messages: v[1],
+    }
+  }),
+)
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+  <button class="bk-validation-item" @click.prevent="onClick">
+    <div v-if="block" class="bk-validation-item-header">
+      <ItemIcon :bundle="block.itemBundle" />
+      <div>{{ itemBundle?.label }}</div>
+    </div>
+    <div v-html="message" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useBlokkli, computed } from '#imports'
+import { ItemIcon } from '#blokkli/components'
+
+const props = defineProps<{
+  message: string
+  propertyPath?: string
+  code?: string
+  entityType?: string
+  entityUuid?: string
+}>()
+
+const { runtimeConfig, eventBus, dom, types } = useBlokkli()
+
+const isBlock = computed(
+  () => props.entityType === runtimeConfig.itemEntityType,
+)
+
+const block = computed(() => {
+  if (isBlock.value && props.entityUuid) {
+    return dom.findBlock(props.entityUuid)
+  }
+
+  return null
+})
+
+const itemBundle = computed(() => {
+  if (block.value?.itemBundle) {
+    return types.getBlockBundleDefinition(block.value.itemBundle)
+  }
+
+  return null
+})
+
+function onClick() {
+  if (isBlock.value && props.entityUuid) {
+    eventBus.emit('scrollIntoView', { uuid: props.entityUuid, center: true })
+  }
+}
+</script>