Widget richtext by demshy · Pull Request #7162 · decaporg/decap-cms

demshy · 2024-03-27T12:34:12Z

Summary
This is a work-in-progress PR that adds richtext-widget as a potential replacement for the markdown in one of the future releases. Discussion where I put some of my thoughts about this here: #6905
Digging deeper, there might be another caveat that we haven't considered before - nesting block types (inside lists for example) might make the implementation much more difficult so I did not go down that road yet.

A very rough checklist:

I have copied serializers (and their tests) from the existing markdown widget and am updating them as I go. I copy the renderers one by one as I get to the plugin in question.
Once the basic implementation is done, I plan on going through the e2e tests and update what is needed on the code or tests side, depends on the specific situation.

Note that this is very much in progress but I'm happy of any feedback, especially from someone who dealt with Slate/Plate before.

Test plan

Checklist

Please add a x inside each checkbox:

I have read the contribution guidelines.

A picture of a cute animal (not mandatory but encouraged)

…perty in dependencies

@demshy

…rom @demshy - Applied implementation from https://github.com/poslovnimediji/decap-cms/tree/widget-richtext - Based on PR decaporg#7162

…r implementation

…components

ext widget

…ts reference

…mponent

packages/decap-cms-widget-richtext/src/RichtextControl.js

yanthomasdev · 2026-02-25T15:52:57Z

packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js

+              <Toolbar
+                onLinkClick={handleLinkClick}
+                onToggleMode={handleToggleMode}
+                buttons={[]}


This is hardcoded to be an empty array, I don't think it was meant to be this way?

yanthomasdev · 2026-02-25T15:55:11Z

packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js

+        <LinkToolbarButton
+          type="link"
+          label={t('editor.editorWidgets.markdown.link')}
+          icon="link"
+          disabled={disabled}
+          t={t}


Is the link button meant to be always visible?

yanthomasdev · 2026-02-25T15:55:31Z

packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js

+        <ListToolbarButton
+          type="ul"
+          label={t('editor.editorWidgets.markdown.bulletedList')}
+          icon="list-bulleted"
+          disabled={disabled}
+        />
+        <ListToolbarButton
+          type="ol"
+          label={t('editor.editorWidgets.markdown.numberedList')}
+          icon="list-numbered"
+          disabled={disabled}
+        />


Same here for the lists, just in case!

packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js

yanthomasdev · 2026-02-25T16:03:11Z

packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js

