Skip to content

Update Content Model demo view with missing types, formats and properties#3390

Merged
JiuqingSong merged 4 commits into
masterfrom
u/jisong/updatedemo
Jul 2, 2026
Merged

Update Content Model demo view with missing types, formats and properties#3390
JiuqingSong merged 4 commits into
masterfrom
u/jisong/updatedemo

Conversation

@JiuqingSong

Copy link
Copy Markdown
Collaborator

Summary

The Content Model debug/demo view (under demo/scripts/controlsV2/sidePane/contentModel) had drifted behind the roosterjs-content-model-types definitions, so several format parts and node properties were not visible or editable. This PR adds the missing renderers and wires them into the relevant views.

New format-part renderers (components/format/formatPart/): AriaFormatRenderers (ariaDescribedBy, title), RoleFormatRenderer (role), LegacyTableBorderFormatRenderers (legacyTableBorder, cellSpacing, cellPadding), BoxShadowFormatRenderer (boxShadow), ImageStateFormatRenderer (imageState), UndeletableFormatRenderer (undeletable).

Wired into existing views:

  • BlockFormatView: added Id.
  • LinkFormatView: added BackgroundColor, TextAlign, Border, Size, Undeletable.
  • ContentModelTableView: added Direction, Size, Aria, Role, LegacyTableBorder.
  • ContentModelTableCellView: added Bold.
  • ContentModelListItemView: added Padding, TextIndent, BackgroundColor, list style type/position; the list marker now uses the full SegmentFormatView.
  • ContentModelImageView: added Border, BoxShadow, Display, VerticalAlign, ImageState formats and editable alt/title fields.
  • ContentModelEntityView: added isFakeEntity.

No new block/segment/block-group node types were needed — all are already dispatched; only format parts and node properties were missing.

How to test

  1. Lint and type-check (no unit tests cover these demo-only UI components):
    • yarn eslint
    • npx tsc -p demo/scripts/tsconfig.json --noEmit
  2. Run the demo site (yarn builddemo / start the demo), open the Content Model side pane, and expand a document containing a table, list, image, link and entity.
  3. Verify the newly exposed fields render and are editable:
    • Table: Direction, Size, Aria (AriaDescribedBy/Title), Role, LegacyTableBorder/CellSpacing/CellPadding.
    • Table cell: Bold.
    • List item: Padding, TextIndent, BackgroundColor, List style type/position; marker shows full segment format.
    • Image: Border, BoxShadow, Display, VerticalAlign, ImageState, plus Alt/Title text inputs.
    • Link: BackgroundColor, TextAlign, Border, Size, Undeletable.
    • Entity: IsFakeEntity checkbox.
    • Any block (Paragraph/FormatContainer): block-level Id.

…ties

Add renderers and wiring for Content Model format parts and node properties
that were missing from the debug/demo Content Model view: Aria, Role,
LegacyTableBorder, BoxShadow, ImageState and Undeletable renderers, plus block
Id, table/cell/list/link/image format coverage and image alt/title and entity
isFakeEntity properties.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions

github-actions Bot commented Jun 30, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-07-02 17:28 UTC

@JiuqingSong JiuqingSong marked this pull request as ready for review July 1, 2026 21:51
@JiuqingSong JiuqingSong merged commit f686989 into master Jul 2, 2026
8 checks passed
@JiuqingSong JiuqingSong deleted the u/jisong/updatedemo branch July 2, 2026 17:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants