@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,77 @@
+import type { ChangeSource, Editor } from "@land/canvas-core";
+import type { TextShapeRecord } from "../textTypes";
+import { isTextShapeRecord } from "../textShapeHelpers";
+import { measureTextShapeFromRichText } from "./textMeasurement";
+import type { TiptapTextEditorController } from "./tiptapTextEditorController";
+
+export function scheduleTextEditorMeasurement(
+  editor: Editor,
+  controller: TiptapTextEditorController,
+  latestShapeRef: { current: TextShapeRecord },
+  measureTimerRef: { current: number | null },
+): void {
+  if (measureTimerRef.current !== null) {
+    window.clearTimeout(measureTimerRef.current);
+  }
+
+  measureTimerRef.current = window.setTimeout(() => {
+    measureTimerRef.current = null;
+    measureTextEditorLayout(editor, controller, latestShapeRef.current);
+  }, 0);
+}
+
+export function measureTextEditorLayout(
+  editor: Editor,
+  controller: TiptapTextEditorController,
+  shape: TextShapeRecord,
+): void {
+  if (controller.isDestroyed() || !controller.isConnected()) {
+    return;
+  }
+
+  const nextSize = controller.measure(shape);
+  if (!nextSize) {
+    return;
+  }
+
+  updateMeasuredTextShapeSize(editor, shape, nextSize, "user");
+}
+
+export function measureTextShapeRichTextLayout(
+  editor: Editor,
+  shape: TextShapeRecord,
+  source: ChangeSource = "system",
+): void {
+  const nextSize = measureTextShapeFromRichText(shape.props.richText, shape);
+  if (!nextSize) {
+    return;
+  }
+
+  updateMeasuredTextShapeSize(editor, shape, nextSize, source);
+}
+
+function updateMeasuredTextShapeSize(
+  editor: Editor,
+  shape: TextShapeRecord,
+  nextSize: { w: number; h: number },
+  source: ChangeSource,
+): void {
+  const current = editor.getShape(shape.id);
+  if (
+    isTextShapeRecord(current) &&
+    current.props.w === nextSize.w &&
+    current.props.h === nextSize.h
+  ) {
+    return;
+  }
+
+  editor.commands.updateShapes(
+    [
+      {
+        id: shape.id,
+        props: nextSize,
+      },
+    ],
+    { source },
+  );
+}

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

@@ -0,0 +1,134 @@
+import {
+  useCallback,
+  useRef,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+import type { Editor } from "@land/canvas-core";
+import type { TextShapeRecord } from "../textTypes";
+import type { TiptapTextEditorController } from "./tiptapTextEditorController";
+import { isRichTextToolbarTarget } from "./RichTextToolbar";
+
+export function useRangeClickCollapse({
+  editor,
+  shapeId,
+  richTextController,
+}: {
+  editor: Editor;
+  shapeId: TextShapeRecord["id"];
+  richTextController: TiptapTextEditorController | null;
+}): {
+  onPointerDownCapture(event: ReactPointerEvent<HTMLDivElement>): void;
+  onPointerMoveCapture(event: ReactPointerEvent<HTMLDivElement>): void;
+  onPointerUpCapture(event: ReactPointerEvent<HTMLDivElement>): void;
+  onPointerCancel(): void;
+} {
+  const pendingRangeClickCollapseRef = useRef<{
+    pointerId: number;
+    clientX: number;
+    clientY: number;
+    moved: boolean;
+  } | null>(null);
+
+  const onPointerDownCapture = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+      if (isRichTextToolbarTarget(event.target)) {
+        pendingRangeClickCollapseRef.current = null;
+        return;
+      }
+      if (
+        event.button !== 0 ||
+        event.detail !== 1 ||
+        !richTextController ||
+        richTextController.isDestroyed()
+      ) {
+        pendingRangeClickCollapseRef.current = null;
+        return;
+      }
+
+      const session = editor.getShapeEditingSession();
+      if (!session || session.shapeId !== shapeId || session.isComposing) {
+        pendingRangeClickCollapseRef.current = null;
+        return;
+      }
+
+      if (richTextController.getSelectionSnapshot().type !== "Range") {
+        pendingRangeClickCollapseRef.current = null;
+        return;
+      }
+
+      pendingRangeClickCollapseRef.current = {
+        pointerId: event.pointerId,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        moved: false,
+      };
+    },
+    [editor, richTextController, shapeId],
+  );
+
+  const onPointerMoveCapture = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const pending = pendingRangeClickCollapseRef.current;
+      if (!pending || pending.pointerId !== event.pointerId) {
+        return;
+      }
+
+      const deltaX = event.clientX - pending.clientX;
+      const deltaY = event.clientY - pending.clientY;
+      if (deltaX * deltaX + deltaY * deltaY >= 16) {
+        pending.moved = true;
+      }
+    },
+    [],
+  );
+
+  const onPointerUpCapture = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const pending = pendingRangeClickCollapseRef.current;
+      pendingRangeClickCollapseRef.current = null;
+      if (isRichTextToolbarTarget(event.target)) {
+        return;
+      }
+      if (
+        !pending ||
+        pending.pointerId !== event.pointerId ||
+        pending.moved ||
+        !richTextController ||
+        richTextController.isDestroyed()
+      ) {
+        return;
+      }
+
+      const session = editor.getShapeEditingSession();
+      if (!session || session.shapeId !== shapeId || session.isComposing) {
+        return;
+      }
+
+      const clientX = event.clientX;
+      const clientY = event.clientY;
+      window.setTimeout(() => {
+        if (
+          richTextController.isDestroyed() ||
+          richTextController.getSelectionSnapshot().type !== "Range"
+        ) {
+          return;
+        }
+
+        richTextController.collapseSelectionAtClientPoint(clientX, clientY);
+      }, 0);
+    },
+    [editor, richTextController, shapeId],
+  );
+
+  const onPointerCancel = useCallback(() => {
+    pendingRangeClickCollapseRef.current = null;
+  }, []);
+
+  return {
+    onPointerDownCapture,
+    onPointerMoveCapture,
+    onPointerUpCapture,
+    onPointerCancel,
+  };
+}

