 |
VOOZH | about |
|
VOOZH | about |
This document covers Maho's modern WYSIWYG (What You See Is What You Get) rich text editor implementation using TipTap. The editor provides advanced content editing capabilities across the admin interface, including CMS pages, blocks, product descriptions, email templates, and newsletters. It replaces legacy editors with a modern, extensible JavaScript-based solution that supports custom content types like widgets, variables, and complex layout grids.
For general admin interface architecture, see Admin Architecture. For grid and form components that often contain WYSIWYG fields, see Grid and Form Components.
Maho’s WYSIWYG editor leverages TipTap, a modular rich-text editor built on top of ProseMirror. The editor is initialized and managed via a custom JavaScript setup class (tiptapWysiwygSetup) and enriched with Maho-specific extensions for features like directives, widgets, and layout grids.
The architecture integrates:
{{widget ...}}, {{var ...}})Sources: public/js/mage/adminhtml/wysiwyg/tiptap/setup.js12-39 public/js/mage/adminhtml/wysiwyg/tiptap/extensions.js9-24 public/js/mage/adminhtml/wysiwyg/tiptap/extensions/columns.js15-46 public/js/mage/adminhtml/wysiwyg/tiptap/extensions/bento.js175-265
The tiptapWysiwygSetup class manages the lifecycle of the TipTap editor for each textarea intended as a rich text field. It handles the DOM structure, event bindings, content conversion, and toggling between WYSIWYG and plain HTML modes.
Sources: public/js/mage/adminhtml/wysiwyg/tiptap/setup.js14-39 public/js/mage/adminhtml/wysiwyg/tiptap/setup.js193-338 lib/Maho/Data/Form/Element/Editor.php53-64
The editor’s configuration is created by Mage_Cms_Model_Wysiwyg_Config and passed as options to the JS setup.
| Option | Type | Description |
|---|---|---|
hidden | boolean | Start editor hidden, showing plain textarea |
add_images | boolean | Enable "Insert Image" button and media browser integration |
add_widgets | boolean | Enable widget insertion support |
add_variables | boolean | Enable inserting variables (e.g., {{var ...}}) |
store_id | integer | Store context for media browser and directives |
directives_url | string | URL endpoint to render directive images |
files_browser_window_url | string | URL for media browser dialog |
widget_window_url | string | URL for widget chooser dialog |
validate_html_url | string | URL for HTML validation service |
Sources: public/js/mage/adminhtml/wysiwyg/tiptap/setup.js18-25 app/code/core/Mage/Cms/Model/Wysiwyg/Config.php54-91 lib/Maho/Data/Form/Element/Editor.php137-180
Maho extends TipTap’s functionality with multiple custom extensions alongside the standard StarterKit.
class and style attributes on most node types to maintain inline and CSS styling through editing cycles.mahoWidgetInline, mahoWidgetBlock).Preserves class and style attributes on elements such as paragraphs, headings, blockquotes, list items, table elements, and custom layout nodes.
mahoColumns and mahoBentoGrid.Sources: public/js/mage/adminhtml/wysiwyg/tiptap/extensions.js113-154
Maho extends TipTap with two distinct but related layout systems leveraging CSS Grid and custom nodes:
MahoColumns)A block-level extension providing horizontal column layouts with configurable presets and drag-resizable widths.
| Preset Key | Label | Columns | Grid Template Columns |
|---|---|---|---|
2-equal | 2 Columns | 2 | 1fr 1fr |
3-equal | 3 Columns | 3 | 1fr 1fr 1fr |
4-equal | 4 Columns | 4 | 1fr 1fr 1fr 1fr |
sidebar-left | Sidebar Left | 2 | 1fr 2fr |
sidebar-right | Sidebar Right | 2 | 2fr 1fr |
wide-center | Wide Center | 3 | 1fr 2fr 1fr |
The MahoColumns node contains child MahoColumn nodes, each representing a column block.
Sources: public/js/mage/adminhtml/wysiwyg/tiptap/extensions/columns.js15-46
MahoBentoGrid)A flexible CSS Grid layout system using named grid template areas to build asymmetric complex grids.
areas, columns, and rows attributes to specify the grid template.MahoBentoCell children assigned to named grid areas.hero-2, feature-left, magazine, etc.Sources: public/js/mage/adminhtml/wysiwyg/tiptap/extensions/bento.js16-19 public/js/mage/adminhtml/wysiwyg/tiptap/extensions/bento.js39-117 public/js/mage/adminhtml/wysiwyg/tiptap/extensions/bento.js175-265
The editor maintains seamless sync between a plain HTML textarea (that stores content for backend use) and the TipTap editor's structured document model.
| Method | Direction | Implementation Details |
|---|---|---|
convertFromPlain | Plain textarea → TipTap editor | Parses raw HTML, escapes directives within attributes, converts standalone directives to maho-widget span/div nodes |
convertToPlain | TipTap editor → textarea | Strips trailing empty paragraph, beautifies HTML (via js-beautify), re-extracts directives from maho-widget nodes to raw directives |
syncWysiwygToPlain | Editor → Plain textarea | Called on form validation and submit, updates textarea value |
{{widget type="cms/some_type"}} are replaced by <span data-type="maho-widget" data-directive="{{widget type="cms/some_type"}}"></span> in the editor content.Sources: public/js/mage/adminhtml/wysiwyg/tiptap/setup.js76-128 public/js/mage/adminhtml/wysiwyg/tiptap/setup.js130-157 public/js/mage/adminhtml/wysiwyg/tiptap/setup.js52-65
Custom TipTap nodes (mahoWidgetInline, mahoWidgetBlock) represent Maho template directives embedded in content, such as widgets and variables.
parseDirective() and renderDirective() handle parsing directive strings (e.g., {{var some_variable}}) into structured objects, and rendering them back into directive strings.renderDirectiveImageUrl() which encodes directives for backend rendering calls.add_images config is true.Mage_Adminhtml_Cms_WysiwygController::directiveAction().Media Browser Data Flow
Sources: app/code/core/Mage/Adminhtml/controllers/Cms/WysiwygController.php99-131
Maho integrates a W3C Nu HTML Validator service endpoint accessible via the validateHtmlAction in Mage_Adminhtml_Cms_WysiwygController.
app/code/core/Mage/Cms/etc/system.xml) to filter out known harmless validation messages.Sources: app/code/core/Mage/Adminhtml/controllers/Cms/WysiwygController.php24-94 app/code/core/Mage/Cms/etc/system.xml75-92
The editor's UI and content area styling is implemented using a CSS custom properties based stylesheet (tiptap.css), which controls colors, spacing, typography, and button styles consistently.
| CSS Custom Property | Description |
|---|---|
--tt-color-text | Primary text color |
--tt-color-text-muted | Muted text and icon colors |
--tt-color-border | Border colors for wrapper and controls |
--tt-btn-size | Standard toolbar button size |
--tt-font-mono | Dedicated monospace font for code blocks |
--tt-shadow-* | Box shadows for UI elements |
The toolbar also uses subtle animations for hover, active, disabled, and active states with tooltips. The content area uses ProseMirror's class conventions with margin and padding rules for headings, paragraphs, lists, and blockquotes.
Sources: public/js/mage/adminhtml/wysiwyg/tiptap/tiptap.css3-35 public/js/mage/adminhtml/wysiwyg/tiptap/tiptap.css41-50 public/js/mage/adminhtml/wysiwyg/tiptap/tiptap.css199-210
This diagram summarizes the interactions between the Maho WYSIWYG Editor architecture components, bridging the natural language/domain concepts with actual code entities.
Sources: Combined from all files listed above.
| Component | File & Line Reference |
|---|---|
| TipTap Editor Setup Class | public/js/mage/adminhtml/wysiwyg/tiptap/setup.js:12-39 |
| TipTap Core & Extensions Export | public/js/mage/adminhtml/wysiwyg/tiptap/extensions.js:9-24 |
| Columns Node Extension | public/js/mage/adminhtml/wysiwyg/tiptap/extensions/columns.js:15-46 |
| Bento Grid Node Extension | public/js/mage/adminhtml/wysiwyg/tiptap/extensions/bento.js:175-265 |
| WYSIWYG Controller (Backend API) | app/code/core/Mage/Adminhtml/controllers/Cms/WysiwygController.php:24-94 and :99-131 |
| WYSIWYG Config Model | app/code/core/Mage/Cms/Model/Wysiwyg/Config.php:54-91 |
| CSS Styling | public/js/mage/adminhtml/wysiwyg/tiptap/tiptap.css:1-257 (full file) |
Maho’s TipTap-based WYSIWYG Editor system provides a modern, extensible, and well-integrated rich text editing experience in the admin interface. By combining robust content synchronization, advanced layout nodes, flexible directive support, and a cohesive media handling strategy, Maho delivers an editor capable of handling complex content structures typical for e-commerce CMS and product content management.
End of 7.2 - WYSIWYG Editor (TipTap)
Sources:
Refresh this wiki