@blokkli/editor 1.0.0

package/dist/runtime/adapter/index.d.ts

@@ -0,0 +1,352 @@
+import type { ComputedRef } from 'vue';
+import type { CommentItem, ConversionItem, MappedState, ImportItem, LibraryItem, BlockBundleDefinition, EntityTranslation, SearchContentItem, AddClipboardItemEvent, AddNewBlockEvent, AddReusableItemEvent, ImportFromExistingEvent, MakeReusableEvent, MoveMultipleBlocksEvent, MoveBlockEvent, UpdateBlockOptionEvent, AddContentSearchItemEvent, TransformPlugin, EditBlockEvent, PasteExistingBlocksEvent, UpdateFieldValueEvent, AssistantResult, DraggableHostData, DetachReusableBlockEvent, FieldConfig, EditableFieldConfig, DraggableMediaLibraryItem, DroppableFieldConfig } from './../types.js';
+import type getVideoId from 'get-video-id';
+import type { GetMediaLibraryFunction } from './../components/Edit/Features/MediaLibrary/types.js';
+export type { GetMediaLibraryFunction };
+export interface MutationResponseLike<T> {
+    success: boolean;
+    state: T;
+    errors?: string[];
+}
+type AdapterApplyTransformPlugin = {
+    pluginId: string;
+    uuids: string[];
+};
+export type UpdateEntityFieldValueEvent = {
+    fieldName: string;
+    fieldValue: string;
+};
+export type AdapterFragmentsAddBlock = {
+    name: string;
+    host: DraggableHostData;
+    preceedingUuid?: string;
+};
+export type MediaLibraryAddBlockEvent = {
+    host: DraggableHostData;
+    preceedingUuid?: string;
+    item: DraggableMediaLibraryItem;
+};
+export type MediaLibraryReplaceMediaEvent = {
+    /**
+     * The UUID of the block on which the media was dropped.
+     */
+    host: DraggableHostData;
+    /**
+     * The ID of the media that was dropped.
+     */
+    mediaId: string;
+};
+type AdapterAssistantAddBlockFromResult = {
+    result: AssistantResult;
+    host: DraggableHostData;
+    preceedingUuid?: string;
+};
+type AdapterAssistantGetResultsCreate = {
+    type: 'create';
+    prompt: string;
+};
+type AdapterAssistantGetResultsEdit = {
+    type: 'edit';
+    /**
+     * The text that should be edited.
+     */
+    text: string;
+    prompt: string;
+};
+type AdapterAssistantGetResults = AdapterAssistantGetResultsCreate | AdapterAssistantGetResultsEdit;
+type AdapterBuildEditableFrameUrl = {
+    fieldName: string;
+    uuid?: string;
+};
+type AdapterFormFrameBuilderResult = {
+    url: string;
+};
+type AdapterFormFrameBuilderBlockAdd = {
+    id: 'block:add';
+    data: AddNewBlockEvent;
+};
+type AdapterFormFrameBuilderBlockTranslate = {
+    id: 'block:translate';
+    data: EditBlockEvent;
+    langcode: string;
+};
+type AdapterFormFrameBuilderBlockEdit = {
+    id: 'block:edit';
+    data: EditBlockEvent;
+};
+type AdapterFormFrameBuilderEntityEdit = {
+    id: 'entity:edit';
+};
+type AdapterFormFrameBuilderEntityTranslate = {
+    id: 'entity:translate';
+    translation: EntityTranslation;
+};
+type AdapterFormFrameBuilderBatchTranslate = {
+    id: 'batchTranslate';
+};
+export type AdapterFormFrameBuilder = AdapterFormFrameBuilderBlockAdd | AdapterFormFrameBuilderBlockEdit | AdapterFormFrameBuilderBlockTranslate | AdapterFormFrameBuilderEntityEdit | AdapterFormFrameBuilderEntityTranslate | AdapterFormFrameBuilderBatchTranslate;
+export interface AdapterContext {
+    entityType: string;
+    entityUuid: string;
+    entityBundle: string;
+    language: string;
+}
+export type ClipboardMapBundleEventPlaintext = {
+    type: 'plaintext';
+    text: string;
+};
+export type ClipboardMapBundleEventImage = {
+    type: 'image';
+    fileType: string;
+    fileSize: number;
+};
+export type ClipboardMapBundleEventFile = {
+    type: 'file';
+    fileType: string;
+    fileSize: number;
+};
+export type ClipboardMapBundleEventVideo = {
+    type: 'video';
+    videoService: ReturnType<typeof getVideoId>['service'];
+    videoId: string;
+};
+export type ClipboardMapBundleEvent = ClipboardMapBundleEventVideo | ClipboardMapBundleEventImage | ClipboardMapBundleEventFile | ClipboardMapBundleEventPlaintext;
+export type BlokkliAdapterGetLibraryItemsData = {
+    bundles: string[];
+    page: number;
+    text: string;
+};
+export type BlokkliAdapterGetLibraryItemsResult = {
+    items: LibraryItem[];
+    total: number;
+    perPage: number;
+};
+export interface BlokkliAdapter<T> {
+    /**
+     * Load the state for the given langcode.
+     */
+    loadState(langcode?: string | undefined | null): Promise<T | undefined>;
+    mapState(state: T): MappedState;
+    /**
+     * Get disabled features at runtime.
+     *
+     * For example, the "Translation" feature can be disabled if the current
+     * entity does not support translations.
+     *
+     * For features that are always disabled, use the `alterFeatures` option of
+     * the module to remove them entirely.
+     */
+    getDisabledFeatures?: () => Promise<string[]>;
+    /**
+     * Return a list of all types.
+     */
+    getAllBundles(): Promise<BlockBundleDefinition[]>;
+    /**
+     * Get the field configurations.
+     */
+    getFieldConfig(): Promise<FieldConfig[]>;
+    /**
+     * Get the editable field configurations.
+     */
+    getEditableFieldConfig?: () => Promise<EditableFieldConfig[]>;
+    /**
+     * Get the droppable field configurations.
+     */
+    getDroppableFieldConfig?: () => Promise<DroppableFieldConfig[]>;
+    /**
+     * Get all possible conversions.
+     */
+    getConversions?: () => Promise<ConversionItem[]>;
+    /**
+     * Convert multiple items.
+     */
+    convertBlocks?: (uuids: string[], targetBundle: string) => Promise<MutationResponseLike<T>>;
+    /**
+     * Get all possible transform plugins.
+     */
+    getTransformPlugins?: () => Promise<TransformPlugin[]>;
+    /**
+     * Apply a transform plugin.
+     */
+    applyTransformPlugin?: (e: AdapterApplyTransformPlugin) => Promise<MutationResponseLike<T>>;
+    /**
+     * Add a new block.
+     */
+    addNewBlock(e: AddNewBlockEvent): Promise<MutationResponseLike<T>>;
+    /**
+     * Update multiple options.
+     */
+    updateOptions?: (options: UpdateBlockOptionEvent[]) => Promise<MutationResponseLike<T>>;
+    /**
+     * Determine the block bundle for the given clipboard item.
+     */
+    clipboardMapBundle?: (e: ClipboardMapBundleEvent) => string | undefined;
+    /**
+     * Add a clipboard item.
+     */
+    addBlockFromClipboardItem?: (e: AddClipboardItemEvent) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Move an item.
+     */
+    moveBlock(e: MoveBlockEvent): Promise<MutationResponseLike<T>>;
+    /**
+     * Move multiple items.
+     */
+    moveMultipleBlocks(e: MoveMultipleBlocksEvent): Promise<MutationResponseLike<T>>;
+    /**
+     * Add a reusable item.
+     */
+    addLibraryItem?: (e: AddReusableItemEvent) => Promise<MutationResponseLike<T>>;
+    /**
+     * Delete multiple items.
+     */
+    deleteBlocks?: (uuids: string[]) => Promise<MutationResponseLike<T>>;
+    /**
+     * Duplicate blocks.
+     */
+    duplicateBlocks?: (uuids: string[]) => Promise<MutationResponseLike<T>>;
+    /**
+     * Paste existing blocks.
+     */
+    pasteExistingBlocks?: (e: PasteExistingBlocksEvent) => Promise<MutationResponseLike<T>>;
+    /**
+     * Get all existing entities for importing.
+     */
+    getImportItems?: (searchText?: string) => Promise<{
+        items: ImportItem[];
+        total: number;
+    }>;
+    /**
+     * Import items from an existing entity.
+     */
+    importFromExisting?: (e: ImportFromExistingEvent) => Promise<MutationResponseLike<T>>;
+    /**
+     * Revert all changes to the last published state.
+     */
+    revertAllChanges?: () => Promise<MutationResponseLike<T>>;
+    /**
+     * Publish all changes.
+     */
+    publish?: () => Promise<MutationResponseLike<T>>;
+    /**
+     * Set a specific history index.
+     */
+    setHistoryIndex?: (index: number) => Promise<MutationResponseLike<T>>;
+    /**
+     * Set the status of a mutation item.
+     */
+    setMutationItemStatus?: (index: number, status: boolean) => Promise<MutationResponseLike<T>>;
+    /**
+     * Take ownership of the edit state.
+     */
+    takeOwnership?: () => Promise<MutationResponseLike<T>>;
+    /**
+     * Load all comments.
+     */
+    loadComments?: () => Promise<CommentItem[]>;
+    /**
+     * Add a comment to one or more items.
+     */
+    addComment?: (blockUuids: string[], body: string) => Promise<CommentItem[]>;
+    /**
+     * Resolve a comment.
+     */
+    resolveComment?: (uuid: string) => Promise<CommentItem[]>;
+    /**
+     * Make an item reusable.
+     */
+    makeBlockReusable?: (e: MakeReusableEvent) => Promise<MutationResponseLike<T>>;
+    /**
+     * Detach a reusable block and add a copy of it in place.
+     */
+    detachReusableBlock?: (e: DetachReusableBlockEvent) => Promise<MutationResponseLike<T>>;
+    /**
+     * Get all library items.
+     */
+    getLibraryItems?: (data: BlokkliAdapterGetLibraryItemsData) => Promise<BlokkliAdapterGetLibraryItemsResult>;
+    /**
+     * Get the last changed timestamp for the edit state.
+     */
+    getLastChanged?: () => Promise<number>;
+    /**
+     * Get the shareable preview URL.
+     *
+     * This should return a URL that can be used to bypass logins, using a token or similar, that can be shared with non-editing people.
+     */
+    getPreviewGrantUrl?: () => Promise<string | undefined | null> | string | undefined | null;
+    /**
+     * Return the possible content search tabs.
+     */
+    getContentSearchTabs?: () => Record<string, string> | Promise<Record<string, string>>;
+    /**
+     * Return items for the "content" search.
+     *
+     * Should only return a limited amount of results, sorted by relevance.
+     */
+    getContentSearchResults?: (tab: string, text: string) => Promise<SearchContentItem[]>;
+    /**
+     * Add the dropped item from a search content item.
+     */
+    addContentSearchItem?: (e: AddContentSearchItemEvent) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Change the language.
+     */
+    changeLanguage?: (translation: EntityTranslation) => Promise<any>;
+    /**
+     * Build the URL for forms.
+     */
+    formFrameBuilder?: (e: AdapterFormFrameBuilder) => AdapterFormFrameBuilderResult | undefined;
+    /**
+     * Update the value of a single block field.
+     */
+    updateFieldValue?: (e: UpdateFieldValueEvent) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Update the value of a single entity field.
+     */
+    updateEntityFieldValue?: (e: UpdateEntityFieldValueEvent) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Build the iframe URL for an editable of type "frame".
+     */
+    buildEditableFrameUrl?: (e: AdapterBuildEditableFrameUrl) => string | undefined;
+    /**
+     * Get the result for an assistant query.
+     */
+    assistantGetResults?: (e: AdapterAssistantGetResults) => Promise<AssistantResult | undefined>;
+    /**
+     * Add one or more blocks from the given assistant result.
+     */
+    assistantAddBlockFromResult?: (e: AdapterAssistantAddBlockFromResult) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Return the HTML markup for displaying the grid.
+     */
+    getGridMarkup?: () => Promise<string> | string;
+    /**
+     * Return the media library results and filters using the given selected filter.
+     */
+    mediaLibraryGetResults?: GetMediaLibraryFunction<any>;
+    /**
+     * Create a new block from the given media library item.
+     */
+    mediaLibraryAddBlock?: (e: MediaLibraryAddBlockEvent) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Replace an existing media from a block with a new one.
+     *
+     * This method is called when the user drag and drops an item from the media
+     * library onto an v-blokkli-droppable element.
+     */
+    mediaLibraryReplaceMedia?: (e: MediaLibraryReplaceMediaEvent) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Replace an existing media on a field of the page entity.
+     *
+     * This method is called when the user drag and drops an item from the media
+     * library onto an v-blokkli-droppable element where the host is the page entity..
+     */
+    mediaLibraryReplaceEntityMedia?: (e: MediaLibraryReplaceMediaEvent) => Promise<MutationResponseLike<T>> | undefined;
+    /**
+     * Add a fragment block.
+     */
+    fragmentsAddBlock?: (e: AdapterFragmentsAddBlock) => Promise<MutationResponseLike<T>> | undefined;
+}
+export type BlokkliAdapterFactory<T> = (ctx: ComputedRef<AdapterContext>) => Promise<BlokkliAdapter<T>> | BlokkliAdapter<T>;
+export type AdapterMethods = keyof BlokkliAdapter<any>;
+export declare function defineBlokkliEditAdapter<T>(cb: BlokkliAdapterFactory<T>): BlokkliAdapterFactory<T>;

package/dist/runtime/adapter/index.js

@@ -0,0 +1,3 @@
+export function defineBlokkliEditAdapter(cb) {
+  return cb;
+}

package/dist/runtime/blokkliPlugins/AddAction/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <Teleport v-if="shouldRender" :key="renderKey" to="#blokkli-add-list-actions">
+    <AddListItem
+      :id="type"
+      ref="item"
+      :label="title"
+      :icon="icon"
+      :orientation="ui.addListOrientation.value"
+      :color="color"
+      :disabled="disabled"
+      data-element-type="action"
+      :data-action-type="type"
+      :data-item-bundle="itemBundle"
+      no-context-menu
+    />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli, nextTick, ref } from '#imports'
+import type { BlokkliIcon } from '#blokkli/icons'
+import type { ActionPlacedEvent } from '#blokkli/types'
+import { AddListItem } from '#blokkli/components'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
+
+const props = defineProps<{
+  type: string
+  title: string
+  icon: BlokkliIcon
+  itemBundle?: string
+  color: 'rose' | 'lime' | 'accent'
+  description?: string
+  disabled?: boolean
+  weight?: number
+}>()
+
+const item = ref<InstanceType<typeof AddListItem> | null>(null)
+
+const emit = defineEmits<{
+  (e: 'placed', data: ActionPlacedEvent): void
+}>()
+
+const { ui, state, features } = useBlokkli()
+
+const addListAvailable = computed(
+  () => !!features.features.value.find((v) => v.id === 'add-list'),
+)
+
+const shouldRender = computed(
+  () => addListAvailable.value && state.editMode.value === 'editing',
+)
+
+const renderKey = ref('')
+
+onBlokkliEvent('add-list:change', () => {
+  nextTick(() => {
+    renderKey.value = Math.round(Math.random() * 1000000000).toString()
+  })
+})
+
+onBlokkliEvent('action:placed', (e) => {
+  if (e.action.actionType !== props.type) {
+    return
+  }
+
+  emit('placed', e)
+})
+
+defineTourItem(() => {
+  if (!props.description) {
+    return
+  }
+  return {
+    id: 'plugin:add_action:' + props.type,
+    title: props.title,
+    text: props.description,
+    element: () => item.value?.getElement(),
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'PluginAddAction',
+}
+</script>

package/dist/runtime/blokkliPlugins/ContextMenu/Menu/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="bk bk-context-menu" :style="{ left: x + 'px', top: y + 'px' }">
+    <div ref="rootEl" class="bk-context-menu-inner" :style="innerStyle">
+      <div v-for="(item, i) in menu" :key="i">
+        <hr v-if="item.type === 'rule'" />
+        <button v-else-if="item.type === 'button'" @click="onClick(i)">
+          <Icon :name="item.icon" />
+          <span>{{ item.label }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ContextMenu } from '#blokkli/types'
+import { Icon } from '#blokkli/components'
+import {
+  watch,
+  ref,
+  computed,
+  onMounted,
+  useBlokkli,
+  onBeforeUnmount,
+} from '#imports'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+const props = defineProps<{
+  menu: ContextMenu[]
+  x: number
+  y: number
+}>()
+
+const emit = defineEmits(['close'])
+
+const { ui, selection } = useBlokkli()
+
+const rootEl = ref<HTMLDivElement | null>(null)
+
+const innerStyle = computed(() => {
+  const horizontal =
+    props.x - 300 >
+    ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width
+      ? { right: 0 }
+      : { left: 0 }
+
+  const vertical =
+    props.y + 300 >
+    ui.visibleViewportPadded.value.y + ui.visibleViewportPadded.value.height
+      ? { bottom: 0 }
+      : { top: 0 }
+
+  return {
+    ...horizontal,
+    ...vertical,
+  }
+})
+
+onBlokkliEvent('keyPressed', (e) => {
+  if (e.code === 'Escape') {
+    emit('close')
+  }
+})
+
+watch(selection.uuids, () => emit('close'))
+
+const onClick = (index: number) => {
+  const item = props.menu[index]
+  if (item && item.type === 'button') {
+    item.callback()
+  }
+  emit('close')
+}
+
+const onMouseDown = (e: MouseEvent) => {
+  if (!rootEl.value) {
+    return
+  }
+
+  if (
+    (e.target instanceof HTMLElement || e.target instanceof SVGElement) &&
+    !e.target.contains(rootEl.value)
+  ) {
+    emit('close')
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', onMouseDown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', onMouseDown)
+})
+</script>

package/dist/runtime/blokkliPlugins/ContextMenu/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <Component :is="tag" @contextmenu.stop.prevent="onContextMenu">
+    <slot />
+    <Teleport to="body">
+      <Transition name="bk-context-menu">
+        <ContextMenuMenu
+          v-if="isVisible"
+          :menu="menu"
+          :x="x"
+          :y="y"
+          @close="ui.openContextMenu.value = ''"
+        />
+      </Transition>
+    </Teleport>
+  </Component>
+</template>
+
+<script lang="ts" setup>
+import type { ContextMenu } from '#blokkli/types'
+import { ref, computed, useBlokkli } from '#imports'
+import ContextMenuMenu from './Menu/index.vue'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    menu: ContextMenu[]
+    tag?: string
+  }>(),
+  {
+    tag: 'div',
+  },
+)
+
+const { ui } = useBlokkli()
+
+const isVisible = computed(() => ui.openContextMenu.value === props.id)
+
+const x = ref(0)
+const y = ref(0)
+
+const onContextMenu = (e: MouseEvent) => {
+  if (!props.id || typeof props.id !== 'string' || !props.menu.length) {
+    return
+  }
+  x.value = e.clientX
+  y.value = e.clientY
+  ui.openContextMenu.value = props.id
+}
+</script>

package/dist/runtime/blokkliPlugins/DebugOverlay/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <Teleport v-if="isVisible" to="body">
+    <slot />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, useBlokkli } from '#imports'
+
+const props = defineProps<{
+  id: string
+  title: string
+}>()
+
+const { debug } = useBlokkli()
+
+const isVisible = computed(
+  () =>
+    debug.isEnabled.value &&
+    debug.overlays.value.find((v) => v.id === props.id)?.active,
+)
+
+onMounted(() => {
+  debug.registerOverlay(props.id, props.title)
+})
+
+onBeforeUnmount(() => {
+  debug.unregisterOverlay(props.id)
+})
+
+defineOptions({
+  name: 'DebugOverlay',
+})
+</script>

package/dist/runtime/blokkliPlugins/DroppableEdit/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <Teleport to="body">
+    <transition name="bk-slide-in" :duration="200">
+      <FormOverlay
+        v-if="isVisible"
+        :id="id"
+        :title="title"
+        :icon="icon"
+        @close="onClose"
+      >
+        <slot />
+        <template #footer>
+          <button class="bk-button bk-is-primary" @click="onSubmit">
+            {{ $t('droppableEditFormSave', 'Save') }}
+          </button>
+        </template>
+      </FormOverlay>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { FormOverlay } from '#blokkli/components'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import type { BlokkliIcon } from '#blokkli/icons'
+import type { DroppableEntityField, DroppableFieldConfig } from '#blokkli/types'
+import { ref, useBlokkli } from '#imports'
+
+const props = defineProps<{
+  id: string
+  title: string
+  icon: BlokkliIcon
+  entityType: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'save', data: DroppableEntityField): void
+}>()
+
+const { $t, types, state } = useBlokkli()
+
+type DroppableField = {
+  field: DroppableEntityField
+  config: DroppableFieldConfig
+}
+
+const droppable = ref<DroppableField | null>(null)
+
+const isVisible = ref(false)
+
+const onClose = () => {
+  isVisible.value = false
+}
+
+const onSubmit = () => {
+  if (droppable.value) {
+    emit('save', droppable.value.field)
+  }
+  isVisible.value = false
+  droppable.value = null
+}
+
+onBlokkliEvent('droppable:focus', (field) => {
+  if (state.editMode.value !== 'editing') {
+    return
+  }
+  const config = types.getDroppableFieldConfig(field.fieldName, field.host)
+  if (config.allowedEntityType === props.entityType) {
+    isVisible.value = true
+    droppable.value = { field, config }
+  }
+})
+</script>