AdvancedCustomFields / AdvancedCustomFields/acf

wysiwyg JS `initializeEditor` should not destroy HTML elements

Open
#767 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
945
Forks
197
PR merge metrics
No merged PRs in 30d

Description

hi,
we in qTranslate-XT (*) have identified a problem in ACF Javascript with the wysiwyg editor: https://github.com/qtranslate/qtranslate-xt/issues/1186. In short the issue in ACF comes from here the JS initializeEditor code here in acf-input.js:
https://github.com/AdvancedCustomFields/acf/blob/366796a529219c1c5c2722a80371eb56a5fd1425/assets/build/js/acf-input.js#L5099-L5104

This code is deleting HTML elements with destructive = true and creating a similar HTML content. It only looks similar which is very misleading and took me a lot of time to debug... Problem: it's not the same HTML content because we are using those HTML elements as object references. So the old references point to detached elements that are not in the document anymore and the new elements created by ACF are unknown, which breaks several functionalities in qTranslate but other plugins integrating ACF could also be impacted.

I have found a workaround but it's not ideal. So here are my suggestions:

  1. this destructive functionality should be avoided and possibly removed completely. The same can be achieved by changing the ID in a soft way. Why did the developers use destructive here?
  2. regardless of destructive or not, ACF should send an event telling such a change of ID happened (it's already a big HTML change) or if the element is destroyed and created again (even a bigger change).

(*) For a short history, qTranslate-XT is quite a big WordPress project with a legacy from the original qTranslate that was abandoned by the original author despite having many thousands of installations. We hope to bring it back to the official plugins soon. We live only in github for now but it's quite popular. We have been integrating ACF in different ways successfully for many users. In fact ACF and WooCommerce are the most succesfull integrations for qTranslate. There's a lot of potential to make these two plugins to coexist very smoothly.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with assets/build/js/acf-input.js at lines 5099-5104 and review the linked qTranslate-XT issue for the integration failure. Determine how initializeEditor handles destructive replacement and whether the expected change is preserving existing element references, exposing the change through an event, or both. Done means integrations no longer receive references to detached elements.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.