@topconsultnpm/sdkui-react-beta 6.13.63 → 6.13.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -26,6 +26,8 @@ export interface ITMHtmlEditor {
|
|
|
26
26
|
isEditorEnabled?: boolean;
|
|
27
27
|
/** Defines the toolbar layout mode (compact: Shows a minimal toolbar, expanded: Displays the full toolbar */
|
|
28
28
|
toolbarMode?: 'compact' | 'expanded';
|
|
29
|
+
/** If true, the editor will be focused on mount */
|
|
30
|
+
autoFocus?: boolean;
|
|
29
31
|
}
|
|
30
32
|
declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
|
|
31
33
|
export default TMHtmlEditor;
|
|
@@ -4,7 +4,7 @@ import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
|
|
|
4
4
|
import TMVilViewer from '../base/TMVilViewer';
|
|
5
5
|
import { SDKUI_Localizator } from '../../helper';
|
|
6
6
|
const TMHtmlEditor = (props) => {
|
|
7
|
-
const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact' } = props;
|
|
7
|
+
const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false } = props;
|
|
8
8
|
// Ref for HtmlEditor instance
|
|
9
9
|
const editorRef = useRef(null);
|
|
10
10
|
// State for editor enable/disable
|
|
@@ -27,6 +27,15 @@ const TMHtmlEditor = (props) => {
|
|
|
27
27
|
onValueChanged({ value: text });
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
+
// Focuses the HtmlEditor when the component mounts, if autoFocus is enabled
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (autoFocus && editorRef.current?.instance) {
|
|
33
|
+
// Delay to ensure DOM is ready
|
|
34
|
+
setTimeout(() => {
|
|
35
|
+
editorRef.current?.instance().focus();
|
|
36
|
+
}, 500);
|
|
37
|
+
}
|
|
38
|
+
}, [autoFocus]);
|
|
30
39
|
// Memoized check for validation errors
|
|
31
40
|
const hasValidationErrors = useMemo(() => {
|
|
32
41
|
return validationItems && validationItems.length > 0;
|