@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

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

@@ -0,0 +1,44 @@
+<template>
+  <PluginSidebar
+    id="analyze"
+    :title="$t('analyzeSidebarTitle', 'Analyze')"
+    :tour-text="$t('analyzeTourText', 'Analyze the content of your page')"
+    icon="speedometer"
+  >
+    <Renderer :langcode="context.language" :analyzers />
+  </PluginSidebar>
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginSidebar } from "#blokkli/plugins";
+import Renderer from "./Renderer.vue";
+const { adapter } = defineBlokkliFeature({
+  id: "analyze",
+  label: "Analyze",
+  icon: "speedometer",
+  requiredAdapterMethods: ["getAnalyzers"],
+  description: "Analyze blocks and page for SEO, accessibility, etc.",
+  viewports: []
+});
+function getAdapterAnalyzers() {
+  const result = adapter.getAnalyzers();
+  if (Array.isArray(result)) {
+    return Promise.resolve(result);
+  }
+  return Promise.resolve(result).then((result2) => {
+    if (Array.isArray(result2)) {
+      return result2;
+    }
+    return [result2];
+  });
+}
+const analyzers = await getAdapterAnalyzers();
+const { $t, context } = useBlokkli();
+</script>
+
+<script>
+export default {
+  name: "Analyze"
+};
+</script>

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

@@ -0,0 +1,136 @@
+<template>
+  <PluginBlockIndicator
+    v-for="item in items"
+    id="anchor"
+    :key="item.uuid"
+    :uuid="item.uuid"
+    :label="'#' + item.id"
+    icon="anchor"
+    @click="onClick(item)"
+  />
+</template>
+
+<script setup>
+import { useBlokkli, ref, onMounted, onBeforeUnmount, useRoute } from "#imports";
+import { PluginBlockIndicator } from "#blokkli/plugins";
+import { emitMessage } from "#blokkli/helpers/eventBus";
+const route = useRoute();
+const { ui, $t, adapter } = useBlokkli();
+const rootElement = ui.providerElement();
+function getLinkForClipboard(item) {
+  if (adapter.buildAnchorLink) {
+    return adapter.buildAnchorLink(item.id, item.uuid);
+  }
+  return route.path + "#" + item.id;
+}
+function onClick(item) {
+  if (navigator.clipboard?.writeText) {
+    const link = getLinkForClipboard(item);
+    navigator.clipboard.writeText(link);
+    const message = $t(
+      "copiedToClipboardMessage",
+      '"@text" has been copied to your clipboard'
+    ).replace("@text", link);
+    emitMessage(message, "success", void 0, true);
+  }
+}
+const items = ref([]);
+const trackedElements = /* @__PURE__ */ new Map();
+let observer = null;
+const getAnchorData = (el) => {
+  const uuid = el.getAttribute("data-uuid");
+  const id = el.getAttribute("id");
+  return uuid && id ? { uuid, id } : null;
+};
+const syncItems = () => {
+  const newItems = Array.from(trackedElements.values());
+  items.value = newItems;
+};
+const checkElement = (el) => {
+  const data = getAnchorData(el);
+  const isTracked = trackedElements.has(el);
+  if (data && !isTracked) {
+    trackedElements.set(el, data);
+    return true;
+  } else if (!data && isTracked) {
+    trackedElements.delete(el);
+    return true;
+  } else if (data && isTracked) {
+    const existing = trackedElements.get(el);
+    if (existing.uuid !== data.uuid || existing.id !== data.id) {
+      trackedElements.set(el, data);
+      return true;
+    }
+  }
+  return false;
+};
+const processAddedNode = (node) => {
+  if (node.nodeType !== Node.ELEMENT_NODE) return false;
+  let changed = false;
+  const el = node;
+  if (el.hasAttribute("data-uuid") && el.hasAttribute("id")) {
+    changed = checkElement(el) || changed;
+  }
+  return changed;
+};
+const processRemovedNode = (node) => {
+  if (node.nodeType !== Node.ELEMENT_NODE) return false;
+  let changed = false;
+  const el = node;
+  if (!el.id) {
+    return false;
+  }
+  if (trackedElements.delete(el)) {
+    changed = true;
+  }
+  const toRemove = [];
+  for (const [trackedEl] of trackedElements) {
+    if (node.contains(trackedEl)) {
+      toRemove.push(trackedEl);
+    }
+  }
+  for (const el2 of toRemove) {
+    trackedElements.delete(el2);
+    changed = true;
+  }
+  return changed;
+};
+onMounted(() => {
+  const elements = rootElement.querySelectorAll("[data-uuid][id]");
+  for (const el of elements) {
+    const data = getAnchorData(el);
+    if (data) {
+      trackedElements.set(el, data);
+    }
+  }
+  syncItems();
+  observer = new MutationObserver((mutations) => {
+    let changed = false;
+    for (const mutation of mutations) {
+      if (mutation.type === "childList") {
+        for (const node of mutation.addedNodes) {
+          changed = processAddedNode(node) || changed;
+        }
+        for (const node of mutation.removedNodes) {
+          changed = processRemovedNode(node) || changed;
+        }
+      } else if (mutation.type === "attributes") {
+        const target = mutation.target;
+        changed = checkElement(target) || changed;
+      }
+    }
+    if (changed) {
+      syncItems();
+    }
+  });
+  observer.observe(rootElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-uuid", "id"]
+  });
+});
+onBeforeUnmount(() => {
+  observer?.disconnect();
+});
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <PluginViewOption
+    id="anchor"
+    v-slot="{ isActive }"
+    :label="$t('anchorToggle', 'Toggle anchor links')"
+    :title-on="$t('anchorShow', 'Show anchor links')"
+    :title-off="$t('anchorHide', 'Hide anchor links')"
+    icon="anchor"
+  >
+    <AnchorRenderer v-if="isActive" />
+  </PluginViewOption>
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginViewOption } from "#blokkli/plugins";
+import AnchorRenderer from "./Renderer.vue";
+defineBlokkliFeature({
+  id: "anchors",
+  label: "Anchors",
+  icon: "anchor",
+  description: "Displays indicators for blocks with anchor IDs",
+  viewports: ["desktop"]
+});
+const { $t } = useBlokkli();
+</script>
+
+<script>
+export default {
+  name: "Anchors"
+};
+</script>

