@topconsultnpm/sdkui-react 6.19.0-dev1.35 → 6.19.0-dev1.37

package/lib/components/editors/TMHtmlEditor.d.ts

@@ -1,4 +1,5 @@
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
+export declare const sanitizeAndFormatComment: (raw?: string) => string;
 export interface ITMHtmlEditor {
     /** Width of the editor (e.g., '100%', '500px') */
     width?: string;
@@ -28,6 +29,10 @@ export interface ITMHtmlEditor {
     toolbarMode?: 'compact' | 'expanded';
     /** If true, the editor will be focused on mount */
     autoFocus?: boolean;
+    /** Maximum number of characters allowed in the editor */
+    maxLength?: number;
+    /** If true, displays a character count below the editor */
+    showCount?: boolean;
 }
 declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
 export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -4,8 +4,33 @@ import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
 import ReactDOM from 'react-dom';
 import { SDKUI_Localizator } from '../../helper';
 import TMVilViewer from '../base/TMVilViewer';
+import { TMMessageBoxManager, ButtonNames } from '../base/TMPopUp';
+import TMTooltip from '../base/TMTooltip';
+import { useDeviceType, DeviceType } from '../base/TMDeviceProvider';
+export const sanitizeAndFormatComment = (raw = "") => {
+    if (!raw)
+        return "";
+    let cleanComment = raw
+        // Replace </p> with '' only if followed by <ol> or <ul>
+        .replace(/<\/p>(?=\s*<(ol|ul)>)/gi, '')
+        // Replace all other </p> with '\r\n'
+        .replace(/<\/p>/gi, '\r\n')
+        // Remove all <p> tags
+        .replace(/<p>/gi, '')
+        // Remove all <br> tags
+        .replace(/<br>/gi, '')
+        // Trim whitespace
+        .trim();
+    // Remove dangerous HTML elements
+    cleanComment = cleanComment.replace(/<(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi, '');
+    return cleanComment;
+};
 const TMHtmlEditor = (props) => {
-    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false } = props;
+    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false, maxLength = 1000, showCount = true, } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     // Ref for HtmlEditor instance
     const editorRef = useRef(null);
     // State for editor enable/disable
@@ -14,13 +39,15 @@ const TMHtmlEditor = (props) => {
     const [markup, setMarkup] = useState(initialMarkup);
     // State to track the position (x, y coordinates) where the custom context menu should be displayed.
     const [contextMenuPos, setContextMenuPos] = useState(null);
-    // State to indicate whether a paste operation is currently in progress
-    const [isPasting, setIsPasting] = useState(false);
+    // State to track remaining characters
+    const [charactersRemaining, setCharactersRemaining] = useState(maxLength - initialMarkup.length);
+    useEffect(() => {
+        const cleanedMarkup = sanitizeAndFormatComment(markup);
+        setCharactersRemaining(maxLength - cleanedMarkup.length);
+    }, [markup, maxLength]);
     // Function to read text from the clipboard, format it, and paste into the Quill editor
     const pasteFromClipboard = async () => {
         try {
-            // Set flag to indicate paste operation is in progress
-            setIsPasting(true);
             // Read plain text from the clipboard asynchronously
             let text = await navigator.clipboard.readText();
             text = '<p>' + text.replace(/\r\n/g, '</p><p>') + '</p>';
@@ -52,10 +79,6 @@ const TMHtmlEditor = (props) => {
             // Log any errors that might occur during clipboard access or pasting
             console.warn('Clipboard paste failed:', err);
         }
-        finally {
-            // Reset paste state after a short delay to restore UI state
-            setTimeout(() => setIsPasting(false), 500);
-        }
     };
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -116,7 +139,7 @@ const TMHtmlEditor = (props) => {
     }, [autoFocus]);
     // Memoized check for validation errors
     const hasValidationErrors = useMemo(() => {
-        return !isPasting && validationItems && validationItems.length > 0;
+        return validationItems && validationItems.length > 0;
     }, [validationItems]);
     // Handler function triggered by the context menu's "Paste" action
     const handlePaste = async () => {
@@ -125,9 +148,44 @@ const TMHtmlEditor = (props) => {
         // Close the custom context menu after pasting
         setContextMenuPos(null);
     };
-    return (_jsxs("div", { style: { height: hasValidationErrors ? `calc(${height} - 30px)` : "100%", width: width }, onContextMenu: handleContextMenu, children: [_jsx("div", { className: "custom-mentions-wrapper", style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", width: "100%", height: "100%" }, children: _jsx(HtmlEditor, { ref: editorRef, placeholder: SDKUI_Localizator.TypeAMessage + "...", width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none", fontSize: '1rem' }, children: isEditorEnabled && (toolbarMode === 'compact' ?
+    return (_jsxs("div", { style: {
+            height: height,
+            width: width
+        }, children: [_jsx("div", { className: "custom-mentions-wrapper", onContextMenu: handleContextMenu, style: {
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                    borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161",
+                    width: "100%",
+                    height: `calc(100% - ${showCount ? 15 : 0}px - ${validationItems.length > 0 ? 15 : 0}px)`,
+                }, children: _jsx(HtmlEditor, { ref: editorRef, placeholder: SDKUI_Localizator.TypeAMessage + "...", width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none", fontSize: '1rem' }, children: isEditorEnabled && (toolbarMode === 'compact' ?
                         _jsxs(Toolbar, { multiline: false, children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" })] }) :
-                        _jsxs(Toolbar, { children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" }), _jsx(Item, { name: "image" }), _jsx(Item, { name: "separator" })] })) }) }), !isPasting && validationItems.length > 0 && (_jsx("div", { style: { width: "100%", height: "30px" }, children: _jsx(TMVilViewer, { vil: validationItems }) })), contextMenuPos &&
+                        _jsxs(Toolbar, { children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" }), _jsx(Item, { name: "image" }), _jsx(Item, { name: "separator" })] })) }) }), showCount ? ((() => {
+                const cleanedMarkup = sanitizeAndFormatComment(markup);
+                const showInfoIcon = charactersRemaining !== maxLength;
+                return (_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'flex-end',
+                        fontSize: 12,
+                        color: '#6c757d',
+                        marginTop: 4,
+                        gap: 4,
+                    }, children: [`${Math.max(charactersRemaining, 0)} ${SDKUI_Localizator.CharactersRemaining}`, showInfoIcon && (_jsx(TMTooltip, { content: 'Markup HTML', children: _jsx("span", { className: "dx-icon-codeblock", style: { fontSize: 22, cursor: 'pointer' }, onClick: () => {
+                                    TMMessageBoxManager.show({
+                                        title: 'Markup HTML',
+                                        initialWidth: !isMobile ? '700px' : undefined,
+                                        message: (_jsx("pre", { style: {
+                                                whiteSpace: 'pre-wrap',
+                                                background: '#f5f5f5',
+                                                padding: '12px',
+                                                borderRadius: '6px',
+                                            }, children: cleanedMarkup })),
+                                        resizable: true,
+                                        showToppy: false,
+                                        buttons: [ButtonNames.OK],
+                                    });
+                                } }) }))] }));
+            })()) : null, validationItems.length > 0 && _jsx(TMVilViewer, { vil: validationItems }), contextMenuPos &&
                 ReactDOM.createPortal(_jsxs("div", { style: {
                         position: 'fixed',
                         top: contextMenuPos.y,

package/lib/components/features/blog/TMBlogCommentForm.js

@@ -10,7 +10,7 @@ import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../b
 import TMSpinner from '../../base/TMSpinner';
 import TMTooltip from '../../base/TMTooltip';
 import TMUserAvatar from '../../base/TMUserAvatar';
-import TMHtmlEditor from '../../editors/TMHtmlEditor';
+import TMHtmlEditor, { sanitizeAndFormatComment } from '../../editors/TMHtmlEditor';
 import TMChooserForm from '../../forms/TMChooserForm';
 import TMSaveForm from '../../forms/TMSaveForm';
 const getNonDirectoryFiles = (items, exclude) => {
@@ -28,6 +28,7 @@ const getNonDirectoryFiles = (items, exclude) => {
     });
 };
 const TMBlogCommentForm = (props) => {
+    const maxLength = 1000;
     const { participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, refreshCallback, context, showAttachmentsSection = true, updateShouldSelectLastBlog } = props;
     // Initialize state with combined array
     const [dataSource, setDataSource] = useState(() => [...getNonDirectoryFiles(allFileItems?.items || [], []), ...allArchivedDocumentsFileItems]);
@@ -39,20 +40,18 @@ const TMBlogCommentForm = (props) => {
     const validator = async (params) => {
         let vil = [];
         const { comment } = params;
+        const cleanedMarkup = sanitizeAndFormatComment(comment);
         // Check for empty comment
-        if (!comment || comment.trim() === "") {
+        if (!cleanedMarkup || cleanedMarkup.trim() === "") {
             vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Comment, `${SDK_Localizator.RequiredField}`));
         }
         else {
-            // Imposta la lunghezza massima consentita per il commento
-            const maxLength = 1000;
             // Calcola la lunghezza effettiva del commento inserito
-            const commentLength = comment.length;
-            // Calcola di quanto la lunghezza del commento supera il limite massimo
-            const exceededLength = commentLength - maxLength;
+            const commentLength = cleanedMarkup.length;
+            const exceededChars = commentLength - maxLength;
             // Validate description length (max 1000)
             if (commentLength > maxLength) {
-                vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Comment, `${SDKUI_Localizator.DescriptionLengthExceededMessage.replaceParams(commentLength, maxLength, exceededLength)}`));
+                vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Comment, `${SDKUI_Localizator.DescriptionLengthExceededMessage.replaceParams(exceededChars)}`));
             }
             // Detect dangerous HTML tags
             const tagRegex = /<\/?(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi;
@@ -115,19 +114,7 @@ const TMBlogCommentForm = (props) => {
             // Retrieve the comment from formData, or use an empty string if undefined 
             const comment = formData?.comment ?? "";
             // Clean the comment by removing <p> tags and replacing </p> with line breaks
-            let cleanComment = comment
-                // Replace </p> with '' only if followed by <ol> or <ul>
-                .replace(/<\/p>(?=\s*<(ol|ul)>)/gi, '')
-                // Replace all other </p> with '\r\n'
-                .replace(/<\/p>/gi, '\r\n')
-                // Remove all <p> tags
-                .replace(/<p>/gi, '')
-                // Remove all <br> tags
-                .replace(/<br>/gi, '')
-                // Trim whitespace
-                .trim();
-            // Validate and remove any potentially dangerous HTML tags (like <script>, <iframe>, etc.)
-            cleanComment = cleanComment.replace(/<(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi, '');
+            const cleanComment = sanitizeAndFormatComment(comment);
             // Assign the cleaned comment as the description for the blog post
             blogPost.description = cleanComment ?? "";
             // If there are file items (attachments), process them
@@ -220,7 +207,7 @@ const TMBlogCommentForm = (props) => {
         // Update the state with selected draft items
         setCurrentDraftAttachments(selectedDraftItems);
     };
-    return _jsx(TMSaveForm, { id: 1, title: SDKUI_Localizator.AddNewComment, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: showAttachmentsSection ? "calc(100% - 60px)" : "100%" }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true }) }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
+    return _jsx(TMSaveForm, { id: 1, title: SDKUI_Localizator.AddNewComment, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: showAttachmentsSection ? "calc(100% - 60px)" : "100%" }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true, maxLength: maxLength }) }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
                                         width: 'calc(100% - 60px)',
                                         overflowX: 'auto',
                                         whiteSpace: 'nowrap',
@@ -235,14 +222,22 @@ const TMBlogCommentForm = (props) => {
                                         const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", draft.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", draft.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", draft.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(draft.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(draft.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(draft.lastUpdateTime)] })] }));
                                         return _jsxs("div", { style: {
                                                 display: 'inline-flex',
-                                                alignItems: 'center',
-                                                padding: '8px 12px',
-                                                marginRight: '8px',
+                                                alignItems: 'center', // <-- this centers content vertically
+                                                padding: '4px 8px',
+                                                margin: '4px',
                                                 border: '1px solid #ddd',
                                                 borderRadius: '8px',
+                                                boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                                                cursor: 'pointer',
+                                                fontSize: '0.9rem',
                                                 backgroundColor: '#fff',
-                                                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                                            }, children: [draft.ext ? (_jsx("span", { style: { marginRight: '10px' }, children: getFileIcon(draft.ext, undefined, tooltipContent) })) : (_jsx(IconAttachment, { style: { marginRight: '5px' } })), _jsx("span", { style: { marginRight: '8px' }, children: draft.name }), draft.version && _jsx("span", { style: {
+                                            }, onMouseEnter: (e) => {
+                                                e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.15)';
+                                                e.currentTarget.style.backgroundColor = '#cfcfcf';
+                                            }, onMouseLeave: (e) => {
+                                                e.currentTarget.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
+                                                e.currentTarget.style.backgroundColor = '#fff';
+                                            }, children: [draft.ext ? (_jsx("span", { style: { marginRight: '10px', display: 'flex', alignItems: 'center' }, children: getFileIcon(draft.ext, undefined, tooltipContent) })) : (_jsx(IconAttachment, { style: { marginRight: '5px' } })), _jsx("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: draft.name }), draft.version && (_jsx("span", { style: {
                                                         display: 'inline-flex',
                                                         width: '20px',
                                                         height: '20px',
@@ -254,7 +249,7 @@ const TMBlogCommentForm = (props) => {
                                                         fontWeight: 'bold',
                                                         marginRight: '8px',
                                                         boxShadow: '1px 1px 2px #00000020',
-                                                    }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: draft.version }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.RemoveAttachment, children: _jsx("span", { onClick: () => removeAttachment(draft), style: {
+                                                    }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: draft.version }) })), _jsx(TMTooltip, { content: SDKUI_Localizator.RemoveAttachment, children: _jsx("span", { onClick: () => removeAttachment(draft), style: {
                                                             display: 'inline-flex',
                                                             width: '20px',
                                                             height: '20px',
@@ -265,21 +260,36 @@ const TMBlogCommentForm = (props) => {
                                                             borderRadius: '30px',
                                                             cursor: 'pointer',
                                                             boxShadow: '1px 1px 2px #00000020',
-                                                        }, children: _jsx("span", { style: { fontSize: "15px" }, children: "\u00D7" }) }) })] }, draft.did);
-                                    })) : (_jsx("div", { style: { color: '#999', width: '100%', textAlign: 'center' }, children: SDKUI_Localizator.NoAttachments })) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments, children: _jsx("i", { className: "dx-icon-attach", style: {
-                                            width: '50px',
-                                            height: '50px',
-                                            marginLeft: '10px',
-                                            fontSize: '20px',
-                                            cursor: 'pointer',
-                                            border: '1px solid #ccc',
-                                            borderRadius: '8px',
-                                            backgroundColor: '#f9f9f9',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            transition: 'all 0.2s ease-in-out',
-                                        }, onMouseOver: (e) => (e.currentTarget.style.backgroundColor = '#e6f7ff'), onMouseOut: (e) => (e.currentTarget.style.backgroundColor = '#f9f9f9'), onClick: () => setShowAttachmentsForm(true) }) })] })] }), showAttachmentsForm && _jsx(TMAttachmentsView, { dataSource: dataSource, selectedIDs: currentDraftAttachments.map(draft => draft.id), onChoose: onChoose, onClose: () => setShowAttachmentsForm(false) })] }) });
+                                                        }, children: _jsx("span", { style: { fontSize: '15px' }, children: "\u00D7" }) }) })] }, draft.did);
+                                    })) : (_jsx("div", { style: { color: '#999', width: '100%', textAlign: 'center' }, children: SDKUI_Localizator.NoAttachments })) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments + ": " + currentDraftAttachments.length, children: _jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [_jsx("i", { className: "dx-icon-attach", style: {
+                                                    width: '50px',
+                                                    height: '50px',
+                                                    marginLeft: '10px',
+                                                    fontSize: '20px',
+                                                    cursor: 'pointer',
+                                                    border: '1px solid #ccc',
+                                                    borderRadius: '8px',
+                                                    backgroundColor: '#f9f9f9',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    transition: 'all 0.2s ease-in-out',
+                                                }, onMouseOver: (e) => (e.currentTarget.style.backgroundColor = '#e6f7ff'), onMouseOut: (e) => (e.currentTarget.style.backgroundColor = '#f9f9f9'), onClick: () => setShowAttachmentsForm(true) }), currentDraftAttachments.length > 0 && (_jsx("span", { style: {
+                                                    position: 'absolute',
+                                                    top: '-5px',
+                                                    right: '-5px',
+                                                    backgroundColor: '#203E5A',
+                                                    color: 'white',
+                                                    borderRadius: '50%',
+                                                    minWidth: '20px',
+                                                    height: '20px',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    padding: '0 6px',
+                                                    fontSize: '12px',
+                                                    fontWeight: 'bold',
+                                                }, children: currentDraftAttachments.length > 99 ? '99+' : currentDraftAttachments.length }))] }) })] })] }), showAttachmentsForm && _jsx(TMAttachmentsView, { dataSource: dataSource, selectedIDs: currentDraftAttachments.map(draft => draft.id), onChoose: onChoose, onClose: () => setShowAttachmentsForm(false) })] }) });
 };
 export default TMBlogCommentForm;
 const TMAttachmentsView = (props) => {

package/lib/components/features/search/TMSearchResult.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, TemplateTIDs, DcmtTypeListCacheService, AccessLevels, SystemMIDsAsNumber } from '@topconsultnpm/sdk-ts';
+import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, TemplateTIDs, DcmtTypeListCacheService, AccessLevels, SystemMIDsAsNumber, RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { getCommandsMenuItems, getSelectedDcmtsOrFocused } from './TMSearchResultsMenuItems';
 import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconDelete, IconRefresh, IconMenuVertical, IconDownload, deepCompare, getDataColumnName, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, IconSearchCheck, TMCommandsContextMenu } from '../../../helper';
@@ -83,11 +83,12 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
     const [currentMetadataValues, setCurrentMetadataValues] = useState([]);
     const [dcmtFormLayoutMode, setDcmtFormLayoutMode] = useState(LayoutModes.Update);
     const [isModifiedBatchUpdate, setIsModifiedBatchUpdate] = useState(false);
+    const [sharedDcmtFile, setSharedDcmtFile] = useState(undefined);
     // State to control whether the export form (for exporting to Excel/CSV/txt and others) should be shown
     const [showExportForm, setShowExportForm] = useState(false);
     const [confirmFormat, ConfirmFormatDialog] = useInputCvtFormatDialog();
     const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
-    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync, runOperationAsync } = useDcmtOperations();
+    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync, runOperationAsync, getDcmtFileAsync } = useDcmtOperations();
     const relatedDocuments = useRelatedDocuments({ selectedSearchResult, focusedItem, currentSearchResults });
     const { relatedDcmts, showRelatedDcmtsChooser, archiveType, isOpenDetails, isOpenMaster, isOpenArchiveRelationForm, archiveRelatedDcmtFormTID, archiveRelatedDcmtFormMids, relatedDcmtsChooserDataSource, showPairDcmtsModal, isPairingManyToMany, pairedSearchResults, manyToManyRelations, selectedManyToManyRelation, showManyToManyChooser, manyToManyChooserDataSource, showPairSearchModal, pairSearchModalTargetTID, pairSearchModalParentTID, pairSearchModalParentDID, pairSearchModalRelation, pairSearchModalInputMids, currentTIDHasDetailRelations, currentTIDHasMasterRelations, canArchiveMasterRelation, canArchiveDetailRelation, hasManyToManyRelation, setIsOpenDetails, setIsOpenMaster, setShowRelatedDcmtsChooser, setShowManyToManyChooser, setShowPairDcmtsModal, setShowPairSearchModal, setIsOpenArchiveRelationForm, setArchiveType, setArchiveRelatedDcmtFormTID, setArchiveRelatedDcmtFormMids, pairFloatingActionConfig, pairSearchModalFloatingActionConfig, archiveMasterDocuments, archiveDetailDocuments, pairManyToMany, checkRelatedDcmtsArchiveCapability, checkManyToManyCapability, archiveRelatedDcmtHandler, executeManyToManyPairing, } = relatedDocuments;
     const deviceType = useDeviceType();
