@blokkli/editor 1.0.0

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

@@ -0,0 +1,263 @@
+<template>
+  <PluginSidebar
+    id="history"
+    v-slot="{ scrolledToEnd }"
+    :title="$t('history', 'History')"
+    :tour-text="
+      $t(
+        'historyTourText',
+        'See a list of all changes made so far and switch back and forth between changes.',
+      )
+    "
+    icon="history"
+    weight="-100"
+  >
+    <div class="bk bk-history bk-control" @wheel.capture.stop>
+      <ul v-if="mapped.length">
+        <li
+          v-for="item in mapped"
+          :key="item.index"
+          :class="{
+            'bk-is-not-active': item.index > currentMutationIndex,
+            'bk-is-active': item.index === currentMutationIndex,
+            'bk-is-disabled': !item.enabled,
+            'bk-is-applied': item.index < currentMutationIndex && item.enabled,
+          }"
+        >
+          <button
+            :disabled="!canEdit"
+            class="bk-history-item-button"
+            @click="setHistoryIndex(item.index)"
+          >
+            <div>
+              <div>
+                <strong>{{ item.mutation.plugin?.label }}</strong>
+              </div>
+              <RelativeTime
+                v-if="item.timestamp"
+                v-slot="{ formatted }"
+                :timestamp="item.timestamp"
+              >
+                <em>{{ formatted }}</em>
+              </RelativeTime>
+            </div>
+          </button>
+          <div v-if="canSetStatus" class="bk-history-item-actions">
+            <button
+              @click.prevent="setMutationItemStatus(item.index, !item.enabled)"
+            >
+              <Icon name="close" />
+            </button>
+          </div>
+        </li>
+        <li v-if="totalMutations > showAmount" class="bk-history-load-more">
+          <button class="bk-history-item-button" @click="showAmount += 100">
+            <strong
+              >{{
+                $t('historyShowMore', 'Show @count more').replace(
+                  '@count',
+                  Math.min(totalMutations - showAmount, 100).toString(),
+                )
+              }}
+            </strong>
+          </button>
+        </li>
+        <li
+          class="bk-is-last"
+          :class="[
+            currentMutationIndex === -1 ? 'bk-is-active' : 'bk-is-applied',
+            { 'bk-has-shadow': !scrolledToEnd },
+          ]"
+        >
+          <button class="bk-history-item-button" @click="setHistoryIndex(-1)">
+            <div>
+              <strong>{{
+                $t('historyCurrentRevision', 'Current revision')
+              }}</strong>
+            </div>
+            <!-- @TODO: Pass in the timestamp of the entity's latest revision. -->
+            <!-- <RelativeTime -->
+            <!--   v-if="item.timestamp" -->
+            <!--   :timestamp="item.timestamp" -->
+            <!--   v-slot="{ formatted }" -->
+            <!-- > -->
+            <!--   <div>{{ formatted }}</div> -->
+            <!-- </RelativeTime> -->
+          </button>
+        </li>
+      </ul>
+      <div v-else class="bk-history-empty-message">
+        {{ $t('historyEmpty', 'There are now changes yet.') }}
+      </div>
+    </div>
+  </PluginSidebar>
+
+  <PluginToolbarButton
+    id="undo"
+    :title="$t('historyUndo', 'Undo')"
+    meta
+    key-code="Z"
+    region="before-title"
+    :disabled="!canUndo"
+    :tour-text="$t('historyUndoTourText', 'Undo the last change.')"
+    icon="undo"
+    @click="undo"
+  />
+
+  <PluginToolbarButton
+    id="redo"
+    :title="$t('historyRedo', 'Redo')"
+    meta
+    shift
+    key-code="Z"
+    region="before-title"
+    :disabled="!canRedo"
+    :tour-text="$t('historyRedoTourText', 'Redo the previous change.')"
+    icon="redo"
+    @click="redo"
+  />
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  watch,
+  defineBlokkliFeature,
+  onMounted,
+  onBeforeUnmount,
+} from '#imports'
+import { PluginSidebar, PluginToolbarButton } from '#blokkli/plugins'
+import { RelativeTime, Icon } from '#blokkli/components'
+import type { MutationItem } from '#blokkli/types'
+
+const { adapter, settings } = defineBlokkliFeature({
+  id: 'history',
+  icon: 'history',
+  label: 'History',
+  requiredAdapterMethods: ['setHistoryIndex'],
+  description:
+    'Implements support for history features (undo, redo, list of mutations).',
+  settings: {
+    useMouseButtons: {
+      type: 'checkbox',
+      label: 'Use mouse buttons for undo/redo',
+      default: true,
+      group: 'behavior',
+      viewports: ['desktop'],
+    },
+  },
+})
+
+const { state, $t, ui } = useBlokkli()
+
+const canSetStatus = !!adapter.setMutationItemStatus
+
+const { mutations, currentMutationIndex, canEdit, mutateWithLoadingState } =
+  state
+
+const showAmount = ref(50)
+const useMouseForHistory = computed(() => settings.value.useMouseButtons)
+const canUndo = computed(() => currentMutationIndex.value >= 0)
+const canRedo = computed(
+  () => currentMutationIndex.value < mutations.value.length - 1,
+)
+const totalMutations = computed(() => mutations.value.length)
+
+watch(totalMutations, (newTotal, previousTotal) => {
+  if (newTotal !== previousTotal) {
+    showAmount.value = 50
+  }
+})
+
+type HistoryItem = {
+  index: number
+  mutation: MutationItem
+  timestamp: number
+  enabled: boolean
+}
+
+const mapped = computed<HistoryItem[]>(() =>
+  mutations.value
+    .map((mutation, index) => {
+      return {
+        index,
+        mutation,
+        timestamp: mutation.timestamp ? Number.parseInt(mutation.timestamp) : 0,
+        enabled: mutation.enabled !== false,
+      }
+    })
+    .sort((a, b) => {
+      return b.timestamp - a.timestamp
+    })
+    .filter((v, _i, arr) => {
+      return v.index >= arr.length - showAmount.value
+    }),
+)
+
+async function setHistoryIndex(index: number) {
+  if (index !== currentMutationIndex.value) {
+    await mutateWithLoadingState(() => adapter.setHistoryIndex(index))
+  }
+}
+
+const undo = () =>
+  mutateWithLoadingState(() =>
+    adapter.setHistoryIndex(currentMutationIndex.value - 1),
+  )
+const redo = () =>
+  mutateWithLoadingState(() =>
+    adapter.setHistoryIndex(currentMutationIndex.value + 1),
+  )
+
+async function setMutationItemStatus(index: number, status: boolean) {
+  if (!adapter.setMutationItemStatus) {
+    return
+  }
+  await mutateWithLoadingState(() =>
+    adapter.setMutationItemStatus!(index, status),
+  )
+}
+
+const onMouseUp = (e: MouseEvent) => {
+  if (e.button === 3) {
+    // History back button on the mouse.
+    e.preventDefault()
+    e.stopPropagation()
+    if (canUndo.value) {
+      undo()
+    }
+  } else if (e.button === 4) {
+    // History forward button on the mouse.
+    e.preventDefault()
+    e.stopPropagation()
+    if (canRedo.value) {
+      redo()
+    }
+  }
+}
+
+const setupMouseListeners = () => {
+  document.removeEventListener('mouseup', onMouseUp)
+  if (useMouseForHistory.value && ui.isDesktop.value) {
+    document.addEventListener('mouseup', onMouseUp)
+  }
+}
+
+watch(useMouseForHistory, setupMouseListeners)
+
+onMounted(() => {
+  setupMouseListeners()
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mouseup', onMouseUp)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'History',
+}
+</script>

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

@@ -0,0 +1,140 @@
+<template>
+  <DialogModal
+    :title="$t('importExistingDialogTitle', 'Import from existing page')"
+    :lead="
+      $t(
+        'importExistingDialogLead',
+        'Import content from an existing page. The items will be added to the end of the list. This action can be undone.',
+      )
+    "
+    :width="600"
+    :submit-label="$t('importExistingDialogSubmit', 'Import content')"
+    :can-submit="!!(sourceEntityUuid && selectedFields.length)"
+    :is-loading="isLoading"
+    @submit="onSubmit"
+    @cancel="$emit('cancel')"
+  >
+    <div class="bk">
+      <div class="bk-form-section">
+        <h3 class="bk-form-label">
+          {{
+            $t(
+              'importExistingFieldsLabel',
+              'Which content would you like to import?',
+            )
+          }}
+        </h3>
+        <label v-for="field in fields" :key="field.name" class="bk-checkbox">
+          <input v-model="selectedFields" type="checkbox" :value="field.name" />
+          <span>{{ field.label }}</span>
+        </label>
+      </div>
+      <div class="bk-form-section">
+        <label for="pb_search_term" class="bk-form-label">{{
+          $t(
+            'importExistingPagesLabel',
+            'From which page would you like to import?',
+          )
+        }}</label>
+        <input
+          id="pb_search_term"
+          v-model="searchTerm"
+          type="text"
+          class="bk-form-input"
+          :placeholder="$t('importExistingSearchPlaceholder', 'Search pages')"
+          required
+        />
+      </div>
+      <div>
+        {{
+          $t('importExistingResultsTitle', '@count of @total pages')
+            .replace('@count', entities.length.toString())
+            .replace('@total', total.toString())
+        }}
+      </div>
+      <div
+        class="bk-radio-list"
+        :style="{ opacity: searchTerm !== resultsSearchTerm ? 0.5 : 1 }"
+      >
+        <label v-for="entity in entities" :key="entity.uuid" class="bk-radio">
+          <input
+            v-model="sourceEntityUuid"
+            type="radio"
+            :value="entity.uuid"
+            name="entity"
+          />
+          <span>{{ entity.label }}</span>
+        </label>
+      </div>
+    </div>
+  </DialogModal>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  watch,
+  ref,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+} from '#imports'
+
+import { DialogModal } from '#blokkli/components'
+import type { ImportItem } from '#blokkli/types'
+
+const { adapter, $t, types, context } = useBlokkli()
+
+const emit = defineEmits<{
+  (e: 'confirm', data: { sourceUuid: string; fields: string[] }): void
+  (e: 'cancel'): void
+}>()
+
+const searchTerm = ref('')
+const resultsSearchTerm = ref('')
+const sourceEntityUuid = ref('')
+const selectedFields = ref<string[]>([])
+const isLoading = ref(false)
+const entities = ref<ImportItem[]>([])
+const total = ref(0)
+
+let timeout: any = null
+
+watch(searchTerm, (newTerm) => {
+  clearTimeout(timeout)
+
+  timeout = setTimeout(() => {
+    loadResults(newTerm)
+  }, 300)
+})
+
+async function loadResults(userInput = '') {
+  const result = await adapter.getImportItems!(userInput)
+  entities.value = result.items
+  total.value = result.total
+  resultsSearchTerm.value = userInput
+}
+
+function onSubmit() {
+  emit('confirm', {
+    sourceUuid: sourceEntityUuid.value,
+    fields: selectedFields.value,
+  })
+  isLoading.value = true
+}
+
+const fields = computed(() =>
+  types.fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle,
+  ),
+)
+
+onMounted(() => {
+  loadResults()
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(timeout)
+})
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <PluginMenuButton
+    v-if="state.mutatedFields.value.length"
+    id="import_existing"
+    :title="$t('importExistingTitle', 'Import...')"
+    :description="
+      $t('importExistingDescription', 'Import from an existing page')
+    "
+    :disabled="state.editMode.value !== 'editing'"
+    :weight="50"
+    icon="import"
+    @click="showModal = true"
+  />
+
+  <Teleport to="body">
+    <transition appear name="bk-slide-up">
+      <ExistingDialog
+        v-if="showModal"
+        @confirm="onSubmit($event.sourceUuid, $event.fields)"
+        @cancel="showModal = false"
+      />
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  defineBlokkliFeature,
+} from '#imports'
+import { PluginMenuButton } from '#blokkli/plugins'
+import ExistingDialog from './Dialog/index.vue'
+
+const { adapter, settings } = defineBlokkliFeature({
+  id: 'import-existing',
+  label: 'Import existing content',
+  icon: 'import',
+  requiredAdapterMethods: ['getImportItems', 'importFromExisting'],
+  description:
+    'Implements a menu action that renders a dialog to import blocks from another entity.',
+
+  settings: {
+    showDialogWhenEmpty: {
+      type: 'checkbox',
+      default: true,
+      label: 'Show import dialog at start when page is empty',
+      group: 'behavior',
+    },
+  },
+})
+
+const { state, $t } = useBlokkli()
+
+const isEmpty = computed(
+  () => !state.mutatedFields.value.find((v) => v.list?.length),
+)
+
+const showModal = ref(false)
+
+function onSubmit(sourceUuid: string, sourceFields: string[]) {
+  showModal.value = false
+  state.mutateWithLoadingState(
+    () =>
+      adapter.importFromExisting({
+        sourceFields,
+        sourceUuid,
+      }),
+    $t('importExistingError', 'Content could not be imported.'),
+    $t('importExistingSuccess', 'Content imported successfully.'),
+  )
+}
+
+onMounted(() => {
+  // Show the import dialog when there are no items yet and no mutations.
+  if (
+    isEmpty.value &&
+    !state.mutations.value.length &&
+    settings.value.showDialogWhenEmpty
+  ) {
+    showModal.value = true
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ImportExisting',
+}
+</script>

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/Item/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    data-element-type="reusable"
+    :data-item-bundle="bundle"
+    :data-library-item-uuid="uuid"
+    :data-label="label"
+    :class="backgroundClass"
+  >
+    <div class="bk bk-library-list-item-header">
+      <div class="bk-blokkli-item-label">
+        <div class="bk-blokkli-item-label-icon">
+          <ItemIcon :bundle="bundle" />
+        </div>
+        <span>{{ label }}</span>
+      </div>
+    </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 { getDefaultDefinition } from '#blokkli/definitions'
+import type { FieldListItem } from '#blokkli/types'
+import { ItemIcon, ScaleToFit } from '#blokkli/components'
+import {
+  INJECT_FIELD_LIST_BLOCKS,
+  INJECT_FIELD_LIST_TYPE,
+  INJECT_IS_EDITING,
+  INJECT_IS_IN_REUSABLE,
+  INJECT_PROVIDER_BLOCKS,
+} from '#blokkli/helpers/symbols'
+
+const componentProps = defineProps<{
+  uuid: string
+  label?: string
+  bundle: string
+  item: FieldListItem
+}>()
+
+const definition = computed(() => getDefaultDefinition(componentProps.bundle))
+
+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(() => [])
+const fieldListType = computed(() => 'default')
+
+provide(INJECT_IS_IN_REUSABLE, true)
+provide(INJECT_IS_EDITING, false)
+provide(INJECT_FIELD_LIST_BLOCKS, blocks)
+provide(INJECT_PROVIDER_BLOCKS, blocks)
+provide(INJECT_FIELD_LIST_TYPE, fieldListType)
+</script>