alchemy-widget 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 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
+* Make `TableOfContents#entries` return a flat list and `TableOfContents#tree` a tree structure
+* Also take siblings of heading elements into account for the `TableOfContents` scrollspy
+
 ## 0.2.3 (2023-01-23)
 
 * Fix `List` widgets not having their content saved

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,326 +1,315 @@
-/**
- * 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.1
- */
-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 current_level = null,
-		    last_entry,
-		    elements = wrapper.querySelectorAll(this.elements_selector || 'h1,h2'),
-			element,
-			title,
-			i;
-
-		for (i = 0; i < elements.length; i++) {
-			element = elements[i];
-
-			if (!element.id) {
-
-				if (element.hawkejs_id) {
-					element.id = element.hawkejs_id;
-				}
-
-				if (!element.id) {
-					continue;
-				}
-			}
-
-			let title_element,
-			    starts_level,
-			    ends_level;
-
-			if (this.title_selector) {
-				title_element = element.querySelector(this.title_selector);
-			}
-
-			if (!title_element) {
-				title_element = element;
-			}
-
-			if (element.nodeName[0] == 'H' && isFinite(element.nodeName[1])) {
-				let heading_level = +element.nodeName[1];
-
-				if (current_level == null) {
-					current_level = heading_level;
-				} else if (heading_level > current_level) {
-					current_level++;
-
-					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) {
-					current_level--;
-
-					if (last_entry) {
-						last_entry.ends_level = true;
-					}
-				}
-			}
-
-			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;
-			}
-
-			last_entry = {
-				id           : element.id,
-				level        : current_level,
-				title        : title,
-				element      : element,
-				starts_level : starts_level,
-				ends_level   : ends_level,
-			};
-
-			result.push(last_entry);
-		}
-
-		let ended_level = false,
-		    entries = result,
-		    current_branch,
-		    current_nodes = [];
-
-		result = current_nodes;
-		last_entry = null;
-
-		for (let entry of entries) {
-
-			if (ended_level) {
-
-				while (entry.level >= current_branch.level) {
-					current_branch = current_branch.parent;
-					current_nodes = current_branch?.children || result;
-
-					if (!current_branch) {
-						current_branch = result[result.length - 1];
-						break;
-					}
-				}
-
-				ended_level = false;
-			}
-
-			if (!current_branch) {
-				current_branch = entry;
-			} else {
-				entry.parent = current_branch;
-			}
-
-			if (entry.starts_level) {
-
-				current_branch = last_entry;
-
-				if (!current_branch.children) {
-					current_branch.children = [];
-				}
-
-				current_nodes = current_branch.children;
-			}
-			
-			current_nodes.push(entry);
-
-			if (entry.ends_level) {
-				ended_level = true;
-				current_branch = entry.parent;
-				current_nodes = current_branch.children || result;
-
-				if (!current_branch) {
-					current_branch = result[result.length - 1];
-					break;
-				}
-			}
-
-			last_entry = entry;
-		}
-	}
-
-	return result;
-});
-
-/**
- * Added to the dom for the first time
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.2.1
- */
-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';
-
-		for (let entry of entries) {
-			const id = entry.target.getAttribute('id');
-
-			let query = `a[href="#${id}"]`,
-			    element = this.querySelector(query);
-			
-			if (!element) {
-				return;
-			}
-
-			if (entry.intersectionRatio > 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++;
-			}
-		}
-		
-	});
-
-	for (let entry of this.entries) {
-		observer.observe(entry.element);
-	}
+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');

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/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/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-widget",
 	"description": "The widget plugin for the AlchemyMVC",
-	"version": "0.2.3",
+	"version": "0.2.5",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",

package/view/elements/table_of_contents.hwk

@@ -1,4 +1,4 @@
-<% all_entries = self.entries %>
+<% all_entries = self.tree %>
 
 {% macro printEntries %}
 	<ol>