header icon indicating copy to clipboard operation
header copied to clipboard

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

Open shankardevy opened this issue 4 years ago • 1 comments

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.

shankardevy avatar Jan 06 '21 06:01 shankardevy

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;
}

Jak-Ch-ll avatar Feb 12 '21 17:02 Jak-Ch-ll