@topconsultnpm/sdkui-react-beta 6.12.72 → 6.12.75

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

@@ -4,6 +4,8 @@ export interface ITMHtmlEditor {
     width?: string;
     /** Height of the editor (e.g., '300px') */
     height?: string;
+    /** Initial value markup */
+    initialMarkup?: string;
     /** Callback function triggered when the content value changes */
     onValueChanged?: (e: {
         value: string;
@@ -22,6 +24,8 @@ export interface ITMHtmlEditor {
     validationItems?: Array<ValidationItem>;
     /** If true, enables rich text editing mode */
     isEditorEnabled?: boolean;
+    /** Defines the toolbar layout mode (compact: Shows a minimal toolbar, expanded: Displays the full toolbar */
+    toolbarMode?: 'compact' | 'expanded';
 }
 declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
 export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -4,13 +4,20 @@ 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%", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false } = props;
+    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact' } = props;
     // Ref for HtmlEditor instance
     const editorRef = useRef(null);
     // State for editor enable/disable
     const [isEditorEnabled, setIsEditorEnabled] = useState(false);
     // State to hold HTML markup
     const [markup, setMarkup] = useState("");
+    useEffect(() => {
+        setMarkup(initialMarkup);
+    }, [initialMarkup]);
+    // Update isEditorEnabled when prop changes
+    useEffect(() => {
+        setIsEditorEnabled(isEditorEnabledProp);
+    }, [isEditorEnabledProp]);
     // Handler for value change
     const onValueChangeCallback = (text) => {
         setMarkup(text);
@@ -18,14 +25,12 @@ const TMHtmlEditor = (props) => {
             onValueChanged({ value: text });
         }
     };
-    // Update isEditorEnabled when prop changes
-    useEffect(() => {
-        setIsEditorEnabled(isEditorEnabledProp);
-    }, [isEditorEnabledProp]);
     // 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", { 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 }) })] }));
+    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 && (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: "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" })] })) }) }), _jsx("div", { style: { width: "100%", height: validationItems.length > 0 ? "30px" : '0px' }, children: _jsx(TMVilViewer, { vil: validationItems }) })] }));
 };
 export default TMHtmlEditor;

package/package.json

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