Ckeditor5: Enable "tab" key

[Suraj151]

when ckeditor5 will release their official tab key feature ?

[jodator]

official tab key feature

Could you write more? What would you like that Tab key do?

The tab is already supported in some of editor's features.

[Suraj151]

i mean when we are in paragraph text then on tab can we add "\t" to paragraph (or something like indent feature so that we can move text line to right by "\t" or no. of spaces ).

[dkrahn]

It could have some configuration on what should happen.
But having it mapped to the \t would great.

[Suraj151]

yes @dkrahn

and that's my current/urgent (since i already chose ckeditor5 for our website and i can not leave it in between) requirement to have it in editor.

with some try/trick and logic somehow i able to enable it by both way ( one is with toolbar button like indent and another one with tab key event listener ) and it working fine for me now.

but still i don't know the correct way to do it since their are many listeners working at the same time which operate conditionally on prev, current/next states.

for now this trick works but i'll wait for complete tab support in next official release.

[Reinmar]

Isn't it a problem that the \t character will not be rendered by a browser in the default setting of white-space? What HTML do you think the editor should produce?

I'll add that in CKE4 Tab by default inserts a configurable number of spaces. Would that be reasonable for you?

Or would it be better if Tab set the margin-left (via an inline style or a class) of the current paragraph instead of inserting anything?

[scofalik]

There's also text-indent property: https://www.w3schools.com/cssref/pr_text_text-indent.asp

[Suraj151]

@Reinmar @scofalik
it would be better if we change/set/enable the default white space setting to pre (at least for the code-block). since it is the mostly preferred/expected behaviour (as per me) of having \t (on tab key press) while writing codes (and paragraphs too).

no. of spaces option

CKE4 Tab by default inserts a configurable number of spaces.

or as @scofalik say

text-indent property: https://www.w3schools.com/cssref/pr_text_text-indent.asp

either we can use for paragraph, but for code-blocks we need to enable \t. ( actually i am using pre code-block to enable longer code/program writing feature for editor and its my company requirement for editor to have \t on tab key while writing program/code. so it is just like if ckeditor5 enable \t by default then it will remove my overhead tricks to enable it ) .

its just my suggestion.

[Reinmar]

actually i am using pre code-block to enable longer code/program writing feature for editor and its my company requirement for editor to have \t on tab key while writing program/code

That should be handled by your plugin, then. The editor would need to guess whether you're in a preformatted text or in a normal paragraph. That semantics is not available in the model and might need to be obtained from the view, but I'd like if we avoided that cause it may not be reliable. Plus, we'd never know whether one wants to insert tabs or spaces and how many.

So, if you're implementing a code block feature, you should handle the Tab key in it.

The editor may by default only handle Tab as in a normal text. And it's still an open topic what should that do.

[Suraj151]

but I'd like if we avoided that cause it may not be reliable. Plus, we'd never know whether one wants to insert tabs or spaces and how many.

sure, it was just suggestion.

currently to fulfill office requirement i managed \t with below things.

        const editor = this.editor;
        const view = editor.editing.view;
            const viewDocument = view.document;

        viewDocument.on( 'keydown', ( evt, data ) => {

            if( (data.keyCode == keyCodes.tab) && viewDocument.isFocused ){

                       // with white space setting to pre  
                editor.execute( 'input', { text: "\t" } );
               // editor.execute( 'input', { text: "     " } );

                evt.stop(); // Prevent executing the default handler.
                data.preventDefault();
                view.scrollToTheSelection();
            }

        } );

we can replace \t by no. of spaces too but when user press back then its notable difference that he/she needs to press no. of times back button to delete one tab spaces.

[Reinmar]

Another TC: #6724 (pasting text with \t characters).

[Suraj151]

@Reinmar can we able to create a soft tab model element which will act as fixed character \t text node in view and vice versa ?
Currently we have fulfilled this with number of spaces. So it's not that much big issue. But then developer's habit of using tab in their editors make them little uncomfortable while writing code blocks example in our web editors.

But till now whatever ckeditor5 team had done is great...! Thanks to all of you