Add table to editor (#507)

Author: DarrachBarneveld

components/editor/editor/RenderPost.tsx

@@ -1,24 +1,21 @@
-import React, { useMemo } from "react";
-import DOMPurify, { Config } from "dompurify";
-import { generateHTML } from "@tiptap/core";
-import { TiptapExtensions } from "./extensions";
+import React from "react";
+import { CustomCodeBlockReadOnly, TiptapExtensions } from "./extensions";
+import { EditorContent, useEditor } from "@tiptap/react";
 
 interface RenderPostProps {
   json: string;
 }
 
-const config: Config = {
-  ADD_TAGS: ["iframe"],
-  ADD_ATTR: ["allowfullscreen", "target"],
-};
-
 const RenderPost = ({ json }: RenderPostProps) => {
-  const sanitizedHTML = useMemo(() => {
-    const rawHTML = generateHTML(JSON.parse(json), [...TiptapExtensions]);
-    return DOMPurify.sanitize(rawHTML, config) as string;
-  }, [json]);
+  const content = JSON.parse(json);
+
+  const editor = useEditor({
+    editable: false,
+    extensions: [...TiptapExtensions, CustomCodeBlockReadOnly],
+    content,
+  });
 
-  return <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />;
+  return <EditorContent editor={editor} />;
 };
 
 export default RenderPost;

components/editor/editor/components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,5 @@
+/* For styling codeblock theme */
+.code-block div {
+  background-color: black;
+  color: white;
+}

components/editor/editor/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,49 @@
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { ChangeEvent, FunctionComponent } from "react";
+
+import styles from "./CodeBlock.module.css";
+
+interface CodeBlockProps {
+  readOnly: boolean;
+}
+
+const CodeBlock: FunctionComponent<NodeViewProps & CodeBlockProps> = ({
+  node: {
+    attrs: { language: defaultLanguage },
+  },
+  updateAttributes,
+  extension,
+  readOnly,
+}) => {
+  return (
+    <NodeViewWrapper className={styles["code-block"]}>
+      {/* Read only mode removes selector ability dropdown - more elegant solution potentially possible */}
+      {!readOnly && (
+        <select
+          onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
+          contentEditable={false}
+          defaultValue={defaultLanguage}
+          onChange={(event: ChangeEvent<HTMLSelectElement>) => {
+            updateAttributes({ language: event.target.value });
+          }}
+        >
+          <option value="null">auto</option>
+          <option disabled>—</option>
+          {extension.options.lowlight
+            .listLanguages()
+            .map((lang: string, index: number) => (
+              <option key={index} value={lang}>
+                {lang}
+              </option>
+            ))}
+        </select>
+      )}
+      <pre>
+        <NodeViewContent as="code" />
+      </pre>
+    </NodeViewWrapper>
+  );
+};
+
+export default CodeBlock;

components/editor/editor/extensions/index.tsx

@@ -15,6 +15,8 @@ import { InputRule } from "@tiptap/core";
 // import UploadImagesPlugin from "@/components/editor/editor/plugins/upload-images";
 import UpdatedImage from "./updated-image";
 import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
 import TextAlign from "@tiptap/extension-text-align";
 import Subscript from "@tiptap/extension-subscript";
 import Superscript from "@tiptap/extension-superscript";
@@ -27,6 +29,14 @@ import TableHeader from "@tiptap/extension-table-header";
 import TableRow from "@tiptap/extension-table-row";
 import { ReactNodeViewRenderer, NodeViewProps } from "@tiptap/react";
 import CustomTableNodeView from "../components/Table/CustomTableNodeView";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+
+import { lowlight } from "lowlight";
+
+// Highlight syntax select your style from here (https://highlightjs.org/examples)
+import "highlight.js/styles/monokai-sublime.css";
+
+import CodeBlock from "../components/CodeBlock/CodeBlock";
 
 // const CustomImage = TiptapImage.extend({
 //   addProseMirrorPlugins() {
@@ -38,6 +48,21 @@ const CustomDocument = Document.extend({
   content: "heading block*",
 });
 
+export const CustomCodeBlockEdit = CodeBlockLowlight.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeBlock);
+  },
+}).configure({ lowlight });
+
+// Two CodeBlockNodes need to be created to disable selector menu
+export const CustomCodeBlockReadOnly = CodeBlockLowlight.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer((props: NodeViewProps) => (
+      <CodeBlock {...props} readOnly />
+    ));
+  },
+}).configure({ lowlight });
+
 export const CustomTable = Table.extend({
   addNodeView() {
     return ReactNodeViewRenderer((props: NodeViewProps) => (
@@ -70,6 +95,8 @@ export const TiptapExtensions = [
         "text-neutral-900 bg-neutral-100 border border-neutral-500 flex-1 flex p-1",
     },
   }),
+  Paragraph,
+  Text,
   StarterKit.configure({
     document: false,
     bulletList: {

components/editor/editor/index.tsx

@@ -2,11 +2,10 @@
 
 import { useEditor, EditorContent } from "@tiptap/react";
 import { TiptapEditorProps } from "./props";
-import { CustomTableRow, TiptapExtensions } from "./extensions";
+import { CustomCodeBlockEdit, TiptapExtensions } from "./extensions";
 import { EditorBubbleMenu } from "./components/bubble-menu";
 import { MediaResizer } from "./components/image-resizer";
 import Toolbar from "./components/Toolbar/Toolbar";
-import TableMenuBar from "./components/Table/TableMenuBar";
 
 interface EditorProps {
   initialValue: string;
@@ -15,7 +14,7 @@ interface EditorProps {
 
 export default function Editor({ onChange, initialValue }: EditorProps) {
   const editor = useEditor({
-    extensions: TiptapExtensions,
+    extensions: [...TiptapExtensions, CustomCodeBlockEdit],
     editorProps: TiptapEditorProps,
     content: JSON.parse(initialValue),
     onUpdate: (e) => {

package-lock.json

@@ -39,6 +39,7 @@
     "@styled-icons/material": "^10.47.0",
     "@tailwindcss/forms": "^0.5.6",
     "@tanstack/react-query": "^4.35.0",
+    "@tiptap/extension-code-block-lowlight": "^2.1.11",
     "@tiptap/extension-color": "^2.1.6",
     "@tiptap/extension-highlight": "^2.1.6",
     "@tiptap/extension-image": "^2.1.11",
@@ -70,6 +71,8 @@
     "dompurify": "^3.0.5",
     "fathom-client": "^3.5.0",
     "framer-motion": "^10.16.1",
+    "highlight.js": "^11.9.0",
+    "lowlight": "^2.4.0",
     "lucide-react": "^0.292.0",
     "nanoid": "^4.0.2",
     "next": "^13.4.19",