Content Not Refreshed Correctly when Modifying Pasted Content in Callbacks

[chadrschroeder]

Fixes #1103.

When pasting plain text content or a URL, if you modify the content in a trix-change or trix-paste callback, the changes aren't reflected in the editor after the paste is finished. The changes are reflected later if you start to type in the editor.

This pull request updates how the render is performed to match other areas like this.

[danielnc]

Bump to see what are the plans to get this merged and/or a workaround based on issue #1103

[jondkinney]

I'm seeing this as well and have a feature where I want to copy some text from a spot in my UI and paste it into Trix to be processed as another instance of an existing ContentAttachment. However, because of this bug, it doesn't work until you press space or type another character, as described above.

I ended up working around this by having the copy feature write HTML to the clipboard even though I really only need plain text. For whatever reason Trix does process the paste with HTML properly.

function copyDateTag(button) {
  const taskDiv = button.closest('.task-date-tag');
  const pastableString = taskDiv.querySelector('.pastable-date-tag-string');
  
  const content = `${pastableString.textContent.trim()}`;
  
  // Need to use HTML because if you paste plain text into Trix it will not
  // process the pasted content as a ContentAttachment until another char
  // is pressed. See https://github.com/basecamp/trix/pull/1107
  const clipboardItem = new ClipboardItem({
    'text/html': new Blob([content], { type: 'text/html' }),
    'text/plain': new Blob([content], { type: 'text/plain' })
  });

  navigator.clipboard.write([clipboardItem])
    .then(() => {
      // Update button text while preserving the icon
      const originalText = button.innerHTML;
      const icon = button.querySelector('svg').outerHTML;
      button.innerHTML = `${icon} Copied!`;
      setTimeout(() => {
        button.innerHTML = originalText;
      }, 2000);
    })
    .catch(error => console.error('Failed to copy:', error));
}

But it'd be nice to get this one merged!