empiricompany/openmage-mm_monacoeditor

OpenMage / Magento 1.9 module extension that integrate Monaco Editor with Emmet and Tailwindcss Intellisense in CMS Static Blocks / Pages

Maintainers

Details

github.com/empiricompany/openmage-mm_monacoeditor

Homepage

Source

Issues

Installs: 6

Dependents: 0

Suggesters: 0

Security: 0

Stars: 4

Watchers: 3

Forks: 2

Open Issues: 1

Language:HTML

Type:magento-module

v1.0.0 2024-05-10 08:07 UTC

Requires

OSL-3.0 14d130b8900c15bc0585834f72c6130aeb29d78c

magentomagento1openmage

This package is auto-updated.

Last update: 2024-11-18 11:05:59 UTC

README

  • OpenMage / Magento 1.9.x
  • PHP 7.4 / 8.x

Description

Monaco Editor is a highly advanced and versatile code editor from Microsoft used in the popular code editor VSCode.

This extension allows you to use Monaco for editing CMS content and Design Update XML instead of textareas while maintaining indentation, as well as benefiting from all the useful features.

Additionally, you can disable the TinyMCE WYSIWYG editor for specific static blocks and pages. This option has been added because TinyMCE removes code that does not conform to the HTML5 schema, such as Alpine.js.

This is a side project of CMSContentFileMode that integrates the Tailwind CSS compiler for CMS Content in OpenMage. Check it out!

Monaco Features

  • Smart IntelliSense
  • Syntax Highlighting
  • Code Formatting / Folding
  • Multiple Cursors and Selections
  • and much more

Additional Features

  • Emmet a fast and efficient toolkit for HTML and CSS coding, providing shorthand abbreviations for quick code expansion.
  • Tailwindcss Intellisense providing intelligent auto-completion, suggestions, and tooltips for Tailwind CSS classes

Configuration

Monaco Editor is enabled by default in all supported content.

System -> Content Management -> Monaco Editor Options

  • Enable/disabled Monaco Editor [enabled]
  • Enable/disabled Tailwindcss Intellisense [enabled]
  • Configure Tailwindcss Prefix [disabled]
    • Set Custom Tailwindcss Prefix ['tw-']
  • Disable WYSYWYG Editor for specific Static Blocks and Pages

Known issues:

  • The TinyMCE content is not synchronized back on Monaco.

  • There is a problem with prototypejs that inserts the Array.prototype.include method and conflicts with Monaco. It should have been resolved, although it may not be the best solution, but it works!

DEMO

demo-monacoeditor configs

Support

If you have any issues with this extension, please open an issue on GitHub.

Contribution

Any contributions are highly appreciated. The best way to contribute code is to open a pull request on GitHub.

Licence

OSL - Open Software Licence 3.0