@blokkli/editor 1.0.0

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

@@ -0,0 +1,70 @@
+<template>
+  <PluginSidebar
+    id="violations"
+    ref="plugin"
+    :title="$t('validationsToolbarLabel', 'Validations')"
+    :tour-text="
+      $t(
+        'validationsTourText',
+        'See validation errors for content or structure on the current page.',
+      )
+    "
+    icon="check"
+    weight="-10"
+  >
+    <div class="bk bk-errors bk-control">
+      <ul v-if="state.violations.value.length">
+        <li v-for="(item, i) in state.violations.value" :key="item.message + i">
+          <SidebarItem v-bind="item" />
+        </li>
+      </ul>
+      <div v-else class="bk-errors-success">
+        <figure>
+          <Icon name="check" />
+        </figure>
+        <h3>{{ $t('validationsNoneFound', 'No validation errors found.') }}</h3>
+      </div>
+    </div>
+
+    <template v-if="validations.length" #badge>
+      <div class="bk-sidebar-badge bk-is-red">{{ validations.length }}</div>
+    </template>
+  </PluginSidebar>
+
+  <ValidationOverlay v-if="validations.length" :validations="validations" />
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature, computed, ref } from '#imports'
+import { PluginSidebar } from '#blokkli/plugins'
+import { Icon } from '#blokkli/components'
+import ValidationOverlay from './Overlay/index.vue'
+import SidebarItem from './SidebarItem/index.vue'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+defineBlokkliFeature({
+  id: 'validations',
+  icon: 'check',
+  label: 'Validations',
+  description: 'Provides a sidebar pane to render validations.',
+})
+
+const plugin = ref<InstanceType<typeof PluginSidebar> | null>(null)
+
+const { state, $t } = useBlokkli()
+
+const validations = computed(() => state.violations.value)
+
+onBlokkliEvent('publish:failed', function () {
+  // When publishing failed and we have validations, show the sidebar.
+  if (plugin.value && validations.value.length) {
+    plugin.value.showSidebar()
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Validations',
+}
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+  <Component
+    :is="feature.component"
+    v-for="feature in availableFeatures"
+    :key="feature.id"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, onMounted, nextTick, computed } from '#imports'
+import { featureComponents } from '#blokkli-runtime/features'
+
+const emit = defineEmits(['loaded'])
+
+const { adapter, features, ui, debug } = useBlokkli()
+
+const logger = debug.createLogger('Features')
+
+const renderedFeatures = computed(() =>
+  features.features.value.map((v) => v.id),
+)
+
+// Let the edit adapter determine which features should be disabled at runtime.
+const disabledFeatures = adapter.getDisabledFeatures
+  ? await adapter.getDisabledFeatures()
+  : await Promise.resolve([])
+
+const availableFeatures = computed(() => {
+  return featureComponents.filter((v) => {
+    // Feature is disabled at runtime.
+    if (disabledFeatures.includes(v.id)) {
+      return false
+    }
+
+    // Feature requires adapter methods that aren't implemented.
+    if (
+      v.requiredAdapterMethods.length &&
+      !v.requiredAdapterMethods.every((method) => adapter[method])
+    ) {
+      return false
+    }
+
+    // Feature has dependencies on other features that are not yet rendered.
+    if (
+      v.dependencies.length &&
+      !v.dependencies.every((id) => renderedFeatures.value.includes(id))
+    ) {
+      return false
+    }
+
+    return !v.viewports.length || v.viewports.includes(ui.appViewport.value)
+  })
+})
+
+onMounted(() => {
+  nextTick(() => {
+    emit('loaded')
+    logger.log('Features loaded', renderedFeatures.value)
+  })
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Features',
+}
+</script>

package/dist/runtime/components/Edit/FormOverlay/Header/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="bk bk-overlay-header">
+    <ItemIcon v-if="bundle" :bundle="bundle" />
+    <div v-else class="bk-blokkli-item-icon">
+      <Icon :name="icon" />
+    </div>
+    <h3>{{ title }}</h3>
+    <button @mousedown.capture.stop="$emit('close')">
+      <Icon name="close" />
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ItemIcon, Icon } from '#blokkli/components'
+import type { BlokkliIcon } from '#blokkli/icons'
+
+withDefaults(
+  defineProps<{
+    bundle?: string
+    icon?: BlokkliIcon
+    title: string
+  }>(),
+  {
+    icon: 'form',
+    bundle: '',
+  },
+)
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'FormOverlayHeader',
+}
+</script>

