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

package/dist/runtime/editor/features/search/Overlay/Results/Content/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div v-show="visible">
+    <div v-if="visible && isLoading" class="bk-search-loading">
+      <Icon name="spinner" />
+    </div>
+    <div :class="{ 'bk-search-is-loading': isLoading }">
+      <Sortli :build-item>
+        <button
+          v-for="(item, i) in items"
+          :key="tab + item.id"
+          ref="listItems"
+          class="bk bk-search-item bk-is-content"
+          :class="{ 'bk-is-active': i === index }"
+          :data-sortli-id="i"
+          @mouseenter="index = i"
+        >
+          <div
+            class="bk-search-item-icon"
+            :class="{ 'bk-is-image': item.imageUrl }"
+          >
+            <img v-if="item.imageUrl" :src="item.imageUrl" />
+            <ItemIcon v-else :bundle="item.targetBundles[0]" />
+          </div>
+          <div class="bk-search-item-content">
+            <div
+              class="bk-search-item-title bk-highlight"
+              v-html="item.title"
+            />
+            <div class="bk-search-item-subtitle">
+              <div
+                v-if="item.context"
+                class="bk-search-item-context"
+                v-html="item.context"
+              />
+              <div
+                class="bk-search-item-text bk-highlight"
+                v-html="item.text"
+              />
+            </div>
+          </div>
+        </button>
+      </Sortli>
+    </div>
+    <div
+      v-if="!isLoading && !items.length && search"
+      class="bk-search-no-results"
+    >
+      <Icon name="bk_mdi_sentiment_dissatisfied" />
+      <span>{{ $t("searchBoxNoResultsFound", "No results found") }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, useBlokkli, onMounted, useTemplateRef } from "#imports";
+import { ItemIcon, Icon, Sortli } from "#blokkli/editor/components";
+import { modulo } from "#blokkli/editor/helpers/math";
+const listItems = useTemplateRef("listItems");
+const props = defineProps({
+  visible: { type: Boolean, required: true },
+  search: { type: String, required: true },
+  tab: { type: String, required: true }
+});
+const itemsSearchTerm = ref("");
+const isLoading = ref(true);
+const emit = defineEmits(["close"]);
+const { adapter, $t, eventBus } = useBlokkli();
+const items = ref([]);
+let timeout = null;
+const doSearch = () => {
+  isLoading.value = false;
+  const searchTerm = props.search;
+  clearTimeout(timeout);
+  if (!searchTerm) {
+    items.value = [];
+    return;
+  }
+  if (!props.visible) {
+    return;
+  }
+  if (searchTerm === itemsSearchTerm.value) {
+    return;
+  }
+  isLoading.value = true;
+  timeout = setTimeout(() => {
+    adapter.getContentSearchResults(props.tab, props.search).then(
+      (newItems) => {
+        items.value = newItems;
+        itemsSearchTerm.value = searchTerm;
+        isLoading.value = false;
+      }
+    );
+  }, 200);
+};
+const index = ref(0);
+const prev = () => setIndex(index.value - 1);
+const next = () => setIndex(index.value + 1);
+const goToFirst = () => setIndex(0);
+const select = () => clickItem();
+const isActive = () => props.visible;
+defineExpose({ prev, next, select, isActive, goToFirst });
+function buildItem(element) {
+  if (!element.dataset.sortliId) {
+    return;
+  }
+  const index2 = Number.parseInt(element.dataset.sortliId);
+  if (Number.isNaN(index2) || !Number.isFinite(index2)) {
+    return;
+  }
+  const item = items.value[index2];
+  if (!item) {
+    return;
+  }
+  return {
+    itemType: "search_content",
+    element: () => element,
+    itemBundles: item.targetBundles,
+    searchItem: item
+  };
+}
+const setIndex = (newIndex) => {
+  index.value = modulo(newIndex, items.value.length);
+  scrollItemIntoView();
+};
+const clickItem = () => {
+  if (!listItems.value) {
+    return;
+  }
+  const element = listItems.value[index.value];
+  if (!element) {
+    return;
+  }
+  const item = buildItem(element);
+  if (!item) {
+    return;
+  }
+  const rect = element.getBoundingClientRect();
+  eventBus.emit("dragging:start", {
+    items: [item],
+    coords: {
+      x: rect.x,
+      y: rect.y
+    },
+    mode: "mouse"
+  });
+  emit("close");
+};
+const scrollItemIntoView = () => {
+  if (!listItems.value) {
+    return;
+  }
+  const item = listItems.value[index.value];
+  if (item) {
+    item.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+};
+watch(items, () => {
+  index.value = 0;
+  scrollItemIntoView();
+});
+watch(() => props.search, doSearch);
+watch(() => props.tab, doSearch);
+watch(() => props.visible, doSearch);
+onMounted(() => {
+  doSearch();
+});
+</script>

package/dist/runtime/editor/features/search/Overlay/Results/Content/index.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    visible: boolean;
+    search: string;
+    tab: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    prev: () => void;
+    next: () => void;
+    select: () => void;
+    isActive: () => boolean;
+    goToFirst: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/search/Overlay/Results/Page/index.d.vue.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    visible: boolean;
+    searchBoxVisible: boolean;
+    search: string;
+    tab: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    prev: () => void;
+    next: () => void;
+    select: () => void;
+    isActive: () => boolean;
+    goToFirst: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/search/Overlay/Results/Page/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div v-show="visible">
+    <button
+      v-for="(item, i) in visibleItems"
+      :key="item.item.uuid"
+      ref="listItems"
+      class="bk bk-search-item"
+      :class="{ 'bk-is-active': i === index }"
+      @click.stop="clickItem"
+      @mouseenter="index = i"
+    >
+      <div class="bk-search-item-icon">
+        <ItemIcon :bundle="item.item.bundle" />
+      </div>
+      <div class="bk-search-item-content">
+        <Highlight
+          class="bk-search-item-title"
+          tag="div"
+          :text="item.title"
+          :regex="regex"
+        />
+        <div class="bk-search-item-subtitle">
+          <Highlight
+            v-if="item.context"
+            class="bk-search-item-context"
+            :text="item.context"
+            :regex="regex"
+          />
+          <Highlight
+            class="bk-search-item-text"
+            :text="item.text"
+            :regex="regex"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  watch,
+  useTemplateRef
+} from "#imports";
+import { ItemIcon, Highlight } from "#blokkli/editor/components";
+import { falsy } from "#blokkli/helpers";
+import { modulo } from "#blokkli/editor/helpers/math";
+const listItems = useTemplateRef("listItems");
+const emit = defineEmits(["close"]);
+const props = defineProps({
+  visible: { type: Boolean, required: true },
+  searchBoxVisible: { type: Boolean, required: true },
+  search: { type: String, required: true },
+  tab: { type: String, required: true }
+});
+const { eventBus, state, types, dom, blocks, element } = useBlokkli();
+const buildForKey = ref("");
+const items = ref([]);
+const index = ref(0);
+const prev = () => setIndex(index.value - 1);
+const next = () => setIndex(index.value + 1);
+const goToFirst = () => setIndex(0);
+const select = () => clickItem();
+const isActive = () => props.visible;
+defineExpose({ prev, next, select, isActive, goToFirst });
+const words = computed(
+  () => props.search.toLowerCase().trim().split(" ").map((v) => v.trim()).filter(Boolean)
+);
+const regex = computed(() => {
+  if (!words.value.length) {
+    return;
+  }
+  const pattern = words.value.map((word) => word.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+  return new RegExp(pattern, "gi");
+});
+const setIndex = (newIndex) => {
+  index.value = modulo(newIndex, visibleItems.value.length);
+  scrollItemIntoView();
+};
+const clickItem = () => {
+  const item = visibleItems.value[index.value];
+  if (!item) {
+    return;
+  }
+  eventBus.emit("select", item.item.uuid);
+  eventBus.emit("scrollIntoView", {
+    uuid: item.item.uuid,
+    center: true
+  });
+  emit("close");
+};
+const scrollItemIntoView = () => {
+  if (!listItems.value) {
+    return;
+  }
+  const item = listItems.value[index.value];
+  if (item) {
+    item.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+};
+const buildSearchText = (el) => {
+  if (!el) {
+    return "";
+  }
+  const altTexts = element.queryAll(el, "img", "buildSearchText", (el2) => {
+    if (el2 instanceof HTMLImageElement) {
+      return [el2.alt, el2.title].filter(Boolean).join("");
+    }
+  }).join(" ");
+  return (el.textContent ?? "") + altTexts;
+};
+const buildIndex = () => {
+  if (buildForKey.value === state.refreshKey.value) {
+    return;
+  }
+  const newItems = blocks.getAllBlocks().map((item) => {
+    const title = types.getBlockBundleDefinition(item.bundle)?.label || item.bundle;
+    const element2 = dom.getDragElement(item);
+    return {
+      item,
+      title,
+      context: title,
+      text: buildSearchText(element2)
+    };
+  }).filter(falsy);
+  items.value = newItems;
+  buildForKey.value = state.refreshKey.value;
+};
+onMounted(() => {
+  buildIndex();
+});
+const visibleItems = computed(() => {
+  if (!words.value.length || !regex.value) {
+    return items.value.slice(0, 50);
+  }
+  const scored = items.value.map((item) => {
+    let score = 0;
+    score += (item.text.toLowerCase().match(regex.value) || []).length;
+    score += (item.title.toLowerCase().match(regex.value) || []).length;
+    if (item.context) {
+      score += (item.context.toLowerCase().match(regex.value) || []).length;
+    }
+    return { item, score };
+  }).filter((v) => !!v.score);
+  scored.sort((a, b) => b.score - a.score);
+  return scored.map((v) => v.item).slice(0, 50);
+});
+watch(visibleItems, () => {
+  index.value = 0;
+  scrollItemIntoView();
+});
+watch(
+  () => props.visible,
+  (isVisible) => {
+    if (isVisible) {
+      buildIndex();
+    }
+  }
+);
+watch(
+  () => props.searchBoxVisible,
+  (isVisible) => {
+    if (isVisible) {
+      buildIndex();
+    }
+  }
+);
+</script>

package/dist/runtime/editor/features/search/Overlay/Results/Page/index.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    visible: boolean;
+    searchBoxVisible: boolean;
+    search: string;
+    tab: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    prev: () => void;
+    next: () => void;
+    select: () => void;
+    isActive: () => boolean;
+    goToFirst: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/search/Overlay/index.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    visible: boolean;
+    isDragging: boolean;
+};
+declare function focusInput(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    focusInput: typeof focusInput;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/search/Overlay/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <ScrollBoundary
+    class="bk-search-box"
+    @keydown="onKeyDown"
+    @mousedown.stop
+    @click.stop
+  >
+    <div class="bk-search-input">
+      <Icon name="bk_mdi_search" />
+      <input
+        id="pb_search_input"
+        ref="input"
+        v-model="search"
+        type="text"
+        :placeholder="$t('searchBoxPlaceholder', 'Enter search term')"
+        autocomplete="off"
+        spellcheck="false"
+        required
+      />
+      <button @click="$emit('close')">
+        <Icon name="bk_mdi_close" />
+      </button>
+    </div>
+
+    <ul class="bk-search-tabs">
+      <li
+        v-for="(item, i) in tabItems"
+        :key="'tab_' + item.key"
+        :class="{ 'bk-is-active': tabIndex === i }"
+      >
+        <button
+          :disabled="!item.enabled"
+          @click="item.enabled ? tabIndex = i : void 0"
+        >
+          {{ item.label }}
+        </button>
+      </li>
+    </ul>
+
+    <div class="bk-search-results">
+      <div ref="resultsEl" class="bk-search-list bk-scrollbar-light">
+        <template v-for="item in tabItems">
+          <ResultsPage
+            v-if="item.key === 'on_this_page'"
+            ref="searchComponents"
+            :key="'page_' + item.key"
+            :visible="tab === item.key"
+            :search="searchCleaned"
+            :search-box-visible="visible"
+            :tab="item.key"
+            @close="$emit('close')"
+          />
+          <ResultsContent
+            v-else-if="item.enabled"
+            ref="searchComponents"
+            :key="'content_' + item.key"
+            :visible="tab === item.key"
+            :search="searchCleaned"
+            :tab="item.key"
+            @close="$emit('close')"
+          />
+        </template>
+      </div>
+    </div>
+  </ScrollBoundary>
+</template>
+
+<script setup>
+import {
+  watch,
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  nextTick,
+  useTemplateRef
+} from "#imports";
+import { Icon, ScrollBoundary } from "#blokkli/editor/components";
+import { modulo } from "#blokkli/editor/helpers/math";
+import ResultsPage from "./Results/Page/index.vue";
+import ResultsContent from "./Results/Content/index.vue";
+const props = defineProps({
+  visible: { type: Boolean, required: true },
+  isDragging: { type: Boolean, required: true }
+});
+const { adapter, $t, state } = useBlokkli();
+const emit = defineEmits(["close"]);
+const searchComponents = useTemplateRef("searchComponents");
+function focusInput() {
+  if (input.value) {
+    input.value.focus();
+    input.value.select();
+  }
+}
+defineExpose({ focusInput });
+const adapterContentSearchTabs = adapter.getContentSearchTabs ? await adapter.getContentSearchTabs() : {};
+const tabsMap = computed(() => {
+  return {
+    on_this_page: $t("searchBoxOnThisPage", "On this page"),
+    ...adapterContentSearchTabs
+  };
+});
+const tabItems = computed(() => {
+  return Object.entries(tabsMap.value).map(([key, label]) => {
+    return {
+      key,
+      label,
+      enabled: key === "on_this_page" || state.editMode.value === "editing"
+    };
+  });
+});
+const tabs = computed(() => Object.keys(tabsMap.value));
+const tabIndex = ref(0);
+const tab = computed(() => tabs.value[tabIndex.value]);
+const search = ref("");
+const input = useTemplateRef("input");
+const resultsEl = useTemplateRef("resultsEl");
+watch(search, () => {
+  const component = getResultsComponent();
+  if (component) {
+    component.goToFirst();
+    nextTick(() => {
+      if (resultsEl.value) {
+        resultsEl.value.scrollTop = 0;
+      }
+    });
+  }
+});
+const searchCleaned = computed(
+  () => search.value.trim().toLowerCase().split(" ").map((v) => v.trim()).filter(Boolean).join(" ")
+);
+const getResultsComponent = () => {
+  return searchComponents.value?.find((v) => v?.isActive());
+};
+onMounted(() => {
+  focusInput();
+});
+const onKeyDown = (e) => {
+  const resultsComponent = getResultsComponent();
+  if (!resultsComponent) {
+    return;
+  }
+  const stop = () => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  if (e.code === "Tab") {
+    if (e.shiftKey) {
+      resultsComponent.prev();
+    } else {
+      resultsComponent.next();
+    }
+    stop();
+  } else if (e.code === "ArrowDown") {
+    resultsComponent.next();
+    stop();
+  } else if (e.code === "ArrowUp") {
+    resultsComponent.prev();
+    stop();
+  } else if (e.code === "Enter") {
+    resultsComponent.select();
+    emit("close");
+    stop();
+  } else if (e.code === "ArrowLeft") {
+    tabIndex.value = modulo(tabIndex.value - 1, tabs.value.length);
+    stop();
+  } else if (e.code === "ArrowRight") {
+    tabIndex.value = modulo(tabIndex.value + 1, tabs.value.length);
+    stop();
+  } else if (e.code === "Escape") {
+    emit("close");
+    stop();
+  }
+};
+watch(
+  () => props.visible,
+  (isVisible) => {
+    if (isVisible && input.value) {
+      input.value.focus();
+    }
+  }
+);
+</script>

package/dist/runtime/editor/features/search/Overlay/index.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    visible: boolean;
+    isDragging: boolean;
+};
+declare function focusInput(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    focusInput: typeof focusInput;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/search/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/search/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value" defer>
+    <BlokkliTransition name="search">
+      <div
+        v-if="isRendered"
+        v-show="isVisible"
+        class="bk bk-search"
+        :class="{ 'bk-is-translucent': selection.isDragging.value }"
+        @click.stop.prevent="isVisible = false"
+      >
+        <Overlay
+          ref="overlay"
+          :visible="isVisible"
+          :is-dragging="selection.isDragging.value"
+          @close="isVisible = false"
+        />
+      </div>
+    </BlokkliTransition>
+  </Teleport>
+  <PluginToolbarButton
+    id="search"
+    :title="$t('searchToolbarLabel', 'Search content')"
+    meta
+    key-code="F"
+    region="before-sidebar-right"
+    :tour-text="
+  $t(
+    'searchTourText',
+    'Quickly find blocks on the current page or existing content to drag and drop as blocks into the page.'
+  )
+"
+    icon="bk_mdi_search"
+    @click="onClick"
+  />
+</template>
+
+<script setup>
+import { nextTick, ref, useBlokkli, defineBlokkliFeature, useTemplateRef } from "#imports";
+import Overlay from "./Overlay/index.vue";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import { PluginToolbarButton } from "#blokkli/editor/plugins";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+defineBlokkliFeature({
+  id: "search",
+  icon: "bk_mdi_search",
+  label: "Search",
+  description: "Provides an overlay with shortcut to search for blocks on the current page or existing content to add as blocks."
+});
+const { $t, selection, ui } = useBlokkli();
+const isRendered = ref(false);
+const isVisible = ref(false);
+const overlay = useTemplateRef("overlay");
+function onClick() {
+  isRendered.value = true;
+  isVisible.value = !isVisible.value;
+  nextTick(() => {
+    if (isVisible.value && overlay.value) {
+      overlay.value.focusInput();
+    }
+  });
+}
+onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
+  if (e.code === "Escape") {
+    isVisible.value = false;
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "FeatureSearch"
+};
+</script>

package/dist/runtime/editor/features/search/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>;