@yuzhouu/canvas-kit 0.1.2 → 0.1.4

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

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

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

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