@blokkli/editor 1.0.0

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

@@ -0,0 +1,357 @@
+<template>
+  <div
+    v-if="loaded"
+    ref="root"
+    :style="style"
+    class="bk-editable-field bk-control"
+  >
+    <form ref="form" class="bk-editable-field-input" @submit.prevent="close">
+      <div class="bk bk-editable-field-buttons">
+        <h3>
+          <ItemIcon :bundle="itemBundle" />
+          <span>{{ title }}</span>
+        </h3>
+        <button @click.prevent="cancel">
+          <Icon name="close" />
+          <span>{{ $t('cancel', 'Cancel') }}</span>
+        </button>
+        <button :disabled="!hasChanged" type="submit" @click.prevent="save">
+          <Icon name="save" />
+          <span>{{ $t('save', 'Save') }}</span>
+        </button>
+      </div>
+
+      <div ref="input">
+        <InputContenteditable
+          v-if="config.type === 'markup'"
+          v-model="modelValue"
+          :type="config.type"
+          @close="save"
+        />
+
+        <InputFrame
+          v-else-if="config.type === 'frame'"
+          v-model="modelValue"
+          :type="config.type"
+          :field-name="fieldName"
+          :host="host"
+          :initial-height="scrollHeight"
+          @close="save"
+        />
+
+        <InputPlaintext
+          v-else
+          v-model="modelValue"
+          :element="element"
+          :required="required"
+          :maxlength="maxlength"
+          @close="cancel"
+          @save="save"
+        />
+      </div>
+
+      <div v-if="!isMarkup" class="bk bk-editable-field-info">
+        <div v-if="errorText" class="bk-editable-field-info-error">
+          {{ errorText }}
+        </div>
+        <div class="bk-editable-field-info-count">
+          <span>{{ count }}</span>
+          <span v-if="maxlength >= 1">&nbsp;/&nbsp;{{ maxlength }}</span>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  DraggableExistingBlock,
+  EntityContext,
+  EditableFieldConfig,
+} from '#blokkli/types'
+import { Icon, ItemIcon } from '#blokkli/components'
+import {
+  computed,
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  useBlokkli,
+  nextTick,
+} from '#imports'
+import { falsy, findIdealRectPosition } from '#blokkli/helpers'
+import InputPlaintext from './Plaintext/index.vue'
+import InputContenteditable from './Contenteditable/index.vue'
+import InputFrame from './Frame/index.vue'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+const { eventBus, ui, selection, state, adapter, $t, types } = useBlokkli()
+
+const props = defineProps<{
+  fieldName: string
+  host: DraggableExistingBlock | EntityContext
+  element: HTMLElement
+  config: EditableFieldConfig
+  isComponent?: boolean
+  value?: string
+}>()
+
+const emit = defineEmits(['close'])
+
+const shouldSave = ref(true)
+
+const cancel = () => {
+  shouldSave.value = false
+  close()
+  emit('close')
+}
+
+const save = () => {
+  shouldSave.value = true
+  close()
+  emit('close')
+}
+
+// Save the editable when clicking away from the text area.
+onBlokkliEvent('window:clickAway', save)
+
+const getElement = (): HTMLElement => props.element
+
+type Alignment = 'left' | 'center' | 'right'
+
+const alignment = computed<Alignment>(() => {
+  if (props.element) {
+    const style = window.getComputedStyle(props.element)
+    if (
+      style.textAlign === 'left' ||
+      style.textAlign === 'center' ||
+      style.textAlign === 'right'
+    ) {
+      return style.textAlign
+    } else if (style.textAlign === 'start') {
+      return 'left'
+    } else if (style.textAlign === 'end') {
+      return 'right'
+    }
+  }
+  return 'center'
+})
+
+const scrollHeight = ref(0)
+const loaded = ref(false)
+const originalText = ref(props.value || '')
+const modelValue = ref('')
+const width = ref(320)
+const inputStyle = ref<Record<string, any>>({})
+const form = ref<HTMLFormElement | null>(null)
+const root = ref<HTMLDivElement | null>(null)
+const input = ref<HTMLDivElement | null>(null)
+
+const x = ref(0)
+const y = ref(0)
+
+const style = computed(() => {
+  if (ui.isMobile.value) {
+    return {}
+  } else {
+    return {
+      width: width.value + 'px',
+      top: y.value + 'px',
+      left: x.value + 'px',
+    }
+  }
+})
+
+const hasChanged = computed(() => modelValue.value !== originalText.value)
+const itemBundle = computed(() => {
+  if ('itemBundle' in props.host) {
+    return props.host.itemBundle
+  }
+  return undefined
+})
+const maxlength = computed(() => props.config.maxLength)
+const required = computed(() => !!props.config.required)
+const title = computed(() => {
+  if (itemBundle.value) {
+    return [
+      types.getBlockBundleDefinition(itemBundle.value)?.label,
+      props.config.label,
+    ]
+      .filter(falsy)
+      .join(' » ')
+  }
+
+  return props.config.label
+})
+const isMarkup = computed(
+  () =>
+    props.config.type === 'table' ||
+    props.config.type === 'markup' ||
+    props.config.type === 'frame',
+)
+
+const count = computed(() => modelValue.value.length)
+
+const errorText = computed(() => {
+  if (required.value && !modelValue.value) {
+    return $t('fieldIsRequired', 'This field is required')
+  }
+
+  return undefined
+})
+
+const close = async () => {
+  // Weird iOS bug: Close method is called twice, so we have to check if we
+  // are actually still editing.
+  if (!selection.editableActive.value) {
+    return
+  }
+  if (shouldSave.value && errorText.value) {
+    return
+  }
+
+  const el = getElement()
+
+  if (shouldSave.value && modelValue.value !== originalText.value) {
+    if ('itemBundle' in props.host) {
+      await state.mutateWithLoadingState(() =>
+        adapter.updateFieldValue!({
+          uuid: props.host.uuid,
+          fieldName: props.fieldName,
+          fieldValue: modelValue.value,
+        }),
+      )
+    } else if (adapter.updateEntityFieldValue) {
+      await state.mutateWithLoadingState(() =>
+        adapter.updateEntityFieldValue!({
+          fieldName: props.fieldName,
+          fieldValue: modelValue.value,
+        }),
+      )
+    }
+  }
+  if (!shouldSave.value && el && !props.isComponent) {
+    if (isMarkup.value) {
+      el.innerHTML = originalText.value
+    } else {
+      el.textContent = originalText.value
+    }
+  }
+  if (el) {
+    el.dataset.blokkliEditableActive = undefined
+  }
+}
+
+watch(modelValue, (newText) => {
+  if (props.element && selection.editableActive.value && !props.isComponent) {
+    const el = getElement()
+    if (props.config.type === 'plain') {
+      el.textContent = newText
+    } else {
+      el.innerHTML = newText
+    }
+  }
+
+  if (props.isComponent) {
+    eventBus.emit('editable:update', {
+      name: props.fieldName,
+      entityUuid: props.host.uuid,
+      value: newText,
+    })
+  }
+})
+
+const focusInput = (el?: HTMLElement | Document | null) => {
+  if (!el) {
+    return
+  }
+
+  const textarea = el.querySelector('textarea')
+  if (textarea) {
+    textarea.focus()
+    return
+  }
+
+  const editable = el.querySelector('[contenteditable]')
+  if (editable instanceof HTMLElement) {
+    editable.focus()
+    return
+  }
+
+  const iframe = el.querySelector('iframe')
+
+  if (iframe?.contentDocument) {
+    focusInput(iframe.contentDocument)
+  }
+}
+
+const onAnimationFrame = () => {
+  if (ui.isMobile.value) {
+    return
+  }
+  const elementRect = props.element.getBoundingClientRect()
+
+  const height = form.value?.scrollHeight || 100
+  const newWidth = Math.min(Math.max(elementRect.width, 360), 1000)
+
+  const ideal = findIdealRectPosition(
+    ui.viewportBlockingRects.value,
+    {
+      x:
+        alignment.value === 'left'
+          ? elementRect.x
+          : elementRect.x + (Math.max(elementRect.width, 360) - newWidth) / 2,
+      y: elementRect.y - height - 20,
+      height,
+      width: newWidth,
+    },
+    ui.visibleViewportPadded.value,
+  )
+
+  x.value = ideal.x
+  y.value = ideal.y + height
+  width.value = newWidth
+}
+
+onAnimationFrame()
+
+onBlokkliEvent('animationFrame', onAnimationFrame)
+
+onMounted(() => {
+  const el = getElement()
+
+  if (props.isComponent) {
+    modelValue.value = props.value || ''
+  } else {
+    if (isMarkup.value) {
+      modelValue.value = el.innerHTML
+    } else {
+      modelValue.value = el.textContent || ''
+    }
+  }
+
+  originalText.value = modelValue.value
+
+  selection.editableActive.value = true
+  el.dataset.blokkliEditableActive = 'true'
+
+  const computedStyle = window.getComputedStyle(el)
+  inputStyle.value = {
+    textAlign: computedStyle.textAlign,
+  }
+
+  nextTick(() => {
+    scrollHeight.value = el.scrollHeight
+    loaded.value = true
+    nextTick(() => {
+      focusInput(form.value)
+    })
+  })
+})
+
+onBeforeUnmount(async () => {
+  const el = getElement()
+  await close()
+  el.dataset.blokkliEditableActive = undefined
+})
+</script>

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

