Fix getMarkRange not finding marks when at the start of a mark

[bdbch]

Changes Overview

This pull request addresses an issue in the @tiptap/core package where the getMarkRange function did not return the correct range when the cursor was at the start of the specified mark. The changes involve both documentation and code modifications to ensure accurate behavior.

Bug Fix:

• packages/core/src/helpers/getMarkRange.ts: Updated the getMarkRange function to correctly handle cases where the cursor is at the start of a text node without the mark, ensuring it looks backward and returns the appropriate range.

Implementation Approach

You can find out more about my implementation from the comments in code. I basically added a forward, then backward check for marks on the current nodes parent with the parent offset.

Testing Done

Tested it locally on my machine in a demo I build. (See below)

Verification Steps

My demo:

import './styles.scss'

import Document from '@tiptap/extension-document'
import Link from '@tiptap/extension-link'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, getMarkRange, useEditor } from '@tiptap/react'
import React, { useCallback } from 'react'

export default () => {
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
      Link.configure({ openOnClick: false }),
    ],
    content: `
      <p>
        This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
      </p>
      <p>
        This is a <a href="#">Link</a> with some text afterwards.
      </p>
      <p>
        The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
      </p>
    `,
  })

  const handleClick = useCallback(() => {
    const range = getMarkRange(
      editor.state.selection.$from,
      editor.schema.marks.link,
    )

    console.log(editor.state.selection.from, range)
  }, [editor])

  return (
    <div>
      <div>
        <button onClick={handleClick}>Expand selection to mark</button>
      </div>
      <EditorContent editor={editor} />
    </div>
  )
}

Additional Notes

Nothing to add here

Checklist

• I have created a changeset for this PR if necessary.
• My changes do not break the library.
• I have added tests where applicable.
• I have followed the project guidelines.
• I have fixed any lint issues.

Related Issues

Fixes #5715

[changeset-bot]

🦋 Changeset detected

Latest commit: 91ad89f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 54 packages

Name	Type
@tiptap/core	Patch
@tiptap/extension-blockquote	Patch
@tiptap/extension-bold	Patch
@tiptap/extension-bubble-menu	Patch
@tiptap/extension-bullet-list	Patch
@tiptap/extension-character-count	Patch
@tiptap/extension-code-block-lowlight	Patch
@tiptap/extension-code-block	Patch
@tiptap/extension-code	Patch
@tiptap/extension-collaboration-cursor	Patch
@tiptap/extension-collaboration	Patch
@tiptap/extension-color	Patch
@tiptap/extension-document	Patch
@tiptap/extension-dropcursor	Patch
@tiptap/extension-floating-menu	Patch
@tiptap/extension-focus	Patch
@tiptap/extension-font-family	Patch
@tiptap/extension-gapcursor	Patch
@tiptap/extension-hard-break	Patch
@tiptap/extension-heading	Patch
@tiptap/extension-highlight	Patch
@tiptap/extension-history	Patch
@tiptap/extension-horizontal-rule	Patch
@tiptap/extension-image	Patch
@tiptap/extension-italic	Patch
@tiptap/extension-link	Patch
@tiptap/extension-list-item	Patch
@tiptap/extension-list-keymap	Patch
@tiptap/extension-mention	Patch
@tiptap/extension-ordered-list	Patch
@tiptap/extension-paragraph	Patch
@tiptap/extension-placeholder	Patch
@tiptap/extension-strike	Patch
@tiptap/extension-subscript	Patch
@tiptap/extension-superscript	Patch
@tiptap/extension-table-cell	Patch
@tiptap/extension-table-header	Patch
@tiptap/extension-table-row	Patch
@tiptap/extension-table	Patch
@tiptap/extension-task-item	Patch
@tiptap/extension-task-list	Patch
@tiptap/extension-text-align	Patch
@tiptap/extension-text-style	Patch
@tiptap/extension-text	Patch
@tiptap/extension-typography	Patch
@tiptap/extension-underline	Patch
@tiptap/extension-youtube	Patch
@tiptap/html	Patch
@tiptap/pm	Patch
@tiptap/react	Patch
@tiptap/starter-kit	Patch
@tiptap/suggestion	Patch
@tiptap/vue-2	Patch
@tiptap/vue-3	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	91ad89f
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/6707983c57cccd0008f97548
😎 Deploy Preview	https://deploy-preview-5717--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nperez0111]

Other than the test file, looks good to me

[nperez0111]

Could we add a test to prove that the look back won't cross a node boundary?

Like two paragraphs with the first having the mark we are looking for but we use the position of the first text position in the second paragraph.

The danger of looking backward is that it can misreport so I just want to prove that it doesn't in a test

[bdbch]

Added two additional tests with

1. Two paragraphs, first paragraph has a link at the end - testing if putting the cursor at the end of it will result in the correct mark + if the cursor at the start of the second paragraph returns undefined.
2. Two paragraphs, first paragraph doesnt have a link, second one has a link at the start - checking if the end position of the first paragraph returns undefined and the position at the start of the second paragraph returns the correct mark.