pds-dev-kit-web-test 2.5.624 → 2.5.626

package/dist/src/desktop/components/Calendar/WeeklyView.js

@@ -51,12 +51,10 @@ var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
 var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
 var timeFormatUtils_1 = require("./timeFormatUtils");
 var WeeklyView = function (_a) {
-    var startOfWeek = _a.startOfWeek, schedules = _a.schedules, config = _a.config;
+    var startOfWeek = _a.startOfWeek;
     var _b = (0, react_i18next_1.useTranslation)(), t = _b.t, i18n = _b.i18n;
-    var _c = (0, CalendarContext_1.useCalendarContext)(), selectedDate = _c.selectedDate, selectedSchedules = _c.selectedSchedules, displayAllDayScheduleMode = _c.displayAllDayScheduleMode, getSchedulesForDate = _c.getSchedulesForDate, isToday = _c.isToday, isDragOverDate = _c.isDragOverDate, handleDateDragOver = _c.handleDateDragOver, handleDateDragLeave = _c.handleDateDragLeave, handleDateDrop = _c.handleDateDrop, handleDateClick = _c.handleDateClick, handleDateDrag = _c.handleDateDrag, handleScheduleDragStart = _c.handleScheduleDragStart, handleScheduleDragEnd = _c.handleScheduleDragEnd, isDraggable = _c.isDraggable, handleScheduleClick = _c.handleScheduleClick, getDayTextByDate = _c.getDayTextByDate;
-    var _d = (0, react_1.useState)(null), timeSelectionStart = _d[0], setTimeSelectionStart = _d[1];
-    var _e = (0, react_1.useState)(null), timeSelectionEnd = _e[0], setTimeSelectionEnd = _e[1];
-    var _f = (0, react_1.useState)(false), isTimeDragging = _f[0], setIsTimeDragging = _f[1];
+    var _c = (0, CalendarContext_1.useCalendarContext)(), selectedDate = _c.selectedDate, selectedSchedules = _c.selectedSchedules, displayAllDayScheduleMode = _c.displayAllDayScheduleMode, getSchedulesForDate = _c.getSchedulesForDate, isToday = _c.isToday, isDragOverDate = _c.isDragOverDate, handleDateDragOver = _c.handleDateDragOver, handleDateDragLeave = _c.handleDateDragLeave, handleDateDrop = _c.handleDateDrop, handleDateClick = _c.handleDateClick, handleScheduleDragStart = _c.handleScheduleDragStart, handleScheduleDragEnd = _c.handleScheduleDragEnd, isDraggable = _c.isDraggable, handleScheduleClick = _c.handleScheduleClick, getDayTextByDate = _c.getDayTextByDate;
+    // Generate calendar dates for weekly view
     var calendarDates = (0, react_1.useMemo)(function () {
         var dates = [];
         var startIndex = startOfWeek === 'monday' ? 1 : 0;
@@ -67,88 +65,6 @@ var WeeklyView = function (_a) {
         }
         return dates;
     }, [selectedDate, startOfWeek]);
-    // 시간 드래그 시작
-    var handleTimeMouseDown = (0, react_1.useCallback)(function (date, hour, e) {
-        var _a;
-        if (!((_a = config === null || config === void 0 ? void 0 : config.DATE) === null || _a === void 0 ? void 0 : _a.DRAG))
-            return;
-        e.preventDefault();
-        var selection = { date: date, hour: hour };
-        setTimeSelectionStart(selection);
-        setTimeSelectionEnd(selection);
-        setIsTimeDragging(true);
-    }, [config]);
-    // 시간 드래그 중
-    var handleTimeMouseEnter = (0, react_1.useCallback)(function (date, hour) {
-        if (!isTimeDragging)
-            return;
-        setTimeSelectionEnd({ date: date, hour: hour });
-    }, [isTimeDragging]);
-    // 드래그 종료 시 콜백 호출
-    (0, react_1.useEffect)(function () {
-        var handleMouseUp = function () {
-            var _a;
-            if (isTimeDragging && timeSelectionStart && timeSelectionEnd && ((_a = config === null || config === void 0 ? void 0 : config.DATE) === null || _a === void 0 ? void 0 : _a.DRAG)) {
-                // 선택된 시간 범위 계산
-                var startDateTime = new Date(timeSelectionStart.date);
-                startDateTime.setHours(timeSelectionStart.hour, 0, 0, 0);
-                var endDateTime = new Date(timeSelectionEnd.date);
-                endDateTime.setHours(timeSelectionEnd.hour, 59, 59, 999);
-                // 실제 시작/종료 시간 (순서 보정)
-                var actualStartTime_1 = new Date(Math.min(startDateTime.getTime(), endDateTime.getTime()));
-                var actualEndTime_1 = new Date(Math.max(startDateTime.getTime(), endDateTime.getTime()));
-                // 선택된 시간 범위에 포함되는 스케줄들 찾기
-                var schedulesInRange_1 = [];
-                schedules.forEach(function (schedule) {
-                    var scheduleStart = new Date(schedule.startDate);
-                    var scheduleEnd = new Date(schedule.endDate);
-                    // 스케줄이 선택된 시간 범위와 겹치는지 확인
-                    if (scheduleStart <= actualEndTime_1 && scheduleEnd >= actualStartTime_1) {
-                        schedulesInRange_1.push(schedule);
-                    }
-                });
-                // 선택된 날짜들 생성 (시간 범위에 포함된 모든 날짜)
-                var selectedDates = [];
-                var currentDate = new Date(actualStartTime_1);
-                currentDate.setHours(0, 0, 0, 0);
-                var endDate = new Date(actualEndTime_1);
-                endDate.setHours(0, 0, 0, 0);
-                while (currentDate <= endDate) {
-                    selectedDates.push(new Date(currentDate));
-                    currentDate.setDate(currentDate.getDate() + 1);
-                }
-                handleDateDrag({
-                    action: 'DRAG',
-                    target: 'DATE',
-                    dates: selectedDates,
-                    schedules: schedulesInRange_1,
-                    startDate: actualStartTime_1.toISOString(),
-                    endDate: actualEndTime_1.toISOString()
-                });
-            }
-            setIsTimeDragging(false);
-            setTimeSelectionStart(null);
-            setTimeSelectionEnd(null);
-        };
-        if (isTimeDragging) {
-            document.addEventListener('mouseup', handleMouseUp);
-            return function () { return document.removeEventListener('mouseup', handleMouseUp); };
-        }
-    }, [isTimeDragging, timeSelectionStart, timeSelectionEnd, config, schedules]);
-    // 선택한 시간이 드래그 범위에 포함되는지 확인
-    var isTimeSlotInDragRange = (0, react_1.useCallback)(function (date, hour) {
-        if (!timeSelectionStart || !timeSelectionEnd)
-            return false;
-        var slotDateTime = new Date(date);
-        slotDateTime.setHours(hour, 0, 0, 0);
-        var startDateTime = new Date(timeSelectionStart.date);
-        startDateTime.setHours(timeSelectionStart.hour, 0, 0, 0);
-        var endDateTime = new Date(timeSelectionEnd.date);
-        endDateTime.setHours(timeSelectionEnd.hour, 0, 0, 0);
-        var actualStartTime = Math.min(startDateTime.getTime(), endDateTime.getTime());
-        var actualEndTime = Math.max(startDateTime.getTime(), endDateTime.getTime());
-        return slotDateTime.getTime() >= actualStartTime && slotDateTime.getTime() <= actualEndTime;
-    }, [timeSelectionStart, timeSelectionEnd]);
     return ((0, jsx_runtime_1.jsxs)(S_WeeklyContainer, { children: [(0, jsx_runtime_1.jsxs)(S_WeeklyHeader, { children: [(0, jsx_runtime_1.jsx)(S_TimeColumnHeader, {}), calendarDates.map(function (date, index) {
                         var dayText = getDayTextByDate(date);
                         var dateText = t('str_calendar_weekly_date', {
@@ -161,7 +77,7 @@ var WeeklyView = function (_a) {
                                     var timeSlotDate = new Date(date);
                                     timeSlotDate.setHours(hour, 0, 0, 0);
                                     var isDragOver = (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime();
-                                    return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": isDragOver, "$isDraggable": isDraggable, "$isInTimeDragRange": isTimeSlotInDragRange(date, hour), "$isTimeDragging": isTimeDragging, onClick: function () { return handleDateClick(date, {}); }, onDragOver: function (e) { return handleDateDragOver(timeSlotDate, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(timeSlotDate, e); }, onMouseDown: function (e) { return handleTimeMouseDown(date, hour, e); }, onMouseEnter: function () { return handleTimeMouseEnter(date, hour); } }, { children: hour === 0 && ((0, jsx_runtime_1.jsx)(TimeBasedScheduleItem_1.TimeBasedScheduleItem, { schedules: getSchedulesForDate(date), selectedSchedules: selectedSchedules, isDraggable: isDraggable, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }), dayIndex));
+                                    return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": isDragOver, "$isDraggable": isDraggable, onClick: function () { return handleDateClick(date, {}); }, onDragOver: function (e) { return handleDateDragOver(timeSlotDate, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(timeSlotDate, e); } }, { children: hour === 0 && ((0, jsx_runtime_1.jsx)(TimeBasedScheduleItem_1.TimeBasedScheduleItem, { schedules: getSchedulesForDate(date), selectedSchedules: selectedSchedules, isDraggable: isDraggable, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }), dayIndex));
                                 }) })] }, hour)); })] }))] }));
 };
 exports.WeeklyView = WeeklyView;
