@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -37,175 +37,125 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, computed, useBlokkli, onMounted, watch } from '#imports'
-import { ItemIcon, Highlight } from '#blokkli/components'
-import { falsy, modulo } from '#blokkli/helpers'
-import type { DraggableExistingBlock } from '#blokkli/types'
-
-const listItems = ref<HTMLLIElement[]>([])
-const emit = defineEmits(['close'])
-
-const props = defineProps<{
-  visible: boolean
-  searchBoxVisible: boolean
-  search: string
-  tab: string
-}>()
-
-type SearchItem = {
-  item: DraggableExistingBlock
-  title: string
-  text: string
-  context?: string
-}
-
-const { eventBus, state, types, dom } = useBlokkli()
-
-const buildForKey = ref('')
-
-const items = ref<SearchItem[]>([])
-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),
-)
-
+<script setup>
+import { ref, computed, useBlokkli, onMounted, watch } from "#imports";
+import { ItemIcon, Highlight } from "#blokkli/components";
+import { falsy, modulo } from "#blokkli/helpers";
+const listItems = ref([]);
+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 } = 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
+    return;
   }
-  // Join all words into a regex.
-  const pattern = words.value
-    .map((word) => word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
-    .join('|')
-
-  return new RegExp(pattern, 'gi')
-})
-
-const setIndex = (newIndex: number) => {
-  index.value = modulo(newIndex, visibleItems.value.length)
-  scrollItemIntoView()
-}
-
+  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]
+  const item = visibleItems.value[index.value];
   if (!item) {
-    return
+    return;
   }
-
-  eventBus.emit('select', item.item.uuid)
-  eventBus.emit('scrollIntoView', {
+  eventBus.emit("select", item.item.uuid);
+  eventBus.emit("scrollIntoView", {
     uuid: item.item.uuid,
-    center: true,
-  })
-  emit('close')
-}
-
+    center: true
+  });
+  emit("close");
+};
 const scrollItemIntoView = () => {
-  const item = listItems.value[index.value]
+  const item = listItems.value[index.value];
   if (item) {
-    item.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    item.scrollIntoView({ block: "nearest", inline: "nearest" });
   }
-}
-
-const buildSearchText = (el: HTMLElement): string => {
-  let text = el.textContent || ''
-
-  // Add alt and title attributes.
-  el.querySelectorAll('img').forEach((img) => {
+};
+const buildSearchText = (el) => {
+  let text = el.textContent || "";
+  el.querySelectorAll("img").forEach((img) => {
     if (img.alt) {
-      text += ' ' + img.alt
+      text += " " + img.alt;
     }
     if (img.title) {
-      text += ' ' + img.title
+      text += " " + img.title;
     }
-  })
-
-  return text
-}
-
+  });
+  return text;
+};
 const buildIndex = () => {
   if (buildForKey.value === state.refreshKey.value) {
-    return
+    return;
   }
-  const newItems = dom
-    .getAllBlocks()
-    .map((item) => {
-      const title =
-        types.getBlockBundleDefinition(item.itemBundle)?.label ||
-        item.itemBundle
-      return {
-        item,
-        title: item.editTitle || title,
-        context: title,
-        text: buildSearchText(item.element()),
-      }
-    })
-    .filter(falsy)
-
-  items.value = newItems
-  buildForKey.value = state.refreshKey.value
-}
-
+  const newItems = dom.getAllBlocks().map((item) => {
+    const title = types.getBlockBundleDefinition(item.itemBundle)?.label || item.itemBundle;
+    return {
+      item,
+      title: item.editTitle || title,
+      context: title,
+      text: buildSearchText(item.element())
+    };
+  }).filter(falsy);
+  items.value = newItems;
+  buildForKey.value = state.refreshKey.value;
+};
 onMounted(() => {
-  buildIndex()
-})
-
+  buildIndex();
+});
 const visibleItems = computed(() => {
   if (!words.value.length || !regex.value) {
-    return items.value.slice(0, 50)
+    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)
-})
-
+  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()
-})
-
+  index.value = 0;
+  scrollItemIntoView();
+});
 watch(
   () => props.visible,
   (isVisible) => {
     if (isVisible) {
-      buildIndex()
+      buildIndex();
     }
-  },
-)
-
+  }
+);
 watch(
   () => props.searchBoxVisible,
   (isVisible) => {
     if (isVisible) {
-      buildIndex()
+      buildIndex();
     }
-  },
-)
+  }
+);
 </script>

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

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

@@ -30,7 +30,7 @@
       >
         <button
           :disabled="!item.enabled"
-          @click="item.enabled ? (tabIndex = i) : undefined"
+          @click="item.enabled ? tabIndex = i : void 0"
         >
           {{ item.label }}
         </button>
@@ -65,140 +65,111 @@
   </ScrollBoundary>
 </template>
 
-<script lang="ts" setup>
-import { watch, ref, computed, useBlokkli, onMounted, nextTick } 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: boolean
-  isDragging: boolean
-}>()
-
-const { adapter, $t, state } = useBlokkli()
-
-const emit = defineEmits(['close'])
-
-type SearchComponent =
-  | InstanceType<typeof ResultsContent>
-  | InstanceType<typeof ResultsPage>
-
-const searchComponents = ref<SearchComponent[]>([])
-
+<script setup>
+import { watch, ref, computed, useBlokkli, onMounted, nextTick } 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()
+    input.value.focus();
+    input.value.select();
   }
-}
-
-defineExpose({ focusInput })
-
-const adapterContentSearchTabs = adapter.getContentSearchTabs
-  ? await adapter.getContentSearchTabs()
-  : {}
-
+};
+defineExpose({ focusInput });
+const adapterContentSearchTabs = adapter.getContentSearchTabs ? await adapter.getContentSearchTabs() : {};
 const tabsMap = computed(() => {
   return {
-    on_this_page: $t('searchBoxOnThisPage', 'On this page'),
-    ...adapterContentSearchTabs,
-  }
-})
-
+    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) as string[])
-const tabIndex = ref(0)
-const tab = computed<string>(() => tabs.value[tabIndex.value])
-
-const search = ref('')
-const input = ref<HTMLInputElement | null>(null)
-const resultsEl = ref<HTMLDivElement | null>(null)
-
+      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 = ref(null);
+const resultsEl = ref(null);
 watch(search, () => {
-  const component = getResultsComponent()
+  const component = getResultsComponent();
   if (component) {
-    component.goToFirst()
+    component.goToFirst();
     nextTick(() => {
       if (resultsEl.value) {
-        resultsEl.value.scrollTop = 0
+        resultsEl.value.scrollTop = 0;
       }
-    })
+    });
   }
-})
-
-const searchCleaned = computed(() =>
-  search.value
-    .trim()
-    .toLowerCase()
-    .split(' ')
-    .map((v) => v.trim())
-    .filter(Boolean)
-    .join(' '),
-)
-
-const getResultsComponent = (): SearchComponent | undefined => {
-  return searchComponents.value.find((v) => v.isActive())
-}
-
+});
+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: KeyboardEvent) => {
-  const resultsComponent = getResultsComponent()
+  focusInput();
+});
+const onKeyDown = (e) => {
+  const resultsComponent = getResultsComponent();
   if (!resultsComponent) {
-    return
+    return;
   }
   const stop = () => {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-  if (e.code === 'Tab') {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  if (e.code === "Tab") {
     if (e.shiftKey) {
-      resultsComponent.prev()
+      resultsComponent.prev();
     } else {
-      resultsComponent.next()
+      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()
+    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()
+      input.value.focus();
     }
-  },
-)
+  }
+);
 </script>

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

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

@@ -24,56 +24,49 @@
     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.',
-      )
-    "
+  $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 lang="ts" setup>
-import { nextTick, ref, useBlokkli, defineBlokkliFeature } from '#imports'
-import Overlay from './Overlay/index.vue'
-import { PluginToolbarButton } from '#blokkli/plugins'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-
+<script setup>
+import { nextTick, ref, useBlokkli, defineBlokkliFeature } from "#imports";
+import Overlay from "./Overlay/index.vue";
+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 } = useBlokkli()
-
-const isRendered = ref(false)
-const isVisible = ref(false)
-
-const overlay = ref<InstanceType<typeof Overlay> | null>(null)
-
+  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 } = useBlokkli();
+const isRendered = ref(false);
+const isVisible = ref(false);
+const overlay = ref(null);
 function onClick() {
-  isRendered.value = true
-  isVisible.value = !isVisible.value
+  isRendered.value = true;
+  isVisible.value = !isVisible.value;
   nextTick(() => {
     if (isVisible.value && overlay.value) {
-      overlay.value.focusInput()
+      overlay.value.focusInput();
     }
-  })
+  });
 }
-
-onBlokkliEvent('keyPressed', (e) => {
-  if (e.code === 'Escape') {
-    isVisible.value = false
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "Escape") {
+    isVisible.value = false;
   }
-})
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Search',
-}
+  name: "ContentSearch"
+};
 </script>

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

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