@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-text/canvas.tsx

@@ -1,115 +0,0 @@
-import { useEffect } from "react";
-import type { TextShapeRecord } from "./textTypes";
-import {
-  renderRichTextDocument,
-} from "./host/richTextRendering";
-import { ensureTextFontLoaded } from "./host/textFontLoader";
-import { useTextShapeRendererRuntime } from "./host/textShapeRendererRuntime";
-import {
-  DEFAULT_TEXT_FONT,
-  getTextAlign,
-  getTextFontFamily,
-  getTextFontSize,
-  getTextLineHeight,
-} from "./textStyle";
-import type {
-  CanvasDomEventGuard,
-  LandCanvasPlugin,
-  ShapeRendererProps,
-} from "@land/canvas-plugin-api";
-
-const textEditingDomEventGuard: CanvasDomEventGuard = {
-  id: "land.text.dom-events",
-  handle({ event }) {
-    const target = event.target;
-    if (!(target instanceof HTMLElement)) {
-      return "continue";
-    }
-
-    return target.closest('[data-ui="text-editing-box"]') ? "handled" : "continue";
-  },
-  getCursor({ element }) {
-    return element?.closest('[data-ui="text-editing-box"]') ? "text" : undefined;
-  },
-};
-
-export function createTextCanvasPlugin(): LandCanvasPlugin {
-  return {
-    id: "land.text.react",
-    domEventGuards: [textEditingDomEventGuard],
-    canvasComponents: [
-      {
-        id: "land.text.default-font-preload",
-        component: TextDefaultFontPreload,
-      },
-    ],
-    setup(registerShapeRenderer) {
-      registerShapeRenderer({
-        type: "text",
-        component: TextShapeRenderer,
-      });
-    },
-  };
-}
-
-function TextDefaultFontPreload() {
-  useEffect(() => {
-    void ensureTextFontLoaded(DEFAULT_TEXT_FONT);
-  }, []);
-
-  return null;
-}
-
-function TextShapeRenderer({
-  shape,
-  editor,
-}: ShapeRendererProps<TextShapeRecord>) {
-  const { isEditingThisShape, editingHost } = useTextShapeRendererRuntime(
-    editor,
-    shape,
-  );
-
-  return (
-    <div
-      data-editing-hidden={isEditingThisShape ? "true" : undefined}
-      style={{
-        position: "relative",
-        boxSizing: "border-box",
-        width: shape.props.w,
-        minHeight: shape.props.h,
-        transform: `scale(${shape.props.scale})`,
-        transformOrigin: "top left",
-        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),
-        whiteSpace: "pre-wrap",
-        overflowWrap: "break-word",
-        userSelect: "none",
-        pointerEvents: "none",
-      }}
-    >
-      <div
-        style={{
-          opacity: isEditingThisShape ? 0 : undefined,
-        }}
-      >
-        {renderRichTextDocument(shape.props.richText)}
-      </div>
-      <div
-        data-ui="text-editor-host-slot"
-        data-shape-id={shape.id}
-        data-active={isEditingThisShape ? "true" : "false"}
-        aria-hidden="true"
-        style={{
-          position: "absolute",
-          inset: 0,
-          pointerEvents: "none",
-        }}
-      >
-        {editingHost}
-      </div>
-    </div>
-  );
-}

package/_vendor/plugin-text/core.ts

