💡Indent inline text on tab key pressed

[yoonwaiyan]

1. Describe a problem. When I press the tab key in a new line, it shows a toolbar but I'd like the text to indent as a nested block.

2. Describe the solution you'd like. Mockups are welcome. It's handy to make the inline text to indent after the tab key is pressed - this behavior can be seen in both Notion and Roam Research. Maybe make key shortcuts configurable to render customized actions?

3. Are there any alternatives? Or make it as an Inline Tool? But as a markdown user I'd prefer to have quick typing without too many keystrokes for styling.

[flaming-cl]

Hi, this might be a solution for your problem:

turn off the editor tab event

You may need to modify the original editor.js code library.

1. add a config to disable the editor/browser tab event editing INTERNAL_SETTINGS at editor.js/src/components/modules/tools.ts

 public get INTERNAL_SETTINGS(): {[name: string]: string} {
    return {
      IS_ENABLED_LINE_BREAKS: 'enableLineBreaks',
      IS_DISABLED_DEFAULT_TAB_EVENT: 'disableDefaultTabEvent', // the new config
      IS_INLINE: 'isInline',
      TITLE: 'title', 
      SHORTCUT: 'shortcut',
      TOOLBOX: 'toolbox',
      SANITIZE_CONFIG: 'sanitize',
      CONVERSION_CONFIG: 'conversionConfig',
    };
  }

2. edit the tabPressed event at editor.js/src/components/modules/blockEvents.ts

    if (tool && tool[Tools.INTERNAL_SETTINGS.IS_DISABLED_DEFAULT_TAB_EVENT]) {
      event.preventDefault();
      return;
    }

3. build the editor.js project, replace the editor.js file in your own project

editing in your own project

4. set disableDefaultTabEvent to be true in your tool class (this can be a Paragraph plugin)

  static get disableDefaultTabEvent() {
    return true;
  }

5. set up your own tab event in the tool class edit the onKeyUp event

if (e.code === 'Tab') {
      this.yourIndentInsertFunction()
}

[yoonwaiyan]

Thanks for your suggestion! I'm wondering is this possible to make it as a feature to eliminate my need to permanently maintaining my own fork.

[flaming-cl]

Thanks for your suggestion! I'm wondering is this possible to make it as a feature to eliminate my need to permanently maintaining my own fork.

Tab indent might be a bit troublesome in a contentEditable div. I tried my own indentInsertFunction. It works well in Chrome but failed in Safari. After inserting indents, the caret is automatically jumping to the end of the block. I did not figure out why this happened. Hope someone could make Tab indent as a feature as well.

[tommiv]

Actually the same problem present when you try to tab a textarea. I've added a custom code block plugin to my application and found it impossible to use tab in it – the keypresses are just hijacked by the editor.js engine.

[christoph-kluge]

I've found this issue https://github.com/codex-team/editor.js/issues/927 which seems to relevant to this issue as well. There is a small code-snippet where I have deactivated the editor.js TAB functionality and use it only while a toolbox is open.

Maybe this can help to catch the tab-event in your custom module. Code reference is here: https://github.com/christoph-kluge/editor.js/commit/405cd85b68736041c6a8c412555a142059587c4d)

[tommiv]

Thank you @christoph-kluge, I have seen this ticket. However, this workaround assumes that I maintain my own copy/fork of editor.js just to apply this patch. I'm afraid this is far from a scalable solution because at least it would be my responsibilty to keep my copy/fork up to date. It would be much better if the option provided by the library itself.

[christoph-kluge]

@tommiv I see. Just wanted to give you an heads up how to achieve it.

In my case I do only update the library every now and then when there is something relevant for me in a new release. In this case my personal effort is fine and I'm trying to add support for my own relevant features.

[evanjmg]

solution above works but backspacing is problematic - the block prior just disappears