@hyperframes/studio 0.7.106 → 0.7.107

package/src/components/editor/domEditInlineText.test.ts

@@ -0,0 +1,86 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it, vi } from "vitest";
+import type { DomEditSelection, DomEditTextField } from "./domEditingTypes";
+
+const editable = vi.hoisted(() => ({ current: true }));
+vi.mock("./domEditingLayers", () => ({
+  isTextEditableSelection: () => editable.current,
+}));
+
+const { canEditTextInline, isDoublePress } = await import("./domEditInlineText");
+
+function field(key: string): DomEditTextField {
+  return {
+    key,
+    label: key,
+    value: "text",
+    tagName: "SPAN",
+    attributes: [],
+    inlineStyles: {},
+    computedStyles: {},
+    source: "self",
+  };
+}
+
+function selection(partial: Partial<DomEditSelection> = {}): DomEditSelection {
+  return {
+    label: "Heading",
+    tagName: "H1",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    textFields: [field("self")],
+    ...partial,
+  } as DomEditSelection;
+}
+
+describe("canEditTextInline", () => {
+  it("allows an element the panel would let you edit text on", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection())).toBe(true);
+  });
+
+  // The bar is the panel's bar: nothing becomes editable here that is not
+  // editable there.
+  it("refuses an element whose text the panel cannot edit either", () => {
+    editable.current = false;
+    expect(canEditTextInline(selection())).toBe(false);
+  });
+
+  // Editing the whole element would flatten its children into one string.
+  it("refuses an element with several text fields", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ textFields: [field("a"), field("b")] }))).toBe(false);
+  });
+
+  it("allows an element with no separate text fields", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ textFields: [] }))).toBe(true);
+  });
+
+  it("refuses the composition host, which is the document rather than copy", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ isCompositionHost: true }))).toBe(false);
+  });
+
+  it("refuses anything inside a locked composition", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ isInsideLockedComposition: true }))).toBe(false);
+  });
+
+  it("refuses nothing at all", () => {
+    editable.current = true;
+    expect(canEditTextInline(null)).toBe(false);
+  });
+});
+
+describe("isDoublePress", () => {
+  it("pairs presses only when they land on the same element", () => {
+    const first = document.createElement("div");
+    const second = document.createElement("div");
+    const previous = { x: 10, y: 10, at: 100, element: first };
+
+    expect(isDoublePress(previous, { x: 12, y: 12, at: 200, element: first })).toBe(true);
+    expect(isDoublePress(previous, { x: 12, y: 12, at: 200, element: second })).toBe(false);
+  });
+});

package/src/components/editor/domEditInlineText.ts

@@ -0,0 +1,99 @@
+import { isRichTextFormattingTag } from "@hyperframes/core/rich-text-sanitize";
+import type { DomEditSelection } from "./domEditingTypes";
+import { isTextEditableSelection } from "./domEditingLayers";
+
+/**
+ * Whether this element's text can be edited where it sits.
+ *
+ * Its own function rather than a condition inside a handler, because this is
+ * the rule most likely to change: it is the whole answer to "why did nothing
+ * happen when I double-clicked that".
+ *
+ * The bar is deliberately the same as the design panel's, plus one thing the
+ * panel can do that editing in place cannot. An element with several text
+ * fields is edited a field at a time there, and making the whole element
+ * editable would flatten its children into one string, so those keep the panel.
+ */
+export function canEditTextInline(selection: DomEditSelection | null): boolean {
+  if (!selection) return false;
+  if (!isTextEditableSelection(selection)) return false;
+  // The composition host is the document, not a piece of copy in it.
+  if (selection.isCompositionHost) return false;
+  if (selection.isInsideLockedComposition) return false;
+  if (selection.textFields.length <= 1) return true;
+  // A styled element reports one field per run of characters, but it is still
+  // one piece of copy and the caret edits all of it at once.
+  return canEditElementTextInline(selection.element);
+}
+
+/**
+ * Whether this element's text can be edited in place, judged from the element
+ * alone.
+ *
+ * The press path cannot use the selection-shaped gate above: building a
+ * selection is asynchronous, and a press has to decide now whether it is a
+ * text edit or the start of a drag. This asks the same question of the DOM.
+ *
+ * A structural child keeps an element out: those are separate text fields, the
+ * panel edits them one at a time, and making the whole element editable would
+ * flatten them into a single string.
+ *
+ * A formatting child does not. Styling a run of characters puts a span inside
+ * the element, so a rule of "no element children" would have let the editor
+ * lock every element it had ever styled out of itself, permanently, on the
+ * first colour change. What counts as formatting is the sanitiser's allowlist,
+ * so the editor and the thing that writes the file agree on it.
+ */
+export function canEditElementTextInline(element: HTMLElement | null): boolean {
+  if (!element) return false;
+  const tag = element.tagName;
+  if (tag === "BODY" || tag === "HTML") return false;
+  if (!hasOnlyFormattingChildren(element)) return false;
+  if (element.isContentEditable) return false;
+  return (element.textContent ?? "").trim().length > 0;
+}
+
+function hasOnlyFormattingChildren(element: HTMLElement): boolean {
+  const HTMLElementClass = element.ownerDocument.defaultView?.HTMLElement;
+  if (!HTMLElementClass) return false;
+  for (const child of Array.from(element.children)) {
+    if (!isRichTextFormattingTag(child.tagName)) return false;
+    if (!(child instanceof HTMLElementClass)) return false;
+    // Formatting nests, and a structural child hidden inside a span is still
+    // structural.
+    if (!hasOnlyFormattingChildren(child)) return false;
+  }
+  return true;
+}
+
+/** Where and when a press landed, for recognising the next one as a pair. */
+export interface PressMark {
+  x: number;
+  y: number;
+  at: number;
+  element: HTMLElement | null;
+}
+
+/** Long enough to be deliberate, short enough not to catch two separate clicks. */
+const DOUBLE_PRESS_MS = 450;
+/** A double press is two presses in the same place, not a tiny drag. */
+const DOUBLE_PRESS_SLOP_PX = 6;
+
+/**
+ * Whether this press pairs with the last one into a double press.
+ *
+ * Studio cannot use `dblclick` or a click count for this. The selection box
+ * takes pointer capture on the first press and prevents its default, which
+ * suppresses the compatibility mouse events and stops the browser pairing the
+ * two presses at all: no `dblclick` is dispatched, and `detail` stays 1.
+ */
+export function isDoublePress(previous: PressMark | null, next: PressMark): boolean {
+  if (!previous) return false;
+  return (
+    next.element !== null &&
+    previous.element === next.element &&
+    next.at - previous.at <= DOUBLE_PRESS_MS &&
+    Math.abs(next.x - previous.x) <= DOUBLE_PRESS_SLOP_PX &&
+    Math.abs(next.y - previous.y) <= DOUBLE_PRESS_SLOP_PX
+  );
+}

package/src/components/editor/domEditInlineTextElement.test.ts

@@ -0,0 +1,59 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { canEditElementTextInline } from "./domEditInlineText";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function mount(html: string): HTMLElement {
+  document.body.innerHTML = html;
+  return document.body.firstElementChild as HTMLElement;
+}
+
+describe("canEditElementTextInline", () => {
+  it("opens a plain piece of copy", () => {
+    expect(canEditElementTextInline(mount("<h1>hello world</h1>"))).toBe(true);
+  });
+
+  // The trap this exists for: styling a run of characters puts a span inside
+  // the element, and a rule of "no element children" would have let the editor
+  // lock every element it had ever styled out of itself, permanently.
+  it("still opens an element that has been styled", () => {
+    const element = mount('<h1>hell<span style="color: red">o</span> world</h1>');
+    expect(canEditElementTextInline(element)).toBe(true);
+  });
+
+  it("opens an element whose formatting is nested", () => {
+    const element = mount('<h1><b><span style="color: red">deep</span></b></h1>');
+    expect(canEditElementTextInline(element)).toBe(true);
+  });
+
+  it("keeps out an element with a structural child, which the panel edits field by field", () => {
+    expect(canEditElementTextInline(mount("<div><h1>a</h1><p>b</p></div>"))).toBe(false);
+  });
+
+  it("keeps out an element hiding something structural inside its formatting", () => {
+    expect(canEditElementTextInline(mount("<h1><span><div>a</div></span></h1>"))).toBe(false);
+  });
+
+  it("keeps out the document itself", () => {
+    expect(canEditElementTextInline(document.body)).toBe(false);
+    expect(canEditElementTextInline(document.documentElement)).toBe(false);
+  });
+
+  it("keeps out an element that is already being edited", () => {
+    const element = mount("<h1>hello</h1>");
+    element.setAttribute("contenteditable", "true");
+    expect(canEditElementTextInline(element)).toBe(false);
+  });
+
+  it("keeps out an element with no words in it", () => {
+    expect(canEditElementTextInline(mount("<h1>   </h1>"))).toBe(false);
+  });
+
+  it("keeps out nothing at all", () => {
+    expect(canEditElementTextInline(null)).toBe(false);
+  });
+});

package/src/components/editor/domEditing.ts

@@ -27,6 +27,7 @@ export {
 export {
   buildDefaultDomEditTextField,
   buildDomEditPatchTarget,
+  buildDomEditRichTextPatchOperation,
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
   collectDomEditLayerItems,

package/src/components/editor/domEditingLayers.ts

@@ -519,12 +519,13 @@ export function buildDomEditTextPatchOperation(
   value: string,
   childLocator?: DomEditChildLocator,
 ): PatchOperation {
-  return {
-    type: "text-content",
-    property: "text",
-    value,
-    ...childLocator,
-  };
+  return { type: "text-content", property: "text", value, ...childLocator };
+}
+
+/** Replace an element's contents with markup, for a change no per-child operation
+ * can express (a text layer added, removed or reordered). Sanitized at both ends. */
+export function buildDomEditRichTextPatchOperation(value: string): PatchOperation {
+  return { type: "rich-text", property: "", value };
 }
 
 // ─── Non-editable reason ─────────────────────────────────────────────────────