pimelon-ui 0.1.205 → 0.1.208

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.205",
+  "version": "0.1.208",
   "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/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/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,30 @@ 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.clipboardData?.setData('text/plain', selection.toString())
+              event.preventDefault()
+              return true
+            },
+          },
           handlePaste: (
             view: EditorView,
             event: ClipboardEvent,
@@ -47,19 +69,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 +101,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

@@ -111,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(() => {})