alchemy-widget 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 0.2.6 (2023-02-26)
+
+* Replace *EasyMDE* markdown editor with *Toast editor*
+* Implement the `valueHasContent` method
+* Make sure widgets keep a link to the `conduit` instance
+
+## 0.2.5 (2023-02-11)
+
+* Add `code_type` field to the `Sourcecode` widget
+* Allow setting the source of an `HTML` widget via its config dialog
+* Make `paste` widget action only append copied widgets to a container
+* Add `replace` widget action to replace a widget with anything in the current clipboard
+
 ## 0.2.4 (2023-01-30)
 
 * Fix the tree structure generation of the `al-toc` element

package/assets/stylesheets/alchemy_widgets.scss

@@ -428,4 +428,20 @@ al-toc {
 
 .aw-hidden {
 	opacity: 0.8;
+}
+
+al-widget[type="markdown"] {
+	.markdown-editor-container {
+		background: white;
+	}
+
+	.ProseMirror {
+		font-size: 1.1rem;
+		--default-font-family: "Roboto", sans-serif;
+		font-family: var(--font-family, var(--default-font-family));
+	}
+
+	.toastui-editor-toolbar .toastui-editor-md-tab-container .toastui-editor-tabs {
+		display: none;
+	}
 }

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.1
+ * @version  0.2.5
  */
 Base.setMethod(async function copyConfigToClipboard() {
 
@@ -375,7 +375,10 @@ Base.setMethod(async function copyConfigToClipboard() {
 	}
 
 	value._altype = 'widget';
-	value.type = this.type;
+
+	if (this.type) {
+		value.type = this.type;
+	}
 
 	let dried = JSON.dry(value, null, '\t');
 
@@ -389,11 +392,11 @@ Base.setMethod(async function copyConfigToClipboard() {
 });
 
 /**
- * Get configuration from the clipboard and return it if it's valid
+ * Get any current configuration from the clipboard
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.1
+ * @version  0.2.5
  */
 Base.setMethod(async function getConfigFromClipboard() {
 
@@ -428,7 +431,35 @@ Base.setMethod(async function getConfigFromClipboard() {
 		return false;
 	}
 
-	if (result.type != this.type && !this.can_be_removed) {
+	return result;
+});
+
+/**
+ * Get configuration from the clipboard and return it if it's valid
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+Base.setMethod(async function getReplaceableConfigFromClipboard() {
+
+	let result = await this.getConfigFromClipboard();
+
+	if (result.type == this.type) {
+		return result;
+	}
+
+	if (result.type == 'container') {
+		return false;
+	}
+
+	if (!this.can_be_removed) {
+		return false;
+	}
+
+	let parent_widget = this.parent_container;
+
+	if (!parent_widget || !parent_widget.editing || !parent_widget.addWidget) {
 		return false;
 	}
 
@@ -440,13 +471,46 @@ Base.setMethod(async function getConfigFromClipboard() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.2.5
  */
 Base.setMethod(async function pasteConfigFromClipboard() {
 
-	let result = await this.getConfigFromClipboard();
+	let result = await this.getReplaceableConfigFromClipboard();
 
 	if (result) {
-		this.value = result;
+		this.replaceWithConfig(config);
+	}
+});
+
+/**
+ * Apply the given config
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.5
+ */
+Base.setMethod(async function replaceWithConfig(config) {
+
+	if (!config?.type) {
+		throw new Error('Unable to replace, config type is empty');
+	}
+
+	if (this.type == config.type) {
+		this.value = config;
+		return true;
+	}
+
+	let parent_widget = this.parent_container;
+
+	// If this isn't in an editable widget, it can't be replaced.
+	// (Might be a hard-coded widget type)
+	if (!parent_widget || !parent_widget.editing || !parent_widget.addWidget) {
+		return false;
+	}
+
+	let new_widget = parent_widget.addWidget(config.type, config.config);
+
+	if (new_widget) {
+		this.replaceWith(new_widget);
 	}
 });

package/element/05-widget_element.js

@@ -12,9 +12,16 @@ let Widget = Function.inherits('Alchemy.Element.Widget.Base', 'Widget');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.5
  */
-Widget.setAttribute('type');
+Widget.setAttribute('type', function getType(type) {
+
+	if (!type) {
+		type = this.instance.constructor.type_name;
+	}
+
+	return type;
+});
 
 /**
  * Mark this as a widget

package/element/10-container_elements.js

@@ -199,6 +199,8 @@ AlchemyWidgets.setMethod(function clear() {
  *
  * @param    {String}   type
  * @param    {Object}   config
+ *
+ * @return   {HTMLElement}
  */
 AlchemyWidgets.setMethod(function addWidget(type, config) {
 
@@ -229,6 +231,8 @@ AlchemyWidgets.setMethod(function addWidget(type, config) {
 	if (this.editing) {
 		element.startEditor();
 	}
+
+	return element;
 });
 
 /**

package/element/table_of_contents_element.js

@@ -1,315 +1,315 @@
-const RELATED_HEADING = Symbol('related_heading'),
-      RELATED_SIBLINGS = Symbol('related_siblings');
-
-/**
- * The table-of-contents element
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-const TableOfContents = Function.inherits('Alchemy.Element.App', 'TableOfContents');
-
-/**
- * The template to use for the content of this element
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setTemplateFile('elements/table_of_contents');
-
-/**
- * Set the actual tag name
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.2.0
- * @version  0.2.0
- */
-TableOfContents.setTagName('AL-TOC');
-
-/**
- * Set the content
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAssignedProperty('content');
-
-/**
- * The role of this element
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setRole('navigation');
-
-/**
- * The parent query
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAttribute('parent-selector');
-
-/**
- * The children query
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAttribute('children-selector');
-
-/**
- * The elements query
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAttribute('elements-selector');
-
-/**
- * The elements query
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAttribute('title-selector');
-
-/**
- * The class to add when intersecting (visible)
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-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.4
- */
-TableOfContents.setProperty(function entries() {
-
-	let result = [],
-		parent = this.parentElement,
-		wrapper;
-
-	if (this.parent_selector) {
-		parent = this.queryParents(this.parent_selector);
-	}
-
-	if (parent) {
-		wrapper = parent;
-	}
-
-	if (wrapper && this.children_selector) {
-		wrapper = wrapper.querySelector(this.children_selector);
-	}
-
-	if (wrapper) {
-
-		let heading_level = 0,
-		    heading,
-		    i;
-
-		let headings = wrapper.querySelectorAll(this.elements_selector || 'h1, h2, h3, h4, h5, h6'),
-		    nodes = [];
-
-		for (i = 0; i < headings.length; i++) {
-			heading = headings[i];
-
-			if (!heading.id) {
-
-				if (heading.hawkejs_id) {
-					heading.id = heading.hawkejs_id;
-				}
-
-				if (!heading.id) {
-					continue;
-				}
-			}
-
-			let title_element,
-			    title;
-
-			if (this.title_selector) {
-				title_element = heading.querySelector(this.title_selector);
-			}
-
-			if (!title_element) {
-				title_element = heading;
-			}
-
-			if (title_element.nodeName[0] == 'H' && isFinite(title_element.nodeName[1])) {
-				heading_level = +title_element.nodeName[1];
-			} else if (!heading_level) {
-				heading_level = 1;
-			}
-
-			title = (title_element.toc_title || title_element.textContent || '').trim();
-
-			if (this.truncate_length) {
-				title = title.truncate(this.truncate_length);
-			}
-
-			// Don't add empty titles
-			if (!title) {
-				continue;
-			}
-
-			let node = {
-				id       : heading.id,
-				level    : heading_level,
-				title    : title,
-				element  : heading,
-			};
-
-			nodes.push(node);
-		}
-
-		result = nodes;
-	}
-
-	return result;
-});
-
-/**
- * Get the entries tree
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.2.4
- * @version  0.2.4
- */
-TableOfContents.setProperty(function tree() {
-	return Blast.listToTree(this.entries);
-});
-
-/**
- * Added to the dom for the first time
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.2.4
- */
-TableOfContents.setMethod(async function introduced() {
-
-	await this.rerender();
-
-	const observer = new IntersectionObserver(entries => {
-
-		let class_name = this.intersection_class || 'visible',
-		    first_name = class_name + '-first';
-
-		let intersect_map = new Map();
-
-		for (let entry of entries) {
-			const heading = entry.target[RELATED_HEADING] || entry.target;
-			const id = heading.getAttribute('id');
-
-			if (!id) {
-				continue;
-			}
-
-			let query = `a[href="#${id}"]`,
-			    element = this.querySelector(query);
-
-			if (!element) {
-				continue;
-			}
-
-			let value = intersect_map.get(element) || 0;
-
-			if (entry.intersectionRatio > 0) {
-				value++;
-			} else {
-				let siblings = heading[RELATED_SIBLINGS];
-
-				if (siblings?.length) {
-					for (let sibling of siblings) {
-						if (sibling.isVisible(-150)) {
-							value++;
-							break;
-						}
-					}
-				}
-			}
-
-			intersect_map.set(element, value);
-		};
-
-		for (let [element, value] of intersect_map) {
-
-			if (value > 0) {
-				element.classList.add(class_name);
-			} else {
-				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++;
-			}
-		}
-	});
-
-	let entries = this.entries,
-	    elements = [];
-
-	for (let entry of entries) {
-		observer.observe(entry.element);
-		elements.push(entry.element);
-	}
-
-	for (let element of elements) {
-
-		element[RELATED_SIBLINGS] = [];
-		let sibling = element.nextElementSibling;
-
-		while (sibling) {
-
-			if (elements.includes(sibling)) {
-				break;
-			}
-
-			element[RELATED_SIBLINGS].push(sibling);
-			sibling[RELATED_HEADING] = element;
-			observer.observe(sibling);
-			sibling = sibling.nextElementSibling;
-		}
-	}
+const RELATED_HEADING = Symbol('related_heading'),
+      RELATED_SIBLINGS = Symbol('related_siblings');
+
+/**
+ * The table-of-contents element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+const TableOfContents = Function.inherits('Alchemy.Element.App', 'TableOfContents');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setTemplateFile('elements/table_of_contents');
+
+/**
+ * Set the actual tag name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TableOfContents.setTagName('AL-TOC');
+
+/**
+ * Set the content
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAssignedProperty('content');
+
+/**
+ * The role of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setRole('navigation');
+
+/**
+ * The parent query
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAttribute('parent-selector');
+
+/**
+ * The children query
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAttribute('children-selector');
+
+/**
+ * The elements query
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAttribute('elements-selector');
+
+/**
+ * The elements query
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAttribute('title-selector');
+
+/**
+ * The class to add when intersecting (visible)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+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.4
+ */
+TableOfContents.setProperty(function entries() {
+
+	let result = [],
+		parent = this.parentElement,
+		wrapper;
+
+	if (this.parent_selector) {
+		parent = this.queryParents(this.parent_selector);
+	}
+
+	if (parent) {
+		wrapper = parent;
+	}
+
+	if (wrapper && this.children_selector) {
+		wrapper = wrapper.querySelector(this.children_selector);
+	}
+
+	if (wrapper) {
+
+		let heading_level = 0,
+		    heading,
+		    i;
+
+		let headings = wrapper.querySelectorAll(this.elements_selector || 'h1, h2, h3, h4, h5, h6'),
+		    nodes = [];
+
+		for (i = 0; i < headings.length; i++) {
+			heading = headings[i];
+
+			if (!heading.id) {
+
+				if (heading.hawkejs_id) {
+					heading.id = heading.hawkejs_id;
+				}
+
+				if (!heading.id) {
+					continue;
+				}
+			}
+
+			let title_element,
+			    title;
+
+			if (this.title_selector) {
+				title_element = heading.querySelector(this.title_selector);
+			}
+
+			if (!title_element) {
+				title_element = heading;
+			}
+
+			if (title_element.nodeName[0] == 'H' && isFinite(title_element.nodeName[1])) {
+				heading_level = +title_element.nodeName[1];
+			} else if (!heading_level) {
+				heading_level = 1;
+			}
+
+			title = (title_element.toc_title || title_element.textContent || '').trim();
+
+			if (this.truncate_length) {
+				title = title.truncate(this.truncate_length);
+			}
+
+			// Don't add empty titles
+			if (!title) {
+				continue;
+			}
+
+			let node = {
+				id       : heading.id,
+				level    : heading_level,
+				title    : title,
+				element  : heading,
+			};
+
+			nodes.push(node);
+		}
+
+		result = nodes;
+	}
+
+	return result;
+});
+
+/**
+ * Get the entries tree
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.4
+ * @version  0.2.4
+ */
+TableOfContents.setProperty(function tree() {
+	return Blast.listToTree(this.entries);
+});
+
+/**
+ * Added to the dom for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.2.4
+ */
+TableOfContents.setMethod(async function introduced() {
+
+	await this.rerender();
+
+	const observer = new IntersectionObserver(entries => {
+
+		let class_name = this.intersection_class || 'visible',
+		    first_name = class_name + '-first';
+
+		let intersect_map = new Map();
+
+		for (let entry of entries) {
+			const heading = entry.target[RELATED_HEADING] || entry.target;
+			const id = heading.getAttribute('id');
+
+			if (!id) {
+				continue;
+			}
+
+			let query = `a[href="#${id}"]`,
+			    element = this.querySelector(query);
+
+			if (!element) {
+				continue;
+			}
+
+			let value = intersect_map.get(element) || 0;
+
+			if (entry.intersectionRatio > 0) {
+				value++;
+			} else {
+				let siblings = heading[RELATED_SIBLINGS];
+
+				if (siblings?.length) {
+					for (let sibling of siblings) {
+						if (sibling.isVisible(-150)) {
+							value++;
+							break;
+						}
+					}
+				}
+			}
+
+			intersect_map.set(element, value);
+		};
+
+		for (let [element, value] of intersect_map) {
+
+			if (value > 0) {
+				element.classList.add(class_name);
+			} else {
+				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++;
+			}
+		}
+	});
+
+	let entries = this.entries,
+	    elements = [];
+
+	for (let entry of entries) {
+		observer.observe(entry.element);
+		elements.push(entry.element);
+	}
+
+	for (let element of elements) {
+
+		element[RELATED_SIBLINGS] = [];
+		let sibling = element.nextElementSibling;
+
+		while (sibling) {
+
+			if (elements.includes(sibling)) {
+				break;
+			}
+
+			element[RELATED_SIBLINGS].push(sibling);
+			sibling[RELATED_HEADING] = element;
+			observer.observe(sibling);
+			sibling = sibling.nextElementSibling;
+		}
+	}
 });

package/helper/widgets/00-widget.js

@@ -148,7 +148,7 @@ Widget.enforceProperty(function is_hidden(new_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.1
+ * @version  0.2.5
  */
 Widget.constitute(function prepareSchema() {
 
@@ -197,18 +197,57 @@ Widget.constitute(function prepareSchema() {
 		return true;
 	});
 
-	copy.setIcon('clipboard');
+	copy.setIcon('copy');
 	copy.close_actionbar = true;
 
+	// Add the "replace from clipboard" action
+	let replace = this.createAction('replace', 'Replace from clipboard');
+
+	replace.setHandler(async function replaceAction(widget_el, handle) {
+
+		let config = await widget_el.getReplaceableConfigFromClipboard();
+
+		if (!config) {
+			return false;
+		}
+
+		widget_el.replaceWithConfig(config);
+	});
+
+	replace.setTester(function replaceActionTester(widget_el, handle) {
+		return widget_el.getReplaceableConfigFromClipboard();
+	});
+
+	replace.setIcon('repeat');
+	replace.close_actionbar = true;
+
 	// Add the "paste from clipboard" action
-	let paste = this.createAction('paste', 'Replace from clipboard');
+	let paste = this.createAction('paste', 'Paste from clipboard');
+
+	paste.setHandler(async function pasteAction(widget_el, handle) {
 
-	paste.setHandler(function pasteAction(widget_el, handle) {
-		return widget_el.pasteConfigFromClipboard();
+		let config = await widget_el.getConfigFromClipboard();
+
+		if (!config) {
+			return false;
+		}
+
+		widget_el.addWidget(config.type, config.config);
 	});
 
-	paste.setTester(function pasteAction(widget_el, handle) {
-		return widget_el.getConfigFromClipboard();
+	paste.setTester(async function pasteActionTester(widget_el, handle) {
+
+		if (!widget_el.addWidget) {
+			return false;
+		}
+
+		let config = await widget_el.getConfigFromClipboard();
+
+		if (!config || config.type == 'container') {
+			return false;
+		}
+
+		return true;
 	});
 
 	paste.setIcon('paste');
@@ -489,7 +528,7 @@ Widget.setStatic(function unDry(obj, custom_method, whenDone) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.6
  *
  * @param    {String}   type     The typeof widget to create
  * @param    {Object}   config   The optional config object
@@ -507,6 +546,10 @@ Widget.setMethod(function createChildWidget(type, config) {
 	// Create the instance
 	let instance = new WidgetClass(config);
 
+	if (this.conduit) {
+		instance.conduit = this.conduit;
+	}
+
 	// Set the parent instance!
 	instance.parent_instance = this;
 
@@ -543,12 +586,16 @@ Widget.setMethod(function toDry() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.2.6
  *
  * @return   {Array}
  */
 Widget.setMethod(async function getActionbarActions() {
 
+	if (!this.constructor.actions) {
+		return [];
+	}
+
 	let sorted = this.constructor.actions.getSorted(),
 	    result = [],
 	    action;
@@ -969,4 +1016,41 @@ Widget.setMethod(function getHandle() {
 	}
 
 	return element;
+});
+
+/**
+ * See if the given value is considered not-empty for this widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ *
+ * @return   {Boolean}
+ */
+Widget.setMethod(function valueHasContent(value) {
+
+	if (!value || typeof value != 'object') {
+		return false;
+	}
+
+	let entry,
+	    key;
+
+	for (key in value) {
+		entry = value[key];
+
+		if (entry) {
+			if (Array.isArray(entry) && entry.length) {
+				return true;
+			}
+
+			if (entry === '') {
+				continue;
+			}
+
+			return true;
+		}
+	}
+
+	return false;
 });

package/helper/widgets/html.js

@@ -17,11 +17,15 @@ const Html = Function.inherits('Alchemy.Widget', 'Html');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.5
  */
 Html.constitute(function prepareSchema() {
 	// The actual HTML contents
-	this.schema.addField('html', 'Html');
+	this.schema.addField('html', 'Html', {
+		title                  : 'HTML',
+		description            : 'The HTML sourcecode',
+		widget_config_editable : true,
+	});
 });
 
 /**
@@ -79,12 +83,24 @@ Html.setMethod(function _stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.1
+ * @version  0.2.5
  *
  * @param    {HTMLElement}   widget
  */
 Html.setMethod(function populateWidget() {
-	this.widget.innerHTML = this.config.html;
+
+	let html = this.config.html;
+
+	if (html == null) {
+		html = '';
+	}
+
+	if (this.ckeditor) {
+		
+		this.ckeditor.setData(html);
+	} else {
+		this.widget.innerHTML = html;
+	}
 });
 
 /**

package/helper/widgets/markdown.js

@@ -52,21 +52,35 @@ Markdown.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.2.6
  */
 Markdown.setMethod(async function _startEditor() {
 
 	Hawkejs.removeChildren(this.widget);
 
-	hawkejs.scene.enableStyle('https://unpkg.com/easymde/dist/easymde.min.css');
-	await hawkejs.require('https://unpkg.com/easymde/dist/easymde.min.js');
+	hawkejs.scene.enableStyle('https://uicdn.toast.com/editor/latest/toastui-editor.min.css');
+	await hawkejs.require('https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js');
 
-	let element = this.createElement('textarea');
+	const Editor = toastui.Editor
+
+	let element = this.createElement('div');
+	element.classList.add('markdown-editor-container');
 	this.widget.append(element);
-	element.value = this.config.markdown || '';
 
-	const easyMDE = new EasyMDE({element});
-	this.easy_mde = easyMDE;
+	const editor = new Editor({
+		el                 : element,
+		height             : '900px',
+		initialEditType    : 'markdown',
+		previewStyle       : 'vertical',
+		usageStatistics    : false,
+		autofocus          : false,
+		previewStyle       : 'global',
+		hideModeSwitch     : true,
+		initialEditType    : 'markdown',
+	});
+
+	this.toast_editor = editor;
+	editor.setMarkdown(this.config.markdown || '');
 });
 
 /**
@@ -74,12 +88,19 @@ Markdown.setMethod(async function _startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.2
+ * @version  0.2.6
  */
 Markdown.setMethod(function _stopEditor() {
 
 	Hawkejs.removeChildren(this.widget);
-	this.easy_mde = null;
+
+	if (this.toast_editor) {
+		try {
+			this.toast_editor.destroy();
+		} catch (err) {}
+	}
+
+	this.toast_editor = null;
 
 	return this.loadWidget();
 });
@@ -89,7 +110,7 @@ Markdown.setMethod(function _stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.2.6
  *
  * @return   {Object}
  */
@@ -97,8 +118,8 @@ Markdown.setMethod(function syncConfig() {
 
 	let value = '';
 
-	if (this.easy_mde) {
-		value = this.easy_mde.value();
+	if (this.toast_editor) {
+		value = this.toast_editor.getMarkdown();
 	}
 
 	this.config.markdown = value;

package/helper/widgets/sourcecode.js

@@ -16,11 +16,18 @@ const Sourcecode = Function.inherits('Alchemy.Widget', 'Sourcecode');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.5
  */
 Sourcecode.constitute(function prepareSchema() {
 	// The actual sourcecode contents
 	this.schema.addField('sourcecode', 'Text');
+
+	// The type of sourcecode
+	this.schema.addField('code_type', 'String', {
+		title                  : 'Code type',
+		description            : 'The type of sourcecode',
+		widget_config_editable : true,
+	});
 });
 
 /**
@@ -37,7 +44,7 @@ Sourcecode.setProperty('sourcecode_field', 'sourcecode');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.1
+ * @version  0.2.5
  *
  * @param    {HTMLElement}   widget
  */
@@ -53,7 +60,12 @@ Sourcecode.setMethod(function populateWidget() {
 	    pre = this.createElement('pre');
 
 	pre.append(code);
-	code.innerText = source;
+	code.textContent = source;
+
+	if (this.config.code_type) {
+		code.classList.add('language-' + this.config.code_type);
+		pre.classList.add('language-' + this.config.code_type);
+	}
 
 	this.widget.append(pre);
 });

package/helper_field/widget.js

@@ -5,7 +5,7 @@
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.6
  */
 const WidgetField = Function.inherits('Alchemy.Field.Schema', function Widget(schema, name, options) {
 
@@ -17,12 +17,15 @@ const WidgetField = Function.inherits('Alchemy.Field.Schema', function Widget(sc
 		options.type = 'text';
 	}
 
+	// Already set the options (they'll be changed by the super call too though)
+	this.options = options;
+
 	// A custom schema should NOT be passed to this class, this class uses
 	// a fixed schema that should not be altered.
 	// But because that's exactly what happens when cloning (like preparing
 	// the data to be sent to Hawkejs) we have to allow it anyway
 	if (!options.schema) {
-		let WidgetClass = Classes.Alchemy.Widget.Widget.getMember(options.type),
+		let WidgetClass = this.widget_class,
 		    sub_schema = WidgetClass.schema.clone();
 
 		options.schema = sub_schema;
@@ -31,6 +34,24 @@ const WidgetField = Function.inherits('Alchemy.Field.Schema', function Widget(sc
 	Widget.super.call(this, schema, name, options);
 });
 
+/**
+ * Get the constructor of the widget class
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ *
+ * @type   {Function}
+ */
+WidgetField.setProperty(function widget_class() {
+
+	if (!this.options?.type) {
+		return;
+	}
+
+	return Classes.Alchemy.Widget.Widget.getMember(this.options.type)
+});
+
 /**
  * Cast the given value to this field's type
  *
@@ -75,3 +96,33 @@ WidgetField.setMethod(function toDry() {
 
 	return {value};
 });
+
+/**
+ * See if the given value is considered not-empty for this field
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ *
+ * @param    {Mixed}   value
+ *
+ * @return   {Boolean}
+ */
+WidgetField.setMethod(function valueHasContent(value) {
+
+	if (!value) {
+		return false;
+	}
+
+	let constructor = this.widget_class;
+
+	if (!constructor) {
+		return true;
+	}
+
+	value = this.cast(value);
+
+	let instance = new constructor();
+
+	return instance.valueHasContent(value);
+});

package/helper_field/widgets.js

@@ -36,4 +36,28 @@ const WidgetsField = Function.inherits('Alchemy.Field.Schema', function Widgets(
 WidgetsField.setMethod(function getOptionsForDrying() {
 	let {schema, ...options} = this.options;
 	return options;
+});
+
+/**
+ * See if the given value is considered not-empty for this field
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ *
+ * @param    {Mixed}   value
+ *
+ * @return   {Boolean}
+ */
+WidgetsField.setMethod(function valueHasContent(value) {
+
+	if (!value) {
+		return false;
+	}
+
+	if (!value.widgets?.length) {
+		return false;
+	}
+
+	return true;
 });

package/package.json

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