pimelon-ui 0.1.204 → 0.1.207

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.204",
+  "version": "0.1.207",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
@@ -37,6 +37,7 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.16",
     "@tiptap/core": "^2.26.1",
+    "@tiptap/extension-code": "^2.26.1",
     "@tiptap/extension-code-block": "^2.26.1",
     "@tiptap/extension-code-block-lowlight": "^2.26.1",
     "@tiptap/extension-color": "^2.26.1",

package/src/components/Dialog/Dialog.vue

@@ -9,6 +9,7 @@
         <div
           class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
           :class="dialogPositionClasses"
+          :style="dialogPositionStyles"
         >
           <DialogContent
             class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl dialog-content focus-visible:outline-none"
@@ -216,6 +217,8 @@ const icon = computed(() => {
 })
 
 const dialogPositionClasses = computed(() => {
+  if (props.options?.paddingTop) return ''
+
   const position = props.options?.position || 'center'
   const classMap: Record<string, string> = {
     center: 'justify-center',
@@ -224,6 +227,13 @@ const dialogPositionClasses = computed(() => {
   return classMap[position]
 })
 
+const dialogPositionStyles = computed(() => {
+  if (props.options?.paddingTop) {
+    return { paddingTop: props.options.paddingTop }
+  }
+  return {}
+})
+
 const dialogIconBgClasses = computed(() => {
   const appearance = icon.value?.appearance
   if (!appearance) return 'bg-surface-gray-2'

package/src/components/Dialog/types.ts

@@ -25,6 +25,7 @@ type DialogOptions = {
   actions?: Array<DialogAction>
   // default position = 'center'
   position?: 'top' | 'center'
+  paddingTop?: string | number
 }
 
 export type DialogActionContext = {

package/src/components/ListView/ListRow.vue

@@ -14,7 +14,7 @@
     class="flex flex-col transition-all duration-300 ease-in-out"
     v-bind="{
       to: list.options.getRowRoute ? list.options.getRowRoute(row) : undefined,
-      onClick: (e) => onRowClick(row, e),
+      onClick: onRowClick,
     }"
   >
     <component
@@ -40,7 +40,7 @@
           <Checkbox
             :modelValue="isSelected"
             class="cursor-pointer duration-300"
-            @click.stop="list.toggleRow(row[list.rowKey])"
+            @click.stop="handleCheckboxClick"
           />
         </div>
         <div
@@ -89,7 +89,7 @@
 import Checkbox from '../Checkbox/Checkbox.vue'
 import ListRowItem from './ListRowItem.vue'
 import { alignmentMap, getGridTemplateColumns } from './utils'
-import { computed, inject, ref } from 'vue'
+import { computed, inject } from 'vue'
 
 const props = defineProps({
   row: {
@@ -144,12 +144,34 @@ const roundedClass = computed(() => {
   }
 })
 
-const onRowClick = (row, e) => {
-  if (list.value.options.onRowClick) list.value.options.onRowClick(row, e)
-  if (list.value.activeRow.value === row.name) {
+const onRowClick = (event) => {
+  if (list.value.options.onRowClick)
+    list.value.options.onRowClick(props.row, event)
+  if (list.value.activeRow.value === props.row.name) {
     list.value.activeRow.value = null
   } else {
-    list.value.activeRow.value = row.name
+    list.value.activeRow.value = props.row.name
+  }
+}
+
+const handleCheckboxClick = (event) => {
+  const value = props.row[list.value.rowKey]
+  if (event.shiftKey && !list.value.selections.has(value)) {
+    const lastSelected = Array.from(list.value.selections).pop()
+    const rows = list.value.rows.find((k) => k.group)
+      ? list.value.rows.reduce((acc, curr) => acc.concat(curr.rows), [])
+      : list.value.rows
+    const lastIndex = rows.findIndex(
+      (k) => lastSelected === k[list.value.rowKey],
+    )
+    const curIndex = rows.findIndex((k) => value === k[list.value.rowKey])
+    const start = Math.min(lastIndex, curIndex)
+    const end = Math.max(lastIndex, curIndex)
+    for (let i = start; i <= end; i++) {
+      list.value.selections.add(rows[i][list.value.rowKey])
+    }
+  } else {
+    list.value.toggleRow(value)
   }
 }
 </script>

package/src/components/TextEditor/LinkPopup.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="p-2 w-72 flex items-center gap-2 bg-surface-white shadow-xl rounded"
+  >
+    <TextInput
+      v-if="edit"
+      ref="input"
+      type="text"
+      class="w-full"
+      placeholder="https://example.com"
+      v-model="_href"
+      @keydown.enter="submitLink"
+      @keydown.esc="$emit('close')"
+    />
+    <a
+      v-else
+      class="text-ink-gray-700 underline text-sm flex-1 truncate pl-1"
+      :title="_href"
+      :href="_href"
+      target="_blank"
+    >
+      {{ _href }}
+    </a>
+    <div class="shrink-0 flex items-center gap-1.5 ml-auto">
+      <template v-if="edit">
+        <Button
+          @click="submitLink"
+          tooltip="Submit"
+          :icon="LucideCheck"
+          variant="subtle"
+        />
+        <Button
+          @click="props.href ? (edit = false) : $emit('updateHref', '')"
+          tooltip="Exit"
+          :icon="LucideX"
+          variant="subtle"
+        />
+      </template>
+      <template v-else>
+        <Button
+          @click="copyLink"
+          tooltip="Copy"
+          :icon="LucideCopy"
+          variant="subtle"
+        />
+        <Button
+          @click="edit = true"
+          tooltip="Edit"
+          :icon="LucidePencil"
+          variant="subtle"
+        />
+        <Button
+          tooltip="Remove"
+          variant="subtle"
+          @click="$emit('updateHref', '')"
+          :icon="Link2Off"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef, nextTick } from 'vue'
+import Button from '../Button/Button.vue'
+import TextInput from '../TextInput/TextInput.vue'
+import LucideCopy from '~icons/lucide/copy'
+import LucideCheck from '~icons/lucide/check'
+import LucidePencil from '~icons/lucide/pencil'
+import LucideX from '~icons/lucide/x'
+import Link2Off from '~icons/lucide/link-2-off'
+import { isValidUrl } from '../../utils/url-validation'
+
+const props = defineProps<{
+  href: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'updateHref', href: string): void
+  (e: 'close'): void
+}>()
+
+const _href = ref(props.href)
+const input = useTemplateRef('input')
+const edit = ref(props.href === '')
+
+const submitLink = () => {
+  if (_href.value === '' || isValidUrl(_href.value)) {
+    emit('updateHref', _href.value)
+  }
+}
+
+const copyLink = async () => {
+  if (_href.value) await navigator.clipboard.writeText(_href.value)
+}
+
+onMounted(async () => {
+  await nextTick()
+  if (input.value?.el) {
+    input.value.el.focus()
+    input.value.el.select()
+  }
+})
+</script>

package/src/components/TextEditor/TextEditor.vue

@@ -4,6 +4,8 @@
     class="relative w-full"
     :class="attrsClass"
     :style="attrsStyle"
+    v-bind="attrsWithoutClassStyle"
+    ref="rootRef"
   >
     <TextEditorBubbleMenu :buttons="bubbleMenu" :options="bubbleMenuOptions" />
     <TextEditorFixedMenu
@@ -30,11 +32,12 @@ import {
   provide,
   ref,
   useAttrs,
+  useTemplateRef,
 } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
-import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import TextAlign from '@tiptap/extension-text-align'
@@ -53,9 +56,7 @@ import TaskItem from '@tiptap/extension-task-item'
 import TaskList from '@tiptap/extension-task-list'
 import NamedColorExtension from './extensions/color'
 import NamedHighlightExtension from './extensions/highlight'
-import { common, createLowlight } from 'lowlight'
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
-import CodeBlockComponent from './CodeBlockComponent.vue'
+
 import { MentionExtension } from './extensions/mention'
 import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
 import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
@@ -66,11 +67,10 @@ import { ContentPasteExtension } from './extensions/content-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 { ExtendedCode, ExtendedCodeBlock } from './extensions/code-block'
 import { useFileUpload } from '../../utils/useFileUpload'
 import { TextEditorEmits, TextEditorProps } from './types'
 
-const lowlight = createLowlight(common)
-
 function defaultUploadFunction(file: File) {
   // useFileUpload is melon specific
   let fileUpload = useFileUpload()
@@ -100,6 +100,11 @@ const editor = ref<Editor | null>(null)
 const attrs = useAttrs()
 const attrsClass = computed(() => normalizeClass(attrs.class))
 const attrsStyle = computed(() => normalizeStyle(attrs.style))
+const attrsWithoutClassStyle = computed(() => {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),
+  )
+})
 
 const editorProps = computed(() => {
   return {
@@ -154,8 +159,23 @@ onMounted(() => {
     extensions: [
       StarterKit.configure({
         ...props.starterkitOptions,
+        code: false,
         codeBlock: false,
         heading: false,
+      }).extend({
+        addKeyboardShortcuts() {
+          return {
+            Backspace: () => {
+              const { $from } = this.editor.view.state.selection
+              if (
+                !this.editor.can().liftListItem('listItem') ||
+                $from.parentOffset > 0
+              )
+                return false
+              return this.editor.commands.liftListItem('listItem')
+            },
+          }
+        },
       }),
       Heading.configure({
         ...(typeof props.starterkitOptions?.heading === 'object' &&
@@ -180,11 +200,8 @@ onMounted(() => {
       TextStyle,
       NamedColorExtension,
       NamedHighlightExtension,
-      CodeBlockLowlight.extend({
-        addNodeView() {
-          return VueNodeViewRenderer(CodeBlockComponent)
-        },
-      }).configure({ lowlight }),
+      ExtendedCode,
+      ExtendedCodeBlock,
       ImageExtension.configure({
         uploadFunction: props.uploadFunction || defaultUploadFunction,
       }),
@@ -222,7 +239,6 @@ onMounted(() => {
       }),
       ContentPasteExtension.configure({
         enabled: true,
-        showConfirmation: true,
         uploadFunction: props.uploadFunction || defaultUploadFunction,
       }),
       ...(props.extensions || []),
@@ -254,8 +270,10 @@ provide(
   computed(() => editor.value),
 )
 
+const rootRef = useTemplateRef('rootRef')
 defineExpose({
   editor,
+  rootRef,
 })
 </script>
 

package/src/components/TextEditor/extensions/code-block.ts

@@ -0,0 +1,118 @@
+import { common, createLowlight } from 'lowlight'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import Code from '@tiptap/extension-code'
+import CodeBlockComponent from '../CodeBlockComponent.vue'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import { markInputRule } from '@tiptap/core'
+
+const INDENT = ' '.repeat(4)
+export const inputRegex = /(?<=^|[^`])`([^`]+)`(?!`)$/
+
+function getCodeBlockCtx(state: any) {
+  const { $from, from, to } = state.selection
+  let d = $from.depth
+  while (d > 0 && $from.node(d).type.name !== 'codeBlock') d--
+  if (d === 0) return null
+
+  const node = $from.node(d)
+  const start = $from.start(d)
+  const text: string = node.textContent
+  const fromOffset = from - start
+  const toOffset = to - start
+  return { start, text, fromOffset, toOffset }
+}
+
+function lineStartsBetween(text: string, fromOffset: number, toOffset: number) {
+  let startOff = text.lastIndexOf('\n', Math.max(0, fromOffset - 1)) + 1
+  let endOff = toOffset
+  if (endOff > 0 && text[endOff - 1] === '\n') endOff--
+
+  const starts: number[] = [startOff]
+  let i = startOff
+  while (true) {
+    const nl = text.indexOf('\n', i)
+    if (nl === -1 || nl >= endOff) break
+    starts.push(nl + 1)
+    i = nl + 1
+  }
+  return starts
+}
+
+const lowlight = createLowlight(common)
+
+export const ExtendedCodeBlock = CodeBlockLowlight.extend({
+  addNodeView() {
+    return VueNodeViewRenderer(CodeBlockComponent)
+  },
+  addKeyboardShortcuts() {
+    return {
+      Tab: () => {
+        const { state, dispatch } = this.editor.view
+        const ctx = getCodeBlockCtx(state)
+        if (!ctx) return false
+
+        const { start, text, fromOffset, toOffset } = ctx
+        const multiline = text.slice(fromOffset, toOffset).includes('\n')
+        const tr = state.tr
+        if (multiline) {
+          for (const off of lineStartsBetween(text, fromOffset, toOffset)) {
+            const pos = tr.mapping.map(start + off)
+            tr.insertText(INDENT, pos)
+          }
+        } else {
+          tr.insertText(INDENT, state.selection.from)
+        }
+        dispatch(tr)
+        return true
+      },
+      'Shift-Tab': () => {
+        const { state, dispatch } = this.editor.view
+        const ctx = getCodeBlockCtx(state)
+        if (!ctx) return false
+
+        const { start, text, fromOffset, toOffset } = ctx
+        const tr = state.tr
+        for (const off of lineStartsBetween(text, fromOffset, toOffset)) {
+          let len = 0
+          if (text.substr(off, 4) === INDENT) len = 4
+          else if (text[off] === '\t') len = 1
+
+          if (len > 0) {
+            const s = tr.mapping.map(start + off)
+            const e = tr.mapping.map(start + off + len)
+            tr.delete(s, e)
+          }
+        }
+
+        dispatch(tr)
+        return true
+      },
+      '`': () => {
+        const { from, to } = this.editor.state.selection
+        if (from === to) return false
+        return this.editor.commands.toggleCode()
+      },
+    }
+  },
+}).configure({ lowlight })
+
+export const ExtendedCode = Code.extend({
+  addKeyboardShortcuts() {
+    return {
+      '`': () => {
+        const { from, to } = this.editor.state.selection
+        if (from === to) return false
+        return this.editor.commands.toggleCode()
+      },
+    }
+  },
+  
+  addInputRules() {
+    return [
+      markInputRule({
+        find: inputRegex,
+        type: this.type,
+      }),
+    ]
+  },
+})

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

@@ -7,7 +7,6 @@ import { processMultipleImages } from './image/image-extension'
 
 export interface ContentPasteOptions {
   enabled: boolean
-  showConfirmation: boolean
   uploadFunction: Function | null
 }
 
@@ -17,7 +16,6 @@ export const ContentPasteExtension = Extension.create<ContentPasteOptions>({
   addOptions() {
     return {
       enabled: true,
-      showConfirmation: true,
       uploadFunction: null,
     }
   },
@@ -28,6 +26,29 @@ export const ContentPasteExtension = Extension.create<ContentPasteOptions>({
       new Plugin({
         key: new PluginKey('contentPaste'),
         props: {
+          handleDOMEvents: {
+            copy: (view, event) => {
+              const selection = window.getSelection()
+              if (!selection) return false
+
+              const container = document.createElement('div')
+              for (let i = 0; i < selection.rangeCount; i++) container.appendChild(selection.getRangeAt(i).cloneContents())
+
+              // Update relative image srcs
+              const images = container.querySelectorAll('img')
+              images.forEach((img) => {
+                const src = img.getAttribute('src')
+                if (src && src.startsWith('/')) {
+                  img.setAttribute('src', `${window.location.origin}${src}`)
+                }
+              })
+
+              // Override clipboard HTML
+              event.clipboardData?.setData('text/html', container.innerHTML)
+              event.preventDefault()
+              return true
+            },
+          },
           handlePaste: (
             view: EditorView,
             event: ClipboardEvent,
@@ -47,19 +68,19 @@ export const ContentPasteExtension = Extension.create<ContentPasteOptions>({
               return true
             }
 
+            // handle html with media
+            const htmlData = event.clipboardData?.getData('text/html')
+            if (htmlData) {
+              processHTMLImages(htmlData, view, this.options)
+              return true
+            }
+
             // handle markdown pasting
             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
@@ -79,3 +100,51 @@ export const ContentPasteExtension = Extension.create<ContentPasteOptions>({
     ]
   },
 })
+
+async function processHTMLImages(
+  html: string,
+  view: EditorView,
+  extensionOptions: ContentPasteOptions,
+): Promise<undefined> {
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = html
+  const images = tempDiv.querySelectorAll('img')
+
+  const parser = DOMParser.fromSchema(view.state.schema)
+  const parsedSlice = parser.parseSlice(tempDiv, {
+    preserveWhitespace: true,
+  })
+  const tr = view.state.tr.replaceSelection(parsedSlice)
+  view.dispatch(tr)
+
+  const imageInfo: Array<{ src: string; pos: number }> = []
+  view.state.doc.descendants((node, pos) => {
+    for (let img of images) {
+      const src = img.getAttribute('src')
+      if (node.type.name === 'image' && node.attrs['src'] === src) {
+        imageInfo.push([src, pos])
+      }
+    }
+  })
+
+  // Process each image
+  const imagePromises = Array.from(imageInfo).map(async ([src, pos]) => {
+    if (
+      src.startsWith('data:') ||
+      src.startsWith('blob:') 
+    ) {
+      try {
+        const response = await fetch(src)
+        const blob = await response.blob()
+        const file = new File([blob], 'pasted-data-image.png', {
+          type: blob.type,
+        })
+        processMultipleImages([file], view, pos, extensionOptions)
+      } catch (error) {
+        console.error('Failed to process image:', error)
+      }
+    }
+  })
+
+  await Promise.all(imagePromises)
+}

package/src/components/TextEditor/extensions/heading/heading.ts

@@ -9,7 +9,7 @@ import { textblockTypeInputRule } from '@tiptap/core'
 export const Heading = TiptapHeading.extend({
   addInputRules() {
     return this.options.levels.map((level) => {
-      let regexp = new RegExp(`^(#{${level}}) $`)
+      let regexp = new RegExp(`^(#{${level}})( |\\u00A0)$`)
       return textblockTypeInputRule({
         find: regexp,
         type: this.type,

package/src/components/TextEditor/extensions/image/image-extension.ts

@@ -373,14 +373,18 @@ function uploadImageBase(
       })
 
       const tr = view.state.tr
-
-      if (pos != null) {
-        tr.insert(pos, node)
-      } else if (insertMode === 'replace') {
-        tr.replaceSelectionWith(node)
+      if (insertMode === 'replace') {
+        if (pos === null) tr.replaceSelectionWith(node)
+        else {
+          const nodeAtPos = view.state.doc.nodeAt(pos)
+          if (nodeAtPos) tr.replaceWith(pos, pos + nodeAtPos.nodeSize, node)
+        }
       } else {
-        const insertPos = view.state.selection.from
-        tr.insert(insertPos, node)
+        if (pos != null) tr.insert(pos, node)
+        else {
+          const insertPos = view.state.selection.from
+          tr.insert(insertPos, node)
+        }
       }
 
       view.dispatch(tr)

package/src/components/TextEditor/extensions/mention/mention-extension.ts

@@ -24,7 +24,6 @@ function createMentionNode(component?: Component) {
     inline: true,
     selectable: true,
     atom: true,
-
     addOptions() {
       return {
         component: undefined,
@@ -82,6 +81,9 @@ function createMentionNode(component?: Component) {
         `@${HTMLAttributes['data-label'] || HTMLAttributes.id || ''}`,
       ]
     },
+    renderText({ node }: any) {
+      return `@${node.attrs.label || node.attrs.id || ''}`
+    }
   }
 
   if (component) {
@@ -139,10 +141,6 @@ const MentionSuggestionExtension =
             type: 'mention',
             attrs: attributes,
           },
-          {
-            type: 'text',
-            text: ' ',
-          },
         ])
         .run()
     },

package/src/components/TextEditor/extensions/mention/style.css

@@ -1,7 +1,11 @@
 .mention {
   font-weight: 600;
   box-decoration-break: clone;
-  padding: 1px 3px;
+  padding: 0 1px;
   border-radius: 4px;
   display: inline-block;
 }
+
+.mention.ProseMirror-selectednode, .mention:hover {
+  background-color: var(--surface-gray-1, #f8f8f8);
+}

package/src/components/TextEditor/extensions/tag/tag-extension.ts

@@ -5,7 +5,7 @@ import {
   BaseSuggestionItem,
 } from '../suggestion/createSuggestionExtension'
 import SuggestionList from '../suggestion/SuggestionList.vue'
-import { toValue, unref } from 'vue'
+import { toValue } from 'vue'
 
 export const TagNode = Node.create({
   name: 'tagItem',
@@ -59,7 +59,9 @@ export const TagNode = Node.create({
       `#${HTMLAttributes['data-tag-label']}`,
     ]
   },
-
+  renderText({ node }: any) {
+    return `#${node.attrs.tagLabel ||  ''}`
+  },
   addCommands() {
     return {
       setTag:

package/src/components/TextEditor/link-extension.ts

@@ -4,7 +4,7 @@ import tippy, { type Instance as TippyInstance } from 'tippy.js'
 import { getMarkRange, Range, Editor } from '@tiptap/core'
 import { MarkType, Mark as ProseMirrorMark } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
-import EditLink from './EditLink.vue'
+import LinkPopup from './LinkPopup.vue'
 import { linkPasteHandler } from './linkPasteHandler'
 
 declare module '@tiptap/core' {
@@ -50,10 +50,8 @@ export const LinkExtension = Link.extend({
             const markRange = getMarkRange($pos, this.type)
             if (markRange) {
               range = markRange
-              mark = doc
-                .resolve(markRange.from)
-                .marks()
-                .find((m) => m.type === this.type)
+              const node = doc.nodeAt($pos.pos)
+              if(node) mark = node.marks.find((m) => m.type === this.type)
 
               // Select the link text
               editor
@@ -113,16 +111,6 @@ export const LinkExtension = Link.extend({
                     return true
                   })
 
-                const posAfterLink = selectionTo
-                const charAfter =
-                  posAfterLink < doc.content.size
-                    ? doc.textBetween(posAfterLink, posAfterLink + 1)
-                    : null
-
-                if (charAfter === null || charAfter !== ' ') {
-                  chain = chain.insertContent(' ')
-                }
-
                 chain.run()
               })
               .catch(() => {})
@@ -147,7 +135,6 @@ export const LinkExtension = Link.extend({
 
   addProseMirrorPlugins() {
     let plugins = this.parent?.() || []
-
     plugins.push(
       linkPasteHandler({
         editor: this.editor,
@@ -162,7 +149,23 @@ export const LinkExtension = Link.extend({
         type: this.type,
       }),
     )
-
+    plugins.push(
+      new Plugin({
+        props: {
+          handleClick: (view, pos, event) => {
+            if (!this.editor.isEditable) return
+            if (!this.editor.isActive('link')) return false
+            event.preventDefault()
+            if (event.metaKey) {
+              const url = event.target?.getAttribute('href')
+              if (url) window.open(url, '_blank')
+            } else {
+              this.editor.commands.openLinkEditor()
+            }
+          },
+        },
+      }),
+    )
     return plugins
   },
 })
@@ -233,7 +236,7 @@ function openLinkEditor(href: string, anchor: HTMLElement): Promise<string> {
 
     app = createApp({
       render() {
-        return h(EditLink, {
+        return h(LinkPopup, {
           href,
           onClose: () => {
             settlePromise('reject', 'Link editing cancelled')

package/vite/melonProxy.js

@@ -5,7 +5,7 @@ export function melonProxy({
   source = '^/(app|login|api|assets|files|private)',
 } = {}) {
   const commonSiteConfig = getCommonSiteConfig()
-  const env_web_server_port = process.env.MELON_WEB_SERVER_PORT
+  const env_web_server_port = process.env.FRAPPE_WEB_SERVER_PORT
   const webserver_port =
     env_web_server_port ||
     (commonSiteConfig ? commonSiteConfig.webserver_port : 8000)

package/src/components/TextEditor/EditLink.vue

@@ -1,63 +0,0 @@
-<template>
-  <div
-    class="p-2 flex min-w-72 items-center gap-2 bg-surface-white shadow-xl rounded-lg"
-  >
-    <TextInput
-      ref="input"
-      type="text"
-      class="w-full"
-      placeholder="https://example.com"
-      v-model="_href"
-      @keydown.enter="submitLink"
-      @keydown.esc="$emit('close')"
-    />
-    <div class="shrink-0 flex items-center gap-2">
-      <Tooltip text="Submit" placement="top">
-        <Button label="Submit" @click="submitLink">
-          <template #icon><LucideCheck class="size-4" /></template>
-        </Button>
-      </Tooltip>
-      <Tooltip text="Remove link" placement="top">
-        <Button label="Remove link" @click="$emit('updateHref', '')">
-          <template #icon><LucideX class="size-4" /></template>
-        </Button>
-      </Tooltip>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, useTemplateRef, nextTick } from 'vue'
-import Button from '../Button/Button.vue'
-import TextInput from '../TextInput/TextInput.vue'
-import Tooltip from '../Tooltip/Tooltip.vue'
-import LucideCheck from '~icons/lucide/check'
-import LucideX from '~icons/lucide/x'
-import { isValidUrl } from '../../utils/url-validation'
-
-const props = defineProps<{
-  href: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'updateHref', href: string): void
-  (e: 'close'): void
-}>()
-
-const _href = ref(props.href)
-const input = useTemplateRef('input')
-
-const submitLink = () => {
-  if (_href.value === '' || isValidUrl(_href.value)) {
-    emit('updateHref', _href.value)
-  }
-}
-
-onMounted(async () => {
-  await nextTick()
-  if (input.value?.el) {
-    input.value.el.focus()
-    input.value.el.select()
-  }
-})
-</script>