@blokkli/editor 1.0.0

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

@@ -0,0 +1,81 @@
+<template>
+  <tr>
+    <td class="bk-theme-editor-color-shade">{{ shade }}</td>
+    <td class="bk-theme-editor-color-hex">
+      <input v-model="inputValue" type="text" maxlength="7" />
+    </td>
+    <td class="bk-theme-editor-color-buttons">
+      <button
+        v-if="inputValue !== initValue"
+        @click.stop="inputValue = initValue"
+      >
+        <Icon name="revert" />
+      </button>
+    </td>
+    <td class="bk-theme-editor-color-color">
+      <input v-model.lazy="inputValue" type="color" :name="group + shade" />
+    </td>
+  </tr>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli } from '#imports'
+import { Icon } from '#blokkli/components'
+import { theme as configTheme } from '#blokkli/config'
+import type {
+  RGB,
+  ThemeColorGroup,
+  ThemeColorShade,
+  ThemeContextColorGroup,
+  ThemeContextColorShade,
+} from '#blokkli/types/theme'
+
+const props = defineProps<{
+  group: ThemeColorGroup | ThemeContextColorGroup
+  shade: ThemeColorShade | ThemeContextColorShade
+}>()
+
+const { theme } = useBlokkli()
+
+function rgbToHex(rgb: RGB): string {
+  // Helper function to convert a single RGB component to a two-digit hexadecimal string
+  const toHex = (component: number): string => {
+    const hexValue = component.toString(16)
+    return hexValue.length == 1 ? '0' + hexValue : hexValue
+  }
+
+  // Destructuring the RGB components from the input array
+  const [r, g, b] = rgb
+
+  // Converting each component to hex and concatenating them
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+function hexToRgb(v: string): RGB | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(v)
+  return result
+    ? [
+        Number.parseInt(result[1], 16),
+        Number.parseInt(result[2], 16),
+        Number.parseInt(result[3], 16),
+      ]
+    : null
+}
+
+const initValue = computed(() =>
+  rgbToHex((configTheme as any)[props.group][props.shade]),
+)
+
+const inputValue = computed({
+  get() {
+    return rgbToHex((theme as any)[props.group].value[props.shade])
+  },
+
+  set(hex: string) {
+    const rgb = hexToRgb(hex)
+    if (rgb) {
+      theme.setColor(props.group, props.shade, rgb)
+    }
+  },
+})
+</script>

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

@@ -0,0 +1,24 @@
+<template>
+  <div class="bk-theme-editor-code">
+    <textarea :value="code" rows="10" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBlokkli, computed } from '#imports'
+
+const { theme } = useBlokkli()
+
+const code = computed(() => {
+  const obj = {
+    accent: theme.accent.value,
+    mono: theme.mono.value,
+    teal: theme.teal.value,
+    yellow: theme.yellow.value,
+    red: theme.red.value,
+    lime: theme.lime.value,
+  }
+
+  return JSON.stringify(obj, null, 2)
+})
+</script>

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

@@ -0,0 +1,122 @@
+<template>
+  <PluginSidebar
+    id="theme"
+    :title="$t('theme', 'Theme')"
+    :tour-text="
+      $t(
+        'themeTourText',
+        'Change the colors of the theme and generate a theme file.',
+      )
+    "
+    icon="palette"
+    weight="-100"
+  >
+    <div class="bk bk-theme-editor bk-control" @wheel.capture.stop.passive>
+      <div class="bk-theme-editor-select">
+        <select v-model="selectedTheme">
+          <option v-for="option in themeOptions" :key="option" :value="option">
+            {{ option }}
+          </option>
+        </select>
+      </div>
+      <div :key="selectedThemeId" class="bk-theme-editor-groups">
+        <div v-for="group in groups" :key="group" class="bk-theme-editor-group">
+          <h2>{{ group }}</h2>
+          <table class="bk-theme-editor-table">
+            <Color
+              v-for="shade in shades"
+              :key="group + shade"
+              :group="group"
+              :shade="shade"
+            />
+          </table>
+        </div>
+
+        <div
+          v-for="group in contextGroups"
+          :key="group"
+          class="bk-theme-editor-group"
+        >
+          <h2>{{ group }}</h2>
+          <table class="bk-theme-editor-table">
+            <Color
+              v-for="shade in contextShades"
+              :key="group + shade"
+              :group="group"
+              :shade="shade"
+            />
+          </table>
+        </div>
+      </div>
+
+      <GeneratedCode />
+    </div>
+  </PluginSidebar>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature, ref, computed } from '#imports'
+import { PluginSidebar } from '#blokkli/plugins'
+import Color from './Color/index.vue'
+import GeneratedCode from './GeneratedCode/index.vue'
+import type {
+  ThemeColorGroup,
+  ThemeColorShade,
+  ThemeContextColorGroup,
+  ThemeContextColorShade,
+} from '#blokkli/types/theme'
+
+import { themes } from '#blokkli/config'
+
+defineBlokkliFeature({
+  id: 'theme',
+  icon: 'palette',
+  label: 'Theme',
+  description: 'Implements a theme editor.',
+})
+
+const { $t, theme } = useBlokkli()
+
+const selectedThemeId = ref('custom')
+
+const selectedTheme = computed({
+  get() {
+    return selectedThemeId.value
+  },
+  set(id: any) {
+    selectedThemeId.value = id
+    theme.applyTheme(id)
+  },
+})
+
+const themeOptions = computed(() => ['custom', ...Object.keys(themes)])
+
+const groups: ThemeColorGroup[] = ['accent', 'mono']
+const shades: ThemeColorShade[] = [
+  '50',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  '950',
+]
+
+const contextGroups: ThemeContextColorGroup[] = [
+  'teal',
+  'yellow',
+  'red',
+  'lime',
+]
+const contextShades: ThemeContextColorShade[] = ['light', 'normal', 'dark']
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Theme',
+}
+</script>

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

@@ -0,0 +1,26 @@
+<template>
+  <div class="bk bk-touch-action-bar bk-control">
+    <button
+      class="bk-button"
+      :class="danger ? 'bk-is-danger' : 'bk-is-primary'"
+      @click.stop.prevent.capture="$emit('click')"
+    >
+      {{ label }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  label: string
+  danger?: boolean
+}>()
+
+defineEmits(['click'])
+</script>
+
+<script lang="ts">
+export default {
+  name: 'TouchActionBar',
+}
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <Teleport to="body">
+    <Transition name="bk-touch-bar">
+      <Bar
+        v-if="
+          selection.isMultiSelecting.value &&
+          selection.interactionMode.value === 'touch'
+        "
+        :label="$t('touchBarFinishSelecting', 'Finish selecting')"
+        @click="eventBus.emit('select:end', [...selection.uuids.value])"
+      />
+      <Bar
+        v-else-if="
+          selection.isDragging.value && selection.draggingMode.value === 'touch'
+        "
+        :label="$t('touchBarCancelDragging', 'Cancel dragging')"
+        danger
+        @click="eventBus.emit('dragging:end')"
+      />
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature } from '#imports'
+import Bar from './Bar/index.vue'
+
+const { eventBus, selection, $t } = useBlokkli()
+
+defineBlokkliFeature({
+  id: 'touch-action-bar',
+  label: 'Touch Action Bar',
+  description: 'Renders a button on touch devices to cancel touch actions.',
+  icon: 'button-pointer',
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'TouchActionBarBar',
+}
+</script>

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

@@ -0,0 +1,270 @@
+<template>
+  <Teleport v-if="activeItem" to="body">
+    <div class="bk bk-tour" :style="tooltipStyle">
+      <div class="bk-tour-inner">
+        <div class="bk-tour-title">
+          <span>{{ activeItem.title }}</span>
+          <button @click.prevent="$emit('close')">
+            <Icon name="close" />
+          </button>
+        </div>
+        <div class="bk-tour-content">
+          <div
+            :style="{
+              height: tooltipHeight + 'px',
+            }"
+          >
+            <div
+              ref="contentEl"
+              class="bk-tour-content-text"
+              v-html="activeItem.text"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="bk-tour-buttons">
+        <button @click.stop.prevent="prev">
+          <Icon name="chevron-left" />
+          <span>{{ $t('tourPrev', 'Previous') }}</span>
+          <div class="bk-tooltip">
+            <span>Arrow Right</span>
+            <ShortcutIndicator label="Prev Tour Item" key-code="ArrowLeft" />
+          </div>
+        </button>
+        <div>
+          <span>{{ activeIndex + 1 }}</span
+          >&nbsp;/
+          <span>{{ items.length }}</span>
+        </div>
+        <button @click.stop.prevent="next">
+          <span>{{ $t('tourNext', 'Next') }}</span>
+          <Icon name="chevron-right" />
+          <div class="bk-tooltip">
+            <span>Arrow Left</span>
+            <ShortcutIndicator label="Next Tour Item" key-code="ArrowRight" />
+          </div>
+        </button>
+      </div>
+    </div>
+    <div :style="rectStyle" class="bk bk-tour-overlay-element" />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, computed, ref } from '#imports'
+import { falsy, modulo } from '#blokkli/helpers'
+import { Icon, ShortcutIndicator } from '#blokkli/components'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
+
+const emit = defineEmits(['close'])
+
+type ItemPosition = 'top' | 'left' | 'bottom' | 'right'
+
+const rectStyle = computed(() => {
+  return {
+    width: activeItem.value.rect.width + 'px',
+    height: activeItem.value.rect.height + 'px',
+    transform: `translate(${activeItem.value.rect.x}px, ${activeItem.value.rect.y}px)`,
+  }
+})
+
+const tooltipStyle = computed(() => {
+  const x = Math.max(
+    Math.min(
+      activeItem.value.x - tooltipWidth.value / 2,
+      ui.visibleViewportPadded.value.x +
+        ui.visibleViewportPadded.value.width -
+        tooltipWidth.value,
+    ),
+    ui.visibleViewportPadded.value.x,
+  )
+  const y = Math.max(
+    Math.min(
+      activeItem.value.y - tooltipHeight.value / 2,
+      ui.visibleViewportPadded.value.y +
+        ui.visibleViewportPadded.value.height -
+        tooltipHeight.value -
+        100,
+    ),
+    ui.visibleViewportPadded.value.y,
+  )
+  return {
+    width: tooltipWidth.value + 'px',
+    transform: `translate(${x}px, ${y}px)`,
+  }
+})
+
+const { tour, ui, $t } = useBlokkli()
+
+const activeIndex = ref(0)
+const contentEl = ref<HTMLDivElement | null>(null)
+
+const tooltipHeight = ref(100)
+const tooltipWidth = computed(() => {
+  return ui.isMobile.value ? Math.min(window.innerWidth - 20, 400) : 400
+})
+
+type PositionedTourItem = {
+  id: string
+  title: string
+  text: string
+  rect: DOMRect
+  x: number
+  y: number
+  position: ItemPosition
+}
+
+function calculateCenterPoint(rect: DOMRect): { x: number; y: number } {
+  return {
+    x: rect.x,
+    y: rect.y,
+  }
+}
+
+const viewportCenter = computed(() => ({
+  x: ui.viewport.value.width / 2,
+  y: ui.viewport.value.height / 2,
+}))
+
+const items = computed<PositionedTourItem[]>(() =>
+  tour
+    .getTourItems()
+    .map((item) => {
+      if (!item.element) {
+        return
+      }
+      const element =
+        typeof item.element === 'function' ? item.element() : item.element
+      if (!(element instanceof HTMLElement)) {
+        return
+      }
+      const rect = element.getBoundingClientRect()
+      const { x, y, position } = calculatePosition(rect)
+      return {
+        position,
+        id: item.id,
+        rect,
+        title: item.title,
+        text: item.text,
+        x,
+        y,
+      }
+    })
+    .filter(falsy)
+    .sort((a, b) => {
+      const centerA = calculateCenterPoint(a.rect)
+      const centerB = calculateCenterPoint(b.rect)
+
+      const angleA = Math.atan2(
+        centerA.y - viewportCenter.value.y,
+        centerA.x - viewportCenter.value.x,
+      )
+      const angleB = Math.atan2(
+        centerB.y - viewportCenter.value.y,
+        centerB.x - viewportCenter.value.x,
+      )
+
+      return angleA - angleB
+    }),
+)
+
+const activeItem = computed(() => items.value[activeIndex.value])
+
+const prev = () => {
+  activeIndex.value = modulo(activeIndex.value - 1, items.value.length)
+}
+
+const next = () => {
+  activeIndex.value = modulo(activeIndex.value + 1, items.value.length)
+}
+
+const getIdealPosition = (rect: DOMRect): ItemPosition => {
+  if (rect.y < 20) {
+    return 'bottom'
+  } else if (
+    rect.y >
+    ui.visibleViewportPadded.value.y + ui.visibleViewportPadded.value.height
+  ) {
+    return 'top'
+  }
+
+  // Calculate available space around the element
+  const availableSpace: Record<ItemPosition, number> = {
+    top: rect.top,
+    bottom: ui.visibleViewportPadded.value.height - rect.bottom,
+    left: rect.left,
+    right: ui.viewport.value.width - rect.right,
+  }
+
+  // Determine the best position for the tooltip
+  const sortedSpaces = (
+    Object.entries(availableSpace) as [ItemPosition, number][]
+  ).sort((a, b) => b[1] - a[1])
+
+  return sortedSpaces[0][0]
+}
+
+function calculatePosition(rect: DOMRect): {
+  x: number
+  y: number
+  position: ItemPosition
+} {
+  const position = getIdealPosition(rect)
+
+  switch (position) {
+    case 'top':
+      return {
+        position,
+        y: ui.viewport.value.height,
+        x: rect.x + rect.width / 2,
+      }
+    case 'bottom':
+      return {
+        position,
+        x: rect.x + rect.width / 2,
+        y: rect.bottom,
+      }
+    case 'left':
+      return {
+        position,
+        y: rect.y + rect.height / 2,
+        x: rect.x,
+      }
+  }
+
+  return {
+    position,
+    x: rect.right + 20,
+    y: Math.max(rect.top, 70),
+  }
+}
+
+onBlokkliEvent('keyPressed', (e) => {
+  if (e.code === 'Tab') {
+    e.originalEvent.preventDefault()
+    if (e.shift) {
+      prev()
+    } else {
+      next()
+    }
+  } else if (e.code === 'Escape') {
+    e.originalEvent.preventDefault()
+    emit('close')
+  } else if (e.code === 'ArrowLeft') {
+    e.originalEvent.preventDefault()
+    prev()
+  } else if (e.code === 'ArrowRight') {
+    e.originalEvent.preventDefault()
+    next()
+  }
+})
+
+useAnimationFrame(() => {
+  if (!contentEl.value) {
+    return
+  }
+
+  tooltipHeight.value = contentEl.value.scrollHeight + 50
+})
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <Teleport to="body">
+    <ViewportBlockingRect id="tour-popup" class="bk bk-tour-popup">
+      <div class="bk-tour-popup-title">
+        <h2>{{ $t('tourLabel', 'Take a tour') }}</h2>
+        <button class="bk-tour-popup-close" @click="$emit('close')">
+          <Icon name="close" />
+        </button>
+      </div>
+
+      <div class="bk-tour-popup-content">
+        <p>
+          {{
+            $t(
+              'tourIntro',
+              'Explore the most important features of the editor and learn how to get started using blökkli.',
+            )
+          }}
+        </p>
+
+        <button class="bk-button" @click="$emit('start')">
+          {{ $t('tourStartButton', 'Start the tour') }}
+        </button>
+      </div>
+    </ViewportBlockingRect>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { Icon, ViewportBlockingRect } from '#blokkli/components'
+import { useBlokkli } from '#imports'
+
+const { $t } = useBlokkli()
+
+defineEmits(['start', 'close'])
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <Overlay v-if="tour.isTouring.value" @close="close" />
+  <PluginMenuButton
+    id="tour"
+    :title="$t('tourLabel', 'Take a tour')"
+    :description="$t('tourDescription', 'Explore the features of the editor')"
+    icon="tutor"
+    secondary
+    :weight="-10"
+    @click="start"
+  />
+  <Popup v-if="showTourPopup" @close="close" @start="start" />
+</template>
+
+<script lang="ts" setup>
+import { defineBlokkliFeature, useBlokkli } from '#imports'
+import Overlay from './Overlay/index.vue'
+import { PluginMenuButton } from '#blokkli/plugins'
+import Popup from './Popup/index.vue'
+
+defineBlokkliFeature({
+  id: 'tour',
+  label: 'Tour',
+  icon: 'tutor',
+  description: 'Provides a tour overlay to get to know the editor.',
+})
+
+const { tour, $t, storage } = useBlokkli()
+
+const showTourPopup = storage.use('showTourPopup', true)
+
+const start = () => {
+  showTourPopup.value = false
+  tour.isTouring.value = true
+}
+const close = () => {
+  showTourPopup.value = false
+  tour.isTouring.value = false
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Tour',
+}
+</script>