Attach JSON Editor Theme Assets Using Library Attachments

Created on 12 September 2023, over 1 year ago
Updated 14 August 2024, 5 months ago

Problem/Motivation

The current implementation (9.1.x-beta7 and earlier) of JSON Editor in the module loads scripts and related assets for JSON Editor asynchronously via JavaScript instead of through attachments in the form render array when assembling the form. This method complicates both the JavaScript and server-side implementation by requiring the LibraryStream service to produce URLs for these assets to be exposed via JS settings, and the JS logic to parse these URLs and add them on the page.

Changes in the underlying systems for managing these assets also lead to maintenance issues like the one causing 🐛 JSON Editor theme assets do not load on Drupal 10.1 Fixed .

Proposed resolution

  • Deprecate LibraryStream service
  • Deprecate PatternkitStream service
  • Attach JSON Editor assets in form building process server-side
  • Remove asynchronous asset loading logic from JS

From the front-end, these changes should remain pretty transparent and focus on confirming the continuity of existing features.

  • Selected themes and icon libraries should load and display as expected in both the off-canvas tray and full-page view of the block edit form.
  • Creation of content on new blocks should be saved and displayed as expected.
  • Editing existing blocks should properly prepopulate existing content into the form.
  • Saving changes to existing blocks should be properly reflected on save.
  • Media library integration supports adding and changing selected media.

User interface changes

  • Removed unsupported JSON Editor theme options:
    • barebones
    • html
  • Removed unsupported JSON Editor icon library option: jqueryui
  • Removed unsupported JSON Editor theme configuration options:
    • Additional editor theme CSS
    • Additional editor theme JS

API changes

  • Deprecated LibraryStream service for removal in 9.1.0 release
  • Deprecated PatternkitStream service for removal in 9.1.0 release
  • New jsoneditor_form form element
  • New patternkit.jsoneditor.form_builder service to help build JSON Editor form
  • \Drupal\patternkit\JSONSchemaEditorTrait is now deprecated and replaced. Will be removed in v9.1.0 release
  • PatternLibraryPluginInterface::getEditor() is deprecated and will be removed in v9.1.0 release. Use getPatternEditor() instead.

Data model changes

None

Known issues

  • Selected icon libraries are not properly rendered when viewing the pattern editor form in the off-canvas tray due to conflicts with core CSS resets in the off-canvas tray. This was already the case in prior releases and will remain blocked until a solution like Add a class to opt-out of off-canvas resets in contrib Needs review is provided.
📌 Task
Status

Fixed

Version

9.1

Component

Schema Editor

Created by

🇺🇸United States slucero Arkansas

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

Merge Requests

Comments & Activities

  • Issue created by @slucero
  • First commit to issue fork.
  • 🇺🇸United States krisahil

    @slucero, I started work to support these changes. The MR, as it stands now, loads the JSON Editor theme assets as a Drupal library, using #attached, instead of manually adding the scripts and styles to the DOM. On one site, this change has made loading the CSS and JS much more reliable (the manual method loaded CSS and JS in unpredictable order, which led to race conditions, evidenced in CKEditor 5 integration).

  • 🇺🇸United States slucero Arkansas

    Thanks for getting this started @krisahil! I looked over the code so far and it all looks good. One thing I'd look into as part of this as well is whether we can remove the shadow dom versions and related checks altogether now that we've removed shadow dom support in the beta 9 release.

  • Status changed to Active 7 months ago
  • 🇺🇸United States slucero Arkansas
  • Status changed to Needs review 6 months ago
  • 🇺🇸United States slucero Arkansas
  • 🇺🇸United States slucero Arkansas
  • 🇺🇸United States slucero Arkansas

    @krisahil, thanks for the heads up on the regression. I'll have to look into that more closely.

    What is the back-story for renaming this scope to #patternkit-editor-target ? Does Patternkit allow for opening the editor in a context other than #drupal-off-canvas? If so, how?

    Regarding this, yes the block form may also be opened in a full-page view instead of in the sidebar tray. The simplest way to do this that I've found for testing is to right-click the link for one of the block edit forms and select to open it in a new tab. This will open up the full-page form and redirect you back to the layout edit page upon submission.

    Applying the #patternkit-editor-target ID is a shortcut that was used to have a consistent target for the form to instantiate within and to allow the cygnet theme styles to target more directly without being reliant specifically on the markup for the sidebar tray. This would of course conflict if multiple editors are instantiated on a page at once, but I suspect we'll have a few additional issues in that scenario to overcome as well.

  • Pipeline finished with Failed
    6 months ago
    Total: 185s
    #214019
  • Pipeline finished with Failed
    6 months ago
    #214031
  • 🇮🇳India minsharm India

    I have retested the issue and result looks good to me.

    Results:

    • Selected themes and icon libraries loads and displays as expected in both the off-canvas tray and full-page view of the block edit form.
    • Creation of content on new blocks saved and displayed as expected.
    • Editing existing block properly prepopulate existing content into the form.
    • Saving changes to existing blocks properly reflected on save.
    • Media library integration supports adding and changing selected media.
  • 🇺🇸United States slucero Arkansas

    There was an issue with naming mismatches for the settings. This should be fixed and ready for testing again.

  • 🇺🇸United States slucero Arkansas
  • Status changed to RTBC 5 months ago
  • 🇺🇸United States slucero Arkansas
  • Pipeline finished with Skipped
    5 months ago
    #239835
  • Status changed to Fixed 5 months ago
  • 🇺🇸United States slucero Arkansas

    Merged for inclusion in the 9.1.0-beta10 release!

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

Production build 0.71.5 2024