@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-text/host/textEntryFocus.ts

@@ -0,0 +1,307 @@
+import {
+  useEffect,
+  useRef,
+  type MutableRefObject,
+} from "react";
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import type {
+  Editor,
+  ShapeEditingEntryRequest,
+  ShapeEditingSession,
+} from "@land/canvas-core";
+import type { TextShapeRecord } from "../textTypes";
+import type { TiptapTextEditorController } from "./tiptapTextEditorController";
+
+export function focusTextEditorWhenMounted({
+  editor,
+  controller,
+  shapeId,
+  request,
+  onApplied,
+  attempt = 0,
+}: {
+  editor: Editor;
+  controller: TiptapTextEditorController;
+  shapeId: TextShapeRecord["id"];
+  request: ShapeEditingEntryRequest | null;
+  onApplied?: (request: ShapeEditingEntryRequest | null) => void;
+  attempt?: number;
+}): void {
+  if (controller.isDestroyed()) {
+    return;
+  }
+
+  if (!controller.isConnected()) {
+    if (attempt >= 4) {
+      return;
+    }
+    window.requestAnimationFrame(() => {
+      focusTextEditorWhenMounted({
+        editor,
+        controller,
+        shapeId,
+        request,
+        onApplied,
+        attempt: attempt + 1,
+      });
+    });
+    return;
+  }
+
+  applyTextEditingEntryFocus({
+    editor,
+    controller,
+    shapeId,
+    request,
+    onApplied,
+  });
+}
+
+function applyTextEditingEntryFocus({
+  editor,
+  controller,
+  shapeId,
+  request,
+  onApplied,
+}: {
+  editor: Editor;
+  controller: TiptapTextEditorController;
+  shapeId: TextShapeRecord["id"];
+  request: ShapeEditingEntryRequest | null;
+  onApplied?: (request: ShapeEditingEntryRequest | null) => void;
+}): void {
+  if (controller.isDestroyed()) {
+    return;
+  }
+
+  controller.focus();
+
+  if (!request || request.shapeId !== shapeId) {
+    controller.focusEnd();
+    onApplied?.(request);
+    return;
+  }
+
+  if (request.entryMode === "selectAll") {
+    window.requestAnimationFrame(() => {
+      if (controller.isDestroyed() || !controller.isConnected()) {
+        return;
+      }
+      controller.focusSelectAll();
+    });
+    editor.consumeShapeEditingEntryRequest(request.id);
+    onApplied?.(request);
+    return;
+  }
+  if (request.entryMode === "placeCaret" && request.caretPagePoint) {
+    controller.focusAtPagePoint(editor, request.caretPagePoint);
+    editor.consumeShapeEditingEntryRequest(request.id);
+    onApplied?.(request);
+    return;
+  }
+
+  controller.focusEnd();
+  editor.consumeShapeEditingEntryRequest(request.id);
+  onApplied?.(request);
+}
+
+export function useTextEditingEntryFocus({
+  editor,
+  shapeId,
+  session,
+  tiptapEditor,
+  richTextController,
+  entryRequest,
+  consumedEntryRequestIdRef,
+}: {
+  editor: Editor;
+  shapeId: TextShapeRecord["id"];
+  session: ShapeEditingSession;
+  tiptapEditor: TiptapEditor | null;
+  richTextController: TiptapTextEditorController | null;
+  entryRequest: ShapeEditingEntryRequest | null;
+  consumedEntryRequestIdRef: MutableRefObject<number | null>;
+}): void {
+  const replayedSessionEntryRef = useRef<{
+    markId: string;
+    entryMode: ShapeEditingSession["entryMode"];
+  } | null>(null);
+  const appliedInitialSessionEntryRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (
+      !richTextController ||
+      richTextController.isDestroyed() ||
+      !richTextController.isConnected()
+    ) {
+      return;
+    }
+
+    let cancelled = false;
+    let timeoutId: number | null = null;
+    let attempts = 0;
+
+    const ensureFocus = () => {
+      if (cancelled || richTextController.isDestroyed()) {
+        return;
+      }
+      if (consumedEntryRequestIdRef.current !== null) {
+        return;
+      }
+      if (richTextController.isFocused()) {
+        return;
+      }
+
+      richTextController.focus();
+      attempts += 1;
+      if (richTextController.isFocused() || attempts >= 4) {
+        return;
+      }
+      timeoutId = window.setTimeout(ensureFocus, 16);
+    };
+
+    const frameId = window.requestAnimationFrame(() => {
+      ensureFocus();
+    });
+
+    return () => {
+      cancelled = true;
+      window.cancelAnimationFrame(frameId);
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [
+    consumedEntryRequestIdRef,
+    richTextController,
+    shapeId,
+  ]);
+
+  useEffect(() => {
+    if (
+      !tiptapEditor ||
+      tiptapEditor.isDestroyed ||
+      !richTextController ||
+      consumedEntryRequestIdRef.current !== null ||
+      appliedInitialSessionEntryRef.current === session.markId
+    ) {
+      return;
+    }
+
+    appliedInitialSessionEntryRef.current = session.markId;
+    window.setTimeout(() => {
+      focusTextEditorWhenMounted({
+        editor,
+        controller: richTextController,
+        shapeId,
+        request: {
+          id: -1,
+          shapeId: session.shapeId,
+          entryMode: session.entryMode,
+          caretPagePoint: session.caretPagePoint,
+        },
+      });
+    }, 0);
+  }, [
+    consumedEntryRequestIdRef,
+    editor,
+    richTextController,
+    session.caretPagePoint,
+    session.entryMode,
+    session.markId,
+    session.shapeId,
+    shapeId,
+    tiptapEditor,
+  ]);
+
+  useEffect(() => {
+    if (
+      !tiptapEditor ||
+      tiptapEditor.isDestroyed ||
+      !richTextController ||
+      !entryRequest ||
+      entryRequest.shapeId !== shapeId ||
+      consumedEntryRequestIdRef.current === entryRequest.id
+    ) {
+      return;
+    }
+
+    focusTextEditorWhenMounted({
+      editor,
+      controller: richTextController,
+      shapeId,
+      request: entryRequest,
+      onApplied(appliedRequest: ShapeEditingEntryRequest | null) {
+        if (appliedRequest) {
+          consumedEntryRequestIdRef.current = appliedRequest.id;
+        }
+      },
+    });
+  }, [
+    consumedEntryRequestIdRef,
+    editor,
+    entryRequest,
+    richTextController,
+    shapeId,
+    tiptapEditor,
+  ]);
+
+  useEffect(() => {
+    if (
+      !tiptapEditor ||
+      !richTextController ||
+      tiptapEditor.isDestroyed ||
+      !richTextController.isConnected()
+    ) {
+      return;
+    }
+
+    const controller = richTextController;
+    if (session.entryMode === "selectAll") {
+      window.requestAnimationFrame(() => {
+        const snapshot = controller.getSelectionSnapshot();
+        if (snapshot.type !== "Range") {
+          controller.focusSelectAll();
+        }
+      });
+    }
+    const replayedSessionEntry = replayedSessionEntryRef.current;
+    const sessionCaretPagePoint = session.caretPagePoint;
+    const shouldReplayPlaceCaret =
+      session.entryMode === "placeCaret" &&
+      sessionCaretPagePoint &&
+      (replayedSessionEntry?.markId !== session.markId ||
+        replayedSessionEntry.entryMode !== session.entryMode);
+    if (shouldReplayPlaceCaret) {
+      replayedSessionEntryRef.current = {
+        markId: session.markId,
+        entryMode: session.entryMode,
+      };
+      const caretPagePoint = {
+        x: sessionCaretPagePoint.x,
+        y: sessionCaretPagePoint.y,
+      };
+      window.requestAnimationFrame(() => {
+        focusTextEditorWhenMounted({
+          editor,
+          controller,
+          shapeId: session.shapeId,
+          request: {
+            id: -1,
+            shapeId: session.shapeId,
+            entryMode: "placeCaret",
+            caretPagePoint,
+          },
+        });
+      });
+    }
+  }, [
+    editor,
+    session.caretPagePoint,
+    session.entryMode,
+    session.markId,
+    session.shapeId,
+    richTextController,
+    tiptapEditor,
+  ]);
+}

