@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.51

package/dist/runtime/editor/helpers/diff/index.js

@@ -0,0 +1,227 @@
+import diff from "html-diff-ts";
+const PAIR_RE = /<del class="diffmod">((?:[^<]|<(?!\/del>))*?)<\/del><ins class="diffmod">((?:[^<]|<(?!\/ins>))*?)<\/ins>/g;
+function tokenize(html) {
+  const tokens = [];
+  let lastIndex = 0;
+  PAIR_RE.lastIndex = 0;
+  let match = PAIR_RE.exec(html);
+  while (match) {
+    if (match.index > lastIndex) {
+      tokens.push({ type: "other", text: html.slice(lastIndex, match.index) });
+    }
+    tokens.push({
+      type: "pair",
+      del: match[1] || "",
+      ins: match[2] || "",
+      raw: match[0]
+    });
+    lastIndex = match.index + match[0].length;
+    match = PAIR_RE.exec(html);
+  }
+  if (lastIndex < html.length) {
+    tokens.push({ type: "other", text: html.slice(lastIndex) });
+  }
+  return tokens;
+}
+function isMergeableSeparator(text) {
+  if (/<[^>]+>/.test(text)) {
+    return false;
+  }
+  if (/^(?:\s|&nbsp;)*$/.test(text)) {
+    return true;
+  }
+  return text.length <= 20;
+}
+function cleanupDiffMods(html) {
+  const tokens = tokenize(html);
+  const runs = [];
+  let i = 0;
+  while (i < tokens.length) {
+    const token = tokens[i];
+    if (token?.type !== "pair") {
+      i++;
+      continue;
+    }
+    const run = { startIndex: i, endIndex: i + 1, pairCount: 1 };
+    let j = i + 1;
+    while (j < tokens.length) {
+      const next = tokens[j];
+      if (!next) break;
+      if (next.type === "pair") {
+        run.endIndex = j + 1;
+        run.pairCount++;
+        j++;
+        continue;
+      }
+      const afterNext = tokens[j + 1];
+      if (next.type === "other" && isMergeableSeparator(next.text) && afterNext?.type === "pair") {
+        run.endIndex = j + 2;
+        run.pairCount++;
+        j += 2;
+        continue;
+      }
+      break;
+    }
+    runs.push(run);
+    i = run.endIndex;
+  }
+  const mergeSet = /* @__PURE__ */ new Set();
+  const mergeRuns = runs.filter((r) => r.pairCount >= 3);
+  for (const run of mergeRuns) {
+    for (let k = run.startIndex; k < run.endIndex; k++) {
+      mergeSet.add(k);
+    }
+  }
+  if (mergeRuns.length === 0) {
+    return html;
+  }
+  let result = "";
+  let ri = 0;
+  for (let k = 0; k < tokens.length; k++) {
+    if (ri < mergeRuns.length && k === mergeRuns[ri]?.startIndex) {
+      const run = mergeRuns[ri];
+      const dels = [];
+      const inss = [];
+      for (let m = run.startIndex; m < run.endIndex; m++) {
+        const t2 = tokens[m];
+        if (t2.type === "pair") {
+          dels.push(t2.del);
+          inss.push(t2.ins);
+        } else {
+          dels.push(t2.text);
+          inss.push(t2.text);
+        }
+      }
+      result += `<del>${dels.join("")}</del><ins>${inss.join("")}</ins>`;
+      k = run.endIndex - 1;
+      ri++;
+      continue;
+    }
+    const t = tokens[k];
+    result += t.type === "pair" ? t.raw : t.text;
+  }
+  return result;
+}
+const BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "blockquote",
+  "pre",
+  "div",
+  "table",
+  "figure",
+  "section",
+  "article"
+]);
+function parseBlocks(html) {
+  const container = document.createElement("div");
+  container.innerHTML = html;
+  const blocks = [];
+  for (const child of container.childNodes) {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const el = child;
+      const tag = el.tagName.toLowerCase();
+      if (!BLOCK_TAGS.has(tag)) {
+        return null;
+      }
+      let openTag = `<${tag}`;
+      for (const attr of el.attributes) {
+        openTag += ` ${attr.name}="${attr.value}"`;
+      }
+      openTag += ">";
+      blocks.push({ tag, innerHTML: el.innerHTML, openTag });
+    } else if (child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) {
+      return null;
+    }
+  }
+  return blocks;
+}
+function alignBlocks(before, after) {
+  const m = before.length;
+  const n = after.length;
+  const dp = Array.from(
+    { length: m + 1 },
+    () => Array(n + 1).fill(0)
+  );
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      if (before[i2 - 1].tag === after[j2 - 1].tag) {
+        dp[i2][j2] = dp[i2 - 1][j2 - 1] + 1;
+      } else {
+        dp[i2][j2] = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
+      }
+    }
+  }
+  const entries = [];
+  let i = m;
+  let j = n;
+  while (i > 0 && j > 0) {
+    if (before[i - 1].tag === after[j - 1].tag) {
+      entries.push({
+        type: "match",
+        before: before[i - 1],
+        after: after[j - 1]
+      });
+      i--;
+      j--;
+    } else if (dp[i - 1][j] >= dp[i][j - 1]) {
+      entries.push({ type: "delete", before: before[i - 1] });
+      i--;
+    } else {
+      entries.push({ type: "insert", after: after[j - 1] });
+      j--;
+    }
+  }
+  while (i > 0) {
+    entries.push({ type: "delete", before: before[i - 1] });
+    i--;
+  }
+  while (j > 0) {
+    entries.push({ type: "insert", after: after[j - 1] });
+    j--;
+  }
+  return entries.reverse();
+}
+function computeBlockDiff(before, after) {
+  const alignment = alignBlocks(before, after);
+  const parts = [];
+  for (const entry of alignment) {
+    if (entry.type === "match") {
+      if (entry.before.innerHTML === entry.after.innerHTML) {
+        parts.push(
+          `${entry.after.openTag}${entry.after.innerHTML}</${entry.after.tag}>`
+        );
+      } else {
+        const innerDiff = diff(entry.before.innerHTML, entry.after.innerHTML);
+        parts.push(
+          `${entry.after.openTag}${cleanupDiffMods(innerDiff)}</${entry.after.tag}>`
+        );
+      }
+    } else if (entry.type === "delete") {
+      parts.push(
+        `${entry.before.openTag}<del>${entry.before.innerHTML}</del></${entry.before.tag}>`
+      );
+    } else {
+      parts.push(
+        `${entry.after.openTag}<ins>${entry.after.innerHTML}</ins></${entry.after.tag}>`
+      );
+    }
+  }
+  return parts.join("");
+}
+export function computeDiff(before, after) {
+  const beforeBlocks = parseBlocks(before);
+  const afterBlocks = parseBlocks(after);
+  if (beforeBlocks && afterBlocks && (beforeBlocks.length > 0 || afterBlocks.length > 0)) {
+    return computeBlockDiff(beforeBlocks, afterBlocks);
+  }
+  const raw = diff(before, after);
+  return cleanupDiffMods(raw);
+}

