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.):
- Manual Copy-Paste
Simply highlighting the AI response in our chat window and pasting (via Cmd + V / Ctrl + V) into OnlyOffice.
- 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);
}
};
- 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!