@blokkli/editor 1.0.0

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

@@ -0,0 +1,38 @@
+<template>
+  <PluginMenuButton
+    id="exit"
+    :title="$t('exitTitle', 'Close')"
+    :description="$t('exitDescription', 'Close editor without publishing')"
+    :weight="100"
+    icon="exit"
+    @click="onClick"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, useRoute, nextTick, defineBlokkliFeature } from '#imports'
+import { PluginMenuButton } from '#blokkli/plugins'
+
+defineBlokkliFeature({
+  id: 'exit',
+  label: 'Exit',
+  icon: 'exit',
+  description: 'Provides a menu button to exit the editor without saving.',
+})
+
+const { $t } = useBlokkli()
+
+const route = useRoute()
+
+function onClick() {
+  nextTick(() => {
+    window.location.href = route.path
+  })
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Exit',
+}
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+  <div v-show="!selection.isDragging.value" class="bk">
+    <div
+      v-for="area in areas"
+      :key="area.key"
+      class="bk-field-area"
+      :style="area.style"
+      :class="{ 'bk-is-active': area.key === selection.activeFieldKey.value }"
+      @click="eventBus.emit('setActiveFieldKey', area.key)"
+    >
+      <div>
+        <span>{{ area.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, useBlokkli } from '#imports'
+
+const { eventBus, selection } = useBlokkli()
+
+type FieldArea = {
+  key: string
+  name: string
+  label: string
+  style: {
+    transform: string
+  }
+}
+
+const areas = ref<FieldArea[]>([])
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <PluginViewOption
+    id="fieldAreas"
+    v-slot="{ isActive }"
+    :label="$t('fieldAreasToggle', 'Toggle block fields')"
+    :title-on="$t('fieldAreasShow', 'Show block fields')"
+    :title-off="$t('fieldAreasHide', 'Hide block fields')"
+    :tour-text="
+      $t(
+        'fieldAreasTourText',
+        'Toggle between showing or hiding the areas where blocks can be placed.',
+      )
+    "
+    icon="area"
+    key-code="I"
+  >
+    <Teleport v-if="isActive" to="body">
+      <Overlay />
+    </Teleport>
+  </PluginViewOption>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature } from '#imports'
+import Overlay from './Overlay/index.vue'
+import { PluginViewOption } from '#blokkli/plugins'
+
+defineBlokkliFeature({
+  id: 'field-areas',
+  label: 'Field Areas',
+  icon: 'area',
+  description: 'Provides a view option to render the field areas with labels.',
+  viewports: ['desktop'],
+})
+
+const { $t } = useBlokkli()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'FieldAreas',
+}
+</script>

package/dist/runtime/components/Edit/Features/Fragments/Dialog/Item/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div :class="backgroundClass">
+    <div class="bk bk-library-list-item-header">
+      <h3>{{ label || name }}</h3>
+      <p v-if="description">{{ description }}</p>
+    </div>
+    <div
+      v-if="renderPreview"
+      class="bk-library-list-item-inner"
+      :class="backgroundClass"
+    >
+      <ScaleToFit :width="previewWidth">
+        <BlokkliItem
+          v-bind="item"
+          parent-type="nested"
+          class="bk-drop-element"
+        />
+      </ScaleToFit>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from '#imports'
+import { getFragmentDefinition } from '#blokkli/definitions'
+import { ScaleToFit } from '#blokkli/components'
+import {
+  INJECT_FIELD_LIST_BLOCKS,
+  INJECT_IS_EDITING,
+  INJECT_IS_IN_REUSABLE,
+  INJECT_PROVIDER_BLOCKS,
+} from '#blokkli/helpers/symbols'
+
+const props = defineProps<{
+  name: string
+  index: number
+  label?: string
+  description?: string
+}>()
+
+const item = computed(() => {
+  return {
+    bundle: 'blokkli_fragment',
+    uuid: props.index.toString(),
+    props: {
+      name: props.name,
+    },
+  }
+})
+
+const definition = computed(() => getFragmentDefinition(props.name))
+
+const previewWidth = computed(() => definition.value?.editor?.previewWidth)
+const renderPreview = computed(
+  () => definition.value?.editor?.noPreview !== true,
+)
+
+const backgroundClass = computed(
+  () => definition.value?.editor?.previewBackgroundClass || '',
+)
+
+const blocks = computed(() => [])
+
+provide(INJECT_IS_IN_REUSABLE, true)
+provide(INJECT_IS_EDITING, false)
+provide(INJECT_FIELD_LIST_BLOCKS, blocks)
+provide(INJECT_PROVIDER_BLOCKS, blocks)
+</script>

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

