alchemy-widget 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 0.2.1 (2022-12-23)
+
+* Add a `-first` modifier class to the first visible entry of a table-of-contents element
+* Make HTML widget editable
+* Also store and retrieve copied widget config from localStorage
+* Move `Container` widget init logic from the custom-element to the main widget instance
+* Disable most `backdrop-filter` properties, they caused too many FPS issues
+* Add the ability to hide widgets from the public
+* Allow overriding the language (`lang` attribute) of a widget
+* Fix config of container widgets not being saved
+* Only add minium dimensions when editing
+* Add `child-role` attribute & use it to set the default role of child widgets
+* Add the `toc-has-content` or `toc-is-empty` class to `al-toc` elements
+* Fix issue where `Text` widget would break when edited with LanguageTool extension
+* Do not truncate titles in table-of-contents automatically
+* Fix nesting levels in `al-toc`
+* Only allow text inside header widgets
+* Move default `Widget#populateWidget()` code to `Widget#finalizePopulatedWidget()`
+* Add `HawkejsTemplate` widget
+
 ## 0.2.0 (2022-11-02)
 
 * Use `al-` prefix for all custom elements

package/assets/stylesheets/alchemy_widgets.scss

@@ -2,6 +2,10 @@
 	al-widget-toolbar {
 		display: none;
 	}
+
+	[hidden] {
+		display: none !important;
+	}
 }
 
 html.logged-in {
@@ -110,6 +114,7 @@ al-widgets-column {
 	&.aw-editing {
 		position: relative;
 		min-height: 3rem;
+		min-width: 10rem;
 	}
 
 	> * {
@@ -127,7 +132,7 @@ al-widget {
 			background: white;
 			border: 2px dashed rgba(0, 0, 0, 0.4);
 			pointer-events: none;
-			backdrop-filter: invert(80%);
+			//backdrop-filter: invert(80%);
 			clip-path: polygon(0% 0%, 0% 100%, 2px 100%, 2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 2px), 0 calc(100% - 2px), 0 100%, 100% 100%, 100% 0)
 		}
 	}
@@ -159,11 +164,6 @@ al-widgets-column {
 	}
 }
 
-al-widgets {
-	min-width: 10rem;
-	min-height: 10rem;
-}
-
 al-widgets-row {
 	flex-flow: row;
 	flex: 10 10 auto;
@@ -287,12 +287,13 @@ al-widget {
 
 	&.aw-editing {
 		min-height: 2rem;
+		min-width: 2rem;
 
 		&:hover {
 			background: rgba(60, 60, 120, 0.2);
 
-			// This actually causes some glitches on Firefox :/
-			backdrop-filter: blur(4px);
+			// This actually causes some glitches on Firefox and chrome too :/
+			//backdrop-filter: blur(4px);
 		}
 	}
 
@@ -423,4 +424,8 @@ al-toc {
 			display: block;
 		}
 	}
+}
+
+.aw-hidden {
+	opacity: 0.8;
 }

package/bootstrap.js

@@ -4,9 +4,106 @@ if (!alchemy.plugins.form) {
 	throw new Error('The alchemy-form plugin has to be loaded BEFORE alchemy-widget');
 }
 
+/* Ckeditor 5 available toolbar buttons (from styleboost build)
+[
+	"blockQuote",
+	"bold",
+	"code",
+	"codeBlock",
+	"selectAll",
+	"undo",
+	"redo",
+	"heading",
+	"horizontalLine",
+	"imageTextAlternative",
+	"toggleImageCaption",
+	"imageStyle:inline",
+	"imageStyle:alignLeft",
+	"imageStyle:alignRight",
+	"imageStyle:alignCenter",
+	"imageStyle:alignBlockLeft",
+	"imageStyle:alignBlockRight",
+	"imageStyle:block",
+	"imageStyle:side",
+	"imageStyle:wrapText",
+	"imageStyle:breakText",
+	"uploadImage",
+	"imageUpload",
+	"indent",
+	"outdent",
+	"italic",
+	"link",
+	"linkImage",
+	"numberedList",
+	"bulletedList",
+	"mediaEmbed",
+	"removeFormat",
+	"sourceEditing",
+	"strikethrough",
+	"insertTable",
+	"tableColumn",
+	"tableRow",
+	"mergeTableCells",
+	"toggleTableCaption",
+	"tableCellProperties",
+	"tableProperties",
+	"todoList"
+]
+*/
+
+let options = {
+	ckeditor_path: null,
+	ckeditor_toolbar: [
+		'heading',
+		'|',
+		'bold', 'italic', 'link', 'bulletedList', 'numberedList',
+		'|',
+		'indent',
+		'outdent',
+		'horizontalLine',
+		'|',
+		'blockQuote',
+		'code',
+		'codeBlock',
+		'|',
+		'imageUpload',
+		'insertTable',
+		'|',
+		'undo', 'redo',
+	],
+};
+
+// Inject the user-overridden options
+alchemy.plugins.widget = Object.assign(options, alchemy.plugins.widget);
+
+if (!options.ckeditor_path) {
+	if (alchemy.plugins.styleboost) {
+		options.ckeditor_path = '/public/ckeditor/5/ckeditor.js';
+	} else {
+		options.ckeditor_path = 'https://cdn.ckeditor.com/ckeditor5/35.3.2/inline/ckeditor.js';
+	}
+}
+
+if (options.ckeditor_path) {
+	alchemy.exposeStatic('ckeditor_path', options.ckeditor_path);
+}
+
+if (options.ckeditor_toolbar) {
+	alchemy.exposeStatic('ckeditor_toolbar', options.ckeditor_toolbar);
+}
+
 Router.add({
 	name       : 'AlchemyWidgets#save',
 	methods    : 'post',
 	paths      : '/api/alchemywidgets/save',
 	policy     : 'logged_in',
+	permission : 'alchemy.widgets.save',
 });
+
+Router.add({
+	name       : 'AlchemyWidgets#uploadImage',
+	methods    : 'post',
+	paths      : '/api/alchemywidgets/upload',
+	policy     : 'logged_in',
+	permission : 'alchemy.widgets.image.upload',
+});

package/controller/alchemy_widgets_controller.js

