Choose table cell background by apoorv-mishra · Pull Request #10930 · outline/outline

apoorv-mishra · 2025-12-16T11:48:24Z

tommoor · 2025-12-17T12:56:02Z

Some things to work through here – I don't think that combining the menu item for text highlight and cell background color is the right thing to do, it just makes it hard to find and the default colors should be quite different.

Add a separate menu item for "Background" color
It should have much lighter defaults, you can lighten the existing colors by 50% as a good start
"Background" item should be available in the row and column menus
"rainbow" swatch only makes sense when the current selection encompasses multiple background colors, if there is a single cell selected it should show the correct color

Lets see how far this gets us!

Copilot

Pull request overview

This PR adds functionality to allow users to choose background colors for table cells. Users can select from predefined highlight colors or use a custom color picker to set background colors for individual cells, rows, or columns.

Changes:

Added a new color picker component and menu items for applying background colors to table cells
Extended table cell and header schemas to support background mark attributes
Implemented commands to toggle background colors on cells, rows, and columns

Reviewed changes

Copilot reviewed 25 out of 26 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
shared/i18n/locales/en_US/translation.json	Added "Background color" translation string
shared/editor/types/index.ts	Added custom content and preventCloseCondition support to MenuItem; renamed and typed NodeAttrMark interface
shared/editor/queries/table.ts	Added helper functions to check for background marks in cell selections
shared/editor/queries/getMarkRange.ts	Updated type reference from NodeMarkAttr to NodeAttrMark
shared/editor/nodes/TableHeader.ts	Added marks attribute to support background marks
shared/editor/nodes/TableCell.ts	Added marks attribute to support background marks
shared/editor/nodes/Table.ts	Registered new background toggle commands
shared/editor/marks/Highlight.ts	Added lightColors array and toggleHighlight command
shared/editor/lib/table.ts	Added parsing and serialization logic for cell background colors
shared/editor/lib/Extension.ts	Extended CommandFactory to accept options parameter
shared/editor/components/Styles.ts	Added CSS for background-colored cells and updated selection styling
shared/editor/commands/table.ts	Implemented toggle background commands for cells, rows, and columns
shared/editor/commands/link.ts	Updated type references to NodeAttrMark
shared/editor/commands/highlight.ts	New file implementing highlight toggle command for text selections
package.json	Added react-colorful dependency
app/types.ts	Added MenuCustomContent type and preventCloseCondition to MenuItemWithChildren
app/hooks/useDictionary.ts	Added background color to dictionary
app/editor/menus/tableRow.tsx	Added background color menu with color picker for rows
app/editor/menus/tableCol.tsx	Added background color menu with color picker for columns
app/editor/menus/formatting.tsx	Added background color menu for cells; updated highlight visibility logic
app/editor/components/ToolbarMenu.tsx	Added support for custom menu content and preventCloseCondition
app/editor/components/ColorPicker.tsx	New reusable color picker component with hex input
app/editor/components/CellBackgroundColorPicker.tsx	Wrapper component connecting ColorPicker to editor commands
app/components/Menu/transformer.tsx	Added rendering support for custom menu content type
app/components/Icons/CircleIcon.tsx	Added rainbow gradient support for multi-color indication

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-19T16:40:17Z

+      });
+
+    return item.children ? mapChildren(item.children) : [];
+  }, [isOpen, commands]);


The dependency array for useMemo is missing item.children and state, which are both used in the memoization logic. This can cause stale menu items to be rendered when these values change. Add item.children and state to the dependency array.

Suggested change

}, [isOpen, commands]);

}, [isOpen, commands, item.children, state]);

We don't want to update items when the list is open. This prevents the list from re-rendering and hence prevents the color picker from closing.

This PR contains the following updates: | Package | Update | Change | |---|---|---| | [outline/outline](https://github.com/outline/outline) | minor | `1.3.0` → `1.4.0` | --- ### Release Notes <details> <summary>outline/outline (outline/outline)</summary> ### [`v1.4.0`](https://github.com/outline/outline/releases/tag/v1.4.0) [Compare Source](outline/outline@v1.3.0...v1.4.0) #### What's Changed ##### Highlights - New **"Toggle blocks"** allow creating content that is collapsed by default in [#8317](outline/outline#8317) - Table cells can now have a custom background color set in [#10930](outline/outline#10930) - Search results are now highlighted in the document when navigating from search in [#11262](outline/outline#11262) ##### Other improvements - A new Figma integration allows unfurling information about Figma links in documents by [@hmacr](https://github.com/hmacr) in [#11044](outline/outline#11044) - Added support for sorting dates in table columns by [@lucawimmer](https://github.com/lucawimmer) in [#11198](outline/outline#11198) - Document changes made through the API are now synced to clients in realtime in [#11186](outline/outline#11186) - The rate limiter now prefers user ID over ip address for logged in sessions, prevents issues on larger office networks in [#11215](outline/outline#11215) - The markdown importer now supports more file layouts in [#11278](outline/outline#11278) ##### Fixes - Fixed some typos comments and messages by [@NAM-MAN](https://github.com/NAM-MAN) in [#11203](outline/outline#11203) - Fixed an issue where mentions would sometimes break when using drag and drop in a list in [#11208](outline/outline#11208) - The edit diagram control no longer appears in read-only mode in [#11207](outline/outline#11207) - Infinite recursion in `dd-trace` dependency causes memory issues in [#11211](outline/outline#11211) - Imported content now gracefully handles HTTP links in [#11210](outline/outline#11210) - Editor suggestions on mobile now uses a drawer in [#11213](outline/outline#11213) - When importing markdown checkboxes are now supported in table cells in [#11217](outline/outline#11217) - GCS uniform bucket-level access now supported by [@maycuatroi1](https://github.com/maycuatroi1) in [#11222](outline/outline#11222) - Fixed a hanging read stream handle causing excessive memory usage on export in [#11237](outline/outline#11237) - Fixed mermaid diagrams do not render when pasting markdown in [#11243](outline/outline#11243) - Remote edits no longer exit Mermaid editing state in [#11244](outline/outline#11244) - Table row is now inserted correctly with merged first column cells in [#11245](outline/outline#11245) - Allow http\:// loopback redirect URIs for native OAuth apps (RFC 8252) in [#11255](outline/outline#11255) - "Split cell" option now works without accurate selection in [#11256](outline/outline#11256) - Adding text below images is now easier as trailing paragraph is enforcedd by [@RudraPrasad001](https://github.com/RudraPrasad001) in [#11257](outline/outline#11257) - Tooltip in editor toolbar with submenu is now hidden when submenu is open in [#11263](outline/outline#11263) - Non-platform passkeys such as Yubikey and mobile QRcode are now allowed in [#11265](outline/outline#11265) - diagrams.net theme now matches editor theme by [@Twometer](https://github.com/Twometer) in [#11267](outline/outline#11267) - Custom emoji characters are now displayed correctly in TOC in [#11275](outline/outline#11275) - Fixed an issue where the policy for documents restore was too broad in [#11279](outline/outline#11279) - Passkey setup is now available to non-admin users by [@Raphmatt](https://github.com/Raphmatt) in [#11286](outline/outline#11286) #### New Contributors - [@NAM-MAN](https://github.com/NAM-MAN) made their first contribution in [#11203](outline/outline#11203) - [@lucawimmer](https://github.com/lucawimmer) made their first contribution in [#11198](outline/outline#11198) - [@maycuatroi1](https://github.com/maycuatroi1) made their first contribution in [#11222](outline/outline#11222) - [@RudraPrasad001](https://github.com/RudraPrasad001) made their first contribution in [#11257](outline/outline#11257) - [@Twometer](https://github.com/Twometer) made their first contribution in [#11267](outline/outline#11267) - [@Raphmatt](https://github.com/Raphmatt) made their first contribution in [#11286](outline/outline#11286) **Full Changelog**: <outline/outline@v1.3.0...v1.4.0> </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/3546 Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net> Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>

This PR contains the following updates: | Package | Update | Change | |---|---|---| | [outlinewiki/outline](https://github.com/outline/outline) | minor | `1.3.0` → `1.4.0` | --- ### Release Notes <details> <summary>outline/outline (outlinewiki/outline)</summary> ### [`v1.4.0`](https://github.com/outline/outline/releases/tag/v1.4.0) [Compare Source](outline/outline@v1.3.0...v1.4.0) ##### What's Changed ##### Highlights - New **"Toggle blocks"** allow creating content that is collapsed by default in [#8317](outline/outline#8317) - Table cells can now have a custom background color set in [#10930](outline/outline#10930) - Search results are now highlighted in the document when navigating from search in [#11262](outline/outline#11262) ##### Other improvements - A new Figma integration allows unfurling information about Figma links in documents by [@hmacr](https://github.com/hmacr) in [#11044](outline/outline#11044) - Added support for sorting dates in table columns by [@lucawimmer](https://github.com/lucawimmer) in [#11198](outline/outline#11198) - Document changes made through the API are now synced to clients in realtime in [#11186](outline/outline#11186) - The rate limiter now prefers user ID over ip address for logged in sessions, prevents issues on larger office networks in [#11215](outline/outline#11215) - The markdown importer now supports more file layouts in [#11278](outline/outline#11278) ##### Fixes - Fixed some typos comments and messages by [@NAM-MAN](https://github.com/NAM-MAN) in [#11203](outline/outline#11203) - Fixed an issue where mentions would sometimes break when using drag and drop in a list in [#11208](outline/outline#11208) - The edit diagram control no longer appears in read-only mode in [#11207](outline/outline#11207) - Infinite recursion in `dd-trace` dependency causes memory issues in [#11211](outline/outline#11211) - Imported content now gracefully handles HTTP links in [#11210](outline/outline#11210) - Editor suggestions on mobile now uses a drawer in [#11213](outline/outline#11213) - When importing markdown checkboxes are now supported in table cells in [#11217](outline/outline#11217) - GCS uniform bucket-level access now supported by [@maycuatroi1](https://github.com/maycuatroi1) in [#11222](outline/outline#11222) - Fixed a hanging read stream handle causing excessive memory usage on export in [#11237](outline/outline#11237) - Fixed mermaid diagrams do not render when pasting markdown in [#11243](outline/outline#11243) - Remote edits no longer exit Mermaid editing state in [#11244](outline/outline#11244) - Table row is now inserted correctly with merged first column cells in [#11245](outline/outline#11245) - Allow http\:// loopback redirect URIs for native OAuth apps (RFC 8252) in [#11255](outline/outline#11255) - "Split cell" option now works without accurate selection in [#11256](outline/outline#11256) - Adding text below images is now easier as trailing paragraph is enforcedd by [@RudraPrasad001](https://github.com/RudraPrasad001) in [#11257](outline/outline#11257) - Tooltip in editor toolbar with submenu is now hidden when submenu is open in [#11263](outline/outline#11263) - Non-platform passkeys such as Yubikey and mobile QRcode are now allowed in [#11265](outline/outline#11265) - diagrams.net theme now matches editor theme by [@Twometer](https://github.com/Twometer) in [#11267](outline/outline#11267) - Custom emoji characters are now displayed correctly in TOC in [#11275](outline/outline#11275) - Fixed an issue where the policy for documents restore was too broad in [#11279](outline/outline#11279) - Passkey setup is now available to non-admin users by [@Raphmatt](https://github.com/Raphmatt) in [#11286](outline/outline#11286) ##### New Contributors - [@NAM-MAN](https://github.com/NAM-MAN) made their first contribution in [#11203](outline/outline#11203) - [@lucawimmer](https://github.com/lucawimmer) made their first contribution in [#11198](outline/outline#11198) - [@maycuatroi1](https://github.com/maycuatroi1) made their first contribution in [#11222](outline/outline#11222) - [@RudraPrasad001](https://github.com/RudraPrasad001) made their first contribution in [#11257](outline/outline#11257) - [@Twometer](https://github.com/Twometer) made their first contribution in [#11267](outline/outline#11267) - [@Raphmatt](https://github.com/Raphmatt) made their first contribution in [#11286](outline/outline#11286) **Full Changelog**: <outline/outline@v1.3.0...v1.4.0> </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/3547 Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net> Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>

auto-assign Bot requested a review from tommoor December 16, 2025 11:48

apoorv-mishra force-pushed the feat/9271/table-cell-bgcolor branch 2 times, most recently from c80edaf to 122be0e Compare January 7, 2026 10:46

apoorv-mishra force-pushed the feat/9271/table-cell-bgcolor branch from 122be0e to 11599ec Compare January 16, 2026 11:44

tommoor requested a review from Copilot January 19, 2026 16:39

Copilot AI reviewed Jan 19, 2026

View reviewed changes

apoorv-mishra added 10 commits January 22, 2026 15:52

feat: table cell bgcolor

ef67267

fix: review

80edede

fix: cleanup

d651bdb

fix: new color picker

a2956e9

fix: transparentize bg preset colors

75f30c3

fix: show selected color in color list

0b256fc

fix: pass active color to picker

fe411e8

fix: make color picker command agnostic

9894beb

fix: tsc

3378592

fix: table row and col background menu

5256079

apoorv-mishra force-pushed the feat/9271/table-cell-bgcolor branch from 3e44b54 to 5256079 Compare January 22, 2026 10:22

apoorv-mishra added 8 commits January 22, 2026 16:08

getColorSetForSelectedCells

7910517

toggleCellBackground to toggleCellSelectionBackground

e4ba4a6

cellHasBackground to cellSelectionHasBackground

4e96e23

useless spread

ecbe713

presetColors

acb7522

get rid of hasMultipleColors

7d664a7

get rid of customColor

8883ebe

be explicit in passing color

ca5a6ad

tommoor reviewed Jan 23, 2026

View reviewed changes

apoorv-mishra added 3 commits January 23, 2026 16:29

alpha controls

fa76ce4

remove new highligh command

61ef16f

DRY DottedCircleIcon

6ce75c3

apoorv-mishra added 2 commits January 23, 2026 21:40

restore ff fix

4de7f95

merge createCellBackground into updateCelllBackground

3ad09e2

apoorv-mishra requested a review from tommoor January 23, 2026 16:44

default color

5973e3e

tommoor approved these changes Jan 24, 2026

View reviewed changes

tommoor added 2 commits January 24, 2026 21:57

Merge main

8e2194f

Merge

fb4c20a

tommoor merged commit abd7abc into main Jan 25, 2026
15 checks passed

tommoor deleted the feat/9271/table-cell-bgcolor branch January 25, 2026 03:13

apoorv-mishra mentioned this pull request Jan 27, 2026

Colocate preset color codes and their names in color utils #11289

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Choose table cell background#10930

Choose table cell background#10930
tommoor merged 26 commits into
mainfrom
feat/9271/table-cell-bgcolor

apoorv-mishra commented Dec 16, 2025

Uh oh!

tommoor commented Dec 17, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 19, 2026

Uh oh!

apoorv-mishra Jan 22, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	}, [isOpen, commands]);
	}, [isOpen, commands, item.children, state]);

Uh oh!

Conversation

apoorv-mishra commented Dec 16, 2025

Uh oh!

tommoor commented Dec 17, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 19, 2026

Choose a reason for hiding this comment

Uh oh!

apoorv-mishra Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

apoorv-mishra Jan 22, 2026 •

edited

Loading