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

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

@@ -0,0 +1,77 @@
+<template>
+  <div class="bk-analyze-summary">
+    <div class="bk-analyze-summary-chart">
+      <Chart :data="summary" :percentage />
+      <ul>
+        <li v-for="item in summary" :key="item.status">
+          <div :style="{ backgroundColor: item.color }" />
+          <div>
+            <span>{{ item.label }}</span>
+            <span>{{ item.value }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { rgbaToString } from "#blokkli/helpers";
+import { computed, useBlokkli } from "#imports";
+import { useAnalyzeHelper } from "../helper";
+import Chart from "./Chart.vue";
+const props = defineProps({
+  results: { type: Array, required: true }
+});
+const { theme } = useBlokkli();
+const { getStatusLabel } = useAnalyzeHelper();
+const SORT = {
+  violation: 4,
+  incomplete: 3,
+  pass: 2,
+  inapplicable: 1
+};
+function getColor(status) {
+  if (status === "pass") {
+    return rgbaToString(theme.lime.value.normal);
+  } else if (status === "incomplete") {
+    return rgbaToString(theme.yellow.value.normal);
+  } else if (status === "violation") {
+    return rgbaToString(theme.red.value.normal);
+  }
+  return rgbaToString(theme.mono.value[200]);
+}
+const summary = computed(() => {
+  const byStatus = props.results.reduce(
+    (acc, result) => {
+      acc[result.status] ||= 0;
+      const nodes = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
+      const total = nodes.reduce((acc2, node) => {
+        const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
+        return acc2 + targets.length;
+      }, 0);
+      acc[result.status] += total;
+      return acc;
+    },
+    {}
+  );
+  return Object.entries(byStatus).map(([key, value]) => {
+    const status = key;
+    return {
+      status,
+      label: getStatusLabel(status),
+      value,
+      color: getColor(status)
+    };
+  }).filter((v) => v.status !== "inapplicable").sort((a, b) => {
+    return SORT[b.status] - SORT[a.status];
+  });
+});
+const percentage = computed(() => {
+  const total = summary.value.reduce((acc, item) => {
+    return acc + item.value;
+  }, 0);
+  const pass = summary.value.find((v) => v.status === "pass")?.value ?? 0;
+  return Math.round(pass / total * 100);
+});
+</script>

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

@@ -0,0 +1,6 @@
+import type { AnalyzeResultMapped } from '../analyzers/types.js';
+type __VLS_Props = {
+    results: AnalyzeResultMapped[];
+};
+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;

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

@@ -0,0 +1,12 @@
+import { type RunOptions } from 'axe-core';
+declare const _default: (options?: {
+    /**
+     * Selectors to exclude.
+     */
+    exclude?: string[];
+    /**
+     * Run options passed to axe-core.
+     */
+    runOptions?: RunOptions;
+} | undefined) => import("./types.js").Analyzer;
+export default _default;

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

@@ -0,0 +1,75 @@
+import { defineAnalyzer } from "./defineAnalyzer.js";
+import axe from "axe-core";
+import { falsy } from "#blokkli/helpers";
+import de from "axe-core/locales/de.json";
+import fr from "axe-core/locales/fr.json";
+import it from "axe-core/locales/it.json";
+function mapAxeNode(node) {
+  return {
+    description: node.failureSummary,
+    impact: node.impact ?? void 0,
+    targets: node.target.map((v) => {
+      if (Array.isArray(v)) {
+        return null;
+      }
+      return v;
+    }).filter(falsy)
+  };
+}
+function mapAxeResult(result, status) {
+  return {
+    id: result.id,
+    title: result.description,
+    category: "accessibility",
+    description: result.help,
+    link: result.helpUrl,
+    status,
+    impact: result.impact ?? void 0,
+    nodes: result.nodes.map(mapAxeNode)
+  };
+}
+function mapAxeResults(results, status) {
+  return results.map((v) => mapAxeResult(v, status));
+}
+function getLocale(langcode) {
+  if (langcode === "de") {
+    return de;
+  } else if (langcode === "fr") {
+    return fr;
+  } else if (langcode === "it") {
+    return it;
+  }
+  return null;
+}
+export default defineAnalyzer((options) => {
+  const userExclude = options?.exclude ?? [];
+  const elementContext = {
+    exclude: [
+      "#nuxt-devtools-container",
+      ".bk",
+      ".bk-sidebar",
+      "#bk-animation-canvas-webgl",
+      ...userExclude
+    ]
+  };
+  return {
+    id: "axe",
+    requireRawPage: true,
+    init: function(context) {
+      const locale = getLocale(context.interfaceLangcode) ?? {};
+      axe.configure({
+        locale
+      });
+    },
+    run: function() {
+      return axe.run(elementContext, options?.runOptions ?? {}).then((result) => {
+        return [
+          ...mapAxeResults(result.incomplete, "incomplete"),
+          ...mapAxeResults(result.inapplicable, "inapplicable"),
+          ...mapAxeResults(result.passes, "pass"),
+          ...mapAxeResults(result.violations, "violation")
+        ];
+      });
+    }
+  };
+});

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

@@ -0,0 +1,4 @@
+import type { Analyzer } from './types.js';
+type AnalyzerInit<O extends object> = (options?: O) => Analyzer;
+export declare function defineAnalyzer<O extends object, HasOptions = object extends O ? true : false>(init: AnalyzerInit<O>): HasOptions extends true ? (options?: O) => Analyzer : (options: O) => Analyzer;
+export {};

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

@@ -0,0 +1,5 @@
+export function defineAnalyzer(init) {
+  return function(options) {
+    return init(options);
+  };
+}

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

@@ -0,0 +1,32 @@
+import type { FieldListItemTyped } from '#blokkli-build/generated-types';
+import type { StateProvider } from '#blokkli/helpers/stateProvider';
+import type { TextProvider } from '#blokkli/helpers/textProvider';
+import type { MutatedField } from '#blokkli/types';
+import type { AnalyzeCategory, AnalyzeNode, AnalyzeResult, AnalyzeStatus } from '../types.js';
+import { type TextElement } from './collectTextElements.js';
+export declare class AnalyzerContext {
+    readonly langcode: string;
+    readonly interfaceLangcode: string;
+    readonly providerRootElement: HTMLElement;
+    private state;
+    readonly $t: TextProvider;
+    readonly mutatedFields: Readonly<MutatedField[]>;
+    /**
+     * The collected text elements.
+     */
+    private textElements;
+    constructor(langcode: string, interfaceLangcode: string, providerRootElement: HTMLElement, state: StateProvider, $t: TextProvider);
+    /**
+     * Get the field list item for a block UUID.
+     */
+    getFieldListItem(uuid: string): FieldListItemTyped | undefined;
+    /**
+     * Returns an array of all text elements inside the provider root element.
+     *
+     * A 'text element' is defined as the lowest block element that contains text.
+     * For example, a structure like `<p><span>Foobar</span> <strong>Test</strong></p>`
+     * would return as a single text element containing "Foobar Test".
+     */
+    getTextElements(): Readonly<TextElement[]>;
+    defineResult(id: string, title: string, category: AnalyzeCategory, description: string, status: AnalyzeStatus, nodes?: AnalyzeNode | AnalyzeNode[]): AnalyzeResult;
+}

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

@@ -0,0 +1,45 @@
+import { collectTextElements } from "./collectTextElements.js";
+export class AnalyzerContext {
+  constructor(langcode, interfaceLangcode, providerRootElement, state, $t) {
+    this.langcode = langcode;
+    this.interfaceLangcode = interfaceLangcode;
+    this.providerRootElement = providerRootElement;
+    this.state = state;
+    this.$t = $t;
+    this.mutatedFields = JSON.parse(JSON.stringify(state.mutatedFields.value));
+  }
+  mutatedFields;
+  /**
+   * The collected text elements.
+   */
+  textElements = null;
+  /**
+   * Get the field list item for a block UUID.
+   */
+  getFieldListItem(uuid) {
+    return this.state.getFieldListItem(uuid);
+  }
+  /**
+   * Returns an array of all text elements inside the provider root element.
+   *
+   * A 'text element' is defined as the lowest block element that contains text.
+   * For example, a structure like `<p><span>Foobar</span> <strong>Test</strong></p>`
+   * would return as a single text element containing "Foobar Test".
+   */
+  getTextElements() {
+    if (!this.textElements) {
+      this.textElements = collectTextElements(this.providerRootElement);
+    }
+    return this.textElements;
+  }
+  defineResult(id, title, category, description, status, nodes = []) {
+    return {
+      id,
+      title,
+      category,
+      description,
+      status,
+      nodes
+    };
+  }
+}

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
+  };
+}