@blokkli/editor 1.0.0

package/dist/runtime/components/BlokkliEditable.vue

@@ -0,0 +1,73 @@
+<template>
+  <component :is="tag" v-bind="attrs">
+    <slot :value="renderedValue" />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject, onMounted, onBeforeUnmount } from '#imports'
+import type {
+  ItemEditContext,
+  EditableFieldUpdateEvent,
+  EntityContext,
+} from '#blokkli/types'
+import {
+  INJECT_EDIT_CONTEXT,
+  INJECT_ENTITY_CONTEXT,
+  INJECT_IS_EDITING,
+} from '#blokkli/helpers/symbols'
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    value: string
+    tag?: string
+  }>(),
+  {
+    tag: 'div',
+  },
+)
+
+const valueOverride = ref('')
+const isEditing = inject<boolean>(INJECT_IS_EDITING, false)
+const entity = inject<EntityContext>(INJECT_ENTITY_CONTEXT)
+const editContext = inject<ItemEditContext | null>(INJECT_EDIT_CONTEXT, null)
+
+if (!entity) {
+  throw new Error('Missing entity context.')
+}
+
+const renderedValue = computed(() => valueOverride.value || props.value)
+
+const attrs = computed(() => {
+  if (isEditing && props.name) {
+    return {
+      'data-blokkli-editable-field': props.name,
+      'data-blokkli-editable-component': 'true',
+      'data-blokkli-editable-value': props.value,
+    }
+  }
+
+  return undefined
+})
+
+const onEditableUpdateValue = (e: EditableFieldUpdateEvent) => {
+  if (e.name === props.name && e.entityUuid === entity.uuid) {
+    valueOverride.value = e.value
+  }
+}
+
+onMounted(() => {
+  if (!isEditing || !editContext) {
+    return
+  }
+
+  editContext.eventBus.on('editable:update', onEditableUpdateValue)
+})
+
+onBeforeUnmount(() => {
+  if (editContext) {
+    editContext.eventBus.off('editable:update', onEditableUpdateValue)
+  }
+})
+</script>

package/dist/runtime/components/BlokkliField.vue

@@ -0,0 +1,157 @@
+<template>
+  <slot :items="filteredList" />
+  <Component
+    :is="DraggableList"
+    v-if="DraggableList && isEditing && canEdit && !isInReusable && entity"
+    :list="filteredList"
+    :name="name"
+    :entity="entity"
+    :field-key="fieldKey!"
+    :allowed-fragments="allowedFragments"
+    :drop-alignment="dropAlignment"
+    :field-list-type="fieldListType"
+    :class="[attrs.class, listClass, { [nonEmptyClass]: filteredList.length }]"
+    :is-nested="isNested"
+    class="bk-field-list"
+    :tag="tag"
+  />
+  <component
+    :is="tag"
+    v-else-if="!editOnly && (filteredList.length || isEditing || isPreview)"
+    :class="[
+      attrs.class,
+      {
+        'bk-field-list': canEdit && !isNested && !isPreview,
+        [nonEmptyClass]: filteredList.length,
+      },
+      listClass,
+    ]"
+  >
+    <BlokkliItem
+      v-for="(item, i) in filteredList"
+      :key="item.uuid"
+      v-bind="item"
+      :parent-type="isNested ? entity?.bundle : ''"
+      :data-uuid="isPreview ? item.uuid : undefined"
+      :index="i"
+    />
+  </component>
+  <slot name="after" :items="filteredList" />
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs, inject, provide, ref } from '#imports'
+import type { BlokkliFragmentName } from '#blokkli/definitions'
+import BlokkliItem from './BlokkliItem.vue'
+
+import type {
+  FieldListItem,
+  MutatedField,
+  EntityContext,
+  ItemEditContext,
+} from '#blokkli/types'
+import type {
+  ValidFieldListTypes,
+  FieldListItemTyped,
+} from '#blokkli/generated-types'
+import {
+  INJECT_ENTITY_CONTEXT,
+  INJECT_FIELD_LIST_TYPE,
+  INJECT_IS_EDITING,
+  INJECT_IS_IN_REUSABLE,
+  INJECT_IS_NESTED,
+  INJECT_IS_PREVIEW,
+  INJECT_FIELD_LIST_BLOCKS,
+  INJECT_PROVIDER_BLOCKS,
+  INJECT_EDIT_CONTEXT,
+  INJECT_MUTATED_FIELDS_MAP,
+  INJECT_EDIT_FIELD_LIST_COMPONENT,
+} from '../helpers/symbols'
+import type DraggableListComponent from './Edit/DraggableList.vue'
+
+const DraggableList = inject<typeof DraggableListComponent | null>(
+  INJECT_EDIT_FIELD_LIST_COMPONENT,
+  null,
+)
+
+const attrs = useAttrs()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const isEditing = inject(INJECT_IS_EDITING, false)
+const isInReusable = inject(INJECT_IS_IN_REUSABLE, false)
+const isPreview = inject<boolean>(INJECT_IS_PREVIEW, false)
+const isNested = inject(INJECT_IS_NESTED, false)
+const mutatedFields = inject<Record<string, MutatedField> | null>(
+  INJECT_MUTATED_FIELDS_MAP,
+  null,
+)
+const editContext = inject<ItemEditContext | null>(INJECT_EDIT_CONTEXT, null)
+const entity = inject<EntityContext>(INJECT_ENTITY_CONTEXT)
+
+if (!entity) {
+  throw new Error('Missing entity context.')
+}
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    list?: FieldListItem[] | FieldListItem
+    tag?: string
+    fieldListType?: ValidFieldListTypes
+    editOnly?: boolean
+    listClass?: string
+    nonEmptyClass?: string
+    allowedFragments?: BlokkliFragmentName[]
+    dropAlignment?: 'vertical' | 'horizontal'
+  }>(),
+  {
+    list: () => [],
+    tag: 'div',
+    fieldListType: 'default',
+    listClass: '',
+    nonEmptyClass: '',
+    allowedFragments: () => [],
+    dropAlignment: undefined,
+  },
+)
+
+// @TODO: How to canEdit?
+const canEdit = ref(true)
+
+const fieldKey = computed<string | undefined>(() => {
+  if (canEdit.value) {
+    return entity.uuid + ':' + props.name
+  }
+  return undefined
+})
+
+const fieldListType = computed(() => props.fieldListType)
+
+const filteredList = computed<FieldListItemTyped[]>(() => {
+  if (mutatedFields && !isInReusable && editContext && fieldKey.value) {
+    return ((mutatedFields[fieldKey.value] || {}).list || []).map((v) => {
+      const mutatedOptions = editContext.mutatedOptions[v.uuid] || {}
+      return {
+        ...v,
+        options: {
+          ...v.options,
+          ...mutatedOptions,
+        },
+      } as FieldListItemTyped
+    })
+  }
+  const list = Array.isArray(props.list) ? props.list : [props.list]
+  return list.filter(Boolean) as FieldListItemTyped[]
+})
+
+provide(INJECT_IS_NESTED, true)
+provide(INJECT_FIELD_LIST_TYPE, fieldListType)
+provide(INJECT_FIELD_LIST_BLOCKS, filteredList)
+
+if (!isNested) {
+  provide(INJECT_PROVIDER_BLOCKS, filteredList)
+}
+</script>

package/dist/runtime/components/BlokkliItem.vue

@@ -0,0 +1,79 @@
+<template>
+  <component :is="component" v-if="component" v-bind="props" />
+  <div v-else-if="isEditing">Block not implemented</div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  provide,
+  useRuntimeConfig,
+  inject,
+  type ComputedRef,
+} from '#imports'
+import type { InjectedBlokkliItem } from '#blokkli/types'
+import { getBlokkliItemComponent } from '#blokkli/imports'
+import {
+  INJECT_BLOCK_ITEM,
+  INJECT_ENTITY_CONTEXT,
+  INJECT_FIELD_LIST_TYPE,
+} from '../helpers/symbols'
+import type {
+  BlockBundleWithNested,
+  ValidFieldListTypes,
+} from '#blokkli/generated-types'
+
+const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType
+
+const componentProps = withDefaults(
+  defineProps<{
+    uuid: string
+    bundle: string
+    isNew?: boolean
+    options?: any
+    props?: any
+    index?: number
+    parentType?: string
+    isEditing?: boolean
+  }>(),
+  {
+    index: 0,
+    isEditing: false,
+    parentType: '',
+    options: () => ({}),
+    props: () => ({}),
+  },
+)
+
+const fieldListType = inject<ComputedRef<ValidFieldListTypes> | undefined>(
+  INJECT_FIELD_LIST_TYPE,
+)
+
+const component = getBlokkliItemComponent(
+  componentProps.bundle,
+  fieldListType?.value || 'default',
+  componentProps.parentType,
+)
+
+const index = computed(() => componentProps.index)
+const item = computed(() => ({
+  index,
+  uuid: componentProps.uuid || '',
+  options: componentProps.options || {},
+  isEditing: componentProps.isEditing,
+  parentType: componentProps.parentType as BlockBundleWithNested,
+}))
+
+provide<InjectedBlokkliItem>(INJECT_BLOCK_ITEM, item)
+provide(INJECT_ENTITY_CONTEXT, {
+  uuid: componentProps.uuid,
+  type: itemEntityType,
+  bundle: componentProps.bundle,
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'BlokkliItem',
+}
+</script>

package/dist/runtime/components/BlokkliProvider.vue

@@ -0,0 +1,160 @@
+<template>
+  <div
+    :data-provider-uuid="entityUuid"
+    :data-provider-entity-type="entityType"
+    :data-provider-entity-bundle="entityBundle"
+    :data-blokkli-provider-active="isInEditor || undefined"
+  >
+    <BlokkliErrorBoundary v-if="isInEditor">
+      <PreviewProvider
+        v-if="isPreviewing"
+        v-slot="{ mutatedEntity }"
+        :entity="entity"
+        :entity-type="entityType"
+        :entity-uuid="entityUuid"
+        :entity-bundle="entityBundle"
+        :language="language"
+      >
+        <slot
+          :entity="mutatedEntity"
+          :is-editing="isEditing"
+          :can-edit="canEdit"
+          :is-preview="isPreviewing"
+        />
+      </PreviewProvider>
+      <EditProvider
+        v-else-if="isEditing && shouldRender"
+        v-slot="{ mutatedEntity }"
+        :entity="entity"
+        :entity-type="entityType"
+        :entity-uuid="entityUuid"
+        :entity-bundle="entityBundle"
+        :language="language"
+        :isolate="isolate"
+      >
+        <slot
+          :is-editing="isEditing"
+          :can-edit="canEdit"
+          :is-preview="isPreviewing"
+          :entity="mutatedEntity"
+        />
+      </EditProvider>
+    </BlokkliErrorBoundary>
+
+    <slot
+      v-else
+      :is-editing="isEditing"
+      :can-edit="canEdit"
+      :is-preview="isPreviewing"
+      :entity="entity"
+    />
+
+    <EditIndicator
+      v-if="showIndicator"
+      :uuid="entityUuid"
+      :edit-label="editLabel"
+      @edit="edit"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup generic="T">
+import {
+  computed,
+  defineAsyncComponent,
+  useRoute,
+  useRouter,
+  provide,
+  ref,
+  onMounted,
+} from '#imports'
+import { INJECT_ENTITY_CONTEXT } from '../helpers/symbols'
+
+const PreviewProvider = defineAsyncComponent(
+  () => import('./Edit/PreviewProvider.vue'),
+)
+
+const EditProvider = defineAsyncComponent(
+  () => import('./Edit/EditProvider.vue'),
+)
+
+const BlokkliErrorBoundary = defineAsyncComponent(
+  () => import('./Edit/BlokkliErrorBoundary.vue'),
+)
+
+const EditIndicator = defineAsyncComponent(
+  () => import('./Edit/EditIndicator.vue'),
+)
+
+const route = useRoute()
+const router = useRouter()
+
+const props = withDefaults(
+  defineProps<{
+    entity?: T
+    entityType: string
+    entityBundle: string
+    entityUuid: string
+    canEdit: boolean
+    tag?: string
+    language?: string
+    editLabel?: string
+
+    /**
+     * When set to true, during editing, everything except the provider element will be hidden.
+     */
+    isolate?: boolean
+  }>(),
+  {
+    tag: 'div',
+    language: '',
+    editLabel: '',
+    entity: undefined,
+  },
+)
+
+const shouldRender = ref(false)
+
+const isInEditor = computed(
+  () =>
+    props.entityUuid &&
+    props.entityType &&
+    props.entityBundle &&
+    (isPreviewing.value || isEditing.value),
+)
+
+const isEditing = computed(
+  () =>
+    props.canEdit &&
+    !!props.entityUuid &&
+    route.query.blokkliEditing === props.entityUuid,
+)
+
+const isPreviewing = computed(
+  () => props.entityUuid && route.query.blokkliPreview === props.entityUuid,
+)
+
+const showIndicator = computed(
+  () =>
+    props.canEdit && !route.query.blokkliEditing && !route.query.blokkliPreview,
+)
+
+function edit() {
+  router.push({
+    query: {
+      blokkliEditing: props.entityUuid,
+      language: props.language,
+    },
+  })
+}
+
+provide(INJECT_ENTITY_CONTEXT, {
+  uuid: props.entityUuid,
+  type: props.entityType,
+  bundle: props.entityBundle,
+})
+
+onMounted(() => {
+  shouldRender.value = true
+})
+</script>