@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-text/richTextUtils.ts

@@ -0,0 +1,259 @@
+import type { JSONContent } from "@tiptap/core";
+import type { RichTextDocument, RichTextJsonValue } from "./textTypes";
+
+export type RichTextTextNode = JSONContent & { type: "text"; text: string };
+
+export interface RichTextMarkStyle {
+  fontWeight?: number;
+  fontStyle?: "italic";
+  textDecorationLine?: "line-through";
+}
+
+export function createRichTextFromPlainText(text: string): RichTextDocument {
+  const lines = text.split("\n");
+  return {
+    type: "doc",
+    content: lines.map((line) => ({
+      type: "paragraph",
+      content: line.length > 0 ? [{ type: "text", text: line }] : [],
+    })),
+  };
+}
+
+export function getPlainTextFromRichText(
+  richTextDocument: RichTextDocument,
+): string {
+  return richTextDocument.content
+    .map((node) => getPlainTextFromNode(node))
+    .join("\n");
+}
+
+export function validateRichTextDocument(value: unknown): RichTextDocument {
+  if (!value || typeof value !== "object") {
+    return createRichTextFromPlainText("");
+  }
+
+  const candidate = value as Partial<RichTextDocument>;
+  const content = Array.isArray(candidate.content)
+    ? candidate.content
+        .map((node) => sanitizeElementNode(node, 0))
+        .filter((node): node is JSONContent => node !== null)
+    : [];
+
+  return { type: "doc", attrs: sanitizeAttrs(candidate.attrs), content };
+}
+
+export function renderRichTextDocumentToHtml(
+  richText: RichTextDocument,
+): string {
+  return richText.content
+    .map((node) => renderRichTextBlockToHtml(node))
+    .join("");
+}
+
+export function isRichTextTextNode(
+  node: JSONContent,
+): node is RichTextTextNode {
+  return node.type === "text" && typeof node.text === "string";
+}
+
+export function getRichTextTextNodeStyle(
+  node: RichTextTextNode,
+): string | undefined {
+  const style = getRichTextMarkStyle(node.marks);
+  return style ? renderRichTextMarkStyle(style) : undefined;
+}
+
+export function getRichTextMarkStyle(
+  marks: JSONContent["marks"],
+): RichTextMarkStyle | undefined {
+  if (!marks || marks.length === 0) {
+    return undefined;
+  }
+
+  const style: RichTextMarkStyle = {};
+  for (const mark of marks) {
+    switch (mark.type) {
+      case "bold":
+      case "strong":
+        style.fontWeight = 700;
+        break;
+      case "italic":
+      case "em":
+        style.fontStyle = "italic";
+        break;
+      case "strike":
+      case "s":
+        style.textDecorationLine = "line-through";
+        break;
+    }
+  }
+
+  return Object.keys(style).length > 0 ? style : undefined;
+}
+
+function getPlainTextFromNode(node: JSONContent): string {
+  if (isRichTextTextNode(node)) {
+    return node.text;
+  }
+  return (
+    node.content?.map((child) => getPlainTextFromNode(child)).join("") ?? ""
+  );
+}
+
+function renderRichTextMarkStyle(style: RichTextMarkStyle): string {
+  const declarations: string[] = [];
+  if (style.fontWeight !== undefined) {
+    declarations.push(`font-weight:${String(style.fontWeight)}`);
+  }
+  if (style.fontStyle !== undefined) {
+    declarations.push(`font-style:${style.fontStyle}`);
+  }
+  if (style.textDecorationLine !== undefined) {
+    declarations.push(`text-decoration-line:${style.textDecorationLine}`);
+  }
+  return declarations.join(";");
+}
+
+function renderRichTextBlockToHtml(node: JSONContent): string {
+  const children =
+    node.content?.map((child) => renderRichTextNodeToHtml(child)).join("") ?? "";
+  return `<p style="margin:0">${children.length > 0 ? children : "<br>"}</p>`;
+}
+
+function renderRichTextNodeToHtml(node: JSONContent): string {
+  if (isRichTextTextNode(node)) {
+    const style = getRichTextMarkStyle(node.marks);
+    const text = escapeHtml(node.text);
+    if (!style) {
+      return text;
+    }
+    return `<span style="${renderRichTextMarkStyle(style)}">${text}</span>`;
+  }
+
+  return node.content?.map((child) => renderRichTextNodeToHtml(child)).join("") ?? "";
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+}
+
+function sanitizeNode(value: unknown, depth: number): JSONContent | null {
+  if (!value || typeof value !== "object" || depth > 8) {
+    return null;
+  }
+  const candidate = value as Record<string, unknown>;
+  if (candidate.type === "text") {
+    const text = sanitizeTextNode(candidate);
+    return text.text.length > 0 ? text : null;
+  }
+  return sanitizeElementNode(candidate, depth);
+}
+
+function sanitizeElementNode(
+  value: unknown,
+  depth: number,
+): JSONContent | null {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const candidate = value as Record<string, unknown>;
+  const type =
+    typeof candidate.type === "string" ? candidate.type : "paragraph";
+  const content = Array.isArray(candidate.content)
+    ? candidate.content
+        .map((node) => sanitizeNode(node, depth + 1))
+        .filter((node): node is JSONContent => node !== null)
+    : [];
+
+  return { type, attrs: sanitizeAttrs(candidate.attrs), content };
+}
+
+function sanitizeTextNode(value: Record<string, unknown>): JSONContent & {
+  type: "text";
+  text: string;
+} {
+  return {
+    type: "text",
+    text: typeof value.text === "string" ? value.text : "",
+    marks: Array.isArray(value.marks)
+      ? value.marks
+          .map(sanitizeMark)
+          .filter((mark): mark is NonNullable<JSONContent["marks"]>[number] =>
+            mark !== null,
+          )
+      : undefined,
+  };
+}
+
+function sanitizeMark(
+  value: unknown,
+): NonNullable<JSONContent["marks"]>[number] | null {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const candidate = value as Record<string, unknown>;
+  if (typeof candidate.type !== "string") {
+    return null;
+  }
+  return { type: candidate.type, attrs: sanitizeAttrs(candidate.attrs) };
+}
+
+function sanitizeAttrs(
+  attrs: unknown,
+): Record<string, RichTextJsonValue> | undefined {
+  if (!attrs || typeof attrs !== "object") {
+    return undefined;
+  }
+  const entries = Object.entries(attrs)
+    .map(
+      ([key, value]) => [key, sanitizeRichTextAttributeValue(value)] as const,
+    )
+    .filter(
+      (entry): entry is readonly [string, RichTextJsonValue] =>
+        entry[1] !== undefined,
+    );
+  return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+}
+
+function sanitizeRichTextAttributeValue(
+  value: unknown,
+  depth = 0,
+): RichTextJsonValue | undefined {
+  if (
+    value === null ||
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  ) {
+    return value;
+  }
+
+  if (depth > 8) {
+    return undefined;
+  }
+
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => sanitizeRichTextAttributeValue(item, depth + 1))
+      .filter((item): item is RichTextJsonValue => item !== undefined);
+  }
+
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value)
+      .map(
+        ([key, item]) =>
+          [key, sanitizeRichTextAttributeValue(item, depth + 1)] as const,
+      )
+      .filter(
+        (entry): entry is readonly [string, RichTextJsonValue] =>
+          entry[1] !== undefined,
+      );
+    return Object.fromEntries(entries);
+  }
+
+  return undefined;
+}