package/dist/runtime/editor/helpers/dom/index.d.ts

@@ -0,0 +1,75 @@
+import type { Coord } from '#blokkli/editor/types/geometry';
+/**
+ * Recursively clone an element and inline its styles.
+ */
+export declare function cloneWithInlineStyles(node: Element): Element;
+export declare function cloneElementWithStyles(element: Element, isRoot?: boolean): string;
+/**
+ * Possible values for the MouseEvent.buttons property.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+ */
+export declare const MOUSE_BUTTONS: Readonly<{
+    /**
+     *No button or un-initialized.
+     */
+    NONE: 0;
+    /**
+     * Primary button (usually the left button).
+     */
+    PRIMARY: 1;
+    /**
+     * Secondary button (usually the right button).
+     */
+    SECONDARY: 2;
+    /**
+     * Auxiliary button (usually the mouse wheel button or middle button).
+     */
+    AUXILIARY: 4;
+    /**
+     * 4th button (typically the "Browser Back" button).
+     */
+    FOURTH: 8;
+    /**
+     * 5th button (typically the "Browser Forward" button).
+     */
+    FIFTH: 16;
+}>;
+/**
+ * Possible values for the MouseEvent.button property.
+ * (Yes, they are different from the "buttons" property...)
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+ */
+export declare const MOUSE_BUTTON: Readonly<{
+    /**
+     * Main button, usually the left button or the un-initialized state.
+     */
+    MAIN: 0;
+    /**
+     * Auxiliary button, usually the wheel button or the middle button (if present).
+     */
+    AUXILIARY: 1;
+    /**
+     * Secondary button, usually the right button.
+     */
+    SECONDARY: 2;
+    /**
+     * Fourth button, typically the Browser Back button.
+     */
+    FOURTH: 3;
+    /**
+     * Fifth button, typically the Browser Forward button.
+     */
+    FIFTH: 4;
+}>;
+/**
+ * Determine the visual background color of an element.
+ *
+ * If the element defines a background color itself, it will be returned.
+ * If the element has no explicit background color, we iterate over the
+ * ancestors until we find an element with a background color. If no background
+ * color can be determined, a transparent color is returned.
+ */
+export declare const realBackgroundColor: (el: HTMLElement | SVGElement | null) => string;
+export declare function getInteractionCoordinates(e: MouseEvent | TouchEvent): Coord;

package/dist/runtime/editor/helpers/dom/index.js

@@ -0,0 +1,107 @@
+export function cloneWithInlineStyles(node) {
+  const clone = node.cloneNode(false);
+  clone.removeAttribute("class");
+  clone.removeAttribute("id");
+  clone.removeAttribute("name");
+  clone.removeAttribute("for");
+  clone.removeAttribute("style");
+  if (clone instanceof HTMLElement || clone instanceof SVGElement) {
+    Object.keys(clone.dataset).forEach((key) => {
+      clone.dataset[key] = "";
+    });
+  }
+  const computedStyle = getComputedStyle(node);
+  for (let i = 0; i < computedStyle.length; i++) {
+    const propName = computedStyle[i];
+    if (clone instanceof HTMLElement || clone instanceof SVGElement) {
+      clone.style[propName] = computedStyle.getPropertyValue(propName);
+    }
+  }
+  Array.from(node.childNodes).forEach((child) => {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      clone.appendChild(cloneWithInlineStyles(child));
+    } else if (child.nodeType === Node.TEXT_NODE) {
+      clone.appendChild(child.cloneNode(true));
+    }
+  });
+  return clone;
+}
+export function cloneElementWithStyles(element, isRoot) {
+  const clonedElement = cloneWithInlineStyles(element);
+  if (isRoot && (clonedElement instanceof HTMLElement || clonedElement instanceof SVGElement)) {
+    clonedElement.style.opacity = "1";
+  }
+  const container = document.createElement("div");
+  container.appendChild(clonedElement);
+  return container.innerHTML;
+}
+export const MOUSE_BUTTONS = Object.freeze({
+  /**
+   *No button or un-initialized.
+   */
+  NONE: 0,
+  /**
+   * Primary button (usually the left button).
+   */
+  PRIMARY: 1,
+  /**
+   * Secondary button (usually the right button).
+   */
+  SECONDARY: 2,
+  /**
+   * Auxiliary button (usually the mouse wheel button or middle button).
+   */
+  AUXILIARY: 4,
+  /**
+   * 4th button (typically the "Browser Back" button).
+   */
+  FOURTH: 8,
+  /**
+   * 5th button (typically the "Browser Forward" button).
+   */
+  FIFTH: 16
+});
+export const MOUSE_BUTTON = Object.freeze({
+  /**
+   * Main button, usually the left button or the un-initialized state.
+   */
+  MAIN: 0,
+  /**
+   * Auxiliary button, usually the wheel button or the middle button (if present).
+   */
+  AUXILIARY: 1,
+  /**
+   * Secondary button, usually the right button.
+   */
+  SECONDARY: 2,
+  /**
+   * Fourth button, typically the Browser Back button.
+   */
+  FOURTH: 3,
+  /**
+   * Fifth button, typically the Browser Forward button.
+   */
+  FIFTH: 4
+});
+export const realBackgroundColor = (el) => {
+  const transparent = "rgba(0, 0, 0, 0)";
+  if (!el) return transparent;
+  const bg = getComputedStyle(el).backgroundColor;
+  if (bg === transparent || bg === "transparent") {
+    return realBackgroundColor(el.parentElement);
+  }
+  return bg;
+};
+export function getInteractionCoordinates(e) {
+  if ("touches" in e) {
+    const touch = e.touches[0] || e.changedTouches[0];
+    return {
+      x: touch.clientX,
+      y: touch.clientY
+    };
+  }
+  return {
+    x: e.clientX,
+    y: e.clientY
+  };
+}

package/dist/runtime/editor/helpers/dragStyle/index.d.ts

@@ -0,0 +1,12 @@
+import type { DraggableStyle } from '#blokkli/editor/types/style';
+import type { RGB } from '../../../../global/types/theme.js';
+export declare class DragStyle {
+    styleCache: WeakMap<HTMLElement | SVGElement, DraggableStyle>;
+    backgroundCache: WeakMap<HTMLElement | SVGElement, string>;
+    constructor();
+    invalidateStyle(el: HTMLElement | SVGElement): void;
+    reset(): void;
+    getStyle(el: HTMLElement | SVGElement, accentColor: RGB): DraggableStyle;
+    realBackgroundColor(el: HTMLElement | SVGElement | null): string;
+    getDraggableStyle(el: HTMLElement | SVGElement, accentColor: RGB): DraggableStyle;
+}

package/dist/runtime/editor/helpers/dragStyle/index.js

@@ -0,0 +1,93 @@
+import {
+  findHighestContrastColor,
+  getContrastRatio,
+  parseColorString,
+  rgbaToString
+} from "../../helpers/color/index.js";
+import { realBackgroundColor } from "../dom/index.js";
+const getNumericStyleValue = (str, fallback = 0) => {
+  const v = str.replace("px", "");
+  const num = Number.parseFloat(v);
+  if (Number.isNaN(num) || num === 0) {
+    return fallback;
+  }
+  return num;
+};
+export class DragStyle {
+  styleCache;
+  backgroundCache;
+  constructor() {
+    this.styleCache = /* @__PURE__ */ new WeakMap();
+    this.backgroundCache = /* @__PURE__ */ new WeakMap();
+  }
+  invalidateStyle(el) {
+    this.styleCache.delete(el);
+    this.backgroundCache.delete(el);
+  }
+  reset() {
+    this.styleCache = /* @__PURE__ */ new WeakMap();
+    this.backgroundCache = /* @__PURE__ */ new WeakMap();
+  }
+  getStyle(el, accentColor) {
+    const cached = this.styleCache.get(el);
+    if (cached) {
+      return cached;
+    }
+    const style = this.getDraggableStyle(el, accentColor);
+    this.styleCache.set(el, style);
+    return style;
+  }
+  realBackgroundColor(el) {
+    const transparent = "rgba(0, 0, 0, 0)";
+    if (!el) {
+      return transparent;
+    }
+    const cached = this.backgroundCache.get(el);
+    if (cached) {
+      return cached;
+    }
+    let bg = getComputedStyle(el).backgroundColor;
+    if (bg === transparent || bg === "transparent") {
+      bg = realBackgroundColor(el.parentElement);
+    }
+    this.backgroundCache.set(el, bg);
+    return bg;
+  }
+  getDraggableStyle(el, accentColor) {
+    const style = getComputedStyle(el);
+    const radius = [
+      getNumericStyleValue(style.borderTopLeftRadius, 0),
+      getNumericStyleValue(style.borderTopRightRadius, 0),
+      getNumericStyleValue(style.borderBottomRightRadius, 0),
+      getNumericStyleValue(style.borderBottomLeftRadius, 0)
+    ];
+    const radiusMin = Math.min(...radius);
+    const backgroundColorForSelection = parseColorString(
+      realBackgroundColor(el.parentElement)
+    );
+    const contrastColor = findHighestContrastColor(
+      [[255, 255, 255], accentColor],
+      backgroundColorForSelection
+    );
+    const backgroundColor = parseColorString(realBackgroundColor(el));
+    const textColor = findHighestContrastColor(
+      [
+        [0, 0, 0],
+        [255, 255, 255]
+      ],
+      backgroundColor
+    );
+    const bg = backgroundColorForSelection || [255, 255, 255];
+    const ratio = getContrastRatio(accentColor, bg);
+    return {
+      radius,
+      radiusMin,
+      radiusString: radius.map((v) => v + "px").join(" "),
+      contrastColor: rgbaToString(contrastColor),
+      contrastColorRGB: contrastColor,
+      contrastColorTranslucent: rgbaToString(contrastColor, 0.25),
+      textColor: rgbaToString(textColor),
+      isInverted: ratio < 5
+    };
+  }
+}

