@blokkli/editor 1.0.0

package/dist/runtime/components/Edit/Features/Artboard/Manager/Scrollbar/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <Teleport to="body">
+    <div
+      ref="scrollbarEl"
+      class="bk bk-artboard-scrollbar"
+      :class="[
+        { 'bk-is-active': isDraggingThumb },
+        'bk-orientation-' + orientation,
+      ]"
+      @touchstart.prevent
+      @mousedown.stop.prevent="onClickScrollbar"
+    >
+      <button ref="button" @mousedown.capture.prevent.stop="onThumbMouseDown" />
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import { ref, onBeforeUnmount, onMounted } from '#imports'
+
+const isDraggingThumb = ref(false)
+
+const props = defineProps<{
+  padding: number
+  offset: number
+  rootSize: number
+  artboardSize: number
+  scale: number
+  orientation: 'height' | 'width'
+}>()
+
+type ScrollbarOptions = {
+  padding?: number
+  orientation?: 'height' | 'width'
+}
+
+class Scrollbar {
+  scrollStart = 0
+  thumbStart = 0
+  scrollbarSize = 0
+  padding = 50
+  offset = 0
+  rootSize = 0
+  artboardSize = 0
+  scale = 1
+  orientation: 'height' | 'width' = 'height'
+
+  constructor(options?: ScrollbarOptions) {
+    this.padding = options?.padding || this.padding
+    this.orientation = options?.orientation || this.orientation
+  }
+
+  getMouseCoordinate(e: MouseEvent): number {
+    return this.orientation === 'height' ? e.clientY : e.clientX
+  }
+}
+
+const scrollbar = new Scrollbar(props)
+
+const scrollbarEl = ref<HTMLElement | null>(null)
+const button = ref<HTMLButtonElement | null>(null)
+
+const emit = defineEmits(['pageUp', 'pageDown', 'setOffset'])
+
+let scrollStart = 0
+let thumbStart = 0
+let scrollbarSize = 300
+
+const scrollTop = () =>
+  Math.round(props.offset - props.rootSize + props.padding)
+
+// The scroll progress as a value from 0 to 1.
+const scrollProgress = () => Math.abs(scrollTop() / scrollSize())
+const thumbOffset = () => (scrollbarSize - scrollThumbSize()) * scrollProgress()
+
+const scrollSize = () =>
+  props.artboardSize * props.scale + props.rootSize - 2 * props.padding
+
+const scrollThumbSize = () => (props.rootSize / scrollSize()) * props.rootSize
+
+function onThumbMouseDown(e: MouseEvent) {
+  isDraggingThumb.value = true
+  scrollStart = scrollbar.getMouseCoordinate(e)
+  thumbStart = thumbOffset()
+  document.body.addEventListener('mouseup', onMouseUp, {
+    passive: false,
+    capture: true,
+  })
+  document.body.addEventListener('mousemove', onThumbMouseMove, {
+    passive: false,
+    capture: true,
+  })
+}
+
+function onMouseUp() {
+  isDraggingThumb.value = false
+  document.body.removeEventListener('mousemove', onThumbMouseMove, {
+    capture: true,
+  })
+  document.body.removeEventListener('mouseup', onMouseUp, {
+    capture: true,
+  })
+}
+
+function getOffsetFromThumb(newThumb: number): number {
+  const maxThumb = scrollbarSize - scrollThumbSize()
+  const newScrollProgress = newThumb / maxThumb
+  const newScrollOffset = newScrollProgress * scrollSize()
+  return newScrollOffset + props.rootSize - props.padding
+}
+
+function onThumbMouseMove(e: MouseEvent) {
+  const diff = scrollStart - scrollbar.getMouseCoordinate(e)
+  const newThumb = Math.max(
+    Math.min(-thumbStart + diff, 0),
+    -(scrollbarSize - scrollThumbSize()),
+  )
+  emit('setOffset', getOffsetFromThumb(newThumb))
+}
+
+function getStyle() {
+  const offset = thumbOffset()
+  const size = scrollThumbSize()
+  if (props.orientation === 'height') {
+    return {
+      height: size + 'px',
+      transform: `translateY(${offset}px)`,
+    }
+  }
+  return {
+    width: size + 'px',
+    transform: `translateX(${offset}px)`,
+  }
+}
+
+function onClickScrollbar(e: MouseEvent) {
+  if (e.offsetY < thumbOffset()) {
+    emit('pageUp')
+  } else {
+    emit('pageDown')
+  }
+}
+
+const observer = new ResizeObserver((entries) => {
+  const size = entries[0]?.contentBoxSize?.[0]
+  if (!size) {
+    return
+  }
+
+  scrollbarSize =
+    props.orientation === 'height' ? size.blockSize : size.inlineSize
+})
+
+onBlokkliEvent('animationFrame', () => {
+  if (!button.value) {
+    return
+  }
+
+  const style = getStyle()
+
+  button.value.style.width = style.width || ''
+  button.value.style.height = style.height || ''
+  button.value.style.transform = style.transform
+})
+
+onMounted(() => {
+  if (scrollbarEl.value) {
+    observer.observe(scrollbarEl.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
+</script>

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

@@ -0,0 +1,317 @@
+<template>
+  <PluginToolbarButton
+    id="artboard_reset_zoom"
+    :title="$t('artboardResetZoom', 'Reset zoom')"
+    :shortcut-group="$t('artboard', 'Artboard')"
+    :tour-text="
+      $t(
+        'artboardToolbarButtonTourText',
+        'Shows the current zoom factor. Click on it to reset the zoom back to 100%.',
+      )
+    "
+    icon="magnifier"
+    meta
+    key-code="0"
+    region="view-options"
+    weight="10"
+    @click="resetZoom"
+  >
+    <div class="bk-feature-canvas-button">
+      <span>{{ zoomLevel }}</span>
+    </div>
+  </PluginToolbarButton>
+
+  <Scrollbar
+    :padding="props.padding"
+    :offset="ui.artboardOffset.value.y"
+    :root-size="ui.viewport.value.height"
+    :artboard-size="ui.artboardSize.value.height"
+    :scale="ui.artboardScale.value"
+    orientation="height"
+    @page-down="onPageDown"
+    @page-up="onPageUp"
+    @set-offset="setOffset('y', $event)"
+  />
+
+  <Scrollbar
+    :padding="props.padding"
+    :offset="ui.artboardOffset.value.x"
+    :root-size="ui.viewport.value.width"
+    :artboard-size="ui.artboardSize.value.width"
+    :scale="ui.artboardScale.value"
+    orientation="width"
+    @page-down="onPageDown"
+    @page-up="onPageUp"
+    @set-offset="setOffset('x', $event)"
+  />
+
+  <Teleport v-if="showDebug" to="body">
+    <div class="bk-artboard-debug">
+      <div v-for="v in debugValues" :key="v.key">
+        <div>{{ v.key }}</div>
+        <div>{{ v.value }}</div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  watch,
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+} from '#imports'
+import type { Coord } from '#blokkli/types'
+import { PluginToolbarButton } from '#blokkli/plugins'
+import Scrollbar from './Scrollbar/index.vue'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import defineShortcut from '#blokkli/helpers/composables/defineShortcut'
+import { Artboard, type ArtboardOptions } from './Artboard'
+
+const { context, storage, ui, animation, $t, dom } = useBlokkli()
+
+const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + '%')
+
+const showDebug = ref(false)
+
+const props = withDefaults(
+  defineProps<{
+    padding?: number
+    minScale?: number
+    maxScale?: number
+    persist?: boolean
+    scrollSpeed?: number
+  }>(),
+  {
+    padding: 50,
+    minScale: 0.05,
+    maxScale: 3.5,
+    scrollSpeed: 1,
+  },
+)
+
+const options = computed<ArtboardOptions>(() => {
+  return {
+    maxScale: ui.isMobile.value ? 1 : 3,
+    scrollSpeed: props.scrollSpeed,
+  }
+})
+
+watch(options, function (newOptions) {
+  artboard.setOptions(newOptions)
+})
+
+type SavedState = {
+  offset: Coord
+  scale: number
+}
+const storageKey = computed(() => 'artboard:' + context.value.entityUuid)
+const savedState = storage.use<SavedState | null>(storageKey, null)
+
+const saveState = () => {
+  if (!props.persist) {
+    return
+  }
+  savedState.value = { offset: artboard.offset, scale: artboard.scale }
+}
+
+function getArtboard(): Artboard {
+  return new Artboard(ui.artboardElement(), ui.rootElement(), {
+    x: savedState.value?.offset.x,
+    y: savedState.value?.offset.y,
+    scale: savedState.value?.scale,
+    ...options.value,
+  })
+}
+
+const artboard = getArtboard()
+
+function setOffset(key: 'x' | 'y', value: number) {
+  artboard.stopAnimate()
+  artboard.offset[key] = value
+}
+
+type DebugValue = {
+  key: string
+  value: string | number | boolean
+}
+
+const debugValues = ref<DebugValue[]>([])
+
+const coordToString = (v: Coord): string =>
+  `x: ${Math.round(v.x)}, y: ${Math.round(v.y)}`
+
+onBlokkliEvent('animationFrame:before', () => {
+  artboard.loop()
+  ui.artboardSize.value.height = artboard.artboardSize.height
+  ui.artboardSize.value.width = artboard.artboardSize.width
+  // We don't need much precision here, so we can round it.
+  // This also prevents updating rects in WebGL buffers for small changes.
+  ui.artboardOffset.value.x = Math.round(artboard.offset.x)
+  ui.artboardOffset.value.y = Math.round(artboard.offset.y)
+  ui.artboardScale.value = artboard.scale
+  animation.requestDraw()
+  if (!showDebug.value) {
+    return
+  }
+  debugValues.value = [
+    {
+      key: 'scale',
+      value: artboard.scale.toString(),
+    },
+    {
+      key: 'isScaling',
+      value: artboard.isScaling,
+    },
+    {
+      key: 'isDragging',
+      value: artboard.isDragging,
+    },
+    {
+      key: 'isTouching',
+      value: artboard.isTouching,
+    },
+    {
+      key: 'maxScale',
+      value: artboard.maxScale,
+    },
+    {
+      key: 'isMomentumScrolling',
+      value: artboard.isMomentumScrolling,
+    },
+    {
+      key: 'scaleMidpoint',
+      value: artboard.scaleMidpoint
+        ? coordToString(artboard.scaleMidpoint)
+        : 'undefined',
+    },
+  ]
+})
+
+onMounted(() => {
+  window.addEventListener('beforeunload', saveState)
+})
+
+onBeforeUnmount(() => {
+  saveState()
+  artboard.destroy()
+  window.removeEventListener('beforeunload', saveState)
+})
+
+const resetZoom = () => {
+  artboard.resetZoom()
+}
+
+function onPageUp() {
+  artboard.scrollPageUp()
+  animation.requestDraw()
+}
+
+function onPageDown() {
+  artboard.scrollPageDown()
+  animation.requestDraw()
+}
+
+onBlokkliEvent('keyPressed', (e) => {
+  if (e.code === 'Home') {
+    artboard.scrollToTop()
+    animation.requestDraw()
+  } else if (e.code === 'End') {
+    artboard.scrollToEnd()
+    animation.requestDraw()
+  } else if (e.code === 'PageUp') {
+    onPageUp()
+  } else if (e.code === 'PageDown') {
+    onPageDown()
+  } else if (e.code === 'ArrowUp') {
+    artboard.animateOrJumpBy(200)
+    animation.requestDraw()
+  } else if (e.code === 'ArrowDown') {
+    artboard.animateOrJumpBy(-200)
+    animation.requestDraw()
+  } else if (e.code === '0' && e.meta) {
+    artboard.resetZoom()
+    animation.requestDraw()
+  } else if (e.code === '1' && e.meta) {
+    artboard.scaleToFit()
+    animation.requestDraw()
+  }
+})
+
+defineShortcut(
+  [
+    {
+      code: 'Home',
+      label: $t('artboardScrollToTop', 'Scroll to top'),
+    },
+    {
+      code: 'End',
+      label: $t('artboardScrollToEnd', 'Scroll to end'),
+    },
+    {
+      code: 'PageUp',
+      label: $t('artboardScrollOnePageUp', 'Scroll one page up'),
+    },
+    {
+      code: 'PageDown',
+      label: $t('artboardScrollOnePageDown', 'Scroll one page down'),
+    },
+    {
+      code: 'ArrowUp',
+      label: $t('artboardScrollUp', 'Scroll up'),
+    },
+    {
+      code: 'ArrowDown',
+      label: $t('artboardScrollDown', 'Scroll down'),
+    },
+    {
+      code: '1',
+      label: $t('artboardScaleToFit', 'Scale to fit'),
+      meta: true,
+    },
+  ].map((v) => {
+    return { ...v, group: $t('artboard', 'Artboard') }
+  }),
+)
+
+onBlokkliEvent('scrollIntoView', (e) => {
+  artboard.stopAnimate()
+  const visible = dom.getBlockVisibilities()[e.uuid]
+  if (visible) {
+    return
+  }
+
+  const rect = dom.getBlockRect(e.uuid)
+  if (!rect) {
+    return
+  }
+
+  const rectY = rect.y * artboard.scale + artboard.offset.y
+
+  let targetY: number | null = null
+  const currentY = artboard.animationTarget?.y || artboard.offset.y
+  const rootHeight = ui.visibleViewportPadded.value.height
+
+  if (e.center) {
+    targetY =
+      currentY - rectY + props.padding + rootHeight / 2 - rect.height / 2
+  } else if (rectY < 70) {
+    targetY = currentY - (rectY - props.padding) + 70
+  } else if (rectY + rect.height > rootHeight) {
+    targetY = currentY + (rootHeight - (rectY + rect.height) - 40)
+  }
+
+  if (targetY) {
+    artboard.setOffset(artboard.offset.x, targetY)
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ArtboardManager',
+}
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <ArtboardManager
+    :persist="settings.persist"
+    :scroll-speed="settings.scrollSpeed"
+  />
+</template>
+
+<script lang="ts" setup>
+import ArtboardManager from './Manager/index.vue'
+import { defineBlokkliFeature } from '#imports'
+
+const { settings } = defineBlokkliFeature({
+  id: 'artboard',
+  label: 'Artboard',
+  icon: 'artboard',
+  description:
+    'Wraps the entire page in an artboard that can be zoomed and moved using the mouse.',
+  settings: {
+    persist: {
+      type: 'checkbox',
+      default: true,
+      label: 'Persist position and zoom',
+      group: 'behavior',
+      viewports: ['desktop'],
+    },
+    scrollSpeed: {
+      type: 'slider',
+      default: 1,
+      label: 'Artboard scroll speed',
+      group: 'behavior',
+      viewports: ['desktop'],
+      min: 0.5,
+      max: 1.5,
+      step: 0.05,
+    },
+  },
+  screenshot: 'feature-artboard.jpg',
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Artboard',
+}
+</script>

package/dist/runtime/components/Edit/Features/Assistant/Overlay/ResultMarkup/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="bk-assistant-result-markup">
+    <div class="ck-content" v-html="markup" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  markup: string
+}>()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AssistantResultMarkup',
+}
+</script>

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

@@ -0,0 +1,147 @@
+<template>
+  <FormOverlay
+    id="assistant"
+    :title="$t('assistantDialogTitle', 'Generate content with AI assistant')"
+    icon="robot"
+    @close="onClose"
+  >
+    <div class="bk-assistant-form">
+      <div class="bk">
+        <p class="bk-lead">
+          {{
+            $t(
+              'assistantDialogLead',
+              "Please enter what you'd like the assistant to generate.",
+            )
+          }}
+        </p>
+        <label class="bk-form-label" for="assistant_prompt">
+          {{ $t('assistantPromptLabel', 'Prompt') }}
+        </label>
+        <div class="bk-assistant-form-textarea">
+          <textarea
+            id="assistant_prompt"
+            v-model="prompt"
+            type="text"
+            class="bk-form-input"
+            rows="10"
+            :placeholder="
+              $t(
+                'assistantPromptPlaceholder',
+                'Generate content for a page about how taxes work in Switzerland',
+              )
+            "
+            required
+          />
+          <button
+            class="bk-button bk-is-small"
+            :class="{ 'bk-is-loading': isGenerating }"
+            @click.prevent="onGenerate"
+          >
+            Generate
+          </button>
+        </div>
+      </div>
+      <div class="bk-assistant-form-result">
+        <div class="bk-form-label">Result</div>
+        <div>
+          <template v-if="result">
+            <ResultMarkup
+              v-if="result.type === 'markup'"
+              :markup="result.content"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <button class="bk-button bk-is-primary" @click="onSubmit">
+        {{ $t('assistantDialogSubmit', 'Create blocks') }}
+      </button>
+    </template>
+  </FormOverlay>
+</template>
+
+<script setup lang="ts">
+import { FormOverlay } from '#blokkli/components'
+import type { AssistantResult } from '#blokkli/types'
+import { useBlokkli, ref } from '#imports'
+import ResultMarkup from './ResultMarkup/index.vue'
+
+const { $t, adapter } = useBlokkli()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'submit', result: AssistantResult): void
+}>()
+
+const prompt = ref(
+  `Write content for a page talking about VueJS. Please come up with good titles and content for each section.
+
+# Origins
+Write about when Vue was created and by whom.
+
+# Release of Vue 2
+When was it released, what were the changes.
+
+# Release of Vue 3
+Write about the big changes introduced in Vue 3.
+
+# Comparison to React
+`,
+)
+const isGenerating = ref(false)
+const result = ref<AssistantResult | null>({
+  type: 'markup',
+  content: `
+<h2>Origins</h2>
+<p>Vue was created in 2014 by Evan You, a former Google engineer. It was initially released to the public in February 2014.</p>
+
+<h2>Release of Vue 2</h2>
+<p>Vue 2 was released in September 2016. This release introduced significant improvements in performance and the virtual DOM implementation, making Vue even more efficient and capable.</p>
+
+<h2>Release of Vue 3</h2>
+<p>Vue 3, released in September 2020, brought several major changes, including the composition API, better TypeScript integration, and significant improvements in terms of performance, tree-shaking, and the overall developer experience.</p>
+
+<h2>Comparison to React</h2>
+<p>Vue is often compared to React due to their shared focus on building user interfaces. While React is developed and maintained by Facebook, Vue is an open-source project led by Evan You. Both frameworks have their strengths and weaknesses, and the choice between them often depends on the specific requirements of a project and the preferences of the development team.</p>
+`,
+})
+
+const onSubmit = () => {
+  if (!result.value) {
+    emit('close')
+    return
+  }
+
+  emit('submit', result.value)
+}
+const onClose = () => {
+  emit('close')
+}
+
+const onGenerate = async () => {
+  if (isGenerating.value) {
+    return
+  }
+  isGenerating.value = true
+
+  try {
+    const fetched = await adapter.assistantGetResults!({
+      type: 'create',
+      prompt: prompt.value,
+    })
+    result.value = fetched || null
+  } catch (_e) {
+    // Noop.
+  }
+
+  isGenerating.value = false
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AssistantOverlay',
+}
+</script>

package/dist/runtime/components/Edit/Features/Assistant/docs.md

@@ -0,0 +1,7 @@
+## Overview
+
+The `assistant` feature implements an [Add Action](/plugins/add-action) that can
+be dragged anywhere on the page. Once placed, a modal overlay is shown with a
+basic prompt textarea, where the user can enter a prompt. Clicking on _Generate_
+calls the [adapter.assistantGetResults] method which is expected to return the
+content that should be generated.