package/_vendor/plugin-text/host/textFontLoader.ts

@@ -0,0 +1,149 @@
+import type { TextShapeFont } from "../textTypes";
+
+interface TextWebFontDefinition {
+  readonly font: TextShapeFont;
+  readonly family: string;
+  readonly cssUrl: string;
+  readonly weights: readonly number[];
+}
+
+const TEXT_WEB_FONT_DEFINITIONS = {
+  "noto-sans-sc": {
+    font: "noto-sans-sc",
+    family: "Noto Sans SC",
+    cssUrl:
+      "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap",
+    weights: [400, 700],
+  },
+  "noto-serif-sc": {
+    font: "noto-serif-sc",
+    family: "Noto Serif SC",
+    cssUrl:
+      "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap",
+    weights: [400, 700],
+  },
+  "noto-sans-mono": {
+    font: "noto-sans-mono",
+    family: "Noto Sans Mono",
+    cssUrl:
+      "https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;700&display=swap",
+    weights: [400, 700],
+  },
+  "ma-shan-zheng": {
+    font: "ma-shan-zheng",
+    family: "Ma Shan Zheng",
+    cssUrl:
+      "https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap",
+    weights: [400],
+  },
+} as const satisfies Record<TextShapeFont, TextWebFontDefinition>;
+
+const fontLoadPromises = new WeakMap<
+  Document,
+  Map<TextShapeFont, Promise<void>>
+>();
+
+export function ensureTextFontLoaded(
+  font: TextShapeFont,
+  ownerDocument?: Document,
+): Promise<void> {
+  const definition = getTextWebFontDefinition(font);
+  const documentForFont = ownerDocument ?? getGlobalDocument();
+  if (!definition || !documentForFont) {
+    return Promise.resolve();
+  }
+
+  const documentPromises = getDocumentFontLoadPromises(documentForFont);
+  const existingPromise = documentPromises.get(font);
+  if (existingPromise) {
+    return existingPromise;
+  }
+
+  const promise = loadTextWebFont(documentForFont, definition).catch(() => {
+    documentPromises.delete(font);
+  });
+  documentPromises.set(font, promise);
+  return promise;
+}
+
+function getTextWebFontDefinition(
+  font: TextShapeFont,
+): TextWebFontDefinition | undefined {
+  if (!hasTextWebFontDefinition(font)) {
+    return undefined;
+  }
+  return TEXT_WEB_FONT_DEFINITIONS[font];
+}
+
+function hasTextWebFontDefinition(
+  font: TextShapeFont,
+): font is keyof typeof TEXT_WEB_FONT_DEFINITIONS {
+  return Object.prototype.hasOwnProperty.call(TEXT_WEB_FONT_DEFINITIONS, font);
+}
+
+function getGlobalDocument(): Document | undefined {
+  return typeof document === "undefined" ? undefined : document;
+}
+
+function getDocumentFontLoadPromises(
+  ownerDocument: Document,
+): Map<TextShapeFont, Promise<void>> {
+  const existing = fontLoadPromises.get(ownerDocument);
+  if (existing) {
+    return existing;
+  }
+
+  const next = new Map<TextShapeFont, Promise<void>>();
+  fontLoadPromises.set(ownerDocument, next);
+  return next;
+}
+
+async function loadTextWebFont(
+  ownerDocument: Document,
+  definition: TextWebFontDefinition,
+): Promise<void> {
+  await ensureFontStylesheet(ownerDocument, definition);
+  await waitForFontFaces(ownerDocument, definition);
+}
+
+function ensureFontStylesheet(
+  ownerDocument: Document,
+  definition: TextWebFontDefinition,
+): Promise<void> {
+  const existing = ownerDocument.querySelector<HTMLLinkElement>(
+    `link[data-land-text-web-font="${definition.font}"]`,
+  );
+  if (existing) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    const link = ownerDocument.createElement("link");
+    link.rel = "stylesheet";
+    link.href = definition.cssUrl;
+    link.dataset.landTextWebFont = definition.font;
+
+    const finish = () => resolve();
+    link.addEventListener("load", finish, { once: true });
+    link.addEventListener("error", finish, { once: true });
+
+    const target = ownerDocument.head ?? ownerDocument.documentElement;
+    target.appendChild(link);
+  });
+}
+
+async function waitForFontFaces(
+  ownerDocument: Document,
+  definition: TextWebFontDefinition,
+): Promise<void> {
+  const { fonts } = ownerDocument;
+  if (!fonts) {
+    return;
+  }
+
+  await Promise.all(
+    definition.weights.map((weight) =>
+      fonts.load(`${weight} 16px "${definition.family}"`, "字体Aa"),
+    ),
+  );
+}

