Skip to content

fix(surround): allow multiple inline code spans in the same block#48

Open
AnthoHansen wants to merge 1 commit into
editor-js:masterfrom
AnthoHansen:fix/issue-46-multiple-inline-code
Open

fix(surround): allow multiple inline code spans in the same block#48
AnthoHansen wants to merge 1 commit into
editor-js:masterfrom
AnthoHansen:fix/issue-46-multiple-inline-code

Conversation

@AnthoHansen
Copy link
Copy Markdown

Problem

Since v1.5.2, applying inline code to a second non-contiguous selection within the same block silently does nothing. The surround method uses querySelector(this.tag) on the parent element to check if any <code> already exists in the block — if it does, the wrap() call is skipped entirely.

Root cause

// Before (broken)
const existingCodeTag = range.commonAncestorContainer.parentElement?.querySelector(this.tag);
if (!existingCodeTag) {
  this.wrap(range);
}

This 'existingCodeTag' guard introduced in 1.5.2 prevents applying inline code to a second non-contiguous selection when the block already contains a <code> element to prevent nested <code> elements, but the check is too broad, it fires even when the existing <code> is in a completely different part of the block. The check short-circuits via querySelector, silently doing nothing instead of wrapping the new selection.

Fix

Remove the block-level guard. The selection-level check (findParentTag) already handles the toggle correctly — if the cursor is inside an existing <code> it unwraps; otherwise it wraps. No additional check is needed.

// After (fixed)
if (termWrapper) {
  this.unwrap(termWrapper);
} else {
  this.wrap(range);
}

Testing

  1. Create a paragraph block
  2. Select a word → apply inline code ✅
  3. Select a different word in the same block → apply inline code ✅ (was broken in 1.5.2)
  4. Click inside an existing <code> span → apply inline code removes it ✅

Closes Issue #46

…spans (editor-js#46)

The previous fix for editor-js#44 used parentElement.querySelector() to detect
existing <code> elements in the block, but this was too broad: it
blocked wrapping any new selection as long as any <code> existed
anywhere in the block, breaking the ability to apply inline code to
multiple non-contiguous selections (editor-js#46).

The correct scope for the check is the selection itself, not the
whole block. Using range.cloneContents().querySelector() only inspects
what the user has actually selected:

- If the selection contains an existing <code> → skip wrap (prevents editor-js#44)
- If the selection is clean, even if other <code> exist elsewhere
  in the block → wrap as normal (fixes editor-js#46)

Closes editor-js#46
@AnthoHansen AnthoHansen force-pushed the fix/issue-46-multiple-inline-code branch from b2268b6 to bcf29a5 Compare May 27, 2026 13:03
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.

1 participant