@@ -0,0 +1,137 @@
+<template>
+  <FormOverlay
+    id="fragments"
+    :title="$t('fragmentsPlaceDialogTitle', 'Add fragment block')"
+    icon="reusable"
+    @close="onClose"
+  >
+    <div class="bk-library-dialog">
+      <p class="bk-lead">
+        {{
+          $t(
+            'fragmentsPlaceDialogLead',
+            'Select a block fragment to add to the page.',
+          )
+        }}
+      </p>
+      <div class="bk">
+        <label class="bk-form-label" for="library_search">
+          {{ $t('fragmentsPlaceDialogSearchLabel', 'Filter fragments') }}
+        </label>
+        <input
+          id="fragments_search"
+          v-model="searchText"
+          type="text"
+          class="bk-form-input"
+          :placeholder="
+            $t('fragmentsPlaceDialogSearchPlaceholder', 'Search fragments')
+          "
+          required
+        />
+      </div>
+      <ul class="bk-library-dialog-list">
+        <li
+          v-for="(item, index) in fragments"
+          :key="item.name"
+          :class="{
+            'bk-is-selected': selectedItem === item.name,
+          }"
+          @click="selectedItem = item.name"
+        >
+          <FragmentItem
+            v-show="visible === null || visible.includes(item.name)"
+            :name="item.name"
+            :label="item.label"
+            :description="item.description"
+            :index="index"
+          />
+        </li>
+      </ul>
+    </div>
+    <template #footer>
+      <button class="bk-button bk-is-primary" @click="onSubmit">
+        {{ $t('fragmentsPlaceDialogSubmitButton', 'Add selected fragment') }}
+      </button>
+    </template>
+  </FormOverlay>
+</template>
+
+<script setup lang="ts">
+import { FormOverlay } from '#blokkli/components'
+import { fragmentDefinitions } from '#blokkli/definitions'
+import { falsy } from '#blokkli/helpers'
+import type { BlokkliFieldElement } from '#blokkli/types'
+import { ref, useBlokkli, computed, watch } from '#imports'
+import FragmentItem from './Item/index.vue'
+
+const props = defineProps<{
+  field: BlokkliFieldElement
+}>()
+
+const { $t } = useBlokkli()
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'submit', uuid: string): void
+}>()
+
+const searchText = ref('')
+const listEl = ref<HTMLDivElement | null>(null)
+const selectedItem = ref('')
+
+const allowedInField = computed(() => props.field.allowedFragments || [])
+
+const fragments = computed(() =>
+  fragmentDefinitions.filter((v) => allowedInField.value.includes(v.name)),
+)
+
+const onSubmit = () => {
+  if (selectedItem.value) {
+    emit('submit', selectedItem.value)
+  }
+}
+const onClose = () => {
+  emit('close')
+}
+
+type SearchElement = {
+  uuid: string
+  text: string
+}
+
+const elements = ref<SearchElement[]>([])
+
+const buildElements = () => {
+  if (!listEl.value) {
+    return
+  }
+  elements.value = [...listEl.value.querySelectorAll('.bk-library-list-item')]
+    .map((el) => {
+      if (el instanceof HTMLElement) {
+        const uuid = el.dataset.libraryItemUuid
+        if (uuid) {
+          return {
+            uuid,
+            text: el.textContent?.toLowerCase() || '',
+          }
+        }
+      }
+    })
+    .filter(falsy)
+}
+
+watch(searchText, () => {
+  if (!elements.value.length) {
+    buildElements()
+  }
+})
+
+const visible = computed<string[] | null>(() => {
+  if (!searchText.value || !elements.value.length) {
+    return null
+  }
+
+  return elements.value
+    .filter((v) => v.text.includes(searchText.value.toLowerCase()))
+    .map((v) => v.uuid)
+})
+</script>

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

