gd-sprest-bs/build/components/richTextBox/index.js

SharePoint JavaScript, TypeScript and Web Components designed using the Bootstrap framework.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RichTextBoxControlType = exports.RichTextBox = exports.RichTextBoxTypes = void 0;
var gd_bs_1 = require("gd-bs");
var quill_1 = require("quill");
var Toolbars = require("./toolbar");
/**
 * Toolbar Types
 */
var RichTextBoxTypes;
(function (RichTextBoxTypes) {
    RichTextBoxTypes[RichTextBoxTypes["None"] = 0] = "None";
    RichTextBoxTypes[RichTextBoxTypes["Basic"] = 1] = "Basic";
    RichTextBoxTypes[RichTextBoxTypes["Full"] = 2] = "Full";
})(RichTextBoxTypes = exports.RichTextBoxTypes || (exports.RichTextBoxTypes = {}));
/**
 * Rich TextBox
 */
var RichTextBox = function (props) {
    // Create the editor element
    var elRichTextBox = document.createElement("div");
    elRichTextBox.classList.add("rich-textbox");
    // Create the toolbar element
    var elToolbar = document.createElement("div");
    elToolbar.classList.add("toolbar-container");
    props.disabled ? null : elToolbar.classList.add("form-control");
    elRichTextBox.appendChild(elToolbar);
    // Create the editor element
    var elEditor = document.createElement("div");
    elEditor.classList.add("editor-container");
    props.disabled ? elEditor.classList.add("rounded") : elEditor.classList.add("form-control");
    elRichTextBox.appendChild(elEditor);
    // Get the options and default the values
    var options = props.options || {};
    options.modules = options.modules || {};
    options.placeholder ? options.placeholder = props.placeholder : null;
    options.readOnly == null && typeof (props.disabled) === "boolean" ? options.readOnly = props.disabled : null;
    options.theme = options.theme == null ? "snow" : options.theme;
    // See if are setting the default toolbar options
    var showToolbar = true;
    if (options.modules.toolbar == null) {
        // Set the toolbar options
        switch (props.toolbarType) {
            // None
            case RichTextBoxTypes.None:
                elToolbar.innerHTML = "";
                showToolbar = false;
                break;
            // Basic
            case RichTextBoxTypes.Basic:
                elToolbar.innerHTML = Toolbars.BasicToolbar;
                break;
            // Default - Full
            default:
                elToolbar.innerHTML = Toolbars.FullToolbar;
                break;
        }
        // Set the toolbar
        options.modules.toolbar = elToolbar;
    }
    else {
        // Set the toolbar container
        options.modules.toolbar.container = elToolbar;
    }
    // Create the element
    var el = document.createElement("div");
    el.appendChild(elRichTextBox);
    // See if we are rendering it to an element
    if (props.el) {
        // Ensure the parent element exists
        if (props.el.parentElement && props.el.parentElement.classList) {
            // Set the bootstrap class
            props.el.parentElement.classList.contains("bs") ? null : props.el.parentElement.classList.add("bs");
        }
        // Append the elements
        while (el.children.length > 0) {
            props.el.appendChild(el.children[0]);
        }
        // Update the element
        el = props.el;
    }
    else {
        // Set the bootstrap class
        el.classList.add("bs");
    }
    // Apply the plugin
    var quillObj = new quill_1.default(elEditor, options);
    // See if we are hiding the toolbar
    if (!showToolbar) {
        // Remove the snow class
        elToolbar.classList.remove("ql-snow");
    }
    // Create the object
    var obj = {
        el: elRichTextBox,
        elContents: quillObj.root,
        quillObj: quillObj,
        getHtml: function () { return obj.getText() ? quillObj.root.innerHTML : ""; },
        getText: function () { return quillObj.getText().trim(); },
        setHtml: function (value) {
            // Convert the html to allow the library to run any conversions to display it correctly
            quillObj.setContents(quillObj.clipboard.convert({ html: value || "" }));
        }
    };
    // Set the value
    props.value ? obj.setHtml(props.value) : null;
    // Execute the assign to event
    props.assignTo ? props.assignTo(obj) : null;
    // Return the object
    return obj;
};
exports.RichTextBox = RichTextBox;
// Customize the form control
exports.RichTextBoxControlType = 102;
gd_bs_1.Components.FormControlTypes["RichTextBox"] = exports.RichTextBoxControlType;
gd_bs_1.Components.CustomControls.registerType(exports.RichTextBoxControlType, function (props) {
    var rtb = null;
    // Set the created method
    var onRendered = props.onControlRendered;
    props.onControlRendered = function (ctrl) {
        // Render a date/time
        rtb = (0, exports.RichTextBox)({
            className: props.className,
            disabled: props.isDisabled || props.isReadonly,
            el: ctrl.el,
            options: props.options,
            rows: props.rows,
            toolbarType: props.toolbarType,
            placeholder: props.placeholder,
            value: props.value
        });
        // See if the label exists
        var elLabel = ctrl["_elLabel"];
        if (elLabel) {
            // Set the id and aria properties
            elLabel ? elLabel.id = (props.id || props.name) + "_label" : null;
            //rtb.el.querySelector("input").setAttribute("aria-labelledby", elLabel.id);
        }
        // Set the control
        ctrl.setControl(rtb);
        // Call the custom render event
        onRendered ? onRendered(ctrl) : null;
    };
    // Register a people picker
    props.onGetValue = function (ctrl) {
        // Return the value
        return rtb ? rtb.getHtml() : ctrl.value;
    };
});