feat: use tiptap editor

Author: Lanttcat

components/Editor.tsx

@@ -0,0 +1,19 @@
+import { memo } from "react";
+import { Tiptap } from "./Tiptap";
+
+interface EditorProps {
+  account: string
+}
+
+// eslint-disable-next-line react/display-name
+export const Editor = memo<EditorProps>(({ account}) => {
+  return (
+    <div style={{width: '720px'}}>
+      <input placeholder="Give a title" type="text" className="border-0 outline-0 text-5xl"/>
+      <div className="my-4">
+        Account: {account}
+      </div>
+      <Tiptap />
+    </div>
+  )
+})

components/Layout.tsx

@@ -0,0 +1,3 @@
+export const Layout = () => {
+
+}

components/Tiptap.tsx

@@ -0,0 +1,34 @@
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import {Paragraph} from "@tiptap/extension-paragraph";
+import Placeholder from '@tiptap/extension-placeholder'
+import { Heading} from '@tiptap/extension-heading';
+
+export const Tiptap = () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Paragraph.configure({
+        HTMLAttributes: {
+          class: 'text-neutral-800 text-lg min-h-full',
+        },
+      }),
+      Placeholder.configure({
+        placeholder: 'Write something …',
+      }),
+      Heading.configure({
+        levels: [1, 2, 3],
+      })
+    ],
+    content: '',
+    editorProps: {
+      attributes: {
+        class: 'focus:outline-none text-lg',
+      },
+    },
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}

package.json

@@ -15,6 +15,11 @@
     "@openzeppelin/contracts": "^4.4.1",
     "@react-hookz/web": "^12.0.4",
     "@textile/eth-storage": "^1.0.0",
+    "@tiptap/extension-heading": "^2.0.0-beta.25",
+    "@tiptap/extension-paragraph": "^2.0.0-beta.23",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.46",
+    "@tiptap/react": "^2.0.0-beta.104",
+    "@tiptap/starter-kit": "^2.0.0-beta.168",
     "axios": "^0.24.0",
     "ethers": "^5.5.2",
     "graphql-tag": "^2.12.6",

pages/create-draft.tsx

@@ -0,0 +1,10 @@
+import {Editor} from "../components/Editor";
+
+export default function CreateDraft() {
+  const account = 'testaccout'
+  return (
+    <div className="flex justify-center py-16 min-h-screen">
+      <Editor account={account} />
+    </div>
+  )
+}

styles/globals.css

@@ -6,4 +6,14 @@
 .current {
   text-decoration: underline #FF3028;
   font-weight: bold;
-}
+}
+
+h1 {
+  @apply text-4xl;
+}
+h2 {
+  @apply text-3xl;
+}
+h3 {
+  @apply text-2xl;
+}