@flourish/sdk 3.19.0 → 3.20.0

package/README.md

@@ -168,6 +168,22 @@ document.body.style.fontFamily = state.body_font.url;
 #### `hidden`
 This type is for documenting state properties which should not be editable from the settings panel in the visualisation editor. Any property with a `hidden` type will not be editable within the visualisation editor interface.
 
+#### Text editor settings
+For `html` type settings, text editing functionality will automatically be added, such as making text bold or italic, adding a link, or referring to column headers from the data. You can add the `editor` property to override which editor functionalities to show. It accepts an object like this:
+
+```yaml
+- property: popup_text
+  name: Popup text
+  type: html
+  editor: # An object specifying the different text editor functions (omitting `editor` will only load style, url and flourish_embed settings)
+    style: true # bold/italic/title buttons
+    url: true # "Add a link" button
+    flourish_embed: true # Add flourish iframe
+    bindings: [ data.name, data.values ] # Adds buttons for column headers from dataset. Use `true` to add all data bindings
+    bindings_custom: # A list of custom bindings that don't appear in the columns (e.g. {{VALUE}} for dynamic values)
+      - ["Current value", "VALUE"] # The first item in array is display label, the second item is what is added to the text
+```
+
 #### Conditional settings
 Sometimes you might want to simplify the user experience for Flourish users by hiding some settings depending on whether they are needed or not. You can use the `show_if` and `hide_if` properties to control whether or not a setting should be displayed based on another setting’s value.
 

package/RELEASE_NOTES.md

@@ -1,3 +1,6 @@
+# 3.20.0
+* Add the `html` setting type, which gives you a rich text editor for a settings value
+
 # 3.19.0
 * Add the `is_premium` top level property in template.yml to indicate that this is a premium template
 

package/lib/validate_config.js

@@ -175,7 +175,7 @@ function validateImport(template_directory, setting) {
 	}
 }
 
-const VALID_SETTING_TYPES = new Set(["number", "string", "text", "code", "boolean", "color", "colors", "url", "font", "hidden"]);
+const VALID_SETTING_TYPES = new Set(["number", "string", "text", "html", "code", "boolean", "color", "colors", "url", "font", "hidden"]);
 function validateSetting(template_directory, conditional_settings, setting) {
 	if (typeof setting !== "object" || Array.isArray(setting)) {
 		throw new Error("template.yml: setting must be a mapping");
@@ -228,9 +228,12 @@ function validateSetting(template_directory, conditional_settings, setting) {
 		throw new Error(`template.yml setting “${property}” has unsupported width property: must be “full”, “half”, “quarter” or “three quarters”`);
 	}
 	if ("size" in setting) {
-		const can_set_size = setting.type == "code" || setting.type == "text" || (setting.type == "string" && setting.style == "buttons");
-		if (!can_set_size) throw new Error(`template.yml setting “${property}” has a “size” property; this requires type “text” or “code”, or type “string” with ”style: buttons”`);
-		else if (setting.size !== "large") throw new Error(`template.yml setting “${property}” has unsupported size property: must be “large”`);
+		const can_set_size = setting.type == "code" || setting.type == "text" || setting.type == "html" || (setting.type == "string" && setting.style == "buttons");
+		if (!can_set_size) throw new Error(`template.yml setting “${property}” has a “size” property; this requires type “text”, “code” or “html”, or type “string” with ”style: buttons”`);
+		else if (setting.size !== "large" && setting.size !== "small") throw new Error(`template.yml setting “${property}” has unsupported size property: must be “large” or “small”`);
+	}
+	if ("editor" in setting && setting.type != "html") {
+		throw new Error(`template.yml setting “${property}” has an “editor” field, but is not of type “html”`);
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/sdk",
-  "version": "3.19.0",
+  "version": "3.20.0",
   "description": "The Flourish SDK",
   "module": "src/index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "form-data": "^4.0.0",
     "handlebars": "^4.7.6",
     "js-yaml": "^3.14.0",
-    "minimist": "^1.2.5",
+    "minimist": "^1.2.6",
     "ncp": "^2.0.0",
     "node-fetch": "^2.6.7",
     "parse5": "^6.0.1",