Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix NodePos logic for child position calculation and attribute changes #5716

Merged
merged 3 commits into from
Oct 10, 2024

Conversation

bdbch
Copy link
Member

@bdbch bdbch commented Oct 10, 2024

Changes Overview

This pull request addresses several issues in the @tiptap/core package, particularly focusing on fixing problems related to NodePos attributes and child positions. The main changes include bug fixes to ensure correct handling of non-text atoms and improvements to the attribute update mechanism.

Bug fixes:

Changes:

  • packages/core/src/NodePos.ts: Modified the calculation of targetPos to correctly handle non-text atoms by adjusting the offset conditionally.
  • packages/core/src/NodePos.ts: Refactored the setAttribute method to use a transaction (tr) for setting node markup and dispatching the update, improving the attribute update mechanism.

Implementation Approach

  • Added a new check if the current NodePos child position is a non-text atom (the offset will be 0 then)
  • Added direct PM logic to update attributes on a NodePos node

Testing Done

  • Ran tests locally
  • Ran tests on CI
  • Tested my changes locally on a local demo

Verification Steps

That's my demo:

import './styles.scss'

import Image from '@tiptap/extension-image'
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React, { useMemo } from 'react'

export default () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Image,
    ],
    content: `
      <p>This is my demo</p>
      <img src="https://picsum.photos/200/300" alt="test">
    `,
  })

  const imagePos = useMemo(() => {
    let pos = 0

    editor.state.doc.descendants((node, nodePosition) => {
      if (node.type.name === 'image') {
        pos = nodePosition
      }
    })
    return pos
  }, [editor])

  return (
    <>
      <div>
        <button onClick={() => editor.$node('image').setAttribute({ src: 'https://picsum.photos/500/500' })}>Change Image</button>
      </div>
      <EditorContent editor={editor} />
      <div>
        <div>NodePos Pos: {editor.$node('image').pos}</div>
        <div>PM Pos: {imagePos}</div>
      </div>
    </>
  )
}

Additional Notes

Nothing

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

This PR should fix #5672 and fix #5671

@bdbch bdbch requested a review from svenadlung as a code owner October 10, 2024 06:38
Copy link

changeset-bot bot commented Oct 10, 2024

🦋 Changeset detected

Latest commit: 56d304c

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

Copy link

netlify bot commented Oct 10, 2024

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 56d304c
🔍 Latest deploy log https://app.netlify.com/sites/tiptap-embed/deploys/6707766f26f21d000809be5f
😎 Deploy Preview https://deploy-preview-5716--tiptap-embed.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me

@bdbch bdbch self-assigned this Oct 10, 2024
@bdbch bdbch merged commit d96f679 into develop Oct 10, 2024
14 checks passed
@bdbch bdbch deleted the fix/nodepos-fixes branch October 10, 2024 10:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: NodePos.pos different from actual PM pos [Bug]: NodePos.setAttribute doesn't re-render NodeView
2 participants