[w3c/editing] Spec: Empty addressable content fields with placeholders (Issue #528)

michael created an issue (w3c/editing#528)

Here's a proposal for an official recommendation (spec?) to create "empty addressable content fields with placeholders" inside a contenteditable.

Recommended markup for making an element addressable with the caret:

```html
<div contenteditable="true">
  <p><br></p>
</div>
```

Why?
- the `<br>` element ensures there's a single addressable caret position. If you added a zero-width-space instead, or any other character, you'd end up with two addressable caret positions.
- most editors are already handling it this way (e.g. ProseMirror `<p><br class="ProseMirror-trailingBreak"></p>` 


To add a placeholder, use an `empty` class and a `placeholder` attribute  and CSS to display it:

```html
<div contenteditable="true">
  <p class="empty" placeholder="Enter text"><br></p>
</div>
```

```css
[contenteditable="true"] [placeholder].empty::before {
  color: #ccc;
  content: attr(placeholder);
}
```

Considerations:
- In my opinion `<div></div>` without the `<br>` **should not be addressable** with the caret.
  - When developing editors very often those leaf-nodes become addressable accidentally.
  - Already some browsers skip caret positions here, with keyboard movement. See #500
  - however, this may break some existing apps, that rely on `<div></div>` being addressable (though that doesn't work in all browsers)

Known issues (only related to placeholder rendering/behavior):

- https://github.com/w3c/editing/issues/523
- https://github.com/w3c/editing/issues/501
- https://github.com/w3c/editing/issues/502
- https://github.com/w3c/editing/issues/523
- https://github.com/w3c/editing/issues/498
- https://github.com/w3c/editing/issues/499 (this would become a non-issue if the placeholder rendering issue were all resolved)

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/editing/issues/528
You are receiving this because you are subscribed to this thread.

Message ID: <w3c/editing/issues/528@github.com>