feat(html): the sheet editor formats a selection of cells

CHANGELOG.md

@@ -16,6 +16,12 @@ The release run heads these entries with the version and opens a fresh
 
 ## Unreleased
 
+- The sheet editor formats cells. A selection is a rectangle, spanned by a
+  shift click, a shift arrow, a mouse drag or a header click, and
+  `odr.editing.format` and `toggle` take `fill` and `align` beside the text
+  keys. `onSelectionChange` reports what the selected cells agree on. One
+  gesture is one undo step, and the log holds one `setCellStyle` op per cell.
+
 - A cell of an ods or xlsx file takes a style: `Sheet::set_cell_style` and
   the `setCellStyle` op write the fill, the horizontal alignment, and bold,
   italic, underline, strikethrough, colour and size.

docs/design/spreadsheet-editing.md

@@ -195,8 +195,8 @@ separate scripts. The coordinates are the ones an op names, never a DOM index.
 
 ## Cell formatting
 
-Status: `.ods` and `.xlsx` write a cell style. The steps land as a stack, in
-this order:
+Status: `.ods` and `.xlsx` write a cell style, and the sheet editor formats a
+selection. The steps land as a stack, in this order:
 
 1. The xlsx reader reads what the writer writes: a solid fill from `fgColor`,
    theme colours with their `tint`, italic, underline and strikethrough, and
@@ -255,17 +255,22 @@ is for a run.
 ### 12. A selection is a rectangle, and the pin is one corner of it
 
 `spreadsheet.js` owns it as it owns the pin: shift with a click or an arrow
-key, and a drag with a mouse, span it from the pin. `odr.sheet.selection()`
-answers `{columns: [first, last], rows: [first, last]}`, and a header click
-selects its row or its column across the rendered extent. The editor reports
-the keys the selected cells agree on through `onSelectionChange`, as the
+key, and a drag with a mouse in the editing mode, span it from the pin.
+`odr.sheet.selection()` answers `{columns: [first, last], rows: [first, last],
+focus}`, `odr.sheet.select(position)` moves the focus, and a header click
+selects its row or its column across the rendered extent. Ctrl or Cmd with B,
+I and U toggle, where the config gives the scripts the shortcuts. The editor
+reports the keys the selected cells agree on through `onSelectionChange`, as the
 document editor does, and `odr.editing.format` and `toggle` act on every
 unlocked cell of it. A lock refuses a value, not a style.
 
 The editor patches the `td` and the text inside it with the declarations the
 renderer writes, and a fill also sets `--odr-dark-fill` with the same mapping
-as `html::dark_fill`, so a fill made in the dark scheme shows. Undo holds each
-cell's inline style before the gesture, and one gesture is one undo step.
+as `html::dark_fill`, so a fill made in the dark scheme shows. The renderer
+writes `--odr-fill` beside it, so the editor reads a cell's fill back in the
+dark scheme too. `html_common` and `formatting.html` pin the same colours.
+Undo holds each cell's inline style before the gesture, and one gesture is one
+undo step.
 
 ## Formulas, read side
 

src/odr/internal/html/document_style.cpp

@@ -392,6 +392,8 @@ html::translate_table_cell_style(const TableCellStyle &table_cell_style,
     if (dark_fill) {
       result.append("--odr-dark-fill:")
           .append(color(html::dark_fill(*background_color)))
+          .append(";--odr-fill:")
+          .append(color(*background_color))
           .append(";");
     }
   }

src/odr/internal/html/document_style.hpp

@@ -52,7 +52,8 @@ std::string
 translate_table_column_style(const TableColumnStyle &table_column_style);
 std::string translate_table_row_style(const TableRowStyle &table_row_style);
 /// With @p dark_fill a fill also carries `--odr-dark-fill`, the color
-/// `document-dark.css` paints the cell with.
+/// `document-dark.css` paints the cell with, and `--odr-fill`, the one it
+/// hides.
 std::string translate_table_cell_style(const TableCellStyle &table_cell_style,
                                        bool dark_fill);
 std::string translate_drawing_style(const GraphicStyle &graphic_style);

src/odr/internal/html/frontend/editing.js

@@ -154,8 +154,9 @@
     },
 
     /// States @p style on the selection: `bold`, `italic`, `underline`,
-    /// `strikethrough` (a bool), `highlight` (`#rrggbb` or null), `color`
-    /// (`#rrggbb`), `size` (`14pt`). False where refused; the channel says why.
+    /// `strikethrough` (a bool), `color` (`#rrggbb`), `size` (`14pt`), and
+    /// `highlight` (`#rrggbb` or null) on text, `fill` (the same) and `align`
+    /// (`left`, `center`, `right`) on cells. False where refused.
     format: function (style) {
       for (var i = editors.length - 1; i >= 0; --i) {
         if (typeof editors[i].format === "function") {