@blokkli/editor 1.0.0

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

@@ -0,0 +1,211 @@
+<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.itemBundle" />
+      </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 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),
+)
+
+const regex = computed(() => {
+  if (!words.value.length) {
+    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 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 = () => {
+  const item = listItems.value[index.value]
+  if (item) {
+    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) => {
+    if (img.alt) {
+      text += ' ' + img.alt
+    }
+    if (img.title) {
+      text += ' ' + img.title
+    }
+  })
+
+  return text
+}
+
+const buildIndex = () => {
+  if (buildForKey.value === state.refreshKey.value) {
+    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
+}
+
+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/index.vue

@@ -0,0 +1,214 @@
+<template>
+  <div
+    class="bk-search-box"
+    @keydown="onKeyDown"
+    @wheel="onWheel"
+    @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) : undefined"
+        >
+          {{ 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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch, ref, computed, useBlokkli, onMounted, nextTick } from '#imports'
+import { Icon } 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[]>([])
+
+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) 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)
+
+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 = (): SearchComponent | undefined => {
+  return searchComponents.value.find((v) => v.isActive())
+}
+
+onMounted(() => {
+  focusInput()
+})
+
+const onKeyDown = (e: KeyboardEvent) => {
+  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()
+  }
+}
+
+function onWheel(e: WheelEvent) {
+  if (props.isDragging) {
+    return
+  }
+
+  e.preventDefault()
+  e.stopImmediatePropagation()
+}
+
+watch(
+  () => props.visible,
+  (isVisible) => {
+    if (isVisible && input.value) {
+      input.value.focus()
+    }
+  },
+)
+</script>

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

@@ -0,0 +1,79 @@
+<template>
+  <Teleport to="body">
+    <Transition name="bk-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>
+    </Transition>
+  </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 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'
+
+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)
+
+function onClick() {
+  isRendered.value = true
+  isVisible.value = !isVisible.value
+  nextTick(() => {
+    if (isVisible.value && overlay.value) {
+      overlay.value.focusInput()
+    }
+  })
+}
+
+onBlokkliEvent('keyPressed', (e) => {
+  if (e.code === 'Escape') {
+    isVisible.value = false
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Search',
+}
+</script>

package/dist/runtime/components/Edit/Features/Selection/Overlay/fragment.glsl

@@ -0,0 +1,99 @@
+precision mediump float;
+
+varying vec4 v_quad;
+varying vec3 v_color;
+varying vec4 v_rect_radius;
+varying float v_thickness;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+varying float v_transition;
+
+uniform float u_scale;
+uniform float u_dpi;
+uniform vec2 u_resolution;
+
+int pseudoQuadrant(vec2 p) {
+  return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
+}
+
+float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
+  int idx = pseudoQuadrant(p);
+  float cr;
+
+  // Use correct radius. Bottom left and bottom right are flipped.
+  if (idx == 0) cr = radii[0];
+  else if (idx == 1) cr = radii[1];
+  else if (idx == 2) cr = radii[3];
+  else cr = radii[2];
+
+  vec2 q = abs(p) - b + cr;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - cr;
+}
+
+vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border) {
+  float progress = gl_FragCoord.y / u_resolution.y;
+  float u_borderThickness = max(thickness, 2.0); // The border size (in pixels)
+  // vec2 size = v_rect_size + u_borderThickness * 2.0;
+  vec2 size = v_rect_size + u_borderThickness * 2.0 * v_transition;
+
+  float u_edgeSoftness = 1.0 + v_transition;
+  vec4 radius = v_rect_radius * u_scale + vec4(u_borderThickness);
+  vec4 u_cornerRadii = min(radius, min(size.x, size.y) / 2.0) * v_transition;
+
+  // Border
+  float u_borderSoftness = 1.0 + v_transition; // How soft the border should be (in pixels)
+
+  // =========================================================================
+
+  vec4 r = u_cornerRadii; // Animated corner radii
+
+  // -------------------------------------------------------------------------
+
+  // Fill SDF
+  float distance =
+    sdRoundBox(gl_FragCoord.xy - v_rect_center, size / 2.0, r) +
+    u_borderThickness;
+
+  // AA
+  float smoothedAlpha = 1.0 - smoothstep(0.0, u_edgeSoftness, distance);
+
+  // -------------------------------------------------------------------------
+  // Border: expanded from fill SDF, with AA
+  float borderAlpha =
+    1.0 -
+    smoothstep(
+      u_borderThickness - u_borderSoftness,
+      u_borderThickness,
+      abs(distance - u_borderThickness)
+    );
+
+  // -------------------------------------------------------------------------
+  // Apply colors layer-by-layer: background <- rect <- border.
+
+  // Blend background with fill
+  vec4 res_shadow_with_rect_color = mix(bg, fill, min(fill.a, smoothedAlpha));
+
+  // Blend (background+fill) with border
+  return mix(res_shadow_with_rect_color, border, min(border.a, borderAlpha));
+}
+
+void main() {
+  // Red border that should be below the blue border.
+  vec4 borderBottom = drawBox(
+    v_transition * (v_thickness * 2.0),
+    vec4(v_color, 0.0),
+    vec4(v_color, 0.5 - 0.5 * v_transition),
+    vec4(v_color, 0.4)
+  );
+
+  // Blue border that should be on top of the red border.
+  vec4 borderTop = drawBox(
+    v_thickness,
+    vec4(v_color, 0.0),
+    vec4(v_color, 0.0),
+    vec4(v_color, 1.0)
+  );
+
+  vec4 finalColor = mix(borderBottom, borderTop, borderTop.a);
+  gl_FragColor = finalColor;
+}