Added and fixed plain text formating

Author: gcclinux

src/App.css

@@ -26,32 +26,47 @@ html,
 
 .code-block-container {
   background-color: #e3e3e3;
-  padding: 2px 6px;
+  padding: 10px;
   border-radius: 4px;
   margin: 4px 0;
-  white-space: pre-wrap; 
-  word-break: break-word;
+  white-space: pre;
+  overflow-x: auto;
   width: 100%;
   box-sizing: border-box;
   color: #000;
+  font-family: monospace;
 }
 
 .inline-code {
   background-color: #e3e3e3;
   padding: 2px 6px;
   border-radius: 3px;
-  font-family: monospace;
-  display: block;
-  width: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Noto Sans Mono", "Courier New", monospace;
+  display: inline;
+  width: auto;
   box-sizing: border-box;
-  margin: 4px 0;
+  margin: 0;
   color: #000;
 }
 
 .code-block {
   font-family: monospace;
 }
 
+/* ASCII art blocks detected from paragraph content */
+.ascii-art {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Noto Sans Mono", "Courier New", monospace, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  white-space: pre;
+  margin: 4px 0;
+  padding: 6px 8px;
+  background: transparent;
+  color: inherit;
+  overflow-x: auto;
+  line-height: 1.2;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .textarea-horizontal-full {
   /* Base textarea styles */
   width: 98%;
@@ -100,7 +115,7 @@ html,
 .preview-parallel,
 .preview-horizontal-full {
   line-height: 1.5; /* Normal line height */
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: monospace;
   letter-spacing: normal;
   word-spacing: normal;
 
@@ -110,19 +125,21 @@ html,
   text-rendering: optimizeLegibility;
 }
 
+.preview-horizontal p,
+.preview-parallel p,
+.preview-horizontal-full p {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  white-space: pre-wrap;
+}
+
 /* Apply emoji fonts only to elements that actually need them (emojis, icons) */
 .preview-horizontal .icon-glyph,
 .preview-parallel .icon-glyph,
 .preview-horizontal-full .icon-glyph {
   font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
 }
 
-/* Paragraph spacing */
-.preview-horizontal p,
-.preview-parallel p,
-.preview-horizontal-full p {
-  margin: 0.5em 0;
-}
+
 
 /* Header spacing */
 .preview-horizontal h1, .preview-horizontal h2, .preview-horizontal h3, 

src/App.tsx

@@ -66,6 +66,7 @@ import {
   handleClear, 
   handleRedo,
   handleOpenClick,
+  handleOpenTxtClick,
   saveToHTML,
   saveToFile,
   saveToTxT
@@ -774,6 +775,17 @@ const App = () => {
                   <div className="hdr-desc">Open markdown .md file</div>
                 </button>
                 <div className="hdr-sep" />
+                <button
+                  className="dropdown-item"
+                  onClick={() => {
+                    handleOpenTxtClick(setEditorContent);
+                    setShowHelpDropdown(false);
+                  }}
+                >
+                  <div className="hdr-title"><FaFileImport /> Open TXT</div>
+                  <div className="hdr-desc">Open plain text .txt file</div>
+                </button>
+                <div className="hdr-sep" />
                 <button
                   className="dropdown-item"
                   onClick={() => {

src/components/PreviewComponent.tsx

@@ -93,7 +93,9 @@ const PreviewComponent: React.FC<PreviewComponentProps> = React.memo(({
         remarkPlugins={[remarkGfm, remarkEmoji]}
         rehypePlugins={[rehypeRaw]}
         components={{
-          code({ className, children, ...props }) {
+          code(_props) {
+            const { className, children, ...props } = _props as any;
+            const isInlineFlag = (_props as any)?.inline as boolean | undefined;
             const isMermaid = /language-mermaid/.test(className || "");
             const isPlantUML = /language-plantuml/.test(className || "");
 
@@ -138,7 +140,8 @@ const PreviewComponent: React.FC<PreviewComponentProps> = React.memo(({
               }
             }
 
-            const isInline = !className;
+            // ReactMarkdown provides `inline` flag to distinguish inline vs fenced code
+            const isInline = !!isInlineFlag;
 
             return (
               <code 
@@ -149,6 +152,36 @@ const PreviewComponent: React.FC<PreviewComponentProps> = React.memo(({
               </code>
             );
           },
+          p({ children }) {
+            // Detect box-drawing characters so ASCII UI blocks render with fixed width
+            const flatten = (nodes: any): string => {
+              if (!nodes) return '';
+              const arr = Array.isArray(nodes) ? nodes : [nodes];
+              return arr
+                .map((n) => {
+                  if (typeof n === 'string') return n;
+                  // Treat <br/> as newline
+                  // @ts-ignore
+                  if (n && n.type === 'br') return '\n';
+                  // @ts-ignore
+                  if (n && n.props && n.props.children) return flatten(n.props.children as any);
+                  return '';
+                })
+                .join('');
+            };
+
+            const text = flatten(children);
+            const hasBoxChars = /[\u2500-\u257F]/.test(text);
+            const looksLikeAsciiArt = hasBoxChars && /\n/.test(text);
+
+            if (looksLikeAsciiArt) {
+              return (
+                <pre className="ascii-art">{text}</pre>
+              );
+            }
+
+            return <p>{children}</p>;
+          },
           pre({ children }) {
             return (
               <pre className="code-block-container">

src/insertMermaid.ts

@@ -106,10 +106,6 @@ graph LR
     I -->|Ready| J[Product Manufacture]
     I -->|Not Ready| K[Delay in Production]
     K --> H
-    
-    J --> L[Market Release]
-    L -->|Approved| M[Launch Campaign]
-    L -->|Not Approved| N[Postponement Decision]
 \`\`\``;
     const newText =
       editorContent.substring(0, start) +

src/insertSave.ts

@@ -146,6 +146,29 @@ export const handleOpenClick = (
     input.click();
   };
 
+// Open a plain text (.txt) file and load its contents into the editor
+export const handleOpenTxtClick = (
+  setEditorContent: (content: string) => void
+): void => {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = ".txt,text/plain";
+  input.onchange = (e) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const contents = e.target?.result;
+        if (typeof contents === "string") {
+          setEditorContent(contents);
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
+  input.click();
+};
+
 export const saveToFile = (editorContent: string): void => {
 const blob = new Blob([editorContent], { type: "text/markdown;charset=utf-8" });
 saveAs(blob, "easyedit.md");