feat: code block language selection (#198)

* code block language selection

* cleanup

* Add copy button

apps/client/src/features/editor/components/code-block/code-block-view.tsx

@@ -0,0 +1,62 @@
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { ActionIcon, CopyButton, Group, Select, Tooltip } from "@mantine/core";
+import { useState } from "react";
+import classes from "./code-block.module.css";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { useHover } from "@mantine/hooks";
+
+export default function CodeBlockView(props: NodeViewProps) {
+  const { node, updateAttributes, extension, editor, selected } = props;
+  const { language } = node.attrs;
+  const [languageValue, setLanguageValue] = useState<string | null>(
+    language || null,
+  );
+  const { hovered, ref } = useHover();
+
+  function changeLanguage(language: string) {
+    setLanguageValue(language);
+    updateAttributes({
+      language: language,
+    });
+  }
+
+  return (
+    <NodeViewWrapper className="codeBlock" ref={ref}>
+      <Group justify="flex-end">
+        <Select
+          placeholder="Auto"
+          checkIconPosition="right"
+          data={extension.options.lowlight.listLanguages()}
+          value={languageValue}
+          onChange={changeLanguage}
+          searchable
+          style={{ maxWidth: "130px" }}
+          classNames={{ input: classes.selectInput }}
+          disabled={!editor.isEditable}
+        />
+
+        <CopyButton value={node?.textContent} timeout={2000}>
+          {({ copied, copy }) => (
+            <Tooltip
+              label={copied ? "Copied" : "Copy"}
+              withArrow
+              position="right"
+            >
+              <ActionIcon
+                color={copied ? "teal" : "gray"}
+                variant="subtle"
+                onClick={copy}
+              >
+                {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
+              </ActionIcon>
+            </Tooltip>
+          )}
+        </CopyButton>
+      </Group>
+
+      <pre spellCheck="false">
+        <NodeViewContent as="code" className={`language-${language}`} />
+      </pre>
+    </NodeViewWrapper>
+  );
+}

apps/client/src/features/editor/components/code-block/code-block.module.css

@@ -0,0 +1,4 @@
+.selectInput {
+    height: 25px;
+    min-height: 25px;
+}