w3c / w3c/editing

RFC: Contenteditable "indent"/"outdent" implementations are not aligned with popular editors

Open
#437 10 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
202
Forks
43
PR merge metrics
No merged PRs in 30d

Description

Summary: When a line break is inserted within a block, popular editors treat the text after the line break as part of the same block for the purposes of indentation/quoting. No user agent implementation of the "indent" command is doing this. Should they be?

Web App Editors
Test Case

N.B. This is for editors that support Shift+Enter as a way to create a newline without creating a new block, and have an indent or quote feature.

  1. Type "New block 1"
  2. Press Shift+Enter
  3. Type "New line in block 1"
  4. Press Enter
  5. Type "New block 2"
  6. Move the caret in front of the "N" in "New block 1" (i.e. no text is selected)
  7. Use the editor's indent or quote function
Results
  • Google Docs indents "New block 1" and "New line in block 1"
  • Microsoft 365 Word indents "New block 1" and "New line in block 1"
  • Zoho Writer indents "New block 1" and "New line in block 1"
  • iCloud Pages indents "New block 1" and "New line in block 1"
  • Confluence Pages indents "New block 1" and "New line in block 1"
  • Nuclino indents "New block 1" and "New line in block 1"
  • Coda indents "New block 1" and "New line in block 1"
  • Notion indents "New block 1" and "New line in block 1"
  • WordPress indents "New block 1" and "New line in block 1"
  • Medium indents "New block 1" and "New line in block 1" (Note: Medium's editor won't let you indent without selecting something, so select just the "N" of "New block 1" first.)
Content Editable In User Agents
Test Case
  1. Load data:text/html,<div contenteditable="true"></div><button onclick="document.execCommand('indent', false);">indent</button>
  2. Give the div focus and type "New block 1"
  3. Press Shift+Enter
  4. Type "New line in block 1"
  5. Press Enter
  6. Type "New block 2"
  7. Move the caret in front of the "N" in "New block 1" (i.e. no text is selected)
  8. Click the "indent" button
Results
  • Chromium:
    • Prior to indent: <div contenteditable="true">New block 1<br>New line in block 1<div>New block 2</div></div>
    • Indent only indents "New block 1"
    • Note: I'm locally experimenting with Chromium's indent/outdent feature as part of some bug fixing. It should not be difficult to bring Chromium into alignment with the popular editors IF consensus is that it should be done.
  • WebKit:
    • Prior to indent: <div contenteditable="true">New block 1<br>New line in block 1<div>New block 2</div></div>
    • Indent only indents "New block 1"
  • Gecko:
    • Prior to indent: <div contenteditable="true">New block 1<br><div>New line in block 1</div><div>New block 2<br></div></div>
    • Indent only indents "New block 1"
Questions
  • Would it be a good idea to bring the user agents into alignment with the popular editors?
  • If so, should that be stated in a spec somewhere for interoperability?

Contributor guide

Open the contributing guide

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.

Research direction

Start with the issue's contenteditable data-URL test case and compare the documented Chromium, WebKit, and Gecko results with the editor examples. Read the existing editing specifications or explainers referenced by the repository to determine where indent/outdent behavior could be specified. Done requires a resolved interoperability decision and a clearly scoped specification change, if consensus supports one.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.