package/_vendor/plugin-text/host/textShapeRendererRuntime.tsx

@@ -0,0 +1,89 @@
+import { useLayoutEffect, type ReactNode } from "react";
+import type { Editor } from "@land/canvas-core";
+import { useValue } from "@land/canvas-react";
+import type { TextShapeRecord } from "../textTypes";
+import { isTextShapeRecord } from "../textShapeHelpers";
+import { ShapeEditingSessionBox } from "./RichTextEditingBox";
+import { ensureTextFontLoaded } from "./textFontLoader";
+import { measureTextShapeRichTextLayout } from "./textMeasurementSync";
+
+export interface TextShapeRendererRuntime {
+  isEditingThisShape: boolean;
+  editingHost: ReactNode;
+}
+
+export function useTextShapeRendererRuntime(
+  editor: Editor,
+  shape: TextShapeRecord,
+): TextShapeRendererRuntime {
+  const textEditingState = useValue(editor.shapeEditingStateSignal);
+  const session = textEditingState.session;
+  const isEditingThisShape = session?.shapeId === shape.id;
+  const editingHost =
+    session && isEditingThisShape ? (
+      <ShapeEditingSessionBox
+        key={session.shapeId + ":" + session.markId}
+        shapeId={session.shapeId}
+        markId={session.markId}
+      />
+    ) : null;
+
+  useTextShapeRenderMeasurement({
+    editor,
+    shape,
+    isEditingThisShape,
+  });
+
+  return {
+    isEditingThisShape,
+    editingHost,
+  };
+}
+
+function useTextShapeRenderMeasurement({
+  editor,
+  shape,
+  isEditingThisShape,
+}: {
+  editor: Editor;
+  shape: TextShapeRecord;
+  isEditingThisShape: boolean;
+}): void {
+  useLayoutEffect(() => {
+    if (isEditingThisShape) {
+      return;
+    }
+
+    measureTextShapeRichTextLayout(editor, shape);
+
+    let isCancelled = false;
+    void ensureTextFontLoaded(shape.props.font).then(() => {
+      if (isCancelled) {
+        return;
+      }
+
+      const currentShape = editor.getShape(shape.id);
+      if (
+        isTextShapeRecord(currentShape) &&
+        currentShape.props.font === shape.props.font
+      ) {
+        measureTextShapeRichTextLayout(editor, currentShape);
+      }
+    });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [
+    editor,
+    isEditingThisShape,
+    shape,
+    shape.props.autoSize,
+    shape.props.font,
+    shape.props.richText,
+    shape.props.scale,
+    shape.props.size,
+    shape.props.textAlign,
+    shape.props.w,
+  ]);
+}

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

@@ -0,0 +1,173 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type MutableRefObject,
+} from "react";
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import type { Editor } from "@land/canvas-core";
+import {
+  type RichTextDocument,
+  type TextShapeRecord,
+} from "../textTypes";
+import { validateRichTextDocument } from "../richTextUtils";
+import { updateTextShapeRichText } from "../textShapeHelpers";
+import type { TiptapTextEditorController } from "./tiptapTextEditorController";
+import {
+  measureTextEditorLayout,
+  scheduleTextEditorMeasurement,
+} from "./textMeasurementSync";
+import { measureTextShapeFromRichText } from "./textMeasurement";
+import { ensureTextFontLoaded } from "./textFontLoader";
+
+export function useLatestTextShapeRef(
+  shape: TextShapeRecord,
+): MutableRefObject<TextShapeRecord> {
+  const latestShapeRef = useRef(shape);
+
+  useEffect(() => {
+    latestShapeRef.current = shape;
+  }, [shape]);
+
+  return latestShapeRef;
+}
+
+export function useRichTextShapeSync({
+  editor,
+  shape,
+  tiptapEditor,
+  richTextController,
+  latestShapeRef,
+}: {
+  editor: Editor;
+  shape: TextShapeRecord;
+  tiptapEditor: TiptapEditor | null;
+  richTextController: TiptapTextEditorController | null;
+  latestShapeRef: MutableRefObject<TextShapeRecord>;
+}): (input: {
+  editor: TiptapEditor;
+  controller: TiptapTextEditorController;
+  richText: RichTextDocument;
+}) => void {
+  const latestAppliedRichTextRef = useRef<RichTextDocument>(shape.props.richText);
+  const isApplyingRemoteUpdateRef = useRef(false);
+  const measureTimerRef = useRef<number | null>(null);
+
+  const handleRichTextChange = useCallback(
+    ({
+      controller,
+      richText,
+    }: {
+      editor: TiptapEditor;
+      controller: TiptapTextEditorController;
+      richText: RichTextDocument;
+    }) => {
+      if (isApplyingRemoteUpdateRef.current || !controller.isConnected()) {
+        return;
+      }
+      const normalizedRichText = validateRichTextDocument(richText);
+      latestAppliedRichTextRef.current = normalizedRichText;
+      updateTextShapeRichText(
+        editor,
+        shape.id,
+        normalizedRichText,
+        controller.measure(latestShapeRef.current) ??
+          measureTextShapeFromRichText(normalizedRichText, latestShapeRef.current),
+        "user",
+      );
+      scheduleTextEditorMeasurement(
+        editor,
+        controller,
+        latestShapeRef,
+        measureTimerRef,
+      );
+    },
+    [editor, latestShapeRef, shape.id],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (measureTimerRef.current !== null) {
+        window.clearTimeout(measureTimerRef.current);
+        measureTimerRef.current = null;
+      }
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (
+      !tiptapEditor ||
+      !richTextController ||
+      tiptapEditor.isDestroyed ||
+      !richTextController.isConnected()
+    ) {
+      return;
+    }
+
+    measureTextEditorLayout(editor, richTextController, shape);
+  }, [editor, richTextController, shape, tiptapEditor]);
+
+  useEffect(() => {
+    if (
+      !tiptapEditor ||
+      !richTextController ||
+      !richTextController.isConnected()
+    ) {
+      return;
+    }
+
+    const nextRichText = shape.props.richText;
+    if (nextRichText === latestAppliedRichTextRef.current) {
+      return;
+    }
+
+    if (
+      JSON.stringify(latestAppliedRichTextRef.current) ===
+      JSON.stringify(nextRichText)
+    ) {
+      latestAppliedRichTextRef.current = nextRichText;
+      return;
+    }
+
+    isApplyingRemoteUpdateRef.current = true;
+    richTextController.setValue(nextRichText);
+    latestAppliedRichTextRef.current = nextRichText;
+    isApplyingRemoteUpdateRef.current = false;
+  }, [richTextController, shape.props.richText, tiptapEditor]);
+
+  useEffect(() => {
+    if (!richTextController) {
+      return;
+    }
+
+    return richTextController.onCompositionStateChange((isComposing) => {
+      editor.setShapeEditingComposition(isComposing, "system");
+    });
+  }, [editor, richTextController]);
+
+  useEffect(() => {
+    if (!richTextController || !richTextController.isConnected()) {
+      return;
+    }
+
+    let isCancelled = false;
+    void ensureTextFontLoaded(shape.props.font).then(() => {
+      if (isCancelled || !richTextController.isConnected()) {
+        return;
+      }
+
+      measureTextEditorLayout(
+        editor,
+        richTextController,
+        latestShapeRef.current,
+      );
+    });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [editor, latestShapeRef, richTextController, shape.props.font]);
+
+  return handleRichTextChange;
+}

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

