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

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

@@ -1,229 +0,0 @@
-<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="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">
-      <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/components";
-import { Fzf } from "fzf";
-import { modulo } from "#blokkli/helpers";
-import Item, {} from "./Item/index.vue";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-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/components/Edit/Features/CommandPalette/Palette/index.vue.d.ts

@@ -1,6 +0,0 @@
-declare const _default: 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>;
-export default _default;

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

@@ -1,52 +0,0 @@
-<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="command"
-    @click="isVisible = !isVisible"
-  />
-</template>
-
-<script setup>
-import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import { PluginToolbarButton } from "#blokkli/plugins";
-import { BlokkliTransition } from "#blokkli/components";
-import Palette from "./Palette/index.vue";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useDialog } from "#blokkli/helpers/composables/useDialog";
-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, 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/components/Edit/Features/CommandPalette/index.vue.d.ts

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

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

@@ -1,44 +0,0 @@
-<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/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/components/Edit/Features/Comments/AddForm/index.vue.d.ts

@@ -1,10 +0,0 @@
-declare const _default: 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>;
-export default _default;

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

@@ -1,45 +0,0 @@
-<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 setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon, RelativeTime } from "#blokkli/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>

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

@@ -1,23 +0,0 @@
-import type { CommentItem } from '#blokkli/types';
-declare const _default: 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>;
-export default _default;

package/dist/runtime/components/Edit/Features/Comments/CommentInput/index.vue.d.ts

@@ -1,13 +0,0 @@
-type __VLS_Props = {
-    id: string;
-    placeholder?: string;
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,94 +0,0 @@
-<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.prevent="$emit('toggle')"
-      @pointerdown.prevent.stop
-      @pointerup.prevent.stop
-      @pointermove.prevent.stop
-    >
-      <Icon v-if="showComments" name="close" />
-      <span v-else>{{ unresolvedCount }}</span>
-    </button>
-    <div
-      v-if="showComments"
-      class="bk-comments-overlay-comments"
-      :class="{ 'bk-is-left': isLeft, 'bk-is-right': !isLeft }"
-      :style="{
-  width: width + 'px'
-}"
-      @pointerdown.capture.stop
-      @pointerup.capture.stop
-      @pointermove.capture.stop
-    >
-      <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>
-        <CommentInput
-          id="comment_reply"
-          v-model.lazy="commentText"
-          :placeholder="$t('commentBodyPlaceholder', 'Add reply')"
-        />
-        <button
-          v-if="commentText"
-          class="bk-button bk-is-warning"
-          @click="addComment"
-        >
-          {{ $t("commentAdd", "Add comment") }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
-import Comment from "./../../Comment/index.vue";
-import CommentInput from "./../../CommentInput/index.vue";
-const { $t, storage } = useBlokkli();
-const commentText = storage.useWithContextPrefix("commentReply", "");
-const emit = defineEmits(["toggle", "addComment", "resolveComment"]);
-const props = defineProps({
-  isReduced: { type: Boolean, required: true },
-  isLeft: { type: Boolean, required: true },
-  uuids: { type: Array, required: true },
-  comments: { type: Array, required: true },
-  style: { type: null, required: true },
-  showComments: { type: Boolean, required: true },
-  width: { type: Number, required: true }
-});
-const unresolvedCount = computed(
-  () => props.comments.filter((v) => !v.resolved).length
-);
-function addComment() {
-  emit("addComment", commentText.value);
-  commentText.value = "";
-}
-function resolveComment(uuid) {
-  if (uuid) {
-    emit("resolveComment", uuid);
-  }
-}
-</script>

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

@@ -1,20 +0,0 @@
-import type { CommentItem } from '#blokkli/types';
-type __VLS_Props = {
-    isReduced: boolean;
-    isLeft: boolean;
-    uuids: string[];
-    comments: CommentItem[];
-    style: any;
-    showComments: boolean;
-    width: number;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: () => void;
-    addComment: (text: string) => void;
-    resolveComment: (text: string) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: (() => any) | undefined;
-    onAddComment?: ((text: string) => any) | undefined;
-    onResolveComment?: ((text: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,112 +0,0 @@
-<template>
-  <Teleport to="#bk-canvas-overlay">
-    <div ref="overlay" class="bk bk-comments-overlay bk-control">
-      <Item
-        v-for="item in indicators"
-        :key="item.id"
-        v-bind="item"
-        :is-reduced
-        :is-left
-        :show-comments="active === item.id"
-        :width
-        @toggle="toggle(item)"
-        @add-comment="$emit('addComment', { body: $event, uuids: item.uuids })"
-        @resolve-comment="$emit('resolveComment', $event)"
-      />
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import { computed, ref, useBlokkli } from "#imports";
-import { falsy, getBounds } from "#blokkli/helpers";
-import Item from "./Item/index.vue";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { eventBus, ui, dom } = useBlokkli();
-const width = computed(() => {
-  if (ui.viewport.value.width > 1600) {
-    return 400;
-  } else if (ui.viewport.value.width > 1300) {
-    return 350;
-  }
-  return 300;
-});
-const props = defineProps({
-  comments: { type: Array, required: true }
-});
-defineEmits(["addComment", "resolveComment"]);
-const isReduced = ref(false);
-const isLeft = ref(false);
-const active = ref("");
-function toggle(item) {
-  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([]);
-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 + width.value < ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width;
-  const newIndicators = {};
-  const yMap = /* @__PURE__ */ new Set();
-  const findY = (y) => {
-    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) {
-        if (!newIndicators[id]) {
-          const y = findY(Math.round(bounds.y));
-          newIndicators[id] = {
-            id,
-            comments: [comment],
-            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)`
-            }
-          };
-        } else {
-          newIndicators[id].comments.push(comment);
-        }
-      }
-    }
-  }
-  indicators.value = Object.values(newIndicators);
-});
-</script>

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

@@ -1,18 +0,0 @@
-import type { CommentItem } from '#blokkli/types';
-type __VLS_Props = {
-    comments: CommentItem[];
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    addComment: (data: {
-        uuids: string[];
-        body: string;
-    }) => any;
-    resolveComment: (uuid: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onAddComment?: ((data: {
-        uuids: string[];
-        body: string;
-    }) => any) | undefined;
-    onResolveComment?: ((uuid: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;