@yuzhouu/canvas-kit 0.1.2 → 0.1.4

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

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

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

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

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

@@ -1,36 +0,0 @@
-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,
-    ],
-  );
-}