@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

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/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/Artboard/Renderer.vue

@@ -38,7 +38,10 @@
     key-code="O"
     weight="90"
   >
-    <Teleport v-if="isActive && dom.isReady.value" to="body">
+    <Teleport
+      v-if="isActive && dom.isReady.value"
+      :to="ui.mainLayoutElement.value"
+    >
       <Overview :artboard="artboard" />
     </Teleport>
   </PluginViewOption>
@@ -166,45 +169,63 @@ watch(options, function(newOptions) {
 const AUTOSCROLL_EDGE_ZONE = 130;
 const AUTOSCROLL_SPEED = 12;
 let autoScrollSpeed = 1;
+let lastScrollDirection = 0;
 function edgeStep(distance) {
   const ratio = distance / AUTOSCROLL_EDGE_ZONE;
   return Math.pow(ratio, 3) * AUTOSCROLL_SPEED;
 }
 let hasLeftAddList = false;
+let hasLeftEdgeZone = false;
 onBlokkliEvent("dragging:end", () => {
   hasLeftAddList = false;
+  hasLeftEdgeZone = false;
+  autoScrollSpeed = 1;
+  lastScrollDirection = 0;
 });
-onBlokkliEvent("animationFrame:before", ({ time, mouseY, mouseX }) => {
+function handleAutoScroll(mouseX, mouseY) {
   if (selection.isDragging.value) {
-    if (ui.addListOrientation.value === "horizontal") {
-      if (!hasLeftAddList) {
-        if (isInsideRect(mouseX, mouseY, ui.visibleViewportPadded.value)) {
-          hasLeftAddList = true;
-        } else {
-          return;
-        }
+    if (!hasLeftAddList) {
+      if (isInsideRect(mouseX, mouseY, ui.visibleViewportPadded.value)) {
+        hasLeftAddList = true;
+      } else {
+        return;
       }
     }
-    const viewportHeight = ui.viewport.value.height;
+    const viewportHeight = ui.visibleViewport.value.height;
     const currentOffset = artboard.getOffset();
-    const y = Math.min(Math.max(mouseY, 0), viewportHeight);
+    const y = Math.min(
+      Math.max(mouseY - ui.visibleViewport.value.y, 0),
+      viewportHeight
+    );
+    const isInEdgeZone = y < AUTOSCROLL_EDGE_ZONE || y > viewportHeight - AUTOSCROLL_EDGE_ZONE;
+    if (!isInEdgeZone && !hasLeftEdgeZone) {
+      hasLeftEdgeZone = true;
+    }
     let dy = 0;
-    if (y < AUTOSCROLL_EDGE_ZONE) {
-      const dist = AUTOSCROLL_EDGE_ZONE - y;
-      dy = edgeStep(dist);
-    } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
-      const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
-      dy = -edgeStep(dist);
-    } else {
+    let currentDirection = 0;
+    if (hasLeftEdgeZone && isInEdgeZone) {
+      if (y < AUTOSCROLL_EDGE_ZONE) {
+        const dist = AUTOSCROLL_EDGE_ZONE - y;
+        dy = edgeStep(dist);
+        currentDirection = 1;
+      } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
+        const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
+        dy = -edgeStep(dist);
+        currentDirection = -1;
+      }
+    }
+    if (currentDirection !== 0 && currentDirection !== lastScrollDirection) {
       autoScrollSpeed = 1;
+      lastScrollDirection = currentDirection;
     }
     if (dy !== 0) {
       artboard.setOffset(null, currentOffset.y + dy * autoScrollSpeed);
       autoScrollSpeed = Math.min(autoScrollSpeed * 1.01, 2.25);
     }
-  } else {
-    autoScrollSpeed = 1;
   }
+}
+onBlokkliEvent("animationFrame:before", ({ time, mouseY, mouseX }) => {
+  handleAutoScroll(mouseX, mouseY);
   artboard.loop(time);
   const artboardSize = artboard.getArtboardSize();
   if (artboardSize) {

package/dist/runtime/components/Edit/Features/Artboard/Scrollbar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value" defer>
     <div
       class="bk bk-artboard-scrollbar"
       :class="'bk-orientation-' + orientation"
@@ -13,11 +13,12 @@
 
 <script setup>
 import { scrollbar } from "artboard-deluxe";
-import { onBeforeUnmount, onMounted, ref } from "#imports";
+import { onBeforeUnmount, onMounted, ref, useBlokkli } from "#imports";
 const props = defineProps({
   artboard: { type: Object, required: true },
   orientation: { type: String, required: true }
 });
+const { ui } = useBlokkli();
 const el = ref();
 const thumb = ref();
 let scrollbarPlugin = null;

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

@@ -68,37 +68,11 @@ import { useBlokkli, ref } from "#imports";
 import ResultMarkup from "./ResultMarkup/index.vue";
 const { $t, adapter } = useBlokkli();
 const emit = defineEmits(["close", "submit"]);
-const prompt = ref(
-  `Write content for a page talking about VueJS. Please come up with good titles and content for each section.
-
-# Origins
-Write about when Vue was created and by whom.
-
-# Release of Vue 2
-When was it released, what were the changes.
-
-# Release of Vue 3
-Write about the big changes introduced in Vue 3.
-
-# Comparison to React
-`
-);
+const prompt = ref("");
 const isGenerating = ref(false);
 const result = ref({
   type: "markup",
-  content: `
-<h2>Origins</h2>
-<p>Vue was created in 2014 by Evan You, a former Google engineer. It was initially released to the public in February 2014.</p>
-
-<h2>Release of Vue 2</h2>
-<p>Vue 2 was released in September 2016. This release introduced significant improvements in performance and the virtual DOM implementation, making Vue even more efficient and capable.</p>
-
-<h2>Release of Vue 3</h2>
-<p>Vue 3, released in September 2020, brought several major changes, including the composition API, better TypeScript integration, and significant improvements in terms of performance, tree-shaking, and the overall developer experience.</p>
-
-<h2>Comparison to React</h2>
-<p>Vue is often compared to React due to their shared focus on building user interfaces. While React is developed and maintained by Facebook, Vue is an open-source project led by Evan You. Both frameworks have their strengths and weaknesses, and the choice between them often depends on the specific requirements of a project and the preferences of the development team.</p>
-`
+  content: ""
 });
 const onSubmit = () => {
   if (!result.value) {

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

@@ -1,25 +1,14 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
       <Overlay v-if="placedAction" @close="onClose" @submit="onSubmit" />
     </BlokkliTransition>
   </Teleport>
-
-  <PluginAddAction
-    type="assistant"
-    :title="$t('assistantAddAction', 'Add with AI Assistant')"
-    :description="
-  $t('assistantAddActionDescription', 'Add content using an AI assistant.')
-"
-    icon="robot"
-    color="rose"
-    @placed="placedAction = $event"
-  />
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
-import { PluginAddAction } from "#blokkli/plugins";
+import defineAddAction from "#blokkli/helpers/composables/defineAddAction";
 import { BlokkliTransition } from "#blokkli/components";
 import Overlay from "./Overlay/index.vue";
 const { adapter } = defineBlokkliFeature({
@@ -34,7 +23,7 @@ const { adapter } = defineBlokkliFeature({
   screenshot: "feature-assistant.jpg",
   dependencies: ["add-list"]
 });
-const { state, $t } = useBlokkli();
+const { state, $t, ui } = useBlokkli();
 const placedAction = ref(null);
 const onClose = () => {
   placedAction.value = null;
@@ -52,6 +41,21 @@ const onSubmit = async (result) => {
   }
   onClose();
 };
+defineAddAction(() => {
+  return {
+    id: "assistant",
+    title: $t("assistantAddAction", "Add with AI Assistant"),
+    description: $t(
+      "assistantAddActionDescription",
+      "Add content using an AI assistant."
+    ),
+    icon: "robot",
+    color: "rose",
+    callback: (data) => {
+      placedAction.value = data;
+    }
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/BlockScheduler/Dialog/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="block-scheduler"
     :title="$t('blockSchedulerDialogTitle', 'Manage scheduling')"
     :submit-label="$t('blockSchedulerDialogSubmit', 'Save schedule')"
     :width="900"

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

@@ -23,7 +23,7 @@
       </div>
     </template>
   </PluginItemAction>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <SchedulerDialog
         v-if="isVisible"
@@ -48,7 +48,7 @@ defineBlokkliFeature({
   description: "Adds support for scheduling blocks.",
   requiredAdapterMethods: ["setBlockScheduleDate"]
 });
-const { $t, state, selection, types } = useBlokkli();
+const { $t, state, selection, types, ui } = useBlokkli();
 const bundlesWithPublish = computed(
   () => types.generallyAvailableBundles.filter((v) => v.hasPublishOn).map((v) => v.id)
 );

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"
+      class="bk-parent bk-sidebar-padding bk-clipboard-list-item"
+      :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>