refactor(markdown-editor): migrate to tiptap for WYSIWYG editing, standardize UI spacing, and update export engine

src/components/CodeBlockComponent.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
+import { Copy } from "lucide-react";
+
+const CodeBlockComponent = ({ node, updateAttributes, extension }) => {
+  const handleCopy = () => {
+    navigator.clipboard.writeText(node.textContent).then(() => {
+      // Optional: Add visual feedback for copy
+    });
+  };
+
+  return (
+    <NodeViewWrapper className="code-block-wrapper relative">
+      <div className="code-block-header flex justify-between items-center px-4 py-2 bg-[#161b22] border border-[#30363d] border-b-0 rounded-t-md text-xs font-mono">
+        <select
+          contentEditable={false}
+          value={node.attrs.language || "text"}
+          onChange={(event) =>
+            updateAttributes({ language: event.target.value })
+          }
+          className="bg-transparent text-[#8b949e] border-none outline-none focus:ring-0 uppercase tracking-wider cursor-pointer"
+        >
+          <option value="text">text</option>
+          <option value="javascript">javascript</option>
+          <option value="typescript">typescript</option>
+          <option value="html">html</option>
+          <option value="css">css</option>
+          <option value="json">json</option>
+          <option value="bash">bash</option>
+          <option value="python">python</option>
+          <option value="sql">sql</option>
+        </select>
+      </div>
+      <pre className="!mt-0 !rounded-t-none !bg-transparent !border-[#30363d] !p-4 !text-[#e6edf3]">
+        <NodeViewContent as="code" />
+      </pre>
+    </NodeViewWrapper>
+  );
+};
+
+export default CodeBlockComponent;

src/components/RichMarkdownEditor.js

