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

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

@@ -0,0 +1,5 @@
+export interface TextElement {
+    text: string;
+    element: HTMLElement;
+}
+export declare function collectTextElements(rootElement: HTMLElement): TextElement[];

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

@@ -0,0 +1,95 @@
+const blockElements = /* @__PURE__ */ new Set([
+  "ADDRESS",
+  "ARTICLE",
+  "ASIDE",
+  "BLOCKQUOTE",
+  "CANVAS",
+  "DD",
+  "DIV",
+  "DL",
+  "DT",
+  "FIELDSET",
+  "FIGCAPTION",
+  "FIGURE",
+  "FOOTER",
+  "FORM",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "HEADER",
+  "HR",
+  "LI",
+  "MAIN",
+  "NAV",
+  "OL",
+  "P",
+  "PRE",
+  "SECTION",
+  "TABLE",
+  "TD",
+  "TH",
+  "UL",
+  "DETAILS",
+  "SUMMARY",
+  "DIALOG"
+]);
+const isBlockElement = (element) => {
+  if (blockElements.has(element.tagName.toUpperCase())) {
+    return true;
+  }
+  if (element.tagName.toUpperCase() === "A" && element instanceof HTMLElement) {
+    const display = window.getComputedStyle(element).display;
+    return display === "block" || display === "flex" || display === "grid";
+  }
+  return false;
+};
+const containsBlockElements = (element) => {
+  for (const child of element.children) {
+    if (isBlockElement(child)) {
+      return true;
+    }
+    if (child instanceof HTMLElement && containsBlockElements(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+const getCleanText = (element) => {
+  return element.textContent?.trim() || "";
+};
+const traverse = (element, results) => {
+  if (element.tagName === "SCRIPT" || element.tagName === "STYLE") {
+    return;
+  }
+  if (isBlockElement(element)) {
+    if (!containsBlockElements(element)) {
+      const text = getCleanText(element);
+      if (text) {
+        results.push({
+          text,
+          element
+        });
+      }
+    } else {
+      for (const child of element.children) {
+        if (child instanceof HTMLElement) {
+          traverse(child, results);
+        }
+      }
+    }
+  } else {
+    for (const child of element.children) {
+      if (child instanceof HTMLElement) {
+        traverse(child, results);
+      }
+    }
+  }
+};
+export function collectTextElements(rootElement) {
+  const results = [];
+  traverse(rootElement, results);
+  return results;
+}

package/dist/runtime/components/Edit/Features/Analyze/analyzers/helpers/normalizeArray.d.ts

@@ -0,0 +1,3 @@
+type NormalizeToArray<T> = undefined | null | T | T[] | Promise<T | T[] | undefined | null>;
+export declare function normalizeToArray<T>(input: NormalizeToArray<T>): Promise<T[]>;
+export {};

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

@@ -0,0 +1,13 @@
+export async function normalizeToArray(input) {
+  if (input === null || input === void 0) {
+    return [];
+  }
+  if (input instanceof Promise) {
+    const resolved = await input;
+    if (resolved === null || resolved === void 0) {
+      return [];
+    }
+    return Array.isArray(resolved) ? resolved : [resolved];
+  }
+  return Array.isArray(input) ? input : [input];
+}

package/dist/runtime/components/Edit/Features/Analyze/analyzers/index.d.ts

@@ -0,0 +1,2 @@
+import { defineAnalyzer } from './defineAnalyzer.js';
+export { defineAnalyzer };

package/dist/runtime/components/Edit/Features/Analyze/analyzers/index.js

@@ -0,0 +1,2 @@
+import { defineAnalyzer } from "./defineAnalyzer.js";
+export { defineAnalyzer };

package/dist/runtime/components/Edit/Features/Analyze/analyzers/readability.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (options?: object | undefined) => import("./types.js").Analyzer;
+export default _default;

package/dist/runtime/components/Edit/Features/Analyze/analyzers/readability.js

@@ -0,0 +1,165 @@
+import { defineAnalyzer } from "./defineAnalyzer.js";
+import { TextReadability } from "@lunarisapp/readability";
+function isSupportedLangcode(v) {
+  if (v === "en" || v === "de" || v === "fr" || v === "it") {
+    return true;
+  }
+  return false;
+}
+const LIX_BANDS = { easyMax: 40, okMax: 59 };
+const CLI_HARD_MIN = 12;
+const ARI_HARD_MIN = 12;
+const GULPEASE_BANDS = { easyMin: 80, okMin: 60 };
+const MIN_WORDS_FOR_CONFIDENCE = 30;
+function mapLang(langcode) {
+  const lc = (langcode || "").toLowerCase();
+  if (lc.startsWith("de")) return "de_CH";
+  if (lc.startsWith("fr")) return "fr";
+  if (lc.startsWith("it")) return "it";
+  return "en_GB";
+}
+function segmentWords(text) {
+  if ("Segmenter" in Intl) {
+    const seg = new Intl.Segmenter(void 0, { granularity: "word" });
+    const out = [];
+    for (const s of seg.segment(text)) {
+      if (s.isWordLike)
+        out.push(text.slice(s.index, s.index + s.segment.length));
+    }
+    return out;
+  }
+  return text.match(/\p{Letter}+(?:['’]\p{Letter}+)?/gu) ?? [];
+}
+function countSentences(text) {
+  const m = text.match(/[.!?…]+["')\]]*(\s+|$)/g);
+  if (m?.length) return m.length;
+  return /\p{Letter}/u.test(text) ? 1 : 0;
+}
+function toBand(lang, scores) {
+  const { lix, cli, ari, gulpease } = scores;
+  if (typeof lix === "number") {
+    if (lix <= LIX_BANDS.easyMax) return "easy";
+    if (lix <= LIX_BANDS.okMax) return "ok";
+  }
+  if (lang === "it" && typeof gulpease === "number") {
+    if (gulpease >= GULPEASE_BANDS.easyMin) return "easy";
+    if (gulpease >= GULPEASE_BANDS.okMin) return "ok";
+    return "hard";
+  }
+  const hardVotes = (typeof cli === "number" && cli >= CLI_HARD_MIN ? 1 : 0) + (typeof ari === "number" && ari >= ARI_HARD_MIN ? 1 : 0);
+  if (hardVotes >= 1) return "hard";
+  return "ok";
+}
+function impactFor(lix) {
+  if (lix == null) return "moderate";
+  if (lix >= 70) return "critical";
+  if (lix >= 60) return "serious";
+  if (lix >= 50) return "moderate";
+  return "minor";
+}
+function summarizeImpact(nodes) {
+  const order = ["minor", "moderate", "serious", "critical"];
+  let maxIdx = -1;
+  for (const n of nodes) {
+    if (!n.impact) continue;
+    const i = order.indexOf(n.impact);
+    if (i > maxIdx) maxIdx = i;
+  }
+  return maxIdx >= 0 ? order[maxIdx] : void 0;
+}
+function format(n, d = 1) {
+  return typeof n === "number" && Number.isFinite(n) ? n.toFixed(d) : "\u2014";
+}
+function analyzeReadability(tr, blocks, langcode, $t) {
+  const lang = langcode ?? "en";
+  const nodes = [];
+  for (const b of blocks) {
+    const text = (b.text || "").trim();
+    if (!text) continue;
+    const words = segmentWords(text);
+    if (words.length < MIN_WORDS_FOR_CONFIDENCE) continue;
+    const sentences = Math.max(1, countSentences(text));
+    const avgSentLen = words.length / sentences;
+    const lix = safe(() => tr.lix(text));
+    const cli = safe(() => tr.colemanLiauIndex(text));
+    const ari = safe(() => tr.automatedReadabilityIndex(text));
+    const gulpease = lang === "it" ? safe(() => tr.gulpeaseIndex(text)) : void 0;
+    const band = toBand(lang, { lix, cli, ari, gulpease });
+    if (band !== "hard") continue;
+    const parts = [];
+    parts.push(
+      $t("analyzerReadabiliyHardToRead", `Hard to read (@lang).`).replace(
+        "@lang",
+        lang.toUpperCase()
+      )
+    );
+    if (lix != null) parts.push(`LIX ${format(lix)}`);
+    if (lang === "it" && gulpease != null)
+      parts.push(`Gulpease ${format(gulpease)}`);
+    if (cli != null) parts.push(`CLI ${format(cli)}`);
+    if (avgSentLen > 25) {
+      parts.push(
+        $t(
+          "analyzerReadabiliyAverageSentenceLength",
+          `Average sentence length @length \u2192 split sentences.`
+        ).replace("@length", format(avgSentLen))
+      );
+    } else {
+      parts.push(
+        $t(
+          "analyzerReadabiliyShorterSentences",
+          `Consider shorter sentences and simpler wording.`
+        )
+      );
+    }
+    nodes.push({
+      description: parts.join(" \xB7 "),
+      impact: impactFor(lix),
+      targets: [b.element]
+    });
+  }
+  return {
+    id: "low-readability",
+    title: $t("analyzerReadabiliyTitle", "Text readability issues"),
+    category: "text",
+    description: $t(
+      "analyzerReadabiliyDescription",
+      "Avoid texts that are hard to read."
+    ),
+    link: "https://en.wikipedia.org/wiki/Readability",
+    status: nodes.length ? "violation" : "pass",
+    nodes,
+    impact: summarizeImpact(nodes)
+  };
+}
+function safe(fn) {
+  try {
+    const n = fn();
+    return Number.isFinite(n) ? n : void 0;
+  } catch {
+    return void 0;
+  }
+}
+export default defineAnalyzer(() => {
+  let textReadability = null;
+  return {
+    id: "readability",
+    init: function(context) {
+      textReadability = new TextReadability({
+        lang: mapLang(context.langcode),
+        cache: true
+      });
+    },
+    run(context) {
+      if (!isSupportedLangcode(context.langcode)) {
+        return;
+      }
+      return analyzeReadability(
+        textReadability,
+        context.getTextElements(),
+        context.langcode,
+        context.$t
+      );
+    }
+  };
+});

package/dist/runtime/components/Edit/Features/Analyze/analyzers/types.d.ts

@@ -0,0 +1,44 @@
+import type { AnalyzerContext } from './helpers/Context.js';
+export type AnalyzeStatus = 'pass' | 'incomplete' | 'inapplicable' | 'violation';
+export type AnalyzeImpact = 'minor' | 'moderate' | 'serious' | 'critical';
+export type AnalyzeCategory = 'accessibility' | 'seo' | 'text' | 'content';
+export type AnalyzeNodeTarget = string | HTMLElement | {
+    uuid: string;
+};
+export type AnalyzeNode = {
+    description?: string;
+    impact?: AnalyzeImpact;
+    /**
+     * An array of either:
+     * - string: a valid selector
+     * - HTMLElement: the DOM node
+     *  - object: An object containing the UUID of a block
+     */
+    targets: AnalyzeNodeTarget | AnalyzeNodeTarget[];
+};
+export type AnalyzeResult = {
+    id: string;
+    title: string;
+    category: AnalyzeCategory;
+    description: string;
+    link?: string;
+    status: AnalyzeStatus;
+    nodes: AnalyzeNode | AnalyzeNode[];
+    impact?: AnalyzeImpact;
+    /**
+     * If true, the total summary score will be calculated for each target element.
+     */
+    scoreTargets?: boolean;
+};
+export type AnalyzeResultMapped = AnalyzeResult & {
+    plugin: string;
+};
+export type Analyzer = {
+    id: string;
+    /**
+     * If true, the raw page (without editor UI) is required for this analyzer.
+     */
+    requireRawPage?: boolean;
+    init?: (context: AnalyzerContext) => void | Promise<void>;
+    run: (context: AnalyzerContext) => undefined | null | AnalyzeResult | AnalyzeResult[] | Promise<undefined | null | AnalyzeResult | AnalyzeResult[]>;
+};

package/dist/runtime/components/Edit/Features/Analyze/helper.d.ts

@@ -0,0 +1,5 @@
+import type { AnalyzeCategory, AnalyzeStatus } from './analyzers/types.js';
+export declare function useAnalyzeHelper(): {
+    getCategoryLabel: (category: AnalyzeCategory) => string;
+    getStatusLabel: (status: AnalyzeStatus) => string;
+};

package/dist/runtime/components/Edit/Features/Analyze/helper.js

@@ -0,0 +1,28 @@
+import { useBlokkli } from "#imports";
+export function useAnalyzeHelper() {
+  const { $t } = useBlokkli();
+  function getCategoryLabel(category) {
+    if (category === "accessibility") {
+      return $t("analyzeCategoryAccessibility", "Accessibility");
+    } else if (category === "seo") {
+      return $t("analyzeCategorySeo", "SEO");
+    } else if (category === "content") {
+      return $t("analyzeCategoryContent", "Content");
+    }
+    return $t("analyzeCategoryText", "Text");
+  }
+  function getStatusLabel(status) {
+    if (status === "pass") {
+      return $t("analyzeStatusPass", "Pass");
+    } else if (status === "incomplete") {
+      return $t("analyzeStatusIncomplete", "Incomplete");
+    } else if (status === "violation") {
+      return $t("analyzeStatusViolation", "Violation");
+    }
+    return $t("analyzeStatusInapplicable", "Inapplicable");
+  }
+  return {
+    getCategoryLabel,
+    getStatusLabel
+  };
+}

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,53 @@
+<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, useRoute, computed } from "#imports";
+import { PluginBlockIndicator } from "#blokkli/plugins";
+import { emitMessage } from "#blokkli/helpers/eventBus";
+const route = useRoute();
+const { $t, adapter, dom } = useBlokkli();
+const items = computed(() => {
+  const anchorItems = [];
+  for (const entry of Object.entries(dom.registeredBlocks.value)) {
+    const uuid = entry[0];
+    const element = entry[1];
+    if (!element || !uuid) {
+      continue;
+    }
+    if (element.id) {
+      anchorItems.push({
+        id: element.id,
+        uuid
+      });
+    }
+  }
+  return anchorItems;
+});
+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);
+  }
+}
+</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/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(() => {