"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const field_1 = require("../../../../client/field");
const DEFAULT_STYLE = {
    width: '100%',
    height: '100%',
    color: 'currentColor',
    boxSizing: 'border-box',
};
class Editable extends field_1.Field {
    constructor($props, $system) {
        super($props, $system, $system.api.document.createElement('div'), {
            valueKey: 'textContent',
            defaultStyle: DEFAULT_STYLE,
        });
        const { id, className, style, innerText, tabIndex, title, draggable } = this.$props;
        this.$element.contentEditable = 'true';
        this.$element.spellcheck = false;
        this.$element.inputMode = 'none';
        if (id !== undefined) {
            this.$element.id = id;
        }
        if (className !== undefined) {
            this.$element.className = className;
        }
        if (innerText) {
            this.$element.innerText = innerText;
        }
        if (tabIndex !== undefined) {
            this.$element.tabIndex = tabIndex;
        }
        if (title) {
            this.$element.title = title;
        }
        if (draggable !== undefined) {
            this.$element.draggable = draggable;
        }
    }
}
exports.default = Editable;
//# sourceMappingURL=Component.js.map