Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use intersection observer to init Tinymce editors #2476

Merged
merged 7 commits into from
May 24, 2023

Conversation

sascha-karnatz
Copy link
Contributor

What is this pull request for?

  • transform Alchemy.Tinymce from Coffeescript to Javascript
  • move Alchemy.Tinymce to @alchemy_cms/admin - package
  • restructure Alchemy.Tinymce to export only public methods
  • replace jQuery - functions with native ES6 functions
  • add IntersectionObserver to reduce the initialization time on pages with a lot of Tinymce instances (e.g. Page Editor)

Checklist

  • I have followed Pull Request guidelines
  • I have added a detailed description into each commit message
  • I have added tests to cover this change

@sascha-karnatz sascha-karnatz requested a review from tvdeyen May 12, 2023 12:13
@sascha-karnatz sascha-karnatz force-pushed the tinymce-intersection-observer branch 7 times, most recently from 8e6fce5 to 5f3cce3 Compare May 15, 2023 08:41
@sascha-karnatz sascha-karnatz changed the title Tinymce intersection observer Draft: Tinymce intersection observer May 24, 2023
Change Tinymce default configuration - name to not overwrite the Tinymce object.
Change the command position of the admin package link during the dummy app installation. Otherwise the alchemy:install - step will reinstall the package.
@sascha-karnatz sascha-karnatz force-pushed the tinymce-intersection-observer branch from 8b604d7 to 6db555a Compare May 24, 2023 09:48
Also add a method to set custom tinymce configuration, instead of exporting the whole configuration.
One jQuery usage is left because it is used in initializer and dialog. It has to be removed, when these parts are updated.
the IntersectionObserver will initialize each instance of the Tinymce only if it becomes visible. This can drastically reduce Javascript long tasks on pages with a lot of Tinymce instances.
@sascha-karnatz sascha-karnatz force-pushed the tinymce-intersection-observer branch from e0bd795 to 16215f6 Compare May 24, 2023 10:06
@sascha-karnatz sascha-karnatz changed the title Draft: Tinymce intersection observer Tinymce intersection observer May 24, 2023
package/src/tinymce.js Outdated Show resolved Hide resolved
package/src/tinymce.js Outdated Show resolved Hide resolved
package/admin.js Outdated Show resolved Hide resolved
@tvdeyen tvdeyen changed the title Tinymce intersection observer Use intersection observer to init Tinymce editors May 24, 2023
@tvdeyen tvdeyen changed the title Use intersection observer to init Tinymce editors Use intersection observer to init Tinymce editors May 24, 2023
Instead of a CSS class the id of the element is used to target the Tinymce textarea. Also the configuration is now in the richtext editor template.
@sascha-karnatz sascha-karnatz force-pushed the tinymce-intersection-observer branch from 16215f6 to 2f3b882 Compare May 24, 2023 12:45
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice work

@tvdeyen tvdeyen merged commit 06f314d into AlchemyCMS:main May 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants