@monolith-forensics/monolith-ui 1.8.1-dev.2 → 1.8.1-dev.3

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 (102) hide show
  1. package/dist/Calendar/Calendar.d.ts +4 -1
  2. package/dist/Calendar/Calendar.js +126 -50
  3. package/dist/Calendar/CalendarStyles.d.ts +3 -2
  4. package/dist/Calendar/CalendarStyles.js +62 -23
  5. package/dist/Calendar/calendarHelpers.d.ts +1 -1
  6. package/dist/CheckBox/CheckBox.js +35 -4
  7. package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts +41 -0
  8. package/dist/DateTimeRangePicker/DateTimeRangePicker.js +363 -0
  9. package/dist/DateTimeRangePicker/index.d.ts +2 -0
  10. package/dist/DateTimeRangePicker/index.js +2 -0
  11. package/dist/DropDownMenu/DropDownMenu.js +25 -15
  12. package/dist/DropDownMenu/components/MenuComponent.js +6 -1
  13. package/dist/DropDownMenu/components/MenuItem.js +6 -0
  14. package/dist/DropDownMenu/components/MenuItemList.d.ts +2 -0
  15. package/dist/DropDownMenu/components/MenuItemList.js +94 -13
  16. package/dist/DropDownMenu/components/StyledContent.js +1 -2
  17. package/dist/DropDownMenu/types.d.ts +1 -0
  18. package/dist/FileViewer/viewers/ImageViewer.js +75 -18
  19. package/dist/MonolithUIProvider/MonolithUIProvider.d.ts +1 -0
  20. package/dist/QueryFilter/DefaultOperators.d.ts +1 -76
  21. package/dist/QueryFilter/DefaultOperators.js +1 -21
  22. package/dist/QueryFilter/QueryFilter.constants.d.ts +134 -0
  23. package/dist/QueryFilter/QueryFilter.constants.js +39 -0
  24. package/dist/QueryFilter/QueryFilter.d.ts +1 -1
  25. package/dist/QueryFilter/QueryFilter.js +3 -303
  26. package/dist/QueryFilter/QueryFilter.lib.d.ts +14 -0
  27. package/dist/QueryFilter/QueryFilter.lib.js +84 -0
  28. package/dist/QueryFilter/QueryFilter.styled.d.ts +89 -0
  29. package/dist/QueryFilter/QueryFilter.styled.js +184 -0
  30. package/dist/QueryFilter/QueryFilter.types.d.ts +61 -0
  31. package/dist/QueryFilter/QueryFilter.types.js +1 -0
  32. package/dist/QueryFilter/components/MultiSelectEditor.d.ts +7 -0
  33. package/dist/QueryFilter/components/MultiSelectEditor.js +44 -0
  34. package/dist/QueryFilter/components/RuleChip.d.ts +8 -0
  35. package/dist/QueryFilter/components/RuleChip.js +37 -0
  36. package/dist/QueryFilter/components/Rules.d.ts +11 -0
  37. package/dist/QueryFilter/components/Rules.js +41 -0
  38. package/dist/QueryFilter/components/UnavailableRuleChip.d.ts +5 -0
  39. package/dist/QueryFilter/components/UnavailableRuleChip.js +7 -0
  40. package/dist/QueryFilter/components/ValueEditor.d.ts +7 -0
  41. package/dist/QueryFilter/components/ValueEditor.js +45 -0
  42. package/dist/QueryFilter/components/ValueSelector.d.ts +7 -0
  43. package/dist/QueryFilter/components/ValueSelector.js +34 -0
  44. package/dist/QueryFilter/components/index.d.ts +6 -0
  45. package/dist/QueryFilter/components/index.js +6 -0
  46. package/dist/QueryFilter/index.d.ts +3 -2
  47. package/dist/QueryFilter/index.js +3 -2
  48. package/dist/QueryFilter/types.d.ts +1 -52
  49. package/dist/QueryFilter/types.js +1 -1
  50. package/dist/QueryFilter/useQueryFilter.d.ts +1 -1
  51. package/dist/QueryFilter/useQueryFilter.js +23 -19
  52. package/dist/RichTextEditor/Extensions/getTiptapExtensions.js +5 -15
  53. package/dist/RichTextEditor/Plugins/ImageActionsPlugin.d.ts +3 -0
  54. package/dist/RichTextEditor/Plugins/ImageActionsPlugin.js +241 -0
  55. package/dist/RichTextEditor/Plugins/UploadImagesPlugin.d.ts +15 -0
  56. package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js +115 -51
  57. package/dist/RichTextEditor/Plugins/index.d.ts +1 -0
  58. package/dist/RichTextEditor/Plugins/index.js +1 -0
  59. package/dist/RichTextEditor/RichTextEditor.d.ts +3 -2
  60. package/dist/RichTextEditor/RichTextEditor.js +302 -35
  61. package/dist/SuperDatePicker/SuperDatePicker.constants.d.ts +24 -0
  62. package/dist/SuperDatePicker/SuperDatePicker.constants.js +30 -0
  63. package/dist/SuperDatePicker/SuperDatePicker.d.ts +3 -0
  64. package/dist/SuperDatePicker/SuperDatePicker.js +31 -0
  65. package/dist/SuperDatePicker/SuperDatePicker.lib.d.ts +17 -0
  66. package/dist/SuperDatePicker/SuperDatePicker.lib.js +206 -0
  67. package/dist/SuperDatePicker/SuperDatePicker.styled.d.ts +60 -0
  68. package/dist/SuperDatePicker/SuperDatePicker.styled.js +256 -0
  69. package/dist/SuperDatePicker/SuperDatePicker.types.d.ts +48 -0
  70. package/dist/SuperDatePicker/SuperDatePicker.types.js +1 -0
  71. package/dist/SuperDatePicker/components/CommonPresetGroups.d.ts +7 -0
  72. package/dist/SuperDatePicker/components/CommonPresetGroups.js +6 -0
  73. package/dist/SuperDatePicker/components/EndpointCalendarDropdown.d.ts +10 -0
  74. package/dist/SuperDatePicker/components/EndpointCalendarDropdown.js +9 -0
  75. package/dist/SuperDatePicker/components/EndpointDateInput.d.ts +16 -0
  76. package/dist/SuperDatePicker/components/EndpointDateInput.js +26 -0
  77. package/dist/SuperDatePicker/components/EndpointPopover.d.ts +18 -0
  78. package/dist/SuperDatePicker/components/EndpointPopover.js +11 -0
  79. package/dist/SuperDatePicker/components/QuickRangeDropdown.d.ts +14 -0
  80. package/dist/SuperDatePicker/components/QuickRangeDropdown.js +19 -0
  81. package/dist/SuperDatePicker/components/QuickRangePopover.d.ts +18 -0
  82. package/dist/SuperDatePicker/components/QuickRangePopover.js +12 -0
  83. package/dist/SuperDatePicker/components/index.d.ts +6 -0
  84. package/dist/SuperDatePicker/components/index.js +6 -0
  85. package/dist/SuperDatePicker/index.d.ts +3 -0
  86. package/dist/SuperDatePicker/index.js +3 -0
  87. package/dist/SuperDatePicker/useSuperDatePicker.d.ts +32 -0
  88. package/dist/SuperDatePicker/useSuperDatePicker.js +125 -0
  89. package/dist/Table/ColumnResizer.d.ts +6 -9
  90. package/dist/Table/ColumnResizer.js +30 -10
  91. package/dist/Table/TableComponents.js +14 -10
  92. package/dist/Table/TableHeader.js +31 -16
  93. package/dist/Table/TableMenu/TableMenu.js +1 -1
  94. package/dist/Table/TableProvider.js +91 -4
  95. package/dist/Table/TableRow.js +19 -12
  96. package/dist/Table/Utils/index.d.ts +0 -1
  97. package/dist/Table/Utils/index.js +0 -1
  98. package/dist/Table/types.d.ts +6 -19
  99. package/dist/index.d.ts +2 -0
  100. package/dist/index.js +1 -0
  101. package/dist/theme/variants.js +2 -0
  102. package/package.json +22 -18
@@ -1,14 +1,219 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
1
10
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useEffect, useState } from "react";
11
+ import { useEffect, useRef, useState } from "react";
3
12
  import styled from "styled-components";
4
13
  import { EditorContent, useEditor } from "@tiptap/react";
5
14
  import { Toolbar } from "./Toolbar";
6
15
  import getTipTapExtensions from "./Extensions/getTiptapExtensions";
7
- import { Extensions } from "./Enums";
8
- import { startImageUpload, } from "./Plugins/UploadImagesPlugin";
16
+ import { Extensions, SlashCommands } from "./Enums";
17
+ import { addImagePlaceholder, removeImagePlaceholder, startImageUpload, } from "./Plugins/UploadImagesPlugin";
9
18
  import SaveBadge from "./Components/SaveBadge";
10
19
  import Fonts from "./Enums/Fonts";
11
20
  import RichTextEditorContext from "./Contexts/RichTextEditorContext";
21
+ const getImageFilesFromClipboard = (clipboardData) => {
22
+ return Array.from(clipboardData.files).filter((file) => file.type.includes("image/"));
23
+ };
24
+ const getImageFilenameFromSource = (src, fallbackIndex, fallbackName) => {
25
+ if (fallbackName)
26
+ return fallbackName;
27
+ try {
28
+ const url = new URL(src);
29
+ const filename = url.pathname.split("/").filter(Boolean).pop();
30
+ if (filename)
31
+ return filename;
32
+ }
33
+ catch (_a) {
34
+ // Data URLs and blob URLs may not parse to useful filenames.
35
+ }
36
+ return `pasted-image-${fallbackIndex + 1}.png`;
37
+ };
38
+ const getMimeExtension = (mimeType) => {
39
+ var _a;
40
+ const subtype = (_a = mimeType.split("/")[1]) === null || _a === void 0 ? void 0 : _a.split(";")[0];
41
+ if (!subtype)
42
+ return "png";
43
+ if (subtype === "jpeg")
44
+ return "jpg";
45
+ if (subtype === "svg+xml")
46
+ return "svg";
47
+ return subtype;
48
+ };
49
+ const ensureImageFilenameExtension = (name, mimeType) => {
50
+ if (/\.[a-z0-9]+$/i.test(name))
51
+ return name;
52
+ return `${name}.${getMimeExtension(mimeType)}`;
53
+ };
54
+ const createHtmlImageMarker = (index) => {
55
+ return `monolith-image-marker-${Date.now()}-${index}-${Math.random()
56
+ .toString(36)
57
+ .slice(2)}`;
58
+ };
59
+ const getHtmlImageSources = (html) => {
60
+ const document = new DOMParser().parseFromString(html, "text/html");
61
+ const imageSources = [];
62
+ Array.from(document.body.querySelectorAll("img[src]")).forEach((image, index) => {
63
+ const src = image.getAttribute("src");
64
+ if (!src)
65
+ return;
66
+ const marker = createHtmlImageMarker(index);
67
+ imageSources.push({
68
+ src,
69
+ name: getImageFilenameFromSource(src, index, image.getAttribute("title") || image.getAttribute("alt")),
70
+ marker,
71
+ placeholderId: marker,
72
+ });
73
+ image.replaceWith(document.createTextNode(marker));
74
+ });
75
+ return {
76
+ imageSources,
77
+ htmlWithImageMarkers: document.body.innerHTML,
78
+ };
79
+ };
80
+ const htmlHasContent = (html) => {
81
+ var _a;
82
+ const document = new DOMParser().parseFromString(html, "text/html");
83
+ return Boolean(((_a = document.body.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
84
+ document.body.querySelector("table, ul, ol, blockquote, pre, code, hr, iframe, video, audio"));
85
+ };
86
+ const createImageFileFromSource = (imageSource, index) => __awaiter(void 0, void 0, void 0, function* () {
87
+ var _a;
88
+ const response = yield fetch(imageSource.src);
89
+ if (!response.ok) {
90
+ throw new Error(`Unable to fetch pasted image: ${imageSource.src}`);
91
+ }
92
+ const blob = yield response.blob();
93
+ const type = blob.type ||
94
+ ((_a = imageSource.src.match(/^data:(image\/[^;,]+)/)) === null || _a === void 0 ? void 0 : _a[1]) ||
95
+ "image/png";
96
+ return new File([blob], ensureImageFilenameExtension(imageSource.name || `pasted-image-${index + 1}`, type), { type });
97
+ });
98
+ const findTextRange = (view, text) => {
99
+ let range;
100
+ view.state.doc.descendants((node, position) => {
101
+ if (range)
102
+ return false;
103
+ if (!node.isText || !node.text)
104
+ return;
105
+ const index = node.text.indexOf(text);
106
+ if (index === -1)
107
+ return;
108
+ range = {
109
+ from: position + index,
110
+ to: position + index + text.length,
111
+ };
112
+ return false;
113
+ });
114
+ return range;
115
+ };
116
+ const removeImageMarker = (view, marker) => {
117
+ const range = findTextRange(view, marker);
118
+ if (!range)
119
+ return;
120
+ view.dispatch(view.state.tr.delete(range.from, range.to));
121
+ return range.from;
122
+ };
123
+ const getPlaceholderAddPosition = (position) => {
124
+ return Math.max(position - 1, 0);
125
+ };
126
+ const replaceImageMarkerWithPlaceholder = (view, imageSource) => {
127
+ const markerPosition = removeImageMarker(view, imageSource.marker);
128
+ if (markerPosition === undefined)
129
+ return;
130
+ addImagePlaceholder({
131
+ view,
132
+ id: imageSource.placeholderId,
133
+ pos: getPlaceholderAddPosition(markerPosition),
134
+ label: "Processing image...",
135
+ });
136
+ };
137
+ const replaceImagePlaceholder = (view, placeholderId, src, name) => {
138
+ var _a;
139
+ const position = removeImagePlaceholder(view, placeholderId);
140
+ const imageNode = (_a = view.state.schema.nodes.image) === null || _a === void 0 ? void 0 : _a.create({
141
+ src,
142
+ alt: name,
143
+ title: `Filename: ${name}`,
144
+ });
145
+ if (position == null || !imageNode)
146
+ return false;
147
+ view.dispatch(view.state.tr.replaceWith(position, position, imageNode).scrollIntoView());
148
+ return true;
149
+ };
150
+ const uploadImagesFromHtmlSources = (imageSources, view, handleImageUpload, handleImageUrlUpload) => {
151
+ imageSources.forEach((imageSource, index) => {
152
+ createImageFileFromSource(imageSource, index)
153
+ .then((file) => {
154
+ const uploadPosition = removeImagePlaceholder(view, imageSource.placeholderId);
155
+ if (uploadPosition == null)
156
+ return;
157
+ startImageUpload(file, view, getPlaceholderAddPosition(uploadPosition), handleImageUpload);
158
+ })
159
+ .catch((error) => __awaiter(void 0, void 0, void 0, function* () {
160
+ if (!handleImageUrlUpload) {
161
+ console.error("Unable to upload pasted HTML image.", error);
162
+ removeImagePlaceholder(view, imageSource.placeholderId);
163
+ return;
164
+ }
165
+ try {
166
+ const uploadedSrc = yield handleImageUrlUpload(imageSource);
167
+ if (uploadedSrc) {
168
+ replaceImagePlaceholder(view, imageSource.placeholderId, uploadedSrc, imageSource.name);
169
+ }
170
+ else {
171
+ removeImagePlaceholder(view, imageSource.placeholderId);
172
+ }
173
+ }
174
+ catch (urlUploadError) {
175
+ console.error("Unable to upload pasted HTML image URL.", urlUploadError);
176
+ removeImagePlaceholder(view, imageSource.placeholderId);
177
+ }
178
+ }));
179
+ });
180
+ };
181
+ const handleImagePaste = (view, event, handleImageUpload, handleImageUrlUpload) => {
182
+ const { clipboardData } = event;
183
+ if (!clipboardData)
184
+ return false;
185
+ const imageFiles = getImageFilesFromClipboard(clipboardData);
186
+ const html = clipboardData.getData("text/html");
187
+ const { imageSources, htmlWithImageMarkers } = html
188
+ ? getHtmlImageSources(html)
189
+ : { imageSources: [], htmlWithImageMarkers: "" };
190
+ if (!imageFiles.length && !imageSources.length)
191
+ return false;
192
+ event.preventDefault();
193
+ if (html && htmlHasContent(htmlWithImageMarkers)) {
194
+ view.pasteHTML(htmlWithImageMarkers);
195
+ imageSources.forEach((imageSource) => {
196
+ replaceImageMarkerWithPlaceholder(view, imageSource);
197
+ });
198
+ }
199
+ const uploadPosition = view.state.selection.from;
200
+ if (imageFiles.length) {
201
+ imageFiles.forEach((file, index) => {
202
+ var _a;
203
+ const placeholderId = (_a = imageSources[index]) === null || _a === void 0 ? void 0 : _a.placeholderId;
204
+ const markerPosition = placeholderId
205
+ ? removeImagePlaceholder(view, placeholderId)
206
+ : undefined;
207
+ startImageUpload(file, view, markerPosition == null
208
+ ? uploadPosition
209
+ : getPlaceholderAddPosition(markerPosition), handleImageUpload);
210
+ });
211
+ uploadImagesFromHtmlSources(imageSources.slice(imageFiles.length), view, handleImageUpload, handleImageUrlUpload);
212
+ return true;
213
+ }
214
+ uploadImagesFromHtmlSources(imageSources, view, handleImageUpload, handleImageUrlUpload);
215
+ return true;
216
+ };
12
217
  const StyledContent = styled.div `
13
218
  position: relative;
14
219
  display: flex;
@@ -49,6 +254,7 @@ const StyledContent = styled.div `
49
254
  }
50
255
 
51
256
  .ProseMirror {
257
+ font-size: 14px;
52
258
  font-weight: 400;
53
259
  outline: none;
54
260
  height: 100%;
@@ -81,37 +287,34 @@ const StyledContent = styled.div `
81
287
  }
82
288
 
83
289
  h1 {
84
- font-size: 1.5rem;
290
+ font-size: 32px;
85
291
  line-height: 2rem;
86
292
  margin: 0;
87
293
  }
88
294
  h2 {
89
- font-size: 1.25rem;
295
+ font-size: 28px;
90
296
  line-height: 1.75rem;
91
297
  margin: 0;
92
298
  }
93
299
  h3 {
94
- font-size: 1.125rem;
300
+ font-size: 24px;
95
301
  line-height: 1.75rem;
96
302
  margin: 0;
97
303
  }
98
304
  h4 {
99
- font-size: 1rem;
305
+ font-size: 20px;
100
306
  line-height: 1.5rem;
101
307
  margin: 0;
102
308
  }
103
309
  p {
104
310
  margin: 0;
105
- font-size: 0.8rem;
106
311
  line-height: 1.5rem;
107
312
  }
108
313
  ul {
109
314
  margin: 0;
110
- font-size: 0.8rem;
111
315
  }
112
316
  ol {
113
317
  margin: 0;
114
- font-size: 0.8rem;
115
318
  }
116
319
  .editor-link {
117
320
  color: ${({ theme }) => theme.palette.primary.main};
@@ -155,6 +358,9 @@ const StyledContent = styled.div `
155
358
  .ProseMirror .img-placeholder {
156
359
  position: relative;
157
360
  width: fit-content;
361
+ display: inline-flex;
362
+ align-items: center;
363
+ justify-content: center;
158
364
 
159
365
  &:before {
160
366
  content: "";
@@ -177,6 +383,58 @@ const StyledContent = styled.div `
177
383
  }
178
384
  }
179
385
 
386
+ .ProseMirror .img-placeholder .img-placeholder-label {
387
+ position: absolute;
388
+ top: calc(50% + 1.75rem);
389
+ left: 50%;
390
+ transform: translateX(-50%);
391
+ width: max-content;
392
+ max-width: calc(100% - 1rem);
393
+ padding: 0.25rem 0.5rem;
394
+ border-radius: 6px;
395
+ background-color: ${({ theme }) => theme.palette.background.paper};
396
+ color: ${({ theme }) => theme.palette.text.secondary};
397
+ font-size: 0.75rem;
398
+ line-height: 1rem;
399
+ text-align: center;
400
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
401
+ }
402
+
403
+ .ProseMirror .img-placeholder.processing {
404
+ display: inline-flex;
405
+ align-items: center;
406
+ gap: 0.5rem;
407
+ width: auto;
408
+ min-height: 2rem;
409
+ padding: 0.35rem 0.65rem;
410
+ border: 1px dashed ${({ theme }) => theme.palette.divider};
411
+ border-radius: 6px;
412
+ background-color: ${({ theme }) => theme.palette.action.hover};
413
+ color: ${({ theme }) => theme.palette.text.secondary};
414
+ font-size: 0.75rem;
415
+ line-height: 1rem;
416
+ vertical-align: middle;
417
+
418
+ .img-placeholder-label {
419
+ position: static;
420
+ transform: none;
421
+ max-width: none;
422
+ padding: 0;
423
+ border-radius: 0;
424
+ background-color: transparent;
425
+ box-shadow: none;
426
+ }
427
+
428
+ &:before {
429
+ position: static;
430
+ flex: 0 0 auto;
431
+ width: 0.875rem;
432
+ height: 0.875rem;
433
+ border-width: 2px;
434
+ transform: none;
435
+ }
436
+ }
437
+
180
438
  .floating-menu {
181
439
  display: flex;
182
440
  background-color: #0d0d0d10;
@@ -278,18 +536,28 @@ const StyledContent = styled.div `
278
536
  margin: 0 0.125rem;
279
537
  }
280
538
  `;
281
- export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }) => {
539
+ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
540
+ const isControlled = value !== undefined;
541
+ const hasImageExtension = extensions.includes(Extensions.Image);
542
+ const hasSlashCommandExtension = extensions.includes(Extensions.SlashCommand);
543
+ const hasImageSlashCommand = hasSlashCommandExtension && slashCommands.includes(SlashCommands.Image);
544
+ const onChangeRef = useRef(onChange);
282
545
  const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
283
- // check if image extension is included
284
- if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
285
- // Ensure that handleImageUpload is provided
546
+ useEffect(() => {
547
+ onChangeRef.current = onChange;
548
+ }, [onChange]);
549
+ if (hasImageSlashCommand && !hasImageExtension) {
550
+ throw new Error("Extensions.Image is required when using the Image slash command.");
551
+ }
552
+ if (hasImageExtension || hasImageSlashCommand) {
286
553
  if (!handleImageUpload) {
287
- throw new Error("handleImageUpload is required when using the image extension.");
554
+ throw new Error("handleImageUpload is required when using image uploads.");
288
555
  }
289
556
  }
290
557
  const editor = useEditor({
291
- content: defaultValue,
558
+ content: value !== null && value !== void 0 ? value : defaultValue,
292
559
  editable: !readOnly,
560
+ shouldRerenderOnTransaction: true,
293
561
  extensions: getTipTapExtensions({
294
562
  extensions,
295
563
  slashCommands,
@@ -298,27 +566,12 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
298
566
  }),
299
567
  editorProps: {
300
568
  handlePaste: (view, event) => {
301
- if (!handleImageUpload)
569
+ if (!hasImageExtension || !handleImageUpload)
302
570
  return false;
303
- if (!(event === null || event === void 0 ? void 0 : event.clipboardData))
304
- return false;
305
- if (event.clipboardData.types.includes("text/html") ||
306
- event.clipboardData.types.includes("text/plain") ||
307
- event.clipboardData.types.includes("text/rtf"))
308
- return false;
309
- if (event.clipboardData &&
310
- event.clipboardData.files &&
311
- event.clipboardData.files[0]) {
312
- event.preventDefault();
313
- const file = event.clipboardData.files[0];
314
- const pos = view.state.selection.from;
315
- startImageUpload(file, view, pos, handleImageUpload);
316
- return true;
317
- }
318
- return false;
571
+ return handleImagePaste(view, event, handleImageUpload, handleImageUrlUpload);
319
572
  },
320
573
  handleDrop: (view, event, _slice, moved) => {
321
- if (!handleImageUpload)
574
+ if (!hasImageExtension || !handleImageUpload)
322
575
  return false;
323
576
  if (!moved &&
324
577
  event.dataTransfer &&
@@ -340,9 +593,23 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
340
593
  },
341
594
  },
342
595
  onUpdate: ({ editor }) => {
343
- onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
596
+ var _a;
597
+ (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, editor.getHTML());
344
598
  },
345
599
  });
600
+ useEffect(() => {
601
+ if (!editor || !isControlled)
602
+ return;
603
+ const currentValue = editor.getHTML();
604
+ if (currentValue !== value) {
605
+ editor.commands.setContent(value, { emitUpdate: false });
606
+ }
607
+ }, [editor, isControlled, value]);
608
+ useEffect(() => {
609
+ if (!editor)
610
+ return;
611
+ editor.setEditable(!readOnly, false);
612
+ }, [editor, readOnly]);
346
613
  useEffect(() => {
347
614
  const _ref = editorInstanceRef;
348
615
  if (editorInstanceRef) {
@@ -0,0 +1,24 @@
1
+ import type { QuickDirection, QuickUnit, SuperDatePickerProps, SuperDatePickerValue } from "./SuperDatePicker.types";
2
+ export declare const DEFAULT_VALUE: SuperDatePickerValue;
3
+ export declare const DEFAULT_ON_CHANGE: NonNullable<SuperDatePickerProps["onChange"]>;
4
+ export declare const DEFAULT_PLACEHOLDER = "Select date/time range";
5
+ export declare const DEFAULT_START_LABEL = "Start";
6
+ export declare const DEFAULT_END_LABEL = "End";
7
+ export declare const DEFAULT_FORMAT: NonNullable<SuperDatePickerProps["format"]>;
8
+ export declare const DEFAULT_SIZE: NonNullable<SuperDatePickerProps["size"]>;
9
+ export declare const DEFAULT_VARIANT: NonNullable<SuperDatePickerProps["variant"]>;
10
+ export declare const DEFAULT_REQUIRED = false;
11
+ export declare const DEFAULT_CLEARABLE = true;
12
+ export declare const DEFAULT_DISABLED = false;
13
+ export declare const DEFAULT_UTC = false;
14
+ export declare const DEFAULT_QUICK_DIRECTION: QuickDirection;
15
+ export declare const DEFAULT_QUICK_AMOUNT = "15";
16
+ export declare const DEFAULT_QUICK_UNIT: QuickUnit;
17
+ export declare const QUICK_UNITS: Array<{
18
+ label: string;
19
+ value: QuickUnit;
20
+ }>;
21
+ export declare const QUICK_DIRECTION_OPTIONS: Array<{
22
+ label: string;
23
+ value: QuickDirection;
24
+ }>;
@@ -0,0 +1,30 @@
1
+ export const DEFAULT_VALUE = {
2
+ start: null,
3
+ end: null,
4
+ };
5
+ export const DEFAULT_ON_CHANGE = () => { };
6
+ export const DEFAULT_PLACEHOLDER = "Select date/time range";
7
+ export const DEFAULT_START_LABEL = "Start";
8
+ export const DEFAULT_END_LABEL = "End";
9
+ export const DEFAULT_FORMAT = "YYYY-MM-DD HH:mm:ss";
10
+ export const DEFAULT_SIZE = "sm";
11
+ export const DEFAULT_VARIANT = "outlined";
12
+ export const DEFAULT_REQUIRED = false;
13
+ export const DEFAULT_CLEARABLE = true;
14
+ export const DEFAULT_DISABLED = false;
15
+ export const DEFAULT_UTC = false;
16
+ export const DEFAULT_QUICK_DIRECTION = "last";
17
+ export const DEFAULT_QUICK_AMOUNT = "15";
18
+ export const DEFAULT_QUICK_UNIT = "minutes";
19
+ export const QUICK_UNITS = [
20
+ { label: "Minutes", value: "minutes" },
21
+ { label: "Hours", value: "hours" },
22
+ { label: "Days", value: "days" },
23
+ { label: "Weeks", value: "weeks" },
24
+ { label: "Months", value: "months" },
25
+ { label: "Years", value: "years" },
26
+ ];
27
+ export const QUICK_DIRECTION_OPTIONS = [
28
+ { label: "Last", value: "last" },
29
+ { label: "Next", value: "next" },
30
+ ];
@@ -0,0 +1,3 @@
1
+ import type { SuperDatePickerProps } from "./SuperDatePicker.types";
2
+ declare const SuperDatePicker: import("react").ForwardRefExoticComponent<SuperDatePickerProps & import("react").RefAttributes<HTMLElement>>;
3
+ export default SuperDatePicker;
@@ -0,0 +1,31 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { forwardRef } from "react";
3
+ import { FieldLabel } from "..";
4
+ import { ClearButton } from "../core";
5
+ import { DEFAULT_DISABLED, DEFAULT_END_LABEL, DEFAULT_FORMAT, DEFAULT_ON_CHANGE, DEFAULT_PLACEHOLDER, DEFAULT_REQUIRED, DEFAULT_SIZE, DEFAULT_START_LABEL, DEFAULT_UTC, DEFAULT_VALUE, DEFAULT_VARIANT, } from "./SuperDatePicker.constants";
6
+ import useSuperDatePicker from "./useSuperDatePicker";
7
+ import { EndpointPopover, QuickRangePopover, } from "./components";
8
+ import { RangeSeparator, StyledContainer, StyledInput, TriggerActions, } from "./SuperDatePicker.styled";
9
+ const SuperDatePicker = forwardRef(({ className, style, defaultValue = DEFAULT_VALUE, value, onChange = DEFAULT_ON_CHANGE, label, description, placeholder = DEFAULT_PLACEHOLDER, startLabel = DEFAULT_START_LABEL, endLabel = DEFAULT_END_LABEL, format = DEFAULT_FORMAT, size = DEFAULT_SIZE, variant = DEFAULT_VARIANT, required = DEFAULT_REQUIRED, clearable, disabled = DEFAULT_DISABLED, error, width, min, max, timeIntervalMinutes, utc = DEFAULT_UTC, presets, }, ref) => {
10
+ const isClearable = clearable === true;
11
+ const picker = useSuperDatePicker({
12
+ defaultValue,
13
+ value,
14
+ onChange,
15
+ disabled,
16
+ min,
17
+ max,
18
+ utc,
19
+ presets,
20
+ });
21
+ return (_jsxs(StyledContainer, { ref: (node) => {
22
+ if (typeof ref === "function") {
23
+ ref(node);
24
+ }
25
+ else if (ref) {
26
+ ref.current = node;
27
+ }
28
+ }, className: className, "$width": width, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInput, { size: size, variant: variant, "$disabled": disabled, "$active": picker.openSegment !== null, "$clearable": isClearable, style: style, children: [_jsx(QuickRangePopover, { opened: picker.openSegment === "quick", disabled: disabled, size: size, commonRangeGroups: picker.commonRangeGroups, quickDirection: picker.quickDirection, quickAmount: picker.quickAmount, quickUnit: picker.quickUnit, onOpenChange: (opened) => picker.handleOpenSegmentChange("quick", opened), onQuickDirectionChange: picker.handleQuickDirectionChange, onQuickAmountChange: picker.handleQuickAmountChange, onQuickAmountSubmit: picker.handleQuickAmountSubmit, onQuickUnitChange: picker.handleQuickUnitChange, onPresetClick: picker.handlePreset }), _jsx(EndpointPopover, { opened: picker.openSegment === "start", disabled: disabled, label: startLabel, value: picker.value.start, onOpenChange: (opened) => picker.handleOpenSegmentChange("start", opened), onInputChange: (next) => picker.handleEndpointChange("start", next), onCalendarChange: (date) => picker.handleCalendarChange("start", date), format: format, size: size, utc: utc, min: min, max: picker.getEndpointMax("start"), timeIntervalMinutes: timeIntervalMinutes }), _jsx(RangeSeparator, { size: size, children: "\u2192" }), _jsx(EndpointPopover, { opened: picker.openSegment === "end", disabled: disabled, label: endLabel, value: picker.value.end, onOpenChange: (opened) => picker.handleOpenSegmentChange("end", opened), onInputChange: (next) => picker.handleEndpointChange("end", next), onCalendarChange: (date) => picker.handleCalendarChange("end", date), format: format, size: size, utc: utc, min: picker.getEndpointMin("end"), max: max, timeIntervalMinutes: timeIntervalMinutes }), _jsx(TriggerActions, { children: isClearable && (picker.value.start || picker.value.end) ? (_jsx(ClearButton, { size: size, onClick: picker.handleClear })) : null })] })] }));
29
+ });
30
+ SuperDatePicker.displayName = "SuperDatePicker";
31
+ export default SuperDatePicker;
@@ -0,0 +1,17 @@
1
+ import moment from "moment";
2
+ import type { CommonRangeGroupConfig, SuperDatePickerPreset } from "./SuperDatePicker.types";
3
+ export declare const resolveNow: (utc: boolean) => moment.Moment;
4
+ export declare const serializeMoment: (value: moment.Moment, utc: boolean) => string;
5
+ export declare const createRange: (start: moment.Moment, end: moment.Moment, utc: boolean) => {
6
+ start: string;
7
+ end: string;
8
+ };
9
+ export declare const makeCommonRange: (utc: boolean, label: string, getRange: (now: moment.Moment) => {
10
+ start: moment.Moment;
11
+ end: moment.Moment;
12
+ }) => SuperDatePickerPreset;
13
+ export declare const getDefaultCommonRangeGroups: (utc: boolean) => CommonRangeGroupConfig[];
14
+ export declare const getAdditionalCommonRangeGroups: (utc: boolean) => CommonRangeGroupConfig[];
15
+ export declare const parseRangeMoment: (value: string | null | undefined, utc: boolean) => moment.Moment | null;
16
+ export declare const momentToCalendarDate: (value: string | null | undefined, utc: boolean) => Date | undefined;
17
+ export declare const calendarDateToMoment: (value: Date, utc: boolean) => moment.Moment;