editor-js / header

Header Tool for Editor.js 2.0
MIT License
96 stars 122 forks source link

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

Open shankardevy opened 3 years ago

shankardevy commented 3 years ago

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
      }
    },
    }
  2. Create a header but do not enter any text
  3. Move to next block and you will see the the placeholder "Enter a header" now as it's empty.
  4. 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.
  5. 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.

Jak-Ch-ll commented 3 years ago

I created a pull-request to fix it.

In the meantime, you can add the following code into your own css as a workaround:

.ce-header[contentEditable="true"][data-placeholder]::before {
  pointer-events: none;
}