Skip to content

.autofocus doesn't set focused style #1124

Closed
@djulien

Description

In the EditorJS constructor, setting config.autofocus = true does not set the style of the first block to "ce-block--focused". (This is important for apps that use CSS to highlight the block having the focus).

Steps to reproduce:

  1. new EditorJS() with config {autofocus: true}

Expected behavior:
The first block has the cursor and the focus style.

Device, Browser, OS:
Firefox 75.0, Ubuntu 20.04 (but this doesn't matter)

Editor.js version:
2.17.0/2.18.0

The fix is to insert a line after setting the caret in ./src/compoents/core.ts, as shown below:

          if ((this.configuration as EditorConfig).autofocus) {
            const { BlockManager, Caret } = this.moduleInstances;

            Caret.setToBlock(BlockManager.blocks[0], Caret.positions.START);
//add this line:
            BlockManager.blocks[0].focused = true; //also turn on editor icon and styling -DJ

I forked the source code, made the change, rebuilt and tried a quick test and it seemed to work/didn't seem to break anything. However, there were "out of date" messages and several warnings during the build so I probably shouldn't create a branch and PR. The actual change would be as follows:

@@ -87,6 +87,7 @@ export default class Core {
             const { BlockManager, Caret } = this.moduleInstances;
 
             Caret.setToBlock(BlockManager.blocks[0], Caret.positions.START);
+            BlockManager.blocks[0].focused = true; //also turn on editor icon and styling -DJ
           }

thanks.

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions