@elliemae/ds-wysiwygeditor 2.4.19 → 2.4.22

package/cjs/components/DSWYSIWYGEditorImpl.js

@@ -18,6 +18,7 @@ var InsertFieldModal = require('./InsertFieldModal.js');
 var CustomToolbar = require('./CustomToolbar.js');
 var IndentStyle = require('../quillOverrides/IndentStyle.js');
 var LinkFormat = require('../quillOverrides/LinkFormat.js');
+var Image = require('../quillOverrides/Image.js');
 var utils = require('../utils.js');
 var clipboardLinkWithTagMatcher = require('../quillMatchers/clipboardLinkWithTagMatcher.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -54,6 +55,7 @@ ReactQuill.Quill.register(IndentStyle, true);
 ReactQuill.Quill.register(FontStyle, true);
 ReactQuill.Quill.register(SizeStyle, true); // -----------------------------------------
 
+ReactQuill.Quill.register(Image, true);
 class DSWYSIWYGEditorImpl extends React__default["default"].PureComponent {
   constructor(props) {
     super(props);
@@ -236,7 +238,7 @@ class DSWYSIWYGEditorImpl extends React__default["default"].PureComponent {
           minHeight: '200px'
         },
         onChange: this.onChangeTextArea,
-        value: utils.formatHTML(this.quill?.getEditor()?.root?.innerHTML || value)
+        value: utils.formatHTML(value)
       }), imagesData && imagesData.length && /*#__PURE__*/_jsx__default["default"](ImageLibraryModal, {
         imagesData: imagesData,
         isOpen: isImageModalOpen,

package/cjs/components/customFields.js

@@ -6,7 +6,7 @@ require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 
 var _this = undefined;
-const fields = ['Lender Name ­ «315»', 'Lender Address ­ «319»', 'Lender City ­ «313»', 'Lender State ­ «321»', 'Lender Zip ­ «323»', 'Borrower First Name ­ «4000»', 'Borrower Last Name ­ «4002»', 'Total Loan Amount ­ «2»', 'Loan Term ­ «4»', 'Loan to Value ­ «976»', 'Monthly Payment ­ «912»', 'Interest Rate ­ «3»', 'Loan Originator Name ­ «1612»', 'Loan Originator Email ­ «3968»', 'Loan Originator Phone ­ «1823»', 'NMLS Loan Originator ID ­ «3238»'];
+const fields = ['Lender Name «315»', 'Lender Address «319»', 'Lender City «313»', 'Lender State «321»', 'Lender Zip «323»', 'Borrower First Name «4000»', 'Borrower Last Name «4002»', 'Total Loan Amount «2»', 'Loan Term «4»', 'Loan to Value «976»', 'Monthly Payment «912»', 'Interest Rate «3»', 'Loan Originator Name «1612»', 'Loan Originator Email «3968»', 'Loan Originator Phone «1823»', 'NMLS Loan Originator ID «3238»'];
 /**
  * Returns the fields names
  *

package/cjs/quillOverrides/Image.js

@@ -0,0 +1,52 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var ReactQuill = require('react-quill');
+
+const BaseImage = ReactQuill.Quill.import('formats/image');
+const ATTRIBUTES = ['alt', 'height', 'width', 'style'];
+const WHITE_STYLE = ['margin', 'display', 'float'];
+
+class Image extends BaseImage {
+  static formats(domNode) {
+    return ATTRIBUTES.reduce(function (formats, attribute) {
+      if (domNode.hasAttribute(attribute)) {
+        formats[attribute] = domNode.getAttribute(attribute);
+      }
+
+      return formats;
+    }, {});
+  }
+
+  format(name, value) {
+    if (ATTRIBUTES.indexOf(name) > -1) {
+      if (value) {
+        if (name === 'style') {
+          value = this.sanitize_style(value);
+        }
+
+        this.domNode.setAttribute(name, value);
+      } else {
+        this.domNode.removeAttribute(name);
+      }
+    } else {
+      super.format(name, value);
+    }
+  }
+
+  sanitize_style(style) {
+    let style_arr = style.split(';');
+    let allow_style = '';
+    style_arr.forEach((v, i) => {
+      if (WHITE_STYLE.indexOf(v.trim().split(':')[0]) !== -1) {
+        allow_style += v + ';';
+      }
+    });
+    return allow_style;
+  }
+
+}
+
+module.exports = Image;

package/esm/components/DSWYSIWYGEditorImpl.js

@@ -16,6 +16,7 @@ import InsertFieldModal from './InsertFieldModal.js';
 import { CustomToolbar } from './CustomToolbar.js';
 import IndentStyle from '../quillOverrides/IndentStyle.js';
 import LinkFormat from '../quillOverrides/LinkFormat.js';
+import Image from '../quillOverrides/Image.js';
 import { formatHTML } from '../utils.js';
 import { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -43,6 +44,7 @@ Quill.register(IndentStyle, true);
 Quill.register(FontStyle, true);
 Quill.register(SizeStyle, true); // -----------------------------------------
 
+Quill.register(Image, true);
 class DSWYSIWYGEditorImpl extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -225,7 +227,7 @@ class DSWYSIWYGEditorImpl extends React.PureComponent {
           minHeight: '200px'
         },
         onChange: this.onChangeTextArea,
-        value: formatHTML(this.quill?.getEditor()?.root?.innerHTML || value)
+        value: formatHTML(value)
       }), imagesData && imagesData.length && /*#__PURE__*/_jsx(ImageLibraryModal, {
         imagesData: imagesData,
         isOpen: isImageModalOpen,

package/esm/components/customFields.js

@@ -2,7 +2,7 @@ import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 
 var _this = undefined;
-const fields = ['Lender Name ­ «315»', 'Lender Address ­ «319»', 'Lender City ­ «313»', 'Lender State ­ «321»', 'Lender Zip ­ «323»', 'Borrower First Name ­ «4000»', 'Borrower Last Name ­ «4002»', 'Total Loan Amount ­ «2»', 'Loan Term ­ «4»', 'Loan to Value ­ «976»', 'Monthly Payment ­ «912»', 'Interest Rate ­ «3»', 'Loan Originator Name ­ «1612»', 'Loan Originator Email ­ «3968»', 'Loan Originator Phone ­ «1823»', 'NMLS Loan Originator ID ­ «3238»'];
+const fields = ['Lender Name «315»', 'Lender Address «319»', 'Lender City «313»', 'Lender State «321»', 'Lender Zip «323»', 'Borrower First Name «4000»', 'Borrower Last Name «4002»', 'Total Loan Amount «2»', 'Loan Term «4»', 'Loan to Value «976»', 'Monthly Payment «912»', 'Interest Rate «3»', 'Loan Originator Name «1612»', 'Loan Originator Email «3968»', 'Loan Originator Phone «1823»', 'NMLS Loan Originator ID «3238»'];
 /**
  * Returns the fields names
  *

package/esm/quillOverrides/Image.js

@@ -0,0 +1,50 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { Quill } from 'react-quill';
+
+const BaseImage = Quill.import('formats/image');
+const ATTRIBUTES = ['alt', 'height', 'width', 'style'];
+const WHITE_STYLE = ['margin', 'display', 'float'];
+
+class Image extends BaseImage {
+  static formats(domNode) {
+    return ATTRIBUTES.reduce(function (formats, attribute) {
+      if (domNode.hasAttribute(attribute)) {
+        formats[attribute] = domNode.getAttribute(attribute);
+      }
+
+      return formats;
+    }, {});
+  }
+
+  format(name, value) {
+    if (ATTRIBUTES.indexOf(name) > -1) {
+      if (value) {
+        if (name === 'style') {
+          value = this.sanitize_style(value);
+        }
+
+        this.domNode.setAttribute(name, value);
+      } else {
+        this.domNode.removeAttribute(name);
+      }
+    } else {
+      super.format(name, value);
+    }
+  }
+
+  sanitize_style(style) {
+    let style_arr = style.split(';');
+    let allow_style = '';
+    style_arr.forEach((v, i) => {
+      if (WHITE_STYLE.indexOf(v.trim().split(':')[0]) !== -1) {
+        allow_style += v + ';';
+      }
+    });
+    return allow_style;
+  }
+
+}
+
+export { Image as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-wysiwygeditor",
-  "version": "2.4.19",
+  "version": "2.4.22",
   "license": "MIT",
   "description": "ICE MT - Dimsum - WYSIWYG Editor",
   "module": "./esm/index.js",
@@ -27,6 +27,10 @@
       "import": "./esm/quillOverrides/IndentStyle.js",
       "require": "./cjs/quillOverrides/IndentStyle.js"
     },
+    "./quillOverrides/Image": {
+      "import": "./esm/quillOverrides/Image.js",
+      "require": "./cjs/quillOverrides/Image.js"
+    },
     "./quillMatchers/clipboardLinkWithTagMatcher": {
       "import": "./esm/quillMatchers/clipboardLinkWithTagMatcher.js",
       "require": "./cjs/quillMatchers/clipboardLinkWithTagMatcher.js"
@@ -96,14 +100,14 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.19",
-    "@elliemae/ds-dropdownmenu": "2.4.19",
-    "@elliemae/ds-icons": "2.4.19",
-    "@elliemae/ds-imagelibrarymodal": "2.4.19",
-    "@elliemae/ds-modal": "2.4.19",
-    "@elliemae/ds-shared": "2.4.19",
-    "@elliemae/ds-tooltip": "2.4.19",
-    "@elliemae/ds-uploader": "2.4.19",
+    "@elliemae/ds-button": "2.4.22",
+    "@elliemae/ds-dropdownmenu": "2.4.22",
+    "@elliemae/ds-icons": "2.4.22",
+    "@elliemae/ds-imagelibrarymodal": "2.4.22",
+    "@elliemae/ds-modal": "2.4.22",
+    "@elliemae/ds-shared": "2.4.22",
+    "@elliemae/ds-tooltip": "2.4.22",
+    "@elliemae/ds-uploader": "2.4.22",
     "prop-types": "~15.7.2",
     "quill-blot-formatter": "~1.0.5",
     "quill-delta": "4.2.2",

package/types/quillOverrides/Image.d.ts

@@ -0,0 +1,7 @@
+declare const BaseImage: any;
+declare class Image extends BaseImage {
+    static formats(domNode: any): {};
+    format(name: any, value: any): void;
+    sanitize_style(style: any): string;
+}
+export default Image;