@yuzhouu/canvas-kit 0.1.2

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

@@ -0,0 +1,266 @@
+import { useMemo, useRef } from "react";
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+
+const RICH_TEXT_FORMATS: Array<{
+  id: "bold" | "italic" | "strike";
+  label: string;
+  shortcut: string;
+  dataUi: string;
+  content: string;
+}> = [
+  {
+    id: "bold",
+    label: "Bold",
+    shortcut: "B",
+    dataUi: "text-bold-button",
+    content: "B",
+  },
+  {
+    id: "italic",
+    label: "Italic",
+    shortcut: "I",
+    dataUi: "text-italic-button",
+    content: "I",
+  },
+  {
+    id: "strike",
+    label: "Strikethrough",
+    shortcut: "S",
+    dataUi: "text-strike-button",
+    content: "S",
+  },
+];
+
+function getCssPixelVariable(name: string, fallback: number): number {
+  if (typeof document === "undefined") return fallback;
+  const rawValue = getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+  if (!rawValue) return fallback;
+  const numericValue = Number.parseFloat(rawValue);
+  if (!Number.isFinite(numericValue)) return fallback;
+  return rawValue.endsWith("rem") ? numericValue * 16 : numericValue;
+}
+
+function getRichTextBubbleMenuOptions() {
+  const offset = getCssPixelVariable("--toolbar-floating-offset", 8);
+  const shiftPadding = getCssPixelVariable("--toolbar-floating-shift-padding", 8);
+
+  return {
+    strategy: "fixed" as const,
+    placement: "top" as const,
+    offset,
+    flip: true,
+    shift: { padding: shiftPadding },
+  };
+}
+
+export function isRichTextToolbarTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest('[data-ui="rich-text-formatting-toolbar"]') !== null
+  );
+}
+
+export function RichTextToolbar({
+  editor,
+  version: _version,
+}: {
+  editor: TiptapEditor;
+  version: number;
+}) {
+  const bubbleMenuOptions = useMemo(() => getRichTextBubbleMenuOptions(), []);
+
+  if (editor.isDestroyed) {
+    return null;
+  }
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      updateDelay={0}
+      resizeDelay={0}
+      appendTo={appendRichTextBubbleMenuToBody}
+      shouldShow={shouldShowRichTextBubbleMenu}
+      options={bubbleMenuOptions}
+      data-ui="rich-text-formatting-toolbar"
+      onPointerDown={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }}
+      onClick={(event) => {
+        event.stopPropagation();
+      }}
+      style={{
+        zIndex: 2,
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--chrome-spacing)",
+        padding: "var(--chrome-spacing)",
+        border: "var(--chrome-border-width) solid var(--chrome-border)",
+        borderRadius: "var(--chrome-radius)",
+        background: "var(--chrome-background)",
+        color: "var(--chrome-foreground)",
+        boxShadow: "var(--shadow-chrome)",
+        pointerEvents: "auto",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+      }}
+    >
+      <div
+        data-ui="rich-text-formatting-toolbar-title"
+        style={{
+          padding: "0 var(--toolbar-title-padding-inline)",
+          color: "var(--chrome-foreground)",
+          fontFamily:
+            'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+          fontSize: "var(--toolbar-title-font-size)",
+          fontWeight: 500,
+          lineHeight: "var(--toolbar-title-line-height)",
+          whiteSpace: "nowrap",
+        }}
+      >
+        Text
+      </div>
+      <div
+        aria-hidden="true"
+        style={{
+          width: "var(--toolbar-separator-width)",
+          height: "var(--toolbar-separator-height)",
+          background: "var(--border)",
+          margin: "0 var(--toolbar-separator-margin-inline)",
+        }}
+      />
+      {RICH_TEXT_FORMATS.map((format) => (
+        <RichTextToolbarButton
+          key={format.id}
+          editor={editor}
+          format={format.id}
+          label={format.label}
+          shortcut={format.shortcut}
+          dataUi={format.dataUi}
+        >
+          {format.content}
+        </RichTextToolbarButton>
+      ))}
+    </BubbleMenu>
+  );
+}
+
+function appendRichTextBubbleMenuToBody(): HTMLElement {
+  return document.body;
+}
+
+function shouldShowRichTextBubbleMenu({
+  editor,
+  element,
+  view,
+}: {
+  editor: TiptapEditor;
+  element: HTMLElement;
+  view: { hasFocus(): boolean };
+}): boolean {
+  const hasTextRangeSelection = !editor.state.selection.empty;
+
+  return (
+    editor.isEditable &&
+    !editor.isDestroyed &&
+    hasTextRangeSelection &&
+    (view.hasFocus() || element.contains(document.activeElement))
+  );
+}
+
+function RichTextToolbarButton({
+  editor,
+  format,
+  label,
+  shortcut,
+  dataUi,
+  children,
+}: {
+  editor: TiptapEditor;
+  format: "bold" | "italic" | "strike";
+  label: string;
+  shortcut: string;
+  dataUi: string;
+  children: string;
+}) {
+  const didToggleOnPointerDownRef = useRef(false);
+  const active = editor.isActive(format);
+  const disabled = editor.isDestroyed || editor.schema.marks[format] === undefined;
+  const toggle = () => {
+    if (disabled) {
+      return;
+    }
+    switch (format) {
+      case "bold":
+        editor.chain().focus().toggleBold().run();
+        return;
+      case "italic":
+        editor.chain().focus().toggleItalic().run();
+        return;
+      case "strike":
+        editor.chain().focus().toggleStrike().run();
+        return;
+    }
+  };
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      aria-pressed={active}
+      title={`${label} (${shortcut})`}
+      disabled={disabled}
+      data-ui={dataUi}
+      onPointerDown={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.isTrusted) {
+          toggle();
+          didToggleOnPointerDownRef.current = true;
+        }
+      }}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }}
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (didToggleOnPointerDownRef.current) {
+          didToggleOnPointerDownRef.current = false;
+          return;
+        }
+        toggle();
+      }}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "var(--toolbar-control-size)",
+        height: "var(--toolbar-control-size)",
+        border: "var(--chrome-control-border-width) solid transparent",
+        borderRadius: "var(--chrome-control-radius)",
+        background: active ? "var(--accent)" : "transparent",
+        color: active ? "var(--accent-foreground)" : "var(--muted-foreground)",
+        cursor: disabled ? "not-allowed" : "pointer",
+        fontFamily:
+          'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        fontSize: "var(--toolbar-button-font-size)",
+        fontStyle: format === "italic" ? "italic" : undefined,
+        fontWeight: format === "bold" ? 700 : 600,
+        lineHeight: 1,
+        opacity: disabled ? 0.45 : 1,
+        pointerEvents: "auto",
+        textDecoration: format === "strike" ? "line-through" : undefined,
+      }}
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,191 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import {
+  EditorContent,
+  useEditor as useTiptapEditor,
+  type Editor as TiptapEditor,
+} from "@tiptap/react";
+import type { JSONContent } from "@tiptap/core";
+import { Bold } from "@tiptap/extension-bold";
+import { Italic } from "@tiptap/extension-italic";
+import { Strike } from "@tiptap/extension-strike";
+import StarterKit from "@tiptap/starter-kit";
+import type { Editor as LandEditor } from "@land/canvas-core";
+import type { RichTextDocument, TextShapeRecord } from "../textTypes";
+import {
+  createTiptapTextEditorController,
+  type TiptapTextEditorController,
+} from "./tiptapTextEditorController";
+import { RichTextToolbar } from "./RichTextToolbar";
+
+const RICH_TEXT_EXTENSIONS = [
+  StarterKit.configure({
+    bold: false,
+    italic: false,
+    strike: false,
+  }),
+  Bold.extend({ keepOnSplit: true }),
+  Italic.extend({ keepOnSplit: true }),
+  Strike.extend({ keepOnSplit: true }),
+];
+
+export interface TiptapTextEditorHandle {
+  readonly editor: TiptapEditor;
+  readonly controller: TiptapTextEditorController;
+}
+
+export interface TiptapTextEditorProps {
+  landEditor: LandEditor;
+  shape: TextShapeRecord;
+  initialRichText: RichTextDocument;
+  className: string;
+  editorStyle: CSSProperties;
+  onReady(handle: TiptapTextEditorHandle): void;
+  onDispose(handle: TiptapTextEditorHandle): void;
+  onRichTextChange(input: {
+    editor: TiptapEditor;
+    controller: TiptapTextEditorController;
+    richText: RichTextDocument;
+  }): void;
+}
+
+export function TiptapTextEditor({
+  landEditor,
+  shape,
+  initialRichText,
+  className,
+  editorStyle,
+  onReady,
+  onDispose,
+  onRichTextChange,
+}: TiptapTextEditorProps) {
+  const [formatToolbarVersion, setFormatToolbarVersion] = useState(0);
+  const controllerRef = useRef<{
+    editor: TiptapEditor;
+    controller: TiptapTextEditorController;
+  } | null>(null);
+
+  const getController = useCallback(
+    (textEditor: TiptapEditor): TiptapTextEditorController => {
+      const existing = controllerRef.current;
+      if (existing?.editor === textEditor) {
+        return existing.controller;
+      }
+
+      const controller = createTiptapTextEditorController({
+        shapeId: shape.id,
+        editor: textEditor,
+      });
+      controllerRef.current = { editor: textEditor, controller };
+      return controller;
+    },
+    [shape.id],
+  );
+
+  const tiptapEditor = useTiptapEditor(
+    {
+      extensions: RICH_TEXT_EXTENSIONS,
+      content: initialRichText as JSONContent,
+      autofocus: false,
+      editable: true,
+      immediatelyRender: true,
+      shouldRerenderOnTransaction: false,
+      editorProps: {
+        attributes: {
+          "data-ui": "rich-text-editor",
+          class:
+            "land-rich-text-editor h-full min-h-full w-full outline-none whitespace-pre-wrap break-words",
+          dir: "auto",
+        },
+        handleKeyDown: (_view, event): boolean => {
+          event.stopPropagation();
+
+          if (event.isComposing) {
+            return false;
+          }
+
+          if (event.key === "Escape") {
+            event.preventDefault();
+            landEditor.cancelEditing("user");
+            return true;
+          }
+
+          if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            landEditor.completeEditing("user");
+            return true;
+          }
+
+          return false;
+        },
+      },
+      onUpdate: ({ editor }) => {
+        const controller = getController(editor);
+        onRichTextChange({
+          editor,
+          controller,
+          richText: controller.getValue(),
+        });
+      },
+    },
+    [shape.id],
+  );
+
+  useEffect(() => {
+    if (!tiptapEditor || tiptapEditor.isDestroyed) {
+      return;
+    }
+
+    const controller = getController(tiptapEditor);
+    const handle = { editor: tiptapEditor, controller };
+    onReady(handle);
+    return () => {
+      if (controllerRef.current?.editor === tiptapEditor) {
+        controllerRef.current = null;
+      }
+      onDispose(handle);
+    };
+  }, [getController, onDispose, onReady, tiptapEditor]);
+
+  useEffect(() => {
+    if (!tiptapEditor || tiptapEditor.isDestroyed) {
+      return;
+    }
+
+    const refresh = () => {
+      setFormatToolbarVersion((version) => version + 1);
+    };
+
+    tiptapEditor.on("selectionUpdate", refresh);
+    tiptapEditor.on("update", refresh);
+    tiptapEditor.on("focus", refresh);
+    tiptapEditor.on("blur", refresh);
+    return () => {
+      tiptapEditor.off("selectionUpdate", refresh);
+      tiptapEditor.off("update", refresh);
+      tiptapEditor.off("focus", refresh);
+      tiptapEditor.off("blur", refresh);
+    };
+  }, [tiptapEditor]);
+
+  return (
+    <>
+      {tiptapEditor ? (
+        <RichTextToolbar
+          editor={tiptapEditor}
+          version={formatToolbarVersion}
+        />
+      ) : null}
+      <EditorContent
+        editor={tiptapEditor}
+        className={className}
+        style={editorStyle}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import type { JSONContent } from "@tiptap/core";
+import type { RichTextDocument } from "../textTypes";
+import {
+  getRichTextMarkStyle,
+  isRichTextTextNode,
+} from "../richTextUtils";
+
+export function renderRichTextDocument(richText: RichTextDocument): ReactNode {
+  return richText.content.map((node, index) =>
+    renderRichTextBlock(node, `block:${index}`),
+  );
+}
+
+function renderRichTextBlock(
+  node: JSONContent,
+  key: string,
+): ReactNode {
+  const children = renderRichTextChildren(node, key);
+  return (
+    <p key={key} style={{ margin: 0 }}>
+      {children.length > 0 ? children : <br />}
+    </p>
+  );
+}
+
+function renderRichTextChildren(
+  node: JSONContent,
+  keyPrefix: string,
+): ReactNode[] {
+  return (
+    node.content?.map((child, index) =>
+      renderRichTextNode(child, `${keyPrefix}:${index}`),
+    ) ?? []
+  );
+}
+
+function renderRichTextNode(node: JSONContent, key: string): ReactNode {
+  if (isRichTextTextNode(node)) {
+    const style = getRichTextMarkStyle(node.marks);
+    return (
+      <span key={key} style={style}>
+        {node.text}
+      </span>
+    );
+  }
+
+  return renderRichTextChildren(node, key);
+}

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

@@ -0,0 +1,93 @@
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import type { TiptapTextSelectionSnapshot } from "./tiptapTextEditorController";
+
+export function hasMountedTextEditorView(textEditor: TiptapEditor): boolean {
+  try {
+    return textEditor.view.dom.isConnected;
+  } catch {
+    return false;
+  }
+}
+
+export function ensureTextEditorFocused(textEditor: TiptapEditor): void {
+  if (textEditor.isDestroyed || !hasMountedTextEditorView(textEditor)) {
+    return;
+  }
+  textEditor.view.dom.focus();
+  textEditor.view.focus();
+}
+
+export function placeCaretInTextEditorAtClientPoint(
+  textEditor: TiptapEditor,
+  clientX: number,
+  clientY: number,
+): void {
+  if (textEditor.isDestroyed || !hasMountedTextEditorView(textEditor)) {
+    return;
+  }
+
+  const pos = textEditor.view.posAtCoords({
+    left: clientX,
+    top: clientY,
+  })?.pos;
+
+  if (typeof pos === "number") {
+    textEditor.chain().focus().setTextSelection(pos).run();
+    return;
+  }
+
+  textEditor.commands.focus("end");
+}
+
+export function isDomSelectionRangeInsideTextEditor(
+  textEditor: TiptapEditor,
+): boolean {
+  return getTextEditorSelectionSnapshot(textEditor).type === "Range";
+}
+
+export function getTextEditorSelectionSnapshot(
+  textEditor: TiptapEditor,
+): TiptapTextSelectionSnapshot {
+  if (!hasMountedTextEditorView(textEditor)) {
+    return { type: null, text: null };
+  }
+
+  const domSnapshot = getDomSelectionSnapshot(textEditor.view.dom);
+  if (domSnapshot.type !== null) {
+    return domSnapshot;
+  }
+
+  const selection = textEditor.state.selection;
+  return {
+    type: selection.empty ? "Caret" : "Range",
+    text: selection.empty
+      ? ""
+      : textEditor.state.doc.textBetween(selection.from, selection.to, "\n"),
+  };
+}
+
+function getDomSelectionSnapshot(root: Node | null): TiptapTextSelectionSnapshot {
+  if (!root) {
+    return { type: null, text: null };
+  }
+
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return { type: selection?.type ?? null, text: null };
+  }
+
+  const anchorNode = selection.anchorNode;
+  const focusNode = selection.focusNode;
+  const rootElement = root instanceof HTMLElement ? root : root.parentElement;
+  const isInside =
+    !!anchorNode &&
+    !!focusNode &&
+    rootElement !== null &&
+    rootElement.contains(anchorNode) &&
+    rootElement.contains(focusNode);
+
+  return {
+    type: isInside ? selection.type : null,
+    text: isInside ? selection.toString() : null,
+  };
+}

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

@@ -0,0 +1,36 @@
+import {
+  useMemo,
+  type CSSProperties,
+} from "react";
+import type { TextShapeRecord } from "../textTypes";
+import {
+  getTextAlign,
+  getTextFontFamily,
+  getTextFontSize,
+  getTextLineHeight,
+} from "../textStyle";
+
+export function useTextEditingBoxStyle(shape: TextShapeRecord): CSSProperties {
+  return useMemo(
+    () => ({
+      color: shape.props.color,
+      fontFamily: getTextFontFamily(shape.props.font),
+      fontSize: getTextFontSize(shape.props.size),
+      lineHeight: `${getTextLineHeight(shape.props.size)}px`,
+      textAlign: getTextAlign(shape.props.textAlign),
+      pointerEvents: "auto",
+      userSelect: "text",
+      cursor: "text",
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+    }),
+    [
+      shape.props.color,
+      shape.props.font,
+      shape.props.size,
+      shape.props.textAlign,
+    ],
+  );
+}