@silexlabs/grapesjs-symbols
Version:
Symbols for GrapesJS
134 lines • 6.36 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.cmdList = exports.cmdCreate = exports.cmdUnlink = exports.cmdRemove = exports.cmdAdd = void 0;
exports.default = default_1;
exports.displayError = displayError;
exports._addSymbol = _addSymbol;
exports._removeSymbol = _removeSymbol;
exports._unlinkSymbolInstance = _unlinkSymbolInstance;
exports._createSymbolInstance = _createSymbolInstance;
var lit_html_1 = require("lit-html");
var unsafe_html_js_1 = require("lit-html/directives/unsafe-html.js");
var utils_1 = require("./utils");
exports.cmdAdd = 'symbols:add';
exports.cmdRemove = 'symbols:remove';
exports.cmdUnlink = 'symbols:unlink';
exports.cmdCreate = 'symbols:create';
exports.cmdList = 'symbols:list';
// Same signature as a grapesjs plugin
function default_1(editor) {
editor.Commands.add(exports.cmdList, {
run: function () {
return (0, utils_1.getSymbols)(editor);
},
});
editor.Commands.add(exports.cmdAdd, _addSymbol);
editor.Commands.add(exports.cmdRemove, _removeSymbol);
editor.Commands.add(exports.cmdUnlink, _unlinkSymbolInstance);
editor.Commands.add(exports.cmdCreate, _createSymbolInstance);
}
// Symbol management functions
// These are exported for unit tests
function displayError(editor, title, message) {
var content = document.createElement('div');
editor.Modal.open({
title: title,
content: content,
});
(0, lit_html_1.render)((0, lit_html_1.html)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["<main>\n <p>", "</p>\n </main><footer style=\"\n display: flex;\n justify-content: space-between;\n margin-top: 30px;\n \">\n <div></div>\n <button class=\"gjs-btn-prim\" @click=", ">Close</button>\n </footer>"], ["<main>\n <p>", "</p>\n </main><footer style=\"\n display: flex;\n justify-content: space-between;\n margin-top: 30px;\n \">\n <div></div>\n <button class=\"gjs-btn-prim\" @click=", ">Close</button>\n </footer>"])), (0, unsafe_html_js_1.unsafeHTML)(message), function () { return editor.Modal.close(); }), content);
}
/**
* Create a new symbol
* @param options.component - the component which will become the first instance of the symbol
* @returns {Symbol}
*/
function _addSymbol(editor, _, _a) {
var _b = _a.component, component = _b === void 0 ? editor.getSelected() : _b, _c = _a.label, label = _c === void 0 ? component === null || component === void 0 ? void 0 : component.getName() : _c, icon = _a.icon;
if (!component || !label) {
throw new Error('Can not create the symbol: missing required param');
}
// Give the component a name
component.setName(label);
if (icon)
component.set('icon', icon);
// add the symbol
var s = (0, utils_1.createSymbol)(editor, component);
// return the symbol to the caller
return s;
}
/**
* Delete a symbol
* @param {symbolId: string} - object containing the symbolId
*/
function _removeSymbol(editor, _, _a) {
var symbolId = _a.symbolId;
if (!symbolId) {
throw new Error('Can not delete symbol: missing param symbolId');
}
var symbol = editor.Components.getSymbols()
.find(function (symbol) { return symbol.getId() === symbolId; });
if (!symbol) {
throw new Error('Can not delete symbol: symbol not found');
}
(0, utils_1.deleteSymbol)(editor, symbol);
}
function _unlinkSymbolInstance(editor, _, _a) {
var component = _a.component;
if (!component) {
throw new Error('Can not unlink the component: missing param component');
}
(0, utils_1.unbindSymbolInstance)(editor, component);
}
/**
* @param {{index, indexEl, method}} pos Where to insert the component, as [defined by the Sorter](https://github.com/artf/grapesjs/blob/0842df7c2423300f772e9e6cdc88c6ae8141c732/src/utils/Sorter.js#L871)
*/
function _createSymbolInstance(editor, _, _a) {
var symbol = _a.symbol, pos = _a.pos, target = _a.target;
if (!symbol || !pos || !target) {
throw new Error('Can not create the symbol: missing param symbol or pos or target');
}
pos = pos || {};
if (symbol && pos && target) {
var isHtmlElement = target instanceof HTMLElement;
var isComponent = !isHtmlElement;
var parentId = isComponent ? undefined : target.getAttribute('id');
if (!parentId && !isComponent) {
throw new Error('Can not create the symbol: missing parentId or target component');
}
var parent_1 = isComponent ? target : editor.Components.allById()[parentId];
// Check that it is a valid parent
if (parent_1) {
if ((0, utils_1.allowDrop)(editor, parent_1)) {
// create the new component
var symbolInfo = (0, utils_1.createSymbol)(editor, symbol);
if (!symbolInfo)
throw new Error('Can not create the symbol: symbol creation failed');
var instances = symbolInfo.instances;
// Last one is the added one
var instance = instances[instances.length - 1];
var c = (pos.placement === 'after' ? parent_1.append(instance) :
parent_1.append(instance, { at: pos.index }))[0];
// Select the new component
// Break unit tests? editor.select(c, { scroll: true })
return c;
}
else {
// Cancel and notify the user
displayError(editor, 'Error: can not create the symbol', '<p>One of the parent is in the symbol.</p><p>Please remove the parent from the symbol and try again.</p>');
throw new Error('Can not create the symbol: one of the parent is in the symbol');
}
}
else {
throw new Error('Can not create the symbol: parent not found');
}
}
else {
throw new Error('Can not create the symbol: missing param symbol or pos or target');
}
}
var templateObject_1;
//# sourceMappingURL=SymbolsCommands.js.map