From 0abcb651a039ea70e16e4e62a8de850edbe79f7c Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Tue, 14 Apr 2026 03:00:00 +0530
Subject: [PATCH] feat: use prose-v3 typography, point frappe-ui to
 better-prose-styles branch

- Switch all editor instances from prose-sm to prose-v3
- Point frappe-ui to frappe/frappe-ui#better-prose-styles
  (frappe-ui PR: https://github.com/frappe/frappe-ui/pull/620)
---
 frontend/package.json                              | 2 +-
 frontend/src/components/CommentEditor.vue          | 2 +-
 frontend/src/components/ReadmeEditor.vue           | 2 +-
 frontend/src/components/RevisionsDialog.vue        | 4 ++--
 frontend/src/components/TaskDetail.vue             | 2 +-
 frontend/src/pages/NewDiscussion/NewDiscussion.vue | 2 +-
 frontend/src/pages/Page.vue                        | 2 +-
 frontend/src/pages/PageGrid.vue                    | 2 +-
 frontend/src/pages/ProjectDiscussionNew.vue        | 2 +-
 frontend/yarn.lock                                 | 7 +++----
 10 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index f9fbff08a..e206faa9d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,7 @@
     "@tiptap/vue-3": "^3.11.0",
     "@vueuse/core": "^10.1.2",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.269",
+    "frappe-ui": "frappe/frappe-ui#better-prose-styles",
     "fuzzysort": "^2.0.4",
     "gemoji": "^7.1.0",
     "htmldiff-js": "^1.0.5",
diff --git a/frontend/src/components/CommentEditor.vue b/frontend/src/components/CommentEditor.vue
index 20e43e363..0882dda31 100644
--- a/frontend/src/components/CommentEditor.vue
+++ b/frontend/src/components/CommentEditor.vue
@@ -1,7 +1,7 @@
 <template>
   <TextEditor
     ref="textEditor"
-    :editor-class="['prose-sm max-w-none', editable && 'min-h-[4rem]']"
+    :editor-class="['prose-v3 max-w-none', editable && 'min-h-[4rem]']"
     :content="value"
     @change="editable ? $emit('change', $event) : null"
     :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
diff --git a/frontend/src/components/ReadmeEditor.vue b/frontend/src/components/ReadmeEditor.vue
index 5cc878e85..491369de8 100644
--- a/frontend/src/components/ReadmeEditor.vue
+++ b/frontend/src/components/ReadmeEditor.vue
@@ -8,7 +8,7 @@
   >
     <TextEditor
       ref="readme"
-      editor-class="prose-sm"
+      editor-class="prose-v3"
       :content="resource.doc[fieldname]"
       :placeholder="placeholder"
       @change="(val) => (resource.doc[fieldname] = val)"
diff --git a/frontend/src/components/RevisionsDialog.vue b/frontend/src/components/RevisionsDialog.vue
index 17d18fff2..7f24f0685 100644
--- a/frontend/src/components/RevisionsDialog.vue
+++ b/frontend/src/components/RevisionsDialog.vue
@@ -52,7 +52,7 @@
           <div
             v-if="currentRevision"
             v-html="htmlDiff"
-            class="ProseMirror max-w-none prose prose-sm rounded-md prose-p:my-1 prose-table:table-fixed prose-th:relative prose-th:border prose-th:border-outline-gray-2 prose-th:bg-surface-gray-2 prose-th:p-2 prose-td:relative prose-td:border prose-td:border-outline-gray-2 prose-td:p-2"
+            class="ProseMirror max-w-none prose prose-v3 rounded-md prose-table:table-fixed prose-th:relative prose-th:border prose-th:border-outline-gray-2 prose-th:bg-surface-gray-2 prose-th:p-2 prose-td:relative prose-td:border prose-td:border-outline-gray-2 prose-td:p-2"
           />
         </div>
       </div>
@@ -109,7 +109,7 @@
         <div
           v-if="sheetContentReady && currentRevision"
           v-html="htmlDiff"
-          class="ProseMirror max-w-none prose prose-sm rounded-md prose-p:my-1 prose-table:table-fixed prose-th:relative prose-th:border prose-th:border-outline-gray-2 prose-th:bg-surface-gray-2 prose-th:p-2 prose-td:relative prose-td:border prose-td:border-outline-gray-2 prose-td:p-2"
+          class="ProseMirror max-w-none prose prose-v3 rounded-md prose-table:table-fixed prose-th:relative prose-th:border prose-th:border-outline-gray-2 prose-th:bg-surface-gray-2 prose-th:p-2 prose-td:relative prose-td:border prose-td:border-outline-gray-2 prose-td:p-2"
         />
         <div v-else class="h-40 rounded-md bg-surface-gray-1" aria-hidden="true" />
       </div>
diff --git a/frontend/src/components/TaskDetail.vue b/frontend/src/components/TaskDetail.vue
index 869851aaa..7838cd331 100644
--- a/frontend/src/components/TaskDetail.vue
+++ b/frontend/src/components/TaskDetail.vue
@@ -49,7 +49,7 @@
         </div>
         <TextEditor
           ref="description"
-          editor-class="prose-sm max-w-none focus-within:ring-2 focus-within:ring-outline-gray-3 rounded-sm p-0.5 -ml-0.5 min-h-[4rem]"
+          editor-class="prose-v3 max-w-none focus-within:ring-2 focus-within:ring-outline-gray-3 rounded-sm p-0.5 -ml-0.5 min-h-[4rem]"
           placeholder="Description"
           :content="task.doc.description"
           :bubbleMenu="true"
diff --git a/frontend/src/pages/NewDiscussion/NewDiscussion.vue b/frontend/src/pages/NewDiscussion/NewDiscussion.vue
index e04617108..a2fc9e1cd 100644
--- a/frontend/src/pages/NewDiscussion/NewDiscussion.vue
+++ b/frontend/src/pages/NewDiscussion/NewDiscussion.vue
@@ -2,7 +2,7 @@
   <TextEditor
     ref="textEditorRef"
     class="pb-40"
-    editor-class="max-w-[unset] min-h-[calc(100vh-350px)] prose-sm overflow-auto px-2 -mx-2"
+    editor-class="max-w-[unset] min-h-[calc(100vh-350px)] prose-v3 overflow-auto px-2 -mx-2"
     :content="draftData.content"
     @change="(content: string) => (draftData.content = content)"
     :editable="author.name === sessionUser.name"
diff --git a/frontend/src/pages/Page.vue b/frontend/src/pages/Page.vue
index b8c86fdc6..40e94bd3e 100644
--- a/frontend/src/pages/Page.vue
+++ b/frontend/src/pages/Page.vue
@@ -93,7 +93,7 @@
           />
         </div>
         <TextEditor
-          editor-class="rounded-b-lg max-w-[unset] prose-sm pb-[50vh] md:px-[70px]"
+          editor-class="rounded-b-lg max-w-[unset] prose-v3 pb-[50vh] md:px-[70px]"
           :content="content"
           @change="
             (value) => {
diff --git a/frontend/src/pages/PageGrid.vue b/frontend/src/pages/PageGrid.vue
index 65cd0f0c2..0e68e99ad 100644
--- a/frontend/src/pages/PageGrid.vue
+++ b/frontend/src/pages/PageGrid.vue
@@ -25,7 +25,7 @@
           >
             <div class="overflow-hidden text-ellipsis whitespace-nowrap">
               <div
-                class="prose prose-sm pointer-events-none w-[200%] origin-top-left scale-[.55] prose-p:my-1 md:w-[250%] md:scale-[.39]"
+                class="prose prose-v3 pointer-events-none w-[200%] origin-top-left scale-[.55] md:w-[250%] md:scale-[.39]"
                 v-html="d.content"
               />
             </div>
diff --git a/frontend/src/pages/ProjectDiscussionNew.vue b/frontend/src/pages/ProjectDiscussionNew.vue
index a285a1e02..7bb8e47a6 100644
--- a/frontend/src/pages/ProjectDiscussionNew.vue
+++ b/frontend/src/pages/ProjectDiscussionNew.vue
@@ -66,7 +66,7 @@
       <TextEditor
         ref="textEditor"
         class="mt-1"
-        editor-class="rounded-b-lg max-w-[unset] prose-sm h-[calc(100vh-340px)] sm:h-[calc(100vh-250px)] overflow-auto"
+        editor-class="rounded-b-lg max-w-[unset] prose-v3 h-[calc(100vh-340px)] sm:h-[calc(100vh-250px)] overflow-auto"
         :content="content"
         @change="onNewPostChange"
         placeholder="Write something..."
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a52089d5e..db4215b0c 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1999,10 +1999,9 @@ framer-motion@^12.25.0:
     motion-utils "^12.36.0"
     tslib "^2.4.0"
 
-frappe-ui@^0.1.269:
-  version "0.1.269"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.269.tgz#d694cd23fe6eadbd7bb898bb3f46e0414c27f829"
-  integrity sha512-1D4AW8cPoC7OIRqEzYnF169/r+v0EfVBvfCi/ovmk76FBPKY+qIVOzL+Vx/9TcYvJubc1tSU19F/jX177e3axA==
+frappe-ui@frappe/frappe-ui#better-prose-styles:
+  version "0.1.272"
+  resolved "https://codeload.github.com/frappe/frappe-ui/tar.gz/2fde537e9e0a6179c0bcd8b3db07f95b9b9fa629"
   dependencies:
     "@floating-ui/dom" "^1.7.4"
     "@floating-ui/vue" "^1.1.6"