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

bdbch commented 1 month ago

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

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

Related Issues

Fixes #5715

changeset-bot[bot] commented 1 month ago

🦋 Changeset detected

Latest commit: 91ad89fb7e682adff1b0331718dd81e400d6c03e

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[bot] commented 1 month ago

Deploy Preview for tiptap-embed ready!

Name	Link
Latest commit	91ad89fb7e682adff1b0331718dd81e400d6c03e
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.

ueberdosis / tiptap