@@ -149,12 +150,24 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
         });
     }, [currentMetadataValues]);
     const openFormHandler = (layoutMode) => { setIsOpenDcmtForm(true); setDcmtFormLayoutMode(layoutMode); };
-    const openSharedArchiveHandler = () => {
+    const openSharedArchiveHandler = async () => {
         const dcmts = getSelectedDcmtsOrFocused(selectedItems, focusedItem);
         if (dcmts.length === 0) {
-            ShowAlert({ message: "Nessun documento selezionato", mode: "warning", duration: 3000 });
+            ShowAlert({ message: "Nessun documento selezionato", mode: "warning", title: 'Archivio Condivisa', duration: 3000 });
             return;
         }
+        try {
+            const rfo = new RetrieveFileOptions();
+            rfo.retrieveReason = DcmtOpers.None;
+            rfo.generalRetrieveFormat = GeneralRetrieveFormats.OriginalUnsigned;
+            let dcmtFile = await getDcmtFileAsync({ TID: focusedItem?.TID, DID: focusedItem?.DID }, rfo, 'Archiviazione Condivisa', false, true);
+            if (dcmtFile) {
+                setSharedDcmtFile(dcmtFile?.file);
+            }
+        }
+        catch (error) {
+            ShowAlert({ message: 'Il Documenti ha solo i metadati', mode: "warning", title: 'Archivio Condivisa', duration: 5000 });
+        }
         setIsOpenSharedArchive(true);
     };
     const openTaskFormHandler = (onTaskCreated) => {
@@ -608,7 +621,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                     await onRefreshSearchAsync?.();
                 } }), isOpenSharedArchive && _jsx(TMModal, { title: "Archiviazione condivisa", onClose: () => {
                     setIsOpenSharedArchive(false);
-                }, width: isMobile ? '90%' : '80%', height: isMobile ? '90%' : '80%', children: _jsx(TMArchive, { inputTID: focusedItem?.TID, inputMids: currentMetadataValues.filter(md => md.mid && md.mid > 100).map(md => ({ mid: md.mid, value: md.value ?? '' })), isSharedArchive: true, onSavedAsyncCallback: async (tid, did) => {
+                }, width: isMobile ? '90%' : '80%', height: isMobile ? '90%' : '80%', children: _jsx(TMArchive, { inputTID: focusedItem?.TID, inputMids: currentMetadataValues.filter(md => md.mid && md.mid > 100).map(md => ({ mid: md.mid, value: md.value ?? '' })), isSharedArchive: true, inputFile: sharedDcmtFile, onSavedAsyncCallback: async (tid, did) => {
                         setIsOpenSharedArchive(false);
                         await onRefreshSearchAsync?.();
                     } }) })] }));

