When using a placeholder, cursor doesn't appear on a single click

Open
#57 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Start by reproducing the issue in the configured Editor.js header tool using the listed steps, then trace the placeholder click and focus behavior. Done means a single click on “Enter a header” both removes the placeholder and places the cursor so typing is accepted immediately.

Written by the indexing model from the issue text.

Description

Step to reproduce:

  1. Configure editor with a header as below:
  tools: {
    header: {
      class: Header,
      config: {
        placeholder: 'Enter a header',
        levels: [2, 3, 4],
        defaultLevel: 2
      }
    },
}
  1. Create a header but do not enter any text
  2. Move to next block and you will see the the placeholder "Enter a header" now as it's empty.
  3. Now click on "Enter a header" to start typing. Error: The placeholder text vanishes but there is no cursor on the editor to accept text input.
  4. Click again on the blank area where the placeholder text was to have the cursor. Now the header block accepts text input.

Expected behaviour: Clicking on placeholder text should immediately provide a cursor and start accepting text input without requiring the user to click the blank area again.

Dominant language
TypeScript
Stars
115
Forks
123
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from editor-js/header

All issues in editor-js/header

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.