Preprocess text while (editing)

[nikitalarionov]

Hello everyone.

I just trying to do simple thing with text, while editing the text.

For example imagine that we have outside from editor a function preProcess(text) which just does return text + "a"; It can be typograf library or something else.

I need to call this function before model handles it, and changes will be transformed to view. As suggested on official docs for extend functional in CkEditor, i should create plugin.

As mented about architecture of CkEditor, we have two different layers dataController - which handles input, output data operations. And EditingController which handles changes while you editing.

I tred out to "monkey patch" parse method of processor by decorator function - but it is only works when it begin initialised.

I think i need to look at model level little bit closer, for example: subscribe to model changes, get input text string, preprocess value and throw it next on data pipeline.

It's just simple thing for other editors, but in CKEditor its looks like a hell. I need to look at few thousand rows of code. To solve this problem i need just push myself to understand how system works under hood. But i dont have a time.

Please can anyone help me and explain simple way to achive text preprocessing feature while editing on fly?

💻 Version of CKEditor

CKEditor 5

[Reinmar]

Hi! Could you give a more specific example? When the transformation should happen? When you're typing those characters? Or for all text in the editor, not matter how it's added there (pasting, data loading, deleting a fragment of text so "foxo" becomes "foo" when you try to do s/foo/bar on the whole content)?

Listening on typing can be done via observing the InputCommand#execute event (which is fired when InputCommand#execute() method is executed, cause it's decorated). You can get the input command instance from editor.commands.get( 'input' ).

Fixing all the content and all types of changes on the fly should be done by Document#registerPostFixers().

[nikitalarionov]

Hello again, thanks for fast reaction.

I can give a specific example.

For example we have editor without text. User starts typing new text, adds few words or ending editing line of text.

I need show to user how text is transforming, on the fly, when word, or line is added. For example double quotes is transformed to single. Or dash is transformed to long dash.

Text transforming depends of some rules which is used in our project as element of required typography.

Our user is editor. He need see how text willbe look at finaly variant in CkEditor.

Because text styles and content on frontend side of project will be equal.

I'm worried about perfomance issues if i will replacing all editor text on each one symbol change event.

[scofalik]

It looks like your use case is similar to what we do with autoformatting feature, where, for example, we replace *word* with word.

Maybe you can base your solution on the autoformatting feature or write your own rules.

[scofalik]

Useful link: https://ckeditor.com/docs/ckeditor5/latest/api/module_autoformat_inlineautoformatediting-InlineAutoformatEditing.html#function-constructor

This solution is for a different kind of formatting but maybe it would be possible to use as a first step until you make a more fitted solution?

EDIT: I looked a little into it and AFAICS you could provide your own testing callback. You can see the description in docs. The callback will be passed one parameter - whole text of the parent in which there was typing. So you'd have to run your rule against that text and return correct values. For example, as remove -- range where there was a double dash. For format -- the start offset where long dash should be added.

Then, in third argument of InlineAutoformatEditing you could pass a callback that will insert long dash at the beginning of the valid range.

I didn't try it but it looks like it could work.

If not that, you could try writing a plugin basing on what is available in InlineAutoformatEditing.

[nikitalarionov]

@scofalik @Reinmar Thanks for advices, and good work at CKEditor.

Now i know which parts of editor can help me to implement feature.