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

package/dist/runtime/components/Edit/Features/{BlockAddList → AddList/Blocks}/index.vue

@@ -1,9 +1,5 @@
 <template>
-  <Teleport
-    v-if="selectableBundles.length && shouldRender"
-    :key="renderKey"
-    to="#blokkli-add-list-blocks"
-  >
+  <Sortli v-if="shouldRender" id="blokkli-add-list-blocks" :build-item>
     <AddListItem
       v-for="(type, i) in sortedList"
       v-show="type.isVisible"
@@ -17,68 +13,30 @@
       data-element-type="new"
       :data-item-bundle="type.id"
     />
-    <PluginTourItem
-      id="block-add-list"
-      :title="$t('blockAddListTourTitle', 'Favorite blocks')"
-      :text="
+  </Sortli>
+  <PluginTourItem
+    v-if="shouldRender"
+    id="block-add-list"
+    :title="$t('blockAddListTourTitle', 'Favorite blocks')"
+    :text="
   $t(
     'blockAddListTourText',
     'Right-click on a block to add or remove them from your favorites. Favorites are highlighted and always displayed at the top of the list.'
   )
 "
-      selector="#blokkli-add-list-blocks"
-    />
-  </Teleport>
-  <Teleport
-    v-if="
-  ui.addListOrientation.value === 'sidebar' && types.generallyAvailableBundles.length > 10 && shouldRender
-"
-    :key="renderKey"
-    to="#blokkli-add-list-sidebar-before"
-  >
-    <div class="bk bk-list-sidebar-form">
-      <input
-        id="add_block_search"
-        v-model="searchText"
-        type="search"
-        class="bk-form-input"
-        :placeholder="$t('addListInputPlaceholder', 'Search available blocks')"
-        required
-      />
-    </div>
-  </Teleport>
+    selector="#blokkli-add-list-blocks"
+  />
 </template>
 
 <script setup>
-import {
-  ref,
-  computed,
-  useBlokkli,
-  defineBlokkliFeature,
-  nextTick
-} from "#imports";
-import { AddListItem } from "#blokkli/components";
+import { ref, computed, useBlokkli } from "#imports";
+import { AddListItem, Sortli } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 import { PluginTourItem } from "#blokkli/plugins";
 import { getFieldKey, onlyUnique } from "#blokkli/helpers";