@@ -185,19 +101,13 @@ var S_TimeLabel = styled_components_1.default.div(templateObject_8 || (templateO
     return theme.ui_cpnt_divider;
 });
 var S_TimeSlots = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
-var S_TimeSlot = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: ", ";\n  min-width: 0;\n  overflow: visible;\n  position: relative;\n  user-select: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: ", ";\n  min-width: 0;\n  overflow: visible;\n  position: relative;\n  user-select: ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
-    if (props.$isInTimeDragRange)
-        return props.theme.ui_cpnt_sheet_base;
-    if (props.$isDragOver)
-        return props.theme.ui_cpnt_sheet_base;
-    return 'transparent';
-}, function (_a) {
+var S_TimeSlot = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: default;\n  min-width: 0;\n  overflow: visible;\n  position: relative;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border-bottom: 1px solid ", ";\n  border-right: 1px solid ", ";\n  cursor: default;\n  min-width: 0;\n  overflow: visible;\n  position: relative;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) { return (props.$isDragOver ? props.theme.ui_cpnt_sheet_base : 'transparent'); }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_divider;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_divider;
-}, function (props) { return (props.$isTimeDragging ? 'grabbing' : 'default'); }, function (props) { return (props.$isTimeDragging ? 'none' : 'auto'); }, function (_a) {
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_sheet_base;
 });