@@ -0,0 +1,289 @@
+import React, { useEffect, useCallback } from "react";
+import { useEditor, EditorContent, ReactNodeViewRenderer } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import { Table } from "@tiptap/extension-table";
+import { TableRow } from "@tiptap/extension-table-row";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { TaskList } from "@tiptap/extension-task-list";
+import { TaskItem } from "@tiptap/extension-task-item";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { common, createLowlight } from "lowlight";
+import CodeBlockComponent from "./CodeBlockComponent";
+import { Markdown } from "tiptap-markdown";
+import {
+  Bold,
+  Italic,
+  Strikethrough,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  CheckSquare,
+  Quote,
+  Link2,
+  Image as ImageIcon,
+  Table as TableIcon,
+  Minus,
+} from "lucide-react";
+
+// Set up lowlight for syntax highlighting in Tiptap
+const lowlight = createLowlight(common);
+
+const MenuBar = ({ editor }) => {
+  if (!editor) return null;
+
+  return (
+    <div className="flex flex-wrap justify-center items-center gap-1 p-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10 w-full">
+      <div className="flex flex-wrap items-center gap-1 w-full max-w-[85ch]">
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          disabled={!editor.can().chain().focus().toggleBold().run()}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("bold") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Bold"
+        >
+          <Bold className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          disabled={!editor.can().chain().focus().toggleItalic().run()}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("italic") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Italic"
+        >
+          <Italic className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          disabled={!editor.can().chain().focus().toggleStrike().run()}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("strike") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Strikethrough"
+        >
+          <Strikethrough className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          disabled={!editor.can().chain().focus().toggleCode().run()}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("code") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Inline Code"
+        >
+          <Code className="h-4 w-4" />
+        </button>
+
+        <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        <button
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 1 }).run()
+          }
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("heading", { level: 1 }) ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Heading 1"
+        >
+          <Heading1 className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 2 }).run()
+          }
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("heading", { level: 2 }) ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Heading 2"
+        >
+          <Heading2 className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 3 }).run()
+          }
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("heading", { level: 3 }) ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Heading 3"
+        >
+          <Heading3 className="h-4 w-4" />
+        </button>
+
+        <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        <button
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("bulletList") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Bullet List"
+        >
+          <List className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("orderedList") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Ordered List"
+        >
+          <ListOrdered className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleTaskList().run()}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("taskList") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Task List"
+        >
+          <CheckSquare className="h-4 w-4" />
+        </button>
+
+        <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        <button
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("blockquote") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Blockquote"
+        >
+          <Quote className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("codeBlock") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Code Block"
+        >
+          <Code className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().setHorizontalRule().run()}
+          className="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-300"
+          title="Horizontal Rule"
+        >
+          <Minus className="h-4 w-4" />
+        </button>
+
+        <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        <button
+          onClick={() => {
+            const url = window.prompt("URL");
+            if (url) {
+              editor
+                .chain()
+                .focus()
+                .extendMarkRange("link")
+                .setLink({ href: url })
+                .run();
+            }
+          }}
+          className={`p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors ${editor.isActive("link") ? "bg-gray-200 dark:bg-gray-700 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}`}
+          title="Add Link"
+        >
+          <Link2 className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() => {
+            const url = window.prompt("Image URL");
+            if (url) {
+              editor.chain().focus().setImage({ src: url }).run();
+            }
+          }}
+          className="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-300"
+          title="Add Image"
+        >
+          <ImageIcon className="h-4 w-4" />
+        </button>
+        <button
+          onClick={() =>
+            editor
+              .chain()
+              .focus()
+              .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+              .run()
+          }
+          className="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-300"
+          title="Insert Table"
+        >
+          <TableIcon className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const RichMarkdownEditor = ({
+  initialContent,
+  onChange,
+  className = "",
+  height = "600px",
+  isFullscreen = false,
+}) => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        codeBlock: false, // We'll use our own codeblock extension
+      }),
+      CodeBlockLowlight.extend({
+        addNodeView() {
+          return ReactNodeViewRenderer(CodeBlockComponent);
+        },
+      }).configure({
+        lowlight,
+      }),
+      Link.configure({
+        openOnClick: false,
+      }),
+      Image,
+      Table.configure({
+        resizable: true,
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      TaskList,
+      TaskItem.configure({
+        nested: true,
+      }),
+      Markdown.configure({
+        html: true,
+        tightLists: true,
+        tightListClass: "tight",
+        bulletListMarker: "-",
+        linkify: true,
+        breaks: false,
+      }),
+    ],
+    content: initialContent,
+    onUpdate: ({ editor }) => {
+      // Serialize back to markdown and send to parent
+      const markdownOutput = editor.storage.markdown.getMarkdown();
+      const htmlOutput = editor.getHTML();
+      onChange(markdownOutput, htmlOutput);
+    },
+    editorProps: {
+      attributes: {
+        class:
+          "prose prose-sm sm:prose dark:prose-invert prose-blue focus:outline-none w-full max-w-none",
+      },
+    },
+  });
+
+  // Update editor content when initialContent prop completely changes from outside (e.g. loading a template)
+  useEffect(() => {
+    if (editor && initialContent !== undefined) {
+      const currentMarkdown = editor.storage.markdown.getMarkdown();
+      if (initialContent !== currentMarkdown) {
+        editor.commands.setContent(initialContent);
+      }
+    }
+  }, [editor, initialContent]);
+
+  return (
+    <div
+      className={`flex flex-col bg-white dark:bg-gray-900 overflow-hidden ${className}`}
+    >
+      <MenuBar editor={editor} />
+      <div
+        className={`overflow-y-auto w-full custom-scrollbar flex justify-center p-6`}
+        style={{ height }}
+      >
+        <div
+          className={`w-full max-w-[85ch] markdown-content-wrapper ${isFullscreen ? "is-fullscreen" : "is-normal"} is-edit-mode`}
+        >
+          <EditorContent editor={editor} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RichMarkdownEditor;

src/styles/markdown-preview.css

@@ -1,23 +1,25 @@
 /* GitHub-style Markdown Preview Styling */
 .markdown-preview {
-  color: #24292f;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 1.6;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  max-width: 100%;
-  word-break: break-word;
+    color: #24292f;
+    font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
+        Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    word-break: break-word;
 }
 
 /* Ensure all child elements respect container width */
 .markdown-preview * {
-  max-width: 100%;
-  box-sizing: border-box;
+    max-width: 100%;
+    box-sizing: border-box;
 }
 
 .dark .markdown-preview {
-  color: #c9d1d9;
+    color: #c9d1d9;
 }
 
 .markdown-preview h1,
@@ -26,254 +28,256 @@
 .markdown-preview h4,
 .markdown-preview h5,
 .markdown-preview h6 {
-  margin-top: 24px;
-  margin-bottom: 16px;
-  font-weight: 600;
-  line-height: 1.25;
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
 }
 
 .markdown-preview h1 {
-  font-size: 2em;
-  border-bottom: 1px solid #d0d7de;
-  padding-bottom: 0.3em;
+    font-size: 2em;
+    border-bottom: 1px solid #d0d7de;
+    padding-bottom: 0.3em;
 }
 
 .dark .markdown-preview h1 {
-  border-bottom-color: #21262d;
+    border-bottom-color: #21262d;
 }
 
 .markdown-preview h2 {
-  font-size: 1.5em;
-  border-bottom: 1px solid #d0d7de;
-  padding-bottom: 0.3em;
+    font-size: 1.5em;
+    border-bottom: 1px solid #d0d7de;
+    padding-bottom: 0.3em;
 }
 
 .dark .markdown-preview h2 {
-  border-bottom-color: #21262d;
+    border-bottom-color: #21262d;
 }
 
 .markdown-preview h3 {
-  font-size: 1.25em;
+    font-size: 1.25em;
 }
 
 .markdown-preview h4 {
-  font-size: 1em;
+    font-size: 1em;
 }
 
 .markdown-preview h5 {
-  font-size: 0.875em;
+    font-size: 0.875em;
 }
 
 .markdown-preview h6 {
-  font-size: 0.85em;
-  color: #57606a;
+    font-size: 0.85em;
+    color: #57606a;
 }
 
 .dark .markdown-preview h6 {
-  color: #8b949e;
+    color: #8b949e;
 }
 
 .markdown-preview p {
-  margin-top: 0;
-  margin-bottom: 16px;
+    margin-top: 0;
+    margin-bottom: 16px;
 }
 
 /* Inline code - with background */
 .markdown-preview code {
-  padding: 0.2em 0.4em;
-  margin: 0;
-  font-size: 85%;
-  background-color: rgba(175, 184, 193, 0.2);
-  border-radius: 6px;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(175, 184, 193, 0.2);
+    border-radius: 6px;
+    font-family:
+        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+        "Liberation Mono", monospace;
 }
 
 .dark .markdown-preview code {
-  background-color: rgba(110, 118, 129, 0.4);
+    background-color: rgba(110, 118, 129, 0.4);
 }
 
 /* Code block wrapper with header */
 .markdown-preview .code-block-wrapper {
-  margin-bottom: 16px;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid #d0d7de;
-  background-color: #f6f8fa;
+    margin-bottom: 16px;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid #d0d7de;
+    background-color: #f6f8fa;
 }
 
 .dark .markdown-preview .code-block-wrapper {
-  border-color: #30363d;
-  background-color: #0d1117;
+    border-color: #30363d;
+    background-color: #0d1117;
 }
 
 /* Code block header */
 .markdown-preview .code-block-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 4px 10px;
-  background-color: #f6f8fa;
-  border-bottom: 1px solid #d0d7de;
-  font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 10px;
+    background-color: #f6f8fa;
+    border-bottom: 1px solid #d0d7de;
+    font-size: 12px;
 }
 
 .dark .markdown-preview .code-block-header {
-  background-color: #161b22;
-  border-bottom-color: #30363d;
+    background-color: #161b22;
+    border-bottom-color: #30363d;
 }
 
 /* Language label */
 .markdown-preview .code-block-language {
-  font-weight: 600;
-  color: #57606a;
-  text-transform: uppercase;
-  font-size: 10px;
-  letter-spacing: 0.5px;
+    font-weight: 600;
+    color: #57606a;
+    text-transform: uppercase;
+    font-size: 10px;
+    letter-spacing: 0.5px;
 }
 
 .dark .markdown-preview .code-block-language {
-  color: #8b949e;
+    color: #8b949e;
 }
 
 /* Copy button */
 .markdown-preview .code-block-copy {
-  padding: 2px 6px;
-  background-color: transparent;
-  border: 1px solid #d0d7de;
-  border-radius: 6px;
-  color: #24292f;
-  font-size: 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-weight: 500;
+    padding: 2px 6px;
+    background-color: transparent;
+    border: 1px solid #d0d7de;
+    border-radius: 6px;
+    color: #24292f;
+    font-size: 10px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 500;
 }
 
 .markdown-preview .code-block-copy:hover {
-  background-color: #f3f4f6;
-  border-color: #1f2328;
+    background-color: #f3f4f6;
+    border-color: #1f2328;
 }
 
 .dark .markdown-preview .code-block-copy {
-  color: #c9d1d9;
-  border-color: #30363d;
+    color: #c9d1d9;
+    border-color: #30363d;
 }
 
 .dark .markdown-preview .code-block-copy:hover {
-  background-color: #21262d;
-  border-color: #8b949e;
+    background-color: #21262d;
+    border-color: #8b949e;
 }
 
 /* Code blocks - with background */
 .markdown-preview .code-block-wrapper pre {
-  padding: 16px;
-  overflow: auto;
-  font-size: 85%;
-  line-height: 1.45;
-  background-color: #0d1117;
-  margin: 0;
-  border-radius: 0;
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #0d1117;
+    margin: 0;
+    border-radius: 0;
 }
 
 /* Legacy pre blocks (without wrapper) */
 .markdown-preview pre:not(.code-block-wrapper pre) {
-  padding: 16px;
-  overflow: auto;
-  font-size: 85%;
-  line-height: 1.45;
-  background-color: #afb8c133;
-  border-radius: 6px;
-  margin-bottom: 16px;
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #afb8c133;
+    border-radius: 6px;
+    margin-bottom: 16px;
 }
 
 .dark .markdown-preview pre:not(.code-block-wrapper pre) {
-  background-color: rgba(110, 118, 129, 0.4);
+    background-color: rgba(110, 118, 129, 0.4);
 }
 
 /* Code inside pre blocks - NO background (transparent) */
 .markdown-preview pre code {
-  display: inline;
-  max-width: auto;
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  line-height: inherit;
-  word-wrap: normal;
-  background-color: transparent !important;
-  border: 0;
-  border-radius: 0;
+    display: inline;
+    max-width: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent !important;
+    border: 0;
+    border-radius: 0;
 }
 
 /* Preserve highlight.js syntax highlighting colors */
 .markdown-preview pre code.hljs {
-  background: transparent !important;
-  padding: 0 !important;
+    background: transparent !important;
+    padding: 0 !important;
 }
 
 .markdown-preview table {
-  border-spacing: 0;
-  border-collapse: collapse;
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  margin-bottom: 16px;
+    border-spacing: 0;
+    border-collapse: collapse;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+    margin-bottom: 16px;
 }
 
 .markdown-preview table tr {
-  background-color: #ffffff;
-  border-top: 1px solid #d0d7de;
+    background-color: #ffffff;
+    border-top: 1px solid #d0d7de;
 }
 
 .dark .markdown-preview table tr {
-  background-color: #0d1117;
-  border-top-color: #21262d;
+    background-color: #0d1117;
+    border-top-color: #21262d;
 }
 
 .markdown-preview table tr:nth-child(2n) {
-  background-color: #f6f8fa;
+    background-color: #f6f8fa;
 }
 
 .dark .markdown-preview table tr:nth-child(2n) {
-  background-color: #161b22;
+    background-color: #161b22;
 }
 
 .markdown-preview table th,
 .markdown-preview table td {
-  padding: 6px 13px;
-  border: 1px solid #d0d7de;
+    padding: 6px 13px;
+    border: 1px solid #d0d7de;
 }
 
 .dark .markdown-preview table th,
 .dark .markdown-preview table td {
-  border-color: #21262d;
+    border-color: #21262d;
 }
 
 .markdown-preview table th {
-  font-weight: 600;
-  background-color: #f6f8fa;
+    font-weight: 600;
+    background-color: #f6f8fa;
 }
 
 .dark .markdown-preview table th {
-  background-color: #161b22;
+    background-color: #161b22;
 }
 
 .markdown-preview blockquote {
-  padding: 0 1em;
-  color: #57606a;
-  border-left: 0.25em solid #d0d7de;
-  margin: 0 0 16px 0;
+    padding: 0 1em;
+    color: #57606a;
+    border-left: 0.25em solid #d0d7de;
+    margin: 0 0 16px 0;
 }
 
 .dark .markdown-preview blockquote {
-  color: #8b949e;
-  border-left-color: #3b434b;
+    color: #8b949e;
+    border-left-color: #3b434b;
 }
 
 .markdown-preview ul,
 .markdown-preview ol {
-  padding-left: 2em;
-  margin-top: 0;
-  margin-bottom: 16px;
+    padding-left: 2em;
+    margin-top: 0;
+    margin-bottom: 16px;
 }
 
 /* Nested lists */
@@ -281,100 +285,192 @@
 .markdown-preview ul ol,
 .markdown-preview ol ul,
 .markdown-preview ol ol {
-  margin-top: 0.25em;
-  margin-bottom: 0.25em;
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
 }
 
 /* List items */
 .markdown-preview li {
-  margin-bottom: 0.25em;
-  line-height: 1.6;
+    margin-bottom: 0.25em;
+    line-height: 1.6;
 }
 
 .markdown-preview li + li {
-  margin-top: 0.25em;
+    margin-top: 0.25em;
 }
 
 /* Better bullet points */
 .markdown-preview ul > li {
-  list-style-type: disc;
+    list-style-type: disc;
 }
 
 .markdown-preview ul ul > li {
-  list-style-type: circle;
+    list-style-type: circle;
 }
 
 .markdown-preview ul ul ul > li {
-  list-style-type: square;
+    list-style-type: square;
 }
 
 /* Ordered list styling */
 .markdown-preview ol > li {
-  list-style-type: decimal;
+    list-style-type: decimal;
 }
 
 .markdown-preview ol ol > li {
-  list-style-type: lower-alpha;
+    list-style-type: lower-alpha;
 }
 
 .markdown-preview ol ol ol > li {
-  list-style-type: lower-roman;
+    list-style-type: lower-roman;
 }
 
 /* List item content spacing */
 .markdown-preview li > p {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
 }
 
 .markdown-preview li > p:first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 .markdown-preview li > p:last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .markdown-preview hr {
-  height: 0.25em;
-  padding: 0;
-  margin: 24px 0;
-  background-color: #d0d7de;
-  border: 0;
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #d0d7de;
+    border: 0;
 }
 
 .dark .markdown-preview hr {
-  background-color: #21262d;
+    background-color: #21262d;
 }
 
 .markdown-preview a {
-  color: #0969da;
-  text-decoration: none;
+    color: #0969da;
+    text-decoration: none;
 }
 
 .dark .markdown-preview a {
-  color: #58a6ff;
+    color: #58a6ff;
 }
 
 .markdown-preview a:hover {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 .markdown-preview strong {
-  font-weight: 600;
+    font-weight: 600;
 }
 
 .markdown-preview em {
-  font-style: italic;
+    font-style: italic;
 }
 
 .markdown-preview u {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 .markdown-preview img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 6px;
-  margin: 16px 0;
+    max-width: 100%;
+    height: auto;
+    border-radius: 6px;
+    margin: 16px 0;
+}
+
+/* Tiptap specific styling overrides to match prose */
+.tiptap p.is-editor-empty:first-child::before {
+    color: #adb5bd;
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+}
+
+.tiptap {
+    outline: none;
+}
+
+.tiptap ul[data-type="taskList"] {
+    list-style: none;
+    padding: 0;
+}
+
+.tiptap ul[data-type="taskList"] li {
+    display: flex;
+    align-items: flex-start;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.tiptap ul[data-type="taskList"] li > label {
+    flex: 0 0 auto;
+    margin-right: 0.5rem;
+    user-select: none;
+    margin-top: 0.2rem;
+}
+
+.tiptap ul[data-type="taskList"] li > div {
+    flex: 1 1 auto;
+    margin: 0;
+}
+
+.tiptap ul[data-type="taskList"] li > div > p {
+    margin: 0;
+}
+
+.tiptap p {
+    margin-top: 0;
+    margin-bottom: 0.65em;
+}
+
+/* Printing logic for PDF export */
+@media print {
+    .tiptap pre,
+    .markdown-preview pre {
+        white-space: pre-wrap !important;
+        word-wrap: break-word !important;
+        break-inside: avoid !important;
+    }
+
+    .code-block-header {
+        display: none !important;
+    }
+}
+
+/* Custom Node Views (Code Block) */
+.tiptap .code-block-wrapper {
+    margin-bottom: 0.65em;
+    border-radius: 6px;
+    background-color: #0d1117;
+    overflow: hidden;
+}
+
+.tiptap .code-block-wrapper pre {
+    margin: 0 !important;
+    padding: 1rem;
+    border-radius: 0 0 6px 6px;
+    background: transparent;
+}
+
+/* Markdown Content Wrapper Padding Strategies */
+.markdown-content-wrapper.is-normal.is-read-mode > .prose {
+    padding-bottom: 3rem; /* 48px */
+}
+
+.markdown-content-wrapper.is-fullscreen.is-read-mode > .prose {
+    padding-bottom: 4rem; /* 128px */
+}
+
+.markdown-content-wrapper.is-normal.is-edit-mode > div {
+    padding-bottom: 3rem; /* 48px */
+}
+
+.markdown-content-wrapper.is-fullscreen.is-edit-mode > div {
+    padding-bottom: 6rem; /* 128px */
 }