Add plain text option to markdown editor code blocks (#3918)

* Add plain text option to markdown editor code blocks

- Added "Plain text" option to code block language selector
- Added aliases (text, plaintext, plain) for plain text
- Modified PrismCodeBlock to render plain text without syntax highlighting
- Plain text code blocks don't add anything after backticks

Fixes #3917

Co-authored-by: Sylvain <[email protected]>

* Set plaintext as default language for new code blocks

Co-authored-by: Sylvain <[email protected]>

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Sylvain <[email protected]>
Co-authored-by: Hlib <[email protected]>

Author: 3 people

front_end/src/components/markdown_editor/initialized_editor.tsx

@@ -73,9 +73,22 @@ const PrismCodeBlock: FC<{ code?: string; language?: string }> = ({
     theme === "dark" ? prismThemes.dracula : prismThemes.github;
 
   const raw = (language as string | undefined) ?? "ts";
-  const prismLang = CANONICAL_TO_PRISM[normalizeLang(raw)] ?? "tsx";
+  const normalizedLang = normalizeLang(raw);
   const codeTrimmed = (code ?? "").replace(/^\n+|\n+$/g, "");
 
+  // Handle plain text without syntax highlighting
+  if (normalizedLang === "text") {
+    return (
+      <div className="my-4">
+        <pre className="overflow-x-auto rounded border border-gray-300 bg-gray-100 p-3 dark:border-gray-300-dark dark:bg-gray-100-dark">
+          {codeTrimmed}
+        </pre>
+      </div>
+    );
+  }
+
+  const prismLang = CANONICAL_TO_PRISM[normalizedLang] ?? "tsx";
+
   return (
     <div className="my-4">
       <Highlight
@@ -256,7 +269,7 @@ const InitializedMarkdownEditor: FC<
     }
     return [
       ...common,
-      codeBlockPlugin({ defaultCodeBlockLanguage: "ts" }),
+      codeBlockPlugin({ defaultCodeBlockLanguage: "text" }),
       codeMirrorPlugin({
         codeBlockLanguages: CANONICAL_TO_LABEL,
       }),

front_end/src/components/markdown_editor/plugins/code/languages.ts

@@ -1,6 +1,7 @@
 import type { Language } from "prism-react-renderer";
 
 export const CANONICAL_TO_LABEL = {
+  text: "Plain text",
   ts: "TypeScript",
   tsx: "TSX",
   js: "JavaScript",
@@ -14,6 +15,10 @@ export const CANONICAL_TO_LABEL = {
 export type CanonicalLang = keyof typeof CANONICAL_TO_LABEL;
 
 const ALIAS_TO_CANONICAL: Record<string, CanonicalLang> = {
+  text: "text",
+  plaintext: "text",
+  plain: "text",
+
   typescript: "ts",
   ts: "ts",
   tsx: "tsx",
@@ -42,6 +47,7 @@ export function normalizeLang(
 }
 
 export const CANONICAL_TO_PRISM: Record<CanonicalLang, Language> = {
+  text: "text" as Language,
   ts: "typescript",
   tsx: "tsx",
   js: "javascript",