-const { settings } = defineBlokkliFeature({
-  id: "block-add-list",
-  label: "Block Add List",
-  icon: "plus",
-  description: "Renders a list of block bundles that can be added to the current page.",
-  dependencies: ["add-list"],
-  screnshot: "feature-block-add-list.jpg",
-  settings: {
-    hideDisabledBlocks: {
-      type: "checkbox",
-      label: "Hide blocks that can't be added",
-      description: `Hides blocks from the "Add List" if they can't be added to anywhere.`,
-      group: "appearance",
-      default: false
-    }
-  }
+const props = defineProps({
+  hideDisabledBlocks: { type: Boolean, required: false }
 });
 const {
   selection,
@@ -94,6 +52,17 @@ const {
   definitions,
   blocks
 } = useBlokkli();
+function buildItem(element) {
+  const itemBundle = element.dataset.sortliId;
+  if (!itemBundle) {
+    return;
+  }
+  return {
+    itemType: "new",
+    itemBundle,
+    element: () => element
+  };
+}
 const shouldRender = computed(() => state.editMode.value === "editing");
 const searchText = ref("");
 const itemEntityType = runtimeConfig.itemEntityType;
@@ -156,7 +125,7 @@ const sortedList = computed(() => {
     return {
       ...v,
       isDisabled,
-      isVisible: isVisible && (!settings.value.hideDisabledBlocks || !isDisabled),
+      isVisible: isVisible && (!props.hideDisabledBlocks || !isDisabled),
       isFavorite: favorites.value.includes(v.id)
     };
   }).sort((a, b) => {
@@ -333,15 +302,10 @@ defineCommands(() => {
     ...getAppendEndCommands()
   ];
 });
-onBlokkliEvent("add-list:change", () => {
-  nextTick(() => {
-    renderKey.value = Math.round(Math.random() * 1e9).toString();
-  });
-});
 </script>
 
 <script>
 export default {
-  name: "BlockAddList"
+  name: "AddListBlocks"
 };
 </script>

package/dist/runtime/components/Edit/Features/{Hover/Overlay → AddList/Blocks}/index.vue.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<{
-    gl: WebGLRenderingContext;
+    hideDisabledBlocks?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    gl: WebGLRenderingContext;
+    hideDisabledBlocks?: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -11,10 +11,10 @@
   >
     <div>
       <div id="blokkli-add-list-sidebar-before" />
-      <Sortli class="bk bk-list-sidebar">
-        <div id="blokkli-add-list-blocks" />
-        <div id="blokkli-add-list-actions" />
-      </Sortli>
+      <div class="bk bk-list-sidebar">
+        <AddListBlocks />
+        <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction" />
+      </div>
     </div>
   </PluginSidebar>
   <Teleport v-else-if="shouldRender" to="body">
@@ -30,10 +30,10 @@
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
     >
-      <Sortli class="bk-list">
-        <div id="blokkli-add-list-blocks" />
-        <div id="blokkli-add-list-actions" />
-      </Sortli>
+      <div class="bk-list">
+        <AddListBlocks />
+        <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction" />
+      </div>
     </div>
     <PluginTourItem
       id="add-blocks"
@@ -56,6 +56,7 @@ import {
 import { Sortli } from "#blokkli/components";
 import { PluginSidebar, PluginTourItem } from "#blokkli/plugins";
 import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import AddListBlocks from "./Blocks/index.vue";
 const { settings } = defineBlokkliFeature({
   id: "add-list",
   icon: "plus",
@@ -82,10 +83,30 @@ const { settings } = defineBlokkliFeature({
           icon: "ui-list-sidebar"
         }
       }
+    },
+    hideDisabledBlocks: {
+      type: "checkbox",
+      label: "Hide blocks that can't be added",
+      description: `Hides blocks from the "Add List" if they can't be added to anywhere.`,
+      group: "appearance",
+      default: false
     }
   },
   screenshot: "feature-add-list.jpg"
 });
+function buildItemAction(element2) {
+  const actionType = element2.dataset.sortliId;
+  if (!actionType) {
+    return;
+  }
+  const itemBundle = element2.dataset.itemBundle;
+  return {
+    itemType: "action",
+    actionType,
+    itemBundle,
+    element: () => element2
+  };
+}
 const { state, $t, eventBus, ui, element } = useBlokkli();
 const hasContextMenuOpen = computed(
   () => ui.openContextMenu.value.startsWith("add_list_item_")

package/dist/runtime/components/Edit/Features/Analyze/{Renderer.vue → Main.vue}

@@ -39,12 +39,9 @@
       <Results :results="resultsFiltered" />
     </div>
   </div>
-  <Overlay
-    v-if="
-  resultsFiltered.length && gl && animation.webglEnabled.value && !isStale
-"
+  <Renderer
+    v-if="resultsFiltered.length && !isStale"
     :results="resultsFiltered"
-    :gl="gl"
   />
 </template>
 
@@ -52,7 +49,7 @@
 import { computed, useBlokkli, useState, ref } from "#imports";
 import Results from "./Results/Results.vue";
 import AnalyzeSummary from "./Summary/index.vue";
-import Overlay from "./Overlay/index.vue";
+import Renderer from "./Renderer/index.vue";
 import { useAnalyzeHelper } from "./helper";
 import { FormSelect, RelativeTime } from "#blokkli/components";
 import { AnalyzerContext } from "./analyzers/helpers/Context";
@@ -64,9 +61,8 @@ const props = defineProps({
   analyzers: { type: Array, required: true }
 });
 const ALL = "ALL";
-const { $t, ui, state, animation } = useBlokkli();
+const { $t, ui, state } = useBlokkli();
 const { getCategoryLabel } = useAnalyzeHelper();
-const gl = animation.gl();
 const currentPlugin = ref("readability");
 const hasRunOnce = useState(() => false);
 const results = useState("blokkli:analyze", () => []);

package/dist/runtime/components/Edit/Features/Analyze/{Overlay → Renderer}/fragment.glsl

@@ -1,10 +1,14 @@
+#version 300 es
+
 precision highp float;
 
-varying vec4 v_quad;
-varying float v_rect_type;
-varying vec3 v_color;
-varying vec2 v_rect_size;
-varying vec2 v_rect_center;
+in vec4 v_quad;
+in float v_rect_type;
+in vec3 v_color;
+in vec2 v_rect_size;
+in vec2 v_rect_center;
+
+out vec4 fragColor;
 
 uniform float u_dpi;
 
@@ -54,5 +58,5 @@ void main() {
   // Mix with border
   vec4 finalColor = mix(res_with_fill, border, borderAlpha * border.a);
 
-  gl_FragColor = finalColor;
+  fragColor = finalColor;
 }

package/dist/runtime/components/Edit/Features/Analyze/{Overlay → Renderer}/index.vue

@@ -16,11 +16,9 @@ import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
 import { toShaderColor } from "#blokkli/helpers";
 const props = defineProps({
-  results: { type: Array, required: true },
-  gl: { type: null, required: true }
+  results: { type: Array, required: true }
 });
 const { animation, ui, theme, selection, eventBus, element } = useBlokkli();
-const programInfo = animation.registerProgram("analyze", props.gl, [vs, fs]);
 const statusPriority = {
   violation: 3,
   incomplete: 2,
@@ -66,7 +64,7 @@ class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
   clearCache() {
     this.rectCache.clear();
   }
-  getBufferInfo(force) {
+  getBufferInfo(gl, force) {
     const key = nodes.value.map((node, index) => {
       if (!this.rectCache.has(node.element)) {
         this.rectCache.set(
@@ -109,30 +107,60 @@ class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
       }
       this.prevKey = key;
     }
-    if (hasChanged) {
-      this.bufferInfo = this.createBufferInfo();
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
 }
-const collector = new AnalyzeRectangleBufferCollector(props.gl);
-defineRenderer("analyze-overlay", {
+const { collector } = defineRenderer("analyze-overlay", {
   zIndex: 500,
+  collector: () => new AnalyzeRectangleBufferCollector(),
+  program: () => ({ shaders: [vs, fs] }),
   enabled: () => !selection.isMultiSelecting.value && !selection.isDragging.value,
-  render: (ctx) => {
-    ctx.gl.useProgram(programInfo.program);
-    const { info } = collector.getBufferInfo();
+  render: (_ctx, gl, program) => {
+    gl.useProgram(program.program);
+    const { info } = collector.getBufferInfo(gl);
     if (!info) {
       return;
     }
-    setUniforms(programInfo, {
+    setUniforms(program, {
       u_color_violation: toShaderColor(theme.red.value.normal),
       u_color_incomplete: toShaderColor(theme.yellow.value.normal),
       u_color_pass: toShaderColor(theme.lime.value.normal)
     });
-    animation.setSharedUniforms(ctx.gl, programInfo);
-    setBuffersAndAttributes(ctx.gl, programInfo, info);
-    drawBufferInfo(ctx.gl, info, ctx.gl.TRIANGLES);
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, info);
+    drawBufferInfo(gl, info, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    collector.getBufferInfo();
+    const rects = Object.values(collector.rects);
+    if (rects.length === 0) {
+      return;
+    }
+    const rgbaToCss = (rgb, alpha) => {
+      return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+    };
+    const colorViolation = rgbaToCss(theme.red.value.normal, 0.3);
+    const colorIncomplete = rgbaToCss(theme.yellow.value.normal, 0.3);
+    const colorPass = rgbaToCss(theme.lime.value.normal, 0.3);
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      let fillColor = colorPass;
+      if (rect.status === "violation") {
+        fillColor = colorViolation;
+      } else if (rect.status === "incomplete") {
+        fillColor = colorIncomplete;
+      }
+      ctx2d.fillStyle = fillColor;
+      ctx2d.fillRect(
+        (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi,
+        (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi,
+        rect.width * ctx.artboardScale * ctx.dpi,
+        rect.height * ctx.artboardScale * ctx.dpi
+      );
+    }
   }
 });
 onBlokkliEvent("ui:resized", function() {

package/dist/runtime/components/Edit/Features/Analyze/{Overlay → Renderer}/index.vue.d.ts

@@ -1,9 +1,7 @@
 import type { AnalyzeResultMapped } from '#blokkli/analyzer/types';
 declare const _default: import("vue").DefineComponent<{
     results: AnalyzeResultMapped[];
-    gl: WebGLRenderingContext;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     results: AnalyzeResultMapped[];
-    gl: WebGLRenderingContext;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Analyze/{Overlay → Renderer}/vertex.glsl

@@ -1,11 +1,13 @@
+#version 300 es
+
 precision highp float;
 
 // [x, y] position.
-attribute vec2 a_position;
+in vec2 a_position;
 // The [x,y,width, height] of the quad the vertex belongs to.
-attribute vec4 a_quad;
-attribute float a_rect_id;
-attribute float a_rect_type;
+in vec4 a_quad;
+in float a_rect_id;
+in float a_rect_type;
 
 // The global scaling applied to all quads.
 uniform float u_scale;
@@ -19,11 +21,11 @@ uniform vec3 u_color_violation;
 uniform vec3 u_color_incomplete;
 uniform vec3 u_color_pass;
 
-varying vec4 v_quad;
-varying float v_rect_type;
-varying vec3 v_color;
-varying vec2 v_rect_size;
-varying vec2 v_rect_center;
+out vec4 v_quad;
+out float v_rect_type;
+out vec3 v_color;
+out vec2 v_rect_size;
+out vec2 v_rect_center;
 
 void main() {
   // Apply global scale and offsets

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodesTarget.vue

@@ -46,21 +46,33 @@ function getElement() {
   }
   return null;
 }
+function getElementLabel(tagName) {
+  return `<${tagName.toLowerCase()}>`;
+}
 function getLabel() {
   if (props.target) {
     if (typeof props.target === "string") {
       return props.target;
     } else if (props.target instanceof HTMLElement) {
-      return (props.target.textContent ?? "").slice(0, 50);
+      if (props.target instanceof HTMLImageElement) {
+        if (props.target.alt) {
+          return props.target.alt.slice(0, 50);
+        }
+      }
+      const textContent = (props.target.textContent ?? "").slice(0, 50);
+      if (textContent) {
+        return textContent;
+      }
+      return getElementLabel(props.target.tagName);
     } else if (typeof props.target === "object" && "uuid" in props.target) {
       return props.target.uuid;
     }
   }
 }
 function findClosestUuid(element2) {
-  const closestBlock = element2.closest("[data-uuid]");
+  const closestBlock = element2.closest("[data-bk-uuid]");
   if (closestBlock instanceof HTMLElement) {
-    const uuid = closestBlock.dataset.uuid;
+    const uuid = closestBlock.dataset.bkUuid;
     if (uuid) {
       return uuid;
     }

package/dist/runtime/components/Edit/Features/Analyze/analyzers/helpers/collectTextElements.js

@@ -64,6 +64,9 @@ const traverse = (element, results) => {
   if (element.tagName === "SCRIPT" || element.tagName === "STYLE") {
     return;
   }
+  if (element.classList.contains("bk-skip-analyze")) {
+    return;
+  }
   if (isBlockElement(element)) {
     if (!containsBlockElements(element)) {
       const text = getCleanText(element);

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

@@ -5,14 +5,18 @@
     :tour-text="$t('analyzeTourText', 'Analyze the content of your page')"
     icon="speedometer"
   >
-    <Renderer :langcode="context.language" :analyzers />
+    <AnalyzerMain
+      :key="animation.renderKey.value"
+      :langcode="context.language"
+      :analyzers
+    />
   </PluginSidebar>
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature } from "#imports";
 import { PluginSidebar } from "#blokkli/plugins";
-import Renderer from "./Renderer.vue";
+import AnalyzerMain from "./Main.vue";
 const { adapter } = defineBlokkliFeature({
   id: "analyze",
   label: "Analyze",
@@ -34,7 +38,7 @@ function getAdapterAnalyzers() {
   });
 }
 const analyzers = await getAdapterAnalyzers();
-const { $t, context } = useBlokkli();
+const { $t, context, animation } = useBlokkli();
 </script>
 
 <script>

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

@@ -7,14 +7,14 @@
     :title-off="$t('anchorHide', 'Hide anchor links')"
     icon="anchor"
   >
-    <AnchorRenderer v-if="isActive" />
+    <AnchorOverlay v-if="isActive" />
   </PluginViewOption>
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature } from "#imports";
 import { PluginViewOption } from "#blokkli/plugins";
-import AnchorRenderer from "./Renderer.vue";
+import AnchorOverlay from "./Overlay/index.vue";
 defineBlokkliFeature({
   id: "anchors",
   label: "Anchors",

package/dist/runtime/components/Edit/Features/Clipboard/List/index.vue

@@ -1,16 +1,10 @@
 <template>
-  <Sortli class="bk-clipboard-list">
+  <Sortli class="bk-clipboard-list" :build-item>
     <div
       v-for="(item, index) in items"
       :key="index + item.data + renderKey"
       class="bk-parent bk-sidebar-padding"
-      data-element-type="clipboard"
-      :data-sortli-id="'clipboard_' + index"
-      :data-item-bundle="item.itemBundle"
-      :data-clipboard-type="item.type"
-      :data-clipboard-id="item.id"
-      :data-clipboard-data="item.data"
-      :data-clipboard-additional="item.additional"
+      :data-sortli-id="index"
     >
       <div class="bk-clipboard-item">
         <div class="bk bk-clipboard-item-header">
@@ -24,7 +18,7 @@
             <Icon name="delete" />
           </button>
         </div>
-        <div class="bk-drop-element">
+        <div>
           <div
             v-if="item.type === 'text'"
             class="bk-clipboard-item-inner"
@@ -50,7 +44,7 @@ import { ItemIcon, Icon, Sortli } from "#blokkli/components";
 import ClipboardItemVideo from "./Item/Video.vue";
 import ClipboardItemFile from "./Item/File.vue";
 const renderKey = ref(0);
-defineProps({
+const props = defineProps({
   items: { type: Array, required: true }
 });
 defineEmits(["remove"]);
@@ -58,4 +52,21 @@ const { types } = useBlokkli();
 function getLabel(bundle) {
   return types.getBlockBundleDefinition(bundle)?.label || bundle;
 }
+function buildItem(element) {
+  if (!element.dataset.sortliId) {
+    return;
+  }
+  const index = Number.parseInt(element.dataset.sortliId);
+  const item = props.items[index];
+  if (!item) {
+    return;
+  }
+  return {
+    itemType: "clipboard",
+    element: () => element,
+    itemBundle: item.itemBundle,
+    additional: item.additional,
+    clipboardId: item.id
+  };
+}
 </script>

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

@@ -63,16 +63,6 @@
       </div>
     </div>
   </PluginSidebar>
-  <PluginItemDropdown
-    id="clipboard"
-    :title="$t('clipboard', 'Clipboard')"
-    :enabled="
-  !!selection.items.value.length && state.editMode.value === 'editing'
-"
-    :items="itemDropdownItems"
-    icon="clipboard"
-    @select="onSelectDropdownItem"
-  />
 </template>
 
 <script setup>
@@ -84,7 +74,8 @@ import {
   onUnmounted,
   computed
 } from "#imports";
-import { PluginSidebar, PluginItemDropdown } from "#blokkli/plugins";
+import { PluginSidebar } from "#blokkli/plugins";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
 import ClipboardList from "./List/index.vue";
 import { generateUUID, getFieldKey } from "#blokkli/helpers";
 import { Icon } from "#blokkli/components";
@@ -529,6 +520,22 @@ defineShortcut([
     meta: true
   }
 ]);
+defineItemDropdownAction(() => {
+  if (selection.items.value.length && state.editMode.value === "editing") {
+    return itemDropdownItems.value.map((item) => ({
+      id: "clipboard-" + item.id,
+      label: item.label,
+      icon: item.icon,
+      description: item.description,
+      enabled: item.enabled,
+      group: "clipboard",
+      weight: 100,
+      callback: () => {
+        onSelectDropdownItem(item);
+      }
+    }));
+  }
+});
 onBlokkliEvent("drop:clipboardItem", async (data) => {
   const item = pastedItems.value.find((v) => v.id === data.id);
   if (!item) {

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

@@ -1,12 +1,5 @@
 <template>
-  <PluginItemDropdown
-    id="conversions"
-    :title="$t('convertTo', 'Convert to...')"
-    :enabled="!!possibleConversions.length"
-    :items="possibleConversions"
-    weight="900"
-    @select="onConvert($event.id)"
-  />
+  <div />
 </template>
 
 <script setup>
@@ -17,8 +10,8 @@ import {
   useLazyAsyncData,
   watch
 } from "#imports";
-import { PluginItemDropdown } from "#blokkli/plugins";
 import { falsy } from "#blokkli/helpers";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
 const { adapter } = defineBlokkliFeature({
   id: "conversions",
   label: "Conversions",
@@ -68,6 +61,20 @@ const possibleConversions = computed(() => {
     };
   });
 });
+defineItemDropdownAction(() => {
+  if (possibleConversions.value.length) {
+    return possibleConversions.value.map((conversion) => ({
+      id: "conversion-" + conversion.id,
+      label: conversion.label,
+      bundle: conversion.bundle,
+      group: "conversions",
+      weight: 900,
+      callback: () => {
+        onConvert(conversion.id);
+      }
+    }));
+  }
+});
 </script>
 
 <script>