@desynova-digital/components 9.1.1 → 9.1.2

package/_helpers/utils.js

@@ -20,16 +20,16 @@ function timeToSeconds() {
 }
 var cleanHtml = exports.cleanHtml = function cleanHtml(htmlStr) {
   return htmlStr.replace(/"/g, '"') // Replace " with "
-  .replace(/ /g, " ") // Replace   with a space
-  .replace(/'|'/g, "'") // Replace ' and ' with '
-  .replace(/&|&;/g, "&") // Replace & and &; with &
-  .replace(/&lt;/g, "<") // Replace &lt; with <
-  .replace(/&gt;/g, ">") // Replace &gt; with >
+  .replace(/&nbsp;/g, ' ') // Replace &nbsp; with a space
+  .replace(/&apos;|&#x27;|&#39;/g, "'") // Replace &apos; and &#x27; with '
+  .replace(/&amp;|&;/g, '&') // Replace &amp; and &; with &
+  .replace(/&lt;/g, '<') // Replace &lt; with <
+  .replace(/&gt;/g, '>') // Replace &gt; with >
   .replace(/[\u2018\u2019]/g, "'") // Replace special single quotes
   .replace(/[\u201C\u201D]/g, '"') // Replace special double quotes
-  .replace(/<br\s*\/?>/gi, "") // Remove <br> tags
-  .replace(/\s{2,}/g, " ") // Replace multiple spaces with a single space
-  .replace(/\s\s+/g, "").replace(/\t/g, "").replace(/\n/g, " ");
+  .replace(/<br\s*\/?>/gi, '') // Remove <br> tags
+  .replace(/\s{2,}/g, ' ') // Replace multiple spaces with a single space
+  .replace(/\s\s+/g, '').replace(/\t/g, '').replace(/\\"/g, '"').replace(/\n/g, ' ');
 };
 
 /**

package/molecules/richTextInput/RichTextInput.js

@@ -16,6 +16,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _tokens = require("@desynova-digital/tokens");
 var _lodash = require("lodash");
+var _quillDelta = _interopRequireDefault(require("quill-delta"));
 var _utils = require("../../_helpers/utils");
 var _excluded = ["maxLength", "defaultValue", "label", "showLengthCount", "errorMessage", "value", "autoFocus", "onChange", "handleSave", "editType"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -48,7 +49,7 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     setCharCount = _useState4[1];
   var quillRef = (0, _react.useRef)(null);
   var quillInstance = (0, _react.useRef)(null);
-  var clickedKey = (0, _react.useRef)("");
+  var clickedKey = (0, _react.useRef)('');
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       getEditorContent: function getEditorContent() {
@@ -56,7 +57,7 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           var html = quillInstance.current.root.innerHTML;
           return changeEmToI(html);
         }
-        return "";
+        return '';
       },
       setEditorContent: function setEditorContent(content) {
         if (quillInstance.current) {
@@ -73,8 +74,8 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
    * @returns
    */
   var changeEmToI = function changeEmToI(str) {
-    var updatedStr = str.replace(/\n/g, "").replace(/<br\s*\/?>/gi, "").replace(/<\/?p>/gi, "").replace(/<[/]?em>/g, function (match) {
-      return match === "<em>" ? "<i>" : "</i>";
+    var updatedStr = str.replace(/\n/g, '').replace(/<br\s*\/?>/gi, '').replace(/<\/?p>/gi, '').replace(/<[/]?em>/g, function (match) {
+      return match === '<em>' ? '<i>' : '</i>';
     });
 
     // Remove surrounding <p> tags if present
@@ -83,11 +84,11 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return match ? match[1] : updatedStr;
   };
 
-  // Initialize Quill
+  //  Initialize quill
   (0, _react.useEffect)(function () {
     if (!(quillInstance !== null && quillInstance !== void 0 && quillInstance.current)) {
       var quill = new _quill["default"](quillRef.current, {
-        theme: "snow",
+        theme: 'snow',
         modules: {
           toolbar: false,
           keyboard: {
@@ -98,9 +99,9 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
                 // Tab key
                 handler: function handler() {
                   var currentEditor = quillInstance.current.root;
-                  var editors = document.querySelectorAll(".ql-editor");
+                  var editors = document.querySelectorAll('.ql-editor');
                   var currentIndex = Array.from(editors).indexOf(currentEditor);
-                  if (editType === "mainEdit" && currentIndex !== -1 && currentIndex < editors.length - 1) {
+                  if (editType === 'mainEdit' && currentIndex !== -1 && currentIndex < editors.length - 1) {
                     editors[currentIndex + 1].focus();
                   }
                 }
@@ -113,9 +114,9 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
                 // Shift key combination
                 handler: function handler() {
                   var currentEditor = quillInstance.current.root;
-                  var editors = document.querySelectorAll(".ql-editor");
+                  var editors = document.querySelectorAll('.ql-editor');
                   var currentIndex = Array.from(editors).indexOf(currentEditor);
-                  if (editType === "mainEdit" && currentIndex !== -1 && currentIndex > 0) {
+                  if (editType === 'mainEdit' && currentIndex !== -1 && currentIndex > 0) {
                     editors[currentIndex - 1].focus(); // Move focus to the previous editor
                   }
                 }
@@ -124,6 +125,12 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           }
         }
       });
+
+      // Ensure plain text is pasted instead of formatted content
+      quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
+        var plainText = node.innerText || node.textContent; // Extract plain text
+        return new _quillDelta["default"]().insert(plainText); // Insert plain text without formatting
+      });
       quillInstance.current = quill;
     }
     var handleFocus = function handleFocus() {
@@ -131,9 +138,9 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       quillInstance.current.setSelection(length - 1, 0);
     };
     var editorRoot = quillInstance.current.root;
-    editorRoot.addEventListener("focus", handleFocus);
+    editorRoot.addEventListener('focus', handleFocus);
     var updateCharCount = function updateCharCount() {
-      var text = quillInstance.current.getText().replace(/\n/g, "");
+      var text = quillInstance.current.getText().replace(/\n/g, '');
       var characterCount = text.length;
       setCharCount(characterCount);
       var selection = quillInstance.current.getSelection();
@@ -143,13 +150,13 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           var startDeleteIndex = selection.index - excessCharacters;
           var safeDeleteIndex = Math.max(0, startDeleteIndex);
           quillInstance.current.deleteText(safeDeleteIndex, excessCharacters);
-          text = quillInstance.current.getText().replace(/\n/g, "");
+          text = quillInstance.current.getText().replace(/\n/g, '');
           characterCount = text.length;
         }
         setCharCount(characterCount);
         var html = quillInstance.current.getSemanticHTML();
-        html = changeEmToI(html);
-        if (onChange && clickedKey.current !== "enter") {
+        html = changeEmToI((0, _utils.cleanHtml)(html));
+        if (onChange && clickedKey.current !== 'enter') {
           onChange({
             target: {
               value: html,
@@ -159,13 +166,13 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         }
       }
     };
-    quillInstance.current.on("text-change", updateCharCount);
+    quillInstance.current.on('text-change', updateCharCount);
     var editorContainer = quillInstance.current.root;
-    editorContainer.classList.add("quill-editor-content");
+    editorContainer.classList.add('quill-editor-content');
     return function () {
-      quillInstance.current.off("text-change", updateCharCount);
-      quillRef.current.innerHTML = "";
-      editorRoot.removeEventListener("focus", handleFocus);
+      quillInstance.current.off('text-change', updateCharCount);
+      quillRef.current.innerHTML = '';
+      editorRoot.removeEventListener('focus', handleFocus);
     };
   }, []);
 
@@ -181,21 +188,21 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         handleSave(html);
       }, 0);
       var handleKeyDown = function handleKeyDown(event) {
-        if (event.key === "Enter") {
+        if (event.key === 'Enter') {
           event.preventDefault();
           var html = quillInstance.current.getSemanticHTML();
           html = changeEmToI(html);
-          clickedKey.current = "enter";
+          clickedKey.current = 'enter';
           debouncedHandleSave(html);
-        } else if (event.key === "Backspace" || event.key === "Delete") {
-          clickedKey.current = "backspace";
+        } else if (event.key === 'Backspace' || event.key === 'Delete') {
+          clickedKey.current = 'backspace';
         } else {
-          clickedKey.current = "";
+          clickedKey.current = '';
         }
       };
-      editorContainer.addEventListener("keydown", handleKeyDown);
+      editorContainer.addEventListener('keydown', handleKeyDown);
       return function () {
-        editorContainer.removeEventListener("keydown", handleKeyDown);
+        editorContainer.removeEventListener('keydown', handleKeyDown);
         debouncedHandleSave.cancel(); // Clean up debounce
       };
     }
@@ -208,22 +215,22 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       if (value && currentContent !== value) {
         var selection = quillInstance.current.getSelection(); // Capture cursor position
 
-        var content = changeEmToI(value) || "";
+        var content = changeEmToI(value) || '';
         quillInstance.current.clipboard.dangerouslyPasteHTML(content); // Insert HTML content in Quill editor
         var textLength = quillInstance.current.getLength();
         if (selection && selection.index !== 0) {
           quillInstance.current.setSelection(selection.index, selection.length); // Restore previous cursor position
-        } else if (selection && selection.index === 0 && clickedKey.current === "backspace") {
+        } else if (selection && selection.index === 0 && clickedKey.current === 'backspace') {
           quillInstance.current.setSelection(0, 0); // Keep cursor at start when pressing backspace
         } else {
           quillInstance.current.setSelection(charCount || textLength - 1, (selection === null || selection === void 0 ? void 0 : selection.length) || 0); // Move cursor right for other cases
 
-          if (editType === "mainEdit" && !selection) {
+          if (editType === 'mainEdit' && !selection) {
             quillInstance.current.blur();
             // Select the first video element
-            var videoElement = document.getElementsByTagName("video")[0];
+            var videoElement = document.getElementsByTagName('video')[0];
             // Add a tabindex attribute to make it focusable
-            videoElement.setAttribute("tabindex", "0");
+            videoElement.setAttribute('tabindex', '0');
             videoElement.focus();
           }
         }
@@ -247,14 +254,14 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     value: value,
     defaultValue: defaultValue
   }, props, {
-    maxLength: maxLength || "",
+    maxLength: maxLength || '',
     showLengthCount: showLengthCount || false
   }), /*#__PURE__*/_react["default"].createElement("div", {
     ref: quillRef
   })), label && /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: props.id,
-    className: charCount || focus ? "floaton" : ""
-  }, "".concat(label).concat(props.required ? "*" : "")), errorMessage && /*#__PURE__*/_react["default"].createElement(RichTextInputError, {
+    className: charCount || focus ? 'floaton' : ''
+  }, "".concat(label).concat(props.required ? '*' : '')), errorMessage && /*#__PURE__*/_react["default"].createElement(RichTextInputError, {
     value: value,
     theme: props.theme,
     error: props.error
@@ -270,39 +277,39 @@ var returnPadding = function returnPadding(props) {
   var digitCount = props.maxLength.toString().length;
   switch (digitCount) {
     case 0:
-      return "7px 0px 2px 0px";
+      return '7px 0px 2px 0px';
     case 1:
-      return "7px 40px 2px 0px";
+      return '7px 40px 2px 0px';
     case 2:
-      return "7px 60px 2px 0px";
+      return '7px 60px 2px 0px';
     case 3:
-      return "7px 75px 2px 0px";
+      return '7px 75px 2px 0px';
     case 4:
-      return "7px 90px 2px 0px";
+      return '7px 90px 2px 0px';
     case 5:
-      return "7px 110px 2px 0px";
+      return '7px 110px 2px 0px';
     default:
-      return "7px 0px 2px 0px";
+      return '7px 0px 2px 0px';
   }
 };
 var RichTextEditorContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 48px;\n  overflow-y: scroll;\n  ::-webkit-scrollbar {\n    width: 0; /* Remove scrollbar space */\n    background: transparent; /* Optional: just make scrollbar invisible */\n  }\n  white-space: nowrap;\n  width: 100%;\n  text-wrap: wrap;\n  box-sizing: border-box;\n  border-bottom: 1px solid\n    ", ";\n\n  font-family: \"SFUIText-Medium\";\n  font-size: 14px;\n  color: ", ";\n\n  display: inline-block;\n  position: relative;\n  padding: ", ";\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus-within {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    opacity: ", ";\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ", ";\n    opacity: ", ";\n  }\n"])), function (props) {
-  return props.theme === "light" ? _tokens.colors.light.inputCommon.border : _tokens.colors.dark.inputCommon.border;
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.border : _tokens.colors.dark.inputCommon.border;
 }, function (props) {
-  return props.theme === "light" ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
 }, function (props) {
-  return returnPadding(props || "");
+  return returnPadding(props || '');
 }, function (props) {
-  return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
 }, function (props) {
-  return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
 }, function (props) {
-  return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
 }, function (props) {
-  return props.label ? "0" : "1";
+  return props.label ? '0' : '1';
 }, function (props) {
-  return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
+  return props.theme === 'light' ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
 }, function (props) {
-  return props.label ? "1" : "1";
+  return props.label ? '1' : '1';
 });
 RichTextInput.propTypes = {
   masked: _propTypes["default"].bool,
@@ -336,18 +343,18 @@ RichTextInput.propTypes = {
   simpleEdit: _propTypes["default"].bool,
   required: _propTypes["default"].bool,
   autoFocus: _propTypes["default"].bool,
-  theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
-  fieldType: _propTypes["default"].oneOf(["inputField", "textArea"])
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  fieldType: _propTypes["default"].oneOf(['inputField', 'textArea'])
 };
 RichTextInput.defaultProps = {
   autoFocus: false,
-  fieldType: "textArea",
+  fieldType: 'textArea',
   readOnly: false,
   code: false,
   error: null,
   onChange: null,
-  type: "text",
-  theme: "light",
+  type: 'text',
+  theme: 'light',
   showLengthCount: false,
   simpleEdit: false
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.1.1",
+    "@desynova-digital/tokens": "9.1.2",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },