react-konva-utils/lib/text-editor.js

Useful components and hooks for react-konva

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextEditor = void 0;
const react_1 = __importDefault(require("react"));
const html_1 = require("./html");
const TextEditor = ({ textNodeRef, value, onBlur, onChange, }) => {
    const [style, setStyle] = react_1.default.useState();
    react_1.default.useLayoutEffect(() => {
        const textNode = textNodeRef.current;
        // apply many styles to match text on canvas as close as possible
        // remember that text rendering on canvas and on the textarea can be different
        // and sometimes it is hard to make it 100% the same. But we will try...
        const newStyle = {};
        newStyle.width = textNode.width() - textNode.padding() * 2 + 'px';
        newStyle.height = textNode.height() - textNode.padding() * 2 + 10 + 'px';
        newStyle.fontSize = textNode.fontSize() + 'px';
        newStyle.border = 'none';
        newStyle.padding = '0px';
        newStyle.overflow = 'hidden';
        newStyle.background = 'none';
        newStyle.outline = 'none';
        newStyle.resize = 'none';
        newStyle.lineHeight = textNode.lineHeight() + 0.01;
        newStyle.fontFamily = '"' + textNode.fontFamily() + '"';
        newStyle.transformOrigin = 'left top';
        newStyle.textAlign = textNode.align();
        newStyle.color = textNode.fill();
        newStyle.overflowWrap = 'break-word';
        newStyle.whiteSpace = 'normal';
        newStyle.userSelect = 'text';
        newStyle.wordBreak = 'normal';
        if (JSON.stringify(newStyle) !== JSON.stringify(style)) {
            setStyle(newStyle);
        }
    });
    return (react_1.default.createElement(html_1.Html, null,
        react_1.default.createElement("textarea", { className: "polotno-input", style: Object.assign({}, style), value: value, onChange: (e) => {
                onChange(e.target.value);
            }, onBlur: onBlur })));
};
exports.TextEditor = TextEditor;