fix: bullet point not rendering

Peppermint-Lab · May 31, 2024 · 12743e6 · 12743e6
1 parent f7941f3
commit 12743e6
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 2 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/apps/client/package.json b/apps/client/package.json
@@ -20,6 +20,7 @@
     "@radix-ui/themes": "^2.0.1",
     "@tabler/icons-react": "^2.20.0",
     "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.13",
     "@tiptap/extension-highlight": "^2.0.3",
     "@tiptap/extension-link": "^2.0.3",
     "@tiptap/extension-placeholder": "^2.1.13",

diff --git a/apps/client/pages/notebook/[id].tsx b/apps/client/pages/notebook/[id].tsx
@@ -25,14 +25,25 @@ export default function Notebooks() {
 
   const editor = useEditor({
     extensions: [
-      StarterKit,
+      StarterKit.configure({
+        bulletList: {
+          HTMLAttributes: {
+            class: "list-disc"
+          }
+        }
+      }),
       Underline,
       Link,
       Superscript,
       SubScript,
       Highlight,
       // TextAlign.configure({ types: ['heading', 'paragraph'] }),
     ],
+    editorProps: {
+      attributes: {
+        class: "prose dark:prose-invert prose-sm sm:prose-base [&ul]:list-disc"
+      }
+    },
     content: notebook,
     onUpdate({ editor }) {
       setNoteBook(editor.getHTML());

diff --git a/apps/client/pages/notebook/new.tsx b/apps/client/pages/notebook/new.tsx
@@ -23,14 +23,25 @@ export default function ViewNoteBook() {
 
   const editor = useEditor({
     extensions: [
-      StarterKit,
+      StarterKit.configure({
+        bulletList: {
+          HTMLAttributes: {
+            class: "list-disc"
+          }
+        }
+      }),
       Underline,
       Link,
       Superscript,
       SubScript,
       Highlight,
       // TextAlign.configure({ types: ['heading', 'paragraph'] }),
     ],
+    editorProps: {
+      attributes: {
+        class: "prose dark:prose-invert prose-sm sm:prose-base [&ul]:list-disc"
+      }
+    },
     content: value,
     onUpdate({ editor }) {
       setValue(editor.getHTML());

diff --git a/apps/client/styles/globals.css b/apps/client/styles/globals.css
@@ -29,6 +29,18 @@
   max-height: 70vh;
 }
 
+.ProseMirror ol {
+  list-style: disc !important;
+}
+
+.ProseMirror ul {
+  list-style: disc !important;
+}
+
+.ProseMirror li {
+  list-style: disc !important;
+}
+
 .mantine-1drwy5n {
   background-color: unset !important;
   border-radius: 0;

diff --git a/apps/client/tailwind.config.js b/apps/client/tailwind.config.js
@@ -14,5 +14,6 @@ module.exports = {
   },
   plugins: [
     require("@tailwindcss/forms"),
+    require("@tailwindcss/typography")
   ],
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2843,6 +2843,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/typography@npm:^0.5.13":
+  version: 0.5.13
+  resolution: "@tailwindcss/typography@npm:0.5.13"
+  dependencies:
+    lodash.castarray: "npm:^4.4.0"
+    lodash.isplainobject: "npm:^4.0.6"
+    lodash.merge: "npm:^4.6.2"
+    postcss-selector-parser: "npm:6.0.10"
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: 10c0/6c01287e7492c001595cd5a39765f313e48e1d2997ea78823919edabd692300d144c42b6e16dee6e077a683e635b9164ff985d5a0f8eeff7824b2d119151899e
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-virtual@npm:^3.0.0-beta.60":
   version: 3.5.0
   resolution: "@tanstack/react-virtual@npm:3.5.0"
@@ -5001,6 +5015,7 @@ __metadata:
     "@radix-ui/themes": "npm:^2.0.1"
     "@tabler/icons-react": "npm:^2.20.0"
     "@tailwindcss/forms": "npm:^0.4.0"
+    "@tailwindcss/typography": "npm:^0.5.13"
     "@tiptap/extension-highlight": "npm:^2.0.3"
     "@tiptap/extension-link": "npm:^2.0.3"
     "@tiptap/extension-placeholder": "npm:^2.1.13"
@@ -9534,6 +9549,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.castarray@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "lodash.castarray@npm:4.4.0"
+  checksum: 10c0/0bf523ad1596a5bf17869ba047235b4453eee927005013ae152345e2b291b81a02e7f2b7c38f876a1d16f73c34aa3c3241e965193e5b31595035bc8f330c4358
+  languageName: node
+  linkType: hard
+
 "lodash.get@npm:^4.4.2":
   version: 4.4.2
   resolution: "lodash.get@npm:4.4.2"
@@ -12000,6 +12022,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-selector-parser@npm:6.0.10":
+  version: 6.0.10
+  resolution: "postcss-selector-parser@npm:6.0.10"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10c0/a0b27c5e3f7604c8dc7cd83f145fdd7b21448e0d86072da99e0d78e536ba27aa9db2d42024c50aa530408ee517c4bdc0260529e1afb56608f9a82e839c207e82
+  languageName: node
+  linkType: hard
+
 "postcss-selector-parser@npm:^6.0.11":
   version: 6.1.0
   resolution: "postcss-selector-parser@npm:6.1.0"