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;