@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -18,17 +18,19 @@
       />
     </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="onFocus"
-        @select="onSelect($event)"
-      />
+      <div class="bk-command-palette-results-list">
+        <div>
+          <Item
+            v-for="(item, index) in visibleCommands"
+            :key="item.id"
+            :item="item"
+            :index="index"
+            :is-focused="focusedIndex === index"
+            @focus="onFocus"
+            @select="onSelect"
+          />
+        </div>
+      </div>
     </div>
   </ScrollBoundary>
 </template>
@@ -41,44 +43,25 @@ import {
   useBlokkli,
   watch,
   nextTick,
-  onBeforeUnmount
+  onBeforeUnmount,
+  useTemplateRef
 } from "#imports";
 import { Icon, ScrollBoundary } from "#blokkli/components";
-import Group from "./Group/index.vue";
-import { falsy } from "#blokkli/helpers";
 import { Fzf } from "fzf";
+import { modulo } from "#blokkli/helpers";
+import Item from "./Item/index.vue";
 const { commands, $t, selection } = useBlokkli();
 const emit = defineEmits(["close"]);
-const inputEl = ref(null);
+const inputEl = useTemplateRef("inputEl");
 const text = ref("");
-const focusedId = ref("");
+const focusedIndex = ref(0);
 const hasUsedMouse = ref(false);
-function onFocus(id) {
+function onFocus(index) {
   if (!hasUsedMouse.value) {
     return;
   }
-  focusedId.value = id;
+  focusedIndex.value = index;
 }
-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");
-  } else if (id === "misc") {
-    return $t("commandGroup.misc", "Miscellaneous");
-  }
-  return id;
-};
-const groupOrder = computed(() => {
-  if (selection.uuids.value.length) {
-    return ["selection", "add"];
-  }
-  return ["add"];
-});
 const items = computed(
   () => commands.getCommands().filter((v) => !v.disabled).map((doc, index) => {
     return {
@@ -88,8 +71,6 @@ const items = computed(
   })
 );
 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(
@@ -101,37 +82,21 @@ const visibleIds = computed(
     return results.map((v) => {
       return {
         id: v.item._id,
-        positions: [...v.positions]
+        positions: [...v.positions],
+        score: v.score
       };
-    });
+    }).sort((a, b) => b.score - a.score);
   }
 );
-const groups = computed(() => {
-  return Object.values(
-    items.value.reduce((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;
-  });
+const visibleCommands = computed(() => {
+  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
+    };
+  }).filter((v) => v.visible);
 });
 watch(text, () => {
   nextTick(() => {
@@ -140,62 +105,25 @@ watch(text, () => {
 });
 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);
+  focusedIndex.value = 0;
 };
 const focusPrev = () => {
-  const elements = getCommandElements();
-  if (elements.length === 0) {
+  if (visibleCommands.value.length === 0) {
     return;
   }
-  const focusedIndex = elements.findIndex((v) => v.focused);
-  if (focusedIndex <= 0) {
-    focusedId.value = elements[elements.length - 1].id;
-  } else {
-    focusedId.value = elements[focusedIndex - 1].id;
-  }
-  scrollFocusedIntoView();
+  focusedIndex.value = modulo(
+    focusedIndex.value - 1,
+    visibleCommands.value.length
+  );
 };
 const focusNext = () => {
-  const elements = getCommandElements();
-  if (elements.length === 0) {
+  if (visibleCommands.value.length === 0) {
     return;
   }
-  const focusedIndex = elements.findIndex((v) => v.focused);
-  if (focusedIndex === -1 || focusedIndex === elements.length - 1) {
-    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" });
-  }
+  focusedIndex.value = modulo(
+    focusedIndex.value + 1,
+    visibleCommands.value.length
+  );
 };
 const onSelect = (id) => {
   const command = items.value.find((v) => v.id === id);
@@ -226,7 +154,10 @@ const onKeyDown = (e) => {
     focusPrev();
   } else if (e.code === "Enter") {
     e.preventDefault();
-    onSelect(focusedId.value);
+    const command = visibleCommands.value[focusedIndex.value];
+    if (command) {
+      onSelect(command.id);
+    }
   } else if (e.code === "Escape") {
     e.preventDefault();
     emit("close");

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

@@ -1,9 +1,9 @@
 <template>
   <Teleport to="body">
     <div class="bk">
-      <Transition name="bk-command-palette">
+      <BlokkliTransition name="command-palette">
         <Palette v-if="isVisible" @close="isVisible = false" />
-      </Transition>
+      </BlokkliTransition>
     </div>
   </Teleport>
   <PluginToolbarButton
@@ -26,7 +26,9 @@
 <script setup>
 import { useBlokkli, defineBlokkliFeature, ref, 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";
 defineBlokkliFeature({
   id: "command-palette",
   icon: "command",
@@ -37,6 +39,7 @@ defineBlokkliFeature({
 const { $t } = useBlokkli();
 const isVisible = ref(false);
 const label = computed(() => $t("commandPaletteOpen", "Open Command Palette"));
+onBlokkliEvent("window:clickAway", () => isVisible.value = false);
 </script>
 
 <script>

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

@@ -1,29 +1,44 @@
 <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>
+  <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 { ref, useBlokkli } from "#imports";
-const comment = ref("");
-defineEmits(["add"]);
-const { $t } = useBlokkli();
+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,8 +1,10 @@
 declare const _default: import("vue").DefineComponent<{}, {
     getComment: () => string;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    add: (...args: any[]) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    add: (comment: string) => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onAdd?: ((...args: any[]) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onAdd?: ((comment: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="bk-comment-textarea">
+    <textarea
+      id="comment_body"
+      ref="textarea"
+      v-model="value"
+      type="text"
+      class="bk-form-input"
+      rows="4"
+      :placeholder
+      required
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, useTemplateRef } from "#imports";
+defineProps({
+  id: { type: String, required: true },
+  placeholder: { type: String, required: false }
+});
+const value = defineModel({ type: String });
+const el = useTemplateRef("textarea");
+onMounted(() => {
+  if (el.value) {
+    el.value.focus();
+  }
+});
+</script>

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

@@ -0,0 +1,13 @@
+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

@@ -13,15 +13,24 @@
       :class="{
   'bk-has-unresolved-comments': unresolvedCount > 0
 }"
-      @click="$emit('toggle')"
+      @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-show="showComments"
+      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" />
@@ -36,17 +45,14 @@
         <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"
+        <CommentInput
+          id="comment_reply"
+          v-model.lazy="commentText"
           :placeholder="$t('commentBodyPlaceholder', 'Add reply')"
-          required
-          @focus="showFullForm = true"
         />
         <button
-          v-if="showFullForm && commentText"
-          class="bk-button bk-is-primary bk-is-small"
+          v-if="commentText"
+          class="bk-button bk-is-warning"
           @click="addComment"
         >
           {{ $t("commentAdd", "Add comment") }}
@@ -57,12 +63,12 @@
 </template>
 
 <script setup>
-import { ref, computed, useBlokkli } from "#imports";
+import { computed, useBlokkli } from "#imports";
 import { Icon } from "#blokkli/components";
 import Comment from "./../../Comment/index.vue";
-const { $t } = useBlokkli();
-const commentText = ref("");
-const showFullForm = ref(false);
+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 },
@@ -70,14 +76,14 @@ const props = defineProps({
   uuids: { type: Array, required: true },
   comments: { type: Array, required: true },
   style: { type: null, required: true },
-  showComments: { type: Boolean, 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);
-  showFullForm.value = false;
   commentText.value = "";
 }
 function resolveComment(uuid) {

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

@@ -6,6 +6,7 @@ type __VLS_Props = {
     comments: CommentItem[];
     style: any;
     showComments: boolean;
+    width: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => void;

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

@@ -1,13 +1,14 @@
 <template>
-  <Teleport to="body">
-    <div class="bk bk-comments-overlay bk-control">
+  <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="isReduced"
-        :is-left="isLeft"
+        :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)"
@@ -17,11 +18,19 @@
 </template>
 
 <script setup>
-import { ref, useBlokkli } from "#imports";
+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 }
 });
@@ -47,7 +56,7 @@ onBlokkliEvent("canvas:draw", (e) => {
     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;
+  isLeft.value = x + width.value < ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width;
   const newIndicators = {};
   const yMap = /* @__PURE__ */ new Set();
   const findY = (y) => {

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

@@ -19,6 +19,7 @@
         </li>
       </ul>
     </div>
+
     <template v-if="unresolvedCount" #badge>
       <div class="bk-sidebar-badge bk-is-yellow">{{ unresolvedCount }}</div>
     </template>
@@ -26,17 +27,24 @@
 
   <PluginItemAction
     id="add_comment"
-    :title="$t('addCommentToItem', 'Comment')"
+    :title="$t('addCommentToItem', 'Add Comment...')"
     :active="showAddComment"
     weight="last"
-    icon="comment"
+    icon="comment_add"
     multiple
     @click="showAddComment = !showAddComment"
-  >
-    <template v-if="showAddComment" #default="{ uuids }">
-      <CommentAddForm ref="commentForm" @add="onAddComment($event, uuids)" />
-    </template>
-  </PluginItemAction>
+  />
+
+  <Teleport to="body">
+    <BlokkliTransition name="caret-tooltip">
+      <CommentAddForm
+        v-if="showAddComment"
+        ref="commentForm"
+        @add="onAddComment($event)"
+        @close="showAddComment = false"
+      />
+    </BlokkliTransition>
+  </Teleport>
 
   <CommentsOverlay
     v-if="comments.length"
@@ -55,6 +63,7 @@ import {
   computed
 } from "#imports";
 import { PluginSidebar, PluginItemAction } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import Comment from "./Comment/index.vue";
 import CommentAddForm from "./AddForm/index.vue";
 import CommentsOverlay from "./Overlay/index.vue";
@@ -79,8 +88,11 @@ comments.value = await adapter.loadComments();
 const unresolvedCount = computed(
   () => comments.value.filter((v) => !v.resolved).length
 );
-const onAddComment = async (body, uuids) => {
-  comments.value = await adapter.addComment(uuids, body);
+const onAddComment = async (body, providedUuids) => {
+  const uuids = providedUuids ?? [...selection.uuids.value];
+  if (uuids.length) {
+    comments.value = await adapter.addComment(uuids, body);
+  }
   showAddComment.value = false;
 };
 const onResolveComment = async (uuid) => {

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

@@ -3,18 +3,10 @@
     id="conversions"
     :title="$t('convertTo', 'Convert to...')"
     :enabled="!!possibleConversions.length"
-  >
-    <button
-      v-for="conversion in possibleConversions"
-      :key="conversion.id"
-      @click.prevent="onConvert(conversion.id)"
-    >
-      <ItemIcon :bundle="conversion.id" />
-      <div>
-        <div>{{ conversion.label }}</div>
-      </div>
-    </button>
-  </PluginItemDropdown>
+    :items="possibleConversions"
+    weight="900"
+    @select="onConvert($event.id)"
+  />
 </template>
 
 <script setup>
@@ -25,9 +17,8 @@ import {
   useLazyAsyncData,
   watch
 } from "#imports";
-import { ItemIcon } from "#blokkli/components";
 import { PluginItemDropdown } from "#blokkli/plugins";
-import { falsy, onlyUnique } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 const { adapter } = defineBlokkliFeature({
   id: "conversions",
   label: "Conversions",
@@ -55,23 +46,27 @@ async function onConvert(targetBundle) {
   }
   await state.mutateWithLoadingState(
     () => adapter.convertBlocks(
-      selection.blocks.value.map((v) => v.uuid),
+      selection.items.value.map((v) => v.uuid),
       targetBundle
     ),
     $t("failedToConvert", "The block could not be converted.")
   );
 }
-const itemBundleIds = computed(
-  () => selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique)
-);
 const possibleConversions = computed(() => {
-  if (itemBundleIds.value.length !== 1) {
+  if (selection.bundles.value.length !== 1) {
     return [];
   }
-  const sourceType = itemBundleIds.value[0];
+  const sourceType = selection.bundles.value[0];
+  const titleBase = $t("conversionsConvertTo", "Convert to: @bundle");
   return conversions.value.filter(
     (v) => v.sourceBundle === sourceType && types.allowedTypesInList.value.includes(v.targetBundle)
-  ).map((v) => types.getBlockBundleDefinition(v.targetBundle)).filter(falsy);
+  ).map((v) => types.getBlockBundleDefinition(v.targetBundle)).filter(falsy).map((v) => {
+    return {
+      id: v.id,
+      label: titleBase.replace("@bundle", v.label),
+      bundle: v.id
+    };
+  });
 });
 </script>