@topconsultnpm/sdkui-react-beta 6.12.17 → 6.12.19

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -42,5 +42,5 @@ export const TMDcmtTypeChooserForm = (props) => {
             return dtdList?.filter(d => d.templateTID && props.filterTemplateTID?.includes(d.templateTID));
         return dtdList;
     };
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: true, width: props.width, height: props.height, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: props.allowMultipleSelection, width: props.width, height: props.height, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
 };

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -13,9 +13,6 @@ const Wrapper = styled.div `
     .highlight {
         background-color: ${(props) => props.$isSelected ? '#6c9023' : 'yellow'};
     }
-    .dx-mention{
-        color: #000 !important
-    }
     a {
         color: ${(props) => (props.$isSelected ? '#fff' : 'rgb(26, 13, 171)')};
     }
@@ -33,7 +30,10 @@ const highlightSearchText = (markup, searchText) => {
 };
 const TMHtmlContentDisplay = (props) => {
     const { markup, searchText, isSelected } = props;
-    const highlightedMarkup = searchText ? highlightSearchText(markup, searchText) : markup;
-    return (_jsx(Wrapper, { "$isSelected": isSelected, children: _jsx("div", { dangerouslySetInnerHTML: { __html: highlightedMarkup } }) }));
+    let updatedMarkup = markup;
+    if (searchText) {
+        updatedMarkup = highlightSearchText(updatedMarkup, searchText);
+    }
+    return (_jsx(Wrapper, { "$isSelected": isSelected, children: _jsx("div", { dangerouslySetInnerHTML: { __html: updatedMarkup } }) }));
 };
 export default TMHtmlContentDisplay;

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

@@ -4,8 +4,6 @@ export interface ITMHtmlEditor {
     width?: string;
     /** Height of the editor (e.g., '300px') */
     height?: string;
-    /** Initial or current value of the editor content as an HTML string */
-    value?: string;
     /** Callback function triggered when the content value changes */
     onValueChanged?: (e: {
         value: string;
@@ -25,3 +23,5 @@ export interface ITMHtmlEditor {
     /** If true, enables rich text editing mode */
     isEditorEnabled?: boolean;
 }
+declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
+export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -4,24 +4,45 @@ import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
 import TMVilViewer from '../base/TMVilViewer';
 import { SDKUI_Localizator } from '../../helper';
 const TMHtmlEditor = (props) => {
-    const { width = "100%", height = "100%", value = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false } = props;
+    const { width = "100%", height = "100%", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false } = props;
+    // Ref for HtmlEditor instance
     const editorRef = useRef(null);
+    // State for editor enable/disable
     const [isEditorEnabled, setIsEditorEnabled] = useState(false);
-    const [markup, setMarkup] = useState(value);
+    // State to hold HTML markup
+    const [markup, setMarkup] = useState("");
+    // Effect hook to handle quill instance and @mention behavior
+    useEffect(() => {
+        if (editorRef.current) {
+            const instance = editorRef.current.instance();
+            const quill = instance.getQuillInstance();
+            // Listen for text changes
+            quill.on('text-change', (delta) => {
+                const html = instance.option('value');
+                // Remove span tags and replace non-breaking spaces
+                const cleaned = html.replace(/<span[^>]*>|<\/span>/g, '').replace(/&nbsp;/g, ' ');
+                // Update value only if changed
+                if (html !== cleaned) {
+                    instance.option('value', cleaned);
+                }
+            });
+        }
+    }, [markup]);
+    // Handler for value change
     const onValueChangeCallback = (text) => {
         setMarkup(text);
         if (onValueChanged) {
             onValueChanged({ value: text });
         }
     };
+    // Update isEditorEnabled when prop changes
     useEffect(() => {
         setIsEditorEnabled(isEditorEnabledProp);
     }, [isEditorEnabledProp]);
-    useEffect(() => {
-        setMarkup(value);
-    }, [value]);
+    // Memoized check for validation errors
     const hasValidationErrors = useMemo(() => {
         return validationItems && validationItems.length > 0;
     }, [validationItems]);
-    return (_jsxs("div", { style: { height: validationItems.length > 0 ? `calc(${height} - 30px)` : "100%", width: width }, children: [_jsx("div", { style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", width: "100%", height: "100%" }, children: _jsx(HtmlEditor, { placeholder: SDKUI_Localizator.TypeAMessage + "...", ref: editorRef, width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none" }, children: isEditorEnabled && (_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: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" })] })) }) }), _jsx("div", { style: { width: "100%", height: validationItems.length > 0 ? "30px" : '0px' }, children: _jsx(TMVilViewer, { vil: validationItems }) })] }));
+    return (_jsxs("div", { style: { height: validationItems.length > 0 ? `calc(${height} - 30px)` : "100%", width: width }, 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" }, children: isEditorEnabled && (_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: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" })] })) }) }), _jsx("div", { style: { width: "100%", height: validationItems.length > 0 ? "30px" : '0px' }, children: _jsx(TMVilViewer, { vil: validationItems }) })] }));
 };
+export default TMHtmlEditor;

package/lib/components/forms/TMChooserForm.js

@@ -14,7 +14,7 @@ const TMChooserForm = ({ children, title, allowMultipleSelection, startWithShowO
     const [allItems, setAllItems] = useState([]);
     const [filteredItems, setFilteredItems] = useState([]);
     const [selectedRowKeys, setSelectedRowKeys] = useState(selectedIDs ?? []);
-    const [focusedRowKey, setFocusedRowKey] = useState(undefined);
+    const [focusedRowKey, setFocusedRowKey] = useState(selectedIDs?.[0]);
     useEffect(() => { doGetItems(false); }, [getItems]);
     useEffect(() => {
         if (showOnlySelectedItems)
@@ -39,14 +39,16 @@ const TMChooserForm = ({ children, title, allowMultipleSelection, startWithShowO
     };
     const handleSelectionChanged = useCallback((e) => {
         const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        if (JSON.stringify(selectedKeys) === JSON.stringify(selectedRowKeys))
+            return;
         setSelectedRowKeys(selectedKeys);
-    }, []);
-    const handleRowDoubleClick = () => {
+    }, [selectedRowKeys]);
+    const handleRowDoubleClick = useCallback(() => {
         if (allowMultipleSelection && selectedRowKeys.length > 1)
             return;
         onChoose?.(getFocusedIDs());
         onClose?.();
-    };
+    }, [selectedRowKeys, allowMultipleSelection, onChoose, onClose]);
     const handleFocusedRowChange = useCallback((e) => {
         setFocusedRowKey(e.row?.key);
     }, []);
@@ -70,7 +72,7 @@ const TMChooserForm = ({ children, title, allowMultipleSelection, startWithShowO
     }, [manageUseLocalizedName, summaryItems]);
     return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: (children ??
             filteredItems.length > 0)
-            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: [...selectedRowKeys], showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
+            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
             : _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
 };
 export default TMChooserForm;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.12.17",
+    "version": "6.12.19",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",