@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/editor/features/clipboard/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/clipboard/types.d.ts

@@ -0,0 +1,99 @@
+import type { BlokkliItemHost } from '#blokkli/editor/types/field';
+import type getVideoId from 'get-video-id';
+export type AddClipboardItemEvent = {
+    item: BlokkliClipboardItem;
+    blockBundle: string;
+    host: BlokkliItemHost;
+    afterUuid: string | null;
+};
+interface ClipboardItemText {
+    type: 'text';
+    id: string;
+    itemBundle: string;
+    data: string;
+    additional?: string;
+}
+export interface ClipboardItemVideo {
+    type: 'video';
+    id: string;
+    itemBundle: string;
+    data: string;
+    additional?: string;
+    videoService: ReturnType<typeof getVideoId>['service'];
+    videoId: string;
+}
+interface ClipboardItemImage {
+    type: 'image';
+    id: string;
+    itemBundle: string;
+    data: string;
+    additional: string;
+    fileName: string;
+    fileSize: number;
+    fileType: string;
+}
+export interface ClipboardItemFile {
+    type: 'file';
+    id: string;
+    itemBundle: string;
+    data: string;
+    additional: string;
+    fileName: string;
+    fileSize: number;
+    fileType: string;
+}
+export type BlokkliClipboardItem = ClipboardItemText | ClipboardItemVideo | ClipboardItemImage | ClipboardItemFile;
+export type PasteExistingBlocksEvent = {
+    uuids: string[];
+    host: BlokkliItemHost;
+    preceedingUuid: string | null;
+};
+export type ClipboardMapBundleEventPlaintext = {
+    type: 'plaintext';
+    text: string;
+};
+export type ClipboardMapBundleEventImage = {
+    type: 'image';
+    fileType: string;
+    fileSize: number;
+};
+export type ClipboardMapBundleEventFile = {
+    type: 'file';
+    fileType: string;
+    fileSize: number;
+};
+export type ClipboardMapBundleEventVideo = {
+    type: 'video';
+    videoService: ReturnType<typeof getVideoId>['service'];
+    videoId: string;
+};
+export type ClipboardMapBundleEvent = ClipboardMapBundleEventVideo | ClipboardMapBundleEventImage | ClipboardMapBundleEventFile | ClipboardMapBundleEventPlaintext;
+export interface DraggableClipboardItem {
+    itemType: 'clipboard';
+    element: () => HTMLElement;
+    itemBundle: string;
+    additional?: string;
+    clipboardId: string;
+}
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Determine the block bundle for the given clipboard item.
+         */
+        clipboardMapBundle?(e: ClipboardMapBundleEvent): string | undefined | null;
+        /**
+         * Add a clipboard item.
+         */
+        addBlockFromClipboardItem?(e: AddClipboardItemEvent): Promise<MutationResponseLike<T>> | undefined;
+        /**
+         * Paste existing blocks.
+         */
+        pasteExistingBlocks?(e: PasteExistingBlocksEvent): Promise<MutationResponseLike<T>>;
+    }
+}
+declare module '#blokkli/editor/types/draggable' {
+    interface DraggableItemTypes {
+        clipboard: DraggableClipboardItem;
+    }
+}
+export {};

package/dist/runtime/editor/features/command-palette/Palette/Item/index.d.vue.ts

@@ -0,0 +1,20 @@
+import type { Command } from '../../types.js';
+export type MappedCommandItem = Command & {
+    positions?: number[];
+    score?: number;
+    visible?: boolean;
+};
+type __VLS_Props = {
+    item: MappedCommandItem;
+    index: number;
+    isFocused: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    focus: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onFocus?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/command-palette/Palette/Item/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <button
+    ref="buttonEl"
+    class="bk-command"
+    :class="{ 'bk-is-focused': isFocused }"
+    @mouseenter="$emit('focus', index)"
+    @click.prevent="$emit('select', item.id)"
+  >
+    <div class="bk-command-icon">
+      <Icon v-if="item.icon" :name="item.icon" />
+      <ItemIcon v-else :bundle="item.bundle" />
+    </div>
+    <Highlight :text="item.label" tag="span" :positions="item.positions" />
+    <div class="bk-command-group">{{ getGroupLabel(item.group) }}</div>
+  </button>
+</template>
+
+<script setup>
+import { watch, useBlokkli, useTemplateRef } from "#imports";
+import { Icon, ItemIcon, Highlight } from "#blokkli/editor/components";
+const props = defineProps({
+  item: { type: Object, required: true },
+  index: { type: Number, required: true },
+  isFocused: { type: Boolean, required: true }
+});
+defineEmits(["focus", "select"]);
+const { $t } = useBlokkli();
+const buttonEl = useTemplateRef("buttonEl");
+watch(
+  () => props.isFocused,
+  (focused) => {
+    if (focused && buttonEl.value) {
+      buttonEl.value.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+  }
+);
+const getGroupLabel = (id) => {
+  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");
+  }
+  return $t("commandGroup.misc", "Miscellaneous");
+};
+</script>

package/dist/runtime/editor/features/command-palette/Palette/Item/index.vue.d.ts

@@ -0,0 +1,20 @@
+import type { Command } from '../../types.js';
+export type MappedCommandItem = Command & {
+    positions?: number[];
+    score?: number;
+    visible?: boolean;
+};
+type __VLS_Props = {
+    item: MappedCommandItem;
+    index: number;
+    isFocused: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    focus: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onFocus?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/command-palette/Palette/index.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/command-palette/Palette/index.vue

@@ -0,0 +1,229 @@
+<template>
+  <ScrollBoundary
+    class="bk-command-palette bk-control"
+    @keydown="onKeyDown"
+    @keyup.stop
+    @click.stop
+    @mousemove.once="hasUsedMouse = true"
+  >
+    <div class="bk-command-palette-input">
+      <Icon name="bk_mdi_keyboard_command_key" />
+      <input
+        ref="inputEl"
+        v-model="text"
+        type="text"
+        :placeholder="
+  $t('commandPalette.inputPlaceholder', 'Search commands...')
+"
+      />
+    </div>
+    <div class="bk-command-palette-results bk-scrollbar-dark">
+      <div class="bk-command-palette-results-list">
+        <div>
+          <Item
+            v-for="item in allCommands"
+            v-show="item.visible"
+            :key="item.id"
+            :item="item"
+            :index="getVisibleIndex(item.id)"
+            :is-focused="focusedIndex === getVisibleIndex(item.id)"
+            @focus="onFocus"
+            @select="onSelect"
+          />
+        </div>
+      </div>
+    </div>
+  </ScrollBoundary>
+</template>
+
+<script setup>
+import {
+  computed,
+  onMounted,
+  ref,
+  useBlokkli,
+  watch,
+  nextTick,
+  onBeforeUnmount,
+  useTemplateRef
+} from "#imports";
+import { Icon, ScrollBoundary } from "#blokkli/editor/components";
+import { Fzf } from "fzf";
+import { modulo } from "#blokkli/editor/helpers/math";
+import Item, {} from "./Item/index.vue";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const emit = defineEmits(["close"]);
+const { commands, $t, selection, plugins, storage } = useBlokkli();
+const frequency = storage.use(
+  "commandPaletteFrequency",
+  {}
+);
+function incrementFrequency(id) {
+  const currentCount = frequency.value[id] ?? 0;
+  frequency.value = {
+    ...frequency.value,
+    [id]: currentCount + 1
+  };
+}
+const inputEl = useTemplateRef("inputEl");
+const text = ref("");
+const focusedIndex = ref(0);
+const hasUsedMouse = ref(false);
+function onFocus(index) {
+  if (!hasUsedMouse.value) {
+    return;
+  }
+  focusedIndex.value = index;
+}
+const items = computed(() => {
+  return [
+    ...commands.getCommands(),
+    ...plugins.get("menuButton").map((plugin) => {
+      return {
+        id: "menu-button:" + plugin.id,
+        label: plugin.title,
+        group: "action",
+        icon: plugin.icon,
+        disabled: plugin.disabled,
+        callback: plugin.callback
+      };
+    })
+  ].filter((v) => !v.disabled).map((doc, index) => {
+    return {
+      ...doc,
+      _id: index,
+      visible: true
+    };
+  }).sort((a, b) => {
+    const freqA = frequency.value[a.id] ?? 0;
+    const freqB = frequency.value[b.id] ?? 0;
+    return freqB - freqA;
+  });
+});
+const fzf = new Fzf(items.value, {
+  selector: (item) => item.label
+});
+const visibleIds = computed(() => {
+  if (!text.value) {
+    return void 0;
+  }
+  const results = fzf.find(text.value);
+  return results.map((v) => {
+    return {
+      id: v.item._id,
+      positions: [...v.positions],
+      score: v.score
+    };
+  });
+});
+const allCommands = computed(() => {
+  if (!text.value) {
+    return items.value;
+  }
+  return items.value.map((v) => {
+    const found = visibleIds.value?.find((w) => w.id === v._id);
+    return {
+      ...v,
+      visible: visibleIds.value === void 0 || !!found,
+      positions: found?.positions,
+      score: found?.score ?? 0
+    };
+  }).sort((a, b) => {
+    const scoreDiff = b.score - a.score;
+    if (scoreDiff !== 0) {
+      return scoreDiff;
+    }
+    const freqA = frequency.value[a.id] ?? 0;
+    const freqB = frequency.value[b.id] ?? 0;
+    return freqB - freqA;
+  });
+});
+const visibleCommands = computed(() => {
+  return allCommands.value.filter((v) => v.visible !== false);
+});
+const getVisibleIndex = (id) => {
+  return visibleCommands.value.findIndex((v) => v.id === id);
+};
+watch(text, () => {
+  nextTick(() => {
+    focusFirst();
+  });
+});
+watch(selection.uuids, () => emit("close"));
+const focusFirst = () => {
+  focusedIndex.value = 0;
+};
+const focusPrev = () => {
+  if (visibleCommands.value.length === 0) {
+    return;
+  }
+  focusedIndex.value = modulo(
+    focusedIndex.value - 1,
+    visibleCommands.value.length
+  );
+};
+const focusNext = () => {
+  if (visibleCommands.value.length === 0) {
+    return;
+  }
+  focusedIndex.value = modulo(
+    focusedIndex.value + 1,
+    visibleCommands.value.length
+  );
+};
+const onSelect = (id) => {
+  const command = items.value.find((v) => v.id === id);
+  if (command) {
+    incrementFrequency(id);
+    command.callback();
+    emit("close");
+  }
+};
+const onKeyDown = (e) => {
+  e.stopPropagation();
+  if (e.code === "KeyK" && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    emit("close");
+    return;
+  }
+  if (e.code === "Tab") {
+    e.preventDefault();
+    if (e.shiftKey) {
+      focusPrev();
+    } else {
+      focusNext();
+    }
+  } else if (e.code === "ArrowDown" || e.code === "KeyJ" && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    focusNext();
+  } else if (e.code === "ArrowUp") {
+    e.preventDefault();
+    focusPrev();
+  } else if (e.code === "Enter") {
+    e.preventDefault();
+    const command = visibleCommands.value[focusedIndex.value];
+    if (command) {
+      onSelect(command.id);
+    }
+  } else if (e.code === "Escape") {
+    e.preventDefault();
+    emit("close");
+  }
+};
+const onWindowClick = () => {
+  emit("close");
+};
+onBlokkliEvent("overlay:close", () => {
+  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/editor/features/command-palette/Palette/index.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/command-palette/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/command-palette/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <div class="bk">
+      <BlokkliTransition name="command-palette">
+        <Palette v-if="isVisible" @close="isVisible = false" />
+      </BlokkliTransition>
+    </div>
+  </Teleport>
+
+  <PluginToolbarButton
+    id="command_palette"
+    :title="label"
+    meta
+    key-code="K"
+    no-command
+    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="bk_mdi_keyboard_command_key"
+    @click="isVisible = !isVisible"
+  />
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import { PluginToolbarButton } from "#blokkli/editor/plugins";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import Palette from "./Palette/index.vue";
+import { onBlokkliEvent, useDialog } from "#blokkli/editor/composables";
+defineBlokkliFeature({
+  id: "command-palette",
+  icon: "bk_mdi_keyboard_command_key",
+  label: "Command Palette",
+  description: "Provides a command palette with search to access most UI features with a keyboard.",
+  viewports: ["desktop"]
+});
+const { $t, ui } = useBlokkli();
+const isVisible = useDialog("command-palette", "center");
+const label = computed(() => $t("commandPaletteOpen", "Open Command Palette"));
+onBlokkliEvent("window:clickAway", () => isVisible.value = false);
+</script>
+
+<script>
+export default {
+  name: "CommandPalette"
+};
+</script>

package/dist/runtime/editor/features/command-palette/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/command-palette/types.d.ts

@@ -0,0 +1,11 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+export type CommandGroup = 'ui' | 'selection' | 'add' | 'action' | 'misc' | 'options';
+export type Command = {
+    id: string;
+    label: string;
+    group?: CommandGroup;
+    icon?: BlokkliIcon;
+    bundle?: string;
+    disabled?: boolean;
+    callback: () => any;
+};

package/dist/runtime/editor/features/comments/AddForm/index.d.vue.ts

@@ -0,0 +1,11 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    getComment: () => string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    add: (comment: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onAdd?: ((comment: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/comments/AddForm/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <ArtboardTooltip
+    id="add-comment"
+    :title="$t('addCommentHeader', 'Add Comment')"
+    class="bk-add-comment"
+    @close="$emit('close')"
+  >
+    <div class="bk-add-comment-inner" @keydown.capture.stop>
+      <CommentInput id="comment_body" v-model="comment" />
+      <footer>
+        <button
+          :disabled="!comment"
+          class="bk-button bk-is-warning"
+          @click.prevent="onAdd"
+        >
+          {{ $t("commentSave", "Submit comment") }}
+        </button>
+      </footer>
+    </div>
+  </ArtboardTooltip>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+import { ArtboardTooltip } from "#blokkli/editor/components";
+import CommentInput from "./../CommentInput/index.vue";
+const emit = defineEmits(["add", "close"]);
+const { $t, ui, storage } = useBlokkli();
+const comment = storage.useWithContextPrefix("commentAddText", "");
+const getComment = () => {
+  return comment.value;
+};
+function onAdd() {
+  emit("add", comment.value);
+  comment.value = "";
+}
+defineExpose({ getComment });
+onMounted(() => {
+  ui.setSelectionColor("add-comment", "yellow");
+});
+onBeforeUnmount(() => {
+  ui.removeSelectionColor("add-comment");
+});
+</script>

package/dist/runtime/editor/features/comments/AddForm/index.vue.d.ts

@@ -0,0 +1,11 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    getComment: () => string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    add: (comment: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onAdd?: ((comment: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/comments/Comment/index.d.vue.ts

@@ -0,0 +1,24 @@
+import type { CommentItem } from '../types.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    uuid?: string | number;
+    blockUuids?: string[];
+    resolved?: boolean;
+    body?: string;
+    created?: CommentItem["created"];
+    user?: CommentItem["user"];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resolve: () => void;
+    clickComment: () => void;
+}, string, import("vue").PublicProps, Readonly<{
+    uuid?: string | number;
+    blockUuids?: string[];
+    resolved?: boolean;
+    body?: string;
+    created?: CommentItem["created"];
+    user?: CommentItem["user"];
+}> & Readonly<{
+    onResolve?: (() => any) | undefined;
+    onClickComment?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/comments/Comment/index.vue

@@ -0,0 +1,45 @@
+<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="bk_mdi_check" />
+      <span>{{ $t("commentsMarkAsResolved", "Resolve") }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon, RelativeTime } from "#blokkli/editor/components";
+const { adapter, $t } = useBlokkli();
+const resolveImplemeted = computed(() => !!adapter.resolveComment);
+defineEmits(["resolve", "clickComment"]);
+const props = defineProps({
+  uuid: { type: [String, Number], required: false },
+  blockUuids: { type: Array, required: false },
+  resolved: { type: Boolean, required: false },
+  body: { type: String, required: false },
+  created: { type: [String, Number], required: false },
+  user: { type: Object, required: false }
+});
+const timestamp = computed(
+  () => props.created ? Number.parseInt(props.created.toString()) : 0
+);
+</script>
+
+<script>
+export default {
+  name: "Comment"
+};
+</script>