Replace the WYSIWYG editor with TipTap by ahukkanen · Pull Request #10196 · decidim/decidim

ahukkanen · 2022-12-29T16:46:35Z

🎩 What? Why?

This PR implements the TipTap editor for Decidim.

This is feature complete and works both in the legacy design (admin panel) as well as in the redesign (you need to test it locally not to break staging, instructions below).

Can be tested at (use default seed credentials):
https://tiptap.decidimqa.mainiotech.fi/

📌 Related Issues

Here are also some issues we have had in the past with Quill that should be confirmed to be fixed when testing this:

Testing

Clone this branch, create the development app (you may need to regenerate it as packages have changed)
In another window, open try.decidim.org
Go to admin panel in both versions
Find a view with WYSIWYG editor
Try it out
Compare that we have all functionality available that we used to have with Quill

Currently there does not seem to be any redesigned view yet with the editor (e.g. new proposal / new meeting / new initiative / etc.) but you can test it locally under the redesign by adding it to some page, e.g. at the static page view as follows:

          <!-- Add this BELOW the <div class="editor-content mt-6">...</div> wrapper -->
          <div class="mt-6">
            <%= decidim_form_for(Decidim::StaticPage.new, url: "") do |form| %>
              <%= form.editor(:content) %>
            <% end %>
          </div>

And if you want to test the full toolbar with the video embed and image embed functionality, replace the line with form.editor with this (note that you need to be logged in for the image embedding to work because of the permissions set for the image upload endpoint):

<%= form.editor(:content, toolbar: "full") %>

Note that this PR already includes E2E tests (system tests) for testing the editor functionality under both, the legacy design as well as the redesign.

Extra features

The new editor also comes with some extra features that you can test:

Automatically formatting pasted content
- Try pasting a YouTube URL, e.g. https://www.youtube.com/watch?v=f6JMgJAQ2tc
- Try pasting markdown content, e.g. **this should appear as bold**
Markdown shortcuts
- Try writing e.g. a heading to the editor, start the text with ## + SPACE and continue writing your heading
- Try writing e.g. a bold to the editor, write double stars ** followed by some text and then again double stars **
Character counter
- You can try it at the participant side, e.g. when submitting a new proposal
Hastags support, try e.g. with new proposal
Mentions support (right now we do not have any WYSIWYG editor in Decidim that supports mentions but the support is built to the editor)
Double clicking existing embedded content (images or videos) to edit them

📷 Screenshots

Participant editor with demonstration of the available controls

Admin editor with extra controls

Link dialog

Image dialog

Video dialog

Supports YouTube and Vimeo by default or any arbitrary service as long as they provide embeddable video URLs.

Image resizing support

As in the old editor, we have image resizing support also in the new editor.

Redesigned editor

Link dialog (redesigned)

Image dialog (redesigned)

Video dialog (redesigned)

The image upload response handling was not always returning a promise which caused inconsistent behavior across browsers.

- In order to control the editor styling while the modal dialogs are open, add a new dialog extension that stores the dialog state for the editor itself - Refactor the image extension to move the custom node view for image resizing to its own file

In order to maintain consistency for the structuring of the code, move other extensions to a folder stucture after the image extension required its own folder.

The `img` element's src can also get the hostname prepended to it when the previous check would not work. Updated to check if the actual node attribute has changed.

As the generated editor HTML changed, the expectation also needs to be changed.

In case the editor container contains the classes to indicate these features are needed, only add those extensions in that case.

The editor implements its own hashtags and mentions functionality which is why we do not need to attach tribute to the editors.

And add the tests for the content toolbar.

ahukkanen · 2023-04-28T13:46:34Z

@decidim/maintainers This is now finally ready for technical review after the current editor toolbar issues have been resolved at develop and the changes have been reflected to this branch.

Meanwhile we have been waiting to merge this, we have also received a stable release last month for Tiptap version 2 🥳:
https://tiptap.dev/blog/tiptap-release-day

I have also updated the Tiptap to the stable version.

EDIT: Staging/QA environment has also been updated with the latest code.

andreslucena · 2023-05-05T06:45:25Z

Meanwhile we have been waiting to merge this, we have also received a stable release last month for Tiptap version 2 🥳 :
tiptap.dev/blog/tiptap-release-day

I have also updated the Tiptap to the stable version.

Great news!! 👏🏽 👏🏽

EDIT: Staging/QA environment has also been updated with the latest code.

@carolromero could you give it an eye? Thanks!

alecslupu

Partial Reviewed, I have a quill related issue while upgrading.

RELEASE_NOTES.md

decidim-core/app/packs/src/decidim/input_character_counter.js

decidim-core/app/packs/src/decidim/redesigned_input_character_counter.js

decidim-core/spec/system/editor_spec.rb

carolromero · 2023-05-17T07:52:57Z

@carolromero could you give it an eye? Thanks!

I took a look and everything seems to be fine 👍

To be able to utilize the front-end helpers in other tests as well.

alecslupu

As per documentation, the task bin/rails decidim:upgrade:migrate_wysiwyg_content should migrate all the content . However, when i run the task, i get the following error:

ActiveRecord::StatementInvalid: PG::UndefinedColumn: ERROR:  column "admin_terms_of_use_body" does not exist
LINE 1: ...cidim_organizations"."welcome_notification_body", "admin_ter...
                                                             ^
/code/decidim/decidim-core/lib/decidim/upgrade/wysiwyg_migrator.rb:48:in `block in convert_model_data'
/code/decidim/decidim-core/lib/decidim/upgrade/wysiwyg_migrator.rb:47:in `convert_model_data'
/code/decidim/decidim-core/lib/decidim/upgrade/wysiwyg_migrator.rb:32:in `block in update_records_batches'
/code/decidim/decidim-core/lib/decidim/upgrade/wysiwyg_migrator.rb:31:in `each_with_index'
/code/decidim/decidim-core/lib/decidim/upgrade/wysiwyg_migrator.rb:31:in `update_records_batches'
/code/decidim/decidim-core/lib/decidim/upgrade/wysiwyg_migrator.rb:80:in `block in update_models'
/code/decidim/decidim-core/lib/decidim/upgrade/wysiwyg_migrator.rb:79:in `each'
/code/decidim/decidim-core/lib/decidim/upgrade/wysiwyg_migrator.rb:79:in `update_models'
/code/decidim/decidim-core/lib/tasks/upgrade/decidim_migrate_wysiwyg_content.rake:53:in `block (3 levels) in <main>'
/code/bin/rails:5:in `<top (required)>'
/code/bin/spring:10:in `block in <top (required)>'
/code/bin/spring:7:in `<top (required)>'

It seems that in the task ( decidim:upgrade:register_wysiwyg_migration) the old field name ( admin_terms_of_use_body ) is being used. As per change done in #10614, the field should be renamed to admin_terms_of_service_body.

After this change is being made, all should be ok from my end.

decidim-core/lib/tasks/upgrade/decidim_migrate_wysiwyg_content.rake

ahukkanen added module: proposals module: core module: meetings module: admin type: feature module: debates module: forms module: initiatives labels Dec 29, 2022

ahukkanen added 22 commits January 3, 2023 12:01

Integrate the editor with the redesigned layout

6e4b0e8

Add a general upload error message on non HTTP 200 responses

0762f68

Remove done item from the comment

f9c44a6

Fix async issue with the image upload handling

0220bab

The image upload response handling was not always returning a promise which caused inconsistent behavior across browsers.

Normalize i18n

fd4f74a

Remove the quill list styling hacks

10b1028

Remove legacy quill styling classes from CSS

4a7ddea

Modify the iframe disabler tests to use new video embed markup

4ab217a

Remove vendored legacy Quill extensions

22451d0

Remove the TipTap YouTube extension as it is not used

09eff75

Implement image resizer

ab0259d

Add activity outline for editor images and video embeds

9f8eec7

Move the other extensions to a similar folder structure

12a8204

In order to maintain consistency for the structuring of the code, move other extensions to a folder stucture after the image extension required its own folder.

Add support for user mentions and hashtags

d1dbdc1

Fix checking if the src has changed

37fadbe

The `img` element's src can also get the hostname prepended to it when the previous check would not work. Updated to check if the actual node attribute has changed.

Remove console logs

72ffcac

Fix the editor system specs for image content after image resizer

d4e6baf

As the generated editor HTML changed, the expectation also needs to be changed.

Fix editor hashtags suggestion list label rendering

150bc5e

Fix mentions sorting strings (exclude the mention character)

0077db1

