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 #3381549: JSON Editor theme assets do not load on Drupal 10.1.

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 #3395617: Add a class to opt-out of off-canvas resets in contrib is provided.

Issue fork patternkit-3386854

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

slucero created an issue. See original summary.

krisahil made their first commit to this issue’s fork.

krisahil opened merge request !108

krisahil’s picture

krisahil commented

@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).

slucero’s picture

slucero
he/him
Primary language English
commented

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.

slucero’s picture

slucero
he/him
Primary language English
commented
Status: Postponed » Active
slucero’s picture

slucero
he/him
Primary language English
commented
Status: Active » Needs review
slucero’s picture

slucero
he/him
Primary language English
commented
Issue summary: View changes
Parent issue: » #3447707: Patternkit Beta 10 Release Plan
slucero’s picture

slucero
he/him
Primary language English
commented

@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.

minsharm’s picture

minsharm commented

I have retested it and observed an issue related to "Edit JSON" and "Properties" button

Steps to reproduce :

  • Go to this page : /admin/config/user-interface/patternkit/json.
  • Check the "Hide the properties buttons" and uncheck the "Hide the JSON Edit button".
  • Try to add Patternkit block and observe the "properties" and "Edit Json" button within the JSON Editor Form.

Actual Results:
With this change, "properties" button is always visible and "Edit Json" button is always invisible irrespective of the JSON pattern library settings.

Expected Results:
"properties" button should be invisible and "Edit Json" button should be visible as per the above JSON pattern library settings mentioned in Steps.

slucero’s picture

slucero
he/him
Primary language English
commented

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

slucero’s picture

slucero
he/him
Primary language English
commented
Issue summary: View changes
slucero’s picture

slucero
he/him
Primary language English
commented
Status: Needs review » Reviewed & tested by the community

  • slucero committed 430a9a10 on 9.1.x authored by krisahil 
    Issue #3386854 by slucero, krisahil, minsharm: Attach JSON Editor Theme...
slucero’s picture

slucero
he/him
Primary language English
commented
Status: Reviewed & tested by the community » Fixed

Merged for inclusion in the 9.1.0-beta10 release!

Status: Fixed » Closed (fixed)

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