feat: Add auto-apply markdown features on editor: Enable WYSIWYG (#1068)

* chore: update the theme of dropdown menu on articles page (for dark mode)

* chore: fix dark mode theme in profile page

* format the files

* fix: lint of profile page

* feat: Auto-apply markdown features on editor: Enable WYSIWYG

components/editor/editor/index.tsx

@@ -1,20 +1,26 @@
 "use client";
 
-import { useEditor, EditorContent } from "@tiptap/react";
+import Highlight from '@tiptap/extension-highlight'
+import Typography from '@tiptap/extension-typography'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
 import { TiptapEditorProps } from "./props";
 import { CustomCodeBlockEdit, TiptapExtensions } from "./extensions";
 import { EditorBubbleMenu } from "./components/bubble-menu";
 import { MediaResizer } from "./components/image-resizer";
 import Toolbar from "./components/Toolbar/Toolbar";
- 
+
 interface EditorProps {
   initialValue: string;
   onChange: (value: string) => void;
 }
 
 export default function Editor({ onChange, initialValue }: EditorProps) {
   const editor = useEditor({
-    extensions: [...TiptapExtensions, CustomCodeBlockEdit],
+    extensions: [
+      StarterKit,
+      Highlight,
+      Typography],
     editorProps: TiptapEditorProps,
     content: JSON.parse(initialValue),
     onUpdate: (e) => {

package.json

@@ -59,6 +59,7 @@
     "@tiptap/extension-table-row": "^2.6.6",
     "@tiptap/extension-text-align": "^2.6.6",
     "@tiptap/extension-text-style": "^2.3.1",
+    "@tiptap/extension-typography": "^2.8.0",
     "@tiptap/extension-underline": "^2.6.6",
     "@tiptap/extension-youtube": "^2.6.6",
     "@tiptap/pm": "^2.5.1",