@@ -0,0 +1,101 @@
+## Overview
+
+The fragments feature implements a way to create non-editable content fragments
+that can be placed on multiple pages. A fragment can be anything from a simple
+button to a complex section, for example:
+
+- CTA section with title, lead and CTA button
+- Pricing table
+- Table of contents
+- Contact form
+
+A fragment is entirely defined by your app and does not have to rely on data
+from your backend.
+
+In the background, a fragment is rendered using the special `blokkli_fragment`
+block bundle. For fragments to work your backend must provide a block of this
+bundle. The block stores the `name` of the fragment.
+
+## Defining fragments
+
+Defining a fragment is similar to defining a normal block component. But instead
+of `defineBlokkli` you have to use `defineBlokkliFragment`:
+
+```vue
+<template>
+  <div>
+    <h2>This is my fragment!</h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineBlokkliFragment({
+  name: 'my_demo_fragment',
+  label: 'My Demo Fragment',
+  description: 'Renders a simple text.',
+  editor: {
+    previewWidth: 1200,
+  },
+})
+</script>
+```
+
+The argument of the composable is similar to the one of `defineBlokkli`, but
+instead of `bundle` you define both a `name` and `label` (both are required) and
+an option `description`. Other properties like `options`, `globalOptions` or
+`editor` are also available.
+
+## Data structure
+
+For blökkli to render the correct fragment a block of bundle `blokkli_fragment`
+must exist.
+
+To render a fragment, the following data structure is needed:
+
+::: code-group
+
+```vue [~/pages/example.vue]
+<template>
+  <BlokkliProvider
+    entity-type="content"
+    entity-bundle="blog_post"
+    entity-uuid="1"
+  >
+    <BlokkliField :list="blocks" name="blocks" />
+  </BlokkliProvider>
+</template>
+
+<script lang="ts" setup>
+const blocks = [
+  {
+    uuid: '9485812c-0ecd-4699-85b2-3a031d47a0a1',
+    bundle: 'blokkli_fragment',
+    props: {
+      name: 'my_demo_fragment',
+    },
+  },
+]
+</script>
+```
+
+:::
+
+The block must provide the name of the fragment as the only prop. blökkli will
+then render the fragment component that matches this name.
+
+Options work as you would expect:
+
+```typescript
+const blocks = [
+  {
+    uuid: '9485812c-0ecd-4699-85b2-3a031d47a0a1',
+    bundle: 'blokkli_fragment',
+    options: {
+      myDemoOption: true,
+    },
+    props: {
+      name: 'my_demo_fragment',
+    },
+  },
+]
+```

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

@@ -0,0 +1,86 @@
+<template>
+  <PluginAddAction
+    v-if="
+      adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
+    "
+    type="fragment"
+    :title="$t('fragmentsAddFragmentAction', 'Add fragment')"
+    :description="
+      $t(
+        'fragmentsAddFragmentDescription',
+        '<p>Drag the icon into the page to add a fragment block.</p><p>Fragments are reusable blocks that always render the same content.</p>',
+      )
+    "
+    :disabled="!isEnabled"
+    item-bundle="blokkli_fragment"
+    icon="fragment"
+    color="accent"
+    @placed="placedAction = $event"
+  />
+
+  <Teleport to="body">
+    <transition name="bk-slide-in" :duration="200">
+      <FragmentsDialog
+        v-if="placedAction && adapter.getLibraryItems"
+        :field="placedAction.field"
+        @close="placedAction = null"
+        @submit="onAddFragment"
+      />
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, useBlokkli, defineBlokkliFeature, computed } from '#imports'
+import { PluginAddAction } from '#blokkli/plugins'
+import FragmentsDialog from './Dialog/index.vue'
+import type { ActionPlacedEvent } from '#blokkli/types'
+
+const { adapter } = defineBlokkliFeature({
+  id: 'fragments',
+  icon: 'fragment',
+  label: 'Fragments',
+  description: 'Provides way to add content fragments defined by the frontend.',
+  requiredAdapterMethods: ['fragmentsAddBlock'],
+})
+
+const { state, $t, types, selection, dom } = useBlokkli()
+
+const isEnabled = computed<boolean>(() => {
+  if (selection.blocks.value.length === 1) {
+    const block = selection.blocks.value[0]
+    const field = dom.findField(block.hostUuid, block.hostFieldName)
+    return !!field?.allowedFragments.length
+  }
+
+  return true
+})
+
+const placedAction = ref<ActionPlacedEvent | null>(null)
+
+const onAddFragment = async (name: string) => {
+  if (!placedAction.value || !adapter.fragmentsAddBlock) {
+    return
+  }
+
+  await state.mutateWithLoadingState(() =>
+    adapter.fragmentsAddBlock({
+      name,
+      host: placedAction.value!.host,
+      preceedingUuid: placedAction.value!.preceedingUuid,
+    }),
+  )
+
+  placedAction.value = null
+}
+
+const isSupportedOnEntity = computed(() =>
+  types.generallyAvailableBundles.find((v) => v.id === 'blokkli_fragment'),
+)
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Fragments',
+}
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+  <PluginViewOption
+    id="grid"
+    v-slot="{ isActive }"
+    :label="$t('gridToggle', 'Toggle grid')"
+    :title-on="$t('gridShow', 'Show grid')"
+    :title-off="$t('gridHide', 'Hide grid')"
+    :tour-text="
+      $t('gridTourText', 'Display a layout grid overlay on top of the page.')
+    "
+    key-code="G"
+    icon="grid"
+  >
+    <div v-if="isActive" class="bk-grid-overlay" v-html="gridMarkup" />
+  </PluginViewOption>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature } from '#imports'
+import { PluginViewOption } from '#blokkli/plugins'
+
+const { adapter } = defineBlokkliFeature({
+  id: 'grid',
+  label: 'Grid',
+  icon: 'grid',
+  requiredAdapterMethods: ['getGridMarkup'],
+  description: 'Provides a view option to render a grid.',
+  viewports: ['desktop'],
+})
+
+const gridMarkup = await Promise.resolve(adapter.getGridMarkup())
+
+const { $t } = useBlokkli()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Grid',
+}
+</script>

package/dist/runtime/components/Edit/Features/Help/Shortcuts/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="bk-help-shortcuts">
+    <table>
+      <tbody>
+        <!-- eslint-disable-next-line vue/no-v-for-template-key -->
+        <template v-for="group in groups" :key="group.group">
+          <tr class="bk-is-heading">
+            <th colspan="2">{{ group.group }}</th>
+          </tr>
+          <tr v-for="(shortcut, i) in group.shortcuts" :key="group.group + i">
+            <td>
+              <ShortcutIndicator
+                view-only
+                :meta="shortcut.meta"
+                :shift="shortcut.shift"
+                :key-code="shortcut.code"
+                :label="shortcut.label"
+              />
+            </td>
+            <td>{{ shortcut.label }}</td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, computed } from '#imports'
+import { ShortcutIndicator } from '#blokkli/components'
+import type { KeyboardShortcut } from '#blokkli/types'
+
+type ShortcutGroup = {
+  group: string
+  shortcuts: KeyboardShortcut[]
+}
+
+const { keyboard, $t } = useBlokkli()
+
+const getGroupLabel = (key: string) => {
+  if (key === 'general') {
+    return $t('shortcutGroupGeneral', 'General')
+  } else if (key === 'blocks') {
+    return $t('shortcutGroupBlocks', 'Blocks')
+  } else if (key === 'ui') {
+    return $t('shortcutGroupUi', 'UI')
+  }
+
+  return key
+}
+
+const groups = computed(() => {
+  return Object.values(
+    keyboard.shortcuts.value.reduce<Record<string, ShortcutGroup>>((acc, v) => {
+      const group = getGroupLabel(v.shortcut.group || 'general')
+      if (!acc[group]) {
+        acc[group] = {
+          group,
+          shortcuts: [],
+        }
+      }
+
+      acc[group].shortcuts.push(v.shortcut)
+      return acc
+    }, {}),
+  ).map((group) => {
+    group.shortcuts.sort((a, b) => a.code.localeCompare(b.code))
+    return group
+  })
+})
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+  <PluginSidebar
+    id="help"
+    :title="$t('featureHelpTitle', 'Help')"
+    :tour-text="$t('helpTourText', 'Shows a list of available shortcuts.')"
+    icon="help"
+    weight="100"
+    key-code="F1"
+  >
+    <div class="bk bk-help">
+      <div v-if="isTourEnabled" class="bk-help-section">
+        <button
+          class="bk-button bk-is-warning bk-is-fullwidth"
+          :disabled="tour.isTouring.value"
+          @click="tour.isTouring.value = true"
+        >
+          {{ $t('tourLabel', 'Take a tour') }}
+        </button>
+      </div>
+      <div class="bk-help-section">
+        <h3>{{ $t('featureHelpShortcuts', 'Shortcuts') }}</h3>
+        <Shortcuts />
+      </div>
+    </div>
+  </PluginSidebar>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature, computed } from '#imports'
+import { PluginSidebar } from '#blokkli/plugins'
+import Shortcuts from './Shortcuts/index.vue'
+
+defineBlokkliFeature({
+  id: 'help',
+  icon: 'help',
+  label: 'Help',
+  description:
+    'Provides a sidebar pane with helpful information on how to use blokkli.',
+  viewports: ['desktop'],
+})
+
+const { $t, features, tour } = useBlokkli()
+
+const isTourEnabled = computed(() =>
+  features.features.value.find((v) => v.id === 'tour'),
+)
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Help',
+}
+</script>