package/lib/components/features/search/TMSearchResultsMenuItems.d.ts

@@ -4,7 +4,7 @@ import { TMDataGridContextMenuItem } from '../../base/TMDataGrid';
 import { DcmtInfo, DcmtOperationTypes, DownloadModes, DownloadTypes, SearchResultContext } from '../../../ts';
 export declare const getSelectedDcmtsOrFocused: (selectedItems: Array<any>, focusedItem: any, fileFormat?: FileFormats) => DcmtInfo[];
 export declare const signatureInformationCallback: (isMobile: boolean, inputDcmts: DcmtInfo[] | undefined) => Promise<void>;
-export declare const getCommandsMenuItems: (isMobile: boolean, dtd: DcmtTypeDescriptor | undefined, selectedItems: Array<any>, focusedItem: any, context: SearchResultContext, showFloatingBar: boolean, workingGroupContext: WorkingGroupDescriptor | undefined, showSearch: boolean, setShowFloatingBar: React.Dispatch<React.SetStateAction<boolean>>, openFormHandler: (layoutMode: LayoutModes) => void, openSharedArchiveHandler: () => void, downloadDcmtsAsync: (inputDcmts: DcmtInfo[] | undefined, downloadType: DownloadTypes, downloadMode: DownloadModes, onFileDownloaded?: (dcmtFile: File | undefined) => void, confirmAttachments?: (list: FileDescriptor[]) => Promise<string[] | undefined>) => Promise<void>, runOperationAsync: (inputDcmts: DcmtInfo[] | undefined, dcmtOperationType: DcmtOperationTypes, actionAfterOperationAsync?: () => Promise<void>) => Promise<void>, onRefreshSearchAsync: (() => Promise<void>) | undefined, onRefreshDataRowsAsync: (() => Promise<void>) | undefined, onRefreshAfterAddDcmtToFavs: (() => void) | undefined, confirmFormat: () => Promise<FileFormats>, confirmAttachments: (list: FileDescriptor[]) => Promise<string[] | undefined>, openTaskFormHandler: () => void, openDetailDcmtsFormHandler: (value: boolean) => void, openMasterDcmtsFormHandler: (value: boolean) => void, openBatchUpdateFormHandler: (value: boolean) => void, openExportForm: () => void, handleToggleSearch: () => void, handleSignApprove: () => void, openWGsCopyMoveForm?: ((mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void), openCommentFormCallback?: ((documents: Array<DcmtInfo>) => void), openEditPdf?: ((documents: Array<DcmtInfo>) => void), openAddDocumentForm?: () => void, passToArchiveCallback?: (outputMids: Array<{
+export declare const getCommandsMenuItems: (isMobile: boolean, dtd: DcmtTypeDescriptor | undefined, selectedItems: Array<any>, focusedItem: any, context: SearchResultContext, showFloatingBar: boolean, workingGroupContext: WorkingGroupDescriptor | undefined, showSearch: boolean, setShowFloatingBar: React.Dispatch<React.SetStateAction<boolean>>, openFormHandler: (layoutMode: LayoutModes) => void, openSharedArchiveHandler: () => Promise<void>, downloadDcmtsAsync: (inputDcmts: DcmtInfo[] | undefined, downloadType: DownloadTypes, downloadMode: DownloadModes, onFileDownloaded?: (dcmtFile: File | undefined) => void, confirmAttachments?: (list: FileDescriptor[]) => Promise<string[] | undefined>) => Promise<void>, runOperationAsync: (inputDcmts: DcmtInfo[] | undefined, dcmtOperationType: DcmtOperationTypes, actionAfterOperationAsync?: () => Promise<void>) => Promise<void>, onRefreshSearchAsync: (() => Promise<void>) | undefined, onRefreshDataRowsAsync: (() => Promise<void>) | undefined, onRefreshAfterAddDcmtToFavs: (() => void) | undefined, confirmFormat: () => Promise<FileFormats>, confirmAttachments: (list: FileDescriptor[]) => Promise<string[] | undefined>, openTaskFormHandler: () => void, openDetailDcmtsFormHandler: (value: boolean) => void, openMasterDcmtsFormHandler: (value: boolean) => void, openBatchUpdateFormHandler: (value: boolean) => void, openExportForm: () => void, handleToggleSearch: () => void, handleSignApprove: () => void, openWGsCopyMoveForm?: ((mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void), openCommentFormCallback?: ((documents: Array<DcmtInfo>) => void), openEditPdf?: ((documents: Array<DcmtInfo>) => void), openAddDocumentForm?: () => void, passToArchiveCallback?: (outputMids: Array<{
     mid: number;
     value: string;
 }>) => void, archiveMasterDocuments?: (tid: number | undefined) => Promise<void>, archiveDetailDocuments?: (tid: number | undefined) => Promise<void>, hasMasterRelation?: boolean, hasDetailRelation?: boolean, canArchiveMasterRelation?: boolean, canArchiveDetailRelation?: boolean, pairManyToManyDocuments?: (isPairing: boolean) => Promise<void>, hasManyToManyRelation?: boolean) => Array<TMDataGridContextMenuItem>;

package/lib/components/features/search/TMSearchResultsMenuItems.js

@@ -406,13 +406,13 @@ export const getCommandsMenuItems = (isMobile, dtd, selectedItems, focusedItem,
                     text: "Archiviazione condivisa",
                     operationType: 'singleRow',
                     disabled: disabledForSingleRow(selectedItems, focusedItem),
-                    onClick: () => { openSharedArchiveHandler(); }
+                    onClick: async () => { await openSharedArchiveHandler(); }
                 },
                 {
                     icon: svgToString(_jsx(IconSharedDcmt, {})),
                     text: "Mostra documenti condivisi",
                     operationType: 'multiRow',
-                    disabled: !hasManyToManyRelation || disabledForMultiRow(selectedItems, focusedItem),
+                    disabled: disabledForMultiRow(selectedItems, focusedItem),
                     onClick: () => ShowAlert({ message: "TODO Mostra documenti condivisi", mode: 'info', title: `${"TODO"}`, duration: 3000 })
                 }
             ]

package/lib/helper/SDKUI_Localizator.d.ts

@@ -132,7 +132,7 @@ export declare class SDKUI_Localizator {
     static get DeletionOperationInterrupted(): "Löschvorgang abgebrochen" | "Deletion operation interrupted" | "Operación de eliminación interrumpida" | "Opération de suppression interrompue" | "Operação de exclusão interrompida" | "Operazione di eliminazione interrotta";
     static get Deny(): "Ablehnen" | "Deny" | "Denegar" | "Refuser" | "Negar" | "Negato";
     static get Description(): "Beschreibung" | "Description" | "Descripción" | "Descrição" | "Descrizione";
-    static get DescriptionLengthExceededMessage(): "Die Beschreibung ist zu lang: {{0}}/{{1}} Zeichen ({{2}} zu viel)" | "Description is too long: {{0}}/{{1}} characters ({{2}} too many)" | "La descripción es demasiado larga: {{0}}/{{1}} caracteres ({{2}} de más)" | "La description est trop longue : {{0}}/{{1}} caractères ({{2}} en trop)" | "A descrição é demasiado longa: {{0}}/{{1}} caracteres ({{2}} a mais)" | "La descrizione è troppo lunga: {{0}}/{{1}} caratteri ({{2}} in più)";
+    static get DescriptionLengthExceededMessage(): "Die Beschreibung ist zu lang: {{0}} Zeichen zu viel" | "Description is too long: {{0}} characters too many" | "La descripción es demasiado larga: {{0}} caracteres de más" | "La description est trop longue : {{0}} caractères en trop" | "A descrição é demasiado longa: {{0}} caracteres a mais" | "La descrizione è troppo lunga: {{0}} caratteri in più";
     static get DescriptionTooLongMessage(): "Die Beschreibung ist zu lang: Maximal {{0}' Zeichen" | "Description is too long: Max {{0}} characters" | "La descripción es demasiado larga: Máximo {{0}} caracteres" | "La description est trop longue : Maximum {{0}} caractères" | "A descrição é demasiado longa: Máximo {{0}} caracteres" | "La descrizione è troppo lunga: Massimo {{0}} caratteri";
     static get Design(): "Design" | "Diseño" | "Conception" | "Projeto" | "Progettazione";
     static get Destination(): "Bestimmung" | "Destination" | "Destino" | "Destinazione";

package/lib/helper/SDKUI_Localizator.js

@@ -1278,17 +1278,17 @@ export class SDKUI_Localizator {
     static get DescriptionLengthExceededMessage() {
         switch (this._cultureID) {
             case CultureIDs.De_DE:
-                return "Die Beschreibung ist zu lang: {{0}}/{{1}} Zeichen ({{2}} zu viel)";
+                return "Die Beschreibung ist zu lang: {{0}} Zeichen zu viel";
             case CultureIDs.En_US:
-                return "Description is too long: {{0}}/{{1}} characters ({{2}} too many)";
+                return "Description is too long: {{0}} characters too many";
             case CultureIDs.Es_ES:
-                return "La descripción es demasiado larga: {{0}}/{{1}} caracteres ({{2}} de más)";
+                return "La descripción es demasiado larga: {{0}} caracteres de más";
             case CultureIDs.Fr_FR:
-                return "La description est trop longue : {{0}}/{{1}} caractères ({{2}} en trop)";
+                return "La description est trop longue : {{0}} caractères en trop";
             case CultureIDs.Pt_PT:
-                return "A descrição é demasiado longa: {{0}}/{{1}} caracteres ({{2}} a mais)";
+                return "A descrição é demasiado longa: {{0}} caracteres a mais";
             default:
-                return "La descrizione è troppo lunga: {{0}}/{{1}} caratteri ({{2}} in più)";
+                return "La descrizione è troppo lunga: {{0}} caratteri in più";
         }
     }
     static get DescriptionTooLongMessage() {

package/lib/hooks/useRelatedDocuments.js

@@ -346,9 +346,11 @@ export const useRelatedDocuments = ({ selectedSearchResult, focusedItem, current
         const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
         if (!focusedItem?.TID || !focusedItem?.DID) {
             ShowAlert({
-                message: "Nessun documento selezionato per l'operazione molti-a-molti.",
+                message: isPairing
+                    ? "Nessun documento selezionato per l'abbinamento molti a molti."
+                    : "Nessun documento selezionato per il disabbinamento molti a molti.",
                 mode: 'warning',
-                title: 'Operazione molti-a-molti',
+                title: isPairing ? 'Abbina documenti molti a molti' : 'Disabbina documenti molti a molti',
                 duration: 5000
             });
             return;
@@ -363,9 +365,11 @@ export const useRelatedDocuments = ({ selectedSearchResult, focusedItem, current
         }
         if (!qd) {
             ShowAlert({
-                message: "Nessuna query di recupero associata alla relazione molti-a-molti.",
+                message: isPairing
+                    ? "Nessuna query di recupero associata alla relazione di abbinamento molti a molti."
+                    : "Nessuna query di recupero associata alla relazione di disabbinamento molti a molti.",
                 mode: 'warning',
-                title: 'Operazione molti-a-molti',
+                title: isPairing ? 'Abbina documenti molti a molti' : 'Disabbina documenti molti a molti',
                 duration: 5000
             });
             return;
@@ -470,7 +474,7 @@ export const useRelatedDocuments = ({ selectedSearchResult, focusedItem, current
                 ShowAlert({
                     message: "Nessun documento abbinato trovato.",
                     mode: 'warning',
-                    title: 'Operazione molti-a-molti',
+                    title: 'Disabbina documenti molti a molti',
                     duration: 5000
                 });
                 return;
@@ -494,7 +498,7 @@ export const useRelatedDocuments = ({ selectedSearchResult, focusedItem, current
             ShowAlert({
                 message: "Nessun documento trovato.",
                 mode: 'warning',
-                title: 'Operazione molti-a-molti',
+                title: 'Abbina documenti molti a molti',
                 duration: 5000
             });
             openPairSearchModal(relation, targetTID, qd);
@@ -519,7 +523,7 @@ export const useRelatedDocuments = ({ selectedSearchResult, focusedItem, current
             ShowAlert({
                 message: "Nessun documento da abbinare. Tutti i documenti risultanti sono già abbinati.",
                 mode: 'warning',
-                title: 'Operazione molti-a-molti',
+                title: 'Abbina documenti molti a molti',
                 duration: 5000
             });
             openPairSearchModal(relation, targetTID, qd);
@@ -537,9 +541,11 @@ export const useRelatedDocuments = ({ selectedSearchResult, focusedItem, current
                 return;
             if (!relations.some(r => r.relationType === RelationTypes.ManyToMany)) {
                 ShowAlert({
-                    message: "Nessuna relazione molti-a-molti definita nel sistema.",
+                    message: isPairing
+                        ? "Nessuna relazione di abbinamento molti a molti definita nel sistema."
+                        : "Nessuna relazione di disabbinamento molti a molti definita nel sistema.",
                     mode: 'warning',
-                    title: 'Operazione molti-a-molti',
+                    title: isPairing ? 'Abbina documenti molti a molti' : 'Disabbina documenti molti a molti',
                     duration: 5000
                 });
                 return;
@@ -547,9 +553,11 @@ export const useRelatedDocuments = ({ selectedSearchResult, focusedItem, current
             const manyToManyRels = relations.filter(r => r.relationType === RelationTypes.ManyToMany);
             if (!manyToManyRels.some(r => r.masterTID === selectedSearchResult?.fromTID || r.detailTID === selectedSearchResult?.fromTID)) {
                 ShowAlert({
-                    message: "Nessuna relazione molti-a-molti definita per il tipo di documento selezionato.",
+                    message: isPairing
+                        ? "Nessuna relazione di abbinamento molti a molti definita per il tipo di documento selezionato."
+                        : "Nessuna relazione di disabbinamento molti a molti definita per il tipo di documento selezionato.",
                     mode: 'warning',
-                    title: 'Operazione molti-a-molti',
+                    title: isPairing ? 'Abbina documenti molti a molti' : 'Disabbina documenti molti a molti',
                     duration: 5000
                 });
                 return;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-dev1.35",
+    "version": "6.19.0-dev1.37",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",