35 lines
1.4 KiB
JavaScript
Executable File
35 lines
1.4 KiB
JavaScript
Executable File
import React from "react";
|
|
import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
|
|
|
|
const CodeBlockComponent = ({ node, updateAttributes, extension }) => {
|
|
return (
|
|
<NodeViewWrapper className="code-block-wrapper relative bg-[#0d1117] rounded-md overflow-hidden mb-[0.65em]">
|
|
<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;
|