@@ -1,422 +0,0 @@
-import {
-  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
-  type ContextMenuContribution,
-  type LandCorePlugin,
-  type ToolbarAction,
-  type ToolbarActionValue,
-  type ToolbarContribution,
-} from "@land/canvas-core";
-import { TextTool } from "./TextTool";
-import { TextShapeUtil } from "./TextShapeUtil";
-import { TextShapeSvgExporter } from "./TextShapeSvgExporter";
-import { ArrowLabelBindingUtil } from "./ArrowLabelBindingUtil";
-import { GeoLabelBindingUtil } from "./GeoLabelBindingUtil";
-import { createTextInteractionHandler } from "./textInteractions";
-import type {
-  TextShapeAlign,
-  TextShapeFont,
-  TextShapeProps,
-  TextShapeRecord,
-  TextShapeSize,
-} from "./textTypes";
-
-export function createTextCorePlugin(): LandCorePlugin {
-  return {
-    id: "land.text",
-    shapeCapabilities: [
-      {
-        type: "text",
-        schemaProps: [
-          "richText",
-          "w",
-          "h",
-          "autoSize",
-          "scale",
-          "font",
-          "size",
-          "color",
-          "textAlign",
-        ],
-        reactRenderer: "partial",
-        toolbarEntry: "supported",
-        notes: [
-          "Text shape util, SVG fallback, React renderer, rich editing runtime, creation tool, and selected-text style toolbar live in the text plugin package. React rendering remains partial while product-grade rich text rendering and measurement continue to mature.",
-        ],
-      },
-    ],
-    shapeUtils: [new TextShapeUtil()],
-    shapeSvgExporters: [new TextShapeSvgExporter()],
-    bindingUtils: [new GeoLabelBindingUtil(), new ArrowLabelBindingUtil()],
-    interactionHandlers: [createTextInteractionHandler()],
-    toolbarActions: [
-      createEditTextAction(),
-      createSetTextStyleToolbarAction("color"),
-      createSetTextStyleToolbarAction("font"),
-      createSetTextStyleToolbarAction("size"),
-      createSetTextStyleToolbarAction("textAlign"),
-      createSetTextDefaultStyleToolbarAction("color"),
-      createSetTextDefaultStyleToolbarAction("font"),
-      createSetTextDefaultStyleToolbarAction("size"),
-      createSetTextDefaultStyleToolbarAction("textAlign"),
-    ],
-    toolbarContributions: [
-      createTextToolToolbarContribution(),
-      createTextDefaultStyleToolbarContribution(),
-      createTextSelectionToolbarContribution(),
-    ],
-    contextMenuContributions: [createTextContextMenuContribution()],
-    setup(editor) {
-      editor.tools.register(
-        "text",
-        (currentEditor) => new TextTool(currentEditor),
-        { shortcut: "t" },
-      );
-    },
-  };
-}
-
-function createTextContextMenuContribution(): ContextMenuContribution {
-  return {
-    id: "text.shape-context-menu",
-    target: "selection",
-    order: 35,
-    actionIds: ["text.edit"],
-    when(context) {
-      return (
-        context.selection.count === 1 &&
-        context.selection.singleShapeType === "text"
-      );
-    },
-    getSections() {
-      return [
-        {
-          id: "text.context-menu",
-          title: "Text",
-          items: [
-            {
-              kind: "command",
-              id: "text.edit",
-              actionId: "text.edit",
-              label: "Edit text",
-              icon: "type",
-              dataUi: "context-menu-edit-text-button",
-            },
-          ],
-        },
-      ];
-    },
-  };
-}
-
-function createEditTextAction(): ToolbarAction {
-  return {
-    id: "text.edit",
-    isVisible(context) {
-      return (
-        context.selection.count === 1 &&
-        context.selection.singleShapeType === "text"
-      );
-    },
-    isEnabled(context) {
-      const [shape] = context.selection.selectedShapes;
-      return shape?.type === "text" && !shape.isLocked;
-    },
-    run({ context }) {
-      const [shape] = context.selection.selectedShapes;
-      if (shape?.type !== "text" || shape.isLocked) {
-        return;
-      }
-      context.editor.startEditingShape(
-        {
-          shapeId: shape.id,
-          entryMode: "focusEnd",
-        },
-        "user",
-      );
-    },
-  };
-}
-
-const TEXT_COLOR_SWATCHES = [
-  { value: "#0f172a", label: "Slate", color: "#0f172a" },
-  { value: "#1d4ed8", label: "Blue", color: "#1d4ed8" },
-  { value: "#15803d", label: "Green", color: "#15803d" },
-  { value: "#dc2626", label: "Red", color: "#dc2626" },
-] as const;
-
-const TEXT_FONT_OPTIONS = [
-  { value: "noto-sans-sc", label: "Noto SC" },
-  { value: "noto-serif-sc", label: "Serif SC" },
-  { value: "noto-sans-mono", label: "Mono" },
-  { value: "ma-shan-zheng", label: "Ma Shan" },
-] as const satisfies readonly {
-  value: TextShapeFont;
-  label: string;
-}[];
-
-const TEXT_SIZE_OPTIONS = [
-  { value: "s", label: "S" },
-  { value: "m", label: "M" },
-  { value: "l", label: "L" },
-  { value: "xl", label: "XL" },
-] as const satisfies readonly { value: TextShapeSize; label: string }[];
-
-const TEXT_ALIGN_OPTIONS = [
-  { value: "start", label: "Align left", icon: "align-left" },
-  { value: "middle", label: "Align center", icon: "align-center" },
-  { value: "end", label: "Align right", icon: "align-right" },
-] as const satisfies readonly {
-  value: TextShapeAlign;
-  label: string;
-  icon: string;
-}[];
-
-function createTextToolToolbarContribution(): ToolbarContribution {
-  return {
-    id: "text.tool-toolbar",
-    surface: "tool",
-    placement: "chrome",
-    order: 50,
-    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
-    getGroups() {
-      return [
-        {
-          id: "text.tools",
-          items: [
-            {
-              kind: "button",
-              id: "text.tool.text",
-              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
-              value: "text",
-              label: "Text",
-              shortcut: "T",
-              icon: "type",
-              dataUi: "text-tool-button",
-            },
-          ],
-        },
-      ];
-    },
-  };
-}
-
-function createTextSelectionToolbarContribution(): ToolbarContribution {
-  return {
-    id: "text.selection-toolbar",
-    surface: "selection",
-    order: 20,
-    actionIds: [
-      "text.set-color",
-      "text.set-font",
-      "text.set-size",
-      "text.set-textAlign",
-    ],
-    when(context) {
-      return context.selection.commonShapeType === "text";
-    },
-    getGroups() {
-      return getTextStyleToolbarGroups({
-        colorActionId: "text.set-color",
-        fontActionId: "text.set-font",
-        sizeActionId: "text.set-size",
-        textAlignActionId: "text.set-textAlign",
-        dataUiPrefix: "text",
-      });
-    },
-  };
-}
-
-function createTextDefaultStyleToolbarContribution(): ToolbarContribution {
-  return {
-    id: "text.default-style.tool-toolbar",
-    surface: "tool",
-    order: 51,
-    actionIds: [
-      "text.default-color",
-      "text.default-font",
-      "text.default-size",
-      "text.default-textAlign",
-    ],
-    when(context) {
-      return context.tool.activeToolId === "text";
-    },
-    getGroups() {
-      return getTextStyleToolbarGroups({
-        colorActionId: "text.default-color",
-        fontActionId: "text.default-font",
-        sizeActionId: "text.default-size",
-        textAlignActionId: "text.default-textAlign",
-        dataUiPrefix: "text-default",
-      });
-    },
-  };
-}
-
-function getTextStyleToolbarGroups({
-  colorActionId,
-  fontActionId,
-  sizeActionId,
-  textAlignActionId,
-  dataUiPrefix,
-}: {
-  colorActionId: string;
-  fontActionId: string;
-  sizeActionId: string;
-  textAlignActionId: string;
-  dataUiPrefix: string;
-}) {
-  return [
-    {
-      id: `${dataUiPrefix}.style-color`,
-      items: [
-        {
-          kind: "swatches" as const,
-          id: `${dataUiPrefix}.color`,
-          actionId: colorActionId,
-          label: "Color",
-          options: TEXT_COLOR_SWATCHES.map((option) => ({
-            ...option,
-            dataUi: `${dataUiPrefix}-color-${option.label.toLowerCase()}-button`,
-          })),
-        },
-      ],
-    },
-    {
-      id: `${dataUiPrefix}.style-font`,
-      items: [
-        {
-          kind: "segmented" as const,
-          id: `${dataUiPrefix}.font`,
-          actionId: fontActionId,
-          options: TEXT_FONT_OPTIONS.map((option) => ({
-            ...option,
-            dataUi: `${dataUiPrefix}-font-${option.value}-button`,
-          })),
-        },
-      ],
-    },
-    {
-      id: `${dataUiPrefix}.style-size`,
-      items: [
-        {
-          kind: "segmented" as const,
-          id: `${dataUiPrefix}.size`,
-          actionId: sizeActionId,
-          options: TEXT_SIZE_OPTIONS.map((option) => ({
-            ...option,
-            dataUi: `${dataUiPrefix}-size-${option.value}-button`,
-          })),
-        },
-      ],
-    },
-    {
-      id: `${dataUiPrefix}.style-align`,
-      items: [
-        {
-          kind: "segmented" as const,
-          id: `${dataUiPrefix}.align`,
-          actionId: textAlignActionId,
-          options: TEXT_ALIGN_OPTIONS.map((option) => ({
-            ...option,
-            dataUi: `${dataUiPrefix}-align-${option.value}-button`,
-          })),
-        },
-      ],
-    },
-  ];
-}
-
-function createSetTextStyleToolbarAction(
-  prop: "color" | "font" | "size" | "textAlign",
-): ToolbarAction<string | null> {
-  return {
-    id: `text.set-${prop}`,
-    isVisible(context) {
-      return context.selection.commonShapeType === "text";
-    },
-    isEnabled(context) {
-      return context.selection.count > 0;
-    },
-    getValue(context) {
-      return getCommonTextPropValue(context.selection.selectedShapes, prop);
-    },
-    run({ context, value }) {
-      if (!isValidTextStyleValue(prop, value)) {
-        return;
-      }
-      const updates = context.selection.selectedShapes
-        .filter((shape): shape is TextShapeRecord => shape.type === "text")
-        .filter((shape) => !shape.isLocked)
-        .map((shape) => ({
-          id: shape.id,
-          props: {
-            [prop]: value,
-          },
-        }));
-      if (updates.length === 0) {
-        return;
-      }
-      context.editor.commands.updateShapes(updates, { source: "user" });
-    },
-  };
-}
-
-function createSetTextDefaultStyleToolbarAction(
-  prop: "color" | "font" | "size" | "textAlign",
-): ToolbarAction<string | null> {
-  return {
-    id: `text.default-${prop}`,
-    isVisible(context) {
-      return context.tool.activeToolId === "text";
-    },
-    getValue(context) {
-      return context.editor.getDefaultShapeProps<TextShapeProps>("text")[prop];
-    },
-    run({ context, value }) {
-      if (!isValidTextStyleValue(prop, value)) {
-        return;
-      }
-      context.editor.updateDefaultShapeProps("text", { [prop]: value });
-    },
-  };
-}
-
-function getCommonTextPropValue(
-  selectedShapes: readonly { type: string; props: object }[],
-  prop: "color" | "font" | "size" | "textAlign",
-): string | null {
-  let value: string | undefined;
-  for (const shape of selectedShapes) {
-    if (shape.type !== "text") {
-      continue;
-    }
-    const nextValue = (shape.props as TextShapeProps)[prop];
-    if (value === undefined) {
-      value = nextValue;
-      continue;
-    }
-    if (value !== nextValue) {
-      return null;
-    }
-  }
-  return value ?? null;
-}
-
-function isValidTextStyleValue(
-  prop: "color" | "font" | "size" | "textAlign",
-  value: ToolbarActionValue,
-): value is string {
-  if (typeof value !== "string") {
-    return false;
-  }
-  if (prop === "color") {
-    return TEXT_COLOR_SWATCHES.some((option) => option.value === value);
-  }
-  if (prop === "font") {
-    return TEXT_FONT_OPTIONS.some((option) => option.value === value);
-  }
-  if (prop === "size") {
-    return TEXT_SIZE_OPTIONS.some((option) => option.value === value);
-  }
-  return TEXT_ALIGN_OPTIONS.some((option) => option.value === value);
-}

package/_vendor/plugin-text/feature.ts

@@ -1,20 +0,0 @@
-import {
-  defineLandExtension,
-  type LandFeatureBundle,
-} from "@land/canvas-plugin-api";
-import { createTextCanvasPlugin } from "./canvas";
-import { createTextCorePlugin } from "./core";
-
-export function createTextFeatureBundle(): LandFeatureBundle {
-  return {
-    id: "land.text.bundle",
-    corePlugins: [createTextCorePlugin()],
-    canvasPlugins: [createTextCanvasPlugin()],
-    shapeTypes: ["text"],
-  };
-}
-
-export const Text = defineLandExtension({
-  name: "text",
-  createFeature: createTextFeatureBundle,
-});

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

@@ -1,144 +0,0 @@
-import {
-  useCallback,
-  useRef,
-  useState,
-} from "react";
-import { type ShapeEditingSession } from "@land/canvas-core";
-import { useEditor, useValue } from "@land/canvas-react";
-import type { TextShapeRecord } from "../textTypes";
-import { isTextShapeRecord } from "../textShapeHelpers";
-import {
-  TiptapTextEditor,
-  type TiptapTextEditorHandle,
-} from "./TiptapTextEditor";
-import { useTextEditingBoxStyle } from "./textEditingBoxStyle";
-import { useTextEditingEntryFocus } from "./textEntryFocus";
-import { useRangeClickCollapse } from "./textRangeSelection";
-import {
-  useLatestTextShapeRef,
-  useRichTextShapeSync,
-} from "./textShapeSync";
-
-export function ShapeEditingSessionBox({
-  shapeId,
-  markId,
-}: {
-  shapeId: TextShapeRecord["id"];
-  markId: string;
-}) {
-  const editor = useEditor();
-  const shape = useValue(editor.getShapeSignal(shapeId));
-  const session = useValue(editor.shapeEditingStateSignal).session;
-
-  if (!isTextShapeRecord(shape) || session?.shapeId !== shape.id) {
-    return null;
-  }
-
-  return (
-    <RichTextEditingBox
-      key={`${shape.id}:${markId}`}
-      shape={shape}
-      session={session}
-    />
-  );
-}
-
-function RichTextEditingBox({
-  shape,
-  session,
-}: {
-  shape: TextShapeRecord;
-  session: ShapeEditingSession;
-}) {
-  const editor = useEditor();
-  const initialRichTextRef = useRef(shape.props.richText);
-  const latestShapeRef = useLatestTextShapeRef(shape);
-  const entryRequest = useValue(editor.shapeEditingEntryRequestSignal);
-  const consumedEntryRequestIdRef = useRef<number | null>(null);
-  const [tiptapEditor, setTiptapEditor] = useState<
-    TiptapTextEditorHandle["editor"] | null
-  >(null);
-  const [richTextController, setRichTextController] = useState<
-    TiptapTextEditorHandle["controller"] | null
-  >(null);
-
-  const handleTiptapReady = useCallback(
-    ({ editor: readyEditor, controller }: TiptapTextEditorHandle) => {
-      setTiptapEditor(readyEditor.isDestroyed ? null : readyEditor);
-      setRichTextController(controller);
-    },
-    [],
-  );
-  const handleTiptapDispose = useCallback(
-    ({ editor: disposedEditor, controller }: TiptapTextEditorHandle) => {
-      setTiptapEditor((current) =>
-        current === disposedEditor ? null : current,
-      );
-      setRichTextController((current) =>
-        current === controller ? null : current,
-      );
-    },
-    [],
-  );
-
-  const handleRichTextChange = useRichTextShapeSync({
-    editor,
-    shape,
-    tiptapEditor,
-    richTextController,
-    latestShapeRef,
-  });
-
-  useTextEditingEntryFocus({
-    editor,
-    shapeId: shape.id,
-    session,
-    tiptapEditor,
-    richTextController,
-    entryRequest,
-    consumedEntryRequestIdRef,
-  });
-
-  const rangeClickCollapse = useRangeClickCollapse({
-    editor,
-    shapeId: shape.id,
-    richTextController,
-  });
-  const style = useTextEditingBoxStyle(shape);
-
-  return (
-    <div
-      data-ui="text-editing-box"
-      data-shape-id={shape.id}
-      data-mount-target-kind="shape"
-      onPointerDown={(event) => {
-        event.stopPropagation();
-      }}
-      onPointerDownCapture={rangeClickCollapse.onPointerDownCapture}
-      onPointerMoveCapture={rangeClickCollapse.onPointerMoveCapture}
-      onPointerUpCapture={rangeClickCollapse.onPointerUpCapture}
-      onPointerCancel={rangeClickCollapse.onPointerCancel}
-      onContextMenu={(event) => {
-        event.stopPropagation();
-      }}
-      onDragStart={(event) => {
-        event.preventDefault();
-      }}
-      style={style}
-    >
-      <TiptapTextEditor
-        landEditor={editor}
-        shape={shape}
-        initialRichText={initialRichTextRef.current}
-        className="h-full min-h-full w-full"
-        editorStyle={{
-          height: "100%",
-          minHeight: "100%",
-        }}
-        onReady={handleTiptapReady}
-        onDispose={handleTiptapDispose}
-        onRichTextChange={handleRichTextChange}
-      />
-    </div>
-  );
-}