@desynova-digital/components 9.2.5 → 9.2.7

package/molecules/richTextInput/RichTextInput.js

@@ -68,10 +68,10 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     };
   });
 
-  /**
-   *
-   * @param {*} str
-   * @returns
+  /**
+   *
+   * @param {*} str
+   * @returns
    */
   var changeEmToI = function changeEmToI(str) {
     var updatedStr = str.replace(/\n/g, "").replace(/<br\s*\/?>/gi, "").replace(/<\/?p>/gi, "").replace(/<[/]?em>/g, function (match) {
@@ -268,10 +268,10 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, errorMessage), maxLength && showLengthCount && quillInstance.current && /*#__PURE__*/_react["default"].createElement(CountWrapper, null, charCount, "/", maxLength));
 });
 
-/**
- *
- * @param {*} props
- * @returns
+/**
+ *
+ * @param {*} props
+ * @returns
  */
 var returnPadding = function returnPadding(props) {
   var digitCount = props.maxLength.toString().length;

package/molecules/richTextInputV2/RichTextInputV2.js

@@ -22,7 +22,7 @@ var _excluded = ["maxLength", "defaultValue", "label", "showLengthCount", "error
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var RichTextInputDiv = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  i,\n  em {\n    font-style: italic;\n  }\n  strong {\n    font-weight: bold;\n  }\n  .quill-editor-content {\n    white-space: pre-wrap; /* Preserve whitespace and line breaks */\n  }\n  background: transparent;\n  font-family: \"SFUIText-Medium\";\n  position: relative;\n  width: 92%;\n  width: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n\n  display: block;\n  .ql-container.ql-snow {\n    border: none;\n    position: relative;\n  }\n  .ql-editor {\n    padding: 0;\n    position: relative;\n  }\n\n  // Custom placeholder styles - this will show the placeholder value from props\n  .ql-editor.ql-blank::before {\n    color: #999999 !important;\n    font-style: normal !important;\n    font-family: \"SFUIText-Medium\" !important;\n    font-size: 14px !important;\n    left: 0 !important;\n    right: auto !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n    display: block !important;\n    position: absolute !important;\n    content: attr(data-placeholder) !important;\n    pointer-events: none !important;\n  }\n\n  // Ensure placeholder is visible even when not focused\n  .ql-editor.ql-blank {\n    position: relative;\n\n    &::before {\n      display: block !important;\n      opacity: 1 !important;\n      visibility: visible !important;\n    }\n  }\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > div:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > div ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"])), function (props) {
+var RichTextInputDiv = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  i,\n  em {\n    font-style: italic;\n  }\n  strong {\n    font-weight: bold;\n  }\n  .quill-editor-content {\n    white-space: pre-wrap; /* Preserve whitespace and line breaks */\n  }\n  background: transparent;\n  font-family: \"SFUIText-Regular\";\n  position: relative;\n  width: 92%;\n  width: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n\n  display: block;\n  .ql-container.ql-snow {\n    border: none;\n    position: relative;\n  }\n  .ql-editor {\n    padding: 0;\n    position: relative;\n  }\n\n  // Custom placeholder styles - this will show the placeholder value from props\n  .ql-editor.ql-blank::before {\n    color: #999999 !important;\n    font-style: normal !important;\n    font-family: \"SFUIText-Regular\" !important;\n    font-size: 13px !important;\n    left: 0 !important;\n    right: auto !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n    display: block !important;\n    position: absolute !important;\n    content: attr(data-placeholder) !important;\n    pointer-events: none !important;\n  }\n\n  // Ensure placeholder is visible even when not focused\n  .ql-editor.ql-blank {\n    position: relative;\n\n    &::before {\n      display: block !important;\n      opacity: 1 !important;\n      visibility: visible !important;\n    }\n  }\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > div:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > div ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"])), function (props) {
   return props.sleek === "sleek" ? "100%" : "92%";
 }, function (props) {
   return props.sleek === "sleek" ? "" : "10px";
@@ -93,10 +93,10 @@ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     };
   });
 
-  /**
-   *
-   * @param {*} str
-   * @returns
+  /**
+   *
+   * @param {*} str
+   * @returns
    */
   var changeEmToI = function changeEmToI(str) {
     var updatedStr = str.replace(/\n/g, "").replace(/<br\s*\/?>/gi, "").replace(/<\/?p>/gi, "").replace(/<[/]?em>/g, function (match) {
@@ -112,6 +112,13 @@ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   //  Initialize quill
   (0, _react.useEffect)(function () {
     if (!(quillInstance !== null && quillInstance !== void 0 && quillInstance.current)) {
+      // Get the keyboard module and remove list autofill binding
+      var Keyboard = _quill["default"]["import"]("modules/keyboard");
+
+      // Remove the list autofill binding
+      if (Keyboard && Keyboard.DEFAULTS && Keyboard.DEFAULTS.bindings) {
+        delete Keyboard.DEFAULTS.bindings["list autofill"];
+      }
       var quill = new _quill["default"](quillRef.current, {
         theme: "snow",
         placeholder: placeholder,
@@ -152,11 +159,13 @@ var RichTextInputV2 = /*#__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
+      quill.root.addEventListener("paste", function (e) {
+        e.preventDefault();
+        var text = (e.clipboardData || window.clipboardData).getData("text/plain");
+        var range = quill.getSelection();
+        if (range) {
+          quill.insertText(range.index, text);
+        }
       });
       quillInstance.current = quill;
       if (quill.root) {
@@ -281,10 +290,10 @@ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, errorMessage), maxLength && showLengthCount && quillInstance.current && /*#__PURE__*/_react["default"].createElement(CountWrapper, null, charCount, "/", maxLength));
 });
 
-/**
- *
- * @param {*} props
- * @returns
+/**
+ *
+ * @param {*} props
+ * @returns
  */
 var returnPadding = function returnPadding(props) {
   if (props.sleek = "sleek") {
@@ -308,7 +317,7 @@ var returnPadding = function returnPadding(props) {
       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;\n    background: transparent;\n  }\n  white-space: nowrap;\n  width: 100%;\n  text-wrap: wrap;\n  box-sizing: border-box;\n  font-family: \"SFUIText-Medium\";\n  font-size: 14px;\n  color: ", ";\n  border-bottom: ", ";\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) {
+var RichTextEditorContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 48px;\n  overflow-y: scroll;\n  ::-webkit-scrollbar {\n    width: 0;\n    background: transparent;\n  }\n  white-space: nowrap;\n  width: 100%;\n  text-wrap: wrap;\n  box-sizing: border-box;\n  font-family: \"SFUIText-Regular\";\n  font-size: 13px;\n  color: ", ";\n  border-bottom: ", ";\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.color : _tokens.colors.dark.inputCommon.color;
 }, function (props) {
   return !props.hideBorder ? props.theme === "light" ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color : "none";

package/package.json

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