package/dist/runtime/editor/helpers/draggable/index.d.ts

@@ -0,0 +1,3 @@
+import type { DraggableExistingBlock } from '#blokkli/editor/types/draggable';
+import type { RenderedFieldListItem } from '#blokkli/editor/types/field';
+export declare function toDraggableExisting(v: RenderedFieldListItem | RenderedFieldListItem[]): DraggableExistingBlock[];

package/dist/runtime/editor/helpers/draggable/index.js

@@ -0,0 +1,9 @@
+export function toDraggableExisting(v) {
+  const blocks = Array.isArray(v) ? v : [v];
+  return blocks.map((block) => {
+    return {
+      itemType: "existing",
+      block
+    };
+  });
+}

package/dist/runtime/editor/helpers/dropTargets/index.d.ts

@@ -0,0 +1,6 @@
+import type { BlokkliFieldElement } from '#blokkli/editor/types/field';
+export type Orientation = 'horizontal' | 'vertical';
+export declare const MIN_GAP = 20;
+export declare function getGapSize(orientation: Orientation, element: HTMLElement): number;
+export declare function getChildrenOrientation(element: HTMLElement): Orientation;
+export declare function determineCanAddChildren(field: BlokkliFieldElement, children: HTMLElement[], uuids: string[], currentCount: number, itemsToAdd: number, draggingBundles?: string[], draggingFragments?: string[], isBundlePermitted?: (bundle: string) => boolean): boolean;

package/dist/runtime/editor/helpers/dropTargets/index.js

@@ -0,0 +1,68 @@
+export const MIN_GAP = 20;
+export function getGapSize(orientation, element) {
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display.includes("grid") || computedStyle.display.includes("flex")) {
+    const gap = orientation === "vertical" ? computedStyle.rowGap || computedStyle.gridRowGap : computedStyle.columnGap || computedStyle.gridColumnGap;
+    if (gap) {
+      const gapParts = gap.split(" ");
+      const gapValue = gapParts[0];
+      if (gapValue?.endsWith("px")) {
+        return Number.parseFloat(gapValue);
+      }
+    }
+  }
+  return MIN_GAP;
+}
+export function getChildrenOrientation(element) {
+  const computedStyle = window.getComputedStyle(element);
+  if (computedStyle.display.includes("flex")) {
+    if (computedStyle.flexDirection === "row" || computedStyle.flexDirection === "row-reverse") {
+      return "horizontal";
+    } else {
+      return "vertical";
+    }
+  }
+  if (computedStyle.display.includes("grid")) {
+    if (computedStyle.gridTemplateColumns.split(" ").length > 1) {
+      return "horizontal";
+    } else {
+      return "vertical";
+    }
+  }
+  return "vertical";
+}
+export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles, draggingFragments, isBundlePermitted) {
+  if (field.cardinality !== -1) {
+    const childrenThatAreSelection = children.filter((child) => {
+      const uuid = child.dataset.bkUuid;
+      if (!uuid) {
+        return false;
+      }
+      return uuids.includes(uuid);
+    }).length;
+    const countAfter = currentCount - childrenThatAreSelection + itemsToAdd;
+    if (countAfter > field.cardinality) {
+      return false;
+    }
+  }
+  if (!draggingBundles?.length) {
+    return true;
+  }
+  if (!uuids.length) {
+    return draggingBundles.some(
+      (bundle) => field.allowedBundles.includes(bundle) && (!isBundlePermitted || isBundlePermitted(bundle))
+    );
+  }
+  const bundlesAllowed = draggingBundles.every(
+    (bundle) => field.allowedBundles.includes(bundle)
+  );
+  if (!bundlesAllowed) {
+    return false;
+  }
+  if (draggingFragments?.length && field.allowedFragments.length > 0) {
+    return draggingFragments.every(
+      (fragment) => field.allowedFragments.includes(fragment)
+    );
+  }
+  return true;
+}

package/dist/runtime/editor/helpers/geometry/index.d.ts

@@ -0,0 +1,43 @@
+import type { Rectangle, Coord, Size } from '#blokkli/editor/types/geometry';
+export declare function getBounds(rects: Rectangle[]): Rectangle | undefined;
+export declare function intersects(a: Rectangle, b: Rectangle): boolean;
+export declare function isInsideRect(x: number, y: number, rect: Rectangle): boolean;
+/**
+ * Calculate the intersection amount of two rectangles as a value from 0 to 1.
+ */
+export declare function calculateIntersection(rectA: Rectangle, rectB: Rectangle): number;
+/**
+ * Return the closest rectangle.
+ */
+export declare function findClosestRectangle<T extends Rectangle>(x: number, y: number, rects: T[]): T;
+/**
+ * Return the distance from the given coordinates to the center of the rectangle.
+ */
+export declare function distanceToRectangle(x: number, y: number, rect: Rectangle): number;
+/**
+ * Return the distance from the given coordinates to the center of the rectangle.
+ */
+export declare function distanceToClosestRectangleEdge(x: number, y: number, rect: Rectangle): number;
+/**
+ * Subtracts a rectangle from a viewport and returns the remaining area as rectangles.
+ * The viewport is assumed to have x=0 and y=0.
+ *
+ * @param viewport - The size of the viewport to subtract from
+ * @param rect - The rectangle to subtract
+ * @returns An array of 0 to 4 rectangles representing the area outside of rect
+ */
+export declare function subtractRectFromViewport(viewport: Size, rect: Rectangle): Rectangle[];
+export declare function getDistance(a: Coord, b: Coord): number;
+/**
+ * Position the given rectToPlace so that it doesn't overlap with any of the blockingRects.
+ */
+export declare function findIdealRectPosition(blockingRects: Rectangle[], rectToPlace: Rectangle, viewport: Rectangle, maxOverlap?: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Calculate the ideal X coordinate for placing a rectangle.
+ *
+ * Coordinates are assumed to be 0,0 for top-left. The method returns a number that can be used to set the
+ */
+export declare const calculateCenterPosition: (blockingRects: Rectangle[], viewport: Rectangle, widthToPlace: number) => number;