alchemy-widget 0.2.5 → 0.2.6

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 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

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/helper/widgets/00-widget.js

@@ -528,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
@@ -546,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;
 
@@ -582,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;
@@ -1008,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/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_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.5",
+	"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",