fix(Mermaid, YfmHtmlBlock): improve autosave UI behavior (#858)

Author: makhnatkin

demo/stories/yfm/YFM.stories.tsx

@@ -82,8 +82,8 @@ export const MermaidDiagram: Story = {
     args: {
         initial: markup.mermaidDiagram,
         storyAdditionalControls: {
-            mermaidAutoSaveEnabled: false,
-            mermaidAutoSaveDelay: 2000,
+            mermaidAutoSaveEnabled: true,
+            mermaidAutoSaveDelay: 500,
         },
     },
 };

src/extensions/additional/Mermaid/MermaidNodeView/MermaidView.tsx

@@ -71,7 +71,7 @@ const DiagramEditMode: React.FC<{
     onCancel: () => void;
     options: MermaidOptions;
 }> = ({initialText, onSave, onCancel, mermaidInstance, options: {autoSave}}) => {
-    const {value, handleChange, handleManualSave, isSaveDisabled} = useAutoSave({
+    const {value, handleChange, handleManualSave, isSaveDisabled, isAutoSaveEnabled} = useAutoSave({
         initialValue: initialText || '',
         onSave,
         onClose: onCancel,
@@ -95,15 +95,19 @@ const DiagramEditMode: React.FC<{
                 <div className={b('Controls')}>
                     <div>
                         <Button onClick={onCancel} view={'flat'}>
-                            <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>
-                        </Button>
-                        <Button
-                            onClick={handleManualSave}
-                            view={'action'}
-                            disabled={isSaveDisabled}
-                        >
-                            <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>
+                            <span className={STOP_EVENT_CLASSNAME}>
+                                {isAutoSaveEnabled ? i18n('close') : i18n('cancel')}
+                            </span>
                         </Button>
+                        {!isAutoSaveEnabled && (
+                            <Button
+                                onClick={handleManualSave}
+                                view={'action'}
+                                disabled={isSaveDisabled}
+                            >
+                                <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>
+                            </Button>
+                        )}
                     </div>
                 </div>
             </div>

src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx

@@ -196,7 +196,7 @@ const CodeEditMode: React.FC<{
     onCancel: () => void;
     options: YfmHtmlBlockOptions;
 }> = ({initialText, onSave, onCancel, options: {autoSave}}) => {
-    const {value, handleChange, handleManualSave, isSaveDisabled} = useAutoSave({
+    const {value, handleChange, handleManualSave, isSaveDisabled, isAutoSaveEnabled} = useAutoSave({
         initialValue: initialText || '\n',
         onSave,
         onClose: onCancel,
@@ -218,15 +218,19 @@ const CodeEditMode: React.FC<{
                 <div className={b('controls')}>
                     <div>
                         <Button onClick={onCancel} view={'flat'}>
-                            <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>
-                        </Button>
-                        <Button
-                            onClick={handleManualSave}
-                            view={'action'}
-                            disabled={isSaveDisabled}
-                        >
-                            <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>
+                            <span className={STOP_EVENT_CLASSNAME}>
+                                {isAutoSaveEnabled ? i18n('close') : i18n('cancel')}
+                            </span>
                         </Button>
+                        {!isAutoSaveEnabled && (
+                            <Button
+                                onClick={handleManualSave}
+                                view={'action'}
+                                disabled={isSaveDisabled}
+                            >
+                                <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>
+                            </Button>
+                        )}
                     </div>
                 </div>
             </div>

src/i18n/common/en.json

@@ -1,9 +1,10 @@
 {
   "cancel": "Cancel",
+  "close": "Close",
   "delete": "Delete",
   "edit": "Edit",
   "preview": "Preview",
   "remove": "Remove",
   "save": "Save",
   "toolbar_action_disabled": "Incompatible markup element"
-}
+}

src/i18n/common/ru.json

@@ -1,9 +1,10 @@
 {
   "cancel": "Отмена",
+  "close": "Закрыть",
   "delete": "Удалить",
   "edit": "Редактировать",
   "preview": "Предпросмотр",
   "remove": "Удалить",
   "save": "Сохранить",
   "toolbar_action_disabled": "Несовместимый элемент разметки"
-}
+}