frappe-ui 1.0.0-beta.21 → 1.0.0-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.24",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": [
@@ -172,6 +172,7 @@
     "@tiptap/extension-typography": "^3.26.0",
     "@tiptap/extension-underline": "^3.26.0",
     "@tiptap/extensions": "^3.26.0",
+    "@tiptap/markdown": "^3.26.0",
     "@tiptap/pm": "^3.26.0",
     "@tiptap/starter-kit": "^3.26.0",
     "@tiptap/suggestion": "^3.26.0",

package/src/components/Avatar/Avatar.api.md

@@ -30,6 +30,13 @@
     required: false,
     type: '"circle" | "square"',
     default: '"circle"'
+  },
+  {
+    name: 'theme',
+    description: 'Visual color theme used for the fallback avatar',
+    required: false,
+    type: '"gray" | "blue" | "green" | "amber" | "red" | "violet"',
+    default: '"gray"'
   }
 ]
 
@@ -51,4 +58,3 @@
 <PropsTable name="Avatar" :data="propsData"/> 
 
 <SlotsTable :data="slotsData"/> 
-

package/src/components/Avatar/Avatar.cy.ts

@@ -44,4 +44,25 @@ describe('Avatar', () => {
 
     cy.get('[data-cy="avatar"]').should('have.text', 'A')
   })
+
+  it('Uses gray fallback theme by default', () => {
+    cy.mount(Avatar, {
+      props: { 'data-cy': 'avatar', label: 'Abc' },
+    })
+
+    cy.get('[data-cy="avatar"] > div')
+      .should('have.class', 'bg-surface-gray-2')
+      .and('have.class', 'text-ink-gray-5')
+  })
+
+  it('Supports colorful fallback themes', () => {
+    cy.mount(Avatar, {
+      props: { 'data-cy': 'avatar', label: 'Abc', theme: 'blue' },
+    })
+
+    cy.get('[data-cy="avatar"] > div')
+      .should('have.class', 'bg-surface-blue-2')
+      .and('have.class', 'text-ink-blue-8')
+  })
+
 })

package/src/components/Avatar/Avatar.md

@@ -6,10 +6,13 @@ A visual representation of a user, typically shown as an image, initials, or an
 
 <ClientOnly><AvatarBuilder /></ClientOnly>
 
-## Themes
+## Shapes
 <ComponentPreview name="Avatar-Shapes" />
 
-## Controlled state
+## Sizes
 <ComponentPreview name="Avatar-Sizes" />
 
+## Themes
+<ComponentPreview name="Avatar-Themes" />
+
 <!-- @include: ./Avatar.api.md -->

package/src/components/Avatar/Avatar.vue

@@ -12,8 +12,8 @@
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-surface-gray-2 uppercase text-ink-gray-5 select-none"
-      :class="[labelClasses, shapeClasses]"
+      class="flex h-full w-full items-center justify-center uppercase select-none"
+      :class="[labelClasses, fallbackThemeClasses, shapeClasses]"
     >
       <div :class="iconClasses" v-if="$slots.default">
         <slot></slot>
@@ -38,13 +38,26 @@
 
 <script setup lang="ts">
 import { ref, computed, useAttrs } from 'vue'
-import type { AvatarProps } from './types'
+import type { AvatarProps, AvatarTheme } from './types'
 
 const imgFetchError = ref(false)
 
 const props = withDefaults(defineProps<AvatarProps>(), {
   size: 'md',
   shape: 'circle',
+  theme: 'gray',
+})
+
+const fallbackThemeClasses = computed(() => {
+  const classes: Record<AvatarTheme, string> = {
+    gray: 'bg-surface-gray-2 text-ink-gray-5',
+    blue: 'bg-surface-blue-2 text-ink-blue-8',
+    green: 'bg-surface-green-2 text-ink-green-8',
+    amber: 'bg-surface-amber-2 text-ink-amber-8',
+    red: 'bg-surface-red-2 text-ink-red-8',
+    violet: 'bg-surface-violet-2 text-ink-violet-8',
+  }
+  return classes[props.theme]
 })
 
 // Let a consumer size the avatar with a Tailwind utility (`class="size-16"`)
@@ -60,7 +73,9 @@ const hasSizeOverride = computed(() => {
       ? attrs.class
       : ''
   return cls.split(/\s+/).some((token) => {
-    const base = token.includes(':') ? token.slice(token.lastIndexOf(':') + 1) : token
+    const base = token.includes(':')
+      ? token.slice(token.lastIndexOf(':') + 1)
+      : token
     return /^-?(size|w|h|min-w|max-w|min-h|max-h)-/.test(base)
   })
 })
@@ -142,7 +157,7 @@ const iconClasses = computed(() => {
   }[props.size]
 })
 
-function handleImageError(err) {
+function handleImageError(err: Event) {
   if (err.type) {
     imgFetchError.value = true
   }
@@ -155,5 +170,4 @@ defineSlots<{
   /** Small indicator shown at the bottom-right of the avatar */
   indicator?: () => any
 }>()
-
 </script>

package/src/components/Avatar/index.ts

@@ -1,2 +1,2 @@
 export { default as Avatar } from './Avatar.vue'
-export type { AvatarProps } from './types'
+export type { AvatarProps, AvatarTheme } from './types'

package/src/components/Avatar/stories/Themes.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Avatar } from 'frappe-ui'
+import type { AvatarTheme } from 'frappe-ui'
+
+const themes: AvatarTheme[] = [
+  'gray',
+  'blue',
+  'green',
+  'amber',
+  'red',
+  'violet',
+]
+</script>
+
+<template>
+  <Avatar
+    v-for="theme in themes"
+    :key="theme"
+    :label="theme"
+    :theme="theme"
+    size="lg"
+  />
+</template>

package/src/components/Avatar/types.ts

@@ -1,3 +1,11 @@
+export type AvatarTheme =
+  | 'gray'
+  | 'blue'
+  | 'green'
+  | 'amber'
+  | 'red'
+  | 'violet'
+
 export interface AvatarProps {
   /** Image URL used for the avatar */
   image?: string
@@ -10,4 +18,7 @@ export interface AvatarProps {
 
   /** Defines the avatar shape */
   shape?: 'circle' | 'square'
+
+  /** Visual color theme used for the fallback avatar */
+  theme?: AvatarTheme
 }

package/src/components/Calendar/CalendarMonthEvent.vue

@@ -25,10 +25,10 @@
           class="relative flex h-full select-none items-start gap-2 overflow-hidden"
         >
           <div v-if="config.showIcon && eventIcon">
-            <component :is="eventIcon" class="h-4 w-4 text-black" />
+            <component :is="eventIcon" class="h-4 w-4 text-ink-gray-8" />
           </div>
           <p
-            class="text-sm-medium truncate"
+            class="text-sm-medium truncate text-ink-gray-8"
             :class="{ italic: !props.event.title }"
           >
             {{ props.event.title || '[No title]' }}

package/src/components/Calendar/CalendarMonthly.vue

@@ -37,20 +37,17 @@
           >
             <span
               class="w-full flex justify-between items-center"
-              :class="[
-                date.toDateString() === new Date().toDateString()
-                  ? 'p-[3px] pb-0.5'
-                  : 'p-2',
-              ]"
+              :class="[isToday(date) ? 'p-[3px] pb-0.5' : 'p-2']"
             >
               <div></div>
               <div
                 class="cursor-pointer"
                 :class="[
-                  date.toDateString() === new Date().toDateString()
-                    ? 'flex items-center justify-center bg-surface-gray-10 text-ink-base rounded size-[25px]'
-                    : 'bg-surface-base ',
-                  isCurrentMonth(date) ? 'text-ink-gray-6' : 'text-ink-gray-4',
+                  !isCurrentMonth(date)
+                    ? 'bg-surface-base text-ink-gray-4'
+                    : isToday(date)
+                      ? 'flex items-center justify-center bg-surface-gray-10 text-ink-gray-2 rounded size-[25px]'
+                      : 'bg-surface-base text-ink-gray-8',
                 ]"
                 @click.stop="
                   isCurrentMonth(date)
@@ -145,6 +142,10 @@ const maxEventsInCell = computed(() =>
   props.currentMonthDates.length > 35 ? 1 : 2,
 )
 
+function isToday(date: Date) {
+  return date.toDateString() === new Date().toDateString()
+}
+
 function isCurrentMonth(date: Date) {
   return date.getMonth() === props.currentMonth
 }

package/src/components/Calendar/CalendarWeekly.vue

@@ -12,7 +12,7 @@
           {{ isToday(date) ? daysList[date.getDay()] : parseDateWithDay(date) }}
           <span
             v-if="isToday(date)"
-            class="inline-flex items-center justify-center bg-surface-gray-10 text-ink-base rounded size-[25px]"
+            class="inline-flex items-center justify-center bg-surface-gray-10 text-ink-gray-1 rounded size-[25px]"
           >
             {{ date.getDate() }}
           </span>

package/src/components/Calendar/calendarUtils.ts

@@ -304,170 +304,92 @@ export function formatTime(time: string, format: CalendarTimeFormat): string {
 
 export const colorMap: Record<string, CalendarColor> = {
   amber: {
-    color: '#DB7706',
-    border: '#DB7706',
-    borderActive: '#FBCC55',
-    text: '#91400D',
-    subtext: '#AD8460',
-    subtextActive: '#FAEBD0',
-    bg: '#FFF7D3',
-    bgHover: '#FEEDA9',
-    bgActive: '#E79913',
+    color: 'var(--ink-amber-7)',
+    border: 'var(--ink-amber-7)',
+    borderActive: 'var(--outline-amber-2)',
+    text: 'var(--ink-amber-7)',
+    textActive: 'var(--ink-amber-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-amber-1)',
+    bg: 'var(--surface-amber-1)',
+    bgHover: 'var(--surface-amber-1)',
+    bgActive: 'var(--surface-amber-2)',
   },
   violet: {
-    color: '#6846E3',
-    border: '#6846E3',
-    borderActive: '#B3A1F5',
-    text: '#5F46C7',
-    subtext: '#766D9B',
-    subtextActive: '#E4DCFD',
-    bg: '#F0EBFF',
-    bgHover: '#DBD5FF',
-    bgActive: '#7A51F4',
+    color: 'var(--ink-violet-7)',
+    border: 'var(--ink-violet-7)',
+    borderActive: 'var(--outline-gray-4)',
+    text: 'var(--ink-violet-7)',
+    textActive: 'var(--ink-violet-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-base)',
+    bg: 'var(--surface-violet-1)',
+    bgHover: 'var(--surface-violet-1)',
+    bgActive: 'var(--surface-violet-7)',
   },
   pink: {
-    color: '#E34AA6',
-    border: '#E34AA6',
-    borderActive: '#F6A7D6',
-    text: '#CF3A96',
-    subtext: '#B26997',
-    subtextActive: '#F9DBED',
-    bg: '#FDE8F5',
-    bgHover: '#FFD5F0',
-    bgActive: '#E34AA6',
+    color: 'var(--ink-pink-7)',
+    border: 'var(--ink-pink-7)',
+    borderActive: 'var(--outline-gray-4)',
+    text: 'var(--ink-pink-7)',
+    textActive: 'var(--ink-pink-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-base)',
+    bg: 'var(--surface-pink-1)',
+    bgHover: 'var(--surface-pink-1)',
+    bgActive: 'var(--surface-pink-7)',
   },
   cyan: {
-    color: '#3BBDE5',
-    border: '#3BBDE5',
-    borderActive: '#72D5F3',
-    text: '#267A94',
-    subtext: '#668E9C',
-    subtextActive: '#D6EDF4',
-    bg: '#DDF7FF',
-    bgHover: '#B3E8F7',
-    bgActive: '#32A4C7',
+    color: 'var(--ink-cyan-7)',
+    border: 'var(--ink-cyan-7)',
+    borderActive: 'var(--ink-cyan-7)',
+    text: 'var(--ink-cyan-7)',
+    textActive: 'var(--ink-cyan-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-base)',
+    bg: 'var(--surface-cyan-1)',
+    bgHover: 'var(--surface-cyan-1)',
+    bgActive: 'var(--surface-cyan-7)',
   },
   blue: {
-    color: '#0289F7',
-    border: '#0289F7',
-    borderActive: '#A7D7FD',
-    text: '#007BE0',
-    subtext: '#5C8DB3',
-    subtextActive: '#CCE7FD',
-    bg: '#E6F4FF',
-    bgHover: '#C8E6FF',
-    bgActive: '#0289F7',
+    color: 'var(--ink-blue-7)',
+    border: 'var(--ink-blue-7)',
+    borderActive: 'var(--outline-blue-2)',
+    text: 'var(--ink-blue-7)',
+    textActive: 'var(--ink-blue-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-blue-1)',
+    bg: 'var(--surface-blue-1)',
+    bgHover: 'var(--surface-blue-1)',
+    bgActive: 'var(--surface-blue-2)',
   },
   orange: {
-    color: '#E86C13',
-    border: '#E86C13',
-    borderActive: '#FFCBA3',
-    text: '#E86C13',
-    subtext: '#A67765',
-    subtextActive: '#FAE2D0',
-    bg: '#FFEFE4',
-    bgHover: '#FFDEC5',
-    bgActive: '#E86C13',
+    color: 'var(--ink-orange-7)',
+    border: 'var(--outline-orange-1)',
+    borderActive: 'var(--outline-orange-1)',
+    text: 'var(--ink-orange-7)',
+    textActive: 'var(--ink-orange-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-base)',
+    bg: 'var(--surface-orange-1)',
+    bgHover: 'var(--surface-orange-1)',
+    bgActive: 'var(--outline-orange-1)',
   },
   green: {
-    color: '#30A66D',
-    border: '#30A66D',
-    borderActive: '#88D5A5',
-    text: '#137949',
-    subtext: '#678877',
-    subtextActive: '#D6EDE2',
-    bg: '#E4FAEB',
-    bgHover: '#CBF3D7',
-    bgActive: '#30A66D',
+    color: 'var(--ink-green-7)',
+    border: 'var(--ink-green-7)',
+    borderActive: 'var(--outline-green-2)',
+    text: 'var(--ink-green-7)',
+    textActive: 'var(--ink-green-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-green-1)',
+    bg: 'var(--surface-green-1)',
+    bgHover: 'var(--surface-green-1)',
+    bgActive: 'var(--surface-green-3)',
   },
 }
 
-export const colorMapDark: Record<string, CalendarColor> = {
-  amber: {
-    color: '#DB7706',
-    border: '#C57411',
-    borderActive: '#C57411',
-    text: '#C57411',
-    textActive: '#824108',
-    subtext: '#988356',
-    subtextActive: '#8E6026',
-    bg: '#371E06',
-    bgHover: '#4B2606',
-    bgActive: '#F8D16E',
-  },
-  violet: {
-    color: '#6846E3',
-    border: '#A384EC',
-    borderActive: '#8867E8',
-    text: '#A384EC',
-    textActive: '#4639A6',
-    subtext: '#9389AE',
-    subtextActive: '#332978',
-    bg: '#221C42',
-    bgHover: '#281E5D',
-    bgActive: '#C4AFEE',
-  },
-  pink: {
-    color: '#E34AA6',
-    border: '#CB4394',
-    borderActive: '#CB4394',
-    text: '#E359AB',
-    textActive: '#822A5F',
-    subtext: '#B07E99',
-    subtextActive: '#935277',
-    bg: '#471432',
-    bgHover: '#68204B',
-    bgActive: '#F6C5DE',
-  },
-  cyan: {
-    color: '#3BBDE5',
-    border: '#2B8DAB',
-    borderActive: '#2B8DAB',
-    text: '#3CB8DC',
-    textActive: '#155266',
-    subtext: '#819FA8',
-    subtextActive: '#3A6E7D',
-    bg: '#0B252D',
-    bgHover: '#0E3B49',
-    bgActive: '#A0E6F7',
-  },
-  blue: {
-    color: '#0289F7',
-    border: '#3294E3',
-    borderActive: '#1580D8',
-    text: '#5AAEF2',
-    textActive: '#155999',
-    subtext: '#7F95AC',
-    subtextActive: '#386A99',
-    bg: '#10243E',
-    bgHover: '#052B53',
-    bgActive: '#ADD2F5',
-  },
-  orange: {
-    color: '#E86C13',
-    border: '#C45A0E',
-    borderActive: '#C45A0E',
-    text: '#DE6D1B',
-    textActive: '#823906',
-    subtext: '#B3876B',
-    subtextActive: '#955528',
-    bg: '#401F07',
-    bgHover: '#532707',
-    bgActive: '#FFA873',
-  },
-  green: {
-    color: '#30A66D',
-    border: '#35AE74',
-    borderActive: '#35AE74',
-    text: '#58C08E',
-    textActive: '#0B6139',
-    subtext: '#7CA490',
-    subtextActive: '#0B6139',
-    bg: '#0B2E1C',
-    bgHover: '#0A3F27',
-    bgActive: '#9BE6C1',
-  },
-}
+export const colorMapDark: Record<string, CalendarColor> = colorMap
 
 // config.weekends can be array of numbers [0-6] (0=Sun) or weekday names (e.g., 'Saturday').
 // Falls back to [0] (Sunday) if not provided / invalid.

package/src/components/Calendar/stories/CustomHeader.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Button, Calendar, DatePicker, Select } from "frappe-ui";
+import { Button, Calendar, DatePicker, Select } from 'frappe-ui'
 
 const config = {
   defaultMode: 'Month',
@@ -65,10 +65,10 @@ const events = ref([
     color: 'red',
   },
   {
-    title: 'Google Meet with John ',
+    title: 'Frappe Meet with John',
     participant: 'John',
     id: '#htrht41',
-    venue: 'Google Meet',
+    venue: 'Frappe Meet',
     fromDate: currentMonthYear + '-11',
     toDate: currentMonthYear + '-11',
     fromTime: '00:00',
@@ -77,10 +77,10 @@ const events = ref([
     isFullDay: true,
   },
   {
-    title: 'Zoom Meet with Sheldon',
+    title: 'Frappe Meet with Sheldon',
     participant: 'Sheldon',
     id: '#htrht42',
-    venue: 'Google Meet',
+    venue: 'Frappe Meet',
     fromDate: currentMonthYear + '-07',
     toDate: currentMonthYear + '-07',
     fromTime: '00:00',
@@ -92,7 +92,9 @@ const events = ref([
 </script>
 
 <template>
-  <div class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden">
+  <div
+    class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden"
+  >
     <Calendar
       :config="config"
       :events="events"

package/src/components/Calendar/stories/Examples.vue

@@ -65,10 +65,10 @@ const events = ref([
     color: 'red',
   },
   {
-    title: 'Google Meet with John ',
+    title: 'Frappe Meet with John',
     participant: 'John',
     id: '#htrht41',
-    venue: 'Google Meet',
+    venue: 'Frappe Meet',
     fromDate: currentMonthYear + '-11',
     toDate: currentMonthYear + '-11',
     fromTime: '00:00',
@@ -77,10 +77,10 @@ const events = ref([
     isFullDay: true,
   },
   {
-    title: 'Zoom Meet with Sheldon',
+    title: 'Frappe Meet with Sheldon',
     participant: 'Sheldon',
     id: '#htrht42',
-    venue: 'Google Meet',
+    venue: 'Frappe Meet',
     fromDate: currentMonthYear + '-07',
     toDate: currentMonthYear + '-07',
     fromTime: '00:00',
@@ -92,7 +92,9 @@ const events = ref([
 </script>
 
 <template>
-  <div class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden">
+  <div
+    class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden"
+  >
     <Calendar
       :config="config"
       :events="events"

package/src/components/Calendar/style.css

@@ -27,7 +27,7 @@
   background-color: var(--bg-active);
 }
 .event.active .event-title {
-  color: var(--text-active, #fff);
+  color: var(--text-active, var(--ink-base));
 }
 .event.active .event-subtitle {
   color: var(--subtext-active);

package/src/components/Calendar/useEventBase.ts

@@ -8,6 +8,16 @@ import {
   type CalendarEvent,
 } from './types'
 
+const legacyColorNamesByHex: Record<string, keyof typeof colorMap> = {
+  '#db7706': 'amber',
+  '#6846e3': 'violet',
+  '#e34aa6': 'pink',
+  '#3bbde5': 'cyan',
+  '#0289f7': 'blue',
+  '#e86c13': 'orange',
+  '#30a66d': 'green',
+}
+
 export const isAnyPopoverOpen = ref(false)
 
 export function useEventBase(props: { event: CalendarEvent; date: Date }) {
@@ -51,6 +61,8 @@ export function useEventBase(props: { event: CalendarEvent; date: Date }) {
     const map = getTheme() === 'dark' ? colorMapDark : colorMap
     if (!colorValue?.startsWith('#'))
       return map[colorValue || 'green'] || map['green']!
+    const legacyColorName = legacyColorNamesByHex[colorValue.toLowerCase()]
+    if (legacyColorName) return map[legacyColorName]!
     for (const value of Object.values(map)) {
       if (value.color === colorValue) return value
     }

package/src/molecules/editor/Editor.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
     extensions: Extension[]
 
     // content / behavior knobs (universal, reactive where noted)
-    format?: 'html' | 'json'
+    format?: 'html' | 'json' | 'markdown'
     placeholder?: string
     editable?: boolean
     autofocus?: boolean
@@ -60,7 +60,11 @@ const editor = useEditor({
     // independent of v-model timing).
     emit(
       'change',
-      props.format === 'json' ? editor.getJSON() : editor.getHTML(),
+      props.format === 'json'
+        ? editor.getJSON()
+        : props.format === 'markdown'
+          ? editor.getMarkdown()
+          : editor.getHTML(),
     )
   },
   onFocus(_editor, event) {

package/src/molecules/editor/extensions.ts

@@ -311,3 +311,8 @@ export const Toc = TocNodeExtension
 export const ContentPaste = ContentPasteExtension
 export const StyleClipboard = StyleClipboardExtension
 export type { MediaUploadRequestOptions } from './extensions/shared/media-upload-engine'
+
+// Required in `extensions` for `format: 'markdown'`. A plain re-export (no
+// use inside useEditor) so bundlers drop the markdown/marked payload for
+// editors that never import it.
+export { Markdown, type MarkdownExtensionOptions } from '@tiptap/markdown'

package/src/molecules/editor/useEditor.test.ts

@@ -54,6 +54,10 @@ vi.mock('@tiptap/core', () => {
       return typeof this.content === 'object' ? this.content : { type: 'doc', content: [] }
     }
 
+    getMarkdown() {
+      return typeof this.content === 'string' ? this.content : '# json'
+    }
+
     setEditable(value: boolean) {
       this.editable = value
     }
@@ -66,6 +70,17 @@ vi.mock('@tiptap/core', () => {
   return { Editor, Extension, Node, Mark, mergeAttributes, nodeInputRule, markInputRule }
 })
 
+vi.mock('@tiptap/markdown', () => ({
+  Markdown: {
+    name: 'markdown',
+    configure: vi.fn((options: any) => ({
+      name: 'markdown',
+      options,
+      configured: true,
+    })),
+  },
+}))
+
 vi.mock('@tiptap/vue-3', () => ({
   EditorContent: defineComponent({
     props: ['editor'],
@@ -196,6 +211,63 @@ describe('frappe-ui/editor minimal primitives', () => {
     expect(editor.commands.setContent).toHaveBeenCalledTimes(calls)
   })
 
+  it('sets markdown contentType and warns when the Markdown extension is missing', async () => {
+    const { useEditor } = await import('./index')
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    createApp(
+      defineComponent({
+        setup() {
+          useEditor({ content: ref('# Hi'), format: 'markdown', extensions: [] })
+          return () => null
+        },
+      }),
+    ).mount(document.createElement('div'))
+
+    expect(editors[0].options.contentType).toBe('markdown')
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("format: 'markdown' needs the Markdown extension"),
+    )
+    warn.mockRestore()
+  })
+
+  it('binds markdown content in both directions without rewriting equal external markdown', async () => {
+    const { useEditor, Markdown } = await import('./index')
+    const content = ref('# Hello')
+
+    createApp(
+      defineComponent({
+        setup() {
+          useEditor({ content, format: 'markdown', extensions: [Markdown as any] })
+          return () => null
+        },
+      }),
+    ).mount(document.createElement('div'))
+
+    const editor = editors[0]
+    expect(editor.options.content).toBe('# Hello')
+
+    // Internal edit flows out through getMarkdown() and must not bounce back.
+    editor.content = '# Internal'
+    editor.options.onUpdate({ editor })
+    expect(content.value).toBe('# Internal')
+    await nextTick()
+    expect(editor.commands.setContent).not.toHaveBeenCalled()
+
+    // External write equal to the current document is a no-op.
+    content.value = '# Internal'
+    await nextTick()
+    expect(editor.commands.setContent).not.toHaveBeenCalled()
+
+    // A genuinely new external value is parsed as markdown.
+    content.value = '# External'
+    await nextTick()
+    expect(editor.commands.setContent).toHaveBeenCalledWith('# External', {
+      emitUpdate: false,
+      contentType: 'markdown',
+    })
+  })
+
   it('keeps editable reactive', async () => {
     const { useEditor } = await import('./index')
     const editable = ref(true)

package/src/molecules/editor/useEditor.ts

@@ -19,7 +19,7 @@ type Editor = TiptapEditor
 
 export type UseEditorOptions = {
   content?: Ref<string | JSONContent | null | undefined>
-  format?: 'html' | 'json'
+  format?: 'html' | 'json' | 'markdown'
   editable?: MaybeRefOrGetter<boolean>
   autofocus?: boolean
   uploadFunction?: (file: File) => Promise<UploadedFile>
@@ -63,6 +63,23 @@ export function useEditor(
 
   const extensions = [UploadStorage, ...options.extensions]
 
+  if (
+    import.meta.env?.DEV &&
+    format === 'markdown' &&
+    !extensions.some((extension) => extension.name === 'markdown')
+  ) {
+    console.warn(
+      "[frappe-ui] format: 'markdown' needs the Markdown extension in `extensions` — import { Markdown } from 'frappe-ui/editor'.",
+    )
+  }
+
+  const serialize = (tiptapEditor: Editor) =>
+    format === 'json'
+      ? tiptapEditor.getJSON()
+      : format === 'markdown'
+        ? tiptapEditor.getMarkdown()
+        : tiptapEditor.getHTML()
+
   const editorOptions: Partial<EditorOptions> = {
     element: null,
     extensions,
@@ -70,8 +87,7 @@ export function useEditor(
     autofocus: options.autofocus,
     onUpdate: ({ editor: tiptapEditor }) => {
       if (!isCollaborationMode && options.content && !applyingExternalUpdate) {
-        const value =
-          format === 'json' ? tiptapEditor.getJSON() : tiptapEditor.getHTML()
+        const value = serialize(tiptapEditor)
         lastEmitted = value
         options.content.value = value
       }
@@ -88,6 +104,10 @@ export function useEditor(
     },
   }
 
+  if (format === 'markdown') {
+    editorOptions.contentType = 'markdown'
+  }
+
   if (!isCollaborationMode && options.content?.value != null) {
     editorOptions.content = options.content.value
   }
@@ -109,10 +129,17 @@ export function useEditor(
       // whose fresh-object identity defeats the HTML string check below).
       if (toRaw(content) === lastEmitted) return
       if (format === 'html' && editor.value.getHTML() === content) return
+      if (format === 'markdown' && editor.value.getMarkdown() === content)
+        return
 
       applyingExternalUpdate = true
       try {
-        editor.value.commands.setContent(content ?? '', { emitUpdate: false })
+        editor.value.commands.setContent(
+          content ?? '',
+          format === 'markdown'
+            ? { emitUpdate: false, contentType: 'markdown' }
+            : { emitUpdate: false },
+        )
       } finally {
         applyingExternalUpdate = false
       }

package/vitepress/components/Docs/Sidebar.vue

@@ -32,12 +32,12 @@ const isActive = (link: string) =>
   >
     <div class="px-1">
       <a
-        class="hidden items-center gap-2.5 px-2 py-2 lg:flex hover:bg-surface-gray-2 rounded transition-colors"
+        class="hidden items-center gap-1.5 px-2 py-2 lg:flex hover:bg-surface-gray-2 rounded transition-colors"
         :href="withBase('/')"
       >
-        <img v-if="logo" :src="withBase(logo)" class="w-7" />
+        <img v-if="logo" :src="withBase(logo)" class="w-6" />
         <div class="flex flex-col gap-1 *:leading-none">
-          <span class="text-base font-medium text-ink-gray-8">{{
+          <span class="text-lg-bold text-ink-gray-8 tracking-[-0.01em]">{{
             siteName
           }}</span>
           <span v-if="curVersion" class="text-sm text-ink-gray-5"

package/vitepress/components/Navbar.vue

@@ -58,7 +58,7 @@ const toggleTheme = () =>
       <a
         v-if="logo || name"
         :href="withBase('/')"
-        class="flex items-center gap-2.5 min-w-0"
+        class="flex items-center gap-1.5 min-w-0"
         :class="{ 'lg:hidden': isDocs }"
       >
         <img
@@ -67,7 +67,10 @@ const toggleTheme = () =>
           class="w-6 shrink-0"
           :alt="name"
         />
-        <span v-if="name" class="text-sm font-medium text-ink-gray-8 truncate">
+        <span
+          v-if="name"
+          class="text-lg-bold text-ink-gray-8 truncate tracking-[-0.01em]"
+        >
           {{ name }}
         </span>
       </a>