@desynova-digital/components 9.2.52 → 9.3.0

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";
@@ -112,12 +112,19 @@ 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,
+        readOnly: isDisabled,
         modules: {
           toolbar: false,
-          readOnly: isDisabled,
           keyboard: {
             bindings: {
               // This will overwrite the default binding for Tab
@@ -153,10 +160,21 @@ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         }
       });
 
-      // Ensure plain text is pasted instead of formatted content
+      // quill.root.addEventListener("paste", function(e) {
+      //   e.preventDefault();
+      //   const text = (e.clipboardData || window.clipboardData).getData(
+      //     "text/plain",
+      //   );
+      //   const range = quill.getSelection();
+      //   if (range) {
+      //     quill.insertText(range.index, text);
+      //   }
+      // });
+
+      //prevention from double pasting of code.
       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
+        return new _quillDelta["default"]().insert(plainText);
       });
       quillInstance.current = quill;
       if (quill.root) {
@@ -199,6 +217,11 @@ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       quillRef.current.innerHTML = "";
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    if (quillInstance.current) {
+      quillInstance.current.enable(!isDisabled);
+    }
+  }, [isDisabled]);
   (0, _react.useEffect)(function () {
     if (quillInstance.current) {
       var editorContainer = quillInstance.current.root;
@@ -206,7 +229,10 @@ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         handleSave(html);
       }, 0);
       var handleKeyDown = function handleKeyDown(event) {
-        if (event.key === "Enter" && !event.altKey) {
+        if (event.key === "Enter") {
+          if (event.altKey || event.metaKey) {
+            return;
+          }
           event.preventDefault();
           event.stopPropagation();
           var html = quillInstance.current.getSemanticHTML();
@@ -300,7 +326,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.52",
+  "version": "9.3.0",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "9.2.52",
+    "@desynova-digital/tokens": "9.3.0",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },