Attach JSON Editor Theme Assets Using Library Attachments

Created on 12 September 2023, 10 months ago
Updated 21 June 2024, 8 days 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 .

Steps to reproduce

Proposed resolution

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

Remaining tasks

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

None

API changes

  • 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

Data model changes

None

πŸ“Œ Task
Status

Needs review

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 26 days ago
  • πŸ‡ΊπŸ‡ΈUnited States slucero Arkansas
  • Status changed to Needs review 12 days 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.

Production build 0.69.0 2024