package/_vendor/plugin-text/host/textMeasurement.ts

@@ -0,0 +1,258 @@
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import type {
+  RichTextDocument,
+  TextShapeRecord,
+} from "../textTypes";
+import {
+  getPlainTextFromRichText,
+  renderRichTextDocumentToHtml,
+} from "../richTextUtils";
+import {
+  getTextAlign,
+  getTextFontFamily,
+  getTextFontSize,
+  getTextLineHeight,
+  getTextMinHeight,
+} from "../textStyle";
+
+export const TEXT_AUTO_SIZE_MIN_W = 16;
+
+export function measureTextShapeFromEditor(
+  textEditor: TiptapEditor,
+  shape: TextShapeRecord,
+): { w: number; h: number } | undefined {
+  if (textEditor.getText().trim().length === 0) {
+    return getEmptyTextShapeSize(shape);
+  }
+
+  const measuredSize = measureRichTextElement(textEditor.view.dom, {
+    shape,
+    width: shape.props.autoSize ? undefined : shape.props.w,
+  });
+  if (textEditor.view.dom.scrollHeight > shape.props.h + 1) {
+    measuredSize.h = Math.max(measuredSize.h, textEditor.view.dom.scrollHeight);
+  }
+
+  return getMeasuredTextShapeSize(shape, measuredSize);
+}
+
+export function measureTextShapeFromRichText(
+  richText: RichTextDocument,
+  shape: TextShapeRecord,
+): { w: number; h: number } | undefined {
+  if (getPlainTextFromRichText(richText).trim().length === 0) {
+    return getEmptyTextShapeSize(shape);
+  }
+
+  return getMeasuredTextShapeSize(
+    shape,
+    measureTextHtml(renderRichTextDocumentToHtml(richText), {
+      width: shape.props.autoSize ? undefined : shape.props.w,
+      shape,
+    }),
+  );
+}
+
+export function applyTextShapeElementStyles(
+  element: HTMLElement,
+  shape: TextShapeRecord,
+): void {
+  element.className =
+    "land-rich-text-editor h-full min-h-full w-full outline-none whitespace-pre-wrap break-words";
+  element.dir = "auto";
+  element.style.color = shape.props.color;
+  element.style.fontFamily = getTextFontFamily(shape.props.font);
+  element.style.fontSize = `${getTextFontSize(shape.props.size)}px`;
+  element.style.lineHeight = `${getTextLineHeight(shape.props.size)}px`;
+  element.style.textAlign = getTextAlign(shape.props.textAlign);
+}
+
+function getEmptyTextShapeSize(
+  shape: TextShapeRecord,
+): { w: number; h: number } | undefined {
+  const nextW = shape.props.autoSize ? TEXT_AUTO_SIZE_MIN_W : shape.props.w;
+  const nextH = getTextMinHeight(shape.props.size);
+  if (shape.props.w === nextW && shape.props.h === nextH) {
+    return undefined;
+  }
+  return { w: nextW, h: nextH };
+}
+
+function getMeasuredTextShapeSize(
+  shape: TextShapeRecord,
+  measuredSize: { w: number; h: number },
+): { w: number; h: number } | undefined {
+  const nextW = shape.props.autoSize
+    ? Math.max(TEXT_AUTO_SIZE_MIN_W, Math.ceil(measuredSize.w))
+    : shape.props.w;
+  const nextH = Math.max(
+    getTextMinHeight(shape.props.size),
+    Math.ceil(measuredSize.h),
+  );
+
+  if (nextW === shape.props.w && nextH === shape.props.h) {
+    return undefined;
+  }
+
+  return { w: nextW, h: nextH };
+}
+
+function measureTextHtml(
+  html: string,
+  options?: { shape?: TextShapeRecord; width?: number },
+): { w: number; h: number } {
+  const manager = getTextMeasurementManager(document);
+  return manager.measureHtml(html, options);
+}
+
+function measureRichTextElement(
+  element: HTMLElement,
+  options?: { shape?: TextShapeRecord; width?: number },
+): { w: number; h: number } {
+  const computed = element.ownerDocument.defaultView?.getComputedStyle(element);
+  return getTextMeasurementManager(element.ownerDocument).measureElement(
+    element,
+    options,
+    computed,
+  );
+}
+
+class TextMeasurementManager {
+  private readonly element: HTMLDivElement;
+
+  constructor(private readonly ownerDocument: Document) {
+    this.element = ownerDocument.createElement("div");
+    this.element.setAttribute("aria-hidden", "true");
+    this.element.style.position = "absolute";
+    this.element.style.left = "-10000px";
+    this.element.style.top = "0";
+    this.element.style.visibility = "hidden";
+    this.element.style.pointerEvents = "none";
+    ownerDocument.body.appendChild(this.element);
+  }
+
+  measureHtml(
+    html: string,
+    options?: { shape?: TextShapeRecord; width?: number },
+  ): { w: number; h: number } {
+    const element = this.prepareElement(options);
+    element.innerHTML = html;
+    return this.measurePreparedElement(element);
+  }
+
+  measureElement(
+    source: HTMLElement,
+    options?: { shape?: TextShapeRecord; width?: number },
+    computed?: CSSStyleDeclaration,
+  ): { w: number; h: number } {
+    const element = this.prepareElement(options);
+    element.replaceChildren(...Array.from(source.childNodes).map((child) => child.cloneNode(true)));
+    applyComputedStyleValue(element, "whiteSpace", computed?.whiteSpace);
+    applyComputedStyleValue(element, "overflowWrap", computed?.overflowWrap);
+    applyComputedStyleValue(element, "lineHeight", computed?.lineHeight);
+    applyComputedStyleValue(element, "letterSpacing", computed?.letterSpacing);
+    applyComputedStyleValue(element, "textAlign", computed?.textAlign);
+    return this.measurePreparedElement(element);
+  }
+
+  private prepareElement(
+    options?: { shape?: TextShapeRecord; width?: number },
+  ): HTMLDivElement {
+    const element = this.element;
+    element.removeAttribute("contenteditable");
+    element.className = "";
+    element.textContent = "";
+
+    if (options?.shape) {
+      applyTextShapeElementStyles(element, options.shape);
+    }
+
+    element.style.position = "absolute";
+    element.style.left = "-10000px";
+    element.style.top = "0";
+    element.style.visibility = "hidden";
+    element.style.pointerEvents = "none";
+    element.style.width =
+      typeof options?.width === "number" ? `${options.width}px` : "max-content";
+    element.style.minWidth = "0";
+    element.style.height = "auto";
+    element.style.minHeight = "0";
+    element.style.maxHeight = "none";
+    element.style.maxWidth =
+      typeof options?.width === "number" ? `${options.width}px` : "none";
+    return element;
+  }
+
+  private measurePreparedElement(
+    element: HTMLElement,
+  ): { w: number; h: number } {
+    element.querySelectorAll("p").forEach((paragraph) => {
+      if (paragraph instanceof HTMLElement) {
+        paragraph.style.margin = "0";
+      }
+    });
+    const measuredElements = [
+      element,
+      ...Array.from(element.querySelectorAll("*")).filter(
+        (child): child is HTMLElement => child instanceof HTMLElement,
+      ),
+    ];
+    const measuredSize = measuredElements.reduce(
+      (current, child) => {
+        const childRect = child.getBoundingClientRect();
+        return {
+          w: Math.max(
+            current.w,
+            childRect.width,
+            child.scrollWidth,
+            child.offsetWidth,
+          ),
+          h: Math.max(
+            current.h,
+            childRect.height,
+            child.scrollHeight,
+            child.offsetHeight,
+          ),
+        };
+      },
+      { w: 0, h: 0 },
+    );
+
+    return measuredSize;
+  }
+}
+
+const textMeasurementManagers = new WeakMap<
+  Document,
+  TextMeasurementManager
+>();
+
+function getTextMeasurementManager(
+  ownerDocument: Document,
+): TextMeasurementManager {
+  const existing = textMeasurementManagers.get(ownerDocument);
+  if (existing) {
+    return existing;
+  }
+  const manager = new TextMeasurementManager(ownerDocument);
+  textMeasurementManagers.set(ownerDocument, manager);
+  return manager;
+}
+
+function applyComputedStyleValue(
+  element: HTMLElement,
+  property:
+    | "whiteSpace"
+    | "overflowWrap"
+    | "font"
+    | "lineHeight"
+    | "letterSpacing"
+    | "textAlign",
+  value: string | undefined,
+): void {
+  if (!value || value === "normal" || value === "auto") {
+    return;
+  }
+
+  element.style[property] = value;
+}