Feat code block

packages/react-notion-custom/CONTRIBUTING-KR.md

@@ -654,7 +654,7 @@ fetchNotionPage();
 | Quote                    | ✅ Yes    | `quote`                |      |
 | Callout                  | ✅ Yes    | `callout`              |      |
 | Equation                 | ❌ No     | `equation`             |      |
-| Code                     | ❌ No     | `code`                 |      |
+| Code                     | ✅ Yes    | `code`                 |      |
 | Image                    | ❌ No     | `image`                |      |
 | Video                    | ✅ Yes    | `video`                |      |
 | Bookmark                 | ❌ No     | `bookmark`             |      |

packages/react-notion-custom/CONTRIBUTING.md

@@ -657,7 +657,7 @@ Here's a list of Notion block types currently supported in react-notion-custom.
 | Quote                    | ✅ Yes         | `quote`                |      |
 | Callout                  | ✅ Yes         | `callout`              |      |
 | Equation                 | ❌ No          | `equation`             |      |
-| Code                     | ❌ No          | `code`                 |      |
+| Code                     | ✅ Yes         | `code`                 |      |
 | Image                    | ❌ No          | `image`                |      |
 | Video                    | ✅ Yes         | `video`                |      |
 | Bookmark                 | ❌ No          | `bookmark`             |      |

packages/react-notion-custom/package.json

@@ -13,15 +13,18 @@
     "@matejmazur/react-katex": "^3.1.3",
     "@types/he": "^1.2.3",
     "@types/katex": "^0.16.7",
+    "clipboard-copy": "^4.0.1",
     "he": "^1.2.0",
     "katex": "^0.16.11",
+    "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
     "@cozy-blog/notion-client": "^0.0.22",
     "@eslint/js": "^9.9.0",
+    "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",

packages/react-notion-custom/src/lib/components/code/index.tsx

@@ -0,0 +1,99 @@
+import { useState, useEffect } from "react";
+import copyToClipboard from "clipboard-copy";
+import RichText from "../internal/rich-text";
+import Prisim from "prismjs";
+import "prismjs/themes/prism.css";
+import loadDart from "./support-language/dart";
+import loadElixir from "./support-language/elixir";
+import loadGo from "./support-language/go";
+import loadJava from "./support-language/java";
+import loadKotlin from "./support-language/kotlin";
+import loadMarkdown from "./support-language/markdown";
+import loadPython from "./support-language/python";
+import loadSql from "./support-language/sql";
+import loadTypescript from "./support-language/typescript";
+import type { CodeArgs } from "../../types";
+
+[
+  loadDart,
+  loadTypescript,
+  loadElixir,
+  loadGo,
+  loadJava,
+  loadKotlin,
+  loadMarkdown,
+  loadPython,
+  loadSql,
+].forEach((load) => load(Prisim));
+
+const Code = ({ ...props }: CodeArgs) => {
+  const {
+    code: { caption, rich_text: texts, language },
+  } = props;
+  const [showTooltip, setShowTooltip] = useState(false);
+  const content = texts.map(({ plain_text }) => plain_text).join("");
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (showTooltip) {
+      timer = setTimeout(() => {
+        setShowTooltip(false);
+      }, 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [showTooltip]);
+
+  const handleCopy = () => {
+    copyToClipboard(content);
+    setShowTooltip(true);
+  };
+
+  return (
+    <figure className="notion-block notion-code">
+      <div className="notion-code-content">
+        <div className="notion-code-meta">
+          <div className="notion-code-language">
+            {language.replace(/^[a-z]/, (char) => char.toUpperCase())}
+          </div>
+          <button className="notion-code-copy" onClick={handleCopy}>
+            <svg
+              stroke="currentColor"
+              strokeWidth="0"
+              viewBox="0 0 448 512"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368c1.125 1.126 1.757 2.652 1.757 4.243V112z"></path>
+            </svg>
+            <span>Copy</span>
+          </button>
+        </div>
+        <code>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: Prisim.highlight(
+                content,
+                Prisim.languages[language] || Prisim.languages["plain"],
+                language,
+              ),
+            }}
+          />
+        </code>
+      </div>
+      {caption.length !== 0 && (
+        <figcaption className="notion-asset-caption">
+          <RichText props={caption} />
+        </figcaption>
+      )}
+      <div
+        aria-hidden={!showTooltip}
+        className={`notion-code-copy-tooltip notion-${showTooltip ? "visible" : "hidden"}`}
+      >
+        <div>{"Copied"}</div>
+      </div>
+    </figure>
+  );
+};
+
+export default Code;

packages/react-notion-custom/src/lib/components/code/support-language/dart.ts

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+let loaded = false;
+
+export default function load(Prism: any) {
+  if (loaded) return;
+  _load(Prism);
+  loaded = true;
+}
+
+function _load(Prism: any) {
+  const keywords = [
+    /\b(?:async|sync|yield)\*/,
+    /\b(?:abstract|assert|async|await|break|case|catch|class|const|continue|covariant|default|deferred|do|dynamic|else|enum|export|extends|extension|external|factory|final|finally|for|get|hide|if|implements|import|in|interface|library|mixin|new|null|on|operator|part|rethrow|return|set|show|static|super|switch|sync|this|throw|try|typedef|var|void|while|with|yield)\b/,
+  ];
+
+  // Handles named imports, such as http.Client
+  const packagePrefix = /(^|[^\w.])(?:[a-z]\w*\s*\.\s*)*(?:[A-Z]\w*\s*\.\s*)*/
+    .source;
+
+  // based on the dart naming conventions
+  const className = {
+    pattern: RegExp(packagePrefix + /[A-Z](?:[\d_A-Z]*[a-z]\w*)?\b/.source),
+    lookbehind: true,
+    inside: {
+      namespace: {
+        pattern: /^[a-z]\w*(?:\s*\.\s*[a-z]\w*)*(?:\s*\.)?/,
+        inside: {
+          punctuation: /\./,
+        },
+      },
+    },
+  };
+
+  Prism.languages.dart = Prism.languages.extend("clike", {
+    "class-name": [
+      className,
+      {
+        // variables and parameters
+        // this to support class names (or generic parameters) which do not contain a lower case letter (also works for methods)
+        pattern: RegExp(packagePrefix + /[A-Z]\w*(?=\s+\w+\s*[;,=()])/.source),
+        lookbehind: true,
+        inside: className.inside,
+      },
+    ],
+    keyword: keywords,
+    operator:
+      /\bis!|\b(?:as|is)\b|\+\+|--|&&|\|\||<<=?|>>=?|~(?:\/=?)?|[+\-*/%&^|=!<>]=?|\?/,
+  });
+
+  Prism.languages.insertBefore("dart", "string", {
+    "string-literal": {
+      pattern:
+        /r?(?:("""|''')[\s\S]*?\1|(["'])(?:\\.|(?!\2)[^\\\r\n])*\2(?!\2))/,
+      greedy: true,
+      inside: {
+        interpolation: {
+          pattern: /((?:^|[^\\])(?:\\{2})*)\$(?:\w+|\{(?:[^{}]|\{[^{}]*\})*\})/,
+          lookbehind: true,
+          inside: {
+            punctuation: /^\$\{?|\}$/,
+            expression: {
+              pattern: /[\s\S]+/,
+              inside: Prism.languages.dart,
+            },
+          },
+        },
+        string: /[\s\S]+/,
+      },
+    },
+    string: undefined,
+  });
+
+  Prism.languages.insertBefore("dart", "class-name", {
+    metadata: {
+      pattern: /@\w+/,
+      alias: "function",
+    },
+  });
+
+  Prism.languages.insertBefore("dart", "class-name", {
+    generics: {
+      pattern:
+        /<(?:[\w\s,.&?]|<(?:[\w\s,.&?]|<(?:[\w\s,.&?]|<[\w\s,.&?]*>)*>)*>)*>/,
+      inside: {
+        "class-name": className,
+        keyword: keywords,
+        punctuation: /[<>(),.:]/,
+        operator: /[?&|]/,
+      },
+    },
+  });
+}