"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const ContentEditable_1 = __importDefault(require("./ContentEditable"));
const getCursorOffset_1 = __importDefault(require("../lib/helpers/caret/getCursorOffset"));
const focusElement_1 = __importDefault(require("../lib/helpers/focusElement"));
const generateUUID_1 = __importDefault(require("../lib/helpers/generateUUID"));
const renderInlineBlocks_1 = __importDefault(require("../lib/helpers/inlineBlocks/renderInlineBlocks"));
const saveInlineBlocks_1 = __importDefault(require("../lib/helpers/inlineBlocks/saveInlineBlocks"));
/**
 * Create a styled text block renderer
 * @param style The style to apply to the text
 * @param className The class name to apply to the text
 * @returns The styled text block renderer
 *
 * @example
 * ```tsx
 * import React from 'react';
 * import ReactDOM from 'react-dom';
 *
 * import { Editor } from '@note-rack/editor';
 * import { createStyledTextRenderer } from '@note-rack/editor';
 *
 * const redTextRenderer = createStyledTextRenderer({
 *   color: 'red',
 * });
 *
 * const RedTextExample: React.FC = () => (
 *   <Editor
 *     startingBlocks={[
 *       {
 *         id: 'example-block',
 *         type: 'red-text',
 *         properties: {
 *           text: 'Red text',
 *         }
 *       },
 *     ]}
 *     renderers={{
 *       'red-text': redTextRenderer,
 *     }}
 *   />
 * );
 *
 * ReactDOM.render(
 *   <RedTextExample />,
 *   document.getElementById('root')
 * );
 * ```
 */
const createStyledTextRenderer = (style, className) => {
    const Text = (props) => {
        const { id, properties, mutations, type, inlineBlocks } = props;
        const { text, style: inlineBlockStyles } = properties;
        const editableElement = (0, react_1.useRef)(null);
        return (<ContentEditable_1.default style={Object.assign({ outline: 'none', whiteSpace: 'pre-wrap', maxWidth: '100vw', wordBreak: 'break-word' }, style)} className={className} innerRef={editableElement} onKeyDown={(event) => {
                if (!editableElement.current)
                    return;
                const isCursorAtStart = (0, getCursorOffset_1.default)(editableElement.current) === 0;
                const isBlockEmpty = (editableElement.current.innerText === '' || editableElement.current.innerText === '\n');
                if (event.key === 'Enter' && !event.shiftKey) {
                    event.preventDefault();
                    mutations.addBlock({
                        id: (0, generateUUID_1.default)(),
                        type: 'text',
                        properties: {
                            text: ''
                        }
                    }, id);
                }
                else if (event.code === 'Backspace' && type !== 'text' && isCursorAtStart) {
                    event.preventDefault();
                    mutations.editBlock(id, {}, 'text');
                    setTimeout(() => {
                        var _a;
                        const newBlock = (_a = document.getElementById(`block-${id}`)) === null || _a === void 0 ? void 0 : _a.firstChild;
                        if (!newBlock)
                            return;
                        (0, focusElement_1.default)(newBlock, 0);
                    }, 7);
                }
                else if (event.code === 'Backspace' && type === 'text' && isBlockEmpty) {
                    event.preventDefault();
                    mutations.removeBlock(id);
                }
            }} onChange={() => {
                if (!editableElement.current)
                    return;
                const updatedText = editableElement.current.textContent || '';
                mutations.editBlock(id, {
                    text: updatedText,
                    style: (0, saveInlineBlocks_1.default)(editableElement.current)
                });
            }}>
        {(0, renderInlineBlocks_1.default)(text, mutations, id, inlineBlockStyles, inlineBlocks)}
      </ContentEditable_1.default>);
    };
    return Text;
};
exports.default = createStyledTextRenderer;
//# sourceMappingURL=createStyledTextRenderer.jsx.map