package/dist/src/desktop/components/Calendar/calendarUtils.js

@@ -1,12 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toUTC = exports.getHeaderText = exports.calculateDateRange = exports.calculateIsAllDay = void 0;
-var i18n_1 = __importDefault(require("../../../common/services/i18n"));
 var dateHelper_1 = require("../../../common/utils/dateHelper");
-var constants_1 = require("./constants");
 /**
  * 일정이 종일 일정인지 확인하는 함수
  * @param startDate 시작 날짜
@@ -27,16 +22,16 @@ var calculateIsAllDay = function (startDate, endDate) {
 exports.calculateIsAllDay = calculateIsAllDay;
 var calculateDateRange = function (viewType, baseDate) {
     switch (viewType) {
-        case 'str_fm_day':
+        case 'DAILY':
             return { startDate: baseDate, endDate: baseDate };
-        case 'str_fm_week': {
+        case 'WEEKLY': {
             var start = new Date(baseDate);
             start.setDate(baseDate.getDate() - baseDate.getDay());
             var end = new Date(start);
             end.setDate(start.getDate() + 6);
             return { startDate: start, endDate: end };
         }
-        case 'str_fm_month': {
+        case 'MONTHLY': {
             var startDate = new Date(baseDate.getFullYear(), baseDate.getMonth(), 1);
             // 실제 MonthlyView에서 보여지는 날짜 배열을 구함
             var days = dateHelper_1.DateHelper.getCalendarDatesForCalendar(startDate, 'sunday');
@@ -45,7 +40,7 @@ var calculateDateRange = function (viewType, baseDate) {
                 endDate: days[days.length - 1]
             };
         }
-        case 'str_fm_year':
+        case 'YEARLY':
             return {
                 startDate: new Date(baseDate.getFullYear(), 0, 1),
                 endDate: new Date(baseDate.getFullYear(), 11, 31)
@@ -68,21 +63,16 @@ var getHeaderText = function (viewType, selectedDate, t) {
     var year = selectedDate.getFullYear();
     var monthNumber = selectedDate.getMonth() + 1;
     var day = selectedDate.getDate();
-    var locale = (0, constants_1.getLocaleFromLang)(i18n_1.default.language);
-    // For English locale, use month names instead of numbers for WEEKLY and MONTHLY views
-    var monthValue = locale === 'en-US' && (viewType === 'str_fm_week' || viewType === 'str_fm_month')
-        ? t("calendar_month_".concat(monthNumber))
-        : monthNumber;
-    if (viewType === 'str_fm_day') {
+    if (viewType === 'DAILY') {
         return t('str_calendar_daily_header', { year: year, month: monthNumber, day: day });
     }
-    if (viewType === 'str_fm_week') {
-        return t('str_calendar_weekly_header', { year: year, month: monthValue });
+    if (viewType === 'WEEKLY') {
+        return t('str_calendar_weekly_header', { year: year, month: monthNumber });
     }
-    if (viewType === 'str_fm_month') {
-        return t('str_calendar_monthly_header', { year: year, month: monthValue });
+    if (viewType === 'MONTHLY') {
+        return t('str_calendar_monthly_header', { year: year, month: monthNumber });
     }
-    if (viewType === 'str_fm_year') {
+    if (viewType === 'YEARLY') {
         return t('str_calendar_yearly_header', { year: year });
     }
     return '';

package/dist/src/desktop/components/Calendar/types.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export type CalendarViewType = 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year';
+export type CalendarViewType = 'MONTHLY' | 'WEEKLY' | 'DAILY' | 'YEARLY';
 export type displayAllDayScheduleMode = 'none' | 'use';
 export type StartOfWeek = 'sunday' | 'monday';
 export type TodayBtnMode = 'none' | 'use';
-export type ActionType = 'CLICK' | 'CLICK_WITH_SHIFT_KEY_DOWN' | 'DELETE_KEY_DOWN' | 'DRAG';
+export type ActionType = 'CLICK' | 'CLICK_WITH_SHIFT_KEY_DOWN' | 'DELETE_KEY_DOWN' | 'DRAG' | 'DOUBLE_CLICK';
 export type TargetType = 'SCHEDULE' | 'DATE';
 export type Action = {
     action: ActionType;
@@ -40,8 +40,8 @@ export type CalendarAction = {
     };
 };
 export type CalendarProps = {
-    defaultViewType?: CalendarViewType;
-    viewTypes?: CalendarViewType[];
+    defaultViewType?: CalendarViewType | 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year';
+    viewTypes?: (CalendarViewType | 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year')[];
     displayAllDayScheduleMode?: displayAllDayScheduleMode;
     startOfWeek?: StartOfWeek;
     todayBtnMode?: TodayBtnMode;
@@ -59,7 +59,3 @@ export type EventItemProps = {
     onDoubleClick: (schedule: Schedule) => void;
     isSelected?: boolean;
 };
-export type TimeSelection = {
-    date: Date;
-    hour: number;
-};

package/dist/src/desktop/components/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export interface ImageUploadResult {
+    location?: string;
+    error?: unknown;
+}
+export type ImageUploadHandler = (file: File) => Promise<ImageUploadResult>;
+/**
+ * NOTE
+ * toolbar에 사용하고싶은 옵션들을 배열 내부에 차례대로 작성해줍니다.
+ * toolbar 옵션은 아래 링크를 참고해주세요.
+ * https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+ * ex) 'undo | redo' => ['undo', 'redo']
+ */
+export type RichTextEditorProps = {
+    toolbar: string[];
+    defaultText?: string;
+    hintText?: string;
+    requirementMode?: 'none' | 'use';
+    maxLength?: number;
+    minLength?: number;
+    maxFileSize?: number;
+    lengthValidationText?: string;
+    requiredValidationText?: string;
+    fileSizeValidationText?: string;
+    height?: string | number;
+    tinymceScriptSrc?: string;
+    onChange?: (value: string) => void;
+    onBlur?: (value: string, count: number) => void;
+    onCountCharacter?: (count: number) => void;
+    onImageUpload?: ImageUploadHandler;
+    isLoadingUsed?: boolean;
+};
+declare function RichTextEditor({ toolbar, defaultText, hintText, maxLength, minLength, maxFileSize, requirementMode, lengthValidationText, requiredValidationText, fileSizeValidationText, height, tinymceScriptSrc, onChange, onBlur, onCountCharacter, onImageUpload, isLoadingUsed }: RichTextEditorProps): JSX.Element;
+export default RichTextEditor;

package/dist/src/desktop/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,268 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable prefer-promise-reject-errors */
+var tinymce_react_1 = require("@tinymce/tinymce-react");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var uuid_1 = require("uuid");
+var components_1 = require("../../../common/components");
+var styled_components_1 = __importStar(require("styled-components"));
+var DesktopAlertDialog_1 = require("../DesktopAlertDialog");
+function RichTextEditor(_a) {
+    var _this = this;
+    var _b;
+    var toolbar = _a.toolbar, defaultText = _a.defaultText, hintText = _a.hintText, maxLength = _a.maxLength, minLength = _a.minLength, maxFileSize = _a.maxFileSize, _c = _a.requirementMode, requirementMode = _c === void 0 ? 'none' : _c, lengthValidationText = _a.lengthValidationText, requiredValidationText = _a.requiredValidationText, fileSizeValidationText = _a.fileSizeValidationText, _d = _a.height, height = _d === void 0 ? 600 : _d, _e = _a.tinymceScriptSrc, tinymceScriptSrc = _e === void 0 ? '/tinymce/tinymce.min.js' : _e, onChange = _a.onChange, onBlur = _a.onBlur, onCountCharacter = _a.onCountCharacter, onImageUpload = _a.onImageUpload, _f = _a.isLoadingUsed, isLoadingUsed = _f === void 0 ? true : _f;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var _g = (0, react_1.useState)(0), count = _g[0], setCount = _g[1];
+    var _h = (0, react_1.useState)(true), isEditorLoading = _h[0], setIsEditorLoading = _h[1];
+    var _j = (0, react_1.useState)(false), isFileValidationAlertDialogOpen = _j[0], setIsFilValidationAlertDialogOpen = _j[1];
+    var editorRef = (0, react_1.useRef)(null);
+    var isEditorDirty = (0, react_1.useRef)(false);
+    var editorContent = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.getContent();
+    var theme = (0, styled_components_1.useTheme)();
+    var useDarkMode = theme.mode === 'dark';
+    var validationText = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    (0, react_1.useEffect)(function () {
+        if (defaultText && defaultText.length === 0) {
+            setCount(defaultText.length);
+        }
+    }, [defaultText]);
+    var handleInit = function (evt, editor) {
+        if (isLoadingUsed) {
+            setIsEditorLoading(false);
+        }
+        editorRef.current = editor;
+        var isSourceCodeToolActive = toolbar.some(function (group) {
+            var tools = group.split(' ');
+            return tools.includes('code');
+        });
+        if (isSourceCodeToolActive) {
+            var container = editor.getContainer();
+            var sourceCodeButton = container.querySelector('[aria-label="Source code"]');
+            if (sourceCodeButton instanceof HTMLElement) {
+                sourceCodeButton.style.width = 'fit-content';
+                sourceCodeButton.style.display = 'flex';
+                sourceCodeButton.style.alignItems = 'center';
+                var textElement = document.createElement('span');
+                textElement.innerHTML = 'HTML';
+                textElement.style.fontWeight = 'bold';
+                sourceCodeButton.append(textElement);
+            }
+        }
+    };
+    var handleEditorValueChange = function (value, editor) {
+        var wordCount = editor.plugins.wordcount;
+        if (wordCount) {
+            var charCount = wordCount.body.getCharacterCount();
+            onCountCharacter === null || onCountCharacter === void 0 ? void 0 : onCountCharacter(charCount);
+            setCount(charCount);
+        }
+        isEditorDirty.current = true;
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    var handleEditorBlur = function () {
+        var _a, _b;
+        var editorContent = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getContent();
+        var wordCount = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.plugins.wordcount;
+        if (editorContent && onBlur) {
+            onBlur(editorContent, (wordCount === null || wordCount === void 0 ? void 0 : wordCount.body.getCharacterCount()) || 0);
+        }
+    };
+    var handleFileChangeByFilePicker = function (cb) {
+        var input = document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('accept', 'image/*');
+        input.addEventListener('change', function () { return __awaiter(_this, void 0, void 0, function () {
+            var file, result, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        file = input === null || input === void 0 ? void 0 : input.files[0];
+                        if (!file)
+                            return [2 /*return*/];
+                        if (maxFileSize && file.size > maxFileSize * 1024 * 1024) {
+                            setIsFilValidationAlertDialogOpen(true);
+                            return [2 /*return*/];
+                        }
+                        if (!onImageUpload) return [3 /*break*/, 4];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, onImageUpload(file)];
+                    case 2:
+                        result = _a.sent();
+                        if (result.location) {
+                            cb(result.location, { title: file.name, alt: 'image' });
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        return [2 /*return*/, Promise.reject(new Error('Request failed'))];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); });
+        input.click();
+    };
+    var handleUploadImageByDragAndDrop = function (blobInfo) { return __awaiter(_this, void 0, void 0, function () {
+        var convertedFile, result, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (maxFileSize && blobInfo.blob().size > maxFileSize * 1024 * 1024) {
+                        setIsFilValidationAlertDialogOpen(true);
+                        return [2 /*return*/, Promise.reject({ remove: true })];
+                    }
+                    if (blobInfo.blobUri().startsWith('blob')) {
+                        convertedFile = new File([blobInfo.blob()], (0, uuid_1.v4)());
+                    }
+                    if (!(convertedFile && onImageUpload)) return [3 /*break*/, 5];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, onImageUpload(convertedFile)];
+                case 2:
+                    result = _a.sent();
+                    if (result.location) {
+                        return [2 /*return*/, Promise.resolve(result.location)];
+                    }
+                    return [2 /*return*/, Promise.reject({ remove: true })];
+                case 3:
+                    error_2 = _a.sent();
+                    return [2 /*return*/, Promise.reject({ remove: true })];
+                case 4: return [3 /*break*/, 6];
+                case 5: return [2 /*return*/, Promise.reject({ remove: true })];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    if (requirementMode === 'use' &&
+        isEditorDirty.current &&
+        (!editorContent || editorContent.length === 0)) {
+        validationText = (0, jsx_runtime_1.jsx)(S_Error, { children: requiredValidationText });
+    }
+    if (minLength && count > 0 && count < minLength) {
+        validationText = (0, jsx_runtime_1.jsx)(S_Error, { children: lengthValidationText });
+    }
+    if (maxLength && count > 0 && count > maxLength) {
+        validationText = (0, jsx_runtime_1.jsx)(S_Error, { children: lengthValidationText });
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_Editor, { children: [isEditorLoading && isLoadingUsed && ((0, jsx_runtime_1.jsx)(S_LoadingWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, {}) })), (0, jsx_runtime_1.jsx)(tinymce_react_1.Editor, { tinymceScriptSrc: tinymceScriptSrc, onInit: handleInit, onEditorChange: handleEditorValueChange, initialValue: defaultText, init: {
+                            menubar: false,
+                            promotion: false,
+                            branding: false,
+                            elementpath: false,
+                            plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons',
+                            editimage_cors_hosts: ['picsum.photos'],
+                            toolbar: toolbar.join(' | '),
+                            toolbar_sticky: false,
+                            toolbar_sticky_offset: 108,
+                            autosave_ask_before_unload: true,
+                            placeholder: hintText,
+                            autosave_interval: '30s',
+                            autosave_prefix: '{path}{query}-{id}-',
+                            autosave_restore_when_empty: false,
+                            autosave_retention: '2m',
+                            image_advtab: false,
+                            image_title: true,
+                            file_picker_types: 'image',
+                            importcss_append: true,
+                            file_picker_callback: handleFileChangeByFilePicker,
+                            images_upload_handler: handleUploadImageByDragAndDrop,
+                            height: height,
+                            image_caption: true,
+                            noneditable_class: 'mceNonEditable',
+                            toolbar_mode: 'wrap',
+                            skin: useDarkMode ? 'oxide-dark' : 'oxide',
+                            content_css: useDarkMode ? 'dark' : 'default',
+                            indent: false,
+                            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px } img { height: auto; max-width: 100%; } p, div { overflow: hidden; } pre { white-space: pre-wrap; }',
+                            setup: function (editor) {
+                                editor.on('blur', handleEditorBlur);
+                            }
+                        } }), validationText] }), isFileValidationAlertDialogOpen && ((0, jsx_runtime_1.jsx)(DesktopAlertDialog_1.DesktopAlertDialog, { contentText: fileSizeValidationText, tBtn1Text: t('str_confirm'), onClickTBtn1: function () { return setIsFilValidationAlertDialogOpen(false); } }))] }));
+}
+var S_Editor = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 500px;\n  position: relative;\n\n  .tox-statusbar__wordcount {\n    visibility: hidden;\n  }\n"], ["\n  min-height: 500px;\n  position: relative;\n\n  .tox-statusbar__wordcount {\n    visibility: hidden;\n  }\n"])));
+var S_LoadingWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1000;\n"], ["\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1000;\n"])));
+var S_Error = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_text_error;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+exports.default = RichTextEditor;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/components/RichTextEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RichTextEditor } from './RichTextEditor';
+export type { RichTextEditorProps, ImageUploadHandler, ImageUploadResult } from './RichTextEditor';

