blixify-ui-web 0.4.242 → 0.4.243
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/lib/components/chart/ganttChart/index.d.ts.map +1 -1
- package/lib/components/chart/ganttChart/index.js +11 -4
- package/lib/components/chart/ganttChart/index.js.map +1 -1
- package/lib/components/data/dataTemplate/index.d.ts.map +1 -1
- package/lib/components/data/dataTemplate/index.js.map +1 -1
- package/lib/components/data/testSchema.d.ts.map +1 -1
- package/lib/components/data/testSchema.js +198 -91
- package/lib/components/data/testSchema.js.map +1 -1
- package/lib/components/data/updateModule.d.ts.map +1 -1
- package/lib/components/data/updateModule.js +20 -2
- package/lib/components/data/updateModule.js.map +1 -1
- package/lib/components/input/markdown/index.d.ts.map +1 -1
- package/lib/components/input/markdown/index.js +115 -115
- package/lib/components/input/markdown/index.js.map +1 -1
- package/lib/components/input/textInput/index.d.ts.map +1 -1
- package/lib/components/input/textInput/index.js +5 -4
- package/lib/components/input/textInput/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -83,34 +83,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
83
83
|
};
|
|
84
84
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
85
85
|
exports.MarkdownInput = void 0;
|
|
86
|
+
var solid_1 = require("@heroicons/react/20/solid");
|
|
87
|
+
var PhotoIcon_1 = __importDefault(require("@heroicons/react/24/outline/PhotoIcon"));
|
|
86
88
|
var QuestionMarkCircleIcon_1 = __importDefault(require("@heroicons/react/24/solid/QuestionMarkCircleIcon"));
|
|
87
89
|
var TableCellsIcon_1 = __importDefault(require("@heroicons/react/24/solid/TableCellsIcon"));
|
|
88
|
-
var PhotoIcon_1 = __importDefault(require("@heroicons/react/24/outline/PhotoIcon"));
|
|
89
|
-
var solid_1 = require("@heroicons/react/20/solid");
|
|
90
|
-
var react_1 = require("@tiptap/react");
|
|
91
90
|
var core_1 = require("@tiptap/core");
|
|
92
|
-
var
|
|
93
|
-
var starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
|
|
91
|
+
var extension_image_1 = __importDefault(require("@tiptap/extension-image"));
|
|
94
92
|
var extension_placeholder_1 = __importDefault(require("@tiptap/extension-placeholder"));
|
|
95
|
-
var extension_underline_1 = __importDefault(require("@tiptap/extension-underline"));
|
|
96
|
-
var extension_superscript_1 = __importDefault(require("@tiptap/extension-superscript"));
|
|
97
93
|
var extension_subscript_1 = __importDefault(require("@tiptap/extension-subscript"));
|
|
94
|
+
var extension_superscript_1 = __importDefault(require("@tiptap/extension-superscript"));
|
|
98
95
|
var extension_table_1 = __importDefault(require("@tiptap/extension-table"));
|
|
99
|
-
var extension_table_row_1 = __importDefault(require("@tiptap/extension-table-row"));
|
|
100
96
|
var extension_table_cell_1 = __importDefault(require("@tiptap/extension-table-cell"));
|
|
101
97
|
var extension_table_header_1 = __importDefault(require("@tiptap/extension-table-header"));
|
|
102
|
-
var
|
|
98
|
+
var extension_table_row_1 = __importDefault(require("@tiptap/extension-table-row"));
|
|
103
99
|
var extension_task_item_1 = __importDefault(require("@tiptap/extension-task-item"));
|
|
104
|
-
var
|
|
100
|
+
var extension_task_list_1 = __importDefault(require("@tiptap/extension-task-list"));
|
|
101
|
+
var extension_underline_1 = __importDefault(require("@tiptap/extension-underline"));
|
|
102
|
+
var react_1 = require("@tiptap/react");
|
|
103
|
+
var starter_kit_1 = __importDefault(require("@tiptap/starter-kit"));
|
|
104
|
+
var heic_to_1 = require("heic-to");
|
|
105
105
|
var markdown_it_1 = __importDefault(require("markdown-it"));
|
|
106
|
-
var turndown_1 = __importDefault(require("turndown"));
|
|
107
106
|
var markdown_it_task_lists_1 = __importDefault(require("markdown-it-task-lists"));
|
|
107
|
+
var react_2 = __importStar(require("react"));
|
|
108
108
|
var react_dropzone_1 = __importDefault(require("react-dropzone"));
|
|
109
|
-
var
|
|
109
|
+
var turndown_1 = __importDefault(require("turndown"));
|
|
110
110
|
require("../../../index.css");
|
|
111
111
|
var infoWindow_1 = require("../../advanced/infoWindow");
|
|
112
112
|
var loading_1 = require("../../display/loading");
|
|
113
|
-
var heic_to_1 = require("heic-to");
|
|
114
113
|
var md = new markdown_it_1.default({
|
|
115
114
|
html: true,
|
|
116
115
|
breaks: true,
|
|
@@ -372,9 +371,9 @@ turndownService.addRule("listItem", {
|
|
|
372
371
|
// Media Upload Node Component
|
|
373
372
|
var MediaUploadComponent = function (_a) {
|
|
374
373
|
var node = _a.node, deleteNode = _a.deleteNode;
|
|
375
|
-
var _b = (0,
|
|
374
|
+
var _b = (0, react_2.useState)(false), uploading = _b[0], setUploading = _b[1];
|
|
376
375
|
var _c = node.attrs, onImageUpload = _c.onImageUpload, onVideoUpload = _c.onVideoUpload, darkMode = _c.darkMode, enableVideo = _c.enableVideo;
|
|
377
|
-
var inputRef =
|
|
376
|
+
var inputRef = react_2.default.useRef(null);
|
|
378
377
|
var handleFileSelect = function (file) { return __awaiter(void 0, void 0, void 0, function () {
|
|
379
378
|
var isVideo, error_1;
|
|
380
379
|
return __generator(this, function (_a) {
|
|
@@ -428,33 +427,33 @@ var MediaUploadComponent = function (_a) {
|
|
|
428
427
|
var fileDescription = enableVideo
|
|
429
428
|
? "Images (PNG, JPG, JPEG, HEIC, TIFF) or Videos (MP4, MOV, WebM) up to 100MB"
|
|
430
429
|
: "PNG, JPG, JPEG, HEIC, TIFF up to 30MB";
|
|
431
|
-
return (
|
|
432
|
-
|
|
430
|
+
return (react_2.default.createElement(react_1.NodeViewWrapper, { className: "media-upload-wrapper" },
|
|
431
|
+
react_2.default.createElement(react_dropzone_1.default, { onDrop: handleDrop, accept: acceptTypes, multiple: false, disabled: uploading, noClick: true }, function (_a) {
|
|
433
432
|
var getRootProps = _a.getRootProps, getInputProps = _a.getInputProps, isDragActive = _a.isDragActive;
|
|
434
|
-
return (
|
|
433
|
+
return (react_2.default.createElement("div", __assign({}, getRootProps({ onClick: function (e) { return e.preventDefault(); } }), { className: "my-3 p-4 border-2 border-dashed rounded-lg ".concat(borderColor, " ").concat(bgColor, " ").concat(isDragActive ? "border-primary-500 bg-primary-50" : "", " ").concat(uploading
|
|
435
434
|
? "pointer-events-none opacity-60"
|
|
436
435
|
: "hover:border-primary-400") }),
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
436
|
+
react_2.default.createElement("div", { className: "space-y-2 text-center" },
|
|
437
|
+
react_2.default.createElement(solid_1.FolderPlusIcon, { className: "mx-auto h-8 w-8 ".concat(iconColor) }),
|
|
438
|
+
react_2.default.createElement("div", null,
|
|
439
|
+
react_2.default.createElement("button", { type: "button", onClick: function () {
|
|
441
440
|
var _a;
|
|
442
441
|
if (!uploading) {
|
|
443
442
|
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
444
443
|
}
|
|
445
444
|
}, disabled: uploading, className: "relative cursor-pointer bg-primary-500 rounded-md font-medium px-3 py-1.5 text-sm text-white hover:bg-primary-600 inline-block ".concat(uploading ? "pointer-events-none opacity-60" : "") },
|
|
446
|
-
|
|
447
|
-
|
|
445
|
+
react_2.default.createElement("span", null, "Click to upload")),
|
|
446
|
+
react_2.default.createElement("input", __assign({}, getInputProps(), { ref: inputRef, type: "file", accept: acceptString, className: "sr-only hidden", onChange: function (e) {
|
|
448
447
|
var _a;
|
|
449
448
|
var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
|
|
450
449
|
if (file)
|
|
451
450
|
handleFileSelect(file);
|
|
452
451
|
}, disabled: uploading }))),
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
uploading && (
|
|
456
|
-
|
|
457
|
-
|
|
452
|
+
react_2.default.createElement("p", { className: "text-xs ".concat(textColor) }, "or drag and drop"),
|
|
453
|
+
react_2.default.createElement("p", { className: "text-xs ".concat(textColor) }, fileDescription),
|
|
454
|
+
uploading && (react_2.default.createElement("div", { className: "flex justify-center items-center gap-x-2 pt-1" },
|
|
455
|
+
react_2.default.createElement(loading_1.Loading, { sizeClassName: "w-4 h-4" }),
|
|
456
|
+
react_2.default.createElement("p", { className: "text-xs ".concat(textColor) }, "Uploading..."))))));
|
|
458
457
|
})));
|
|
459
458
|
};
|
|
460
459
|
// Media Upload Tiptap Extension
|
|
@@ -496,7 +495,7 @@ var MediaUploadExtension = core_1.Node.create({
|
|
|
496
495
|
];
|
|
497
496
|
},
|
|
498
497
|
addNodeView: function () {
|
|
499
|
-
return (0,
|
|
498
|
+
return (0, react_1.ReactNodeViewRenderer)(MediaUploadComponent);
|
|
500
499
|
},
|
|
501
500
|
addCommands: function () {
|
|
502
501
|
var _this = this;
|
|
@@ -689,42 +688,42 @@ var slashCommands = [
|
|
|
689
688
|
];
|
|
690
689
|
var SlashMenuList = function (_a) {
|
|
691
690
|
var items = _a.items, command = _a.command, selectedIndex = _a.selectedIndex, darkMode = _a.darkMode;
|
|
692
|
-
var selectItem = (0,
|
|
691
|
+
var selectItem = (0, react_2.useCallback)(function (index) {
|
|
693
692
|
var item = items[index];
|
|
694
693
|
if (item) {
|
|
695
694
|
command(item);
|
|
696
695
|
}
|
|
697
696
|
}, [items, command]);
|
|
698
|
-
return (
|
|
697
|
+
return (react_2.default.createElement("div", { className: "rounded-lg shadow-lg border ".concat(darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-300"), style: {
|
|
699
698
|
minWidth: "280px",
|
|
700
699
|
maxHeight: "300px",
|
|
701
700
|
overflowY: "auto",
|
|
702
|
-
} }, items.length ? (items.map(function (item, index) { return (
|
|
701
|
+
} }, items.length ? (items.map(function (item, index) { return (react_2.default.createElement("button", { key: item.id, type: "button", onClick: function () { return selectItem(index); }, className: "w-full text-left px-4 py-2 flex items-center gap-3 ".concat(index === selectedIndex
|
|
703
702
|
? darkMode
|
|
704
703
|
? "bg-gray-700"
|
|
705
704
|
: "bg-gray-100"
|
|
706
705
|
: darkMode
|
|
707
706
|
? "hover:bg-gray-700"
|
|
708
707
|
: "hover:bg-gray-50", " ").concat(index === 0 ? "rounded-t-lg" : "", " ").concat(index === items.length - 1 ? "rounded-b-lg" : "") },
|
|
709
|
-
|
|
710
|
-
|
|
708
|
+
react_2.default.createElement("span", { className: "text-lg w-6 text-center" }, item.icon),
|
|
709
|
+
react_2.default.createElement("span", { className: "text-sm ".concat(darkMode ? "text-gray-200" : "text-gray-700") }, item.label))); })) : (react_2.default.createElement("div", { className: "px-4 py-2 text-sm text-gray-500" }, "No results"))));
|
|
711
710
|
};
|
|
712
711
|
var MarkdownInputContent = function (_a) {
|
|
713
712
|
var innerRef = _a.innerRef, id = _a.id, value = _a.value, label = _a.label, subLabel = _a.subLabel, labelExtra = _a.labelExtra, infoElement = _a.infoElement, placeholder = _a.placeholder, optional = _a.optional, disabled = _a.disabled, containerClassName = _a.containerClassName, heightClassName = _a.heightClassName, onChange = _a.onChange, compress = _a.compress, lib = _a.lib, uploadEndpoint = _a.uploadEndpoint, enableImageUpload = _a.enableImageUpload, enableVideoUpload = _a.enableVideoUpload, darkMode = _a.darkMode, readOnly = _a.readOnly;
|
|
714
|
-
var _b = (0,
|
|
715
|
-
var _c = (0,
|
|
716
|
-
var _d = (0,
|
|
717
|
-
var _e = (0,
|
|
718
|
-
var editorRef =
|
|
719
|
-
var uploadHandlerRef =
|
|
720
|
-
var videoUploadHandlerRef =
|
|
721
|
-
var pendingImagesRef =
|
|
722
|
-
var _f =
|
|
723
|
-
var updatePendingImages = (0,
|
|
713
|
+
var _b = (0, react_2.useState)(""), error = _b[0], setError = _b[1];
|
|
714
|
+
var _c = (0, react_2.useState)(false), showTableMenu = _c[0], setShowTableMenu = _c[1];
|
|
715
|
+
var _d = (0, react_2.useState)(3), tableCols = _d[0], setTableCols = _d[1];
|
|
716
|
+
var _e = (0, react_2.useState)(3), tableRows = _e[0], setTableRows = _e[1];
|
|
717
|
+
var editorRef = react_2.default.useRef(null);
|
|
718
|
+
var uploadHandlerRef = react_2.default.useRef(null);
|
|
719
|
+
var videoUploadHandlerRef = react_2.default.useRef(null);
|
|
720
|
+
var pendingImagesRef = react_2.default.useRef(new Map());
|
|
721
|
+
var _f = react_2.default.useState(0), pendingImagesCount = _f[0], setPendingImagesCount = _f[1];
|
|
722
|
+
var updatePendingImages = (0, react_2.useCallback)(function (updater) {
|
|
724
723
|
updater(pendingImagesRef.current);
|
|
725
724
|
setPendingImagesCount(pendingImagesRef.current.size);
|
|
726
725
|
}, []);
|
|
727
|
-
var _g = (0,
|
|
726
|
+
var _g = (0, react_2.useState)({
|
|
728
727
|
show: false,
|
|
729
728
|
query: "",
|
|
730
729
|
items: [],
|
|
@@ -732,7 +731,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
732
731
|
range: null,
|
|
733
732
|
position: null,
|
|
734
733
|
}), suggestionState = _g[0], setSuggestionState = _g[1];
|
|
735
|
-
var isInternalUpdateRef = (0,
|
|
734
|
+
var isInternalUpdateRef = (0, react_2.useRef)(false);
|
|
736
735
|
var isHeicFile = function (file) {
|
|
737
736
|
var fileName = file.name.toLowerCase();
|
|
738
737
|
var fileType = file.type.toLowerCase();
|
|
@@ -812,7 +811,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
812
811
|
return (videoExtensions.some(function (ext) { return fileName.endsWith(ext); }) ||
|
|
813
812
|
fileType.startsWith("video/"));
|
|
814
813
|
};
|
|
815
|
-
var processFile = (0,
|
|
814
|
+
var processFile = (0, react_2.useCallback)(function (file) { return __awaiter(void 0, void 0, void 0, function () {
|
|
816
815
|
var processedFile, converted, maxFileSize, fileQuality, fileSizeMB, error_3;
|
|
817
816
|
return __generator(this, function (_a) {
|
|
818
817
|
switch (_a.label) {
|
|
@@ -1010,7 +1009,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
1010
1009
|
},
|
|
1011
1010
|
},
|
|
1012
1011
|
});
|
|
1013
|
-
(0,
|
|
1012
|
+
(0, react_2.useEffect)(function () {
|
|
1014
1013
|
if (editor) {
|
|
1015
1014
|
editorRef.current = editor;
|
|
1016
1015
|
uploadHandlerRef.current = function (file) { return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -1082,7 +1081,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
1082
1081
|
}); };
|
|
1083
1082
|
}
|
|
1084
1083
|
}, [editor, compress, lib, uploadEndpoint, processFile]);
|
|
1085
|
-
(0,
|
|
1084
|
+
(0, react_2.useEffect)(function () {
|
|
1086
1085
|
if (!editor || readOnly || disabled)
|
|
1087
1086
|
return;
|
|
1088
1087
|
var handleCheckboxClick = function (event) {
|
|
@@ -1130,7 +1129,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
1130
1129
|
};
|
|
1131
1130
|
}, [editor, readOnly, disabled]);
|
|
1132
1131
|
// Close table menu when clicking outside
|
|
1133
|
-
(0,
|
|
1132
|
+
(0, react_2.useEffect)(function () {
|
|
1134
1133
|
if (!showTableMenu)
|
|
1135
1134
|
return;
|
|
1136
1135
|
var handleClickOutside = function (event) {
|
|
@@ -1143,7 +1142,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
1143
1142
|
return function () { return document.removeEventListener("mousedown", handleClickOutside); };
|
|
1144
1143
|
}, [showTableMenu]);
|
|
1145
1144
|
// Detect slash command manually
|
|
1146
|
-
(0,
|
|
1145
|
+
(0, react_2.useEffect)(function () {
|
|
1147
1146
|
if (!editor || readOnly || disabled)
|
|
1148
1147
|
return;
|
|
1149
1148
|
var handleUpdate = function () {
|
|
@@ -1219,7 +1218,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
1219
1218
|
};
|
|
1220
1219
|
}, [editor, readOnly, disabled, suggestionState.show]);
|
|
1221
1220
|
// Update editor content when value prop changes
|
|
1222
|
-
(0,
|
|
1221
|
+
(0, react_2.useEffect)(function () {
|
|
1223
1222
|
if (editor) {
|
|
1224
1223
|
var html = editor.getHTML();
|
|
1225
1224
|
var currentMarkdown = turndownService.turndown(html);
|
|
@@ -1244,7 +1243,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
1244
1243
|
}
|
|
1245
1244
|
}
|
|
1246
1245
|
}, [value, editor, pendingImagesCount]);
|
|
1247
|
-
(0,
|
|
1246
|
+
(0, react_2.useImperativeHandle)(innerRef, function () {
|
|
1248
1247
|
var methods = {
|
|
1249
1248
|
handleSubmit: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
1250
1249
|
var testCond, errorMsg, textFilter;
|
|
@@ -1392,89 +1391,89 @@ var MarkdownInputContent = function (_a) {
|
|
|
1392
1391
|
if (!editor) {
|
|
1393
1392
|
return null;
|
|
1394
1393
|
}
|
|
1395
|
-
return (
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1394
|
+
return (react_2.default.createElement("div", { className: defaultClassName },
|
|
1395
|
+
react_2.default.createElement("div", { className: "flex w-full" },
|
|
1396
|
+
react_2.default.createElement("div", { className: "flex flex-col" },
|
|
1397
|
+
react_2.default.createElement("label", { className: "block text-sm font-medium ".concat(labelColor) },
|
|
1399
1398
|
label,
|
|
1400
1399
|
" ",
|
|
1401
1400
|
labelExtra),
|
|
1402
|
-
subLabel && (
|
|
1403
|
-
|
|
1404
|
-
!readOnly && infoElement &&
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1401
|
+
subLabel && (react_2.default.createElement("label", { className: "block text-xs font-medium ".concat(subColor, " mb-2") }, subLabel))),
|
|
1402
|
+
react_2.default.createElement("div", { className: "flex-grow" }),
|
|
1403
|
+
!readOnly && infoElement && react_2.default.isValidElement(infoElement) && (react_2.default.createElement("div", { className: "self-center z-10" },
|
|
1404
|
+
react_2.default.createElement(infoWindow_1.InfoWindow, { type: "bottom end", icon: react_2.default.createElement(QuestionMarkCircleIcon_1.default, { className: "w-5 h-5 text-gray-400" }), content: infoElement })))),
|
|
1405
|
+
react_2.default.createElement("div", { id: id },
|
|
1406
|
+
react_2.default.createElement("div", { className: "".concat(error.length > 0 ? "border-red-500" : "", " mt-2 rounded ").concat(darkMode
|
|
1408
1407
|
? "dark-theme dark-editor bg-gray-700"
|
|
1409
1408
|
: !readOnly && "bg-white border border-gray-300") },
|
|
1410
|
-
!readOnly && (
|
|
1409
|
+
!readOnly && (react_2.default.createElement("div", { className: "flex flex-wrap gap-1 p-2 border-b ".concat(darkMode
|
|
1411
1410
|
? "border-gray-600 bg-gray-800"
|
|
1412
1411
|
: "border-gray-200 bg-gray-50") },
|
|
1413
|
-
|
|
1412
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().undo().run(); }, disabled: !editor.can().undo(), className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1414
1413
|
? "text-gray-300 hover:bg-gray-700 disabled:text-gray-600"
|
|
1415
1414
|
: "text-gray-700 hover:bg-gray-200 disabled:text-gray-400"), title: "Undo" }, "\u21B6"),
|
|
1416
|
-
|
|
1415
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().redo().run(); }, disabled: !editor.can().redo(), className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1417
1416
|
? "text-gray-300 hover:bg-gray-700 disabled:text-gray-600"
|
|
1418
1417
|
: "text-gray-700 hover:bg-gray-200 disabled:text-gray-400"), title: "Redo" }, "\u21B7"),
|
|
1419
|
-
|
|
1420
|
-
|
|
1418
|
+
react_2.default.createElement("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
|
|
1419
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().toggleBold().run(); }, className: "px-2 py-1 rounded text-sm font-bold ".concat(editor.isActive("bold")
|
|
1421
1420
|
? darkMode
|
|
1422
1421
|
? "bg-gray-700 text-white"
|
|
1423
1422
|
: "bg-gray-200 text-gray-900"
|
|
1424
1423
|
: darkMode
|
|
1425
1424
|
? "text-gray-300 hover:bg-gray-700"
|
|
1426
1425
|
: "text-gray-700 hover:bg-gray-200"), title: "Bold" }, "B"),
|
|
1427
|
-
|
|
1426
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().toggleItalic().run(); }, className: "px-2 py-1 rounded text-sm italic ".concat(editor.isActive("italic")
|
|
1428
1427
|
? darkMode
|
|
1429
1428
|
? "bg-gray-700 text-white"
|
|
1430
1429
|
: "bg-gray-200 text-gray-900"
|
|
1431
1430
|
: darkMode
|
|
1432
1431
|
? "text-gray-300 hover:bg-gray-700"
|
|
1433
1432
|
: "text-gray-700 hover:bg-gray-200"), title: "Italic" }, "I"),
|
|
1434
|
-
|
|
1433
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().toggleUnderline().run(); }, className: "px-2 py-1 rounded text-sm underline ".concat(editor.isActive("underline")
|
|
1435
1434
|
? darkMode
|
|
1436
1435
|
? "bg-gray-700 text-white"
|
|
1437
1436
|
: "bg-gray-200 text-gray-900"
|
|
1438
1437
|
: darkMode
|
|
1439
1438
|
? "text-gray-300 hover:bg-gray-700"
|
|
1440
1439
|
: "text-gray-700 hover:bg-gray-200"), title: "Underline" }, "U"),
|
|
1441
|
-
|
|
1440
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().toggleStrike().run(); }, className: "px-2 py-1 rounded text-sm line-through ".concat(editor.isActive("strike")
|
|
1442
1441
|
? darkMode
|
|
1443
1442
|
? "bg-gray-700 text-white"
|
|
1444
1443
|
: "bg-gray-200 text-gray-900"
|
|
1445
1444
|
: darkMode
|
|
1446
1445
|
? "text-gray-300 hover:bg-gray-700"
|
|
1447
1446
|
: "text-gray-700 hover:bg-gray-200"), title: "Strikethrough" }, "S"),
|
|
1448
|
-
|
|
1447
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().toggleSuperscript().run(); }, className: "px-2 py-1 rounded text-sm ".concat(editor.isActive("superscript")
|
|
1449
1448
|
? darkMode
|
|
1450
1449
|
? "bg-gray-700 text-white"
|
|
1451
1450
|
: "bg-gray-200 text-gray-900"
|
|
1452
1451
|
: darkMode
|
|
1453
1452
|
? "text-gray-300 hover:bg-gray-700"
|
|
1454
1453
|
: "text-gray-700 hover:bg-gray-200"), title: "Superscript" }, "x\u00B2"),
|
|
1455
|
-
|
|
1454
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().toggleSubscript().run(); }, className: "px-2 py-1 rounded text-sm ".concat(editor.isActive("subscript")
|
|
1456
1455
|
? darkMode
|
|
1457
1456
|
? "bg-gray-700 text-white"
|
|
1458
1457
|
: "bg-gray-200 text-gray-900"
|
|
1459
1458
|
: darkMode
|
|
1460
1459
|
? "text-gray-300 hover:bg-gray-700"
|
|
1461
1460
|
: "text-gray-700 hover:bg-gray-200"), title: "Subscript" }, "x\u2082"),
|
|
1462
|
-
|
|
1463
|
-
|
|
1461
|
+
react_2.default.createElement("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
|
|
1462
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().toggleBulletList().run(); }, className: "px-2 py-1 rounded text-sm ".concat(editor.isActive("bulletList")
|
|
1464
1463
|
? darkMode
|
|
1465
1464
|
? "bg-gray-700 text-white"
|
|
1466
1465
|
: "bg-gray-200 text-gray-900"
|
|
1467
1466
|
: darkMode
|
|
1468
1467
|
? "text-gray-300 hover:bg-gray-700"
|
|
1469
1468
|
: "text-gray-700 hover:bg-gray-200"), title: "Bullet List" }, "\u2022"),
|
|
1470
|
-
|
|
1469
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().toggleOrderedList().run(); }, className: "px-2 py-1 rounded text-sm ".concat(editor.isActive("orderedList")
|
|
1471
1470
|
? darkMode
|
|
1472
1471
|
? "bg-gray-700 text-white"
|
|
1473
1472
|
: "bg-gray-200 text-gray-900"
|
|
1474
1473
|
: darkMode
|
|
1475
1474
|
? "text-gray-300 hover:bg-gray-700"
|
|
1476
1475
|
: "text-gray-700 hover:bg-gray-200"), title: "Numbered List" }, "1."),
|
|
1477
|
-
|
|
1476
|
+
react_2.default.createElement("button", { type: "button", onClick: function () {
|
|
1478
1477
|
if (editor.isActive("taskList")) {
|
|
1479
1478
|
editor.chain().focus().liftListItem("taskItem").run();
|
|
1480
1479
|
}
|
|
@@ -1488,15 +1487,15 @@ var MarkdownInputContent = function (_a) {
|
|
|
1488
1487
|
: darkMode
|
|
1489
1488
|
? "text-gray-300 hover:bg-gray-700"
|
|
1490
1489
|
: "text-gray-700 hover:bg-gray-200"), title: "Task List (Checkbox)" }, "\u2611"),
|
|
1491
|
-
|
|
1490
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().toggleBlockquote().run(); }, className: "px-2 py-1 rounded text-sm ".concat(editor.isActive("blockquote")
|
|
1492
1491
|
? darkMode
|
|
1493
1492
|
? "bg-gray-700 text-white"
|
|
1494
1493
|
: "bg-gray-200 text-gray-900"
|
|
1495
1494
|
: darkMode
|
|
1496
1495
|
? "text-gray-300 hover:bg-gray-700"
|
|
1497
1496
|
: "text-gray-700 hover:bg-gray-200"), title: "Quote" }, "\""),
|
|
1498
|
-
|
|
1499
|
-
|
|
1497
|
+
react_2.default.createElement("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
|
|
1498
|
+
react_2.default.createElement("button", { type: "button", onClick: function () {
|
|
1500
1499
|
return editor.chain().focus().setHeading({ level: 1 }).run();
|
|
1501
1500
|
}, className: "px-2 py-1 rounded text-sm ".concat(editor.isActive("heading", { level: 1 })
|
|
1502
1501
|
? darkMode
|
|
@@ -1505,7 +1504,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
1505
1504
|
: darkMode
|
|
1506
1505
|
? "text-gray-300 hover:bg-gray-700"
|
|
1507
1506
|
: "text-gray-700 hover:bg-gray-200"), title: "Heading 1" }, "H1"),
|
|
1508
|
-
|
|
1507
|
+
react_2.default.createElement("button", { type: "button", onClick: function () {
|
|
1509
1508
|
return editor.chain().focus().setHeading({ level: 2 }).run();
|
|
1510
1509
|
}, className: "px-2 py-1 rounded text-sm ".concat(editor.isActive("heading", { level: 2 })
|
|
1511
1510
|
? darkMode
|
|
@@ -1514,7 +1513,7 @@ var MarkdownInputContent = function (_a) {
|
|
|
1514
1513
|
: darkMode
|
|
1515
1514
|
? "text-gray-300 hover:bg-gray-700"
|
|
1516
1515
|
: "text-gray-700 hover:bg-gray-200"), title: "Heading 2" }, "H2"),
|
|
1517
|
-
|
|
1516
|
+
react_2.default.createElement("button", { type: "button", onClick: function () {
|
|
1518
1517
|
return editor.chain().focus().setHeading({ level: 3 }).run();
|
|
1519
1518
|
}, className: "px-2 py-1 rounded text-sm ".concat(editor.isActive("heading", { level: 3 })
|
|
1520
1519
|
? darkMode
|
|
@@ -1523,40 +1522,40 @@ var MarkdownInputContent = function (_a) {
|
|
|
1523
1522
|
: darkMode
|
|
1524
1523
|
? "text-gray-300 hover:bg-gray-700"
|
|
1525
1524
|
: "text-gray-700 hover:bg-gray-200"), title: "Heading 3" }, "H3"),
|
|
1526
|
-
|
|
1527
|
-
|
|
1525
|
+
react_2.default.createElement("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
|
|
1526
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().setHorizontalRule().run(); }, className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1528
1527
|
? "text-gray-300 hover:bg-gray-700"
|
|
1529
1528
|
: "text-gray-700 hover:bg-gray-200"), title: "Horizontal Rule" }, "\u2500"),
|
|
1530
|
-
!readOnly && (enableImageUpload || enableVideoUpload) && (
|
|
1531
|
-
|
|
1532
|
-
|
|
1529
|
+
!readOnly && (enableImageUpload || enableVideoUpload) && (react_2.default.createElement(react_2.default.Fragment, null,
|
|
1530
|
+
react_2.default.createElement("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
|
|
1531
|
+
react_2.default.createElement("button", { type: "button", onClick: insertMediaUploadNode, className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1533
1532
|
? "text-gray-300 hover:bg-gray-700"
|
|
1534
1533
|
: "text-gray-700 hover:bg-gray-200"), title: enableVideoUpload
|
|
1535
1534
|
? "Upload Image or Video"
|
|
1536
|
-
: "Upload Image" }, enableVideoUpload ? (
|
|
1537
|
-
|
|
1538
|
-
|
|
1535
|
+
: "Upload Image" }, enableVideoUpload ? (react_2.default.createElement(solid_1.VideoCameraIcon, { className: "w-5 h-5" })) : (react_2.default.createElement(PhotoIcon_1.default, { className: "w-5 h-5" }))))),
|
|
1536
|
+
react_2.default.createElement("div", { className: "relative table-menu-container" },
|
|
1537
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return setShowTableMenu(!showTableMenu); }, className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1539
1538
|
? "text-gray-300 hover:bg-gray-700"
|
|
1540
1539
|
: "text-gray-700 hover:bg-gray-200"), title: "Insert Table" },
|
|
1541
|
-
|
|
1542
|
-
showTableMenu && (
|
|
1540
|
+
react_2.default.createElement(TableCellsIcon_1.default, { className: "w-5 h-5" })),
|
|
1541
|
+
showTableMenu && (react_2.default.createElement("div", { className: "absolute left-0 mt-1 p-3 rounded shadow-lg z-50 table-menu-container ".concat(darkMode
|
|
1543
1542
|
? "bg-gray-800 border border-gray-700"
|
|
1544
1543
|
: "bg-white border border-gray-300"), style: { minWidth: "200px" } },
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1544
|
+
react_2.default.createElement("div", { className: "mb-2" },
|
|
1545
|
+
react_2.default.createElement("label", { className: "block text-xs mb-1 ".concat(darkMode ? "text-gray-300" : "text-gray-700") }, "Columns:"),
|
|
1546
|
+
react_2.default.createElement("input", { type: "number", min: "1", max: "10", value: tableCols, onChange: function (e) {
|
|
1548
1547
|
return setTableCols(parseInt(e.target.value) || 1);
|
|
1549
1548
|
}, className: "w-full px-2 py-1 rounded text-sm border ".concat(darkMode
|
|
1550
1549
|
? "bg-gray-700 border-gray-600 text-white"
|
|
1551
1550
|
: "bg-white border-gray-300") })),
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1551
|
+
react_2.default.createElement("div", { className: "mb-2" },
|
|
1552
|
+
react_2.default.createElement("label", { className: "block text-xs mb-1 ".concat(darkMode ? "text-gray-300" : "text-gray-700") }, "Rows:"),
|
|
1553
|
+
react_2.default.createElement("input", { type: "number", min: "1", max: "20", value: tableRows, onChange: function (e) {
|
|
1555
1554
|
return setTableRows(parseInt(e.target.value) || 1);
|
|
1556
1555
|
}, className: "w-full px-2 py-1 rounded text-sm border ".concat(darkMode
|
|
1557
1556
|
? "bg-gray-700 border-gray-600 text-white"
|
|
1558
1557
|
: "bg-white border-gray-300") })),
|
|
1559
|
-
|
|
1558
|
+
react_2.default.createElement("button", { type: "button", onClick: function () {
|
|
1560
1559
|
editor
|
|
1561
1560
|
.chain()
|
|
1562
1561
|
.focus()
|
|
@@ -1570,31 +1569,31 @@ var MarkdownInputContent = function (_a) {
|
|
|
1570
1569
|
}, className: "w-full px-3 py-1 rounded text-sm ".concat(darkMode
|
|
1571
1570
|
? "bg-blue-600 hover:bg-blue-700 text-white"
|
|
1572
1571
|
: "bg-blue-500 hover:bg-blue-600 text-white") }, "Insert Table")))),
|
|
1573
|
-
(editor === null || editor === void 0 ? void 0 : editor.isActive("table")) && (
|
|
1574
|
-
|
|
1575
|
-
|
|
1572
|
+
(editor === null || editor === void 0 ? void 0 : editor.isActive("table")) && (react_2.default.createElement(react_2.default.Fragment, null,
|
|
1573
|
+
react_2.default.createElement("div", { className: "w-px h-6 bg-gray-300 mx-1" }),
|
|
1574
|
+
react_2.default.createElement("button", { type: "button", onClick: function () {
|
|
1576
1575
|
return editor.chain().focus().addColumnAfter().run();
|
|
1577
1576
|
}, className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1578
1577
|
? "text-gray-300 hover:bg-gray-700"
|
|
1579
1578
|
: "text-gray-700 hover:bg-gray-200"), title: "Add Column" }, "+Col"),
|
|
1580
|
-
|
|
1579
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().deleteColumn().run(); }, className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1581
1580
|
? "text-gray-300 hover:bg-gray-700"
|
|
1582
1581
|
: "text-gray-700 hover:bg-gray-200"), title: "Delete Column" }, "-Col"),
|
|
1583
|
-
|
|
1582
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().addRowAfter().run(); }, className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1584
1583
|
? "text-gray-300 hover:bg-gray-700"
|
|
1585
1584
|
: "text-gray-700 hover:bg-gray-200"), title: "Add Row" }, "+Row"),
|
|
1586
|
-
|
|
1585
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().deleteRow().run(); }, className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1587
1586
|
? "text-gray-300 hover:bg-gray-700"
|
|
1588
1587
|
: "text-gray-700 hover:bg-gray-200"), title: "Delete Row" }, "-Row"),
|
|
1589
|
-
|
|
1588
|
+
react_2.default.createElement("button", { type: "button", onClick: function () { return editor.chain().focus().deleteTable().run(); }, className: "px-2 py-1 rounded text-sm ".concat(darkMode
|
|
1590
1589
|
? "text-red-400 hover:bg-gray-700"
|
|
1591
1590
|
: "text-red-600 hover:bg-gray-200"), title: "Delete Table" }, "Del"))))),
|
|
1592
|
-
|
|
1593
|
-
suggestionState.show && !readOnly && suggestionState.position && (
|
|
1591
|
+
react_2.default.createElement(react_1.EditorContent, { editor: editor }),
|
|
1592
|
+
suggestionState.show && !readOnly && suggestionState.position && (react_2.default.createElement("div", { className: "absolute z-50", style: {
|
|
1594
1593
|
top: "".concat(suggestionState.position.top, "px"),
|
|
1595
1594
|
left: "".concat(suggestionState.position.left, "px"),
|
|
1596
1595
|
} },
|
|
1597
|
-
|
|
1596
|
+
react_2.default.createElement(SlashMenuList, { items: suggestionState.items, command: function (item) {
|
|
1598
1597
|
if (editor && suggestionState.range) {
|
|
1599
1598
|
var _a = suggestionState.range, from = _a.from, to = _a.to;
|
|
1600
1599
|
if (from >= 0 && to <= editor.state.doc.content.size) {
|
|
@@ -1613,11 +1612,12 @@ var MarkdownInputContent = function (_a) {
|
|
|
1613
1612
|
});
|
|
1614
1613
|
}
|
|
1615
1614
|
}, selectedIndex: suggestionState.selectedIndex, darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }))))),
|
|
1616
|
-
error &&
|
|
1615
|
+
error && react_2.default.createElement("span", { className: "text-red-500 text-sm" }, error)));
|
|
1617
1616
|
};
|
|
1618
|
-
exports.MarkdownInput = (0,
|
|
1619
|
-
var markdownRef = (0,
|
|
1620
|
-
(0,
|
|
1617
|
+
exports.MarkdownInput = (0, react_2.forwardRef)(function (props, ref) {
|
|
1618
|
+
var markdownRef = (0, react_2.useRef)();
|
|
1619
|
+
(0, react_2.useImperativeHandle)(ref, function () { return ({
|
|
1620
|
+
props: { id: props.id },
|
|
1621
1621
|
handleSubmit: function () {
|
|
1622
1622
|
var _a, _b;
|
|
1623
1623
|
var args = [];
|
|
@@ -1659,6 +1659,6 @@ exports.MarkdownInput = (0, react_3.forwardRef)(function (props, ref) {
|
|
|
1659
1659
|
return (_b = (_a = markdownRef.current) === null || _a === void 0 ? void 0 : _a.uploadPendingImages) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args, false));
|
|
1660
1660
|
},
|
|
1661
1661
|
}); });
|
|
1662
|
-
return
|
|
1662
|
+
return react_2.default.createElement(MarkdownInputContent, __assign({ innerRef: markdownRef }, props));
|
|
1663
1663
|
});
|
|
1664
1664
|
//# sourceMappingURL=index.js.map
|