package/dist/runtime/components/Edit/Features/Anchors/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;

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

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <ViewportBlockingRect
+    id="artboard-overview"
     ref="overviewEl"
     class="bk bk-artboard-overview"
     @touchstart.stop
@@ -13,12 +14,20 @@
     <div class="bk-artboard-overview-visible">
       <button ref="overviewVisibleEl" />
     </div>
-  </div>
+  </ViewportBlockingRect>
 </template>
 
 <script setup>
 import { overview } from "artboard-deluxe";
-import { onBeforeUnmount, onMounted, ref, useBlokkli, computed } from "#imports";
+import {
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useBlokkli,
+  computed,
+  useTemplateRef
+} from "#imports";
+import { ViewportBlockingRect } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const props = defineProps({
   artboard: { type: Object, required: true }
@@ -30,7 +39,7 @@ const overviewFillColor = computed(() => {
 const selectedColor = computed(() => {
   return theme.getColorString("accent", "700", 1);
 });
-const overviewEl = ref();
+const overviewEl = useTemplateRef("overviewEl");
 const overviewArtboardEl = ref();
 const overviewVisibleEl = ref();
 const canvas = ref();
@@ -71,15 +80,18 @@ function updateCanvas() {
 onBlokkliEvent("animationFrame", updateCanvas);
 onMounted(() => {
   if (overviewEl.value && overviewArtboardEl.value && overviewVisibleEl.value) {
-    pluginOverview = props.artboard.addPlugin(
-      overview({
-        element: overviewEl.value,
-        artboardElement: overviewArtboardEl.value,
-        visibleAreaElement: overviewVisibleEl.value,
-        padding: 20,
-        autoHeight: true
-      })
-    );
+    const el = overviewEl.value.$el;
+    if (el) {
+      pluginOverview = props.artboard.addPlugin(
+        overview({
+          element: el,
+          artboardElement: overviewArtboardEl.value,
+          visibleAreaElement: overviewVisibleEl.value,
+          padding: 20,
+          autoHeight: true
+        })
+      );
+    }
   }
 });
 onBeforeUnmount(() => {

package/dist/runtime/components/Edit/Features/Artboard/Renderer.vue

@@ -0,0 +1,296 @@
+<template>
+  <Scrollbar :artboard="artboard" orientation="y" />
+  <PluginToolbarButton
+    id="artboard_reset_zoom"
+    :title="$t('artboardResetZoom', 'Reset zoom')"
+    :shortcut-group="$t('artboard', 'Artboard')"
+    :tour-text="
+  $t(
+    'artboardToolbarButtonTourText',
+    'Shows the current zoom factor. Click on it to reset the zoom back to 100%.'
+  )
+"
+    icon="magnifier"
+    meta
+    key-code="0"
+    region="view-options"
+    weight="100"
+    @click="resetZoom"
+  >
+    <div class="bk-feature-canvas-button">
+      <span>{{ zoomLevel }}</span>
+    </div>
+  </PluginToolbarButton>
+
+  <PluginViewOption
+    id="artboardOverview"
+    v-slot="{ isActive }"
+    :label="$t('artboardOverviewToggle', 'Toggle overview')"
+    :title-on="$t('artboardOverviewShow', 'Show overview')"
+    :title-off="$t('artboardOverviewHide', 'Hide overview')"
+    :tour-text="
+  $t(
+    'artboardOverviewTourText',
+    `Displays a top level overview of your content.`
+  )
+"
+    icon="eye"
+    key-code="O"
+    weight="90"
+  >
+    <Teleport v-if="isActive && dom.isReady.value" to="body">
+      <Overview :artboard="artboard" />
+    </Teleport>
+  </PluginViewOption>
+</template>
+
+<script setup>
+import {
+  watch,
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import {
+  asValidNumber,
+  isInsideRect,
+  subtractRectFromViewport
+} from "#blokkli/helpers";
+import { PluginToolbarButton, PluginViewOption } from "#blokkli/plugins";
+import Overview from "./Overview/index.vue";
+import Scrollbar from "./Scrollbar/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import {
+  createArtboard,
+  touch,
+  wheel,
+  mouse,
+  dom as domPlugin
+} from "artboard-deluxe";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+const props = defineProps({
+  persist: { type: Boolean, required: true },
+  momentum: { type: Boolean, required: true },
+  scrollSpeed: { type: Number, required: true }
+});
+addElementClasses(document.documentElement, "bk-is-artboard");
+const { context, storage, ui, animation, $t, dom, selection } = useBlokkli();
+const artboardElement = ui.artboardElement();
+const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + "%");
+const PADDING = 50;
+const options = computed(() => {
+  return {
+    maxScale: ui.isMobile.value ? 1 : 3,
+    direction: ui.isMobile.value ? "vertical" : "both",
+    minScale: 0.1,
+    overscrollBounds: {
+      top: ui.visibleViewport.value.y + PADDING,
+      left: ui.visibleViewport.value.x + PADDING,
+      right: ui.viewport.value.width - ui.visibleViewport.value.width - ui.visibleViewport.value.x + PADDING,
+      bottom: PADDING
+    },
+    getBlockingRects: () => {
+      const toolbarRects = subtractRectFromViewport(
+        ui.viewport.value,
+        ui.visibleViewport.value
+      );
+      return [...toolbarRects, ...ui.viewportBlockingRects.value];
+    }
+  };
+});
+watch(options, function(newOptions) {
+  artboard.setOptions(newOptions);
+});
+const storageKey = computed(
+  () => "artboard:" + context.value.entityUuid + (ui.isMobile.value ? "mobile" : "desktop")
+);
+const savedState = storage.use(storageKey, null);
+const saveState = () => {
+  if (!props.persist) {
+    return;
+  }
+  savedState.value = {
+    offset: artboard.getOffset(),
+    scale: artboard.getScale()
+  };
+};
+let pluginWheel = null;
+const wheelOptions = computed(() => {
+  return {
+    useMomentumZoom: props.momentum,
+    useMomentumScroll: props.momentum,
+    interceptWheel: true,
+    scrollSpeed: props.scrollSpeed,
+    wheelZoomFactor: props.scrollSpeed
+  };
+});
+watch(wheelOptions, function(newOptions) {
+  if (pluginWheel) {
+    pluginWheel.options.setAll(newOptions);
+  }
+});
+watch(selection.uuids, function() {
+  if (artboard.getMomentum()) {
+    artboard.cancelAnimation();
+  }
+});
+function getArtboard() {
+  pluginWheel = wheel(wheelOptions.value);
+  return createArtboard(
+    ui.rootElement(),
+    [
+      mouse(),
+      touch(),
+      pluginWheel,
+      domPlugin({
+        element: artboardElement,
+        precision: 1,
+        restoreStyles: true
+      })
+    ],
+    {
+      initTransform: savedState.value && props.persist ? {
+        x: asValidNumber(savedState.value.offset.x, 0),
+        y: asValidNumber(savedState.value.offset.y, 0),
+        scale: asValidNumber(savedState.value?.scale, 1)
+      } : void 0,
+      ...options.value
+    }
+  );
+}
+const artboard = getArtboard();
+watch(options, function(newOptions) {
+  artboard.setOptions(newOptions);
+});
+const AUTOSCROLL_EDGE_ZONE = 130;
+const AUTOSCROLL_SPEED = 12;
+let autoScrollSpeed = 1;
+function edgeStep(distance) {
+  const ratio = distance / AUTOSCROLL_EDGE_ZONE;
+  return Math.pow(ratio, 3) * AUTOSCROLL_SPEED;
+}
+let hasLeftAddList = false;
+onBlokkliEvent("dragging:end", () => {
+  hasLeftAddList = false;
+});
+onBlokkliEvent("animationFrame:before", ({ time, mouseY, mouseX }) => {
+  if (selection.isDragging.value) {
+    if (ui.addListOrientation.value === "horizontal") {
+      if (!hasLeftAddList) {
+        if (isInsideRect(mouseX, mouseY, ui.visibleViewportPadded.value)) {
+          hasLeftAddList = true;
+        } else {
+          return;
+        }
+      }
+    }
+    const viewportHeight = ui.viewport.value.height;
+    const currentOffset = artboard.getOffset();
+    const y = Math.min(Math.max(mouseY, 0), viewportHeight);
+    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 {
+      autoScrollSpeed = 1;
+    }
+    if (dy !== 0) {
+      artboard.setOffset(null, currentOffset.y + dy * autoScrollSpeed);
+      autoScrollSpeed = Math.min(autoScrollSpeed * 1.01, 2.25);
+    }
+  } else {
+    autoScrollSpeed = 1;
+  }
+  artboard.loop(time);
+  const artboardSize = artboard.getArtboardSize();
+  if (artboardSize) {
+    ui.artboardSize.value.height = artboardSize.height;
+    ui.artboardSize.value.width = artboardSize.width;
+  }
+  const offset = artboard.getOffset();
+  ui.artboardOffset.value.x = asValidNumber(Math.ceil(offset.x), 0);
+  ui.artboardOffset.value.y = asValidNumber(Math.ceil(offset.y), 0);
+  ui.artboardScale.value = asValidNumber(artboard.getScale(), 1);
+  animation.requestDraw();
+});
+onMounted(() => {
+  window.addEventListener("beforeunload", saveState);
+});
+onBeforeUnmount(() => {
+  saveState();
+  artboard.destroy();
+  window.removeEventListener("beforeunload", saveState);
+});
+const resetZoom = () => {
+  artboard.resetZoom({
+    duration: 500
+  });
+  animation.requestDraw();
+};
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "Home") {
+    e.originalEvent.preventDefault();
+    artboard.scrollToTop();
+    animation.requestDraw();
+  } else if (e.code === "End") {
+    e.originalEvent.preventDefault();
+    artboard.scrollToEnd();
+    animation.requestDraw();
+  } else if (e.code === "PageUp") {
+    e.originalEvent.preventDefault();
+    artboard.scrollPageUp();
+    animation.requestDraw();
+  } else if (e.code === "PageDown") {
+    e.originalEvent.preventDefault();
+    artboard.scrollPageDown();
+    animation.requestDraw();
+  } else if (e.code === "ArrowUp") {
+    e.originalEvent.preventDefault();
+    artboard.scrollUp();
+    animation.requestDraw();
+  } else if (e.code === "ArrowDown") {
+    e.originalEvent.preventDefault();
+    artboard.scrollDown();
+    animation.requestDraw();
+  } else if (e.code === "0" && e.meta) {
+    e.originalEvent.preventDefault();
+    resetZoom();
+  } else if (e.code === "1" && e.meta) {
+    e.originalEvent.preventDefault();
+    artboard.scaleToFit();
+    animation.requestDraw();
+  }
+});
+onBlokkliEvent("scrollIntoView", (e) => {
+  if ("uuid" in e) {
+    const rect = dom.getBlockRect(e.uuid);
+    if (!rect) {
+      return;
+    }
+    if (dom.isBlockVisible(e.uuid)) {
+      return;
+    }
+    artboard.scrollIntoView(rect, {
+      scale: "none",
+      axis: "y",
+      behavior: e.immediate ? "instant" : "auto"
+    });
+  } else {
+    if (artboardElement.contains(e.element)) {
+      artboard.scrollElementIntoView(e.element, {
+        scale: "none",
+        axis: "y",
+        behavior: e.immediate ? "instant" : "auto"
+      });
+    } else {
+      artboard.scrollToTop({
+        duration: 0
+      });
+    }
+  }
+});
+</script>

package/dist/runtime/components/Edit/Features/Artboard/Renderer.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    persist: boolean;
+    momentum: boolean;
+    scrollSpeed: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;