Best Practices for Retaining Formatting When Pasting AI Responses in OnlyOffice

Description:
I am integrating OnlyOffice into my web application to render and edit DOCX files. Additionally, I have an AI chat assistant on the side that provides responses in Markdown and HTML format. However, I am facing an issue with maintaining formatting when users paste AI-generated responses into the OnlyOffice editor using Cmd + V (or Ctrl + V).

Issues:

  1. The AI responses come in Markdown format and are also available as HTML with proper tags (e.g., <h2>, <strong>, <ul>).
  2. I can successfully get the selected text in HTML format when copying from OnlyOffice. However, when I try to pass back an <h2> tag using the Paste HTML API, OnlyOffice does not retain the formatting as expected.
  3. If users paste AI responses manually, the formatting (headings, bold, lists, etc.) is lost.

Questions:

  1. What is the best approach to preserve Markdown or HTML formatting when pasting into OnlyOffice?
  2. Are there specific configurations or APIs that allow me to insert formatted content properly?
  3. How can I ensure that the Paste HTML API maintains heading, bold, and list formatting when injecting AI responses?

Any guidance or best practices from the OnlyOffice team or community would be greatly appreciated!

Thanks!

Hello @leandro
We are checking the described scenario, I will contact you shortly.

Dear @leandro
Could you please provide a sample of the Markdown content you’re pasting and explain exactly how you’re converting it to HTML before inserting it via the pasteHTML method?

Hi, below is an example of the markdown and html content I am pasting, edited_text field contains the markdown and html_content the HTML

{
    "edited_text": "### High-Level Description\n\n#### Overview\nThis process facilitates the efficient creation of multiple journal entries in NetSuite through the use of CSV imports. It offers flexibility by allowing users to either separate or consolidate records based on external IDs, thereby accommodating varying subsidiary requirements, currency options, and classification segments. By enabling direct mapping of CSV data to NetSuite fields, this process minimizes manual data entry while effectively managing financial transactions across various domains such as inventory adjustments and pricing changes.",
    "html_content": "<h3 style=\"box-sizing: inherit; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">High-Level Description</h3>\n<h4 style=\"box-sizing: inherit; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">Overview</h4>\n<p style=\"box-sizing: inherit; color: rgba(0, 0, 0, 0.87); font-family: -apple-system, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">This process facilitates the efficient creation of multiple journal entries in NetSuite through the use of CSV imports. It offers flexibility by allowing users to either separate or consolidate records based on external IDs, thereby accommodating varying subsidiary requirements, currency options, and classification segments. By enabling direct mapping of CSV data to NetSuite fields, this process minimizes manual data entry while effectively managing financial transactions across various domains such as inventory adjustments and pricing changes.</p>\n"
}

Methods Used to Insert Content into OnlyOffice

We have tried several approaches, all of which strip or alter the formatting in a random way (i.e., headings end up as normal text, lists lose bullet points, change of font size, change of font family, change of font color, etc.):

  1. Manual Copy-Paste

Simply highlighting the AI response in our chat window and pasting (via Cmd + V / Ctrl + V) into OnlyOffice.

  1. Programmatic Copy to Clipboard and Paste

We use a function that sets both text/plain and text/html formats on the clipboard, then the user pastes into OnlyOffice:

const copyToClip = (markdownText, htmlText) => {
  const listener = (e) => {
    e.preventDefault();
    e.clipboardData?.setData('text/html', htmlText);
    e.clipboardData?.setData('text/plain', markdownText);
  };

  document.addEventListener('copy', listener);
  try {
    document.execCommand('copy');
  } finally {
    document.removeEventListener('copy', listener);
  }
};
  1. Using PasteHtml Method

We also attempted using the OnlyOffice PasteHtml API call as follows and even simply getting the selected text as HTML using ConvertDocument method and then pasting it right away using PasteHtml, it change completely the formatting and in this scenario is just a text without using the AI chat, here we are simply getting the HTML using Onlyoffice API and pasting it back right away and this also changes the formatting

connector.callCommand(
  () => {
    // Convert the current selection to HTML
    const sHtml = Api.ConvertDocument('html', true, true, true, true);
    return sHtml;
  },
  (sHtml) => {
    console.log(sHtml);
    connector.executeMethod('PasteHtml', [sHtml]);
  }
);

Our goal is to reliably preserve the formatting when pasting the response from the AI

Do you have any recommendations or best practice on how to achieve this?

Thanks!

Hello @leandro
Please provide us with the original .md file without converting its content into line.

Hi @Alexandre there is no original md file, is just this, we chat with a LLM and they respond back with this

Hello @leandro
Understood, it seems that the situation is related to .md and their conversion. I’ve attached a sample of .md to html conversion to this post. Please try to use it as a guideline: markdowntohtml.html - Google Drive