[1346] Disable the save icon when in pristine state

Bug: #1346 Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
eclipse-sirius · Nov 8, 2022 · ff8a8bb · ff8a8bb
1 parent ab3e35a
commit ff8a8bb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/.../src/main/java/org/eclipse/sirius/components/forms/components/RichTextComponentProps.java b/.../src/main/java/org/eclipse/sirius/components/forms/components/RichTextComponentProps.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2020 Obeo.
+ * Copyright (c) 2022 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at

diff --git a/packages/forms/frontend/sirius-components-forms/src/richtexteditor/RichTextEditor.tsx b/packages/forms/frontend/sirius-components-forms/src/richtexteditor/RichTextEditor.tsx
@@ -10,22 +10,22 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import { CodeNode } from '@lexical/code';
+import { LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
-import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown';
+import { $convertFromMarkdownString, $convertToMarkdownString, TRANSFORMERS } from '@lexical/markdown';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { makeStyles } from '@material-ui/core/styles';
-import { useCallback, useEffect } from 'react';
+import { EditorState, TextNode } from 'lexical';
+import { useCallback, useEffect, useState } from 'react';
 import { ListPlugin } from './ListPlugin';
-//import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import { CodeNode } from '@lexical/code';
-import { LinkNode } from '@lexical/link';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
-import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
-import { TextNode } from 'lexical';
 import { RichTextEditorProps } from './RichTextEditor.types';
 import { ToolbarPlugin } from './ToolbarPlugin';
 
@@ -158,6 +158,8 @@ const useRichTextEditorStyles = makeStyles((theme) => ({
 }));
 
 export const RichTextEditor = ({ value, pristine, placeholder, readOnly, onFocus, onSave }: RichTextEditorProps) => {
+  const [edited, setEdited] = useState<boolean>(false);
+
   const classes = useRichTextEditorStyles();
   const theme = {
     placeholder: classes.editorPlaceholder,
@@ -190,10 +192,16 @@ export const RichTextEditor = ({ value, pristine, placeholder, readOnly, onFocus
     nodes: [HeadingNode, ListNode, ListItemNode, QuoteNode, HorizontalRuleNode, TextNode, CodeNode, LinkNode],
     editorState: () => $convertFromMarkdownString(value, TRANSFORMERS),
   };
-
   return (
     <LexicalComposer initialConfig={initialConfig}>
-      <ToolbarPlugin readOnly={readOnly} onSave={onSave} />
+      <ToolbarPlugin
+        readOnly={readOnly}
+        pristine={!edited}
+        onSave={(newValue: string) => {
+          onSave(newValue);
+          setEdited(false);
+        }}
+      />
       <div className={classes.editorContainer}>
         <RichTextPlugin
           contentEditable={<ContentEditable onFocus={onFocus} readOnly={readOnly} />}
@@ -202,6 +210,14 @@ export const RichTextEditor = ({ value, pristine, placeholder, readOnly, onFocus
         />
         {pristine ? <ValueUpdater value={value} /> : null}
         <ListPlugin />
+        <OnChangePlugin
+          onChange={(editorState: EditorState) => {
+            editorState.read(() => {
+              const markdown = $convertToMarkdownString(TRANSFORMERS);
+              setEdited(value !== markdown);
+            });
+          }}
+        />
         <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
       </div>
     </LexicalComposer>

diff --git a/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx b/packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx
@@ -49,6 +49,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 export interface ToolbarPluginProps {
   readOnly: boolean;
+  pristine: boolean;
   onSave: (newValue: string) => void;
 }
 
@@ -89,7 +90,7 @@ const StyledToggleButtonGroup = withStyles((theme) => ({
   },
 }))(ToggleButtonGroup);
 
-export const ToolbarPlugin = ({ readOnly, onSave }: ToolbarPluginProps) => {
+export const ToolbarPlugin = ({ readOnly, pristine, onSave }: ToolbarPluginProps) => {
   const [editor] = useLexicalComposerContext();
 
   const [isBold, setIsBold] = useState<boolean>(false);
@@ -302,7 +303,7 @@ export const ToolbarPlugin = ({ readOnly, onSave }: ToolbarPluginProps) => {
       <StyledToggleButtonGroup size="small" value={toggled} onChange={(_, newStyles) => updateButtons(newStyles)}>
         <ToggleButton
           classes={{ root: classes.button }}
-          disabled={readOnly}
+          disabled={readOnly || pristine}
           value={'save'}
           key={'save'}
           onClick={() => {
@@ -311,7 +312,7 @@ export const ToolbarPlugin = ({ readOnly, onSave }: ToolbarPluginProps) => {
               onSave(markdown);
             });
           }}>
-          <SaveAltIcon fontSize="small" />
+          <SaveAltIcon fontSize="small" color={pristine ? 'disabled' : 'primary'} />
         </ToggleButton>
       </StyledToggleButtonGroup>
     </Paper>