@desynova-digital/components 9.1.51 → 9.1.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/atoms/icon/icons.json +16 -5
  2. package/atoms/timeCodeDisplay/timeCodeDisplay.js +7 -2
  3. package/atoms/timeCodeInput/timeCodeMSInput.js +9 -1
  4. package/atoms/timeCodeInput/timeCodeMainInput.js +10 -1
  5. package/atoms/timeCodeInput/timeCodeStandardInput.js +19 -7
  6. package/components.js +7 -0
  7. package/index.js +6 -0
  8. package/molecules/richTextInput/RichTextInput.js +54 -54
  9. package/molecules/richTextInputV2/RichTextInput.storyV2.js +197 -0
  10. package/molecules/richTextInputV2/RichTextInputV2.js +369 -0
  11. package/molecules/richTextInputV2/index.js +9 -0
  12. package/package.json +2 -2
package/atoms/icon/icons.json CHANGED
@@ -1219,14 +1219,18 @@
1219
1219
  "height": 20,
1220
1220
  "width": 20
1221
1221
  },
1222
- "av_cut":{
1223
- "paths": ["M2.10547 0C3.26808 0.000110239 4.21094 0.93582 4.21094 2.08984C4.21091 2.47621 4.10321 2.83694 3.91895 3.14746L5.26465 4.4834L9.10254 0.676758C9.30808 0.472809 9.64116 0.472764 9.84668 0.676758C10.0519 0.880718 10.0519 1.2111 9.84668 1.41504L3.91895 7.29785C4.1032 7.60837 4.21094 7.96908 4.21094 8.35547C4.21084 9.50941 3.26802 10.4452 2.10547 10.4453C0.942823 10.4453 9.54067e-05 9.50948 0 8.35547C0 7.20138 0.942764 6.26562 2.10547 6.26562C2.49659 6.26566 2.86193 6.37312 3.17578 6.55762L4.52051 5.22266L3.1748 3.88672C2.86103 4.07113 2.49645 4.17965 2.10547 4.17969C0.942823 4.17969 9.54067e-05 3.24386 0 2.08984C0 0.935752 0.942764 0 2.10547 0ZM6.18945 6.15332C6.39482 5.94938 6.72795 5.94861 6.93359 6.15234L9.84375 9.03613C10.0495 9.23995 10.05 9.57119 9.84473 9.77539C9.63952 9.97945 9.30635 9.97976 9.10059 9.77637L6.18945 6.89258C5.98373 6.68875 5.9841 6.35752 6.18945 6.15332ZM2.10352 7.3125C1.52216 7.3125 1.05078 7.78038 1.05078 8.35742C1.05083 8.93443 1.52219 9.40234 2.10352 9.40234C2.68479 9.40229 3.1562 8.93439 3.15625 8.35742C3.15625 8.07122 3.04038 7.81177 2.85254 7.62305C2.85177 7.62229 2.85037 7.62185 2.84961 7.62109C2.84797 7.61947 2.84634 7.61785 2.84473 7.61621C2.65443 7.42873 2.39275 7.31253 2.10352 7.3125ZM2.10352 1.04688C1.52216 1.04688 1.05078 1.51475 1.05078 2.0918C1.05083 2.6688 1.52219 3.13672 2.10352 3.13672C2.3885 3.13669 2.64637 3.02348 2.83594 2.84082C2.84064 2.83578 2.84467 2.8301 2.84961 2.8252C2.85386 2.82098 2.85893 2.81752 2.86328 2.81348C3.04427 2.62581 3.15623 2.37203 3.15625 2.0918C3.15625 1.51478 2.68482 1.04693 2.10352 1.04688Z"],
1222
+ "av_cut": {
1223
+ "paths": [
1224
+ "M2.10547 0C3.26808 0.000110239 4.21094 0.93582 4.21094 2.08984C4.21091 2.47621 4.10321 2.83694 3.91895 3.14746L5.26465 4.4834L9.10254 0.676758C9.30808 0.472809 9.64116 0.472764 9.84668 0.676758C10.0519 0.880718 10.0519 1.2111 9.84668 1.41504L3.91895 7.29785C4.1032 7.60837 4.21094 7.96908 4.21094 8.35547C4.21084 9.50941 3.26802 10.4452 2.10547 10.4453C0.942823 10.4453 9.54067e-05 9.50948 0 8.35547C0 7.20138 0.942764 6.26562 2.10547 6.26562C2.49659 6.26566 2.86193 6.37312 3.17578 6.55762L4.52051 5.22266L3.1748 3.88672C2.86103 4.07113 2.49645 4.17965 2.10547 4.17969C0.942823 4.17969 9.54067e-05 3.24386 0 2.08984C0 0.935752 0.942764 0 2.10547 0ZM6.18945 6.15332C6.39482 5.94938 6.72795 5.94861 6.93359 6.15234L9.84375 9.03613C10.0495 9.23995 10.05 9.57119 9.84473 9.77539C9.63952 9.97945 9.30635 9.97976 9.10059 9.77637L6.18945 6.89258C5.98373 6.68875 5.9841 6.35752 6.18945 6.15332ZM2.10352 7.3125C1.52216 7.3125 1.05078 7.78038 1.05078 8.35742C1.05083 8.93443 1.52219 9.40234 2.10352 9.40234C2.68479 9.40229 3.1562 8.93439 3.15625 8.35742C3.15625 8.07122 3.04038 7.81177 2.85254 7.62305C2.85177 7.62229 2.85037 7.62185 2.84961 7.62109C2.84797 7.61947 2.84634 7.61785 2.84473 7.61621C2.65443 7.42873 2.39275 7.31253 2.10352 7.3125ZM2.10352 1.04688C1.52216 1.04688 1.05078 1.51475 1.05078 2.0918C1.05083 2.6688 1.52219 3.13672 2.10352 3.13672C2.3885 3.13669 2.64637 3.02348 2.83594 2.84082C2.84064 2.83578 2.84467 2.8301 2.84961 2.8252C2.85386 2.82098 2.85893 2.81752 2.86328 2.81348C3.04427 2.62581 3.15623 2.37203 3.15625 2.0918C3.15625 1.51478 2.68482 1.04693 2.10352 1.04688Z"
1225
+ ],
1224
1226
  "height": 11,
1225
1227
  "width": 10
1226
1228
  },
1227
- "shot_replacement":{
1228
- "viewBox": "0 -960 960 960",
1229
- "paths": ["M140-640q38-109 131.5-174.5T480-880q82 0 155.5 35T760-746v-134h80v240H600v-80h76q-39-39-90-59.5T480-800q-81 0-149.5 43T227-640h-87ZM280-80q-33 0-56.5-23.5T200-160v-320q0-33 23.5-56.5T280-560h320q33 0 56.5 23.5T680-480v120l120-120v320L680-280v120q0 33-23.5 56.5T600-80H280Z"],
1229
+ "shot_replacement": {
1230
+ "viewBox": "0 -960 960 960",
1231
+ "paths": [
1232
+ "M140-640q38-109 131.5-174.5T480-880q82 0 155.5 35T760-746v-134h80v240H600v-80h76q-39-39-90-59.5T480-800q-81 0-149.5 43T227-640h-87ZM280-80q-33 0-56.5-23.5T200-160v-320q0-33 23.5-56.5T280-560h320q33 0 56.5 23.5T680-480v120l120-120v320L680-280v120q0 33-23.5 56.5T600-80H280Z"
1233
+ ],
1230
1234
  "height": 960,
1231
1235
  "width": 960
1232
1236
  },
@@ -1863,6 +1867,13 @@
1863
1867
  ],
1864
1868
  "width": 10,
1865
1869
  "height": 10
1870
+ },
1871
+ "sync-time": {
1872
+ "paths": [
1873
+ "M5 10C4.30556 10 3.65509 9.86806 3.04861 9.60417C2.44213 9.34028 1.91435 8.9838 1.46528 8.53472C1.0162 8.08565 0.659722 7.55787 0.395833 6.95139C0.131944 6.34491 0 5.69444 0 5C0 4.30556 0.131944 3.65509 0.395833 3.04861C0.659722 2.44213 1.0162 1.91435 1.46528 1.46528C1.91435 1.0162 2.44213 0.659722 3.04861 0.395833C3.65509 0.131944 4.30556 0 5 0C5.75926 0 6.47917 0.162037 7.15972 0.486111C7.84028 0.810185 8.41667 1.26852 8.88889 1.86111V0.555556H10V3.88889H6.66667V2.77778H8.19444C7.81482 2.25926 7.34722 1.85185 6.79167 1.55556C6.23611 1.25926 5.63889 1.11111 5 1.11111C3.91667 1.11111 2.99769 1.48843 2.24306 2.24306C1.48843 2.99769 1.11111 3.91667 1.11111 5C1.11111 6.08333 1.48843 7.00231 2.24306 7.75694C2.99769 8.51157 3.91667 8.88889 5 8.88889C5.97222 8.88889 6.82176 8.57407 7.54861 7.94444C8.27546 7.31481 8.7037 6.51852 8.83333 5.55556H9.97222C9.83333 6.82407 9.28935 7.88194 8.34028 8.72917C7.3912 9.57639 6.27778 10 5 10ZM6.55556 7.33333L4.44444 5.22222V2.22222H5.55556V4.77778L7.33333 6.55556L6.55556 7.33333Z"
1874
+ ],
1875
+ "width": 10,
1876
+ "height": 10
1866
1877
  }
1867
1878
  }
1868
1879
  }
package/atoms/timeCodeDisplay/timeCodeDisplay.js CHANGED
@@ -12,7 +12,8 @@ var TimeCodeDisplay = function TimeCodeDisplay(_ref) {
12
12
  var timecode = _ref.timecode,
13
13
  selectedTimecodeFormat = _ref.selectedTimecodeFormat,
14
14
  _ref$fps = _ref.fps,
15
- fps = _ref$fps === void 0 ? 25 : _ref$fps;
15
+ fps = _ref$fps === void 0 ? 25 : _ref$fps,
16
+ color = _ref.color;
16
17
  var displayValue = "00:00:00:00";
17
18
  switch (selectedTimecodeFormat) {
18
19
  case "HH:MM:SS":
@@ -28,7 +29,11 @@ var TimeCodeDisplay = function TimeCodeDisplay(_ref) {
28
29
  displayValue = timecode;
29
30
  break;
30
31
  }
31
- return /*#__PURE__*/_react["default"].createElement("span", null, displayValue);
32
+ return /*#__PURE__*/_react["default"].createElement("span", {
33
+ style: {
34
+ color: color
35
+ }
36
+ }, displayValue);
32
37
  };
33
38
  TimeCodeDisplay.propTypes = {
34
39
  timecode: _propTypes["default"].string.isRequired,
package/atoms/timeCodeInput/timeCodeMSInput.js CHANGED
@@ -66,6 +66,7 @@ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
66
66
  _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
67
67
  isValid = _useState4[0],
68
68
  setIsValid = _useState4[1];
69
+ var inputRef = (0, _react.useRef)(null);
69
70
  var onTimePickerChange = function onTimePickerChange(value, e) {
70
71
  var _e$target;
71
72
  var inputTime = value;
@@ -155,6 +156,13 @@ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
155
156
  inputFieldType: inputFieldType,
156
157
  returnValidity: function returnValidity() {
157
158
  return isValid;
159
+ },
160
+ focus: function focus() {
161
+ // Get the actual input element and focus it
162
+ if (inputRef && inputRef.current) {
163
+ var _inputRef$current;
164
+ (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
165
+ }
158
166
  }
159
167
  };
160
168
  });
@@ -192,7 +200,7 @@ var TimeCodeMSInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
192
200
  value: customInputValue,
193
201
  onFocus: onFocus,
194
202
  onBlur: onBlurFn,
195
- ref: ref,
203
+ ref: inputRef,
196
204
  onKeyDown: onKeyDownFn,
197
205
  onChange: function onChange(e) {
198
206
  return onChangeFn(e);
package/atoms/timeCodeInput/timeCodeMainInput.js CHANGED
@@ -66,6 +66,7 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
66
66
  _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
67
67
  isValid = _useState4[0],
68
68
  setIsValid = _useState4[1];
69
+ var inputRef = (0, _react.useRef)(null);
69
70
  var onTimePickerChange = function onTimePickerChange(value, e) {
70
71
  var inputTime = value;
71
72
  var formattedTime = inputTime;
@@ -148,6 +149,13 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
148
149
  inputFieldType: inputFieldType,
149
150
  returnValidity: function returnValidity() {
150
151
  return isValid;
152
+ },
153
+ focus: function focus() {
154
+ // Get the actual input element and focus it
155
+ if (inputRef && inputRef.current) {
156
+ var _inputRef$current;
157
+ (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
158
+ }
151
159
  }
152
160
  };
153
161
  });
@@ -188,9 +196,10 @@ var TimeCodeMainInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
188
196
  height: 7
189
197
  }))), /*#__PURE__*/_react["default"].createElement(StyledInput, {
190
198
  name: inputFieldType,
199
+ id: inputFieldType,
191
200
  theme: theme,
192
201
  width: width,
193
- ref: ref,
202
+ ref: inputRef,
194
203
  value: customInputValue,
195
204
  onFocus: onFocus,
196
205
  onKeyDown: function onKeyDown(e) {
package/atoms/timeCodeInput/timeCodeStandardInput.js CHANGED
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports["default"] = void 0;
9
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
12
11
  var _react = _interopRequireWildcard(require("react"));
@@ -163,6 +162,13 @@ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
163
162
  inputFieldType: inputFieldType,
164
163
  returnValidity: function returnValidity() {
165
164
  return isValid;
165
+ },
166
+ focus: function focus() {
167
+ // Get the actual input element and focus it
168
+ if (inputRef && inputRef.current) {
169
+ var _inputRef$current;
170
+ (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
171
+ }
166
172
  }
167
173
  };
168
174
  });
@@ -193,17 +199,23 @@ var TimeCodeStandardInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
193
199
  name: "cross",
194
200
  width: 7,
195
201
  height: 7
196
- }))), /*#__PURE__*/_react["default"].createElement(StyledInput, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
202
+ }))), /*#__PURE__*/_react["default"].createElement(StyledInput, {
197
203
  name: inputFieldType,
198
204
  theme: theme,
199
205
  width: width,
200
- ref: ref,
206
+ ref: inputRef,
201
207
  value: customInputValue,
202
208
  onFocus: onFocus,
203
- onBlur: onBlurFn
204
- }, "ref", ref), "onKeyDown", onKeyDownFn), "onChange", function onChange(e) {
205
- return onChangeFn(e);
206
- }), "isValid", isValid), "maxLength", "8"), "checkBaiscErrorProp", checkBaiscError || false), "errorStatement", errorStatement || "")), showError && errorStatement.length > 0 && /*#__PURE__*/_react["default"].createElement(ErrorContainer, {
209
+ onBlur: onBlurFn,
210
+ onKeyDown: onKeyDownFn,
211
+ onChange: function onChange(e) {
212
+ return onChangeFn(e);
213
+ },
214
+ isValid: isValid,
215
+ maxLength: "8",
216
+ checkBaiscErrorProp: checkBaiscError || false,
217
+ errorStatement: errorStatement || ""
218
+ }), showError && errorStatement.length > 0 && /*#__PURE__*/_react["default"].createElement(ErrorContainer, {
207
219
  inputFieldType: inputFieldType
208
220
  }, " ", errorStatement));
