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

package/dist/runtime/components/Edit/Features/Search/Overlay/Results/Page/index.vue

@@ -1,171 +0,0 @@
-<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/components";
-import { falsy, modulo } from "#blokkli/helpers";
-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/components/Edit/Features/Search/Overlay/Results/Page/index.vue.d.ts

@@ -1,18 +0,0 @@
-type __VLS_Props = {
-    visible: boolean;
-    searchBoxVisible: boolean;
-    search: string;
-    tab: string;
-};
-declare const _default: 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>;
-export default _default;

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

@@ -1,183 +0,0 @@
-<template>
-  <ScrollBoundary
-    class="bk-search-box"
-    @keydown="onKeyDown"
-    @mousedown.stop
-    @click.stop
-  >
-    <div class="bk-search-input">
-      <Icon name="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="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/components";
-import { modulo } from "#blokkli/helpers";
-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 = ref([]);
-const 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/components/Edit/Features/Search/Overlay/index.vue.d.ts

@@ -1,12 +0,0 @@
-type __VLS_Props = {
-    visible: boolean;
-    isDragging: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    focusInput: () => 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>;
-export default _default;

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

@@ -1,76 +0,0 @@
-<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="search"
-    @click="onClick"
-  />
-</template>
-
-<script setup>
-import { nextTick, ref, useBlokkli, defineBlokkliFeature } from "#imports";
-import Overlay from "./Overlay/index.vue";
-import { BlokkliTransition } from "#blokkli/components";
-import { PluginToolbarButton } from "#blokkli/plugins";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-defineBlokkliFeature({
-  id: "search",
-  icon: "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 = ref(null);
-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: "ContentSearch"
-};
-</script>

package/dist/runtime/components/Edit/Features/Search/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/Selection/AddButtons/Overlay/index.vue

@@ -1,182 +0,0 @@
-<template>
-  <ArtboardTooltip
-    id="add-buttons"
-    :title="label"
-    :anchor-el
-    :anchor-coordinates
-    class="bk-selection-add-overlay"
-    @close="$emit('close')"
-  >
-    <div
-      ref="scrollEl"
-      class="bk-selection-add-overlay-wrapper bk-scrollbar-dark"
-    >
-      <div
-        class="bk-selection-add-overlay-form"
-        @pointerdown.stop
-        @keydown.capture.stop
-        @keyup.capture.stop
-      >
-        <form
-          class="bk-selection-add-overlay-form-input"
-          @submit.prevent.stop="onSubmitForm"
-        >
-          <Icon name="search" />
-          <input
-            ref="inputEl"
-            v-model="searchText"
-            type="text"
-            :placeholder="$t('searchBoxPlaceholder', 'Enter search term')"
-          />
-          <button
-            v-if="searchText"
-            type="button"
-            tabindex="-1"
-            @click.prevent="onClearSearchText"
-          >
-            <Icon name="close" />
-          </button>
-        </form>
-      </div>
-      <div
-        ref="wrapperEl"
-        :style="{
-  width,
-  height
-}"
-      >
-        <div class="bk-selection-add-overlay-list" @wheel="onWheel">
-          <AddListItem
-            v-for="item in items"
-            v-show="isVisible(item)"
-            :key="item.props.id"
-            v-bind="item.props"
-            @click.prevent="onClick(item)"
-          />
-        </div>
-      </div>
-    </div>
-  </ArtboardTooltip>
-</template>
-
-<script setup>
-import { useTemplateRef, useBlokkli, computed, ref, watch } from "#imports";
-import { ArtboardTooltip, AddListItem, Icon } from "#blokkli/components";
-import { isInternalBundle } from "#blokkli/helpers/bundles";
-const props = defineProps({
-  bundles: { type: Array, required: true },
-  anchorEl: { type: null, required: false },
-  anchorCoordinates: { type: Object, required: false },
-  label: { type: String, required: true }
-});
-const emit = defineEmits(["select", "action", "close"]);
-const searchText = ref("");
-const width = ref("auto");
-const height = ref("auto");
-const wrapperEl = useTemplateRef("wrapperEl");
-const scrollEl = useTemplateRef("scrollEl");
-const inputEl = useTemplateRef("inputEl");
-let hasScrollbar = null;
-watch(
-  searchText,
-  () => {
-    if (wrapperEl.value) {
-      const rect = wrapperEl.value.getBoundingClientRect();
-      width.value = rect.width + "px";
-      height.value = rect.height + "px";
-    }
-  },
-  {
-    once: true
-  }
-);
-function onClearSearchText() {
-  if (inputEl.value) {
-    inputEl.value.focus();
-  }
-  searchText.value = "";
-}
-const { types, plugins, storage, $t } = useBlokkli();
-const favorites = storage.use("blockFavorites", []);
-const blocks = computed(() => {
-  return props.bundles.filter((bundle) => !isInternalBundle(bundle)).map((bundle) => {
-    return {
-      bundle,
-      label: types.getBlockBundleDefinition(bundle)?.label ?? bundle,
-      isFavorite: favorites.value.includes(bundle)
-    };
-  }).sort((a, b) => {
-    if (a.isFavorite && !b.isFavorite) return -1;
-    if (!a.isFavorite && b.isFavorite) return 1;
-    return a.label.localeCompare(b.label);
-  }).map((block) => {
-    return {
-      type: "block",
-      bundle: block.bundle,
-      searchText: block.label.toLowerCase(),
-      props: {
-        id: block.bundle,
-        label: block.label,
-        bundle: block.bundle,
-        color: block.isFavorite ? "yellow" : void 0,
-        context: "selection-add-buttons"
-      }
-    };
-  });
-});
-const actions = computed(() => {
-  return plugins.get("addAction").filter((action) => {
-    if (!action.itemBundle) {
-      return true;
-    }
-    return props.bundles.includes(action.itemBundle);
-  }).map((action) => {
-    return {
-      type: "action",
-      action,
-      searchText: action.title + " " + (action.description ?? ""),
-      props: {
-        id: action.id,
-        label: action.title,
-        color: action.color,
-        context: "selection-add-buttons",
-        icon: action.icon,
-        noContextMenu: true
-      }
-    };
-  });
-});
-const items = computed(() => {
-  return [...blocks.value, ...actions.value];
-});
-function isVisible(item) {
-  if (!searchText.value) {
-    return true;
-  }
-  return item.searchText.includes(searchText.value);
-}
-const onWheel = (e) => {
-  if (hasScrollbar === null) {
-    const element = scrollEl.value;
-    hasScrollbar = element && element.scrollHeight > element.clientHeight;
-  }
-  if (hasScrollbar) {
-    if (!e.ctrlKey && !e.metaKey) {
-      e.stopPropagation();
-    }
-  }
-};
-function onClick(item) {
-  if (item.type === "block") {
-    emit("select", item.bundle);
-  } else if (item.type === "action") {
-    emit("action", item.action);
-  }
-}
-function onSubmitForm() {
-  const firstResult = items.value.find((item) => isVisible(item));
-  if (firstResult) {
-    onClick(firstResult);
-  }
-}
-</script>

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

@@ -1,17 +0,0 @@
-import type { AddAction, Coord } from '#blokkli/types';
-type __VLS_Props = {
-    bundles: string[];
-    anchorEl?: HTMLElement;
-    anchorCoordinates?: Coord;
-    label: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    select: (id: string) => any;
-    close: () => any;
-    action: (action: AddAction) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((id: string) => any) | undefined;
-    onClose?: (() => any) | undefined;
-    onAction?: ((action: AddAction) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;