@blokkli/editor 1.0.0

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

@@ -0,0 +1,280 @@
+<template>
+  <div
+    class="bk-command-palette bk-control"
+    @wheel.passive.stop
+    @keydown.stop="onKeyDown"
+    @keyup.stop
+    @click.stop
+  >
+    <div class="bk-command-palette-input">
+      <Icon name="command" />
+      <input
+        ref="inputEl"
+        v-model="text"
+        type="text"
+        :placeholder="
+          $t('commandPalette.inputPlaceholder', 'Search commands...')
+        "
+      />
+    </div>
+    <div class="bk-command-palette-results bk-scrollbar-dark">
+      <Group
+        v-for="group in groups"
+        :key="group.id"
+        :label="group.label"
+        :commands="group.commands"
+        :visible-ids="visibleIds"
+        :focused-id="focusedId"
+        @close="$emit('close')"
+        @focus="focusedId = $event"
+        @select="onSelect($event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  onMounted,
+  ref,
+  useBlokkli,
+  watch,
+  nextTick,
+  onBeforeUnmount,
+} from '#imports'
+import { Icon } from '#blokkli/components'
+import type { Command, CommandGroup } from '#blokkli/types'
+import Group from './Group/index.vue'
+import { falsy } from '#blokkli/helpers'
+import { Fzf } from 'fzf'
+
+const { commands, $t, selection } = useBlokkli()
+
+const emit = defineEmits(['close'])
+
+const inputEl = ref<HTMLInputElement | null>(null)
+const text = ref('')
+const focusedId = ref('')
+
+type GroupedCommands = {
+  id: CommandGroup
+  label: string
+  commands: Array<Command & { _id: number }>
+}
+
+const getGroupLabel = (id: CommandGroup): string => {
+  if (id === 'ui') {
+    return $t('commandGroup.ui', 'Interface')
+  } else if (id === 'add') {
+    return $t('commandGroup.add', 'Add new')
+  } else if (id === 'action') {
+    return $t('commandGroup.action', 'Actions')
+  } else if (id === 'selection') {
+    return $t('commandGroup.selection', 'Selection')
+  } else if (id === 'misc') {
+    return $t('commandGroup.misc', 'Miscellaneous')
+  }
+
+  return id
+}
+
+const groupOrder = computed<CommandGroup[]>(() => {
+  // When blocks are selected, the block actions should be first.
+  if (selection.uuids.value.length) {
+    return ['selection', 'add']
+  }
+  return ['add']
+})
+
+const items = computed<Array<Command & { _id: number }>>(() =>
+  commands
+    .getCommands()
+    .filter((v) => !v.disabled)
+    .map((doc, index) => {
+      return {
+        ...doc,
+        _id: index,
+      }
+    }),
+)
+
+const fzf = new Fzf(items.value, {
+  // With selector you tell FZF where it can find
+  // the string that you want to query on
+  selector: (item) => item.label,
+})
+
+const visibleIds = computed<{ id: number; positions: number[] }[] | undefined>(
+  () => {
+    if (!text.value) {
+      return undefined
+    }
+
+    const results = fzf.find(text.value)
+    return results.map((v) => {
+      return {
+        id: v.item._id,
+        positions: [...v.positions],
+      }
+    })
+  },
+)
+
+const groups = computed<GroupedCommands[]>(() => {
+  return Object.values(
+    items.value.reduce<Record<string, GroupedCommands>>((acc, command) => {
+      const group = command.group || 'misc'
+      if (!acc[group]) {
+        acc[group] = {
+          id: group,
+          label: getGroupLabel(group),
+          commands: [],
+        }
+      }
+
+      acc[group].commands.push(command)
+      return acc
+    }, {}),
+  ).sort((a, b) => {
+    const indexA = groupOrder.value.indexOf(a.id)
+    const indexB = groupOrder.value.indexOf(b.id)
+
+    if (indexA === -1 && indexB === -1) {
+      return 0
+    } else if (indexA === -1) {
+      return 1
+    } else if (indexB === -1) {
+      return -1
+    }
+
+    return indexA - indexB
+  })
+})
+
+watch(text, () => {
+  nextTick(() => {
+    focusFirst()
+  })
+})
+
+watch(selection.uuids, () => emit('close'))
+
+const focusFirst = () => {
+  const element = document.querySelector(
+    '.bk-command-palette .bk-command[data-command-visible="true"]',
+  )
+  if (element instanceof HTMLElement) {
+    focusedId.value = element.dataset.commandId || ''
+  }
+}
+
+const getCommandElements = () => {
+  return [
+    ...document.querySelectorAll(
+      '.bk-command-palette .bk-command[data-command-visible="true"]',
+    ),
+  ]
+    .map((el) => {
+      if (el instanceof HTMLElement) {
+        const id = el.dataset.commandId
+        if (id) {
+          return {
+            id,
+            el,
+            focused: focusedId.value === id,
+          }
+        }
+      }
+    })
+    .filter(falsy)
+}
+
+const focusPrev = () => {
+  const elements = getCommandElements()
+  if (elements.length === -1) {
+    return
+  }
+  const focusedIndex = elements.findIndex((v) => v.focused)
+  // None or first is focused.
+  if (focusedIndex <= 0) {
+    // Focus last element.
+    focusedId.value = elements[elements.length - 1].id
+  } else {
+    focusedId.value = elements[focusedIndex - 1].id
+  }
+  scrollFocusedIntoView()
+}
+
+const focusNext = () => {
+  const elements = getCommandElements()
+  if (elements.length === -1) {
+    return
+  }
+  const focusedIndex = elements.findIndex((v) => v.focused)
+  // None or last is focused.
+  if (focusedIndex === -1 || focusedIndex === elements.length - 1) {
+    // Focus last element.
+    focusedId.value = elements[0].id
+  } else {
+    focusedId.value = elements[focusedIndex + 1].id
+  }
+
+  scrollFocusedIntoView()
+}
+
+const scrollFocusedIntoView = () => {
+  const element = getCommandElements().find((v) => v.focused)?.el
+  if (element) {
+    element.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }
+}
+
+const onSelect = (id: string) => {
+  const command = items.value.find((v) => v.id === id)
+  if (command) {
+    command.callback()
+    emit('close')
+  }
+}
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if (e.code === 'Tab') {
+    e.preventDefault()
+    if (e.shiftKey) {
+      focusPrev()
+    } else {
+      focusNext()
+    }
+  } else if (e.code === 'ArrowDown') {
+    e.preventDefault()
+    focusNext()
+  } else if (e.code === 'ArrowUp') {
+    e.preventDefault()
+    focusPrev()
+  } else if (e.code === 'Enter') {
+    e.preventDefault()
+    onSelect(focusedId.value)
+  } else if (e.code === 'Escape') {
+    e.preventDefault()
+    emit('close')
+  }
+}
+
+const onWindowClick = () => {
+  emit('close')
+}
+
+onMounted(() => {
+  if (inputEl.value) {
+    inputEl.value.focus()
+    focusFirst()
+  }
+
+  document.body.addEventListener('click', onWindowClick)
+})
+
+onBeforeUnmount(() => {
+  document.body.removeEventListener('click', onWindowClick)
+})
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <Teleport to="body">
+    <div class="bk">
+      <Transition name="bk-command-palette">
+        <Palette v-if="isVisible" @close="isVisible = false" />
+      </Transition>
+    </div>
+  </Teleport>
+  <PluginToolbarButton
+    id="command_palette"
+    :title="label"
+    meta
+    key-code="K"
+    region="before-sidebar"
+    :tour-text="
+      $t(
+        'commandPaletteTourText',
+        'Easily perform actions using your keyboard by launching the command palette. Most of the features available using clicks is also available in the command palette.',
+      )
+    "
+    icon="command"
+    @click="isVisible = true"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature, ref, computed } from '#imports'
+import { PluginToolbarButton } from '#blokkli/plugins'
+import Palette from './Palette/index.vue'
+
+defineBlokkliFeature({
+  id: 'command-palette',
+  icon: 'command',
+  label: 'Command Palette',
+  description:
+    'Provides a command palette with search to access most UI features with a keyboard.',
+  viewports: ['desktop'],
+})
+
+const { $t } = useBlokkli()
+
+const isVisible = ref(false)
+
+const label = computed(() => $t('commandPaletteOpen', 'Open Command Palette'))
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CommandPalette',
+}
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="bk-blokkli-item-actions-comment-dropdown" @keydown.capture.stop>
+    <label for="comment_body" class="bk-form-label">{{
+      $t('commentBody', 'Comment')
+    }}</label>
+    <textarea
+      id="comment_body"
+      v-model="comment"
+      type="text"
+      class="bk-form-input"
+      rows="5"
+      required
+    />
+    <button class="bk-button bk-is-primary" @click="$emit('add', comment)">
+      {{ $t('commentSave', 'Submit comment') }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, useBlokkli } from '#imports'
+
+const comment = ref('')
+defineEmits(['add'])
+const { $t } = useBlokkli()
+
+const getComment = (): string => {
+  return comment.value
+}
+
+defineExpose({ getComment })
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="bk bk-comment" @click="$emit('clickComment')">
+    <h3>
+      {{ user?.label }}
+    </h3>
+    <RelativeTime v-slot="{ formatted }" :timestamp="timestamp">
+      <div class="bk-comment-date">
+        {{ formatted }}
+      </div>
+    </RelativeTime>
+    <div class="bk-comment-body" v-html="body" />
+    <button
+      v-if="!resolved && resolveImplemeted"
+      @click.capture.stop="$emit('resolve')"
+    >
+      <Icon name="check" />
+      <span>{{ $t('commentsMarkAsResolved', 'Resolve') }}</span>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useBlokkli } from '#imports'
+import type { CommentItem } from '#blokkli/types'
+import { Icon, RelativeTime } from '#blokkli/components'
+
+const { adapter, $t } = useBlokkli()
+
+const resolveImplemeted = computed(() => !!adapter.resolveComment)
+
+defineEmits<{
+  (e: 'resolve' | 'clickComment'): void
+}>()
+
+const props = defineProps<{
+  uuid?: string | number
+  blockUuids?: string[]
+  resolved?: boolean
+  body?: string
+  created?: CommentItem['created']
+  user?: CommentItem['user']
+}>()
+
+const timestamp = computed(() =>
+  props.created ? Number.parseInt(props.created.toString()) : 0,
+)
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Comment',
+}
+</script>

