clear formating from markdown document in preview

Author: gcclinux

src/App.tsx

@@ -182,6 +182,7 @@ const App = () => {
   const [timelineModalOpen, setTimelineModalOpen] = useState(false);
   const [showHeaderModal, setShowHeaderModal] = useState(false);
   const [showFormattingModal, setShowFormattingModal] = useState(false);
+  const [plainTextPreview, setPlainTextPreview] = useState(false);
   const [showMermaidModal, setShowMermaidModal] = useState(false);
   const [showUMLModal, setShowUMLModal] = useState(false);
   const [showSymbolsModal, setShowSymbolsModal] = useState(false);
@@ -706,6 +707,11 @@ const App = () => {
     insertNewLineSyntax(textareaRef, editorContent, setEditorContent);
   };
 
+  // handleClearText toggles plain text preview mode (no markdown rendering)
+  const handleClearText = () => {
+    setPlainTextPreview(prev => !prev);
+  };
+
   // insertItalicSyntax function inserts an italic syntax for Markdown
   const handlerItalicSyntax = () => {
     insertItalicSyntax(textareaRef, editorContent, setEditorContent, cursorPositionRef);
@@ -2684,6 +2690,7 @@ const App = () => {
               onCodeLine={handlerinsertCodeSyntax}
               onCodeBlock={handlerinsertBlockCodeSyntax}
               onNewLine={handleNewLineSyntax}
+              onClearText={handleClearText}
               onClose={() => setShowFormattingModal(false)}
             />
           )
@@ -3262,6 +3269,7 @@ const App = () => {
               isPreviewFull={isPreviewFull}
               isHorizontal={isHorizontal}
               initializeMermaid={initializeMermaid}
+              plainTextPreview={plainTextPreview}
             />
           )}
         </div>

src/components/FormattingModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FaBold, FaItalic, FaStrikethrough, FaCode, FaFileCode, FaLevelDownAlt, FaTimes, FaFont } from 'react-icons/fa';
+import { FaBold, FaItalic, FaStrikethrough, FaCode, FaFileCode, FaLevelDownAlt, FaTimes, FaFont, FaEraser } from 'react-icons/fa';
 import { useLanguage } from '../i18n/LanguageContext';
 import './formattingModal.css';
 
@@ -10,6 +10,7 @@ type Props = {
     onItalic: () => void;
     onStrike: () => void;
     onNewLine: () => void;
+    onClearText: () => void;
     onClose: () => void;
 };
 
@@ -20,6 +21,7 @@ export default function FormattingModal({
     onItalic,
     onStrike,
     onNewLine,
+    onClearText,
     onClose
 }: Props) {
     const { t } = useLanguage();
@@ -62,6 +64,7 @@ export default function FormattingModal({
                         {renderTile(<FaCode />, 'format.codeline', 'format.codeline_desc', onCodeLine)}
                         {renderTile(<FaFileCode />, 'format.codeblock', 'format.codeblock_desc', onCodeBlock)}
                         {renderTile(<FaLevelDownAlt />, 'format.newline', 'format.newline_desc', onNewLine)}
+                        {renderTile(<FaEraser />, 'format.clear_text', 'format.clear_text_desc', onClearText)}
                     </div>
                 </div>
 

src/components/PreviewComponent.tsx

@@ -16,14 +16,16 @@ interface PreviewComponentProps {
   isPreviewFull: boolean;
   isHorizontal: boolean;
   initializeMermaid: () => void;
+  plainTextPreview?: boolean;
 }
 
 const PreviewComponent: React.FC<PreviewComponentProps> = React.memo(({
   previewRef,
   editorContent,
   isPreviewFull,
   isHorizontal,
-  initializeMermaid
+  initializeMermaid,
+  plainTextPreview
 }) => {
   // Custom remark plugin to preserve blank lines between list items
   const preserveListBreaks = () => {
@@ -136,6 +138,11 @@ const PreviewComponent: React.FC<PreviewComponentProps> = React.memo(({
       ref={previewRef}
       id="preview-content"
     >
+      {plainTextPreview ? (
+        <pre style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word', margin: 0, fontFamily: 'monospace', padding: '1em' }}>
+          {editorContent}
+        </pre>
+      ) : (
       <ReactMarkdown
         remarkPlugins={[remarkGfm, remarkEmoji, remarkMath, preserveListBreaks]}
         rehypePlugins={[rehypeRaw, rehypeKatex]}
@@ -255,6 +262,7 @@ const PreviewComponent: React.FC<PreviewComponentProps> = React.memo(({
       >
         {editorContent}
       </ReactMarkdown>
+      )}
     </div >
   );
 });

src/i18n/locales/de.json

@@ -99,7 +99,9 @@
     "strike": "Durchgestrichen",
     "strike_desc": "~~Durchgestrichen~~",
     "newline": "Neue Zeile",
-    "newline_desc": "Zeile 2 (zwei Leerzeichen + Enter)"
+    "newline_desc": "Zeile 2 (zwei Leerzeichen + Enter)",
+    "clear_text": "Klartext",
+    "clear_text_desc": "Klartextvorschau umschalten"
   },
   "mermaid": {
     "journey": "Reise",

src/i18n/locales/en.json

@@ -99,7 +99,9 @@
     "strike": "Strike",
     "strike_desc": "~~Strike~~",
     "newline": "NewLine",
-    "newline_desc": "Line 2 (two spaces + Enter)"
+    "newline_desc": "Line 2 (two spaces + Enter)",
+    "clear_text": "Clear Text",
+    "clear_text_desc": "Toggle plain text preview"
   },
   "mermaid": {
     "journey": "Journey",

src/i18n/locales/nl.json

@@ -99,7 +99,9 @@
     "strike": "Doorhalen",
     "strike_desc": "~~Doorhalen~~",
     "newline": "Nieuwe Regel",
-    "newline_desc": "Regel 2 (twee spaties + Enter)"
+    "newline_desc": "Regel 2 (twee spaties + Enter)",
+    "clear_text": "Platte Tekst",
+    "clear_text_desc": "Schakel platte tekst voorbeeld"
   },
   "mermaid": {
     "journey": "Reis",

src/i18n/locales/pl.json

@@ -99,7 +99,9 @@
     "strike": "Przekreślenie",
     "strike_desc": "~~Przekreślenie~~",
     "newline": "Nowa linia",
-    "newline_desc": "Linia 2 (dwie spacje + Enter)"
+    "newline_desc": "Linia 2 (dwie spacje + Enter)",
+    "clear_text": "Czysty Tekst",
+    "clear_text_desc": "Przełącz podgląd tekstu"
   },
   "mermaid": {
     "journey": "Podróż",

src/i18n/locales/pt-br.json

@@ -99,7 +99,9 @@
     "strike": "Tachado",
     "strike_desc": "~~Tachado~~",
     "newline": "Nova Linha",
-    "newline_desc": "Linha 2 (dois espaços + Enter)"
+    "newline_desc": "Linha 2 (dois espaços + Enter)",
+    "clear_text": "Texto Limpo",
+    "clear_text_desc": "Alternar visualização em texto simples"
   },
   "mermaid": {
     "journey": "Jornada",