Fix: Strip formatting when pasting into builder title fields

[faisalahammad]

Summary

This PR fixes an issue where pasting formatted text into Lesson, Quiz, or Section title fields in the Course Builder retains HTML formatting instead of converting to plain text.

Fixes #3057

---

Problem

When users copy text from external sources like Microsoft Word, Google Docs, or web pages and paste it into builder title fields, the HTML formatting (bold, colors, fonts, etc.) is preserved. This creates unexpected styling in titles that should be plain text.

Why This Happens

The Course Builder uses the _Editable.js mixin to handle inline editing. This file already has a paste handler that strips formatting:

// The existing paste event only targets elements WITH data-formatting attribute
'paste .llms-input[data-formatting]': 'on_paste',

The on_paste function correctly extracts plain text from clipboard:

on_paste: function( event ) {
    event.preventDefault();
    event.stopPropagation();
    var text = ( event.originalEvent || event ).clipboardData.getData( 'text/plain' );
    window.document.execCommand( 'insertText', false, text );
},

The problem: Title inputs in builder templates do NOT have the data-formatting attribute, so the paste event never fires for them.

Affected Templates

Template File	Element	Has data-formatting?
lesson-settings.php	Lesson Title	No
quiz.php	Quiz Title	No
section.php	Section Title	No
question-choice.php	Question Choice	Yes (works correctly)

---

Solution

Add a second paste event that targets contenteditable .llms-input elements that do NOT have the data-formatting attribute.

Before

events: {
    // ... other events
    'paste .llms-input[data-formatting]': 'on_paste',
},

After

events: {
    // ... other events
    'paste .llms-input[data-formatting]': 'on_paste',
    'paste .llms-input[contenteditable]:not([data-formatting])': 'on_paste',
},

---

How It Works

1. Elements with data-formatting: Continue to work as before. The paste handler strips all tags except allowed ones (like b, i, u).

2. Elements without data-formatting (title fields): Now also trigger the paste handler, which extracts plain text using clipboardData.getData('text/plain') and inserts it without any HTML.

The selector [contenteditable]:not([data-formatting]) ensures we only target editable fields that should receive plain text.

---

Testing Instructions

Manual Testing

1. Go to WordPress Admin > Courses > Edit any course > Course Builder

2. Test Lesson Title:

   • Click on a lesson to open the sidebar
   • Copy formatted text from Word or a webpage (text with bold, colors, etc.)
   • Paste into the Lesson Title field
   • Expected: Plain text appears without formatting

3. Test Quiz Title:

   • Open quiz editor
   • Paste formatted text into Quiz Title
   • Expected: Plain text appears

4. Test Section Title:

   • Click on a section header to edit
   • Paste formatted text
   • Expected: Plain text appears

5. Regression Test - Question Choices:

   • Add a quiz question with choices
   • Paste formatted text into a choice field
   • Expected: Basic formatting (bold, italic) should still work as these have data-formatting attribute

How to Get Formatted Text for Testing

• Copy text from Microsoft Word with bold/italic styling
• Copy colored text from any webpage
• Or use browser console: Right-click element > Inspect > Copy outer HTML

---

Technical Details

File Changed

assets/js/builder/Views/_Editable.js

Change Size

• 1 file changed
• 3 insertions (+), 1 deletion (-)

Backward Compatibility

This change is fully backward compatible:

• No changes to existing functionality
• No changes to PHP templates
• No database changes
• Elements with data-formatting continue to work exactly as before

---

Related Issues

• Fixes Pasting formatted text into Lesson Title #3057

Changelog Entry

+ Added paste event handler for builder title fields to strip HTML formatting when pasting from external sources.

[brianhogg]

@faisalahammad This also seems to work well.

Could you remove the "mark complete" changes from this PR?

Also, can a changelog be added to this and the mark complete PR? This can be added with npm run dev changelog add -- -i and entering the following as responses to the questions (note, there needs to be a . at the end of the changelog content)

or manually adding a .yml in the /.changelogs folder, ie.

significance: minor
type: changed
links:
  - "#3057"
attributions:
  - "@faisalahammad"
entry: Strip formatting when pasting into Course Builder title fields.

Thanks!

[faisalahammad]

Hi @brianhogg
Could you please check now and let me know if that works?

[brianhogg]

@faisalahammad Thanks for removing the code from the other PR!

We'll just need to add a yml changelog file here as well, if you're able.

[faisalahammad]

Hi @brianhogg,

I'm a bit confused since this is my first time. Could you please manage it for me or guide me so I can try myself? Thank you!

[brianhogg]

@faisalahammad No problem! We would just need a .yml file similar to the one added in the other PR:

https://github.com/gocodebox/lifterlms/pull/3092/changes#diff-c45dc3c6f207823f2779254911937534f9978de6606863eab4695251085237a9

I don't believe I'm able to push this up on your PR. If it's not added no worries, I can make a note to add it if/when the PR is merged into dev. Thanks again!

[faisalahammad]

Hi @brianhogg,
I've added the changelog file (.changelogs/3093.yml) to the PR. Could you please review and let me know if everything looks good? Thanks!