209
221
  });
package/components.js CHANGED
@@ -257,6 +257,12 @@ Object.defineProperty(exports, "RichTextInput", {
257
257
  return _richTextInput["default"];
258
258
  }
259
259
  });
260
+ Object.defineProperty(exports, "RichTextInputV2", {
261
+ enumerable: true,
262
+ get: function get() {
263
+ return _richTextInputV["default"];
264
+ }
265
+ });
260
266
  Object.defineProperty(exports, "Select", {
261
267
  enumerable: true,
262
268
  get: function get() {
@@ -418,5 +424,6 @@ var _Shimmer = _interopRequireDefault(require("./atoms/loader/ShimmerComponent/S
418
424
  var _timeCodeInput = _interopRequireDefault(require("./atoms/timeCodeInput/timeCodeInput"));
419
425
  var _timeCodeDisplay = _interopRequireDefault(require("./atoms/timeCodeDisplay/timeCodeDisplay"));
420
426
  var _richTextInput = _interopRequireDefault(require("./molecules/richTextInput"));
427
+ var _richTextInputV = _interopRequireDefault(require("./molecules/richTextInputV2"));
421
428
  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); }
422
429
  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; }
package/index.js CHANGED
@@ -255,6 +255,12 @@ Object.defineProperty(exports, "RichTextInput", {
255
255
  return _components.RichTextInput;
256
256
  }
257
257
  });
258
+ Object.defineProperty(exports, "RichTextInputV2", {
259
+ enumerable: true,
260
+ get: function get() {
261
+ return _components.RichTextInputV2;
262
+ }
263
+ });
258
264
  Object.defineProperty(exports, "Select", {
259
265
  enumerable: true,
260
266
  get: function get() {
package/molecules/richTextInput/RichTextInput.js CHANGED
@@ -49,7 +49,7 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
49
49
  setCharCount = _useState4[1];
50
50
  var quillRef = (0, _react.useRef)(null);
51
51
  var quillInstance = (0, _react.useRef)(null);
52
- var clickedKey = (0, _react.useRef)('');
52
+ var clickedKey = (0, _react.useRef)("");
53
53
  (0, _react.useImperativeHandle)(ref, function () {
54
54
  return {
55
55
  getEditorContent: function getEditorContent() {
@@ -57,7 +57,7 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
57
57
  var html = quillInstance.current.root.innerHTML;
58
58
  return changeEmToI(html);
59
59
  }
60
- return '';
60
+ return "";
61
61
  },
62
62
  setEditorContent: function setEditorContent(content) {
63
63
  if (quillInstance.current) {
@@ -74,8 +74,8 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
74
74
  * @returns
75
75
  */
76
76
  var changeEmToI = function changeEmToI(str) {
77
- var updatedStr = str.replace(/\n/g, '').replace(/<br\s*\/?>/gi, '').replace(/<\/?p>/gi, '').replace(/<[/]?em>/g, function (match) {
78
- return match === '<em>' ? '<i>' : '</i>';
77
+ var updatedStr = str.replace(/\n/g, "").replace(/<br\s*\/?>/gi, "").replace(/<\/?p>/gi, "").replace(/<[/]?em>/g, function (match) {
78
+ return match === "<em>" ? "<i>" : "</i>";
79
79
  });
80
80
 
81
81
  // Remove surrounding <p> tags if present
@@ -88,7 +88,7 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
88
88
  (0, _react.useEffect)(function () {
89
89
  if (!(quillInstance !== null && quillInstance !== void 0 && quillInstance.current)) {
90
90
  var quill = new _quill["default"](quillRef.current, {
91
- theme: 'snow',
91
+ theme: "snow",
92
92
  modules: {
93
93
  toolbar: false,
94
94
  keyboard: {
@@ -99,9 +99,9 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
99
99
  // Tab key
100
100
  handler: function handler() {
101
101
  var currentEditor = quillInstance.current.root;
102
- var editors = document.querySelectorAll('.ql-editor');
102
+ var editors = document.querySelectorAll(".ql-editor");
103
103
  var currentIndex = Array.from(editors).indexOf(currentEditor);
104
- if (editType === 'mainEdit' && currentIndex !== -1 && currentIndex < editors.length - 1) {
104
+ if (editType === "mainEdit" && currentIndex !== -1 && currentIndex < editors.length - 1) {
105
105
  editors[currentIndex + 1].focus();
106
106
  }
107
107
  }
@@ -114,9 +114,9 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
114
114
  // Shift key combination
115
115
  handler: function handler() {
116
116
  var currentEditor = quillInstance.current.root;
117
- var editors = document.querySelectorAll('.ql-editor');
117
+ var editors = document.querySelectorAll(".ql-editor");
118
118
  var currentIndex = Array.from(editors).indexOf(currentEditor);
119
- if (editType === 'mainEdit' && currentIndex !== -1 && currentIndex > 0) {
119
+ if (editType === "mainEdit" && currentIndex !== -1 && currentIndex > 0) {
120
120
  editors[currentIndex - 1].focus(); // Move focus to the previous editor
121
121
  }
122
122
  }
@@ -138,9 +138,9 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
138
138
  quillInstance.current.setSelection(length - 1, 0);
139
139
  };
140
140
  var editorRoot = quillInstance.current.root;
141
- editorRoot.addEventListener('focus', handleFocus);
141
+ editorRoot.addEventListener("focus", handleFocus);
142
142
  var updateCharCount = function updateCharCount() {
143
- var text = quillInstance.current.getText().replace(/\n/g, '');
143
+ var text = quillInstance.current.getText().replace(/\n/g, "");
144
144
  var characterCount = text.length;
145
145
  setCharCount(characterCount);
146
146
  var selection = quillInstance.current.getSelection();
@@ -150,13 +150,13 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
150
150
  var startDeleteIndex = selection.index - excessCharacters;
151
151
  var safeDeleteIndex = Math.max(0, startDeleteIndex);
152
152
  quillInstance.current.deleteText(safeDeleteIndex, excessCharacters);
153
- text = quillInstance.current.getText().replace(/\n/g, '');
153
+ text = quillInstance.current.getText().replace(/\n/g, "");
154
154
  characterCount = text.length;
155
155
  }
156
156
  setCharCount(characterCount);
157
157
  var html = quillInstance.current.getSemanticHTML();
158
158
  html = changeEmToI((0, _utils.cleanHtml)(html));
159
- if (onChange && clickedKey.current !== 'enter') {
159
+ if (onChange && clickedKey.current !== "enter") {
160
160
  onChange({
161
161
  target: {
162
162
  value: html,
@@ -166,13 +166,13 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
166
166
  }
167
167
  }
168
168
  };
169
- quillInstance.current.on('text-change', updateCharCount);
169
+ quillInstance.current.on("text-change", updateCharCount);
170
170
  var editorContainer = quillInstance.current.root;
171
- editorContainer.classList.add('quill-editor-content');
171
+ editorContainer.classList.add("quill-editor-content");
172
172
  return function () {
173
- quillInstance.current.off('text-change', updateCharCount);
174
- quillRef.current.innerHTML = '';
175
- editorRoot.removeEventListener('focus', handleFocus);
173
+ quillInstance.current.off("text-change", updateCharCount);
174
+ quillRef.current.innerHTML = "";
175
+ editorRoot.removeEventListener("focus", handleFocus);
176
176
  };
177
177
  }, []);
178
178
 
@@ -188,21 +188,21 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
188
188
  handleSave(html);
189
189
  }, 0);
190
190
  var handleKeyDown = function handleKeyDown(event) {
191
- if (event.key === 'Enter') {
191
+ if (event.key === "Enter") {
192
192
  event.preventDefault();
193
193
  var html = quillInstance.current.getSemanticHTML();
194
194
  html = changeEmToI(html);
195
- clickedKey.current = 'enter';
195
+ clickedKey.current = "enter";
196
196
  debouncedHandleSave(html);
197
- } else if (event.key === 'Backspace' || event.key === 'Delete') {
198
- clickedKey.current = 'backspace';
197
+ } else if (event.key === "Backspace" || event.key === "Delete") {
198
+ clickedKey.current = "backspace";
199
199
  } else {
200
- clickedKey.current = '';
200
+ clickedKey.current = "";
201
201
  }
202
202
  };
203
- editorContainer.addEventListener('keydown', handleKeyDown);
203
+ editorContainer.addEventListener("keydown", handleKeyDown);
204
204
  return function () {
205
- editorContainer.removeEventListener('keydown', handleKeyDown);
205
+ editorContainer.removeEventListener("keydown", handleKeyDown);
206
206
  debouncedHandleSave.cancel(); // Clean up debounce
207
207
  };
208
208
  }
@@ -215,22 +215,22 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
215
215
  if (value && currentContent !== value) {
216
216
  var selection = quillInstance.current.getSelection(); // Capture cursor position
217
217
 
218
- var content = changeEmToI(value) || '';
218
+ var content = changeEmToI(value) || "";
219
219
  quillInstance.current.clipboard.dangerouslyPasteHTML(content); // Insert HTML content in Quill editor
220
220
  var textLength = quillInstance.current.getLength();
221
221
  if (selection && selection.index !== 0) {
222
222
  quillInstance.current.setSelection(selection.index, selection.length); // Restore previous cursor position
223
- } else if (selection && selection.index === 0 && clickedKey.current === 'backspace') {
223
+ } else if (selection && selection.index === 0 && clickedKey.current === "backspace") {
224
224
  quillInstance.current.setSelection(0, 0); // Keep cursor at start when pressing backspace
225
225
  } else {
226
226
  quillInstance.current.setSelection(charCount || textLength - 1, (selection === null || selection === void 0 ? void 0 : selection.length) || 0); // Move cursor right for other cases
227
227
 
228
- if (editType === 'mainEdit' && !selection) {
228
+ if (editType === "mainEdit" && !selection) {
229
229
  quillInstance.current.blur();
230
230
  // Select the first video element
231
- var videoElement = document.getElementsByTagName('video')[0];
231
+ var videoElement = document.getElementsByTagName("video")[0];
232
232
  // Add a tabindex attribute to make it focusable
233
- videoElement.setAttribute('tabindex', '0');
233
+ videoElement.setAttribute("tabindex", "0");
234
234
  videoElement.focus();
235
235
  }
236
236
  }
@@ -254,14 +254,14 @@ var RichTextInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
254
254
  value: value,
255
255
  defaultValue: defaultValue
256
256
  }, props, {
257
- maxLength: maxLength || '',
257
+ maxLength: maxLength || "",
258
258
  showLengthCount: showLengthCount || false
259
259
  }), /*#__PURE__*/_react["default"].createElement("div", {
260
260
  ref: quillRef
261
261
  })), label && /*#__PURE__*/_react["default"].createElement("label", {
262
262
  htmlFor: props.id,
263
- className: charCount || focus ? 'floaton' : ''
264
- }, "".concat(label).concat(props.required ? '*' : '')), errorMessage && /*#__PURE__*/_react["default"].createElement(RichTextInputError, {
263
+ className: charCount || focus ? "floaton" : ""
264
+ }, "".concat(label).concat(props.required ? "*" : "")), errorMessage && /*#__PURE__*/_react["default"].createElement(RichTextInputError, {
265
265
  value: value,
266
266
  theme: props.theme,
267
267
  error: props.error
@@ -277,39 +277,39 @@ var returnPadding = function returnPadding(props) {
277
277
  var digitCount = props.maxLength.toString().length;
278
278
  switch (digitCount) {
279
279
  case 0:
280
- return '7px 0px 2px 0px';
280
+ return "7px 0px 2px 0px";
281
281
  case 1:
282
- return '7px 40px 2px 0px';
282
+ return "7px 40px 2px 0px";
283
283
  case 2:
284
- return '7px 60px 2px 0px';
284
+ return "7px 60px 2px 0px";
285
285
  case 3:
286
- return '7px 75px 2px 0px';
286
+ return "7px 75px 2px 0px";
287
287
  case 4:
288
- return '7px 90px 2px 0px';
288
+ return "7px 90px 2px 0px";
289
289
  case 5:
290
- return '7px 110px 2px 0px';
290
+ return "7px 110px 2px 0px";
291
291
  default:
292
- return '7px 0px 2px 0px';
292
+ return "7px 0px 2px 0px";
293
293
  }
294
294
  };
295
295
  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) {
296
- return props.theme === 'light' ? _tokens.colors.light.inputCommon.border : _tokens.colors.dark.inputCommon.border;
296
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.border : _tokens.colors.dark.inputCommon.border;
297
297
  }, function (props) {
298
- return props.theme === 'light' ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
298
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
299
299
  }, function (props) {
300
- return returnPadding(props || '');
300
+ return returnPadding(props || "");
301
301
  }, function (props) {
302
- return props.theme === 'light' ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
302
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
303
303
  }, function (props) {
304
- return props.theme === 'light' ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
304
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
305
305
  }, function (props) {
306
- return props.theme === 'light' ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
306
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
307
307
  }, function (props) {
308
- return props.label ? '0' : '1';
308
+ return props.label ? "0" : "1";
309
309
  }, function (props) {
310
- return props.theme === 'light' ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
310
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
311
311
  }, function (props) {
312
- return props.label ? '1' : '1';
312
+ return props.label ? "1" : "1";
313
313
  });
314
314
  RichTextInput.propTypes = {
315
315
  masked: _propTypes["default"].bool,
@@ -343,18 +343,18 @@ RichTextInput.propTypes = {
343
343
  simpleEdit: _propTypes["default"].bool,
344
344
  required: _propTypes["default"].bool,
345
345
  autoFocus: _propTypes["default"].bool,
346
- theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
347
- fieldType: _propTypes["default"].oneOf(['inputField', 'textArea'])
346
+ theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
347
+ fieldType: _propTypes["default"].oneOf(["inputField", "textArea"])
348
348
  };
349
349
  RichTextInput.defaultProps = {
350
350
  autoFocus: false,
351
- fieldType: 'textArea',
351
+ fieldType: "textArea",
352
352
  readOnly: false,
353
353
  code: false,
354
354
  error: null,
355
355
  onChange: null,
356
- type: 'text',
357
- theme: 'light',
356
+ type: "text",
357
+ theme: "light",
358
358
  showLengthCount: false,
359
359
  simpleEdit: false
360
360
  };
package/molecules/richTextInputV2/RichTextInput.storyV2.js ADDED
@@ -0,0 +1,197 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _react = _interopRequireDefault(require("react"));
5
+ var _react2 = require("@storybook/react");
6
+ var _storyHelpers = require("../../_helpers/story-helpers");
7
+ var _components = require("../../components");
8
+ var _this = void 0;
9
+ (0, _react2.storiesOf)("RichTextInput").add("light theme", function () {
10
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
11
+ title: "Appearances"
12
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
13
+ type: "text",
14
+ label: "First Name",
15
+ onKeyPress: function onKeyPress(e) {
16
+ return _this.value = e.target.value;
17
+ },
18
+ onChange: function onChange(e) {
19
+ return console.log(e.target.value);
20
+ },
21
+ placeholder: "Enter Name max 10",
22
+ value: "asd",
23
+ required: true
24
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
25
+ type: "password",
26
+ label: "Middle Name",
27
+ minLength: 3,
28
+ maxLength: 6,
29
+ placeholder: "Show as password",
30
+ required: true
31
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
32
+ type: "text",
33
+ value: "hello",
34
+ label: "Label and default value",
35
+ required: true
36
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
37
+ type: "number",
38
+ placeholder: "number field & no Label",
39
+ required: true,
40
+ maxLength: 10
41
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
42
+ type: "number",
43
+ id: "input-text-1",
44
+ label: "Label 'For'-'id' prop",
45
+ placeholder: "No Label & Number Field",
46
+ required: true,
47
+ maxLength: 10
48
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
49
+ type: "text",
50
+ value: "No Label and default value",
51
+ onChange: function onChange(e) {
52
+ alert("some Handler code");
53
+ },
54
+ placeholder: "Placeholder text",
55
+ required: true
56
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
57
+ type: "number",
58
+ label: "number & max 5",
59
+ placeholder: "max length 5",
60
+ required: true,
61
+ minLength: 3,
62
+ maxLength: 5
63
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
64
+ type: "text",
65
+ error: "Invalid text",
66
+ placeholder: "Display error",
67
+ required: true
68
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
69
+ readOnly: true,
70
+ type: "text",
71
+ value: "hello",
72
+ onChange: function onChange(e) {
73
+ alert("some Handler code");
74
+ },
75
+ placeholder: "Placeholder text",
76
+ required: true
77
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
78
+ type: "password",
79
+ value: "this@is$passw0rd",
80
+ placeholder: "This is password toggle",
81
+ passwordButton: true
82
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
83
+ label: "Label 'For'-'id' prop",
84
+ type: "password",
85
+ value: "this@is$passw0rd",
86
+ placeholder: "This is password toggle",
87
+ passwordButton: true
88
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
89
+ label: "Label 'For'-'id' ",
90
+ error: " this is error",
91
+ type: "password",
92
+ value: "this@is$passw0rd",
93
+ placeholder: "This is password toggle",
94
+ passwordButton: true
95
+ })));
96
+ });
97
+ (0, _react2.storiesOf)("RichTextInput").add("dark theme", function () {
98
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
99
+ title: "Appearances",
100
+ background: "dark"
101
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
102
+ theme: "dark",
103
+ type: "text",
104
+ label: "First Name",
105
+ showLengthCount: true,
106
+ value: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m",
107
+ maxLength: 100,
108
+ onChange: function onChange(e) {
109
+ return console.log(e.target.value);
110
+ },
111
+ placeholder: "Enter Name max 10",
112
+ required: true
113
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
114
+ theme: "dark",
115
+ type: "password",
116
+ label: "Middle Name",
117
+ minLength: 3,
118
+ maxLength: 6,
119
+ placeholder: "Show as password",
120
+ required: true
121
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
122
+ theme: "dark",
123
+ type: "text",
124
+ value: "hello there i am using",
125
+ label: "Label and default value",
126
+ required: true
127
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
128
+ theme: "dark",
129
+ type: "number",
130
+ placeholder: "number field & no Label",
131
+ required: true,
132
+ maxLength: 10
133
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
134
+ theme: "dark",
135
+ type: "number",
136
+ id: "input-text-1",
137
+ label: "Label 'For'-'id' prop",
138
+ placeholder: "No Label & Number Field",
139
+ required: true,
140
+ maxLength: 10
141
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
142
+ theme: "dark",
143
+ capitalizeFirstLetter: true,
144
+ type: "text",
145
+ value: "no label and default value",
146
+ onChange: function onChange(e) {
147
+ alert("some Handler code");
148
+ },
149
+ placeholder: "Placeholder text",
150
+ required: true
151
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
152
+ theme: "dark",
153
+ type: "number",
154
+ label: "number & max 5",
155
+ placeholder: "max length 5",
156
+ required: true,
157
+ minLength: 3,
158
+ maxLength: 5
159
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
160
+ theme: "dark",
161
+ type: "text",
162
+ error: "Invalid text",
163
+ placeholder: "Display error",
164
+ required: true
165
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
166
+ theme: "dark",
167
+ readOnly: true,
168
+ type: "text",
169
+ value: "hello",
170
+ onChange: function onChange(e) {
171
+ alert("some Handler code");
172
+ },
173
+ placeholder: "Placeholder text",
174
+ required: true
175
+ })), /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement(RichTextInput, {
176
+ theme: "dark",
177
+ type: "password",
178
+ value: "this@is$passw0rd",
179
+ placeholder: "This is password toggle",
180
+ passwordButton: true
181
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
182
+ theme: "dark",
183
+ label: "Label 'For'-'id' prop",
184
+ type: "password",
185
+ value: "this@is$passw0rd",
186
+ placeholder: "This is password toggle",
187
+ passwordButton: true
188
+ }), /*#__PURE__*/_react["default"].createElement(RichTextInput, {
189
+ theme: "dark",
190
+ label: "Label 'For'-'id' ",
191
+ error: " this is error",
192
+ type: "password",
193
+ value: "this@is$passw0rd",
194
+ placeholder: "This is password toggle",
195
+ passwordButton: true
196
+ })));
197
+ });
package/molecules/richTextInputV2/RichTextInputV2.js ADDED
@@ -0,0 +1,369 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
+ var _react = _interopRequireWildcard(require("react"));
14
+ var _quill = _interopRequireDefault(require("quill"));
15
+ var _propTypes = _interopRequireDefault(require("prop-types"));
16
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
17
+ var _tokens = require("@desynova-digital/tokens");
18
+ var _lodash = require("lodash");
19
+ var _quillDelta = _interopRequireDefault(require("quill-delta"));
20
+ var _utils = require("../../_helpers/utils");
21
+ var _excluded = ["maxLength", "defaultValue", "label", "showLengthCount", "errorMessage", "value", "autoFocus", "onChange", "handleSave", "editType", "hideBorder", "type", "onBlur", "placeholder", "isUpdateCase", "isDisabled"];
22
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
23
+ 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); }
24
+ 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; }
25
+ 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) {
26
+ return props.sleek === "sleek" ? "100%" : "92%";
27
+ }, function (props) {
28
+ return props.sleek === "sleek" ? "" : "10px";
29
+ }, function (props) {
30
+ return props.sleek === "sleek" ? "" : "10px";
31
+ });
32
+ var CountWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: #303f51;\n border-radius: 12px;\n font-size: 12px;\n padding: 5px 10px;\n color: #ffffff;\n"])));
33
+ var RichTextInputError = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n"])), function (props) {
34
+ return _tokens.colors[props.theme].inputError.color;
35
+ });
36
+ var RichTextInputV2 = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
37
+ var maxLength = _ref.maxLength,
38
+ defaultValue = _ref.defaultValue,
39
+ label = _ref.label,
40
+ showLengthCount = _ref.showLengthCount,
41
+ errorMessage = _ref.errorMessage,
42
+ value = _ref.value,
43
+ autoFocus = _ref.autoFocus,
44
+ onChange = _ref.onChange,
45
+ handleSave = _ref.handleSave,
46
+ editType = _ref.editType,
47
+ hideBorder = _ref.hideBorder,
48
+ type = _ref.type,
49
+ onBlur = _ref.onBlur,
50
+ placeholder = _ref.placeholder,
51
+ isUpdateCase = _ref.isUpdateCase,
52
+ isDisabled = _ref.isDisabled,
53
+ props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
54
+ var _useState = (0, _react.useState)(false),
55
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
56
+ focus = _useState2[0],
57
+ setFocus = _useState2[1];
58
+ var _useState3 = (0, _react.useState)(0),
59
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
60
+ charCount = _useState4[0],
61
+ setCharCount = _useState4[1];
62
+ var quillRef = (0, _react.useRef)(null);
63
+ var quillInstance = (0, _react.useRef)(null);
64
+ var clickedKey = (0, _react.useRef)("");
65
+ var handleFocus = function handleFocus() {
66
+ if (quillInstance.current) {
67
+ var length = quillInstance.current.getLength();
68
+ quillInstance.current.setSelection(length - 1, 0);
69
+ }
70
+ };
71
+ var onBlurEvent = function onBlurEvent() {
72
+ if (quillInstance.current) {
73
+ quillInstance.current.blur();
74
+ }
75
+ };
76
+ (0, _react.useImperativeHandle)(ref, function () {
77
+ return {
78
+ getEditorContent: function getEditorContent() {
79
+ if (quillInstance.current) {
80
+ var html = quillInstance.current.root.innerHTML;
81
+ return changeEmToI(html);
82
+ }
83
+ return "";
84
+ },
85
+ setEditorContent: function setEditorContent(content) {
86
+ if (quillInstance.current) {
87
+ var delta = quillInstance.current.clipboard.convert(content); // Convert HTML to Quill's Delta format
88
+ quillInstance.current.setContents(delta); // Set the content in Quill editor
89
+ }
90
+ },
91
+ handleFocus: handleFocus,
92
+ onBlurEvent: onBlurEvent
93
+ };
94
+ });
95
+
96
+ /**
97
+ *
98
+ * @param {*} str
99
+ * @returns
100
+ */
101
+ var changeEmToI = function changeEmToI(str) {
102
+ var updatedStr = str.replace(/\n/g, "").replace(/<br\s*\/?>/gi, "").replace(/<\/?p>/gi, "").replace(/<[/]?em>/g, function (match) {
103
+ return match === "<em>" ? "<i>" : "</i>";
104
+ });
105
+
106
+ // Remove surrounding <p> tags if present
107
+ var regex = /^<p(?:[^>]*?)>(.*?)<\/p>$/;
108
+ var match = updatedStr.match(regex);
109
+ return match ? match[1] : updatedStr;
110
+ };
111
+
112
+ // Initialize quill
113
+ (0, _react.useEffect)(function () {
114
+ if (!(quillInstance !== null && quillInstance !== void 0 && quillInstance.current)) {
115
+ var quill = new _quill["default"](quillRef.current, {
116
+ theme: "snow",
117
+ placeholder: placeholder,
118
+ modules: {
119
+ toolbar: false,
120
+ readOnly: isDisabled,
121
+ keyboard: {
122
+ bindings: {
123
+ // This will overwrite the default binding for Tab
124
+ tab: {
125
+ key: 9,
126
+ // Tab key
127
+ handler: function handler() {
128
+ var currentEditor = quillInstance.current.root;
129
+ var editors = document.querySelectorAll(".ql-editor");
130
+ var currentIndex = Array.from(editors).indexOf(currentEditor);
131
+ if (editType === "mainEdit" && currentIndex !== -1 && currentIndex < editors.length - 1) {
132
+ editors[currentIndex + 1].focus();
133
+ }
134
+ }
135
+ },
136
+ // This will handle Shift + Tab
137
+ shiftTab: {
138
+ key: 9,
139
+ // Tab key
140
+ shiftKey: true,
141
+ // Shift key combination
142
+ handler: function handler() {
143
+ var currentEditor = quillInstance.current.root;
144
+ var editors = document.querySelectorAll(".ql-editor");
145
+ var currentIndex = Array.from(editors).indexOf(currentEditor);
146
+ if (editType === "mainEdit" && currentIndex !== -1 && currentIndex > 0) {
147
+ editors[currentIndex - 1].focus(); // Move focus to the previous editor
148
+ }
149
+ }
150
+ }
151
+ }
152
+ }
153
+ }
154
+ });
155
+
156
+ // Ensure plain text is pasted instead of formatted content
157
+ quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
158
+ var plainText = node.innerText || node.textContent; // Extract plain text
159
+ return new _quillDelta["default"]().insert(plainText); // Insert plain text without formatting
160
+ });
161
+ quillInstance.current = quill;
162
+ if (quill.root) {
163
+ quill.root.setAttribute("data-placeholder", placeholder);
164
+ }
165
+ }
166
+ var editorRoot = quillInstance.current.root;
167
+ var updateCharCount = function updateCharCount() {
168
+ var text = quillInstance.current.getText().replace(/\n/g, "");
169
+ var characterCount = text.length;
170
+ setCharCount(characterCount);
171
+ var selection = quillInstance.current.getSelection(false);
172
+ if (selection) {
173
+ if (maxLength && characterCount > maxLength) {
174
+ var excessCharacters = characterCount - maxLength;
175
+ var startDeleteIndex = selection.index - excessCharacters;
176
+ var safeDeleteIndex = Math.max(0, startDeleteIndex);
177
+ quillInstance.current.deleteText(safeDeleteIndex, excessCharacters);
178
+ text = quillInstance.current.getText().replace(/\n/g, "");
179
+ characterCount = text.length;
180
+ }
181
+ setCharCount(characterCount);
182
+ var html = quillInstance.current.getSemanticHTML();
183
+ html = changeEmToI((0, _utils.cleanHtml)(html));
184
+ if (onChange && clickedKey.current !== "enter") {
185
+ onChange({
186
+ target: {
187
+ value: html,
188
+ count: characterCount
189
+ }
190
+ });
191
+ }
192
+ }
193
+ };
194
+ quillInstance.current.on("text-change", updateCharCount);
195
+ var editorContainer = quillInstance.current.root;
196
+ editorContainer.classList.add("quill-editor-content");
197
+ return function () {
198
+ quillInstance.current.off("text-change", updateCharCount);
199
+ quillRef.current.innerHTML = "";
200
+ };
201
+ }, []);
202
+ (0, _react.useEffect)(function () {
203
+ if (quillInstance.current) {
204
+ var editorContainer = quillInstance.current.root;
205
+ var debouncedHandleSave = (0, _lodash.debounce)(function (html) {
206
+ handleSave(html);
207
+ }, 0);
208
+ var handleKeyDown = function handleKeyDown(event) {
209
+ if (event.key === "Enter" && !event.altKey) {
210
+ event.preventDefault();
211
+ event.stopPropagation();
212
+ var html = quillInstance.current.getSemanticHTML();
213
+ html = changeEmToI(html);
214
+ clickedKey.current = "enter";
215
+ debouncedHandleSave(html);
216
+ } else if (event.key === "Backspace" || event.key === "Delete") {
217
+ clickedKey.current = "backspace";
218
+ } else {
219
+ clickedKey.current = "";
220
+ }
221
+ };
222
+ editorContainer.addEventListener("keydown", handleKeyDown);
223
+ return function () {
224
+ editorContainer.removeEventListener("keydown", handleKeyDown);
225
+ debouncedHandleSave.cancel(); // Clean up debounce
226
+ };
227
+ }
228
+ }, [quillInstance.current]);
229
+ (0, _react.useEffect)(function () {
230
+ if (quillInstance.current && value !== quillInstance.current.root.innerHTML) {
231
+ var currentContent = changeEmToI((0, _utils.cleanHtml)(quillInstance.current.root.innerHTML));
232
+ if (value && currentContent !== value) {
233
+ var selection = quillInstance.current.getSelection(false);
234
+ var wasFocused = !!selection;
235
+ var content = changeEmToI(value) || "";
236
+ quillInstance.current.clipboard.dangerouslyPasteHTML(content);
237
+ var textLength = quillInstance.current.getLength();
238
+ if (wasFocused) {
239
+ if (selection && selection.index !== 0) {
240
+ quillInstance.current.setSelection(selection.index, selection.length);
241
+ } else if (selection && selection.index === 0 && clickedKey.current === "backspace") {
242
+ quillInstance.current.setSelection(0, 0);
243
+ } else {
244
+ quillInstance.current.setSelection(charCount || textLength - 1, (selection === null || selection === void 0 ? void 0 : selection.length) || 0);
245
+ }
246
+ } else if (isUpdateCase) {
247
+ quillInstance.current.blur();
248
+ }
249
+ }
250
+ }
251
+ }, [value, isUpdateCase]);
252
+ return /*#__PURE__*/_react["default"].createElement(RichTextInputDiv, {
253
+ theme: props.theme,
254
+ sleek: type,
255
+ hideBorder: hideBorder,
256
+ inputWidth: props.inputWidth
257
+ }, /*#__PURE__*/_react["default"].createElement(RichTextEditorContainer, (0, _extends2["default"])({
258
+ type: "text",
259
+ value: value,
260
+ defaultValue: defaultValue
261
+ }, props, {
262
+ maxLength: maxLength || "",
263
+ showLengthCount: showLengthCount || false
264
+ }), /*#__PURE__*/_react["default"].createElement("div", {
265
+ ref: quillRef
266
+ })), label && /*#__PURE__*/_react["default"].createElement("label", {
267
+ htmlFor: props.id,
268
+ className: charCount || focus ? "floaton" : ""
269
+ }, "".concat(label).concat(props.required ? "*" : "")), errorMessage && /*#__PURE__*/_react["default"].createElement(RichTextInputError, {
270
+ value: value,
271
+ theme: props.theme,
272
+ error: props.error
273
+ }, errorMessage), maxLength && showLengthCount && quillInstance.current && /*#__PURE__*/_react["default"].createElement(CountWrapper, null, charCount, "/", maxLength));
274
+ });
275
+
276
+ /**
277
+ *
278
+ * @param {*} props
279
+ * @returns
280
+ */
281
+ var returnPadding = function returnPadding(props) {
282
+ if (props.sleek = "sleek") {
283
+ return "0px 0px 4px 0px";
284
+ }
285
+ var digitCount = props.maxLength.toString().length;
286
+ switch (digitCount) {
287
+ case 0:
288
+ return "7px 0px 2px 0px";
289
+ case 1:
290
+ return "7px 40px 2px 0px";
291
+ case 2:
292
+ return "7px 60px 2px 0px";
293
+ case 3:
294
+ return "7px 75px 2px 0px";
295
+ case 4:
296
+ return "7px 90px 2px 0px";
297
+ case 5:
298
+ return "7px 110px 2px 0px";
299
+ default:
300
+ return "7px 0px 2px 0px";
301
+ }
302
+ };
303
+ 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) {
304
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
305
+ }, function (props) {
306
+ return !props.hideBorder ? props.theme === "light" ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color : "none";
307
+ }, function (props) {
308
+ return returnPadding(props || "");
309
+ }, function (props) {
310
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
311
+ }, function (props) {
312
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.borderHover : _tokens.colors.dark.inputCommon.borderHover;
313
+ }, function (props) {
314
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
315
+ }, function (props) {
316
+ return props.label ? "0" : "1";
317
+ }, function (props) {
318
+ return props.theme === "light" ? _tokens.colors.light.inputCommon.placeholder : _tokens.colors.dark.inputCommon.placeholder;
319
+ }, function (props) {
320
+ return props.label ? "1" : "1";
321
+ });
322
+ RichTextInputV2.propTypes = {
323
+ masked: _propTypes["default"].bool,
324
+ /** Make input readOnly if it does not validate constraint */
325
+ readOnly: _propTypes["default"].bool,
326
+ /** Use when the expected input is code */
327
+ code: _propTypes["default"].bool,
328
+ /** Pass hasError to show error state */
329
+ hasError: _propTypes["default"].bool,
330
+ /** Pass error string directly to show error state */
331
+ error: _propTypes["default"].string,
332
+ /** onChange transparently passed to the input */
333
+ onChange: _propTypes["default"].func,
334
+ onKeyDownFn: _propTypes["default"].func,
335
+ handleSave: _propTypes["default"].func,
336
+ /** Text to display when the input is empty */
337
+ placeholder: _propTypes["default"].string,
338
+ /** The default value for the field */
339
+ defaultValue: _propTypes["default"].string,
340
+ /** The (HTML) type for the input. */
341
+ type: _propTypes["default"].string,
342
+ value: _propTypes["default"].string,
343
+ /** The (HTML) maxLength for the input. */
344
+ maxLength: _propTypes["default"].number,
345
+ inputWidth: _propTypes["default"].number,
346
+ showLengthCount: _propTypes["default"].bool,
347
+ label: _propTypes["default"].string,
348
+ errorMessage: _propTypes["default"].string,
349
+ editType: _propTypes["default"].string,
350
+ id: _propTypes["default"].string,
351
+ simpleEdit: _propTypes["default"].bool,
352
+ required: _propTypes["default"].bool,
353
+ autoFocus: _propTypes["default"].bool,
354
+ theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
355
+ fieldType: _propTypes["default"].oneOf(["inputField", "textArea"])
356
+ };
357
+ RichTextInputV2.defaultProps = {
358
+ autoFocus: false,
359
+ fieldType: "textArea",
360
+ readOnly: false,
361
+ code: false,
362
+ error: null,
363
+ onChange: null,
364
+ type: "text",
365
+ theme: "light",
366
+ showLengthCount: false,
367
+ simpleEdit: false
368
+ };
369
+ var _default = exports["default"] = RichTextInputV2;
package/molecules/richTextInputV2/index.js ADDED
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _RichTextInputV = _interopRequireDefault(require("./RichTextInputV2"));
9
+ var _default = exports["default"] = _RichTextInputV["default"];
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.1.51",
3
+ "version": "9.1.52",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "9.1.51",
10
+ "@desynova-digital/tokens": "9.1.52",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },