myprojectpackageprav
Version:
My package in npm
30 lines • 3.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_draft_wysiwyg_1 = require("react-draft-wysiwyg");
var draft_js_1 = require("draft-js");
require("./richtext.css");
var input_label_1 = tslib_1.__importDefault(require("./input-label"));
// import { EditorState, convertToRaw, ContentState, convertFromHTML } from 'draft-js'
var RichTextEditor = function (inputProps) {
var _a, _b;
var _c = (0, react_1.useState)(draft_js_1.EditorState.createEmpty()), editorState = _c[0], setEditorState = _c[1];
var onSetEditorState = function (newState) {
setEditorState(newState);
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: inputProps === null || inputProps === void 0 ? void 0 : inputProps.formClassName },
(inputProps === null || inputProps === void 0 ? void 0 : inputProps.label) && react_1.default.createElement(input_label_1.default, { labelProps: { htmlFor: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputProps) === null || _a === void 0 ? void 0 : _a.id }, className: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputProps) === null || _b === void 0 ? void 0 : _b.className, label: inputProps === null || inputProps === void 0 ? void 0 : inputProps.label, infoLabel: inputProps === null || inputProps === void 0 ? void 0 : inputProps.info, isinfoLabel: inputProps === null || inputProps === void 0 ? void 0 : inputProps.isInfo, isinfoIcon: inputProps === null || inputProps === void 0 ? void 0 : inputProps.infoIcon, isinfoClassName: inputProps === null || inputProps === void 0 ? void 0 : inputProps.infoClassName, mandatory: inputProps === null || inputProps === void 0 ? void 0 : inputProps.isMandatory }),
react_1.default.createElement(react_draft_wysiwyg_1.Editor, { editorState: editorState, onEditorStateChange: onSetEditorState, toolbar: {
options: ['blockType', 'inline', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'image', 'remove'],
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true }
}, placeholder: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) || "Enter ".concat(inputProps === null || inputProps === void 0 ? void 0 : inputProps.label), "aria-label": inputProps === null || inputProps === void 0 ? void 0 : inputProps.label, useref: inputProps === null || inputProps === void 0 ? void 0 : inputProps.useref })),
(inputProps === null || inputProps === void 0 ? void 0 : inputProps.hint) && react_1.default.createElement("div", null, inputProps === null || inputProps === void 0 ? void 0 : inputProps.hint)));
};
exports.default = RichTextEditor;
//# sourceMappingURL=rich-text.js.map