From 17475bf1234c4743572a5d76ff0bde928ba078bc Mon Sep 17 00:00:00 2001
From: Philip Okugbe <phil@docmost.com>
Date: Sat, 24 Aug 2024 18:12:19 +0100
Subject: [PATCH] feat: code block language selection (#198)

* code block language selection

* cleanup

* Add copy button
---
 .../components/code-block/code-block-view.tsx | 62 +++++++++++++++++++
 .../code-block/code-block.module.css          |  4 ++
 .../features/editor/extensions/extensions.ts  | 11 +++-
 .../src/features/editor/styles/code.css       | 11 +++-
 4 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 apps/client/src/features/editor/components/code-block/code-block-view.tsx
 create mode 100644 apps/client/src/features/editor/components/code-block/code-block.module.css

diff --git a/apps/client/src/features/editor/components/code-block/code-block-view.tsx b/apps/client/src/features/editor/components/code-block/code-block-view.tsx
new file mode 100644
index 0000000..89edb3d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/client/src/features/editor/components/code-block/code-block.module.css b/apps/client/src/features/editor/components/code-block/code-block.module.css
new file mode 100644
index 0000000..dbb0ab1
--- /dev/null
+++ b/apps/client/src/features/editor/components/code-block/code-block.module.css
@@ -0,0 +1,4 @@
+.selectInput {
+    height: 25px;
+    min-height: 25px;
+}
diff --git a/apps/client/src/features/editor/extensions/extensions.ts b/apps/client/src/features/editor/extensions/extensions.ts
index c2ba957..1178829 100644
--- a/apps/client/src/features/editor/extensions/extensions.ts
+++ b/apps/client/src/features/editor/extensions/extensions.ts
@@ -46,7 +46,12 @@ import ImageView from "@/features/editor/components/image/image-view.tsx";
 import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
 import { common, createLowlight } from "lowlight";
 import VideoView from "@/features/editor/components/video/video-view.tsx";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
+import plaintext from "highlight.js/lib/languages/plaintext";
+
 const lowlight = createLowlight(common);
+lowlight.register("mermaid", plaintext);
 
 export const mainExtensions = [
   StarterKit.configure({
@@ -134,7 +139,11 @@ export const mainExtensions = [
   Callout.configure({
     view: CalloutView,
   }),
-  CodeBlockLowlight.configure({
+  CodeBlockLowlight.extend({
+    addNodeView() {
+      return ReactNodeViewRenderer(CodeBlockView);
+    },
+  }).configure({
     lowlight,
     HTMLAttributes: {
       spellcheck: false,
diff --git a/apps/client/src/features/editor/styles/code.css b/apps/client/src/features/editor/styles/code.css
index 5c0176f..059b81d 100644
--- a/apps/client/src/features/editor/styles/code.css
+++ b/apps/client/src/features/editor/styles/code.css
@@ -1,6 +1,13 @@
 .ProseMirror {
+  .codeBlock {
+    padding: 4px;
+    border-radius: var(--mantine-radius-default);
+    background-color: light-dark(var(--mantine-color-gray-0),  var(--mantine-color-dark-8));
+    }
+
   pre {
-    padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+    margin: 4px;
     font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
     border-radius: var(--mantine-radius-default);
 
@@ -87,7 +94,7 @@
     }
   }
 
-  :not(pre) > code  {
+  :not(pre) > code {
     font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
     line-height: var(--mantine-line-height);
     padding: 2px calc(var(--mantine-spacing-xs) / 2);