/**
* MetaSync HTML Visual Editor
*
* Initializes GrapesJS editor with custom configuration
* for editing raw HTML pages with full visual capabilities.
*
* @global grapesjs - Loaded from GrapesJS library script
* @global metasyncEditor - Injected via wp_localize_script
*/
/* eslint-env browser */
/* global grapesjs, metasyncEditor */
(function($) {
'use strict';
let editor;
let hasUnsavedChanges = false;
$(document).ready(function() {
// Bind the header controls first so Back and Preview keep working even
// if the canvas never starts.
initializeEventHandlers();
if (!startEditor()) {
return;
}
preventAccidentalExit();
});
/**
* Start the editor, reporting any dependency or start-up failure to the
* user instead of leaving an unexplained empty canvas behind.
*
* @return {boolean} True when the canvas initialized.
*/
function startEditor() {
// Dependencies absent from disk (reported by PHP) plus any whose
// request failed in the browser (blocked by CSP, an extension, etc).
const missing = (metasyncEditor.missing || []).slice();
const failed = (window.metasyncEditorAssets && window.metasyncEditorAssets.failed) || [];
failed.forEach(function(name) {
if (missing.indexOf(name) === -1) {
missing.push(name);
}
});
// The editor script is ordered after GrapesJS but WordPress cannot
// guarantee the file actually arrived, so verify the global exists.
if (typeof grapesjs === 'undefined') {
if (missing.indexOf('grapesjs') === -1) {
missing.push('grapesjs');
}
showLoadFailure(
metasyncEditor.i18n.load_failed_core,
missing,
{ fatal: true }
);
return false;
}
try {
initializeEditor();
} catch (err) {
console.error('MetaSync HTML Editor failed to initialize:', err);
showLoadFailure(
metasyncEditor.i18n.load_failed_init,
missing,
{ fatal: true }
);
return false;
}
// The blocks library is optional: without it the canvas still loads and
// the page stays editable, only the extra block palette is missing.
if (!resolveBlocksPlugin()) {
if (missing.indexOf('grapesjs-blocks-basic') === -1) {
missing.push('grapesjs-blocks-basic');
}
showLoadFailure(
metasyncEditor.i18n.load_failed_blocks,
missing,
{ fatal: false }
);
}
return true;
}
/**
* Resolve the grapesjs-blocks-basic plugin.
*
* Releases before 1.0.0 registered themselves under the name
* 'gjs-blocks-basic'; 1.0.x only exposes a UMD export, so the plugin is
* looked up by reference and the legacy registry name is only a fallback.
*
* @return {Function|undefined} The plugin function when available.
*/
function resolveBlocksPlugin() {
const exported = window['gjs-blocks-basic'];
const plugin = exported && exported.default ? exported.default : exported;
if (typeof plugin === 'function') {
return plugin;
}
if (grapesjs.plugins && typeof grapesjs.plugins.get === 'function') {
return grapesjs.plugins.get('gjs-blocks-basic');
}
return undefined;
}
/**
* Report an asset-loading or start-up failure in the page.
*
* Only dependency names and the localized message are shown; no paths,
* versions or server detail are exposed.
*
* @param {string} message Localized explanation.
* @param {Array} missing Names of the dependencies that did not load.
* @param {Object} options Set fatal to true when the canvas is unusable.
*/
function showLoadFailure(message, missing, options) {
const settings = options || {};
const $panel = $('#metasync-editor-load-failure');
console.error('MetaSync HTML Editor: ' + message +
(missing.length ? ' (' + missing.join(', ') + ')' : ''));
if (!$panel.length) {
return;
}
$panel.find('.metasync-load-failure-title').text(metasyncEditor.i18n.load_failed_title);
$panel.find('.metasync-load-failure-message').text(message);
const $detail = $panel.find('.metasync-load-failure-detail');
if (missing.length) {
$detail.text(
(metasyncEditor.i18n.load_failed_detail || '%s').replace('%s', missing.join(', '))
).show();
} else {
$detail.hide();
}
$panel.find('.metasync-load-failure-reload')
.text(metasyncEditor.i18n.reload)
.off('click')
.on('click', function(e) {
e.preventDefault();
window.location.reload();
});
$panel.toggleClass('metasync-load-failure-fatal', !!settings.fatal);
// Clear `hidden` rather than calling .show(), which would set an inline
// display and break the panel's flex centering.
$panel.removeAttr('hidden');
if (settings.fatal) {
$('.metasync-save-button')
.prop('disabled', true)
.attr('title', metasyncEditor.i18n.save_disabled);
} else {
// Non-fatal: let the notice be dismissed and keep editing.
$panel.find('.metasync-load-failure-dismiss')
.text(metasyncEditor.i18n.dismiss)
.off('click')
.on('click', function(e) {
e.preventDefault();
$panel.hide();
})
.show();
}
updateStatus('error');
}
/**
* Sidebar panels, in switcher order.
*
* Each entry maps a switcher button to the sidebar panel it reveals, the
* command that activates it, and the localized-label key for its title.
*
* @type {Array}
*/
const SIDEBAR_PANELS = [
{ id: 'styles', command: 'show-styles', icon: 'dashicons-art', labelKey: 'panel_styles', fallback: 'Styles' },
{ id: 'traits', command: 'show-traits', icon: 'dashicons-admin-generic', labelKey: 'panel_settings', fallback: 'Settings' },
{ id: 'layers', command: 'show-layers', icon: 'dashicons-menu', labelKey: 'panel_layers', fallback: 'Layers' },
{ id: 'blocks', command: 'show-blocks', icon: 'dashicons-grid-view', labelKey: 'panel_blocks', fallback: 'Blocks' }
];
/**
* Resolve a localized string with an English fallback.
*
* @param {string} key Property under metasyncEditor.i18n.
* @param {string} fallback Used when the payload predates the key.
* @return {string}
*/
function t(key, fallback) {
return (metasyncEditor.i18n && metasyncEditor.i18n[key]) || fallback;
}
/**
* Show a transient action notice in the page's live region.
*
* alert() blocks the UI thread, cannot be styled or dismissed by
* keyboard, and is unreachable to screen-reader users mid-flow; the
* notice element is announced automatically instead.
*
* @param {string} message Localized message to display.
*/
let noticeTimer = null;
function showNotice(message) {
const $notice = $('#metasync-editor-notice');
if (!$notice.length) {
window.alert(message);
return;
}
$notice.text(message).removeAttr('hidden');
if (noticeTimer) {
clearTimeout(noticeTimer);
}
noticeTimer = setTimeout(function() {
$notice.attr('hidden', true);
}, 6000);
}
/**
* Render the sidebar's panel switcher buttons.
*
* The buttons are created in the sidebar itself rather than as GrapesJS
* panel buttons, so the editor re-rendering its panels cannot detach them.
*/
function buildPanelSwitcher() {
const $switcher = $('#metasync-editor-panel-switcher');
if (!$switcher.length) {
return;
}
$switcher.empty();
SIDEBAR_PANELS.forEach(function(panel) {
const label = t(panel.labelKey, panel.fallback);
const $button = $('Section
',
content: 'Section Add your content here
Text
',
content: 'Insert your text here
',
category: 'Basic'
},
{
id: 'image',
label: 'Image
',
content: { type: 'image' },
category: 'Basic',
activate: true
},
{
id: 'button',
label: 'Button
',
content: 'Button ',
category: 'Basic'
},
{
id: 'divider',
label: 'Divider
',
content: ']*>([\s\S]*?)<\/style>/gi);
if (styleMatch) {
let allStyles = '';
styleMatch.forEach(style => {
allStyles += style.replace(/<\/?style[^>]*>/gi, '');
});
editor.setStyle(allStyles);
}
// Enhance component types with better traits
editor.DomComponents.addType('text', {
model: {
defaults: {
traits: [
{
type: 'text',
name: 'content',
label: 'Text Content',
changeProp: 1
}
]
}
}
});
editor.DomComponents.addType('link', {
model: {
defaults: {
traits: [
{
type: 'text',
name: 'href',
label: 'URL',
placeholder: 'https://example.com'
},
{
type: 'text',
name: 'title',
label: 'Title'
},
{
type: 'select',
name: 'target',
label: 'Target',
options: [
{ value: '', name: 'Same Window' },
{ value: '_blank', name: 'New Window' },
{ value: '_parent', name: 'Parent Frame' },
{ value: '_top', name: 'Top Frame' }
]
}
]
}
}
});
editor.DomComponents.addType('image', {
model: {
defaults: {
traits: [
{
type: 'text',
name: 'src',
label: 'Image URL',
placeholder: 'https://example.com/image.jpg'
},
{
type: 'text',
name: 'alt',
label: 'Alt Text',
placeholder: 'Image description'
},
{
type: 'text',
name: 'title',
label: 'Title'
}
]
}
}
});
// Add device switching commands
editor.Commands.add('set-device-desktop', {
run: function(editor) {
editor.setDevice('Desktop');
}
});
editor.Commands.add('set-device-tablet', {
run: function(editor) {
editor.setDevice('Tablet');
}
});
editor.Commands.add('set-device-mobile', {
run: function(editor) {
editor.setDevice('Mobile');
}
});
// Panel-switching commands.
//
// Each manager renders into its own sidebar mount point, so switching
// is purely a matter of revealing the right panel. These used to also
// call render() on the manager and toggle GrapesJS panel classes,
// which fought with the editor's own rendering.
SIDEBAR_PANELS.forEach(function(panel) {
editor.Commands.add(panel.command, {
run: function() {
showPanel(panel.id);
}
});
});
// Build the sidebar's panel switcher, now that the commands its
// buttons run are registered.
//
// These were previously GrapesJS panel buttons that a timer tried to
// re-parent into the sidebar. The buttons are plain markup in the
// sidebar now, so they cannot be detached by the editor re-rendering
// its own panels.
buildPanelSwitcher();
// When an element is selected, automatically show the Styles panel
editor.on('component:selected', function(component) {
// Name the selected element in the sidebar. The indicator is part
// of the page template, so it does not need to be injected here.
const elementType = component.get('type') || 'div';
const elementName = component.getName() || elementType;
const indicator = document.getElementById('metasync-selected-element');
if (indicator) {
indicator.hidden = false;
}
$('#metasync-element-name').text(elementName.charAt(0).toUpperCase() + elementName.slice(1));
// Automatically switch to Styles panel when selecting an element
editor.runCommand('show-styles');
});
// Hide indicator when no element is selected
editor.on('component:deselected', function() {
const indicator = document.getElementById('metasync-selected-element');
if (indicator) {
indicator.hidden = true;
}
});
// Track changes
editor.on('change:changesCount', function() {
hasUnsavedChanges = true;
updateStatus('unsaved');
});
// Upload failures are rejected by the assetManager's customFetch and
// surface here. Tell the user instead of failing silently.
editor.on('asset:upload:error', function (error) {
var message = error && error.data && error.data.message;
showNotice(message || t('upload_failed', 'Image upload failed'));
});
}
/**
* Initialize event handlers
*/
function initializeEventHandlers() {
// Save button
$('.metasync-save-button').on('click', saveHTML);
// Preview button
$('.metasync-preview-button').on('click', openPreview);
// Keyboard shortcuts
$(document).on('keydown', function(e) {
// Ctrl/Cmd + S to save
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
saveHTML();
}
});
}
/**
* Save HTML via AJAX
*/
function saveHTML() {
// The save button is disabled after a fatal load, but the Ctrl/Cmd+S
// binding still fires — there is no editor to read from then.
if (!editor) {
return;
}
const $button = $('.metasync-save-button');
const originalText = $button.text();
// Get HTML and CSS from editor
const html = editor.getHtml();
const css = editor.getCss();
// Combine HTML with CSS
let fullHTML = html;
if (css) {
fullHTML = `\n${html}`;
}
// Update button state
$button.prop('disabled', true).text(t('saving', 'Saving...'));
updateStatus('saving');
// Send AJAX request
$.ajax({
url: metasyncEditor.ajax_url,
type: 'POST',
data: {
action: 'metasync_save_html',
nonce: metasyncEditor.nonce,
post_id: metasyncEditor.post_id,
html: fullHTML
},
success: function(response) {
if (response.success) {
hasUnsavedChanges = false;
updateStatus('saved');
$button.text(t('saved', 'Saved!'));
setTimeout(function() {
$button.text(originalText);
updateStatus('ready');
}, 2000);
} else {
showNotice((response.data && response.data.message) || t('error', 'Error saving'));
updateStatus('error');
}
},
error: function(xhr) {
// An expired nonce answers "-1" (or "0" logged-out) outside
// the JSON envelope; anything else is a real failure. The
// session-expired message warns that reloading will lose the
// canvas, which the generic error message does not.
var body = xhr && xhr.responseText;
if (body === '-1' || body === '0') {
showNotice(t('session_expired', 'Your session has expired. Copy your work before reloading the page.'));
} else {
var message = null;
try {
message = JSON.parse(body).data.message;
} catch (parseError) {
message = null;
}
showNotice(message || t('error', 'Error saving'));
}
updateStatus('error');
},
complete: function() {
$button.prop('disabled', false);
}
});
}
/**
* Open preview in new tab
*/
function openPreview() {
if (hasUnsavedChanges) {
if (!window.confirm(t('confirm_preview', 'You have unsaved changes. Preview will show the last saved version. Continue?'))) {
return;
}
}
window.open(metasyncEditor.preview_url, '_blank');
}
/**
* Update status indicator
*/
function updateStatus(status) {
const $indicator = $('.metasync-status-indicator');
const $text = $('.metasync-status-text');
$indicator.removeClass('unsaved saving saved error ready');
$indicator.addClass(status);
const statusText = {
ready: t('ready', 'Ready'),
unsaved: t('unsaved_changes', 'Unsaved changes'),
saving: t('saving', 'Saving...'),
saved: t('saved', 'Saved!'),
error: t('error', 'Error saving')
};
$text.text(statusText[status] || t('ready', 'Ready'));
}
/**
* Prevent accidental exit with unsaved changes
*/
function preventAccidentalExit() {
$(window).on('beforeunload', function(e) {
if (hasUnsavedChanges) {
const message = metasyncEditor.i18n.confirm_exit;
e.returnValue = message;
return message;
}
});
}
})(jQuery);