package/dist/src/desktop/components/RichTextEditor/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextEditor = void 0;
+var RichTextEditor_1 = require("./RichTextEditor");
+Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return __importDefault(RichTextEditor_1).default; } });

package/dist/src/desktop/components/index.d.ts

@@ -37,6 +37,7 @@ import { PriceTextField } from './PriceTextField';
 import { PriceTextLabel } from './PriceTextLabel';
 import { Radio } from './Radio';
 import { ReactionButton } from './ReactionButton';
+import { RichTextEditor } from './RichTextEditor';
 import { SegmentedButtonGroup } from './SegmentedButtonGroup';
 import { Select } from './Select';
 import { Slider } from './Slider';
@@ -51,4 +52,4 @@ import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, PriceTextField, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, Snackbar, StatusBlock, TextButton, TextField, TextLabel, PriceTextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab, Calendar };
+export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, PriceTextField, Radio, ReactionButton, RichTextEditor, SegmentedButtonGroup, Select, Slider, Snackbar, StatusBlock, TextButton, TextField, TextLabel, PriceTextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab, Calendar };

package/dist/src/desktop/components/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.PriceTextLabel = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PriceTextField = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
-exports.Calendar = exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = void 0;
+exports.UploadMainButton = exports.UploadIconButton = exports.PriceTextLabel = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.RichTextEditor = exports.ReactionButton = exports.Radio = exports.PriceTextField = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.Calendar = exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
@@ -81,6 +81,8 @@ var Radio_1 = require("./Radio");
 Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
 var ReactionButton_1 = require("./ReactionButton");
 Object.defineProperty(exports, "ReactionButton", { enumerable: true, get: function () { return ReactionButton_1.ReactionButton; } });
