react-froala-wysiwyg
Version:
React component for Froala WYSIWYG HTML rich text editor.
140 lines (127 loc) • 24.5 kB
JavaScript
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("froala-editor"));
else if(typeof define === 'function' && define.amd)
define(["react", "froala-editor"], factory);
else if(typeof exports === 'object')
exports["index"] = factory(require("react"), require("froala-editor"));
else
root["index"] = factory(root["React"], root["froala-editor"]);
})(this, (__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_froala_editor__) => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./lib/FroalaEditor.jsx":
/*!******************************!*\
!*** ./lib/FroalaEditor.jsx ***!
\******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ FroalaEditor)\n/* harmony export */ });\n/* harmony import */ var _FroalaEditorFunctionality_jsx__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./FroalaEditorFunctionality.jsx */ \"./lib/FroalaEditorFunctionality.jsx\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n'use client';\n\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar FroalaEditor = /*#__PURE__*/function (_FroalaEditorFunction) {\n function FroalaEditor() {\n _classCallCheck(this, FroalaEditor);\n return _callSuper(this, FroalaEditor, arguments);\n }\n _inherits(FroalaEditor, _FroalaEditorFunction);\n return _createClass(FroalaEditor, [{\n key: \"render\",\n value: function render() {\n var _this = this;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(this.tag, {\n ref: function ref(el) {\n return _this.el = el;\n }\n }, this.props.children);\n }\n }]);\n}(_FroalaEditorFunctionality_jsx__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n\n\n//# sourceURL=webpack://react-froala-wysiwyg/./lib/FroalaEditor.jsx?\n}");
/***/ }),
/***/ "./lib/FroalaEditorFunctionality.jsx":
/*!*******************************************!*\
!*** ./lib/FroalaEditorFunctionality.jsx ***!
\*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ FroalaEditorFunctionality)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var froala_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! froala-editor */ \"froala-editor\");\n/* harmony import */ var froala_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(froala_editor__WEBPACK_IMPORTED_MODULE_1__);\n'use client';\n\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar lastId = 0;\n\nvar FroalaEditorFunctionality = /*#__PURE__*/function (_React$Component) {\n function FroalaEditorFunctionality(props) {\n var _this;\n _classCallCheck(this, FroalaEditorFunctionality);\n _this = _callSuper(this, FroalaEditorFunctionality, [props]);\n\n // Tag on which the editor is initialized.\n _this.defaultTag = 'div';\n _this.tag = props.tag || _this.defaultTag;\n _this.listeningEvents = [];\n\n // Jquery wrapped element.\n _this.element = null;\n\n // Editor element.\n _this.editor = null;\n\n // Editor options config\n _this.config = {\n immediateReactModelUpdate: false,\n reactIgnoreAttrs: null\n };\n _this.editorInitialized = false;\n _this.editorCreated = false;\n _this.SPECIAL_TAGS = ['img', 'button', 'input', 'a'];\n _this.INNER_HTML_ATTR = 'innerHTML';\n _this.hasSpecialTag = false;\n _this.oldModel = null;\n return _this;\n }\n\n // After first time render.\n _inherits(FroalaEditorFunctionality, _React$Component);\n return _createClass(FroalaEditorFunctionality, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var tagName = this.el.tagName.toLowerCase();\n if (this.SPECIAL_TAGS.indexOf(tagName) != -1) {\n this.tag = tagName;\n this.hasSpecialTag = true;\n }\n if (this.props.onManualControllerReady) {\n this.generateManualController();\n } else {\n this.createEditor();\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.destroyEditor();\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate() {\n if (JSON.stringify(this.oldModel) == JSON.stringify(this.props.model)) {\n return;\n }\n this.setContent();\n }\n\n // Return cloned object\n }, {\n key: \"clone\",\n value: function clone(item) {\n var me = this;\n if (!item) {\n return item;\n } // null, undefined values check\n\n var types = [Number, String, Boolean],\n result;\n\n // normalizing primitives if someone did new String('aaa'), or new Number('444');\n types.forEach(function (type) {\n if (item instanceof type) {\n result = type(item);\n }\n });\n if (typeof result == \"undefined\") {\n if (Object.prototype.toString.call(item) === \"[object Array]\") {\n result = [];\n item.forEach(function (child, index, array) {\n result[index] = me.clone(child);\n });\n } else if (_typeof(item) == \"object\") {\n // testing that this is DOM\n if (item.nodeType && typeof item.cloneNode == \"function\") {\n result = item.cloneNode(true);\n } else if (!item.prototype) {\n // check that this is a literal\n if (item instanceof Date) {\n result = new Date(item);\n } else {\n // it is an object literal\n result = {};\n for (var i in item) {\n result[i] = me.clone(item[i]);\n }\n }\n } else {\n if (false) // removed by dead control flow\n{} else {\n result = item;\n }\n }\n } else {\n result = item;\n }\n }\n return result;\n }\n }, {\n key: \"createEditor\",\n value: function createEditor() {\n var _this2 = this;\n if (this.editorInitialized || this.editorCreated) {\n return;\n }\n this.config = this.clone(this.props.config || this.config);\n this.config = _objectSpread({}, this.config);\n this.element = this.el;\n this.setContent(true);\n\n // Default initialized.\n this.registerEvent('initialized', this.config.events && this.config.events.initialized);\n\n // Check if events are set.\n if (!this.config.events) this.config.events = {};\n this.config.events.initialized = function () {\n return _this2.initListeners();\n };\n this.editor = new (froala_editor__WEBPACK_IMPORTED_MODULE_1___default())(this.element, this.config);\n this.editorCreated = true;\n }\n }, {\n key: \"setContent\",\n value: function setContent(firstTime) {\n if (this.props.model || this.props.model == '') {\n this.oldModel = this.props.model;\n if (this.hasSpecialTag) {\n this.setSpecialTagContent();\n } else {\n this.setNormalTagContent(firstTime);\n }\n }\n }\n }, {\n key: \"setNormalTagContent\",\n value: function setNormalTagContent(firstTime) {\n var _this3 = this;\n var self = this;\n function htmlSet() {\n self.editor.html && self.editor.html.set(self.props.model || '');\n if (self.editorInitialized && self.editor.undo) {\n //This will reset the undo stack everytime the model changes externally. Can we fix this?\n //https://github.com/froala-labs/froala-editor-js-2/issues/4214\n if (!self.props.skipReset) {\n self.editor.undo.reset();\n }\n self.editor.undo.saveStep();\n }\n }\n if (firstTime) {\n if (this.config.initOnClick) {\n this.registerEvent('initializationDelayed', function () {\n htmlSet();\n });\n this.registerEvent('initialized', function () {\n _this3.editorInitialized = true;\n });\n } else {\n this.registerEvent('initialized', function () {\n _this3.editorInitialized = true;\n htmlSet();\n });\n }\n } else {\n htmlSet();\n }\n }\n }, {\n key: \"setSpecialTagContent\",\n value: function setSpecialTagContent() {\n var tags = this.props.model;\n\n // add tags on element\n if (tags) {\n for (var attr in tags) {\n if (tags.hasOwnProperty(attr) && attr != this.INNER_HTML_ATTR) {\n this.element.setAttribute(attr, tags[attr]);\n }\n }\n if (tags.hasOwnProperty(this.INNER_HTML_ATTR)) {\n this.element.innerHTML = tags[this.INNER_HTML_ATTR];\n }\n }\n }\n }, {\n key: \"destroyEditor\",\n value: function destroyEditor() {\n if (this.element) {\n this.editor.destroy && this.editor.destroy();\n this.listeningEvents.length = 0;\n this.element = null;\n this.editorInitialized = false;\n this.editorCreated = false;\n this.config = {\n immediateReactModelUpdate: false,\n reactIgnoreAttrs: null\n };\n var tagName = this.el.tagName.toLowerCase();\n if (this.SPECIAL_TAGS.indexOf(tagName) == -1) {\n if (this.editor && this.editor.destrying && !this.props.onManualControllerReady && this.tag == 'textarea') {\n this.editor.$box.remove();\n }\n }\n if (this.tag != 'textarea') {\n this.editor.$wp = '';\n }\n }\n }\n }, {\n key: \"getEditor\",\n value: function getEditor() {\n if (this.element) {\n return this.editor;\n }\n return null;\n }\n }, {\n key: \"generateManualController\",\n value: function generateManualController() {\n var self = this;\n var controls = {\n initialize: function initialize() {\n return self.createEditor.call(self);\n },\n destroy: function destroy() {\n return self.destroyEditor.call(self);\n },\n getEditor: function getEditor() {\n return self.getEditor.call(self);\n }\n };\n this.props.onManualControllerReady(controls);\n }\n }, {\n key: \"updateModel\",\n value: function updateModel() {\n if (!this.props.onModelChange) {\n return;\n }\n var modelContent = '';\n if (this.hasSpecialTag) {\n var attributeNodes = this.element.attributes;\n var attrs = {};\n for (var i = 0; i < attributeNodes.length; i++) {\n var attrName = attributeNodes[i].name;\n if (this.config.reactIgnoreAttrs && this.config.reactIgnoreAttrs.indexOf(attrName) != -1) {\n continue;\n }\n attrs[attrName] = attributeNodes[i].value;\n }\n if (this.element.innerHTML) {\n attrs[this.INNER_HTML_ATTR] = this.element.innerHTML;\n }\n modelContent = attrs;\n } else {\n var returnedHtml = this.editor.html.get();\n if (typeof returnedHtml === 'string') {\n modelContent = returnedHtml;\n }\n }\n this.oldModel = modelContent;\n this.props.onModelChange(modelContent);\n }\n }, {\n key: \"initListeners\",\n value: function initListeners() {\n var self = this;\n\n // bind contentChange and keyup event to froalaModel\n if (this.editor && this.editor.events) {\n this.editor.events.on('contentChanged', function () {\n self.updateModel();\n });\n }\n if (this.config.immediateReactModelUpdate) {\n this.editor.events.on('keyup', function () {\n self.updateModel();\n });\n }\n\n // Call init events.\n if (this._initEvents) {\n for (var i = 0; i < this._initEvents.length; i++) {\n this._initEvents[i].call(this.editor);\n }\n }\n }\n\n // register event on jquery editor element\n }, {\n key: \"registerEvent\",\n value: function registerEvent(eventName, callback) {\n if (!eventName || !callback) {\n return;\n }\n if (eventName == 'initialized') {\n if (!this._initEvents) this._initEvents = [];\n this._initEvents.push(callback);\n } else {\n if (!this.config.events) {\n this.config.events = {};\n }\n this.config.events[eventName] = callback;\n }\n }\n }]);\n}((react__WEBPACK_IMPORTED_MODULE_0___default().Component));\n\n;\n\n//# sourceURL=webpack://react-froala-wysiwyg/./lib/FroalaEditorFunctionality.jsx?\n}");
/***/ }),
/***/ "froala-editor":
/*!********************************!*\
!*** external "froala-editor" ***!
\********************************/
/***/ ((module) => {
module.exports = __WEBPACK_EXTERNAL_MODULE_froala_editor__;
/***/ }),
/***/ "react":
/*!**************************************************************************************!*\
!*** external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} ***!
\**************************************************************************************/
/***/ ((module) => {
module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = __webpack_require__("./lib/FroalaEditor.jsx");
/******/
/******/ return __webpack_exports__;
/******/ })()
;
});