feat: initialize creation of markdown editor

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "editor.formatOnSave": true,
+  "cSpell.words": [
+    "codejar",
+    "highligher",
+    "hljs",
+    "infostring",
+    "Intellij",
+    "monokai",
+    "Nord",
+    "texteditor"
+  ]
+}

components/Wysiwyg/Buttons/generic-button.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function GenericButton() {
+  return <div>GenericButton</div>;
+}

components/Wysiwyg/Buttons/index.tsx

@@ -0,0 +1,18 @@
+import React, { ChangeEvent, useRef } from "react";
+
+export function ImageButton(props: {
+  onChange: React.ChangeEventHandler<HTMLInputElement> | undefined;
+}) {
+  const input = useRef<HTMLInputElement>(null);
+  return (
+    <button className="p-3" onClick={() => input.current?.click()}>
+      Add Image
+      <input
+        type="file"
+        ref={input}
+        onChange={props.onChange}
+        className="hidden"
+      />
+    </button>
+  );
+}

components/Wysiwyg/Editor.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import styles from "../../styles/editors/editor.module.css";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Highlight from "@tiptap/extension-highlight";
+import Typography from "@tiptap/extension-typography";
+import Image from "@tiptap/extension-image";
+import CharacterCount from "@tiptap/extension-character-count";
+import { Emoji } from "./extensions/emoji";
+import MainMenu from "./menus/main-menu";
+import FloatMenu from "./menus/float-menu";
+import PopMenu from "./menus/pop-menu";
+import WordCount from "./utils/word-count";
+
+export default () => {
+  const limit = 2000000;
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Highlight,
+      Typography,
+      Image,
+      Emoji,
+      CharacterCount.configure({
+        limit,
+      }),
+    ],
+    content: "Hello World! 🌎️",
+  });
+
+  return (
+    <div className="w-full relative border border-solid border-slate-300 aspect-square ">
+      <MainMenu editor={editor} />
+      <FloatMenu editor={editor} />
+      <PopMenu editor={editor} />
+      <div className="flex h-full flex-col justify-between">
+        <EditorContent className={styles.editor} editor={editor} />
+        <WordCount editor={editor} limit={limit} />
+      </div>
+    </div>
+  );
+};

components/Wysiwyg/Extensions/Emoji.ts

@@ -0,0 +1,133 @@
+import { Extension, textInputRule } from '@tiptap/core'
+
+export const Emoji = Extension.create({
+  name: 'emoji',
+
+  addInputRules() {
+    return [
+      textInputRule({ find: /-___- $/, replace: '😑 ' }),
+      textInputRule({ find: /:'-\) $/, replace: '😂 ' }),
+      textInputRule({ find: /':-\) $/, replace: '😅 ' }),
+      textInputRule({ find: /':-D $/, replace: '😅 ' }),
+      textInputRule({ find: />:-\) $/, replace: '😆 ' }),
+      textInputRule({ find: /-__- $/, replace: '😑 ' }),
+      textInputRule({ find: /':-\( $/, replace: '😓 ' }),
+      textInputRule({ find: /:'-\( $/, replace: '😢 ' }),
+      textInputRule({ find: />:-\( $/, replace: '😠 ' }),
+      textInputRule({ find: /O:-\) $/, replace: '😇 ' }),
+      textInputRule({ find: /0:-3 $/, replace: '😇 ' }),
+      textInputRule({ find: /0:-\) $/, replace: '😇 ' }),
+      textInputRule({ find: /0;\^\) $/, replace: '😇 ' }),
+      textInputRule({ find: /O;-\) $/, replace: '😇 ' }),
+      textInputRule({ find: /0;-\) $/, replace: '😇 ' }),
+      textInputRule({ find: /O:-3 $/, replace: '😇 ' }),
+      textInputRule({ find: /:'\) $/, replace: '😂 ' }),
+      textInputRule({ find: /:-D $/, replace: '😃 ' }),
+      textInputRule({ find: /':\) $/, replace: '😅 ' }),
+      textInputRule({ find: /'=\) $/, replace: '😅 ' }),
+      textInputRule({ find: /':D $/, replace: '😅 ' }),
+      textInputRule({ find: /'=D $/, replace: '😅 ' }),
+      textInputRule({ find: />:\) $/, replace: '😆 ' }),
+      textInputRule({ find: />;\) $/, replace: '😆 ' }),
+      textInputRule({ find: />=\) $/, replace: '😆 ' }),
+      textInputRule({ find: /;-\) $/, replace: '😉 ' }),
+      textInputRule({ find: /\*-\) $/, replace: '😉 ' }),
+      textInputRule({ find: /;-\] $/, replace: '😉 ' }),
+      textInputRule({ find: /;\^\) $/, replace: '😉 ' }),
+      textInputRule({ find: /B-\) $/, replace: '😎 ' }),
+      textInputRule({ find: /8-\) $/, replace: '😎 ' }),
+      textInputRule({ find: /B-D $/, replace: '😎 ' }),
+      textInputRule({ find: /8-D $/, replace: '😎 ' }),
+      textInputRule({ find: /:-\* $/, replace: '😘 ' }),
+      textInputRule({ find: /:\^\* $/, replace: '😘 ' }),
+      textInputRule({ find: /:-\) $/, replace: '🙂 ' }),
+      textInputRule({ find: /-_- $/, replace: '😑 ' }),
+      textInputRule({ find: /:-X $/, replace: '😶 ' }),
+      textInputRule({ find: /:-# $/, replace: '😶 ' }),
+      textInputRule({ find: /:-x $/, replace: '😶 ' }),
+      textInputRule({ find: />.< $/, replace: '😣 ' }),
+      textInputRule({ find: /:-O $/, replace: '😮 ' }),
+      textInputRule({ find: /:-o $/, replace: '😮 ' }),
+      textInputRule({ find: /O_O $/, replace: '😮 ' }),
+      textInputRule({ find: />:O $/, replace: '😮 ' }),
+      textInputRule({ find: /:-P $/, replace: '😛 ' }),
+      textInputRule({ find: /:-p $/, replace: '😛 ' }),
+      textInputRule({ find: /:-Þ $/, replace: '😛 ' }),
+      textInputRule({ find: /:-þ $/, replace: '😛 ' }),
+      textInputRule({ find: /:-b $/, replace: '😛 ' }),
+      textInputRule({ find: />:P $/, replace: '😜 ' }),
+      textInputRule({ find: /X-P $/, replace: '😜 ' }),
+      textInputRule({ find: /x-p $/, replace: '😜 ' }),
+      textInputRule({ find: /':\( $/, replace: '😓 ' }),
+      textInputRule({ find: /'=\( $/, replace: '😓 ' }),
+      textInputRule({ find: />:\\ $/, replace: '😕 ' }),
+      textInputRule({ find: />:\/ $/, replace: '😕 ' }),
+      textInputRule({ find: /:-\/ $/, replace: '😕 ' }),
+      textInputRule({ find: /:-. $/, replace: '😕 ' }),
+      textInputRule({ find: />:\[ $/, replace: '😞 ' }),
+      textInputRule({ find: /:-\( $/, replace: '😞 ' }),
+      textInputRule({ find: /:-\[ $/, replace: '😞 ' }),
+      textInputRule({ find: /:'\( $/, replace: '😢 ' }),
+      textInputRule({ find: /;-\( $/, replace: '😢 ' }),
+      textInputRule({ find: /#-\) $/, replace: '😵 ' }),
+      textInputRule({ find: /%-\) $/, replace: '😵 ' }),
+      textInputRule({ find: /X-\) $/, replace: '😵 ' }),
+      textInputRule({ find: />:\( $/, replace: '😠 ' }),
+      textInputRule({ find: /0:3 $/, replace: '😇 ' }),
+      textInputRule({ find: /0:\) $/, replace: '😇 ' }),
+      textInputRule({ find: /O:\) $/, replace: '😇 ' }),
+      textInputRule({ find: /O=\) $/, replace: '😇 ' }),
+      textInputRule({ find: /O:3 $/, replace: '😇 ' }),
+      textInputRule({ find: /<\/3 $/, replace: '💔 ' }),
+      textInputRule({ find: /:D $/, replace: '😃 ' }),
+      textInputRule({ find: /=D $/, replace: '😃 ' }),
+      textInputRule({ find: /;\) $/, replace: '😉 ' }),
+      textInputRule({ find: /\*\) $/, replace: '😉 ' }),
+      textInputRule({ find: /;\] $/, replace: '😉 ' }),
+      textInputRule({ find: /;D $/, replace: '😉 ' }),
+      textInputRule({ find: /B\) $/, replace: '😎 ' }),
+      textInputRule({ find: /8\) $/, replace: '😎 ' }),
+      textInputRule({ find: /:\* $/, replace: '😘 ' }),
+      textInputRule({ find: /=\* $/, replace: '😘 ' }),
+      textInputRule({ find: /:\) $/, replace: '🙂 ' }),
+      textInputRule({ find: /=\] $/, replace: '🙂 ' }),
+      textInputRule({ find: /=\) $/, replace: '🙂 ' }),
+      textInputRule({ find: /:\] $/, replace: '🙂 ' }),
+      textInputRule({ find: /:X $/, replace: '😶 ' }),
+      textInputRule({ find: /:# $/, replace: '😶 ' }),
+      textInputRule({ find: /=X $/, replace: '😶 ' }),
+      textInputRule({ find: /=x $/, replace: '😶 ' }),
+      textInputRule({ find: /:x $/, replace: '😶 ' }),
+      textInputRule({ find: /=# $/, replace: '😶 ' }),
+      textInputRule({ find: /:O $/, replace: '😮 ' }),
+      textInputRule({ find: /:o $/, replace: '😮 ' }),
+      textInputRule({ find: /:P $/, replace: '😛 ' }),
+      textInputRule({ find: /=P $/, replace: '😛 ' }),
+      textInputRule({ find: /:p $/, replace: '😛  ' }),
+      textInputRule({ find: /=p $/, replace: '😛 ' }),
+      textInputRule({ find: /:Þ $/, replace: '😛 ' }),
+      textInputRule({ find: /:þ $/, replace: '😛 ' }),
+      textInputRule({ find: /:b $/, replace: '😛 ' }),
+      textInputRule({ find: /d: $/, replace: '😛 ' }),
+      textInputRule({ find: /:\/ $/, replace: '😕 ' }),
+      textInputRule({ find: /:\\ $/, replace: '😕 ' }),
+      textInputRule({ find: /=\/ $/, replace: '😕 ' }),
+      textInputRule({ find: /=\\ $/, replace: '😕 ' }),
+      textInputRule({ find: /:L $/, replace: '😕 ' }),
+      textInputRule({ find: /=L $/, replace: '😕 ' }),
+      textInputRule({ find: /:\( $/, replace: '😞 ' }),
+      textInputRule({ find: /:\[ $/, replace: '😞 ' }),
+      textInputRule({ find: /=\( $/, replace: '😞 ' }),
+      textInputRule({ find: /;\( $/, replace: '😢 ' }),
+      textInputRule({ find: /D: $/, replace: '😨 ' }),
+      textInputRule({ find: /:\$ $/, replace: '😳 ' }),
+      textInputRule({ find: /=\$ $/, replace: '😳 ' }),
+      textInputRule({ find: /#\) $/, replace: '😵 ' }),
+      textInputRule({ find: /%\) $/, replace: '😵 ' }),
+      textInputRule({ find: /X\) $/, replace: '😵 ' }),
+      textInputRule({ find: /:@ $/, replace: '😠 ' }),
+      textInputRule({ find: /<3 $/, replace: '❤️ ' }),
+      textInputRule({ find: /\/shrug $/, replace: '¯\\_(ツ)_/¯' }),
+    ]
+  },
+})

components/Wysiwyg/Utils/index.ts

@@ -0,0 +1,19 @@
+import { Editor } from "@tiptap/react";
+import { ChangeEvent } from "react";
+
+
+export const getFileUrl = (file: File) => {
+  const url = URL.createObjectURL(file);
+  // TODO: upload image here and use the url
+  return url;
+}
+
+
+export const getImage = (editor: Editor | null) => (e: ChangeEvent<HTMLInputElement>) => {
+  const file = (e.target.files || [])[0];
+  if (!file) return;
+  const url = getFileUrl(file);
+  if (url) {
+    editor!.chain().focus().setImage({ src: url }).run()
+  }
+}

components/Wysiwyg/Utils/word-count.tsx

@@ -0,0 +1,17 @@
+import { Editor } from "@tiptap/react";
+import React from "react";
+
+export default function WordCount(props: {
+  editor: Editor | null;
+  limit?: number;
+}) {
+  const editor = props.editor;
+  const limit = props.limit || 200000;
+  return (
+    editor && (
+      <div>
+        {editor?.storage.characterCount.characters() || 0}/{limit} characters
+      </div>
+    )
+  );
+}

components/Wysiwyg/menus/float-menu.tsx

@@ -0,0 +1,49 @@
+import { Editor, FloatingMenu } from "@tiptap/react";
+import React from "react";
+
+export default function FloatMenu(props: { editor: Editor | null }) {
+  const { editor } = props;
+  return (
+    editor && (
+      <FloatingMenu
+        className="floating-menu"
+        tippyOptions={{ duration: 100 }}
+        editor={editor}
+      >
+        <button
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 1 }).run()
+          }
+          className={
+            (editor.isActive("heading", { level: 1 })
+              ? "bg-slate-700 text-white"
+              : "") + " p-3 bg-slate-200"
+          }
+        >
+          H1
+        </button>
+        <button
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 2 }).run()
+          }
+          className={
+            (editor.isActive("heading", { level: 2 })
+              ? "bg-slate-700 text-white"
+              : "") + " p-3 bg-slate-200"
+          }
+        >
+          H2
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={
+            (editor.isActive("bulletList") ? "bg-slate-700 text-white" : "") +
+            " p-3 bg-slate-200"
+          }
+        >
+          Bullet List
+        </button>
+      </FloatingMenu>
+    )
+  );
+}