Add editable preview mode to Markdown editor

Related to uiwjs#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.
vishwamartur · Nov 1, 2024 · 50f1f0a · 50f1f0a
1 parent 2520e88
commit 50f1f0a
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>