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

package/src/molecules/editor/extensions/attachment/attachment-extension.ts

@@ -0,0 +1,248 @@
+/**
+ * The attachment node: an inline chip/link for non-image, non-video files
+ * (pdf, docx, zip, csv, …).
+ *
+ * Mirrors the image node's thin-shell shape: schema, attributes, parse/render
+ * and a small command map that delegates all upload/queue/find work to the
+ * dedicated `attachment-engine`. The chip renders via `AttachmentNodeView`, and
+ * uploads run through the same shared upload function as image/video — resolved
+ * at use-time via `resolveUploadOptions` (a per-extension `uploadFunction`
+ * config wins, else `editor.storage.upload.uploadFunction`).
+ *
+ * Drop/paste routing is owned by the shared `media-drop` extension: it sends
+ * non-image, non-video files here via `uploadAttachmentFiles`.
+ */
+import {
+  Node as NodeExtension,
+  mergeAttributes,
+  type Editor,
+} from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import AttachmentNodeView from '#molecules/editor/components/AttachmentNodeView.vue'
+import { pickFiles } from '#molecules/editor/extensions/shared/file-picker'
+import {
+  resolveUploadOptions,
+  type MediaUploadOptions,
+  type UploadFunction,
+} from '#molecules/editor/extensions/shared/media-upload-engine'
+import { findNodeByUploadId } from '#molecules/editor/extensions/shared/node-view'
+import {
+  uploadAttachment,
+  uploadAttachmentFiles,
+  reuploadAttachment,
+  ATTACHMENT_NODE_NAME,
+} from './attachment-engine'
+
+export interface AttachmentExtensionOptions {
+  /**
+   * Function to handle file uploads. Receives optional request options
+   * (abort signal + progress callback) as the second argument.
+   * @default null
+   */
+  uploadFunction: UploadFunction | null
+
+  /**
+   * HTML attributes to add to the attachment anchor element.
+   * @default {}
+   */
+  HTMLAttributes: Record<string, unknown>
+}
+
+export interface SetAttachmentOptions {
+  src: string
+  fileName?: string
+  fileSize?: number | null
+  mimeType?: string | null
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    attachment: {
+      /** Insert an already-uploaded attachment chip. */
+      setAttachment: (options: SetAttachmentOptions) => ReturnType
+      /** Upload and insert a single file as an attachment. */
+      uploadAttachment: (file: File) => ReturnType
+      /** Upload and insert already-provided files (e.g. from a drop/paste). */
+      uploadAttachmentFiles: (files: File[], pos?: number | null) => ReturnType
+      /** Select file(s) using the file picker and upload them as attachments. */
+      selectAndUploadFile: () => ReturnType
+      /** Re-upload a failed attachment using the file stored in localFileMap. */
+      reuploadAttachment: (uploadId: string) => ReturnType
+    }
+  }
+}
+
+export const AttachmentExtension =
+  NodeExtension.create<AttachmentExtensionOptions>({
+    name: ATTACHMENT_NODE_NAME,
+
+    group: 'inline',
+    inline: true,
+    draggable: true,
+    selectable: true,
+    atom: true,
+
+    addOptions() {
+      return {
+        uploadFunction: null,
+        HTMLAttributes: {},
+      }
+    },
+
+    addAttributes() {
+      return {
+        src: { default: null },
+        fileName: {
+          default: null,
+          parseHTML: (element) =>
+            element.getAttribute('data-file-name') ||
+            element.getAttribute('download') ||
+            null,
+          renderHTML: (attributes) =>
+            attributes.fileName
+              ? { 'data-file-name': attributes.fileName }
+              : {},
+        },
+        fileSize: {
+          default: null,
+          parseHTML: (element) => {
+            const raw = element.getAttribute('data-file-size')
+            const size = raw == null ? NaN : Number(raw)
+            return Number.isFinite(size) ? size : null
+          },
+          renderHTML: (attributes) =>
+            attributes.fileSize != null
+              ? { 'data-file-size': String(attributes.fileSize) }
+              : {},
+        },
+        mimeType: {
+          default: null,
+          parseHTML: (element) =>
+            element.getAttribute('data-mime-type') ||
+            element.getAttribute('type') ||
+            null,
+          renderHTML: (attributes) =>
+            attributes.mimeType
+              ? { 'data-mime-type': attributes.mimeType }
+              : {},
+        },
+        uploadId: {
+          default: null,
+          parseHTML: () => null,
+        },
+        loading: {
+          default: false,
+          parseHTML: () => false,
+        },
+        error: {
+          default: null,
+          parseHTML: () => null,
+        },
+      }
+    },
+
+    parseHTML() {
+      return [
+        {
+          tag: 'a[data-attachment]',
+          // A saved chip serializes to `<a data-attachment href=…>`, which also
+          // matches the Link mark's `a[href]` rule (priority 1000). Without a
+          // higher priority the mark wins and the chip re-parses as a plain
+          // link, so outrank it.
+          priority: 1100,
+          getAttrs: (node) => {
+            if (typeof node === 'string') return {}
+            const element = node as HTMLElement
+            return { src: element.getAttribute('href') }
+          },
+        },
+      ]
+    },
+
+    renderHTML({ node, HTMLAttributes }) {
+      return [
+        'a',
+        mergeAttributes(this.options.HTMLAttributes || {}, HTMLAttributes, {
+          'data-attachment': '',
+          href: node.attrs.src,
+          download: node.attrs.fileName || null,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        }),
+        node.attrs.fileName || 'Attachment',
+      ]
+    },
+
+    addNodeView() {
+      return VueNodeViewRenderer(AttachmentNodeView)
+    },
+
+    addCommands() {
+      const resolve = (editor: Editor): MediaUploadOptions =>
+        resolveUploadOptions({ ...this.options, editor })
+
+      return {
+        setAttachment:
+          (attributes: SetAttachmentOptions) =>
+          ({ commands }) => {
+            if (
+              typeof attributes.src !== 'string' ||
+              attributes.src.trim() === ''
+            ) {
+              return false
+            }
+            return commands.insertContent({
+              type: this.name,
+              attrs: attributes,
+            })
+          },
+
+        uploadAttachment:
+          (file: File) =>
+          ({ editor }) => {
+            void uploadAttachment(file, editor, resolve(editor))
+            return true
+          },
+
+        uploadAttachmentFiles:
+          (files: File[], pos?: number | null) =>
+          ({ editor }) => {
+            if (files.length === 0) return false
+            void uploadAttachmentFiles(
+              files,
+              editor,
+              pos ?? null,
+              resolve(editor),
+            )
+            return true
+          },
+
+        selectAndUploadFile:
+          () =>
+          ({ editor }) => {
+            void pickFiles({ multiple: true }).then((files) => {
+              if (editor.isDestroyed || files.length === 0) return
+              editor.commands.uploadAttachmentFiles(files)
+            })
+            return true
+          },
+
+        reuploadAttachment:
+          (uploadId: string) =>
+          ({ editor }) => {
+            const pos = findNodeByUploadId(editor.view, this.name, uploadId)
+            if (pos === null) {
+              console.error(
+                'reuploadAttachment: could not find node with uploadId',
+                uploadId,
+              )
+              return false
+            }
+            void reuploadAttachment(editor, pos, resolve(editor))
+            return true
+          },
+      }
+    },
+  })
+
+export default AttachmentExtension

package/src/molecules/editor/extensions/attachment/attachment.flow.test.ts

@@ -0,0 +1,80 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Exercises the REAL drop path Gameplan uses: CommentKit editor + a shared
+ * upload function, then `uploadAttachmentFiles` (what media-drop / EditorDropZone
+ * call). Asserts a chip node is actually inserted and the NodeView mounts.
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { createApp, h, nextTick, reactive } from 'vue'
+
+let Editor: any
+let EditorContent: any
+let CommentKit: any
+
+beforeEach(async () => {
+  ;({ default: Editor } = await import('../../Editor.vue'))
+  ;({ default: EditorContent } = await import('../../EditorContent.vue'))
+  ;({ CommentKit } = await import('../../kits'))
+})
+
+function mount(staticProps: Record<string, any>) {
+  const state = reactive<Record<string, any>>({ modelValue: '' })
+  let editor: any = null
+  const root = document.createElement('div')
+  document.body.appendChild(root)
+  const app = createApp({
+    render() {
+      return h(Editor, { ...staticProps, ...state }, {
+        default: ({ editor: e }: any) => {
+          editor = e
+          return h(EditorContent, { editor: e })
+        },
+      })
+    },
+  })
+  app.mount(root)
+  return { getEditor: () => editor, app, root }
+}
+
+const flush = async () => {
+  for (let i = 0; i < 5; i++) {
+    await Promise.resolve()
+    await nextTick()
+  }
+}
+
+describe('attachment drop flow (CommentKit)', () => {
+  it('inserts a chip node when a non-media file is uploaded', async () => {
+    const upload = vi.fn(async (file: File) => ({ file_url: `/files/${file.name}` }))
+    const ctx = mount({ extensions: [CommentKit], uploadFunction: upload })
+    const editor = ctx.getEditor()
+
+    // diagnostics: does the editor expose the command + upload storage?
+    expect(typeof editor.commands.uploadAttachmentFiles).toBe('function')
+    expect(editor.storage?.upload?.uploadFunction).toBeTypeOf('function')
+
+    const pdf = new File([new Uint8Array([1, 2, 3])], 'report.pdf', {
+      type: 'application/pdf',
+    })
+
+    editor.commands.uploadAttachmentFiles([pdf])
+    await flush()
+
+    expect(upload).toHaveBeenCalledOnce()
+
+    const json = editor.getJSON()
+    const flat: any[] = []
+    const walk = (n: any) => {
+      flat.push(n)
+      ;(n.content ?? []).forEach(walk)
+    }
+    walk(json)
+    const node = flat.find((n) => n.type === 'attachment')
+    expect(node, 'attachment node should be inserted').toBeTruthy()
+    expect(node.attrs.src).toBe('/files/report.pdf')
+    expect(node.attrs.fileName).toBe('report.pdf')
+
+    ctx.app.unmount()
+  })
+})

package/src/molecules/editor/extensions/attachment/attachment.roundtrip.test.ts

@@ -0,0 +1,50 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Round-trips the SERIALIZED attachment HTML (what the server stores) back
+ * through a CommentKit editor and asserts it re-parses as an `attachment` node,
+ * not a plain link. Reproduces "after submit the chip becomes a simple <a>".
+ */
+import { describe, it, expect, beforeEach } from 'vitest'
+import { Editor } from '@tiptap/core'
+
+let CommentKit: any
+
+beforeEach(async () => {
+  ;({ CommentKit } = await import('../../kits'))
+})
+
+function nodesOf(editor: Editor): string[] {
+  const out: string[] = []
+  editor.state.doc.descendants((n) => {
+    out.push(n.type.name)
+    return true
+  })
+  return out
+}
+
+describe('attachment HTML round-trip (CommentKit)', () => {
+  it('re-parses a serialized attachment chip as an attachment node', () => {
+    const editor = new Editor({ extensions: [CommentKit] })
+    // The shape the attachment node serializes to (and the server keeps).
+    editor.commands.setContent(
+      `<p><a data-attachment href="/files/report.pdf" data-file-name="report.pdf" data-file-size="1234" data-mime-type="application/pdf" download="report.pdf">report.pdf</a></p>`,
+    )
+
+    const names = nodesOf(editor)
+    expect(names, 'should contain an attachment node').toContain('attachment')
+
+    const json = editor.getJSON()
+    const flat: any[] = []
+    const walk = (n: any) => {
+      flat.push(n)
+      ;(n.content ?? []).forEach(walk)
+    }
+    walk(json)
+    const node = flat.find((n) => n.type === 'attachment')
+    expect(node?.attrs.src).toBe('/files/report.pdf')
+    expect(node?.attrs.fileName).toBe('report.pdf')
+
+    editor.destroy()
+  })
+})

package/src/molecules/editor/extensions/attachment/index.ts

@@ -0,0 +1,5 @@
+export {
+  AttachmentExtension,
+  type AttachmentExtensionOptions,
+  type SetAttachmentOptions,
+} from './attachment-extension'

package/src/molecules/editor/extensions/code-block/CodeBlockComponent.css

@@ -1,29 +1,9 @@
-/* CodeBlock styles */
-.code-block {
-  position: relative;
-}
-
-.code-block-container {
-  position: relative;
-}
-
-.language-selector {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.language-label {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.75rem;
-  font-size: 12px;
-  color: var(--ink-gray-4);
-  pointer-events: none;
-  user-select: none;
-}
+/* CodeBlock styles
+ *
+ * Layout (container/toolbar/gutter/copy button) lives as Tailwind utilities in
+ * CodeBlockComponent.vue. Only the `pre` shell + highlight.js theme stay here —
+ * they target ProseMirror-rendered descendants (`.hljs-*` spans) and theme
+ * variants that can't be expressed as element-level utility classes. */
 
 /* ── pre shell ────────────────────────────────────────────────── */
 .ProseMirror pre {
@@ -48,6 +28,16 @@
   font-size: inherit;
 }
 
+/* The line-number gutter inherits the `pre` line-height, but the node view wraps
+   the code text in `[data-node-view-content]` divs that fall back to
+   `line-height: normal`, so the code and the numbers drift apart. Pin the code
+   column to the same line-height as the gutter (kept in sync with `pre` above). */
+.ProseMirror pre code,
+.ProseMirror pre code [data-node-view-content],
+.ProseMirror pre code [data-node-view-content] > * {
+  line-height: 1.7;
+}
+
 /* ── highlight.js — GitHub light ─────────────────────────────── */
 .ProseMirror pre .hljs-doctag,
 .ProseMirror pre .hljs-keyword,

package/src/molecules/editor/extensions/code-block/CodeBlockComponent.vue

@@ -1,32 +1,56 @@
 <template>
   <node-view-wrapper>
-    <div class="code-block-container">
-      <pre><code><node-view-content /></code></pre>
-      <select
-        v-if="isEditable"
-        class="language-selector form-select py-0"
+    <div class="code-block-container group relative">
+      <pre
+        class="flex items-start gap-5 !pl-3"
+      ><span class="flex flex-none select-none flex-col items-end border-outline-gray-2 text-ink-gray-4" aria-hidden="true" contenteditable="false"><span v-for="n in lineCount" :key="n" class="block">{{ n }}</span></span><code class="min-w-0 flex-1 overflow-x-auto"><node-view-content /></code></pre>
+      <div
+        class="absolute right-0 top-0 pr-2 pt-1.5 flex items-center gap-0.5 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100"
+        :class="{ 'opacity-100': languageMenuOpen || props.selected }"
         contenteditable="false"
-        v-model="selectedLanguage"
       >
-        <option :value="null">auto</option>
-        <option disabled>—</option>
-        <option
-          v-for="language in languages"
-          :value="language.value"
-          :key="language.value"
-        >
-          {{ language.label }}
-        </option>
-      </select>
-      <span v-else class="language-label">{{ selectedLanguage || 'auto' }}</span>
+        <Combobox
+          v-if="isEditable"
+          v-model="selectedLanguage"
+          :options="languageOptions"
+          trigger="button"
+          variant="ghost"
+          size="sm"
+          placeholder="auto"
+          @update:open="languageMenuOpen = $event"
+        />
+        <span v-else class="select-none px-1 text-xs text-ink-gray-4">{{
+          props.node.attrs.language || 'auto'
+        }}</span>
+        <TooltipProvider :delay-duration="500">
+          <TooltipRoot disable-closing-trigger>
+            <TooltipTrigger as-child>
+              <Button
+                size="xs"
+                variant="ghost"
+                label="Copy code"
+                :icon="copied ? 'lucide-check' : 'lucide-copy'"
+                @mousedown.prevent
+                @click.stop="copyCode"
+              />
+            </TooltipTrigger>
+            <TooltipBubble :text="copied ? 'Copied!' : 'Copy code'" />
+          </TooltipRoot>
+        </TooltipProvider>
+      </div>
     </div>
   </node-view-wrapper>
 </template>
 
 <script setup lang="ts">
-import { computed, toRaw } from 'vue'
+import { computed, ref, toRaw, onBeforeUnmount } from 'vue'
 import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
 import { createLowlight } from 'lowlight'
+import { TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
+import Button from '#components/Button/Button.vue'
+import Combobox from '#components/Combobox/Combobox.vue'
+import type { ComboboxOption } from '#components/Combobox/types'
+import TooltipBubble from '#components/Tooltip/TooltipBubble.vue'
 import { useNodeViewEditable } from '#molecules/editor/composables/useNodeViewEditable'
 import { listEditorLanguages } from '#molecules/editor/extensions/shared/lowlight-languages'
 import './CodeBlockComponent.css'
@@ -41,15 +65,76 @@ const editor = toRaw(props.editor)
 
 const isEditable = useNodeViewEditable(editor)
 
+// The combobox value is a string, but the node stores `null` for "auto". Map the
+// two: `''` is the sentinel the "auto" option carries, round-tripped to `null`.
 const selectedLanguage = computed<string | null>({
-  get: () => props.node.attrs.language as string | null,
+  get: () => (props.node.attrs.language as string | null) ?? '',
   set: (language) => {
-    props.updateAttributes({ language })
+    props.updateAttributes({ language: language || null })
   },
 })
 
-const languages = computed(() => {
+const languageOptions = computed<ComboboxOption[]>(() => {
   const lowlight = props.extension.options.lowlight as Lowlight
-  return listEditorLanguages(lowlight)
+  return [
+    { label: 'auto', value: '' },
+    ...listEditorLanguages(lowlight).map(({ label, value }) => ({
+      label,
+      value,
+    })),
+  ]
 })
+
+const languageMenuOpen = ref(false)
+
+// One gutter number per `\n`-delimited line. Rendered as discrete block lines
+// (not a `\n`-joined string) so stacking never depends on `white-space`.
+const lineCount = computed(() => props.node.textContent.split('\n').length)
+
+const copied = ref(false)
+let resetTimer: ReturnType<typeof setTimeout> | undefined
+
+const copyCode = async () => {
+  const text = props.node.textContent
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+    } else {
+      copyViaExecCommand(text)
+    }
+    markCopied()
+  } catch (error) {
+    // Async Clipboard API can reject in insecure contexts or when the document
+    // lost focus; fall back to the legacy path before giving up.
+    try {
+      copyViaExecCommand(text)
+      markCopied()
+    } catch {
+      console.error('Failed to copy code block', error)
+    }
+  }
+}
+
+function markCopied() {
+  copied.value = true
+  clearTimeout(resetTimer)
+  resetTimer = setTimeout(() => (copied.value = false), 2000)
+}
+
+/**
+ * Legacy clipboard path for contexts where `navigator.clipboard` is missing
+ * (non-HTTPS origins, older webviews). Selects a detached textarea and copies.
+ */
+function copyViaExecCommand(text: string) {
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.style.position = 'fixed'
+  textarea.style.opacity = '0'
+  document.body.appendChild(textarea)
+  textarea.select()
+  document.execCommand('copy')
+  document.body.removeChild(textarea)
+}
+
+onBeforeUnmount(() => clearTimeout(resetTimer))
 </script>

package/src/molecules/editor/extensions/content-paste/content-paste-extension.ts

@@ -21,9 +21,11 @@ import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { Slice } from '@tiptap/pm/model'
 import type { EditorView } from '@tiptap/pm/view'
-import type { UploadedFile } from '#utils/useFileUpload'
 import { imageEngine } from '#molecules/editor/extensions/image/image-engine'
-import { resolveUploadOptions } from '#molecules/editor/extensions/shared/media-upload-engine'
+import {
+  resolveUploadOptions,
+  type UploadFunction,
+} from '#molecules/editor/extensions/shared/media-upload-engine'
 import { absolutizeMediaSrcs } from './media-src-utils'
 import { htmlContainsImage } from './paste-html-utils'
 import { tryMarkdownSlice } from './paste-markdown-utils'
@@ -33,7 +35,7 @@ export interface ContentPasteOptions {
   /** When false, the extension is inert and all paste handling falls through. */
   enabled: boolean
   /** Upload function used for re-uploading pasted images. */
-  uploadFunction: ((file: File) => Promise<UploadedFile>) | null
+  uploadFunction: UploadFunction | null
 }
 
 export const ContentPasteExtension = Extension.create<ContentPasteOptions>({