+          t={t}
+        />
+        <HeadingToolbarButton isVisible={isVisible} disabled={disabled} t={t} />
+        {isVisible('blockquote') && (


The schema uses 'quote' instead of 'blockquote', shouldn't these match?

...ges/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/HeadingToolbarButton.js

yanthomasdev · 2026-02-25T16:06:07Z

packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js

+          <Plate editor={editor} onChange={handleChange}>
+            <EditorControlBar>
+              <Toolbar
+                onLinkClick={handleLinkClick}


I saw this is being passed but is not used

…pping

yanthomasdev

I needed to make a few changes for strikethrough and blockquote to finally work, I can't commit directly so I ported my edits to suggestions.

I'll note that images and the containarized markdown/richtext don't work in the preview, so maybe we could leave these for a follow-up PR with tables and drag-in-drop?

The code block one does work, but has no syntax highlighting nor styling just like blockquote. I guess we would want to add shiki to add styling to it? Not sure how in this context.

packages/decap-cms-widget-richtext/src/serializers/remarkSlate.js

packages/decap-cms-widget-richtext/src/serializers/slateRemark.js

packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js

packages/decap-cms-widget-richtext/src/RichtextPreview.js

Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>

yanthomasdev · 2026-03-17T00:08:01Z

I am not sure why unit tests are failing here but not locally, maybe the branch isn't updated? I don't have write access to do that myself.

This reverts commit b44e3c8.

yanthomasdev · 2026-03-20T19:52:18Z

@martinjagodic I think this one is basically good to go.

I made a few changes since we last talked:

Skipped the failing media library tests (we can keep them and remove in the future, or reevaluate and fix their flakiness another time)
Fixed Markdown/Richtext containers that previously weren't rendering in the preview, and also avoiding them from being nested (Richtext Container inside another Richtext Container) which was causing some issues.
Fixed a blank Markdown Container rendering "undefined" in the preview.
Added missing styles to the preview pre and code elements.
Made so the mode switch isn't added inside the Richtext/Markdown Container, since it would be weird to have Richtext mode, on a Markdown container and the fact it was causing some rendering issues as well.

What I wasn't able to solve to this moment is the images not working. Not sure if it's a local thing, or happens in production as well, would need your experience here. We can remove the image attachment if that makes sense.

demshy added 8 commits April 4, 2024 15:28

feat(plate): add as new widget, basic marks

f38fe21

feat(richtext): add paragraphs and headings, refactor some

4ec4983

feat(richtext): add basic listsr

899990b

feat(richtext): add serializers, update tests

e7e110b

feat(richtext): add link plugin

7cd2eee

feat(richtext): add blockquote

75c1fa3

feat(richtext): add blockquote plugin special keydown events

ab5132e

feat(richtext): use own querynode

181d644

demshy force-pushed the widget-richtext branch from bcd8f04 to 181d644 Compare April 4, 2024 13:28

demshy and others added 6 commits August 8, 2024 10:10

feat(richtext): use getBlockAbove for heading state

c6ac950

feat(richtext): add blockquote toolbar button state

08c14c8

feat(richtext): add editor components to toolbar

c0b12f9

chore(eslimt): update eslint config to allow package.json exports pro…

50092e0

…perty in dependencies

feat(richtext): upgrade plate to 39, add shortcodes

dee442d

feat(richtext): clean up some logs

86fcc39

martinjagodic and others added 2 commits June 26, 2025 15:25

Merge branch 'main' into widget-richtext

c8b1c59

Merge branch 'main' into widget-richtext

a418dc0

demshy force-pushed the widget-richtext branch from e9f1eb6 to a418dc0 Compare October 1, 2025 07:48

chore(): update slate to 0.110

4802720

demshy mentioned this pull request Oct 1, 2025

Update Slate #7617

Merged

1 task

demshy and others added 9 commits October 1, 2025 08:32

chore: update slate and related dependencies to latest versions

0025e18

Merge branch 'chore/slate-116' into widget-richtext

6960730

chore: change remark versions to the ones that work with our tokenize…

f0fb7a8

…r implementation

feat(widget-richtext): update plate to v50, temporary disable editor …

db48a9a

…components

feat(widget-richtext): add shortcode plugin for editor components

63b5a64

fix: lint

87cb771

fix(widget-richtext): fix preview for using richtext as editor component

d5f4b0c

style(widget-richtext): lint code

6fa2dc1

fix: temporarily remove serializer tests for richt

3a2c535

ext widget

martinjagodic added 4 commits February 25, 2026 09:43

refactor(VisualEditor): remove unused handleBlockClick function and i…

759e037

…ts reference

fix(RichtextControl): remove unnecessary ref attributes from editor divs

a7a1f1d

fix: format

6e6936b

fix(RichtextControl): add missing onAddAsset and getAsset props to co…

e8b150b

…mponent

yanthomasdev reviewed Feb 25, 2026

View reviewed changes

martinjagodic added 3 commits March 3, 2026 15:08

feat(Toolbar): add strikethrough button and update heading options ma…

311d173

…pping

Merge branch 'main' into widget-richtext

3df7145

fix: make strikethrough icon smaller

4f4e052

yanthomasdev reviewed Mar 5, 2026

View reviewed changes

martinjagodic and others added 4 commits March 6, 2026 07:42

Apply suggestions from code review

b9d1ce1

Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>

Merge branch 'main' into widget-richtext

7955a33

fix: format

eb3420c

Merge branch 'main' into widget-richtext

cbeb237

martinjagodic and others added 9 commits March 17, 2026 10:59

Merge branch 'main' into widget-richtext

684d0d8

Merge branch 'main' into widget-richtext

8b7ce9c

fix: attempt to fix unit tests

648c4dc

chore: skip problematic tests

b44e3c8

chore: skip another test

1bd9c8e

Revert "chore: skip problematic tests"

1173a84

This reverts commit b44e3c8.

feat: add pre and code styles

7b8fb1d

fix: remove undefined from blank markdown container

1294a42

fix: container rendering and mode switch

ffb2367

chore: lint and format files

f6819ed

martinjagodic previously approved these changes Mar 24, 2026

View reviewed changes

Merge branch 'main' into widget-richtext

ff7aecb

martinjagodic dismissed their stale review via ff7aecb March 24, 2026 13:06

martinjagodic approved these changes Mar 24, 2026

View reviewed changes

martinjagodic merged commit 568cb23 into decaporg:main Mar 24, 2026
9 checks passed

Uh oh!

Conversation

demshy commented Mar 27, 2024 • edited by martinjagodic Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yanthomasdev left a comment

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!

yanthomasdev commented Mar 17, 2026

Uh oh!

yanthomasdev commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

demshy commented Mar 27, 2024 •

edited by martinjagodic

Loading

yanthomasdev commented Mar 20, 2026 •

edited

Loading