如何将大量文本发送到 contenteditable="true" 元素中？

Question

UPDATE:

After some more research, I realized I can ask this question in a more specific manner: How do I send a large amount of text into a contenteditable="true" element?

---

I am working with a website that has an API but it doesn't have any endpoints that can edit content. This API limitation prevents my release process from being automated. As a workaround, I've tried to automate the tasks with a headless browser.

One of these tasks involves editing the content in a rich text editor. This rich text editor does not have any input elements, so this isn't as simple as changing the value of something. The HTML looks similar to this:

You can look at the source of this rich text editor here: https://www.slatejs.org/examples/richtext

I've tried using some puppeteer code (I don't care if the solution to this answer is puppeteer or not) to solve this problem. It works, but it's far too slow: I've got 30k of text to send to the editor, so await page.keyboard.type(stdin, {delay: 0}); takes well over ten minutes to run. Here is my code:

export const edit = async () => {
  const browser = await launch({ headless: false });
  const page = await browser.newPage();
  try {
    await page.setUserAgent(
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0'
    );
    await page.goto('https://www.slatejs.org/examples/richtext');
    await page.waitForSelector('[data-slate-string="true"]');
    await page.click('[data-slate-string="true"]');
 
    // select all
    await page.keyboard.down('Control');
    await page.keyboard.press('a');
    await page.keyboard.up('Control');

    // clear everything in the rich text editor
    await page.keyboard.press('Backspace');

    // type in new content
    await page.keyboard.type(aLargeAmountOfText, {delay: 0}); // this takes over 10 minutes!  
  } finally {
    await page.screenshot({ path: 'example.png' });
    await browser.close();
  }
};

One thing that would work (in theory), is to automate copying and pasting the text into the editor. I really don't want to go down this path, because I tend to do other things while I release. If my script modifies my clipboard (or I modify it) while it's running, it could have unpredictable results.

What's the quickest way of sending a large amount of text to a rich text editor that has no input elements? I don't care what automation tool is used (I'd prefer node.js, if possible), or what tricks I have to use, so long as I can figure out how to answer this question.

Answer 1

You might try it with page.$eval :

export const edit = async () => {
  const browser = await launch({ headless: false });
  const page = await browser.newPage();
  try {
    await page.setUserAgent(
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0'
    );
    await page.goto('https://www.slatejs.org/examples/richtext');
    await page.waitForSelector('[contenteditable="true"]');
    await page.$eval('[contenteditable="true"]', (e) => e.textContent = aLargeAmountOfText);
  } finally {
    await page.screenshot({ path: 'example.png' });
    await browser.close();
  }
};

Answer 2

OK, this was so hard to figure out. Here it is:

    await page.goto(url);

    const richTextEditorSelector = '[contenteditable="true"]';
    await page.waitForSelector(richTextEditorSelector);
    await page.focus(richTextEditorSelector);

    // select all
    await page.evaluate(() => {
      return Promise.resolve(document.execCommand('selectAll'));
    });

    const pasteReplacementText = `
const dataTransfer = new DataTransfer();

function dispatchPaste(target) {
  // this may be 'text/html' if it's required
  dataTransfer.setData('text/plain', \`${replacementText}\`);

  target.dispatchEvent(
    new ClipboardEvent('paste', {
      clipboardData: dataTransfer,

      // need these for the event to reach Draft paste handler
      bubbles: true,
      cancelable: true
    })
  );

  // clear DataTransfer Data
  dataTransfer.clearData();
}

dispatchPaste(document.querySelectorAll('${richTextEditorSelector}')[0]);
`;

    console.log(`replacementText=

${pasteReplacementText}`); // leaving this here because it may help others troubleshoot
    await page.evaluate(pasteReplacementText);

That complex string tricks the editor into thinking a paste occurred. You supply the data.

Here are some of the sources I used to come up with this:

1. https://stackoverflow.com/a/63643176/61624
2. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
3. https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent
4. https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pageevaluatepagefunction-args
5. https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand