Add modal to content with CKEditor

Created on 3 October 2023, 9 months ago
Updated 22 October 2023, 8 months ago

Problem/Motivation

I have a requirement to allow users to add links in their content that trigger modals. I need to support multiple modals on one page, as seen in the link below (in the wild).

In the wild: https://www.canada.ca/en/revenue-agency/services/tax/individuals/topics/first-home-savings-account/opening-closing-and-fhsa.html

Steps to reproduce

N/A

Proposed resolution

The following is a high-level approach:

  • Add a new modal custom block type (wxt_ext_block).
  • Add a linkit Matcher plugin to allow selecting custom_block.
  • Add a linkit Substitution plugin to change link to block (/block/1) to use a field on the block type (field_modal_id, example output is #my-modal to trigger a modal)
  • Add a filter to CKE4/CKE5 that looks for modal links and adds the modal to the end of the field output and modifies the link to trigger the modal.
  • Add a block--block-content--modal.html.twig to style the modal if used in other ways.

Remaining tasks

N/A

User interface changes

  • A new matcher for linkit means "Custom block" is now a group of suggested content
  • Adjusted matchers to use "Content type: [node:content-type]" for nodes in the suggestions, and "Block type: [block_content:type]" for custom blocks.

API changes

N/A

Data model changes

New custom block type with associated fields.

Feature request
Status

Fixed

Version

5.0

Component

Code

Created by

🇨🇦Canada smulvih2 Canada 🍁

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @smulvih2
  • Status changed to Needs review 9 months ago
  • 🇨🇦Canada smulvih2 Canada 🍁

    Patches attached implement the new custom block type Modal, as well as associated linkit plugins and filter to allow embedding within CKEditor. Tested on CKE4 and CKE5, works the same across both. Also tested multiple modals on a single page and works without issue. New Modal block type is fully translatable, and the text filter correctly returns the correct translation for block content.

  • 🇨🇦Canada smulvih2 Canada 🍁

    The nice part about this approach is the modal is only added to the page when a linkit link points to it. Once the link is removed so too is the modal markup. Also allows for reusable modals that can be embedded on multiple pages and managed in one spot.

  • 🇨🇦Canada danrod

    Thanks @smulvih2 I had an issue when applying the patch wxt-bootstrap-modal-block-3391443-2.patch , perhaps something needs to be done before applying the patch?

  • 🇨🇦Canada joseph.olstad

    @danrod

    the patch is for wxt 5.0.x

    are you applying it to wxt 4.x?

    also, there's two patches, which one did you apply first?

  • 🇨🇦Canada smulvih2 Canada 🍁

    @danrod, I made the patches against the 5.0.0-rc2 branch, but was also able to apply the patches to a project using the 5.0.x-dev branch as well. Let me know what version of WxT you are trying to apply these patches against and hopefully we can figure out what the issue is.

  • 🇨🇦Canada danrod

    Thanks @smulvih2 I was applying the patches against the 4.x branch, I'm trying to update WXT to 5.0.0 in order to apply the patches but I am having a bunch of issues, I'll post these in another issue.

  • 🇨🇦Canada danrod

    Thanks @joseph.olstad @smulvih2 on your help on this, I was able to apply the patch, I see the new Custom block type "Modal", I created a new block of that type, tried to use it in the editor, but I don't know how to add the new "block", should I search by Modal ID?

  • 🇨🇦Canada smulvih2 Canada 🍁

    @danrod appreciate your help reviewing this! To place the modal link, use the linkit plugin and search against the block title. You should now be able to see modal blocks as suggestions.

  • 🇨🇦Canada sylus

    Hi @smulvih2 would you mind also adding this to our overview page in docs similar to other improvements?

    Thanks for the great work!

  • 🇨🇦Canada smulvih2 Canada 🍁

    @sylus added this feature to the existing PR from earlier today - https://github.com/drupalwxt/drupalwxt.github.io/pull/3

  • Status changed to Fixed 8 months ago
  • 🇨🇦Canada sylus

    This looks great!

    Committed and attributed!

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024