Skip to content

Commit 6a195c4

Browse files
cbrunsbegaudeau
authored andcommitted
[fix] Hide the toolbar when the richtext widget is read-only
When the RichTextEditor is disabled via `isEnabledExpression`, the toolbar remains visible, creating misleading UX (toolbar appears interactive but does nothing). This commit uses conditional rendering to completely hide the toolbar when the editor is read-only. This also allows the widget to serve as a rich-text display (like a label), with correct markdown rendering but no editing affordances. Signed-off-by: Cédric Brun <cedric.brun@obeo.fr>
1 parent 7330997 commit 6a195c4

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

packages/forms/frontend/sirius-components-forms/src/richtexteditor/RichTextEditor.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*******************************************************************************
2-
* Copyright (c) 2022, 2024 Obeo.
2+
* Copyright (c) 2022, 2025 Obeo.
33
* This program and the accompanying materials
44
* are made available under the terms of the Eclipse Public License v2.0
55
* which accompanies this distribution, and is available at
@@ -22,9 +22,9 @@ import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPl
2222
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
2323
import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
2424
import { HeadingNode, QuoteNode } from '@lexical/rich-text';
25-
import { makeStyles } from 'tss-react/mui';
2625
import { $setSelection, TextNode } from 'lexical';
2726
import { FocusEvent, useCallback, useEffect } from 'react';
27+
import { makeStyles } from 'tss-react/mui';
2828
import { ListPlugin } from './ListPlugin';
2929
import {
3030
ContentEditableProps,
@@ -214,7 +214,7 @@ export const RichTextEditor = ({ value, placeholder, readOnly, onBlur }: RichTex
214214
<LexicalComposer initialConfig={initialConfig}>
215215
<OnBlurPlugin onBlur={onBlur}>
216216
<UpdateValuePlugin markdownText={value} />
217-
<ToolbarPlugin readOnly={readOnly} />
217+
{!readOnly ? <ToolbarPlugin readOnly={readOnly} /> : null}
218218
<div className={classes.editorContainer}>
219219
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
220220
<ListPlugin />

0 commit comments

Comments
 (0)