tldraw/dist-cjs/lib/shapes/shared/useEditablePlainText.js

A tiny little drawing editor.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var useEditablePlainText_exports = {};
__export(useEditablePlainText_exports, {
  useEditablePlainText: () => useEditablePlainText,
  useEditableTextCommon: () => useEditableTextCommon,
  useIsReadyForEditing: () => useIsReadyForEditing
});
module.exports = __toCommonJS(useEditablePlainText_exports);
var import_editor = require("@tldraw/editor");
var import_react = require("react");
var import_TextHelpers = require("./TextHelpers");
function useEditablePlainText(shapeId, type, text) {
  const commonUseEditableTextHandlers = useEditableTextCommon(shapeId);
  const isEditing = commonUseEditableTextHandlers.isEditing;
  const editor = (0, import_editor.useEditor)();
  const rInput = (0, import_react.useRef)(null);
  const isEmpty = (text || "").trim().length === 0;
  (0, import_react.useEffect)(() => {
    function selectAllIfEditing(event) {
      if (event.shapeId === shapeId) {
        rInput.current?.select?.();
      }
    }
    editor.on("select-all-text", selectAllIfEditing);
    return () => {
      editor.off("select-all-text", selectAllIfEditing);
    };
  }, [editor, shapeId, isEditing]);
  (0, import_react.useEffect)(() => {
    if (!isEditing) return;
    if (document.activeElement !== rInput.current) {
      rInput.current?.focus();
    }
    if (editor.getInstanceState().isCoarsePointer) {
      rInput.current?.select();
    }
    if (import_editor.tlenv.isSafari) {
      rInput.current?.blur();
      rInput.current?.focus();
    }
  }, [editor, isEditing]);
  const handleKeyDown = (0, import_react.useCallback)(
    (e) => {
      if (editor.getEditingShapeId() !== shapeId) return;
      switch (e.key) {
        case "Enter": {
          if (e.ctrlKey || e.metaKey) {
            editor.complete();
          }
          break;
        }
      }
    },
    [editor, shapeId]
  );
  const handleChange = (0, import_react.useCallback)(
    ({ plaintext }) => {
      if (editor.getEditingShapeId() !== shapeId) return;
      const normalizedPlaintext = import_TextHelpers.TextHelpers.normalizeText(plaintext || "");
      editor.updateShape({
        id: shapeId,
        type,
        props: { text: normalizedPlaintext }
      });
    },
    [editor, shapeId, type]
  );
  return {
    rInput,
    handleKeyDown,
    handleChange,
    isEmpty,
    ...commonUseEditableTextHandlers
  };
}
function useIsReadyForEditing(editor, shapeId) {
  return (0, import_editor.useValue)(
    "isReadyForEditing",
    () => {
      const editingShapeId = editor.getEditingShapeId();
      return (
        // something's being editing... and either it's this shape OR this shape is hovered
        editingShapeId !== null && (editingShapeId === shapeId || editor.getHoveredShapeId() === shapeId)
      );
    },
    [editor, shapeId]
  );
}
function useEditableTextCommon(shapeId) {
  const editor = (0, import_editor.useEditor)();
  const isEditing = (0, import_editor.useValue)("isEditing", () => editor.getEditingShapeId() === shapeId, [editor]);
  const isReadyForEditing = useIsReadyForEditing(editor, shapeId);
  const handleInputPointerDown = (0, import_react.useCallback)(
    (e) => {
      editor.dispatch({
        ...(0, import_editor.getPointerInfo)(editor, e),
        type: "pointer",
        name: "pointer_down",
        target: "shape",
        shape: editor.getShape(shapeId)
      });
      e.stopPropagation();
    },
    [editor, shapeId]
  );
  const handlePaste = (0, import_react.useCallback)(
    (e) => {
      if (editor.getEditingShapeId() !== shapeId) return;
      if (e.clipboardData) {
        const html = e.clipboardData.getData("text/html");
        if (html) {
          if (html.includes("<div data-tldraw")) {
            (0, import_editor.preventDefault)(e);
          }
        }
      }
    },
    [editor, shapeId]
  );
  return {
    handleFocus: import_editor.noop,
    handleBlur: import_editor.noop,
    handleInputPointerDown,
    handleDoubleClick: editor.markEventAsHandled,
    handlePaste,
    isEditing,
    isReadyForEditing
  };
}
//# sourceMappingURL=useEditablePlainText.js.map