package/_vendor/plugin-text/textInteractions.ts

@@ -0,0 +1,366 @@
+import {
+  type ClickEditorEvent,
+  type Editor,
+  type ShapeRecord,
+  type LandInteractionHandler,
+  type PointerEditorEvent,
+} from "@land/canvas-core";
+import type { TextShapeRecord } from "./textTypes";
+import { getDefaultTextShapeProps, isTextShapeRecord } from "./textShapeHelpers";
+import {
+  ARROW_LABEL_INDEX_SUFFIX,
+  getArrowLabelLayout,
+} from "./ArrowLabelBindingUtil";
+import {
+  GEO_LABEL_INDEX_SUFFIX,
+  getGeoLabelLayout,
+} from "./GeoLabelBindingUtil";
+import {
+  ARROW_LABEL_BINDING_TYPE,
+  GEO_LABEL_BINDING_TYPE,
+  canPlaceCaretInTextShapeFromSelection,
+  createBoundTextLabelShape,
+  getTextLabelShapeForOwner,
+  startEditingTextLabel,
+} from "./textLabelHelpers";
+
+const TEXT_EDIT_HISTORY_MARK = "text.edit";
+const ARROW_LABEL_EDIT_HISTORY_MARK = "arrow-label.edit";
+const ARROW_LABEL_CREATE_HISTORY_MARK = "arrow-label.create";
+const GEO_LABEL_EDIT_HISTORY_MARK = "geo-label.edit";
+const GEO_LABEL_CREATE_HISTORY_MARK = "geo-label.create";
+const TEXT_CARET_CLICK_MAX_DISTANCE_SQUARED = 9;
+
+export function createTextInteractionHandler(): LandInteractionHandler {
+  let pendingCaretPointer: {
+    pointerId: number;
+    shapeId: TextShapeRecord["id"];
+    originPagePoint: { x: number; y: number };
+  } | null = null;
+
+  const clearPendingCaretPointer = (): void => {
+    pendingCaretPointer = null;
+  };
+
+  return {
+    id: "land.text.interactions",
+    editorEvent: {
+      handleEvent(editor, event) {
+        if (editor.getActiveToolId() !== "select") {
+          return "continue";
+        }
+
+        if (event.type === "pointer" && event.name === "pointer_up") {
+          return handleTextPointerUp(editor, event, pendingCaretPointer, () => {
+            pendingCaretPointer = null;
+          });
+        }
+
+        if (event.type === "pointer" && event.name === "pointer_cancel") {
+          clearPendingCaretPointer();
+          return "continue";
+        }
+
+        if (!editor.isActiveToolInInitialState()) {
+          return "continue";
+        }
+
+        if (event.type === "keyboard" && event.name === "key_down") {
+          if (editor.getShapeEditingSession()) {
+            return "continue";
+          }
+
+          if (event.key !== "Enter" || event.altKey || event.accelKey) {
+            return "continue";
+          }
+
+          const selectedShapeIds = editor.getSelectedShapeIds();
+          const [selectedShape] = editor.getSelectedShapes();
+          if (
+            selectedShapeIds.length !== 1 ||
+            !selectedShape ||
+            !isTextShapeRecord(selectedShape) ||
+            !editor.canEditShape(selectedShape)
+          ) {
+            return "continue";
+          }
+
+          editor.startEditingShape(
+            {
+              shapeId: selectedShape.id,
+              entryMode: "selectAll",
+              markId: TEXT_EDIT_HISTORY_MARK,
+            },
+            "user",
+          );
+          return "handled";
+        }
+
+        if (event.type === "click" && event.name === "double_click") {
+          clearPendingCaretPointer();
+          return handleTextDoubleClick(editor, event);
+        }
+
+        if (event.type === "pointer" && event.name === "pointer_down") {
+          clearPendingCaretPointer();
+          return handleTextPointerDown(editor, event, (pending) => {
+            pendingCaretPointer = pending;
+          });
+        }
+
+        return "continue";
+      },
+    },
+  };
+}
+
+function handleTextDoubleClick(
+  editor: Editor,
+  event: ClickEditorEvent,
+): "continue" | "handled" {
+  const hit = editor.hitTestShape(event.pagePoint);
+  if (!hit) {
+    return "continue";
+  }
+
+  if (isTextShapeRecord(hit)) {
+    if (!editor.canEditShape(hit)) {
+      return "continue";
+    }
+
+    editor.startEditingShape(
+      {
+        shapeId: hit.id,
+        entryMode: "selectAll",
+        markId: TEXT_EDIT_HISTORY_MARK,
+      },
+      "user",
+    );
+    return "handled";
+  }
+
+  if (isGeoShapeRecord(hit)) {
+    return handleGeoLabelDoubleClick(editor, hit);
+  }
+
+  if (isArrowShapeRecord(hit)) {
+    return handleArrowLabelDoubleClick(editor, hit);
+  }
+
+  return "continue";
+}
+
+function handleArrowLabelDoubleClick(
+  editor: Editor,
+  owner: ShapeRecord,
+): "continue" | "handled" {
+  if (owner.isLocked) {
+    return "continue";
+  }
+
+  const existing = getTextLabelShapeForOwner(
+    editor,
+    owner.id,
+    ARROW_LABEL_BINDING_TYPE,
+  );
+  const label = existing ?? createArrowLabelTextShape(editor, owner);
+  startEditingTextLabel(editor, label, {
+    editMarkId: ARROW_LABEL_EDIT_HISTORY_MARK,
+    createMarkId: ARROW_LABEL_CREATE_HISTORY_MARK,
+    isExisting: !!existing,
+  });
+  return "handled";
+}
+
+function handleGeoLabelDoubleClick(
+  editor: Editor,
+  owner: ShapeRecord,
+): "continue" | "handled" {
+  if (owner.isLocked) {
+    return "continue";
+  }
+
+  const existing = getTextLabelShapeForOwner(
+    editor,
+    owner.id,
+    GEO_LABEL_BINDING_TYPE,
+  );
+  const label = existing ?? createGeoLabelTextShape(editor, owner);
+  startEditingTextLabel(editor, label, {
+    editMarkId: GEO_LABEL_EDIT_HISTORY_MARK,
+    createMarkId: GEO_LABEL_CREATE_HISTORY_MARK,
+    isExisting: !!existing,
+  });
+  return "handled";
+}
+
+function handleTextPointerDown(
+  editor: Editor,
+  event: PointerEditorEvent,
+  setPendingCaretPointer: (pending: {
+    pointerId: number;
+    shapeId: TextShapeRecord["id"];
+    originPagePoint: { x: number; y: number };
+  }) => void,
+): "continue" | "handled" {
+  const hit = editor.hitTestShape(event.pagePoint);
+  if (!hit || !isTextShapeRecord(hit) || !editor.canEditShape(hit)) {
+    return "continue";
+  }
+
+  const activeEditingSession = editor.getShapeEditingSession();
+  if (activeEditingSession && activeEditingSession.shapeId !== hit.id) {
+    if (!editor.completeEditing("user")) {
+      return "handled";
+    }
+    editor.startEditingShape(
+      {
+        shapeId: hit.id,
+        entryMode: "placeCaret",
+        caretPagePoint: event.pagePoint,
+        markId: TEXT_EDIT_HISTORY_MARK,
+        preserveInteraction: true,
+      },
+      "user",
+    );
+    return "handled";
+  }
+
+  if (
+    !activeEditingSession &&
+    (event.clickCount ?? 1) < 2 &&
+    canPlaceCaretInTextShapeFromSelection(editor, hit.id)
+  ) {
+    setPendingCaretPointer({
+      pointerId: event.pointerId,
+      shapeId: hit.id,
+      originPagePoint: { x: event.pagePoint.x, y: event.pagePoint.y },
+    });
+  }
+
+  return "continue";
+}
+
+function isGeoShapeRecord(shape: ShapeRecord): boolean {
+  return shape.type === "geo";
+}
+
+function isArrowShapeRecord(shape: ShapeRecord): boolean {
+  return shape.type === "arrow";
+}
+
+function createArrowLabelTextShape(
+  editor: Editor,
+  owner: ShapeRecord,
+): TextShapeRecord {
+  const defaults = getDefaultTextShapeProps(editor);
+  const draftLabel = createDraftLabel(owner, {
+    ...defaults,
+    autoSize: false,
+    textAlign: "middle",
+  });
+  const layout = getArrowLabelLayout(editor, draftLabel, owner);
+
+  return createBoundTextLabelShape(editor, {
+    bindingType: ARROW_LABEL_BINDING_TYPE,
+    owner,
+    historyMarkId: ARROW_LABEL_CREATE_HISTORY_MARK,
+    index: `${owner.index}${ARROW_LABEL_INDEX_SUFFIX}`,
+    layout,
+    bindingProps: {
+      labelPosition: 0.5,
+    },
+  });
+}
+
+function createGeoLabelTextShape(
+  editor: Editor,
+  owner: ShapeRecord,
+): TextShapeRecord {
+  const defaults = getDefaultTextShapeProps(editor);
+  const draftLabel = createDraftLabel(owner, {
+    ...defaults,
+    autoSize: false,
+    textAlign: "middle",
+  });
+  const layout = getGeoLabelLayout(editor, draftLabel, owner);
+
+  return createBoundTextLabelShape(editor, {
+    bindingType: GEO_LABEL_BINDING_TYPE,
+    owner,
+    historyMarkId: GEO_LABEL_CREATE_HISTORY_MARK,
+    index: `${owner.index}${GEO_LABEL_INDEX_SUFFIX}`,
+    layout,
+    bindingProps: {
+      normalizedAnchor: { x: 0.5, y: 0.5 },
+    },
+  });
+}
+
+function createDraftLabel(
+  owner: ShapeRecord,
+  props: TextShapeRecord["props"],
+): TextShapeRecord {
+  return {
+    id: "shape:draft",
+    typeName: "shape",
+    scope: "document",
+    type: "text",
+    parentId: owner.parentId,
+    index: `${owner.index}.label`,
+    x: 0,
+    y: 0,
+    rotation: 0,
+    scaleX: 1,
+    scaleY: 1,
+    opacity: 1,
+    isHidden: false,
+    isLocked: false,
+    meta: {},
+    props,
+  };
+}
+
+function handleTextPointerUp(
+  editor: Editor,
+  event: PointerEditorEvent,
+  pendingCaretPointer: {
+    pointerId: number;
+    shapeId: TextShapeRecord["id"];
+    originPagePoint: { x: number; y: number };
+  } | null,
+  clearPendingCaretPointer: () => void,
+): "continue" | "handled" {
+  if (!pendingCaretPointer || pendingCaretPointer.pointerId !== event.pointerId) {
+    clearPendingCaretPointer();
+    return "continue";
+  }
+
+  clearPendingCaretPointer();
+  if ((event.clickCount ?? 1) >= 2) {
+    return "continue";
+  }
+
+  const dx = event.pagePoint.x - pendingCaretPointer.originPagePoint.x;
+  const dy = event.pagePoint.y - pendingCaretPointer.originPagePoint.y;
+  if (dx * dx + dy * dy > TEXT_CARET_CLICK_MAX_DISTANCE_SQUARED) {
+    return "continue";
+  }
+
+  const shape = editor.getShape(pendingCaretPointer.shapeId);
+  if (!shape || !isTextShapeRecord(shape) || !editor.canEditShape(shape)) {
+    return "continue";
+  }
+
+  editor.startEditingShape(
+    {
+      shapeId: shape.id,
+      entryMode: "placeCaret",
+      caretPagePoint: event.pagePoint,
+      markId: TEXT_EDIT_HISTORY_MARK,
+      preserveInteraction: true,
+    },
+    "user",
+  );
+  return "continue";
+}