package/dist/runtime/components/Edit/Features/Comments/Overlay/Item/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="bk-comments-overlay-item"
+    :style="style"
+    :class="{
+      'bk-is-active': showComments,
+      'bk-is-left': isLeft,
+      'bk-is-right': !isLeft,
+    }"
+  >
+    <button
+      class="bk-comments-overlay-item-button"
+      :class="{
+        'bk-has-unresolved-comments': unresolvedCount > 0,
+      }"
+      @click="$emit('toggle')"
+    >
+      <Icon v-if="showComments" name="close" />
+      <span v-else>{{ unresolvedCount }}</span>
+    </button>
+    <div
+      v-show="showComments"
+      class="bk-comments-overlay-comments"
+      :class="{ 'bk-is-left': isLeft, 'bk-is-right': !isLeft }"
+    >
+      <div class="bk-comments-overlay-comments-header">
+        <Icon name="comment" />
+        <span
+          >{{ comments.length }}
+          {{
+            comments.length === 1
+              ? $t('singleComment', 'comment')
+              : $t('comments', 'Comments')
+          }}</span
+        >
+      </div>
+      <div v-for="comment in comments" :key="comment.uuid">
+        <Comment v-bind="comment" @resolve="resolveComment(comment.uuid)" />
+      </div>
+      <div class="bk-comments-overlay-form" @keydown.capture.stop>
+        <textarea
+          v-model="commentText"
+          type="text"
+          class="bk-form-input"
+          :placeholder="$t('commentBodyPlaceholder', 'Add reply')"
+          required
+          @focus="showFullForm = true"
+        />
+        <button
+          v-if="showFullForm && commentText"
+          class="bk-button bk-is-primary bk-is-small"
+          @click="addComment"
+        >
+          {{ $t('commentAdd', 'Add comment') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, useBlokkli } from '#imports'
+import type { CommentItem } from '#blokkli/types'
+import { Icon } from '#blokkli/components'
+import Comment from './../../Comment/index.vue'
+
+const { $t } = useBlokkli()
+
+const commentText = ref('')
+const showFullForm = ref(false)
+const emit = defineEmits<{
+  (e: 'toggle'): void
+  (e: 'addComment' | 'resolveComment', text: string): void
+}>()
+
+const props = defineProps<{
+  isReduced: boolean
+  isLeft: boolean
+  uuids: string[]
+  comments: CommentItem[]
+  style: any
+  showComments: boolean
+}>()
+
+const unresolvedCount = computed(
+  () => props.comments.filter((v) => !v.resolved).length,
+)
+
+function addComment() {
+  emit('addComment', commentText.value)
+  showFullForm.value = false
+  commentText.value = ''
+}
+
+function resolveComment(uuid: string | undefined) {
+  if (uuid) {
+    emit('resolveComment', uuid)
+  }
+}
+</script>

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

@@ -0,0 +1,133 @@
+<template>
+  <Teleport to="body">
+    <div class="bk bk-comments-overlay bk-control">
+      <Item
+        v-for="item in indicators"
+        :key="item.id"
+        v-bind="item"
+        :is-reduced="isReduced"
+        :is-left="isLeft"
+        :show-comments="active === item.id"
+        @toggle="toggle(item)"
+        @add-comment="$emit('addComment', { body: $event, uuids: item.uuids })"
+        @resolve-comment="$emit('resolveComment', $event)"
+      />
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, useBlokkli } from '#imports'
+import type { CommentItem } from '#blokkli/types'
+import { falsy, getBounds } from '#blokkli/helpers'
+import Item from './Item/index.vue'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+type Indicator = {
+  id: string
+  comments: CommentItem[]
+  uuids: string[]
+  style: {
+    transform: string
+  }
+}
+
+const { eventBus, ui, dom } = useBlokkli()
+
+const props = defineProps<{
+  comments: CommentItem[]
+}>()
+
+defineEmits<{
+  (e: 'addComment', data: { uuids: string[]; body: string }): void
+  (e: 'resolveComment', uuid: string): void
+}>()
+
+const isReduced = ref(false)
+const isLeft = ref(false)
+const active = ref('')
+
+function toggle(item: Indicator) {
+  if (active.value === item.id) {
+    active.value = ''
+    eventBus.emit('select:end', [])
+  } else {
+    active.value = item.id
+    eventBus.emit('select:end', item.uuids)
+  }
+}
+
+const indicators = ref<Indicator[]>([])
+
+onBlokkliEvent('canvas:draw', (e) => {
+  const scale = e.artboardScale
+  const offset = e.artboardOffset
+
+  const x = Math.min(
+    offset.x + ui.artboardSize.value.width * scale + 10,
+    ui.visibleViewportPadded.value.x +
+      ui.visibleViewportPadded.value.width -
+      30,
+  )
+  isReduced.value = scale < 0.8
+  isLeft.value =
+    x + 300 <
+    ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width
+
+  const newIndicators: Record<string, Indicator> = {}
+  const yMap = new Set<number>()
+
+  const findY = (y: number): number => {
+    if (yMap.has(y)) {
+      return findY(y + 60)
+    }
+    yMap.add(y)
+    return y
+  }
+
+  for (let i = 0; i < props.comments.length; i++) {
+    const comment = props.comments[i]
+    const uuids = comment.blockUuids || []
+    const rects = uuids
+      .filter(falsy)
+      .map((uuid) => {
+        const blockRect = dom.getBlockRect(uuid)
+        if (!blockRect) {
+          return
+        }
+
+        const rect = ui.getViewportRelativeRect(blockRect)
+
+        return {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+          uuid,
+        }
+      })
+      .filter(falsy)
+    if (rects.length) {
+      const bounds = getBounds(rects)
+      const id = uuids.join(',')
+      if (bounds && !newIndicators[id]) {
+        const y = findY(Math.round(bounds.y))
+        newIndicators[id] = {
+          id,
+          comments: [],
+          uuids,
+          style: {
+            // @TODO: Because the --bk-artboard-scale CSS variable was
+            // removed, the comment box now scaled with the artboard.
+            // This should be fixed by not positioning the box inside the
+            // artboard element so it does not scale.
+            transform: `translate(${x}px, ${y}px)`,
+          },
+        }
+      }
+      newIndicators[id].comments.push(comment)
+    }
+  }
+  indicators.value = Object.values(newIndicators)
+})
+</script>

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

@@ -0,0 +1,13 @@
+## Sidebar
+
+The sidebar pane renders a list of all comments on the current page.
+
+## Overlay
+
+The overlay renders comments next to the blocks. Unresolved comments are
+highlighted.
+
+## Action
+
+The action is added to the block actions overlay on selected blocks. Clicking
+the action opens a dropdown to add a new comment.