package/dist/runtime/components/Edit/FormOverlay/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="bk-form-overlay"
+    @click.stop
+    @mousedown.stop
+    @keyup.stop
+    @keydown.stop
+  >
+    <div class="bk bk-form-overlay-background bk-overlay" />
+    <Resizable :id="id" class="bk-form-overlay-resizable">
+      <FormHeader
+        :bundle="bundle"
+        :icon="icon"
+        :title="title"
+        @close="onClose"
+      />
+      <div class="bk-form-overlay-content">
+        <slot />
+      </div>
+      <div v-if="$slots.footer" class="bk bk-form-overlay-footer">
+        <slot name="footer" />
+      </div>
+    </Resizable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import FormHeader from './Header/index.vue'
+import type { BlokkliIcon } from '#blokkli/icons'
+import { Resizable } from '#blokkli/components'
+
+defineProps<{
+  id: string
+  bundle?: string
+  icon?: BlokkliIcon
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const onClose = () => {
+  emit('close')
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'FormOverlay',
+}
+</script>

package/dist/runtime/components/Edit/Highlight/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
+  <Component :is="tag || 'div'" class="bk-highlight" v-html="markup" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from '#imports'
+
+const props = defineProps<{
+  /**
+   * The text to find the matches in.
+   */
+  text: string
+
+  /**
+   * The regex to use for matching words.
+   */
+  regex?: RegExp
+
+  /**
+   * The indices of the matches.
+   */
+  positions?: number[]
+
+  /**
+   * The tag for the wrapper.
+   */
+  tag?: string
+}>()
+
+const highlightPositions = (text: string, positions: number[]): string => {
+  let result = ''
+  let inTag = false // Flag to indicate if we are currently adding text inside <em></em>.
+
+  for (let i = 0; i < text.length; i++) {
+    // Check if the current character's index is in the positions array.
+    if (positions.includes(i)) {
+      // If the previous character was not a match, we start a new <em>.
+      if (!inTag) {
+        result += '<em>'
+        inTag = true
+      }
+      result += text[i]
+    } else {
+      // If the previous character was a match, we close the <em> tag.
+      if (inTag) {
+        result += '</em>'
+        inTag = false
+      }
+      result += text[i]
+    }
+  }
+
+  // Close the <em> tag if the last character in text was a match.
+  if (inTag) {
+    result += '</em>'
+  }
+
+  return result
+}
+
+const markup = computed(() => {
+  if (props.positions?.length) {
+    return highlightPositions(props.text, props.positions)
+  }
+
+  if (!props.regex) {
+    return props.text
+  }
+
+  // Find the first occurrence index of any word.
+  const firstMatch = props.text.match(props.regex)
+  const index = firstMatch
+    ? props.text.toLowerCase().indexOf(firstMatch[0].toLowerCase())
+    : -1
+
+  // If no match is found, return the original text.
+  if (index === -1) {
+    return props.text
+  }
+
+  // Extract the part of the text before the first match.
+  const before = props.text.substring(Math.max(0, index - 30), index)
+
+  // Replace each occurrence with the highlighted version.
+  const highlighted = props.text
+    .substring(index)
+    .replace(props.regex, (match) => {
+      return `<em>${match}</em>`
+    })
+
+  return before + highlighted
+})
+</script>

package/dist/runtime/components/Edit/Icon/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="bk-icon" v-html="markup" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from '#imports'
+import { icons } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli/icons'
+
+const props = defineProps<{
+  name: BlokkliIcon
+}>()
+
+const markup = computed(() => icons[props.name])
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Icon',
+}
+</script>

package/dist/runtime/components/Edit/ItemIcon/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-if="markup" class="bk-blokkli-item-icon" v-html="markup" />
+  <div v-else-if="bundle === 'from_library'" class="bk-blokkli-item-icon">
+    <Icon name="reusable" />
+  </div>
+  <div v-else class="bk-blokkli-item-icon">
+    <Icon name="question" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from '#imports'
+import { icons } from '#blokkli/definitions'
+import { Icon } from '#blokkli/components'
+
+const props = defineProps<{
+  bundle?: string
+}>()
+
+const markup = computed(() => (props.bundle ? icons[props.bundle] : undefined))
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ItemIcon',
+}
+</script>

package/dist/runtime/components/Edit/Loading/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="bk bk-loading-overlay" :class="{ 'bk-is-screen': screen }">
+    <Icon name="spinner" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '#blokkli/components'
+
+defineProps<{
+  screen?: boolean
+}>()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Loading',
+}
+</script>

package/dist/runtime/components/Edit/Messages/Item/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="bk-message"
+    :class="[{ 'bk-has-timer': hasTimer }, 'bk-is-' + type]"
+    @mouseenter="stopTimer"
+    @mouseleave="startTimer"
+  >
+    <button class="bk-message-content" @click="$emit('close')">
+      <p>{{ message }}</p>
+      <p v-if="additionalText" class="bk-message-additional">
+        {{ additionalText }}
+      </p>
+    </button>
+
+    <div
+      v-if="additional && additional instanceof Error"
+      class="bk-message-actions"
+    >
+      <button
+        class="bk-button bk-is-danger"
+        @click.prevent="showDetails = true"
+      >
+        <Icon name="bug" />
+        Details
+      </button>
+    </div>
+    <Teleport
+      v-if="additional && additional instanceof Error && showDetails"
+      to="body"
+    >
+      <DialogModal
+        title="Error Details"
+        hide-buttons
+        width="100%"
+        @cancel="showDetails = false"
+      >
+        <div class="bk bk-message-error">
+          <code>
+            <div v-text="additional.message" />
+            <div v-text="additional.name" />
+            <div v-text="additional.cause" />
+            <div v-text="additional.stack" />
+          </code>
+        </div>
+      </DialogModal>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, computed, watch } from '#imports'
+import { Icon, DialogModal } from '#blokkli/components'
+
+const props = defineProps<{
+  type: 'success' | 'error'
+  message: string
+  additional?: string | Error | unknown
+}>()
+
+const emit = defineEmits(['close'])
+const hasTimer = ref(true)
+const showDetails = ref(false)
+
+const additionalText = computed(() => {
+  if (!props.additional) {
+    return null
+  }
+
+  if (props.additional instanceof Error) {
+    return props.additional.message
+  }
+
+  return null
+})
+
+watch(showDetails, function (isVisible) {
+  if (isVisible) {
+    stopTimer()
+  }
+})
+
+function stopTimer() {
+  clearTimeout(timeout)
+  hasTimer.value = false
+}
+
+function startTimer() {
+  clearTimeout(timeout)
+  if (showDetails.value) {
+    return
+  }
+  hasTimer.value = true
+  timeout = setTimeout(() => {
+    emit('close')
+  }, 6000)
+}
+
+let timeout: any = null
+
+onMounted(() => {
+  startTimer()
+})
+
+onBeforeUnmount(() => {
+  stopTimer()
+})
+</script>

package/dist/runtime/components/Edit/Messages/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <Teleport to="body">
+    <div class="bk bk-messages">
+      <TransitionGroup name="bk-message">
+        <Item
+          v-for="(message, index) in messages"
+          v-bind="message"
+          :key="index"
+          @close="removeMessage(index)"
+        />
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref } from '#imports'
+import type { Message } from '#blokkli/types'
+import Item from './Item/index.vue'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+const messages = ref<Message[]>([])
+
+function removeMessage(index: number) {
+  messages.value = messages.value.filter((_v, i) => i !== index)
+}
+
+onBlokkliEvent('message', (message) => {
+  messages.value.push(message)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Messages',
+}
+</script>