From 50f1f0a422532517b677128987c7fa8ba8d6ba68 Mon Sep 17 00:00:00 2001
From: Vishwanath Martur <64204611+vishwamartur@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:58:49 +0530
Subject: [PATCH] Add editable preview mode to Markdown editor

Related to #664

Add editable preview mode to the Markdown editor.

* **New Command**: Add `editablePreview` command in `core/src/commands/preview.tsx` to allow editing in preview mode.
* **TextArea Component**: Update `core/src/components/TextArea/index.tsx` to support rendering an editable preview mode.
* **Editor State Management**: Update `core/src/Editor.tsx` to manage the state and rendering of the editable preview mode.
* **Context Management**: Update `core/src/Context.tsx` to include support for editable preview mode in the context and state management.
---
 core/src/Context.tsx                   |  2 +-
 core/src/Editor.tsx                    |  2 +-
 core/src/commands/preview.tsx          | 29 ++++++++++++++++++++++++++
 core/src/components/TextArea/index.tsx |  8 +++++--
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/core/src/Context.tsx b/core/src/Context.tsx
index b5979b849..f2f0d7872 100644
--- a/core/src/Context.tsx
+++ b/core/src/Context.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ICommand, TextAreaCommandOrchestrator } from './commands';
 import { MDEditorProps } from './Types';
 
-export type PreviewType = 'live' | 'edit' | 'preview';
+export type PreviewType = 'live' | 'edit' | 'preview' | 'editablePreview';
 
 export interface ContextStore {
   components?: MDEditorProps['components'];
diff --git a/core/src/Editor.tsx b/core/src/Editor.tsx
index 831d93835..6d8db009f 100644
--- a/core/src/Editor.tsx
+++ b/core/src/Editor.tsx
@@ -228,7 +228,7 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
             placement="top"
           />
           <div className={`${prefixCls}-content`}>
-            {/(edit|live)/.test(state.preview || '') && (
+            {/(edit|live|editablePreview)/.test(state.preview || '') && (
               <TextArea
                 className={`${prefixCls}-input`}
                 prefixCls={prefixCls}
diff --git a/core/src/commands/preview.tsx b/core/src/commands/preview.tsx
index a233065fb..a5d6e4bef 100644
--- a/core/src/commands/preview.tsx
+++ b/core/src/commands/preview.tsx
@@ -91,3 +91,32 @@ export const codeLive: ICommand = {
     }
   },
 };
+
+export const editablePreview: ICommand = {
+  name: 'editablePreview',
+  keyCommand: 'editablePreview',
+  value: 'editablePreview',
+  shortcuts: 'ctrlcmd+e',
+  buttonProps: { 'aria-label': 'Editable Preview (ctrl + e)', title: 'Editable Preview (ctrl + e)' },
+  icon: (
+    <svg width="12" height="12" viewBox="0 0 520 520">
+      <polygon fill="currentColor" points="0 71.293 0 122 179 122 179 397 0 397 0 449.707 232 449.413 232 71.293" />
+      <polygon
+        fill="currentColor"
+        points="289 71.293 520 71.293 520 122 341 123 341 396 520 396 520 449.707 289 449.413"
+      />
+    </svg>
+  ),
+  execute: (
+    state: TextState,
+    api: TextAreaTextApi,
+    dispatch?: React.Dispatch<ContextStore>,
+    executeCommandState?: ExecuteCommandState,
+    shortcuts?: string[],
+  ) => {
+    api.textArea.focus();
+    if (shortcuts && dispatch && executeCommandState) {
+      dispatch({ preview: 'editablePreview' });
+    }
+  },
+};
diff --git a/core/src/components/TextArea/index.tsx b/core/src/components/TextArea/index.tsx
index d320101b6..10d2a3f4d 100644
--- a/core/src/components/TextArea/index.tsx
+++ b/core/src/components/TextArea/index.tsx
@@ -42,7 +42,7 @@ export type TextAreaRef = {
 
 export default function TextArea(props: ITextAreaProps) {
   const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
-  const { markdown, scrollTop, commands, minHeight, highlightEnable, extraCommands, dispatch } =
+  const { markdown, scrollTop, commands, minHeight, highlightEnable, extraCommands, dispatch, preview } =
     useContext(EditorContext);
   const textRef = React.useRef<HTMLTextAreaElement>(null);
   const executeRef = React.useRef<TextAreaCommandOrchestrator>();
@@ -103,7 +103,11 @@ export default function TextArea(props: ITextAreaProps) {
         ) : (
           <Fragment>
             {highlightEnable && <Markdown prefixCls={prefixCls} />}
-            <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
+            {preview === 'editablePreview' ? (
+              <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />
+            ) : (
+              <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} readOnly />
+            )}
           </Fragment>
         )}
       </div>