WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Conversation

@Zih0
Copy link
Contributor

@Zih0 Zih0 commented Oct 25, 2025

Changes Overview

The Code extension had an issue where typing a`b` would cause the preceding character "a" to disappear.
This PR applies the same regular expression pattern used in other Mark extensions (Bold, Strike, Italic) to fix this behavior.

Implementation Approach

Updated the regular expressions for inputRegex and pasteRegex in the Code extension to match the pattern used in other Mark extensions:

// Other Mark extensions pattern:
// Italic:  /(?:^|\s)(\*(?!\s+\*)((?:[^*]+))\*(?!\s+\*))$/
// Strike:  /(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))$/
// Bold:    /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))$/

// AS-IS Code extension:
export const inputRegex = /(^|[^`])`([^`]+)`(?!`)$/
export const pasteRegex = /(^|[^`])`([^`]+)`(?!`)/g

// TO-BE Code extension:
export const inputRegex = /(?:^|\s)(`(?!\s+`)((?:[^`]+))`(?!\s+`))$/
export const pasteRegex = /(?:^|\s)(`(?!\s+`)((?:[^`]+))`(?!\s+`))/g

The key changes:

  • Changed (^|[^])to(?:^|\s)` - now requires whitespace or start of line instead of "not a backtick"
  • Added (?!\s+)` lookaheads to prevent matching when there are spaces around backticks
  • Wrapped the content capture group with proper parentheses for consistency

Testing Done

Tested manually in the demos/ environment using the extension-code demo by:

  • Typing various inline code patterns
  • Verifying that preceding characters are no longer consumed
  • Confirming inline code formatting works correctly with the updated regex

Verification Steps

  1. Open the Tiptap editor
  2. Type a letter followed by backtick-text-backtick (e.g., ab)
  3. Verify that the preceding character is preserved and the text between backticks is formatted as inline code
  4. Verify that the inline code formatting still works correctly with the new regex pattern

Additional Notes

AS-IS (Original behavior on https://tiptap.dev/ main page):

2025-10-25.2.23.13.mov

TO-BE (Fixed behavior):

2025-10-25.2.19.05.mov

This change aligns the Code extension's regex pattern with other Mark extensions in the codebase, ensuring consistent behavior across all inline formatting marks.

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

Closes #7110

@changeset-bot
Copy link

changeset-bot bot commented Oct 25, 2025

🦋 Changeset detected

Latest commit: 5859c22

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

This PR includes changesets to release 70 packages
Name Type
@tiptap/extension-code Patch
@tiptap/starter-kit Patch
@tiptap/core Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-collaboration-caret Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-color Patch
@tiptap/extension-details Patch
@tiptap/extension-document Patch
@tiptap/extension-drag-handle-react Patch
@tiptap/extension-drag-handle-vue-2 Patch
@tiptap/extension-drag-handle-vue-3 Patch
@tiptap/extension-drag-handle Patch
@tiptap/extension-emoji Patch
@tiptap/extension-file-handler Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-font-family Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-invisible-characters Patch
@tiptap/extension-italic Patch
@tiptap/extension-link Patch
@tiptap/extension-list Patch
@tiptap/extension-mathematics Patch
@tiptap/extension-mention Patch
@tiptap/extension-node-range Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-of-contents Patch
@tiptap/extension-table 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-unique-id Patch
@tiptap/extension-youtube Patch
@tiptap/extensions Patch
@tiptap/html Patch
@tiptap/markdown Patch
@tiptap/pm Patch
@tiptap/react Patch
@tiptap/static-renderer Patch
@tiptap/suggestion Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 Patch
@tiptap/extension-character-count Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-focus Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-history Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-placeholder Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list 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
Copy link

netlify bot commented Oct 25, 2025

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 5859c22
🔍 Latest deploy log https://app.netlify.com/projects/tiptap-embed/deploys/69320b0d0bb20700082d2c83
😎 Deploy Preview https://deploy-preview-7124--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 project configuration.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 25, 2025

Open in StackBlitz

@tiptap/extension-character-count

npm i https://pkg.pr.new/@tiptap/extension-character-count@7124

@tiptap/extension-gapcursor

npm i https://pkg.pr.new/@tiptap/extension-gapcursor@7124

@tiptap/extension-dropcursor

npm i https://pkg.pr.new/@tiptap/extension-dropcursor@7124

@tiptap/extension-focus

npm i https://pkg.pr.new/@tiptap/extension-focus@7124

@tiptap/extension-list-item

npm i https://pkg.pr.new/@tiptap/extension-list-item@7124

@tiptap/extension-history

npm i https://pkg.pr.new/@tiptap/extension-history@7124

@tiptap/extension-list-keymap

npm i https://pkg.pr.new/@tiptap/extension-list-keymap@7124

@tiptap/extension-placeholder

npm i https://pkg.pr.new/@tiptap/extension-placeholder@7124

@tiptap/extension-table-cell

npm i https://pkg.pr.new/@tiptap/extension-table-cell@7124

@tiptap/extension-table-header

npm i https://pkg.pr.new/@tiptap/extension-table-header@7124

@tiptap/extension-task-item

npm i https://pkg.pr.new/@tiptap/extension-task-item@7124

@tiptap/extension-table-row

npm i https://pkg.pr.new/@tiptap/extension-table-row@7124

@tiptap/extension-task-list

npm i https://pkg.pr.new/@tiptap/extension-task-list@7124

@tiptap/extension-blockquote

npm i https://pkg.pr.new/@tiptap/extension-blockquote@7124

@tiptap/core

npm i https://pkg.pr.new/@tiptap/core@7124

@tiptap/extension-bold

npm i https://pkg.pr.new/@tiptap/extension-bold@7124

@tiptap/extension-code

npm i https://pkg.pr.new/@tiptap/extension-code@7124

@tiptap/extension-bullet-list

npm i https://pkg.pr.new/@tiptap/extension-bullet-list@7124

@tiptap/extension-bubble-menu

npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@7124

@tiptap/extension-code-block-lowlight

npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@7124

@tiptap/extension-code-block

npm i https://pkg.pr.new/@tiptap/extension-code-block@7124

@tiptap/extension-collaboration

npm i https://pkg.pr.new/@tiptap/extension-collaboration@7124

@tiptap/extension-color

npm i https://pkg.pr.new/@tiptap/extension-color@7124

@tiptap/extension-collaboration-caret

npm i https://pkg.pr.new/@tiptap/extension-collaboration-caret@7124

@tiptap/extension-details

npm i https://pkg.pr.new/@tiptap/extension-details@7124

@tiptap/extension-document

npm i https://pkg.pr.new/@tiptap/extension-document@7124

@tiptap/extension-drag-handle

npm i https://pkg.pr.new/@tiptap/extension-drag-handle@7124

@tiptap/extension-drag-handle-react

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-react@7124

@tiptap/extension-drag-handle-vue-2

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-vue-2@7124

@tiptap/extension-drag-handle-vue-3

npm i https://pkg.pr.new/@tiptap/extension-drag-handle-vue-3@7124

@tiptap/extension-emoji

npm i https://pkg.pr.new/@tiptap/extension-emoji@7124

@tiptap/extension-floating-menu

npm i https://pkg.pr.new/@tiptap/extension-floating-menu@7124

@tiptap/extension-file-handler

npm i https://pkg.pr.new/@tiptap/extension-file-handler@7124

@tiptap/extension-font-family

npm i https://pkg.pr.new/@tiptap/extension-font-family@7124

@tiptap/extension-hard-break

npm i https://pkg.pr.new/@tiptap/extension-hard-break@7124

@tiptap/extension-heading

npm i https://pkg.pr.new/@tiptap/extension-heading@7124

@tiptap/extension-highlight

npm i https://pkg.pr.new/@tiptap/extension-highlight@7124

@tiptap/extension-horizontal-rule

npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@7124

@tiptap/extension-image

npm i https://pkg.pr.new/@tiptap/extension-image@7124

@tiptap/extension-italic

npm i https://pkg.pr.new/@tiptap/extension-italic@7124

@tiptap/extension-invisible-characters

npm i https://pkg.pr.new/@tiptap/extension-invisible-characters@7124

@tiptap/extension-link

npm i https://pkg.pr.new/@tiptap/extension-link@7124

@tiptap/extension-list

npm i https://pkg.pr.new/@tiptap/extension-list@7124

@tiptap/extension-mathematics

npm i https://pkg.pr.new/@tiptap/extension-mathematics@7124

@tiptap/extension-mention

npm i https://pkg.pr.new/@tiptap/extension-mention@7124

@tiptap/extension-node-range

npm i https://pkg.pr.new/@tiptap/extension-node-range@7124

@tiptap/extension-paragraph

npm i https://pkg.pr.new/@tiptap/extension-paragraph@7124

@tiptap/extension-ordered-list

npm i https://pkg.pr.new/@tiptap/extension-ordered-list@7124

@tiptap/extension-strike

npm i https://pkg.pr.new/@tiptap/extension-strike@7124

@tiptap/extension-subscript

npm i https://pkg.pr.new/@tiptap/extension-subscript@7124

@tiptap/extension-superscript

npm i https://pkg.pr.new/@tiptap/extension-superscript@7124

@tiptap/extension-table

npm i https://pkg.pr.new/@tiptap/extension-table@7124

@tiptap/extension-table-of-contents

npm i https://pkg.pr.new/@tiptap/extension-table-of-contents@7124

@tiptap/extension-text

npm i https://pkg.pr.new/@tiptap/extension-text@7124

@tiptap/extension-text-align

npm i https://pkg.pr.new/@tiptap/extension-text-align@7124

@tiptap/extension-text-style

npm i https://pkg.pr.new/@tiptap/extension-text-style@7124

@tiptap/extension-typography

npm i https://pkg.pr.new/@tiptap/extension-typography@7124

@tiptap/extension-underline

npm i https://pkg.pr.new/@tiptap/extension-underline@7124

@tiptap/extension-unique-id

npm i https://pkg.pr.new/@tiptap/extension-unique-id@7124

@tiptap/extension-youtube

npm i https://pkg.pr.new/@tiptap/extension-youtube@7124

@tiptap/extensions

npm i https://pkg.pr.new/@tiptap/extensions@7124

@tiptap/html

npm i https://pkg.pr.new/@tiptap/html@7124

@tiptap/markdown

npm i https://pkg.pr.new/@tiptap/markdown@7124

@tiptap/react

npm i https://pkg.pr.new/@tiptap/react@7124

@tiptap/pm

npm i https://pkg.pr.new/@tiptap/pm@7124

@tiptap/suggestion

npm i https://pkg.pr.new/@tiptap/suggestion@7124

@tiptap/starter-kit

npm i https://pkg.pr.new/@tiptap/starter-kit@7124

@tiptap/vue-2

npm i https://pkg.pr.new/@tiptap/vue-2@7124

@tiptap/vue-3

npm i https://pkg.pr.new/@tiptap/vue-3@7124

@tiptap/static-renderer

npm i https://pkg.pr.new/@tiptap/static-renderer@7124

commit: 5859c22

@bdbch bdbch requested a review from Copilot December 4, 2025 22:24
Copilot finished reviewing on behalf of bdbch December 4, 2025 22:28
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR fixes a bug in the Code extension where typing a letter followed by backtick-enclosed text (e.g., ab``) would cause the preceding character to be consumed. The fix updates the input and paste regular expressions to match the pattern used consistently across other Mark extensions (Bold, Italic, Strike, Highlight).

Key changes:

  • Modified regex patterns to require whitespace or start-of-line before backtick markers
  • Added negative lookaheads to prevent matching when spaces surround backticks
  • Aligned Code extension behavior with other Mark extensions

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
packages/extension-code/src/code.ts Updated inputRegex and pasteRegex to use the standard Mark extension pattern `(?:^
.changeset/ninety-humans-raise.md Added changeset documenting the fix for inline code removing preceding characters

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +40 to +44
export const inputRegex = /(?:^|\s)(`(?!\s+`)((?:[^`]+))`(?!\s+`))$/
/**
* Matches inline code while pasting.
*/
export const pasteRegex = /(^|[^`])`([^`]+)`(?!`)/g
export const pasteRegex = /(?:^|\s)(`(?!\s+`)((?:[^`]+))`(?!\s+`))/g
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

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

The updated regex patterns should have test coverage similar to the Bold extension. Consider adding a test file at packages/extension-code/__tests__/code.spec.ts to verify:

  1. The new regex correctly matches backtick-enclosed text when preceded by whitespace or at start of line
  2. The regex correctly rejects cases without proper whitespace (addressing the original bug where "a`b`" consumed the "a")
  3. Both inputRegex and pasteRegex match expected patterns

Example test structure (following Bold extension's pattern):

import { inputRegex, pasteRegex } from '@tiptap/extension-code'
import { describe, expect, it } from 'vitest'

describe('code regex test', () => {
  it('input regex matches code with space before', () => {
    expect(' `Test`').toMatch(inputRegex)
  })
  
  it('input regex matches code at start', () => {
    expect('`Test`').toMatch(inputRegex)
  })
  
  it('paste regex matches', () => {
    expect('`Test`').toMatch(pasteRegex)
  })
})

Copilot uses AI. Check for mistakes.
@bdbch
Copy link
Member

bdbch commented Dec 4, 2025

What I wonder is if we can somehow fix this without requiring an additional whitespace before the inline code.

@bdbch bdbch self-assigned this Dec 4, 2025
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.

Inline code removes previous character

2 participants