Conditionally add hashtag and mention extensions to the editor

c47cb6b

In case the editor container contains the classes to indicate these features are needed, only add those extensions in that case.

Do not attach tribute to the editor

e866feb

The editor implements its own hashtags and mentions functionality which is why we do not need to attach tribute to the editors.

ahukkanen added 2 commits April 28, 2023 15:26

Fix the jest tests after removing heading from the basic toolbar

49f825f

And add the tests for the content toolbar.

Adjust the system editor specs according to the heading control changes

16f1836

ahukkanen requested a review from a team April 28, 2023 13:46

alecslupu reviewed May 16, 2023

View reviewed changes

RELEASE_NOTES.md Show resolved Hide resolved

alecslupu reviewed May 16, 2023

View reviewed changes

decidim-core/app/packs/src/decidim/input_character_counter.js Show resolved Hide resolved

alecslupu reviewed May 16, 2023

View reviewed changes

decidim-core/app/packs/src/decidim/redesigned_input_character_counter.js Show resolved Hide resolved

alecslupu reviewed May 16, 2023

View reviewed changes

decidim-core/spec/system/editor_spec.rb Outdated Show resolved Hide resolved

ahukkanen added 3 commits May 22, 2023 15:30

Merge branch 'develop' into feature/tiptap-editor

08985be

Update the JS config files during decidim upgrade rake task

b3dc89b

Move the front-end test helpers to generalized modules

11daa41

To be able to utilize the front-end helpers in other tests as well.

ahukkanen requested a review from alecslupu May 23, 2023 07:31

alecslupu suggested changes May 23, 2023

View reviewed changes

decidim-core/lib/tasks/upgrade/decidim_migrate_wysiwyg_content.rake Outdated Show resolved Hide resolved

ahukkanen added 6 commits May 24, 2023 22:33

Merge branch 'develop' into feature/tiptap-editor

f4de1b8

Raise an error in the wysiwyg migrator if the column is not defined

0e8d037

Add a comment explaining the return statement

1dc8c6e

Correct the changed column name in the wysiwyg migration

05e9dc3

Change the puts statements to log_info

f8f80a2

Add specs for the wysiwyg migration rake tasks

abfa1d7

ahukkanen requested a review from alecslupu May 24, 2023 20:44

alecslupu approved these changes May 24, 2023

View reviewed changes

alecslupu merged commit 6de145f into decidim:develop May 25, 2023

ahukkanen mentioned this pull request May 25, 2023

Delete a video or write under this in the Rich Text Editor #10898

Open

ahukkanen deleted the feature/tiptap-editor branch May 25, 2023 11:08

ahukkanen mentioned this pull request Jun 8, 2023

Text Editor - Video not showing in Process and Assembly Page functionality and in any #10420

Open

Crashillo mentioned this pull request Jul 21, 2023

Redesign: mentions template #11245

Merged

andreslucena mentioned this pull request Nov 16, 2023

Remove legacy design support from WYSIWYG editor (TipTap) #12015

Merged

andreslucena mentioned this pull request Nov 27, 2025

Error in the use of bullets for text #10407

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Replace the WYSIWYG editor with TipTap#10196

Replace the WYSIWYG editor with TipTap#10196
alecslupu merged 323 commits intodecidim:developfrom
mainio:feature/tiptap-editor

ahukkanen commented Dec 29, 2022 •

edited

Loading

Uh oh!

ahukkanen commented Apr 28, 2023 •

edited

Loading

Uh oh!

andreslucena commented May 5, 2023

Uh oh!

alecslupu left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

carolromero commented May 17, 2023

Uh oh!

alecslupu left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Conversation

ahukkanen commented Dec 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎩 What? Why?

📌 Related Issues

Testing

Extra features

📷 Screenshots

Participant editor with demonstration of the available controls

Admin editor with extra controls

Link dialog

Image dialog

Video dialog

Image resizing support

Redesigned editor

Link dialog (redesigned)

Image dialog (redesigned)

Video dialog (redesigned)

Uh oh!

ahukkanen commented Apr 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andreslucena commented May 5, 2023

Uh oh!

alecslupu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

carolromero commented May 17, 2023

Uh oh!

alecslupu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ahukkanen commented Dec 29, 2022 •

edited

Loading

ahukkanen commented Apr 28, 2023 •

edited

Loading