@@ -184,4 +184,68 @@ AlchemyWidgets.setAction(async function save(conduit) {
 	};
 
 	conduit.end(result);
+});
+
+/**
+ * Handle an image upload from within CKeditor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+AlchemyWidgets.setAction(async function uploadImage(conduit) {
+
+	let file = conduit.files.upload;
+
+	const MediaFile = this.getModel('MediaFile');
+
+	let name = file.name.split('.');
+
+	// Remove the last piece if there are more than 1
+	if (name.length > 1) {
+		name.pop();
+	}
+
+	// Join them again
+	name = name.join('.');
+
+	const options = {
+		move     : true,
+		filename : file.name,
+		name     : name,
+	};
+
+	MediaFile.addFile(file.path, options, (err, result) => {
+
+		if (err) {
+			return conduit.error(err);
+		}
+
+		const params = {
+			id : result._id,
+		};
+
+		let default_path = alchemy.routeUrl('Media::image', params);
+		let url = RURL.parse(default_path);
+
+		let path_800 = url.clone();
+		path_800.param('width', '800');
+
+		let path_1024 = url.clone();
+		path_1024.param('height', '1024');
+
+		let path_1920 = url.clone();
+		path_1920.param('width', '1920');
+
+		let response = {
+			urls: {
+				default : default_path,
+				'800'   : path_800+'',
+				'1024'  : path_1024+'',
+				'1920'  : path_1920+''
+			}
+		};
+
+		conduit.end(response);
+	});
 });

package/element/00-widget_base_element.js

@@ -364,7 +364,7 @@ Base.setMethod(async function save() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.2.1
  */
 Base.setMethod(async function copyConfigToClipboard() {
 
@@ -377,11 +377,15 @@ Base.setMethod(async function copyConfigToClipboard() {
 	value._altype = 'widget';
 	value.type = this.type;
 
+	let dried = JSON.dry(value, null, '\t');
+
 	try {
-		await navigator.clipboard.writeText(JSON.dry(value, null, '\t'));
+		await navigator.clipboard.writeText(dried);
 	} catch (err) {
 		console.error('Failed to copy:', err);
 	}
+
+	localStorage._copied_widget_config = dried;
 });
 
 /**
@@ -389,7 +393,7 @@ Base.setMethod(async function copyConfigToClipboard() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.2.1
  */
 Base.setMethod(async function getConfigFromClipboard() {
 
@@ -398,7 +402,12 @@ Base.setMethod(async function getConfigFromClipboard() {
 	try {
 		result = await navigator.clipboard.readText();
 	} catch (err) {
-		return false;
+
+		if (!localStorage._copied_widget_config) {
+			return false;
+		} else {
+			result = localStorage._copied_widget_config;
+		}
 	}
 
 	if (result) {

package/element/05-widget_element.js

@@ -79,6 +79,15 @@ Widget.setAssignedProperty('filter_value');
  */
 Widget.setAttribute('child-class');
 
+/**
+ * A role to give to each child widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setAttribute('child-role');
+
 /**
  * Is this widget being edited?
  *
@@ -269,13 +278,11 @@ Widget.setMethod(function syncConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 Widget.setMethod(function startEditor() {
 
-	if (!this.instance) {
-		throw new Error('Unable to start the editor: this widget element has no accompanying instance');
-	}
+	this.assertWidgetInstance();
 
 	this.instance.startEditor();
 	this.addEditEventListeners();
@@ -286,19 +293,33 @@ Widget.setMethod(function startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.5
+ * @version  0.2.1
  */
 Widget.setMethod(function stopEditor() {
 
-	if (!this.instance) {
-		throw new Error('Unable to stop the editor: this widget element has no accompanying instance');
-	}
+	this.assertWidgetInstance();
 
 	this.unselectWidget();
 	this.instance.stopEditor();
 	this.removeEditEventListeners();
 });
 
+/**
+ * Make sure there is an instance
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setMethod(function assertWidgetInstance() {
+
+	if (!this.instance) {
+		console.error('Problem with widget element:', this);
+		throw new Error('Unable to stop the editor: this ' + this.tagName + ' element has no accompanying instance');
+	}
+
+});
+
 /**
  * Mouse click
  *

package/element/10-container_elements.js

@@ -62,21 +62,22 @@ AlchemyWidgets.setAssignedProperty('context_variables', function getContextData(
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 AlchemyWidgets.setProperty(function value() {
 
-	let widgets = this.getWidgetsConfig(),
+	let config = this.instance.config,
+	    widgets = this.getWidgetsConfig(),
 	    result;
+	
+	config = Object.assign({}, config, {widgets});
 
 	if (this.nodeName == 'AL-WIDGETS') {
-		result = {widgets};
+		result = config;
 	} else {
 		result = {
 			type   : this.instance.constructor.type_name,
-			config : {
-				widgets : widgets
-			}
+			config : config,
 		};
 	}
 
@@ -91,7 +92,7 @@ AlchemyWidgets.setProperty(function value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.2.1
  */
 AlchemyWidgets.setMethod(function applyValue(value) {
 
@@ -119,24 +120,18 @@ AlchemyWidgets.setMethod(function applyValue(value) {
 		if (config.class_names) {
 			Hawkejs.addClasses(this, config.class_names);
 		}
+	} else {
+		config = this.instance?.config || {};
 	}
 
 	if (!this.instance) {
 		return;
 	}
 
+	config.widgets = widgets;
+
 	this.instance.config = config;
 	this.instance.initContainer();
-
-	if (!widgets || !widgets.length) {
-		return;
-	}
-
-	let widget;
-
-	for (widget of widgets) {
-		this.addWidget(widget.type, widget.config);
-	}
 });
 
 /**

package/element/table_of_contents_element.js

@@ -88,12 +88,21 @@ TableOfContents.setAttribute('title-selector');
  */
 TableOfContents.setAttribute('intersection-class');
 
+/**
+ * Should titles be truncated?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+TableOfContents.setAttribute('truncate-length', {type: 'number'});
+
 /**
  * Get the entries
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.2.0
+ * @version  0.2.1
  */
 TableOfContents.setProperty(function entries() {
 
@@ -138,7 +147,7 @@ TableOfContents.setProperty(function entries() {
 
 			let title_element,
 			    starts_level,
-				ends_level;
+			    ends_level;
 
 			if (this.title_selector) {
 				title_element = element.querySelector(this.title_selector);
@@ -155,7 +164,10 @@ TableOfContents.setProperty(function entries() {
 					current_level = heading_level;
 				} else if (heading_level > current_level) {
 					current_level++;
-					starts_level = true;
+
+					if (last_entry) {
+						last_entry.starts_level = true;
+					}
 				} else if (heading_level == current_level && last_entry) {
 					last_entry.starts_level = false;
 				} else if (heading_level < current_level) {
@@ -169,7 +181,9 @@ TableOfContents.setProperty(function entries() {
 
 			title = (title_element.toc_title || title_element.textContent || '').trim();
 
-			title = title.truncate(30);
+			if (this.truncate_length) {
+				title = title.truncate(this.truncate_length);
+			}
 
 			// Don't add empty titles
 			if (!title) {
@@ -191,7 +205,7 @@ TableOfContents.setProperty(function entries() {
 		let ended_level = false,
 		    entries = result,
 		    current_branch,
-			current_nodes = [];
+		    current_nodes = [];
 
 		result = current_nodes;
 		last_entry = null;
@@ -255,7 +269,7 @@ TableOfContents.setProperty(function entries() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.1.2
+ * @version  0.2.1
  */
 TableOfContents.setMethod(async function introduced() {
 
@@ -263,7 +277,8 @@ TableOfContents.setMethod(async function introduced() {
 
 	const observer = new IntersectionObserver(entries => {
 
-		let class_name = this.intersection_class || 'visible';
+		let class_name = this.intersection_class || 'visible',
+		    first_name = class_name + '-first';
 
 		for (let entry of entries) {
 			const id = entry.target.getAttribute('id');
@@ -281,6 +296,28 @@ TableOfContents.setMethod(async function introduced() {
 				element.classList.remove(class_name);
 			}
 		};
+
+		let is_visible,
+		    all_marked = this.querySelectorAll('.' + class_name + ', .' + first_name),
+		    element,
+			seen = 0,
+		    i;
+		
+		for (i = 0; i < all_marked.length; i++) {
+			element = all_marked[i];
+			is_visible = element.classList.contains(class_name);
+
+			if (is_visible && seen == 0) {
+				element.classList.add(first_name);
+			} else {
+				element.classList.remove(first_name);
+			}
+
+			if (is_visible) {
+				seen++;
+			}
+		}
+		
 	});
 
 	for (let entry of this.entries) {

package/helper/widgets/00-widget.js

@@ -5,14 +5,18 @@
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {Object}   config
  */
 const Widget = Function.inherits('Alchemy.Base', 'Alchemy.Widget', function Widget(config) {
 
 	// The configuration of this widget
-	this.config = config || {};
+	if (config) {
+		this.config = config;
+	}
+
+	this.originalconfig = this.config;
 
 	// Are we currently editing?
 	this.editing = false;
@@ -72,6 +76,24 @@ Widget.setProperty(function element() {
 	return this.widget = element;
 });
 
+/**
+ * The config object
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @type     {Object}
+ */
+Widget.enforceProperty(function config(new_value) {
+
+	if (!new_value) {
+		new_value = {};
+	}
+
+	return new_value;
+});
+
 /**
  * A reference to the renderer
  *
@@ -96,12 +118,37 @@ Widget.enforceProperty(function hawkejs_renderer(new_value) {
 	return new_value;
 });
 
+/**
+ * Visibility of the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @type     {Boolean}
+ */
+Widget.enforceProperty(function is_hidden(new_value) {
+
+	if (new_value == null) {
+		new_value = this.config.hidden;
+
+		if (new_value == null) {
+			new_value = false;
+		}
+	} else {
+		this.config.hidden = new_value;
+		this.queueVisibilityUpdate();
+	}
+
+	return new_value;
+});
+
 /**
  * Prepare the schema & actions
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.2.1
  */
 Widget.constitute(function prepareSchema() {
 
@@ -126,6 +173,19 @@ Widget.constitute(function prepareSchema() {
 		array: true,
 	});
 
+	// Should this widget be hidden?
+	this.schema.addField('hidden', 'Boolean', {
+		title       : 'Should this widget be hidden?',
+		description : 'Hidden widgets are only visible during editing', 
+		default     : false,
+	});
+
+	this.schema.addField('language', 'String', {
+		title       : 'Language override',
+		description : 'If the content of this widget is in a different language, set it here', 
+		widget_config_editable : true,
+	});
+
 	// Add the "copy to clipboard" action
 	let copy = this.createAction('copy', 'Copy to clipboard');
 
@@ -167,6 +227,36 @@ Widget.constitute(function prepareSchema() {
 
 	save.setIcon('floppy-disk');
 
+	// Add the hide action
+	let hide = this.createAction('hide', 'Hide');
+
+	hide.close_actionbar = true;
+
+	hide.setHandler(function hideAction(widget_el, handle) {
+		widget_el.instance.is_hidden = true;
+	});
+
+	hide.setTester(function hideTester(widget_el, handle) {
+		return !widget_el.instance.is_hidden;
+	});
+
+	hide.setIcon('eye-slash');
+
+	// Add the show action
+	let show = this.createAction('show', 'Show');
+
+	show.close_actionbar = true;
+
+	show.setHandler(function showAction(widget_el, handle) {
+		widget_el.instance.is_hidden = false;
+	});
+
+	show.setTester(function showTester(widget_el, handle) {
+		return widget_el.instance.is_hidden;
+	});
+
+	show.setIcon('eye');
+
 	// Add the remove action
 	let remove = this.createAction('remove', 'Remove');
 
@@ -559,20 +649,34 @@ Widget.setMethod(function _createPopulatedWidgetElement() {
 	return element;
 });
 
+
+/**
+ * Populate the actual widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setMethod(function populateWidget() {
+	// Does nothing on its own
+});
+
 /**
  * Populate the contents of the widget
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.1
  */
-Widget.setMethod(function populateWidget() {
+Widget.setMethod(function finalizePopulatedWidget() {
+
+	const config = this.config;
 
-	if (this.config && this.config.wrapper_class_names) {
+	if (config.wrapper_class_names) {
 		let name,
 		    i;
 
-		let class_names = Array.cast(this.config.wrapper_class_names);
+		let class_names = Array.cast(config.wrapper_class_names);
 
 		for (i = 0; i < class_names.length; i++) {
 			name = class_names[i];
@@ -580,6 +684,12 @@ Widget.setMethod(function populateWidget() {
 		}
 	}
 
+	if (config.language) {
+		this.widget.setAttribute('lang', config.language);
+	} else {
+		this.widget.removeAttribute('lang');
+	}
+
 	let child_classes = this.widget.child_class;
 
 	if (child_classes) {
@@ -590,6 +700,68 @@ Widget.setMethod(function populateWidget() {
 			Hawkejs.addClasses(children[i], child_classes);
 		}
 	}
+
+	let child_roles = this.widget.child_role;
+
+	if (child_roles) {
+		let children = this.widget.children,
+		    child,
+		    i;
+		
+		for (i = 0; i < children.length; i++) {
+			child = children[i];
+
+			if (!child.hasAttribute('role')) {
+				child.setAttribute('role', child_roles);
+			}
+		}
+	}
+
+	this.checkVisibility();
+});
+
+/**
+ * Queue a widget element visibility update
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setMethod(function queueVisibilityUpdate() {
+
+	if (this._visibility_update_queue) {
+		clearTimeout(this._visibility_update_queue);
+	}
+
+	this._visibility_update_queue = setTimeout(() => {
+		this.checkVisibility();
+		this._visibility_update_queue = null;
+	}, 50);
+});
+
+/**
+ * Check the widget element visibility
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setMethod(function checkVisibility() {
+
+	let should_be_hidden = this.is_hidden;
+
+	if (this.editing) {
+		this.widget.hidden = false;
+	} else {
+		this.widget.hidden = should_be_hidden;
+	}
+
+	if (should_be_hidden) {
+		this.widget.classList.add('aw-hidden');
+	} else {
+		this.widget.classList.remove('aw-hidden');
+	}
+
 });
 
 /**
@@ -597,7 +769,7 @@ Widget.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.1
  */
 Widget.setMethod(async function startEditor() {
 
@@ -617,6 +789,8 @@ Widget.setMethod(async function startEditor() {
 	if (typeof this._startEditor == 'function') {
 		this._startEditor();
 	}
+
+	this.checkVisibility();
 });
 
 /**
@@ -624,7 +798,7 @@ Widget.setMethod(async function startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 Widget.setMethod(function stopEditor() {
 
@@ -638,7 +812,13 @@ Widget.setMethod(function stopEditor() {
 
 	if (typeof this._stopEditor == 'function') {
 		this._stopEditor();
+
+		// Remove the editing class again
+		// (some editors will try to restore the original classes)
+		this.widget.classList.remove('aw-editing');
 	}
+
+	this.checkVisibility();
 });
 
 /**
@@ -646,13 +826,14 @@ Widget.setMethod(function stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.1
  */
 Widget.setMethod(async function rerender() {
 
 	Hawkejs.removeChildren(this.widget);
 
 	await this.populateWidget();
+	await this.finalizePopulatedWidget();
 
 	if (this.editing) {
 		this.startEditor();

package/helper/widgets/01-container.js

@@ -46,6 +46,28 @@ Container.setMethod(function initContainer() {
 	this.populateWidget();
 });
 
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @return   {HTMLElement}
+ */
+Container.setMethod(function populateWidget() {
+
+	const widgets = this.config.widgets;
+
+	if (widgets?.length) {
+		let widget;
+
+		for (widget of widgets) {
+			this.widget.addWidget(widget.type, widget.config);
+		}
+	}
+});
+
 /**
  * Create an instance of the HTML element representing this widget
  *

package/helper/widgets/alchemy_tabs_widget.js

@@ -133,8 +133,6 @@ Tabs.setMethod(function populateWidget() {
 	}
 
 	Hawkejs.replaceChildren(this.widget, wrapper);
-
-	return populateWidget.super.call(this);
 });
 
 /**

package/helper/widgets/hawkejs_template.js

@@ -0,0 +1,60 @@
+/**
+ * The Widget Template class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @param    {Object}   data
+ */
+const Template = Function.inherits('Alchemy.Widget.Sourcecode', 'HawkejsTemplate');
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @param    {HTMLElement}   widget
+ */
+Template.setMethod(async function populateWidget() {
+
+	let input = this.config.sourcecode;
+
+	if (input) {
+		input = input.trim();
+	}
+
+	Hawkejs.removeChildren(this.widget);
+
+	if (input) {
+
+		let hawkejs = this.hawkejs_renderer.hawkejs,
+		    hash = Object.checksum(input),
+		    name = 'interpret_' + hash,
+		    fnc;
+
+		if (hawkejs.templates[name]) {
+			fnc = hawkejs.templates[name];
+		} else {
+			fnc = hawkejs.compile({
+				template_name : name,
+				template      : input
+			});
+		}
+
+		let variables = {};
+		let placeholder = this.hawkejs_renderer.addSubtemplate(fnc, {print: false}, variables);
+
+		// If the widget is already part of the DOM,
+		// it's being edited and we need to manually kickstart the renderer
+		if (Blast.isBrowser && document.body.contains(this.widget)) {
+			await placeholder.getContent();
+		}
+
+		this.widget.append(placeholder);
+	}
+});

package/helper/widgets/header.js

@@ -78,18 +78,18 @@ Header.constitute(function addActions() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @return   {Object}
  */
 Header.setMethod(function syncConfig() {
 
-	let header = this.widget.children[0],
+	let header = this.widget.querySelector('h1, h2, h3, h4, h5'),
 	    content = '',
 	    level = 1;
 
 	if (header) {
-		content = header.innerHTML;
+		content = header.textContent;
 		level = parseInt(header.tagName[1]);
 	}
 
@@ -104,7 +104,7 @@ Header.setMethod(function syncConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
@@ -113,11 +113,9 @@ Header.setMethod(function populateWidget() {
 	let level = this.config.level || 1;
 
 	let header = this.createElement('h' + level);
-	header.innerHTML = this.config.content || 'header level ' + level;
+	header.textContent = this.config.content || 'header level ' + level;
 
 	this.widget.append(header);
-
-	populateWidget.super.call(this);
 });
 
 /**

package/helper/widgets/html.js

@@ -1,3 +1,4 @@
+
 /**
  * The Widget HTML class
  *
@@ -23,19 +24,67 @@ Html.constitute(function prepareSchema() {
 	this.schema.addField('html', 'Html');
 });
 
+/**
+ * Start the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Html.setMethod(async function _startEditor() {
+
+	if (this.ckeditor) {
+		this.ckeditor.destroy();
+	}
+
+	let ckeditor_path = hawkejs.scene.exposed.ckeditor_path;
+
+	if (!ckeditor_path) {
+		return;
+	}
+
+	await hawkejs.require(ckeditor_path);
+
+	const options = {
+		toolbar: hawkejs.scene.exposed.ckeditor_toolbar,
+		updateSourceElementOnDestroy: true,
+		removePlugins: ['Markdown'],
+		simpleUpload: {
+			uploadUrl: alchemy.routeUrl('AlchemyWidgets#uploadImage'),
+			withCredentials: true,
+		},
+	};
+
+	let editor = await InlineEditor.create(this.widget, options);
+
+	this.ckeditor = editor;
+});
+
+/**
+ * Stop the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Html.setMethod(function _stopEditor() {
+	if (this.ckeditor) {
+		this.ckeditor.destroy();
+		this.ckeditor = null;
+	}
+});
+
 /**
  * Populate the widget
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
 Html.setMethod(function populateWidget() {
 	this.widget.innerHTML = this.config.html;
-
-	populateWidget.super.call(this);
 });
 
 /**

package/helper/widgets/markdown.js

@@ -28,14 +28,12 @@ Markdown.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
 Markdown.setMethod(function populateWidget() {
 
-	populateWidget.super.call(this);
-
 	let source = this.config.markdown || '';
 
 	if (!source) {

package/helper/widgets/partial.js

@@ -67,7 +67,7 @@ Partial.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
@@ -105,8 +105,6 @@ Partial.setMethod(async function populateWidget() {
 
 		this.widget.append(placeholder);
 	}
-
-	populateWidget.super.call(this);
 });
 
 /**

package/helper/widgets/sourcecode.js

@@ -37,14 +37,12 @@ Sourcecode.setProperty('sourcecode_field', 'sourcecode');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
 Sourcecode.setMethod(function populateWidget() {
 
-	populateWidget.super.call(this);
-
 	let source = this.config[this.sourcecode_field] || '';
 
 	if (!source) {

package/helper/widgets/table_of_contents.js

@@ -16,12 +16,10 @@ const Toc = Function.inherits('Alchemy.Widget', 'TableOfContents');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.2.0
+ * @version  0.2.1
  */
 Toc.setMethod(function populateWidget() {
 
-	populateWidget.super.call(this);
-
 	let toc = this.createElement('al-toc');
 
 	if (this.config.parent_selector) {

package/helper/widgets/text.js

@@ -28,7 +28,7 @@ Text.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
@@ -36,8 +36,6 @@ Text.setMethod(function populateWidget() {
 
 	let tag_name;
 
-	populateWidget.super.call(this);
-
 	if (this.widget.dataset.textElementTag) {
 		tag_name = this.widget.dataset.textElementTag;
 	}
@@ -57,13 +55,16 @@ Text.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 Text.setMethod(function _startEditor() {
 
-	let child = this.widget.children[0];
+	let child,
+	    i;
+
+	for (i = 0; i < this.widget.children.length; i++) {
+		child = this.widget.children[i];
 
-	if (child) {
 		child.setAttribute('contenteditable', true);
 	}
 });
@@ -73,13 +74,16 @@ Text.setMethod(function _startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 Text.setMethod(function _stopEditor() {
 
-	let child = this.widget.children[0];
+	let child,
+	    i;
+
+	for (i = 0; i < this.widget.children.length; i++) {
+		child = this.widget.children[i];
 
-	if (child) {
 		child.removeAttribute('contenteditable');
 	}
 });
@@ -89,17 +93,13 @@ Text.setMethod(function _stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @return   {Object}
  */
 Text.setMethod(function syncConfig() {
 
-	let child = this.widget.children[0];
-
-	if (child) {
-		this.config.content = child.textContent;
-	}
+	this.config.content = this.widget?.textContent;
 
 	return this.config;
 });

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-widget",
 	"description": "The widget plugin for the AlchemyMVC",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -11,7 +11,7 @@
 	],
 	"peerDependencies": {
 		"alchemymvc" : ">=1.2.0",
-		"alchemy-form": "~0.2.0"
+		"alchemy-form": "~0.2.1"
 	},
 	"repository": "11ways/alchemy-widget",
 	"license": "MIT",

package/view/elements/table_of_contents.hwk

@@ -1,3 +1,5 @@
+<% all_entries = self.entries %>
+
 {% macro printEntries %}
 	<ol>
 		{% each entries as entry %}
@@ -20,4 +22,12 @@
 	</li>
 {% /macro %}
 
-{% run printEntries entries=self.entries}
+{% run printEntries entries=all_entries %}
+
+{% if all_entries %}
+	<% self.classList.add('toc-has-content') %>
+{% else %}
+	<% self.classList.add('toc-is-empty') %>
+{% /if %}
+
+<% all_entries = null %>