+var RichTextEditor_1 = require("./RichTextEditor");
+Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return RichTextEditor_1.RichTextEditor; } });
 var SegmentedButtonGroup_1 = require("./SegmentedButtonGroup");
 Object.defineProperty(exports, "SegmentedButtonGroup", { enumerable: true, get: function () { return SegmentedButtonGroup_1.SegmentedButtonGroup; } });
 var Select_1 = require("./Select");

package/dist/src/desktop/index.d.ts

@@ -8,5 +8,5 @@ export { ContainersBox as WSContainersBox } from './layout/LayoutWS/ContainersBo
 export { LayoutWT } from './layout/LayoutWT';
 export { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 export { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
-export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, BoxItem as D_BoxItem, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, Snackbar as D_Snackbar, StatusBlock as D_StatusBlock, TextButton as D_TextButton, PriceTextField as D_PriceTextField, TextField as D_TextField, TextLabel as D_TextLabel, PriceTextLabel as D_PriceTextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab, Calendar as D_Calendar } from './components';
+export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, BoxItem as D_BoxItem, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, RichTextEditor as D_RichTextEditor, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, Snackbar as D_Snackbar, StatusBlock as D_StatusBlock, TextButton as D_TextButton, PriceTextField as D_PriceTextField, TextField as D_TextField, TextLabel as D_TextLabel, PriceTextLabel as D_PriceTextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab, Calendar as D_Calendar } from './components';
 export { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopBasicModalWithTab as D_DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTutorialModal as D_DesktopTutorialModal, DesktopTutorialModalInfoType, SectionSheet as D_SectionSheet } from './panels';