feat: use prose-v3 typography styles

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",

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] } }"

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)"

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>

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"

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"

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) => {

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>

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..."

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"