@monolith-forensics/monolith-ui 1.8.1-dev.1 → 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.
- package/dist/Calendar/Calendar.d.ts +4 -1
- package/dist/Calendar/Calendar.js +126 -50
- package/dist/Calendar/CalendarStyles.d.ts +3 -2
- package/dist/Calendar/CalendarStyles.js +67 -25
- package/dist/Calendar/calendarHelpers.d.ts +1 -1
- package/dist/CheckBox/CheckBox.js +35 -4
- package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts +41 -0
- package/dist/DateTimeRangePicker/DateTimeRangePicker.js +363 -0
- package/dist/DateTimeRangePicker/index.d.ts +2 -0
- package/dist/DateTimeRangePicker/index.js +2 -0
- package/dist/DropDownMenu/DropDownMenu.js +25 -15
- package/dist/DropDownMenu/components/MenuComponent.js +6 -1
- package/dist/DropDownMenu/components/MenuItem.d.ts +2 -0
- package/dist/DropDownMenu/components/MenuItem.js +22 -9
- package/dist/DropDownMenu/components/MenuItemList.d.ts +3 -0
- package/dist/DropDownMenu/components/MenuItemList.js +186 -63
- package/dist/DropDownMenu/components/StyledContent.js +1 -2
- package/dist/DropDownMenu/types.d.ts +3 -0
- package/dist/FileViewer/viewers/ImageViewer.js +75 -18
- package/dist/MonolithUIProvider/MonolithUIProvider.d.ts +1 -0
- package/dist/QueryFilter/DefaultOperators.d.ts +1 -76
- package/dist/QueryFilter/DefaultOperators.js +1 -21
- package/dist/QueryFilter/QueryFilter.constants.d.ts +134 -0
- package/dist/QueryFilter/QueryFilter.constants.js +39 -0
- package/dist/QueryFilter/QueryFilter.d.ts +1 -1
- package/dist/QueryFilter/QueryFilter.js +3 -303
- package/dist/QueryFilter/QueryFilter.lib.d.ts +14 -0
- package/dist/QueryFilter/QueryFilter.lib.js +84 -0
- package/dist/QueryFilter/QueryFilter.styled.d.ts +89 -0
- package/dist/QueryFilter/QueryFilter.styled.js +184 -0
- package/dist/QueryFilter/QueryFilter.types.d.ts +61 -0
- package/dist/QueryFilter/QueryFilter.types.js +1 -0
- package/dist/QueryFilter/components/MultiSelectEditor.d.ts +7 -0
- package/dist/QueryFilter/components/MultiSelectEditor.js +44 -0
- package/dist/QueryFilter/components/RuleChip.d.ts +8 -0
- package/dist/QueryFilter/components/RuleChip.js +37 -0
- package/dist/QueryFilter/components/Rules.d.ts +11 -0
- package/dist/QueryFilter/components/Rules.js +41 -0
- package/dist/QueryFilter/components/UnavailableRuleChip.d.ts +5 -0
- package/dist/QueryFilter/components/UnavailableRuleChip.js +7 -0
- package/dist/QueryFilter/components/ValueEditor.d.ts +7 -0
- package/dist/QueryFilter/components/ValueEditor.js +45 -0
- package/dist/QueryFilter/components/ValueSelector.d.ts +7 -0
- package/dist/QueryFilter/components/ValueSelector.js +34 -0
- package/dist/QueryFilter/components/index.d.ts +6 -0
- package/dist/QueryFilter/components/index.js +6 -0
- package/dist/QueryFilter/index.d.ts +3 -2
- package/dist/QueryFilter/index.js +3 -2
- package/dist/QueryFilter/types.d.ts +1 -52
- package/dist/QueryFilter/types.js +1 -1
- package/dist/QueryFilter/useQueryFilter.d.ts +1 -1
- package/dist/QueryFilter/useQueryFilter.js +23 -19
- package/dist/RichTextEditor/Extensions/getTiptapExtensions.js +5 -15
- package/dist/RichTextEditor/Plugins/ImageActionsPlugin.d.ts +3 -0
- package/dist/RichTextEditor/Plugins/ImageActionsPlugin.js +241 -0
- package/dist/RichTextEditor/Plugins/UploadImagesPlugin.d.ts +15 -0
- package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js +115 -51
- package/dist/RichTextEditor/Plugins/index.d.ts +1 -0
- package/dist/RichTextEditor/Plugins/index.js +1 -0
- package/dist/RichTextEditor/RichTextEditor.d.ts +3 -2
- package/dist/RichTextEditor/RichTextEditor.js +302 -35
- package/dist/SuperDatePicker/SuperDatePicker.constants.d.ts +24 -0
- package/dist/SuperDatePicker/SuperDatePicker.constants.js +30 -0
- package/dist/SuperDatePicker/SuperDatePicker.d.ts +3 -0
- package/dist/SuperDatePicker/SuperDatePicker.js +31 -0
- package/dist/SuperDatePicker/SuperDatePicker.lib.d.ts +17 -0
- package/dist/SuperDatePicker/SuperDatePicker.lib.js +206 -0
- package/dist/SuperDatePicker/SuperDatePicker.styled.d.ts +60 -0
- package/dist/SuperDatePicker/SuperDatePicker.styled.js +256 -0
- package/dist/SuperDatePicker/SuperDatePicker.types.d.ts +48 -0
- package/dist/SuperDatePicker/SuperDatePicker.types.js +1 -0
- package/dist/SuperDatePicker/components/CommonPresetGroups.d.ts +7 -0
- package/dist/SuperDatePicker/components/CommonPresetGroups.js +6 -0
- package/dist/SuperDatePicker/components/EndpointCalendarDropdown.d.ts +10 -0
- package/dist/SuperDatePicker/components/EndpointCalendarDropdown.js +9 -0
- package/dist/SuperDatePicker/components/EndpointDateInput.d.ts +16 -0
- package/dist/SuperDatePicker/components/EndpointDateInput.js +26 -0
- package/dist/SuperDatePicker/components/EndpointPopover.d.ts +18 -0
- package/dist/SuperDatePicker/components/EndpointPopover.js +11 -0
- package/dist/SuperDatePicker/components/QuickRangeDropdown.d.ts +14 -0
- package/dist/SuperDatePicker/components/QuickRangeDropdown.js +19 -0
- package/dist/SuperDatePicker/components/QuickRangePopover.d.ts +18 -0
- package/dist/SuperDatePicker/components/QuickRangePopover.js +12 -0
- package/dist/SuperDatePicker/components/index.d.ts +6 -0
- package/dist/SuperDatePicker/components/index.js +6 -0
- package/dist/SuperDatePicker/index.d.ts +3 -0
- package/dist/SuperDatePicker/index.js +3 -0
- package/dist/SuperDatePicker/useSuperDatePicker.d.ts +32 -0
- package/dist/SuperDatePicker/useSuperDatePicker.js +125 -0
- package/dist/Table/ColumnResizer.d.ts +6 -9
- package/dist/Table/ColumnResizer.js +30 -10
- package/dist/Table/TableComponents.js +14 -10
- package/dist/Table/TableHeader.js +31 -16
- package/dist/Table/TableMenu/TableMenu.js +1 -1
- package/dist/Table/TableProvider.js +91 -4
- package/dist/Table/TableRow.js +19 -12
- package/dist/Table/Utils/index.d.ts +0 -1
- package/dist/Table/Utils/index.js +0 -1
- package/dist/Table/types.d.ts +6 -19
- package/dist/TagBox/TagBox.d.ts +1 -1
- package/dist/TagBox/TagBox.js +6 -6
- package/dist/TagBox/types.d.ts +1 -0
- package/dist/TextArea/TextArea.js +5 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/dist/theme/variants.js +2 -0
- 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:
|
|
290
|
+
font-size: 32px;
|
|
85
291
|
line-height: 2rem;
|
|
86
292
|
margin: 0;
|
|
87
293
|
}
|
|
88
294
|
h2 {
|
|
89
|
-
font-size:
|
|
295
|
+
font-size: 28px;
|
|
90
296
|
line-height: 1.75rem;
|
|
91
297
|
margin: 0;
|
|
92
298
|
}
|
|
93
299
|
h3 {
|
|
94
|
-
font-size:
|
|
300
|
+
font-size: 24px;
|
|
95
301
|
line-height: 1.75rem;
|
|
96
302
|
margin: 0;
|
|
97
303
|
}
|
|
98
304
|
h4 {
|
|
99
|
-
font-size:
|
|
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
|
|
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
|
-
|
|
284
|
-
|
|
285
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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,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;
|