@@ -0,0 +1,192 @@
+<template>
+  <Teleport to="body">
+    <Transition :name="hasTransition ? 'bk-editable' : undefined">
+      <Overlay v-if="editable" v-bind="editable" :key="key" @close="close" />
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  ref,
+  useBlokkli,
+  watch,
+  defineBlokkliFeature,
+} from '#imports'
+import Overlay from './Overlay/index.vue'
+import type {
+  DraggableExistingBlock,
+  EditableFieldConfig,
+  EntityContext,
+} from '#blokkli/types'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+import { falsy } from '#blokkli/helpers'
+
+defineBlokkliFeature({
+  id: 'editable-field',
+  icon: 'textbox',
+  label: 'Editable Field',
+  requiredAdapterMethods: ['updateFieldValue', 'getEditableFieldConfig'],
+  description: 'Implements a form overlay to edit a single field of a block.',
+})
+
+type Editable = {
+  fieldName: string
+  host: DraggableExistingBlock | EntityContext
+  element: HTMLElement
+  config: EditableFieldConfig
+  isComponent?: boolean
+  value?: string
+}
+
+const { selection, adapter, types, $t, dom, runtimeConfig } = useBlokkli()
+const editable = ref<Editable | null>(null)
+const hasTransition = ref(false)
+
+const key = computed(() => {
+  if (!editable.value) {
+    return ''
+  }
+  return editable.value.host.uuid + editable.value.fieldName
+})
+
+const getHost = (
+  uuid?: string,
+): DraggableExistingBlock | EntityContext | undefined => {
+  if (uuid) {
+    const block = dom.findBlock(uuid)
+    if (block) {
+      return block
+    }
+  }
+
+  return dom.findClosestEntityContext(dom.getActiveProviderElement())
+}
+
+const buildEditable = (
+  fieldName: string,
+  uuid?: string,
+): Editable | undefined => {
+  const host = getHost(uuid)
+  if (!host) {
+    return
+  }
+  const hostEntityType =
+    'type' in host ? host.type : runtimeConfig.itemEntityType
+  const hostEntityBundle = 'bundle' in host ? host.bundle : host.itemBundle
+
+  const config = types.editableFieldConfig.forName(
+    hostEntityType,
+    hostEntityBundle,
+    fieldName,
+  )
+
+  if (!config) {
+    throw new Error(
+      `Failed to load editable field config for field "${fieldName}" on entity type "${hostEntityType}" of bundle "${hostEntityBundle}"`,
+    )
+  }
+
+  // Adapter doesn't support editable frames, return.
+  if (config.type === 'frame' && !adapter.buildEditableFrameUrl) {
+    return
+  }
+
+  const hostElement =
+    'itemBundle' in host ? host.element() : dom.getActiveProviderElement()
+  const element = hostElement.querySelector(
+    `[data-blokkli-editable-field="${fieldName}"]`,
+  )
+
+  if (!(element instanceof HTMLElement)) {
+    return
+  }
+
+  return {
+    fieldName,
+    host,
+    element,
+    isComponent: element.dataset.blokkliEditableComponent === 'true',
+    value: element.dataset.blokkliEditableValue || '',
+    config,
+  }
+}
+
+onBlokkliEvent('editable:focus', (e) => {
+  hasTransition.value = !editable.value
+  editable.value = buildEditable(e.fieldName, e.uuid) || null
+  if (editable.value) {
+    selection.editableActive.value = true
+  }
+})
+
+defineCommands(() => {
+  // Find editable fields in the current selection.
+  const editables: Editable[] = selection.blocks.value.flatMap((v) => {
+    return [...v.element().querySelectorAll('[data-blokkli-editable-field]')]
+      .map((el) => {
+        if (!(el instanceof HTMLElement)) {
+          return
+        }
+
+        // Find closest block.
+        const block = el.closest('[data-uuid]')
+        if (!(block instanceof HTMLElement)) {
+          return
+        }
+
+        // Skip editable fields of nested blocks because this would lead to a
+        // ton of commands with the same name, e.g. when the selected block
+        // has 20 nested blocks with editable fields. This would be pretty
+        // useless.
+        if (block.dataset.uuid !== v.uuid) {
+          return
+        }
+
+        const name = el.dataset.blokkliEditableField
+        if (!name) {
+          return
+        }
+
+        return buildEditable(name, block.dataset.uuid)
+      })
+      .filter(falsy)
+  })
+
+  return editables.map((v) => {
+    return {
+      id: 'feature:editable:edit:' + v.fieldName,
+      group: 'selection',
+      label: $t('editableCommandEdit', 'Edit field "@name"').replace(
+        '@name',
+        v.config.label,
+      ),
+      icon: 'textbox',
+      disabled: false,
+      callback: () => {
+        editable.value = v
+      },
+    }
+  })
+})
+
+watch(selection.editableActive, (isActive) => {
+  if (!isActive) {
+    hasTransition.value = true
+    editable.value = null
+  }
+})
+
+watch(editable, (v) => {
+  if (!v && selection.editableActive.value) {
+    selection.editableActive.value = false
+  }
+})
+
+const close = () => {
+  editable.value = null
+  selection.editableActive.value = false
+}
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+  <PluginViewOption
+    id="mask"
+    v-model="isActive"
+    :label="$t('maskToggle', 'Toggle non-editable areas')"
+    :title-on="$t('maskShow', 'Show non-editable areas')"
+    :title-off="$t('maskHide', 'Hide non-editable areas')"
+    :tour-text="
+      $t(
+        'maskTourText',
+        'Toggle between showing or hiding non-editable parts of the page.',
+      )
+    "
+    icon="texturebox"
+    key-code="M"
+  />
+</template>
+
+<script lang="ts" setup>
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+} from '#imports'
+import { PluginViewOption } from '#blokkli/plugins'
+
+const HIDE_CLASS = 'bk-hide-non-editable'
+
+defineBlokkliFeature({
+  id: 'editable-mask',
+  icon: 'texturebox',
+  label: 'Editable Mask',
+  description: 'Provides a view option to hide non-editable parts of the page.',
+  viewports: ['desktop'],
+})
+
+const { $t } = useBlokkli()
+
+const isActive = ref(false)
+
+const setRootClass = () => {
+  document.documentElement.classList.remove(HIDE_CLASS)
+  if (isActive.value) {
+    document.documentElement.classList.add(HIDE_CLASS)
+  }
+}
+
+watch(isActive, setRootClass)
+
+onMounted(setRootClass)
+
+onBeforeUnmount(() => {
+  document.documentElement.classList.remove(HIDE_CLASS)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'EditableMask',
+}
+</script>

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

@@ -0,0 +1,108 @@
+<template>
+  <Teleport to="#bk-toolbar-title">
+    <button
+      ref="buttonEl"
+      class="bk-toolbar-button"
+      @click="eventBus.emit('editEntity')"
+    >
+      <div class="bk-toolbar-title">
+        <div>
+          <span
+            class="bk-status-indicator"
+            :class="{
+              'bk-is-success': entity.status && !mutations.length,
+              'bk-is-warning': entity.status && mutations.length,
+            }"
+          />
+          <strong>{{ entity.label }}</strong>
+          <span>&nbsp;{{ entity.bundleLabel }}</span>
+        </div>
+      </div>
+      <div class="bk-tooltip">
+        <span v-if="entity.status && !mutations.length">{{
+          statusPublished
+        }}</span>
+        <span v-else-if="entity.status && mutations.length">{{
+          statusPending
+        }}</span>
+        <span v-else>{{ statusUnpublished }}</span>
+      </div>
+    </button>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+import { useBlokkli, defineBlokkliFeature, ref, computed } from '#imports'
+import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
+
+defineBlokkliFeature({
+  id: 'entity-title',
+  icon: 'title',
+  label: 'Entity Title',
+  description: 'Renders the title and status of the page entity.',
+})
+
+const { state, eventBus, $t } = useBlokkli()
+const { entity, mutations } = state
+const buttonEl = ref<HTMLButtonElement | null>(null)
+
+const statusPublished = computed(() =>
+  $t('pageIsPublished', 'Page is published'),
+)
+
+const statusPending = computed(() =>
+  $t(
+    'pageIsPublishedWithPendingChanges',
+    'Page is published (changes pending)',
+  ),
+)
+
+const statusUnpublished = computed(() =>
+  $t('pageIsNotPublished', 'Page is not published'),
+)
+
+defineCommands(() => {
+  return {
+    id: 'feature:entity-title:edit-entity',
+    group: 'misc',
+    label: $t('editFormEntityEdit', 'Edit @label').replace(
+      '@label',
+      entity.value.label || 'Page',
+    ),
+    callback: () => eventBus.emit('editEntity'),
+    icon: 'edit',
+  }
+})
+
+const tourText = computed(() => {
+  const intro = $t(
+    'entityTitleTourText',
+    '<p>Shows the title and status of the current page.</p><p>Click on the title to open the page edit form.</p>',
+  )
+
+  return `
+${intro}
+<ul>
+<li><div class="bk-status-indicator"></div>${statusUnpublished.value}</li>
+<li><div class="bk-status-indicator bk-is-warning"></div>${statusPending.value}</li>
+<li><div class="bk-status-indicator bk-is-success"></div>${statusPublished.value}</li>
+</ul>
+`
+})
+
+defineTourItem(() => {
+  return {
+    id: 'entity-title',
+    title: $t('entityTitleTourTitle', 'Page'),
+    text: tourText.value,
+    element: buttonEl.value,
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'EntityTitle',
+}
+</script>