@@ -0,0 +1,148 @@
+import type { JSONContent } from "@tiptap/core";
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import { Vec, type Editor, type ShapeId } from "@land/canvas-core";
+import type { RichTextDocument, TextShapeRecord } from "../textTypes";
+import { validateRichTextDocument } from "../richTextUtils";
+import {
+  ensureTextEditorFocused,
+  getTextEditorSelectionSnapshot,
+  hasMountedTextEditorView,
+  isDomSelectionRangeInsideTextEditor,
+  placeCaretInTextEditorAtClientPoint,
+} from "./textDomSelection";
+import { measureTextShapeFromEditor } from "./textMeasurement";
+
+export interface TiptapTextSelectionSnapshot {
+  type: string | null;
+  text: string | null;
+}
+
+export interface TiptapTextEditorController {
+  readonly shapeId: ShapeId;
+  getValue(): RichTextDocument;
+  setValue(value: RichTextDocument): void;
+  isDestroyed(): boolean;
+  isConnected(): boolean;
+  isFocused(): boolean;
+  focus(): void;
+  focusEnd(): void;
+  focusSelectAll(): void;
+  focusAtPagePoint(editor: Editor, pagePoint: { x: number; y: number }): void;
+  getSelectionSnapshot(): TiptapTextSelectionSnapshot;
+  collapseSelectionAtClientPoint(clientX: number, clientY: number): void;
+  measure(shape: TextShapeRecord): { w: number; h: number } | undefined;
+  onCompositionStateChange(listener: (isComposing: boolean) => void): () => void;
+}
+
+export function createTiptapTextEditorController({
+  shapeId,
+  editor,
+}: {
+  shapeId: ShapeId;
+  editor: TiptapEditor;
+}): TiptapTextEditorController {
+  return {
+    shapeId,
+    isDestroyed() {
+      return editor.isDestroyed;
+    },
+    isConnected() {
+      return !editor.isDestroyed && hasMountedTextEditorView(editor);
+    },
+    isFocused() {
+      return (
+        !editor.isDestroyed &&
+        hasMountedTextEditorView(editor) &&
+        editor.view.dom.contains(document.activeElement)
+      );
+    },
+    getValue() {
+      return validateRichTextDocument(editor.getJSON());
+    },
+    setValue(value) {
+      editor.commands.setContent(value as JSONContent);
+    },
+    focus() {
+      ensureTextEditorFocused(editor);
+    },
+    focusEnd() {
+      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
+        return;
+      }
+      editor.commands.focus("end");
+    },
+    focusSelectAll() {
+      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
+        return;
+      }
+      ensureTextEditorFocused(editor);
+      editor.chain().focus().selectAll().run();
+    },
+    focusAtPagePoint(landEditor, pagePoint) {
+      focusTiptapAtPagePoint(landEditor, editor, pagePoint);
+    },
+    getSelectionSnapshot() {
+      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
+        return { type: null, text: null };
+      }
+      return getTextEditorSelectionSnapshot(editor);
+    },
+    collapseSelectionAtClientPoint(clientX, clientY) {
+      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
+        return;
+      }
+      if (!isDomSelectionRangeInsideTextEditor(editor)) {
+        return;
+      }
+      placeCaretInTextEditorAtClientPoint(editor, clientX, clientY);
+    },
+    measure(shape) {
+      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
+        return undefined;
+      }
+      return measureTextShapeFromEditor(editor, shape);
+    },
+    onCompositionStateChange(listener) {
+      if (editor.isDestroyed) {
+        return () => {};
+      }
+
+      const element = editor.view.dom;
+      const handleCompositionStart = () => listener(true);
+      const handleCompositionEnd = () => listener(false);
+      element.addEventListener("compositionstart", handleCompositionStart);
+      element.addEventListener("compositionend", handleCompositionEnd);
+
+      return () => {
+        element.removeEventListener(
+          "compositionstart",
+          handleCompositionStart,
+        );
+        element.removeEventListener("compositionend", handleCompositionEnd);
+        listener(false);
+      };
+    },
+  };
+}
+
+function focusTiptapAtPagePoint(
+  landEditor: Editor,
+  editor: TiptapEditor,
+  pagePoint: { x: number; y: number },
+): void {
+  ensureTextEditorFocused(editor);
+  const screenPoint = landEditor.pageToScreen(
+    new Vec(pagePoint.x, pagePoint.y),
+  );
+  const pos = editor.view.posAtCoords({
+    left: screenPoint.x,
+    top: screenPoint.y,
+  })?.pos;
+
+  if (pos) {
+    editor.chain().focus().setTextSelection(pos).run();
+    return;
+  }
+
+  editor.chain().focus().selectAll().run();
+}

package/_vendor/plugin-text/index.ts

@@ -0,0 +1,18 @@
+export { Text, createTextFeatureBundle } from "./feature";
+export {
+  createRichTextFromPlainText,
+  getPlainTextFromRichText,
+  validateRichTextDocument,
+} from "./richTextUtils";
+export {
+  isTextShapeRecord,
+  updateTextShapeRichText,
+} from "./textShapeHelpers";
+export type {
+  RichTextDocument,
+  TextShapeAlign,
+  TextShapeFont,
+  TextShapeProps,
+  TextShapeRecord,
+  TextShapeSize,
+} from "./textTypes";