@yuzhouu/canvas-kit 0.1.2 → 0.1.3

package/_vendor/plugin-text/richTextUtils.ts

@@ -1,259 +0,0 @@
-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

@@ -1,366 +0,0 @@
-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";
-}