frappe-ui 1.0.0-beta.49 → 1.0.0-beta.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.49",
+  "version": "1.0.0-beta.50",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"

package/src/molecules/editor/extensions/link/exit-link-on-space-plugin.test.ts

@@ -0,0 +1,237 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { Editor, Extension, type Extensions } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import { UndoRedo } from '@tiptap/extensions'
+import { LinkExtension } from './link-extension'
+
+const openEditors: Editor[] = []
+
+afterEach(() => {
+  // An undestroyed view keeps a DOM observer timer alive past teardown.
+  while (openEditors.length) openEditors.pop()?.destroy()
+})
+
+function editorWith(content: string, extensions: Extensions = []) {
+  const editor = new Editor({
+    extensions: [Document, Paragraph, Text, LinkExtension, ...extensions],
+    content,
+  })
+  openEditors.push(editor)
+  return editor
+}
+
+/** The document's inline HTML, with the link's boilerplate attributes dropped. */
+function inlineHTML(editor: Editor): string {
+  return editor
+    .getHTML()
+    .replace(/ target="_blank" rel="noopener noreferrer nofollow"/g, '')
+    .replace(/^<p>|<\/p>$/g, '')
+}
+
+/** Type `text` at the cursor the way the view does, one character at a time. */
+function type(editor: Editor, text: string) {
+  for (const char of text) {
+    editor.view.dispatch(editor.state.tr.insertText(char))
+  }
+}
+
+/** Put the cursor at the end of the link in `<p>…<a>link</a>…</p>`. */
+function cursorAtLinkEnd(editor: Editor, linkText: string) {
+  const text = editor.state.doc.textContent
+  editor.commands.setTextSelection(
+    text.indexOf(linkText) + linkText.length + 1, // +1 for the paragraph open token
+  )
+}
+
+describe('exitLinkOnSpacePlugin', () => {
+  it('leaves a space typed at the end of a link outside the link', () => {
+    const editor = editorWith(
+      '<p>see <a href="https://example.com">docs</a></p>',
+    )
+    cursorAtLinkEnd(editor, 'docs')
+
+    type(editor, ' ')
+
+    expect(inlineHTML(editor)).toBe(
+      'see <a href="https://example.com">docs</a> ',
+    )
+  })
+
+  it('ends the link, so text typed after the space is not linked', () => {
+    const editor = editorWith(
+      '<p>see <a href="https://example.com">docs</a></p>',
+    )
+    cursorAtLinkEnd(editor, 'docs')
+
+    type(editor, ' and more')
+
+    expect(inlineHTML(editor)).toBe(
+      'see <a href="https://example.com">docs</a> and more',
+    )
+  })
+
+  it('handles a run of spaces', () => {
+    const editor = editorWith(
+      '<p>see <a href="https://example.com">docs</a></p>',
+    )
+    cursorAtLinkEnd(editor, 'docs')
+
+    type(editor, '   x')
+
+    expect(inlineHTML(editor)).toBe(
+      'see <a href="https://example.com">docs</a>   x',
+    )
+  })
+
+  it('ends the link when the space is typed between the link and later text', () => {
+    const editor = editorWith(
+      '<p><a href="https://example.com">docs</a>tail</p>',
+    )
+    cursorAtLinkEnd(editor, 'docs')
+
+    type(editor, ' ')
+
+    expect(inlineHTML(editor)).toBe(
+      '<a href="https://example.com">docs</a> tail',
+    )
+  })
+
+  it('keeps a space typed inside link text linked', () => {
+    const editor = editorWith(
+      '<p><a href="https://example.com">clickme</a></p>',
+    )
+    editor.commands.setTextSelection(1 + 'click'.length)
+
+    type(editor, ' ')
+
+    expect(inlineHTML(editor)).toBe(
+      '<a href="https://example.com">click me</a>',
+    )
+  })
+
+  it('leaves non-whitespace typed at the end of a link alone', () => {
+    // The mark is inclusive on purpose: a URL still being typed keeps growing.
+    const editor = editorWith('<p><a href="https://example.com">docs</a></p>')
+    cursorAtLinkEnd(editor, 'docs')
+
+    type(editor, '/api')
+
+    expect(inlineHTML(editor)).toBe(
+      '<a href="https://example.com">docs/api</a>',
+    )
+  })
+
+  it('does not relink an autolinked URL onto the space that triggered it', () => {
+    const editor = editorWith('<p></p>')
+
+    type(editor, 'see https://example.com/a then')
+
+    expect(inlineHTML(editor)).toBe(
+      'see <a href="https://example.com/a">https://example.com/a</a> then',
+    )
+  })
+
+  it('leaves a trailing space outside a link applied over it', () => {
+    // A mark-only change: no text moves, so the plugin has to read the changed
+    // range off the AddMarkStep itself.
+    const editor = editorWith('<p>see docs tail</p>')
+
+    editor
+      .chain()
+      .setTextSelection({ from: 5, to: 10 }) // "docs "
+      .setLink({ href: 'https://example.com' })
+      .setTextSelection(10)
+      .run()
+
+    expect(inlineHTML(editor)).toBe(
+      'see <a href="https://example.com">docs</a> tail',
+    )
+  })
+
+  it('keeps a link whose text is only whitespace', () => {
+    // Ending the link would delete it outright, which is not this plugin's job.
+    const editor = editorWith('<p>a b</p>')
+
+    editor
+      .chain()
+      .setTextSelection({ from: 2, to: 3 })
+      .setLink({ href: 'https://example.com' })
+      .setTextSelection(3)
+      .run()
+
+    expect(inlineHTML(editor)).toBe('a<a href="https://example.com"> </a>b')
+  })
+
+  it('ignores a change made elsewhere in the document', () => {
+    // A collaborator's keystroke (or an undo) must not rewrite marks the user
+    // never touched, even with the cursor resting after an already-linked space.
+    const editor = editorWith(
+      '<p>see <a href="https://example.com">docs </a>tail</p>',
+    )
+    editor.commands.setTextSelection(10) // just after the linked space
+
+    const tr = editor.state.tr.insertText('Z', 1, 1)
+    tr.setSelection(editor.state.selection.map(tr.doc, tr.mapping))
+    editor.view.dispatch(tr)
+
+    expect(inlineHTML(editor)).toBe(
+      'Zsee <a href="https://example.com">docs </a>tail',
+    )
+  })
+
+  it('leaves a remote collaboration change to the peer that made it', () => {
+    // Stand-in for y-prosemirror's plugin: the real one is pulled in by a
+    // consumer's Collaboration extension, so it cannot be imported here.
+    const ySyncKey = new PluginKey('y-sync')
+    const YSync = Extension.create({
+      name: 'ySyncStandIn',
+      addProseMirrorPlugins: () => [new Plugin({ key: ySyncKey })],
+    })
+    const editor = editorWith(
+      '<p>see <a href="https://example.com">docs</a></p>',
+      [YSync],
+    )
+    cursorAtLinkEnd(editor, 'docs')
+
+    // That peer runs this same plugin; its result replicates on its own.
+    editor.view.dispatch(editor.state.tr.insertText(' ').setMeta(ySyncKey, {}))
+
+    expect(inlineHTML(editor)).toBe(
+      'see <a href="https://example.com">docs </a>',
+    )
+  })
+
+  it('undoes the space and the mark change as one step', () => {
+    const editor = editorWith(
+      '<p>see <a href="https://example.com">docs</a></p>',
+      [UndoRedo],
+    )
+    cursorAtLinkEnd(editor, 'docs')
+    type(editor, ' ')
+
+    editor.commands.undo()
+
+    expect(inlineHTML(editor)).toBe(
+      'see <a href="https://example.com">docs</a>',
+    )
+  })
+
+  it('stays out of the way when the editor is not editable', () => {
+    // A read-only user cannot type, so this drives the guard through
+    // `view.dispatch` instead: it pins the guard rather than the user path,
+    // which matters for a programmatic write into a read-only editor.
+    const editor = editorWith('<p><a href="https://example.com">docs</a></p>')
+    editor.setEditable(false)
+    cursorAtLinkEnd(editor, 'docs')
+
+    type(editor, ' x')
+
+    expect(inlineHTML(editor)).toBe('<a href="https://example.com">docs x</a>')
+  })
+})

package/src/molecules/editor/extensions/link/exit-link-on-space-plugin.ts

@@ -0,0 +1,130 @@
+import {
+  combineTransactionSteps,
+  getChangedRanges,
+  getMarkRange,
+  type Editor,
+} from '@tiptap/core'
+import type { MarkType, ResolvedPos } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { isRemoteChange } from '#molecules/editor/extensions/shared/collaboration'
+
+/**
+ * Options for {@link exitLinkOnSpacePlugin}.
+ */
+export interface ExitLinkOnSpacePluginOptions {
+  editor: Editor
+  type: MarkType
+}
+
+/**
+ * End the link when whitespace is typed at the end of one.
+ *
+ * The Link mark is *inclusive* whenever `autolink` is on (tiptap ties the two
+ * together, so the mark can grow while a URL is still being typed). The side
+ * effect is that a space typed right after a link is pulled inside the `<a>`,
+ * and everything typed after it stays linked too. So `<a>docs</a>` becomes
+ * `<a>docs and more</a>` one keystroke at a time.
+ *
+ * Whitespace is where a URL unambiguously ends, so it is the boundary we act
+ * on: strip the link mark off a whitespace run the user just typed at the end
+ * of a link. Text typed after it then inherits the (unlinked) space's marks,
+ * which ends the link without touching the inclusive-mark behaviour that
+ * autolink relies on while a URL is mid-typing.
+ *
+ * Runs as `appendTransaction` rather than `handleTextInput` so input rules keep
+ * their first crack at the keystroke, and so pasted or IME-composed whitespace
+ * is covered as well.
+ */
+export function exitLinkOnSpacePlugin(
+  options: ExitLinkOnSpacePluginOptions,
+): Plugin {
+  return new Plugin({
+    key: new PluginKey('exitLinkOnSpace'),
+    appendTransaction: (transactions, oldState, newState) => {
+      if (!options.editor.isEditable) {
+        return null
+      }
+
+      if (!transactions.some((transaction) => transaction.docChanged)) {
+        return null
+      }
+
+      // A remote peer's space is that peer's link to end: it runs this same
+      // plugin and the result replicates. Ending it here too would push a local
+      // rewrite into their typing.
+      if (isRemoteChange(transactions, newState)) {
+        return null
+      }
+
+      const { selection } = newState
+      if (!selection.empty) {
+        // Only a collapsed cursor means "the user is typing here".
+        return null
+      }
+
+      const range = linkedTrailingSpace(selection.$from, options.type)
+      if (!range) {
+        return null
+      }
+
+      // The whitespace has to be part of what just changed. Otherwise an edit
+      // anywhere else — a collaborator's keystroke, an undo — would rewrite
+      // marks the user never touched, just because the cursor happened to be
+      // resting after an already-linked space.
+      const changes = getChangedRanges(
+        combineTransactionSteps(oldState.doc, [...transactions]),
+      )
+      const justWritten = changes.some(
+        ({ newRange }) =>
+          newRange.to >= range.from && newRange.from <= range.to,
+      )
+      if (!justWritten) {
+        return null
+      }
+
+      return newState.tr.removeMark(range.from, range.to, options.type)
+    },
+  })
+}
+
+/**
+ * The run of linked whitespace immediately before `$pos`, when `$pos` is the
+ * end of that link. Returns `null` when there is no such run, or when the link
+ * continues past the cursor — a space typed *inside* link text stays linked,
+ * because splitting a link in two is never what the keystroke meant.
+ */
+function linkedTrailingSpace(
+  $pos: ResolvedPos,
+  type: MarkType,
+): { from: number; to: number } | null {
+  const before = $pos.nodeBefore
+  if (!before?.isText || !before.text) {
+    return null
+  }
+
+  const link = before.marks.find((mark) => mark.type === type)
+  if (!link) {
+    return null
+  }
+
+  const after = $pos.nodeAfter
+  if (after && link.isInSet(after.marks)) {
+    // Mid-link: the whitespace separates link text rather than ending it.
+    return null
+  }
+
+  const trailing = before.text.length - before.text.trimEnd().length
+  if (trailing === 0) {
+    return null
+  }
+
+  const from = $pos.pos - trailing
+  const linkRange = getMarkRange($pos, type)
+  if (linkRange && from <= linkRange.from) {
+    // The link is whitespace all the way down, so ending it here would delete
+    // it outright. Ending a link is this plugin's job; removing one is not.
+    return null
+  }
+
+  return { from, to: $pos.pos }
+}

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

