frappe-ui 0.1.162 → 0.1.164

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.162",
+  "version": "0.1.164",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
   "scripts": {
     "test": "vitest --run",
+    "type-check": "tsc --noEmit",
     "prettier": "yarn prettier -w ./src",
     "bump-and-release": "yarn test && git pull --rebase origin main && yarn version --patch && git push && git push --tags",
     "dev": "vite",
@@ -62,6 +63,7 @@
     "idb-keyval": "^6.2.0",
     "lowlight": "^3.3.0",
     "lucide-static": "^0.479.0",
+    "marked": "^15.0.12",
     "ora": "5.4.1",
     "prettier": "^3.3.2",
     "prosemirror-model": "^1.25.1",
@@ -69,7 +71,6 @@
     "prosemirror-view": "^1.39.2",
     "radix-vue": "^1.5.3",
     "reka-ui": "^2.0.2",
-    "showdown": "^2.1.0",
     "socket.io-client": "^4.5.1",
     "tippy.js": "^6.3.7",
     "typescript": "^5.0.2",

package/src/components/Combobox/Combobox.story.vue

@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import Combobox from './Combobox.vue'
+
+const simpleValue = ref('')
+const objectValue = ref('')
+const iconValue = ref('')
+const groupedValue = ref('')
+const disabledValue = ref('')
+const preselectedValue = ref('john-doe')
+const multipleSimpleValue = ref([])
+const multipleObjectValue = ref([])
+const multipleGroupedValue = ref(['apple', 'carrot'])
+const complexObjectValue = ref(null)
+const selectedOption = ref(null)
+
+// Complex objects for displayValue demo
+const complexObjects = [
+  {
+    label: 'John Doe (Admin)',
+    value: 'john-doe',
+    email: 'john@example.com',
+    role: 'Admin',
+  },
+  {
+    label: 'Jane Smith (User)',
+    value: 'jane-smith',
+    email: 'jane@example.com',
+    role: 'User',
+  },
+  {
+    label: 'Bob Johnson (Manager)',
+    value: 'bob-johnson',
+    email: 'bob@example.com',
+    role: 'Manager',
+  },
+  {
+    label: 'Alice Brown (User)',
+    value: 'alice-brown',
+    email: 'alice@example.com',
+    role: 'User',
+  },
+]
+
+const simpleOptions = [
+  'John Doe',
+  'Jane Doe',
+  'John Smith',
+  'Jane Smith',
+  'John Wayne',
+  'Jane Wayne',
+  'Alice Johnson',
+  'Bob Wilson',
+  'Charlie Brown',
+  'Diana Prince',
+]
+
+const objectOptions = [
+  { label: 'John Doe', value: 'john-doe' },
+  { label: 'Jane Doe', value: 'jane-doe' },
+  { label: 'John Smith', value: 'john-smith' },
+  { label: 'Jane Smith', value: 'jane-smith', disabled: true },
+  { label: 'John Wayne', value: 'john-wayne' },
+  { label: 'Jane Wayne', value: 'jane-wayne' },
+  { label: 'Alice Johnson', value: 'alice-johnson' },
+  { label: 'Bob Wilson', value: 'bob-wilson' },
+]
+
+const optionsWithIcons = [
+  { label: 'Dashboard', value: 'dashboard', icon: '📊' },
+  { label: 'Projects', value: 'projects', icon: '📁' },
+  { label: 'Tasks', value: 'tasks', icon: '✅' },
+  { label: 'Calendar', value: 'calendar', icon: '📅' },
+  { label: 'Reports', value: 'reports', icon: '📈' },
+  { label: 'Settings', value: 'settings', icon: '⚙️' },
+]
+
+const groupedOptions = [
+  {
+    group: 'Fruits',
+    options: [
+      { label: 'Apple', value: 'apple', icon: '🍎' },
+      { label: 'Banana', value: 'banana', icon: '🍌' },
+      { label: 'Orange', value: 'orange', icon: '🍊' },
+      { label: 'Grape', value: 'grape', icon: '🍇' },
+    ],
+  },
+  {
+    group: 'Vegetables',
+    options: [
+      { label: 'Carrot', value: 'carrot', icon: '🥕' },
+      { label: 'Broccoli', value: 'broccoli', icon: '🥦' },
+      { label: 'Tomato', value: 'tomato', icon: '🍅' },
+      { label: 'Lettuce', value: 'lettuce', icon: '🥬' },
+    ],
+  },
+  {
+    group: 'Proteins',
+    options: [
+      { label: 'Chicken', value: 'chicken', icon: '🍗' },
+      { label: 'Fish', value: 'fish', icon: '🐟' },
+      { label: 'Beef', value: 'beef', icon: '🥩' },
+      { label: 'Tofu', value: 'tofu', icon: '🪤', disabled: true },
+    ],
+  },
+]
+
+const state = reactive({
+  disabled: false,
+  placeholder: 'Select an option...',
+  showCancel: true,
+})
+</script>
+
+<template>
+  <Story title="Combobox" :layout="{ type: 'grid', width: 400 }">
+    <Variant title="Simple String Options">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Simple Options</label>
+        <Combobox
+          :options="simpleOptions"
+          v-model="simpleValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :show-cancel="state.showCancel"
+          @update:selectedOption="selectedOption = $event"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ simpleValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Object Options">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Object Options</label>
+        <Combobox
+          :options="objectOptions"
+          v-model="objectValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :show-cancel="state.showCancel"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ objectValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Options with Icons">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Options with Icons</label>
+        <Combobox
+          :options="optionsWithIcons"
+          v-model="iconValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ iconValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Grouped Options">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Grouped Options</label>
+        <Combobox
+          :options="groupedOptions"
+          v-model="groupedValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ groupedValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled State">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Disabled Combobox</label>
+        <Combobox
+          :options="simpleOptions"
+          v-model="disabledValue"
+          placeholder="This is disabled"
+          :disabled="true"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Pre-selected Value">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Pre-selected Value</label>
+        <Combobox
+          :options="objectOptions"
+          v-model="preselectedValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ preselectedValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Selection - Simple">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2"
+          >Multiple Simple Options</label
+        >
+        <Combobox
+          :options="simpleOptions"
+          v-model="multipleSimpleValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :show-cancel="state.showCancel"
+          :multiple="true"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected:
+          {{
+            multipleSimpleValue.length > 0
+              ? multipleSimpleValue.join(', ')
+              : 'None'
+          }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Selection - Objects">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2"
+          >Multiple Object Options</label
+        >
+        <Combobox
+          :options="objectOptions"
+          v-model="multipleObjectValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :multiple="true"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected:
+          {{
+            multipleObjectValue.length > 0
+              ? multipleObjectValue.join(', ')
+              : 'None'
+          }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Selection - Grouped">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2"
+          >Multiple Grouped Options</label
+        >
+        <Combobox
+          :options="groupedOptions"
+          v-model="multipleGroupedValue"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :multiple="true"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected:
+          {{
+            multipleGroupedValue.length > 0
+              ? multipleGroupedValue.join(', ')
+              : 'None'
+          }}
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Complex Objects with Display Value">
+      <div class="p-4">
+        <label class="block text-sm font-medium mb-2">Complex Objects</label>
+        <Combobox
+          :options="complexObjects"
+          v-model="complexObjectValue"
+          :display-value="(obj) => (obj ? `${obj.label} - ${obj.email}` : '')"
+          :placeholder="state.placeholder"
+          :disabled="state.disabled"
+          :show-cancel="state.showCancel"
+        />
+        <div class="mt-2 text-sm text-gray-600">
+          Selected: {{ complexObjectValue || 'None' }}
+        </div>
+      </div>
+    </Variant>
+
+    <template #controls>
+      <HstText v-model="state.placeholder" title="Placeholder" />
+      <HstCheckbox v-model="state.disabled" title="Disabled" />
+      <HstCheckbox v-model="state.showCancel" title="Show Cancel Button" />
+    </template>
+  </Story>
+</template>

package/src/components/TabButtons/TabButtons.vue

@@ -1,6 +1,6 @@
 <template>
   <RadioGroup v-model="value">
-    <div class="flex space-x-1 rounded bg-surface-gray-2 p-0.5 text-sm">
+    <div class="flex space-x-1 rounded bg-surface-gray-2 p-[1px] text-sm">
       <RadioGroupOption
         as="template"
         v-for="button in buttons"

package/src/components/TextEditor/TextEditor.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="relative w-full"
-    :class="$attrs.class"
-    :style="$attrs.style"
     v-if="editor"
+    class="relative w-full"
+    :class="attrsClass"
+    :style="attrsStyle"
   >
     <TextEditorBubbleMenu :buttons="bubbleMenu" :options="bubbleMenuOptions" />
     <TextEditorFixedMenu
@@ -13,14 +13,27 @@
     <TextEditorFloatingMenu :buttons="floatingMenu" />
     <slot name="top" />
     <slot name="editor" :editor="editor">
-      <editor-content :editor="editor" />
+      <EditorContent :editor="editor" />
     </slot>
     <slot name="bottom" />
   </div>
 </template>
 
-<script lang="ts">
-import { normalizeClass, computed, PropType } from 'vue'
+<script setup lang="ts">
+import {
+  normalizeClass,
+  normalizeStyle,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  provide,
+  ref,
+  useAttrs,
+} from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
 import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
@@ -46,12 +59,12 @@ import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
 import TextEditorFloatingMenu from './TextEditorFloatingMenu.vue'
 import EmojiExtension from './extensions/emoji/emoji-extension'
 import SlashCommands from './extensions/slash-commands/slash-commands-extension'
-import { detectMarkdown, markdownToHTML } from '../../utils/markdown'
-import { DOMParser } from 'prosemirror-model'
+import { MarkdownPasteExtension } from './extensions/markdown-paste-extension'
 import { TagNode, TagExtension } from './extensions/tag/tag-extension'
 import { Heading } from './extensions/heading/heading'
 import { ImageGroup } from './extensions/image-group/image-group-extension'
 import { useFileUpload } from '../../utils/useFileUpload'
+import { TextEditorEmits, TextEditorProps } from './types'
 
 const lowlight = createLowlight(common)
 
@@ -61,214 +74,169 @@ function defaultUploadFunction(file: File) {
   return fileUpload.upload(file)
 }
 
-export default {
-  name: 'TextEditor',
-  inheritAttrs: false,
-  components: {
-    EditorContent,
-    TextEditorFixedMenu,
-    TextEditorBubbleMenu,
-    TextEditorFloatingMenu,
-  },
-  props: {
-    content: {
-      type: String,
-      default: null,
-    },
-    placeholder: {
-      type: [String, Function],
-      default: '',
-    },
-    editorClass: {
-      type: [String, Array, Object],
-      default: '',
-    },
-    editable: {
-      type: Boolean,
-      default: true,
-    },
-    bubbleMenu: {
-      type: [Boolean, Array],
-      default: false,
-    },
-    bubbleMenuOptions: {
-      type: Object,
-      default: () => ({}),
-    },
-    fixedMenu: {
-      type: [Boolean, Array],
-      default: false,
-    },
-    floatingMenu: {
-      type: [Boolean, Array],
-      default: false,
-    },
-    extensions: {
-      type: Array,
-      default: () => [],
-    },
-    starterkitOptions: {
-      type: Object,
-      default: () => ({}),
-    },
-    mentions: {
-      type: Array,
-      default: () => [],
-    },
-    tags: {
-      type: Array,
-      default: () => [],
-    },
-    uploadFunction: {
-      type: Function as PropType<typeof defaultUploadFunction>,
-      default: defaultUploadFunction,
+const props = withDefaults(defineProps<TextEditorProps>(), {
+  content: null,
+  placeholder: '',
+  editorClass: '',
+  editable: true,
+  bubbleMenu: false,
+  bubbleMenuOptions: () => ({}),
+  fixedMenu: false,
+  floatingMenu: false,
+  extensions: () => [],
+  starterkitOptions: () => ({}),
+  mentions: () => [],
+  tags: () => [],
+})
+
+const emit = defineEmits<TextEditorEmits>()
+
+const editor = ref<Editor | null>(null)
+
+const attrs = useAttrs()
+const attrsClass = computed(() => normalizeClass(attrs.class))
+const attrsStyle = computed(() => normalizeStyle(attrs.style))
+
+const editorProps = computed(() => {
+  return {
+    attributes: {
+      class: normalizeClass([
+        'prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2',
+        props.editorClass,
+      ]),
     },
+  }
+})
+
+watch(
+  () => props.content,
+  (val) => {
+    if (editor.value) {
+      let currentHTML = editor.value.getHTML()
+      if (currentHTML !== val) {
+        editor.value.commands.setContent(val)
+      }
+    }
   },
-  emits: ['change', 'focus', 'blur'],
-  expose: ['editor'],
-  provide() {
-    return {
-      editor: computed(() => this.editor),
+)
+
+watch(
+  () => props.editable,
+  (value) => {
+    if (editor.value) {
+      editor.value.setEditable(value)
     }
   },
-  data() {
-    return {
-      editor: null,
+)
+
+watch(
+  editorProps,
+  (value) => {
+    if (editor.value) {
+      editor.value.setOptions({
+        editorProps: value,
+      })
     }
   },
-  watch: {
-    content(val) {
-      let currentHTML = this.editor.getHTML()
-      if (currentHTML !== val) {
-        this.editor.commands.setContent(val)
-      }
+  { deep: true },
+)
+
+onMounted(() => {
+  editor.value = new Editor({
+    content: props.content || null,
+    editorProps: editorProps.value,
+    editable: props.editable,
+    extensions: [
+      StarterKit.configure({
+        ...props.starterkitOptions,
+        codeBlock: false,
+        heading: false,
+      }),
+      Heading.configure({
+        ...(typeof props.starterkitOptions?.heading === 'object' &&
+        props.starterkitOptions.heading !== null
+          ? props.starterkitOptions.heading
+          : {}),
+      }),
+      Table.configure({
+        resizable: true,
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      Typography,
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+      }),
+      TextStyle,
+      NamedColorExtension,
+      NamedHighlightExtension,
+      CodeBlockLowlight.extend({
+        addNodeView() {
+          return VueNodeViewRenderer(CodeBlockComponent)
+        },
+      }).configure({ lowlight }),
+      ImageExtension.configure({
+        uploadFunction: props.uploadFunction || defaultUploadFunction,
+      }),
+      ImageGroup.configure({
+        uploadFunction: props.uploadFunction || defaultUploadFunction,
+      }),
+      ImageViewerExtension,
+      VideoExtension.configure({
+        uploadFunction: props.uploadFunction || defaultUploadFunction,
+      }),
+      LinkExtension.configure({
+        openOnClick: false,
+      }),
+      Placeholder.configure({
+        placeholder:
+          typeof props.placeholder === 'function'
+            ? props.placeholder
+            : () => props.placeholder as string,
+      }),
+      configureMention(props.mentions),
+      EmojiExtension,
+      SlashCommands,
+      TagNode,
+      TagExtension.configure({
+        tags: () => props.tags,
+      }),
+      MarkdownPasteExtension.configure({
+        enabled: true,
+        showConfirmation: true,
+      }),
+      ...(props.extensions || []),
+    ],
+    onUpdate: ({ editor }) => {
+      emit('change', editor.getHTML())
     },
-    editable(value) {
-      this.editor.setEditable(value)
+    onFocus: ({ editor, event }) => {
+      emit('focus', event)
     },
-    editorProps: {
-      deep: true,
-      handler(value) {
-        if (this.editor) {
-          this.editor.setOptions({
-            editorProps: value,
-          })
-        }
-      },
+    onBlur: ({ editor, event }) => {
+      emit('blur', event)
     },
-  },
-  mounted() {
-    this.editor = new Editor({
-      content: this.content || null,
-      editorProps: this.editorProps,
-      editable: this.editable,
-      extensions: [
-        StarterKit.configure({
-          ...this.starterkitOptions,
-          codeBlock: false,
-          heading: false,
-        }),
-        Heading.configure({
-          ...(typeof this.starterkitOptions?.heading === 'object' &&
-          this.starterkitOptions.heading !== null
-            ? this.starterkitOptions.heading
-            : {}),
-        }),
-        Table.configure({
-          resizable: true,
-        }),
-        TableRow,
-        TableHeader,
-        TableCell,
-        Typography,
-        TextAlign.configure({
-          types: ['heading', 'paragraph'],
-        }),
-        TextStyle,
-        NamedColorExtension,
-        NamedHighlightExtension,
-        CodeBlockLowlight.extend({
-          addNodeView() {
-            return VueNodeViewRenderer(CodeBlockComponent)
-          },
-        }).configure({ lowlight }),
-        ImageExtension.configure({
-          uploadFunction: this.uploadFunction,
-        }),
-        ImageGroup.configure({
-          uploadFunction: this.uploadFunction,
-        }),
-        ImageViewerExtension,
-        VideoExtension.configure({
-          uploadFunction: this.uploadFunction,
-        }),
-        LinkExtension.configure({
-          openOnClick: false,
-        }),
-        Placeholder.configure({
-          placeholder:
-            typeof this.placeholder === 'function'
-              ? this.placeholder
-              : () => this.placeholder,
-        }),
-        configureMention(this.mentions),
-        EmojiExtension,
-        SlashCommands,
-        TagNode,
-        TagExtension.configure({
-          tags: () => this.tags,
-        }),
-        ...(this.extensions || []),
-      ],
-      onUpdate: ({ editor }) => {
-        this.$emit('change', editor.getHTML())
-      },
-      onFocus: ({ editor, event }) => {
-        this.$emit('focus', event)
-      },
-      onBlur: ({ editor, event }) => {
-        this.$emit('blur', event)
-      },
-    })
-  },
-  beforeUnmount() {
-    this.editor.destroy()
-    this.editor = null
-  },
-  computed: {
-    editorProps() {
-      return {
-        attributes: {
-          class: normalizeClass([
-            'prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2',
-            this.editorClass,
-          ]),
-        },
-        clipboardTextParser: (text, $context) => {
-          if (!detectMarkdown(text)) return
-          if (
-            !confirm(
-              'Do you want to convert markdown content to HTML before pasting?',
-            )
-          )
-            return
+  })
+})
 
-          let dom = document.createElement('div')
-          dom.innerHTML = markdownToHTML(text)
-          let parser =
-            this.editor.view.someProp('clipboardParser') ||
-            this.editor.view.someProp('domParser') ||
-            DOMParser.fromSchema(this.editor.schema)
-          return parser.parseSlice(dom, {
-            preserveWhitespace: true,
-            context: $context,
-          })
-        },
-      }
-    },
-  },
-}
+onBeforeUnmount(() => {
+  if (editor.value) {
+    editor.value.destroy()
+    editor.value = null
+  }
+})
+
+provide(
+  'editor',
+  computed(() => editor.value),
+)
+
+defineExpose({
+  editor,
+})
 </script>
+
 <style>
 @import './extensions/color/color-styles.css';
 @import './extensions/highlight/highlight-styles.css';

package/src/components/TextEditor/extensions/markdown-paste-extension.ts

@@ -0,0 +1,59 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { DOMParser } from '@tiptap/pm/model'
+import { detectMarkdown, markdownToHTML } from '../../../utils/markdown'
+
+export interface MarkdownPasteOptions {
+  enabled: boolean
+  showConfirmation: boolean
+}
+
+export const MarkdownPasteExtension = Extension.create<MarkdownPasteOptions>({
+  name: 'markdownPaste',
+
+  addOptions() {
+    return {
+      enabled: true,
+      showConfirmation: true,
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('markdownPaste'),
+        props: {
+          handlePaste: (view, event, slice) => {
+            if (!this.options.enabled) return false
+
+            const text = event.clipboardData?.getData('text/plain')
+            if (!text) return false
+
+            if (!detectMarkdown(text)) return false
+
+            if (this.options.showConfirmation) {
+              const shouldConvert = confirm(
+                'Do you want to convert markdown content to HTML before pasting?',
+              )
+              if (!shouldConvert) return false
+            }
+
+            const htmlContent = markdownToHTML(text)
+            const tempDiv = document.createElement('div')
+            tempDiv.innerHTML = htmlContent
+
+            const parser = DOMParser.fromSchema(view.state.schema)
+            const parsedSlice = parser.parseSlice(tempDiv, {
+              preserveWhitespace: true,
+            })
+
+            const tr = view.state.tr.replaceSelection(parsedSlice)
+            view.dispatch(tr)
+
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/components/TextEditor/types.ts

@@ -0,0 +1,23 @@
+import { type UploadedFile } from '../../utils/useFileUpload'
+
+export interface TextEditorProps {
+  content?: string | null
+  placeholder?: string | (() => string)
+  editorClass?: string | string[] | object
+  editable?: boolean
+  bubbleMenu?: boolean | any[]
+  bubbleMenuOptions?: object
+  fixedMenu?: boolean | any[]
+  floatingMenu?: boolean | any[]
+  extensions?: any[]
+  starterkitOptions?: any
+  mentions?: any[]
+  tags?: any[]
+  uploadFunction?: (file: File) => Promise<UploadedFile>
+}
+
+export interface TextEditorEmits {
+  change: [content: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+}

package/src/directives/onOutsideClick.ts

@@ -0,0 +1,36 @@
+import type { DirectiveBinding, VNode } from 'vue'
+
+const instanceMap = new Map<Element, (e: Event) => void>()
+
+function onDocumentClick(e: Event, el: Element, fn?: (e: Event) => void): void {
+  const target = e.target as Element
+  if (el !== target && !el.contains(target)) {
+    fn?.(e)
+  }
+}
+
+export default {
+  beforeMount(el: Element, binding: DirectiveBinding, vnode: VNode): void {
+    const fn = binding.value as (e: Event) => void
+    const clickHandler = function (e: Event) {
+      onDocumentClick(e, el, fn)
+    }
+
+    removeHandlerIfPresent(el)
+    instanceMap.set(el, clickHandler)
+    document.addEventListener('click', clickHandler)
+  },
+  unmounted(el: Element): void {
+    removeHandlerIfPresent(el)
+  },
+}
+
+function removeHandlerIfPresent(el: Element): void {
+  const clickHandler = instanceMap.get(el)
+  if (!clickHandler) {
+    return
+  }
+
+  instanceMap.delete(el)
+  document.removeEventListener('click', clickHandler)
+}

package/src/directives/visibility.ts

@@ -0,0 +1,40 @@
+import { nextTick } from 'vue'
+import type { DirectiveBinding, VNode } from 'vue'
+
+interface VisibilityElement extends Element {
+  _visibility_observer?: IntersectionObserver
+}
+
+export default {
+  beforeMount(
+    el: VisibilityElement,
+    binding: DirectiveBinding,
+    vnode: VNode,
+  ): void {
+    const fn = binding.value as (
+      visible: boolean,
+      entry: IntersectionObserverEntry,
+    ) => void
+    if (!fn) return
+
+    const observer = new IntersectionObserver(
+      (entries: IntersectionObserverEntry[]) => {
+        const entry = entries[0]
+        const visible = entry.isIntersecting && entry.intersectionRatio > 0
+        fn(visible, entry)
+      },
+    )
+
+    nextTick(() => {
+      observer.observe(el)
+    })
+
+    el._visibility_observer = observer
+  },
+  unmounted(el: VisibilityElement): void {
+    if (el._visibility_observer) {
+      el._visibility_observer.disconnect()
+      delete el._visibility_observer
+    }
+  },
+}

package/src/index.ts

@@ -79,15 +79,15 @@ export { default as FunnelChart } from './components/Charts/FunnelChart.vue'
 export { default as ECharts } from './components/Charts/ECharts.vue'
 
 // directives
-export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'
-export { default as visibilityDirective } from './directives/visibility.js'
+export { default as onOutsideClickDirective } from './directives/onOutsideClick'
+export { default as visibilityDirective } from './directives/visibility'
 
 // utilities
 export { default as call, createCall } from './utils/call.js'
 export { default as debounce } from './utils/debounce'
 export { default as fileToBase64 } from './utils/file-to-base64'
 export { default as FileUploadHandler } from './utils/fileUploadHandler'
-export { usePageMeta } from './utils/pageMeta.js'
+export { usePageMeta } from './utils/pageMeta'
 export { dayjsLocal, dayjs } from './utils/dayjs'
 
 // data-fetching, resources

package/src/utils/frappeRequest.js

@@ -1,3 +1,4 @@
+import { getConfig } from './config'
 import { request } from './request'
 
 export function frappeRequest(options) {
@@ -47,6 +48,15 @@ export function frappeRequest(options) {
             console.warn('Error printing debug messages', e)
           }
         }
+
+        if (data._server_messages) {
+          let onMessageHandler =
+            getConfig('serverMessagesHandler') || options.onServerMessages || null
+          if (onMessageHandler) {
+            onMessageHandler(JSON.parse(data?._server_messages) || [])
+          }
+        }
+
         return data.message
       } else {
         let errorResponse = await response.text()

package/src/utils/{markdown.js → markdown.ts}

@@ -1,17 +1,15 @@
-import showdown from 'showdown'
+import { marked } from 'marked'
 
-export function markdownToHTML(text) {
-  const converter = new showdown.Converter()
-  converter.setFlavor('github')
-  return converter.makeHtml(text)
+export function markdownToHTML(text: string): string {
+  // Use synchronous marked.parse
+  return marked.parse(text, {
+    gfm: true,
+    breaks: true,
+    async: false,
+  }) as string
 }
 
-export function htmlToMarkdown(text) {
-  const converter = new showdown.Converter()
-  return converter.makeMarkdown(text)
-}
-
-export function detectMarkdown(text) {
+export function detectMarkdown(text: string): boolean {
   const lines = text.split('\n')
   const markdown = lines.filter(
     (line) =>

package/src/utils/pageMeta.ts

@@ -0,0 +1,114 @@
+import {
+  watch,
+  getCurrentInstance,
+  onBeforeUnmount,
+  type App,
+  type WatchStopHandle,
+} from 'vue'
+
+interface PageMeta {
+  title?: string
+  emoji?: string
+  icon?: string
+}
+
+type PageMetaFunction = () => PageMeta | null | undefined
+type StopWatcherFunction = () => void
+
+let faviconRef: HTMLLinkElement | null = null
+let defaultFavIcon: string | null = null
+
+function initializeFavicon(): void {
+  if (typeof window !== 'undefined' && !faviconRef) {
+    faviconRef = document.querySelector('link[rel="icon"]')
+    defaultFavIcon = faviconRef?.href || null
+  }
+}
+
+export function usePageMeta(fn: PageMetaFunction): StopWatcherFunction {
+  // Initialize favicon if we're on the client
+  if (typeof window !== 'undefined') {
+    initializeFavicon()
+  }
+
+  const stopWatcher: WatchStopHandle = watch(
+    () => {
+      try {
+        return fn()
+      } catch (error) {
+        if (process.env.NODE_ENV === 'development') {
+          console.warn('Failed to parse pageMeta in', fn)
+          console.error(error)
+        }
+        return null
+      }
+    },
+    (pageMeta: PageMeta | null | undefined) => {
+      // Only execute on client side
+      if (typeof window === 'undefined') return
+      if (!pageMeta) return
+
+      if (pageMeta.title) {
+        document.title = pageMeta.title
+      }
+
+      // Ensure favicon ref is initialized
+      if (!faviconRef) initializeFavicon()
+
+      if (pageMeta.emoji) {
+        const href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${pageMeta.emoji}</text></svg>`
+        if (faviconRef) faviconRef.href = href
+      } else if (pageMeta.icon) {
+        if (faviconRef) faviconRef.href = pageMeta.icon
+      } else {
+        if (faviconRef && defaultFavIcon) faviconRef.href = defaultFavIcon
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  )
+
+  // Auto-cleanup if called within a component (like <script setup>)
+  const instance = getCurrentInstance()
+  if (instance) {
+    onBeforeUnmount(stopWatcher)
+  }
+
+  return stopWatcher
+}
+
+interface PageMetaPlugin {
+  install(app: App): void
+}
+
+export default {
+  install(app: App): void {
+    app.mixin(createMixin())
+  },
+} as PageMetaPlugin
+
+interface ComponentWithPageMeta {
+  $options: {
+    pageMeta?: PageMetaFunction
+  }
+  _pageMetaStopWatcher?: StopWatcherFunction
+}
+
+function createMixin() {
+  return {
+    mounted(this: ComponentWithPageMeta): void {
+      if (this.$options.pageMeta) {
+        const fn = this.$options.pageMeta.bind(this)
+        this._pageMetaStopWatcher = usePageMeta(fn)
+      }
+    },
+    beforeUnmount(this: ComponentWithPageMeta): void {
+      if (this._pageMetaStopWatcher) {
+        this._pageMetaStopWatcher()
+        this._pageMetaStopWatcher = undefined
+      }
+    },
+  }
+}

package/src/directives/onOutsideClick.js

@@ -1,34 +0,0 @@
-const instanceMap = new Map()
-
-function onDocumentClick(e, el, fn) {
-  let target = e.target
-  if (el !== target && !el.contains(target)) {
-    fn?.(e)
-  }
-}
-
-export default {
-  beforeMount(el, binding) {
-    const fn = binding.value
-    const clickHandler = function (e) {
-      onDocumentClick(e, el, fn)
-    }
-
-    removeHandlerIfPresent(el)
-    instanceMap.set(el, clickHandler)
-    document.addEventListener('click', clickHandler)
-  },
-  unmounted(el) {
-    removeHandlerIfPresent(el)
-  },
-}
-
-function removeHandlerIfPresent(el) {
-  const clickHandler = instanceMap.get(el)
-  if (!clickHandler) {
-    return
-  }
-
-  instanceMap.delete(el)
-  document.removeEventListener('click', clickHandler)
-}

package/src/directives/visibility.js

@@ -1,24 +0,0 @@
-import { nextTick } from 'vue'
-
-export default {
-  beforeMount(el, binding, vnode) {
-    let fn = binding.value
-    if (!fn) return
-
-    let observer = new IntersectionObserver((entries) => {
-      let entry = entries[0]
-      let visible = entry.isIntersecting && entry.intersectionRatio > 0
-      fn(visible, entry)
-    })
-    nextTick(() => {
-      observer.observe(el)
-    })
-    el._visibility_observer = observer
-  },
-  unmounted(el) {
-    if (el._visibility_observer) {
-      el._visibility_observer.disconnect()
-      delete el._visibility_observer
-    }
-  },
-}

package/src/utils/pageMeta.js

@@ -1,55 +0,0 @@
-import { watch } from 'vue'
-
-let faviconRef = document.querySelector('link[rel="icon"]')
-let defaultFavIcon = faviconRef?.href
-
-export function usePageMeta(fn) {
-  watch(
-    () => {
-      try {
-        return fn()
-      } catch (error) {
-        if (process.env.NODE_ENV === 'development') {
-          console.warn('Failed to parse pageMeta in', fn)
-          console.error(error)
-        }
-        return null
-      }
-    },
-    (pageMeta) => {
-      if (!pageMeta) return
-      if (pageMeta.title) {
-        document.title = pageMeta.title
-      }
-      if (pageMeta.emoji) {
-        let href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${pageMeta.emoji}</text></svg>`
-        faviconRef.href = href
-      } else if (pageMeta.icon) {
-        faviconRef.href = pageMeta.icon
-      } else {
-        faviconRef.href = defaultFavIcon
-      }
-    },
-    {
-      immediate: true,
-      deep: true,
-    },
-  )
-}
-
-export default {
-  install(app) {
-    app.mixin(createMixin())
-  },
-}
-
-function createMixin() {
-  return {
-    created() {
-      if (this.$options.pageMeta) {
-        let fn = this.$options.pageMeta.bind(this)
-        usePageMeta(fn)
-      }
-    },
-  }
-}