How to insert text programatically in RichText/Markdown editor with undo-history?

[Bernd]

Hi - in our app we use your RichTextEditor in Markdown - mode. We have some custom functionality where we generate custom tags and want to insert those in the markdown text.
The inserting works well with something like this:

const textArea = this.rteObj.contentModule.getEditPanel() as HTMLTextAreaElement;
textArea.value = ...

but this manipulation does not appear in the undo/redo history.
The RhichTextEditor API offers a method executeCommand() which should do exactly this, but unfortunately the documentation say that this useful method is not implemented for the Markdown-Editor...
https://ej2.syncfusion.com/angular/documentation/rich-text-editor/exec-command/

The officially deprecated but still supported javascript feature document.execCommand() also does not work - it inserts the text but undo/redo history is broken (see also https://www.syncfusion.com/forums/173394/undo-redo-in-richtext-markdown-editor-breaks-when-pasing-text )

document.execCommand('insertText', false, imageTag); // broken undo/redo history

How can I insert text programatically into the Markdown Editor with correct undo/redo history?

[Indrajith Srinivasan]

Hi Bernd,

Greetings from Syncfusion support,

We have already considered “Support for 'ExecuteCommand' public method in Rich Text Editor 'Markdown' mode” as a feature request from our end and logged the report for the same, the feature will be included in any of the upcoming releases. 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/33225/

Regards,

Indrajith

[Bernd]

I've found it out myself. Of course this was not officially documented anywhere in your documentation, I've "accidentally" found it in the code while stumbling through the Stackblitzes of your examples, so: why is this not documented?

Regarding your documentation: I've stumbled over lots of dead links or wrong links (e.g. clicking on the "open in new window" icon in the example below and landing on a page about the data grid etc...).

The final hint I've found in the code of this example: https://ej2.syncfusion.com/angular/demos/?_gl=1*1bw290r*_ga*MTQxMDI0NjYwOS4xNjI2MTgyODg0*_ga_WC4JKKPHH0*MTY0NjY2MjAyMi4yMS4xLjE2NDY2NjMxOTcuMA..&_ga=2.182009315.591030263.1646639733-1410246609.1626182884#/material/rich-text-editor/insert-special-characters

Digging into the code of your example - especially your onInsert() method: Am I right that executeCommand() ​alone wouldn't have solved the issue? ...and that I have to maintain the undo/redo history by hand ?

So the solution I've found for the markdown-editor is something like this:

<ejs-richtexteditor

#mdDefault

[formatter]='formatter'

...

(created)='onMarkdownEditorCreated()'

>ejs-richtexteditor>

@ViewChild('mdDefault')

private rteObj: RichTextEditorComponent;

private textArea: HTMLTextAreaElement;

public formatter: MarkdownFormatter = new MarkdownFormatter({ listTags: { 'OL': '1., 2., 3.' } });

public onMarkdownEditorCreated(): void {

this.textArea = this.rteObj.contentModule.getEditPanel() as HTMLTextAreaElement;

...

}

public insertTextIntoMarkdown(insertText: string) {

// 1) init undo/redo - stack from the formater and save state BEFORE the insert // Where is getUndoRedoStack() and saveData() documented ? // a fulltext-search in syncfusion-documentation found only an article about file-upload...

if (this.rteObj.formatter.getUndoRedoStack().length === 0) {

this.rteObj.formatter.saveData();

}

// 2) insert text (by direct DOM manipulation...)

this.textArea.value = this.insert( this.textArea.value, insertText, this.textArea.selectionStart, this.textArea.selectionEnd);

// 3) save undo-step AFTER the insert

this.rteObj.formatter.saveData();

this.rteObj.formatter.enableUndo(this.rteObj);

}

private insert(target: string, insert: string, start: number, end?: number) {

const textBefore = target.substring(0, start);

const textAfter = target.substring(end || start);

return textBefore + insert + textAfter;

}

[Vinitha Jeyakumar]

Hi Bernd,

We are glad that you have found the solution for your requirement. We will also include this information in our documentation, and it will be published in live soon.

Can you please share the link, where you faced wrong or dead links. It will be helpful for us to modify and update the changes in documentation.

Regards,

Vinitha

[Bernd]

Hi - regarding the dead links in the documentation - it turned out that this was a strange behavior of my chrome-Browser.
When I've clicked on a link of your documentation, the browser redirected me on a Link that has a "aspnetcoretest" inserted into the original URL which then led led to a dead link.

I've analyzed the network traffic and saw that there were two requests:

• the first request was the original request. it returned a "303" state (which means "see other") and in the response-header there was a redirect-URL that contained the additional "aspnetcoretest" part.
• the second request was the redirect-url which led to a dead link.

Analyzing the first request a little further I saw that in the response status was also the remark "(from disk cache)" - unfortunately I did not take a screenshot from that.

After clearing the browser cache in Chrome everything worked as it should...

Still there are missleading links and important parts that are not documented, I'll return on those later.

cheers,

Bernd

[Buvana Sathasivam]

Hi Bernd, 

Thanks for sharing your information. 

We are regularly updating our documentation, as you mentioned the old content might have cached in your end. Hence clearing the cache resolved the issue. We will wait to hear from you about misleading links and important parts not documented. 

Regards, 

Buvana S