@@ -2,6 +2,7 @@ import Link from '@tiptap/extension-link'
 import { buildOpenLinkEditor, type OpenLinkEditorOptions } from './link-commands'
 import { linkPastePlugin } from './link-paste-plugin'
 import { clearLinkOnBoundaryPlugin } from './clear-link-on-boundary-plugin'
+import { exitLinkOnSpacePlugin } from './exit-link-on-space-plugin'
 import { linkClickPlugin } from './link-click-plugin'
 import { linkShortcutPlugin } from './link-shortcut-plugin'
 
@@ -21,7 +22,8 @@ declare module '@tiptap/core' {
  * from `@tiptap/extension-link` via `...this.parent?.()` and deliberately NOT
  * weakened. This extension only adds:
  *  - the `openLinkEditor` command (bubble popup) — see `link-commands.ts`;
- *  - four ProseMirror plugins (paste / boundary / click / shortcut) — one per file.
+ *  - five ProseMirror plugins (paste / boundary / space-exit / click / shortcut) —
+ *    one per file.
  *    `Mod-k` lives in the shortcut plugin (not `addKeyboardShortcuts`) so it can
  *    stop the keystroke propagating to app-level listeners; see that file.
  */
@@ -57,6 +59,7 @@ export const LinkExtension = Link.extend({
     plugins.push(
       linkPastePlugin({ editor: this.editor, type: this.type }),
       clearLinkOnBoundaryPlugin({ editor: this.editor, type: this.type }),
+      exitLinkOnSpacePlugin({ editor: this.editor, type: this.type }),
       linkClickPlugin({ editor: this.editor, type: this.type }),
       linkShortcutPlugin({ editor: this.editor }),
     )

package/src/molecules/editor/extensions/list/list-join.ts

@@ -4,13 +4,9 @@ import type {
   NodeType,
   Schema,
 } from '@tiptap/pm/model'
-import {
-  Plugin,
-  PluginKey,
-  type EditorState,
-  type Transaction,
-} from '@tiptap/pm/state'
+import { Plugin, PluginKey, type Transaction } from '@tiptap/pm/state'
 import { canJoin } from '@tiptap/pm/transform'
+import { isRemoteChange } from '#molecules/editor/extensions/shared/collaboration'
 
 const listTypeCache = new WeakMap<Schema, Set<NodeType>>()
 
@@ -92,37 +88,6 @@ function joinAdjacentListsIn(tr: Transaction, schema: Schema): boolean {
   return positions.length > 0
 }
 
-/**
- * Whether these transactions carry a remote collaboration update.
- *
- * Collaboration is a consumer-supplied extension (`@tiptap/extension-collaboration`
- * brings y-prosemirror), so its plugin key cannot be imported here. Find it on
- * the live state instead: y-prosemirror tags every remote application with the
- * meta of its `y-sync` plugin.
- */
-function isRemoteChange(
-  transactions: readonly Transaction[],
-  state: EditorState,
-): boolean {
-  const syncKey = state.plugins.find((plugin) =>
-    ((plugin.spec.key as PluginKey | undefined)?.key ?? '').startsWith(
-      'y-sync',
-    ),
-  )?.spec.key as PluginKey | undefined
-  if (!syncKey) return false
-  return transactions.some((transaction) => {
-    if (transaction.getMeta(syncKey)) return true
-    // Another plugin appending to the same dispatch (TrailingNode does, on any
-    // structural change) produces a transaction that carries no sync meta of
-    // its own. ProseMirror tags it with the root transaction that caused it,
-    // so ask that one — otherwise the guard would depend on plugin order.
-    const root = transaction.getMeta('appendedTransaction') as
-      | Transaction
-      | undefined
-    return Boolean(root?.getMeta(syncKey))
-  })
-}
-
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     listJoin: {

package/src/molecules/editor/extensions/shared/collaboration.ts

@@ -0,0 +1,42 @@
+import type { EditorState, PluginKey, Transaction } from '@tiptap/pm/state'
+
+/** `PluginKey`'s runtime `key` string, which its public type does not declare. */
+type KeyedPluginKey = PluginKey & { key?: string }
+
+/**
+ * Whether these transactions carry a remote collaboration update.
+ *
+ * A remote peer's edit arrives as an ordinary local transaction, so a plugin
+ * that rewrites the document in `appendTransaction` cannot tell the two apart
+ * without asking. It needs to: that peer runs the same plugin and its own
+ * rewrite replicates on its own, so acting here too means two peers editing the
+ * same range concurrently — and, worse, silently pushing a local
+ * normalisation into someone else's typing.
+ *
+ * Collaboration is a consumer-supplied extension (`@tiptap/extension-collaboration`
+ * brings y-prosemirror), so its plugin key cannot be imported here. Find it on
+ * the live state instead: y-prosemirror tags every remote application with the
+ * meta of its `y-sync` plugin.
+ */
+export function isRemoteChange(
+  transactions: readonly Transaction[],
+  state: EditorState,
+): boolean {
+  const syncKey = state.plugins.find((plugin) =>
+    ((plugin.spec.key as KeyedPluginKey | undefined)?.key ?? '').startsWith(
+      'y-sync',
+    ),
+  )?.spec.key as PluginKey | undefined
+  if (!syncKey) return false
+  return transactions.some((transaction) => {
+    if (transaction.getMeta(syncKey)) return true
+    // Another plugin appending to the same dispatch (TrailingNode does, on any
+    // structural change) produces a transaction that carries no sync meta of
+    // its own. ProseMirror tags it with the root transaction that caused it,
+    // so ask that one — otherwise the guard would depend on plugin order.
+    const root = transaction.getMeta('appendedTransaction') as
+      | Transaction
+      | undefined
+    return Boolean(root?.getMeta(syncKey))
+  })
+}