@burger-editor/frozen-patty 0.11.0 → 4.0.0-alpha.10

package/dist/set-value.js

@@ -1,136 +1,147 @@
+import { kebabCase } from '@burger-editor/utils';
+import { parseFields } from './parse-fields.js';
+import { propInElement, replaceNode, sanitizeAttributeValue, sanitizeHtml, } from './utils.js';
 /**
  * Set value to an element
  *
  * ```html
  * <div [target-attribute] data-[attr]="[name]:[target-attribute]"></div>
  * ```
- *
  * @param el A target element
  * @param name A label name
  * @param datum A datum of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
+ * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-export function setValue(el, name, datum, attr = 'field', filter) {
-    const bindingFormats = el.getAttribute(`data-${attr}`) || '';
-    for (let bindingFormat of bindingFormats.split(/\s*,\s*/)) {
-        bindingFormat = bindingFormat.trim();
-        /**
-         * 抽出した対象キー
-         */
-        let key;
-        /**
-         * 対象属性
-         *
-         * `null`の場合は`innerHTML`が対象となる
-         * ただし要素がinput要素の場合は`value`に設定
-         */
-        let targetAttr;
-        //
-        // 対象属性名の抽出
-        //
-        if (/^[_a-z-][\w-]*:[_a-z-][\w-]*(?:\([a-z-]+\))?/i.test(bindingFormat)) {
-            const splitKey = bindingFormat.split(':');
-            key = splitKey[0]?.trim() ?? '';
-            targetAttr = splitKey[1]?.trim() ?? '';
-        }
-        else {
-            key = bindingFormat.trim();
-            targetAttr = null;
-        }
-        //
-        // 対象キーが一致しなければスキップする
-        //
-        if (name !== key) {
-            continue;
-        }
-        if (filter) {
-            datum = filter(datum);
-        }
-        //
-        // 属性による対応
-        //
-        if (targetAttr) {
-            //
-            // style属性
-            //
-            if (/^style\([a-z-]+\)$/i.test(targetAttr)) {
-                const cssPropertyName = targetAttr.replace(/^style\(([a-z-]+)\)$/i, '$1');
-                let cssValue;
-                switch (cssPropertyName) {
-                    case 'background-image': {
-                        //
-                        // NGパターン
-                        // $changeDom.css(cssPropertyName, 'url("' + value + '")');
-                        //
-                        // cssメソッドを経由すると styleAPIを使用するので URLがホストを含めた絶対パスになる
-                        // デモサーバーから本番サーバーへの移行ができなくなってしまうので避ける
-                        // 単純な文字列を流し込む（setAttributeを利用）
-                        // urlはマルチバイト文字や空白記号を含まないはずであるがエスケープする
-                        const url = encodeURI(`${datum}`);
-                        cssValue = `url(${url})`;
-                        break;
-                    }
-                    //
-                    // TODO: 他にもvalueに単位が必要なケースなどに対応したい
-                    //
-                    default: {
-                        cssValue = `${datum}`;
-                    }
-                }
-                el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
-                //
-                // 属性
-                //
-            }
-            else if (el instanceof HTMLElement) {
-                setAttribute(el, targetAttr, datum);
-            }
-            else {
-                // SVGElement or more
-                el.setAttribute(targetAttr, `${datum}`);
+export function setValue(el, name, datum, attr = 'field', filter, xssSanitize = true) {
+    const rawValue = el.getAttribute(`data-${attr}`);
+    const fields = parseFields(rawValue ?? '');
+    const field = fields.find((field) => field.fieldName === name);
+    if (!field) {
+        return;
+    }
+    const { propName } = field;
+    if (filter) {
+        datum = filter(datum);
+    }
+    // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
+    if (!propName) {
+        setContent(el, datum, undefined, xssSanitize);
+        return;
+    }
+    if (propName === 'style' && el instanceof HTMLElement) {
+        el.style.cssText = `${datum}`;
+        return;
+    }
+    if (/^style\([a-z-]+\)$/i.test(propName)) {
+        const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
+        let cssValue;
+        switch (cssPropertyName) {
+            case 'background-image': {
+                // Using CSS method would create absolute URLs with host
+                // This would prevent migration from demo to production server
+                // Using simple string insertion (setAttribute) instead
+                // URL may not contain multibyte or whitespace characters, but escape anyway
+                const url = encodeURI(`${datum}`);
+                cssValue = `url(${url})`;
+                break;
             }
             //
-            // 属性指定がない場合
+            // TODO: Handle other cases where values need units
             //
-        }
-        else {
-            if (el instanceof HTMLInputElement ||
-                el instanceof HTMLSelectElement ||
-                el instanceof HTMLTextAreaElement) {
-                el.value = `${datum}`;
-            }
-            else {
-                el.innerHTML = `${datum}`;
+            default: {
+                cssValue = `${datum}`;
             }
         }
+        el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
+        return;
+    }
+    if (el instanceof HTMLElement) {
+        // HTMLElement
+        set(el, attr, propName, datum, xssSanitize);
+        return;
     }
+    // SVGElement or more
+    // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+    // Check attribute value if XSS protection is enabled
+    if (xssSanitize) {
+        const safeValue = sanitizeAttributeValue(propName, `${datum}`);
+        if (safeValue !== null) {
+            el.setAttribute(propName, safeValue);
+        }
+        return;
+    }
+    el.setAttribute(propName, `${datum}`);
 }
 /**
- * Set attribute
- *
- * @param el Target HTML element
- * @param attr Attribute name
- * @param datum Datum
  *
+ * @param el
+ * @param prefix
+ * @param name
+ * @param datum
+ * @param xssSanitize
  */
-function setAttribute(el, attr, datum) {
+function set(el, prefix, name, datum, xssSanitize = true) {
+    if (datum == null) {
+        el.removeAttribute(name);
+        return;
+    }
+    switch (name) {
+        case 'text': {
+            setContent(el, datum, false, xssSanitize);
+            return;
+        }
+        case 'html': {
+            setContent(el, datum, true, xssSanitize);
+            return;
+        }
+        case 'node': {
+            if (typeof datum !== 'string') {
+                return;
+            }
+            replaceNode(el, datum, prefix, xssSanitize);
+            return;
+        }
+    }
+    // If XSS protection is enabled
+    if (xssSanitize) {
+        // Don't set event handler attributes (starting with 'on')
+        if (name.toLowerCase().startsWith('on')) {
+            return;
+        }
+        const beforeSanitize = datum;
+        datum = sanitizeAttributeValue(name, datum);
+        // If sanitization results in null value (except when original value was null), don't change the value
+        if (datum === null && beforeSanitize !== null) {
+            return;
+        }
+    }
     if (datum == null) {
-        el.removeAttribute(attr);
+        el.removeAttribute(name);
         return;
     }
-    switch (attr) {
+    if (!name.startsWith('data-') && !propInElement(el, name)) {
+        const dataAttr = `data-${prefix}-${kebabCase(name)}`;
+        if (el.hasAttribute(dataAttr)) {
+            el.setAttribute(dataAttr, `${datum}`);
+        }
+        return;
+    }
+    switch (name) {
         case 'contenteditable': {
             switch (datum) {
+                case true:
                 case 'true':
                 case '': {
                     el.contentEditable = 'true';
                     break;
                 }
                 default: {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
-            break;
+            return;
         }
         case 'dir': {
             switch (datum) {
@@ -141,10 +152,10 @@ function setAttribute(el, attr, datum) {
                 }
                 // case 'auto':
                 default: {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
-            break;
+            return;
         }
         case 'draggable': {
             if (typeof datum === 'boolean') {
@@ -162,18 +173,22 @@ function setAttribute(el, attr, datum) {
                 }
                 // case 'auto':
                 default: {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
-            break;
+            return;
         }
         case 'hidden': {
+            if (datum === 'until-found') {
+                el.setAttribute(name, datum);
+                return;
+            }
             el.hidden = !!datum;
-            break;
+            return;
         }
         case 'spellcheck': {
             el.spellcheck = !!datum;
-            break;
+            return;
         }
         case 'tabindex': {
             let i;
@@ -187,16 +202,16 @@ function setAttribute(el, attr, datum) {
                 i = datum;
             }
             el.tabIndex = Number.isNaN(i) ? -1 : Math.floor(i);
-            break;
+            return;
         }
         case 'async': {
             if (el instanceof HTMLScriptElement) {
                 el.async = !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'autocomplete': {
             if (el instanceof HTMLInputElement || el instanceof HTMLFormElement) {
@@ -204,9 +219,9 @@ function setAttribute(el, attr, datum) {
                 el.autocomplete = datum ? `${datum}` : 'off';
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'autofocus': {
             if (el instanceof HTMLButtonElement ||
@@ -216,84 +231,84 @@ function setAttribute(el, attr, datum) {
                 el.autofocus = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'autoplay': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
                 el.autoplay = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'checked': {
             if (el instanceof HTMLInputElement) {
                 el.checked = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'cols': {
             if (el instanceof HTMLTextAreaElement) {
                 const cols = toInt(datum);
                 if (Number.isNaN(cols)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.cols = cols;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'colspan': {
             if (el instanceof HTMLTableCellElement) {
                 const colSpan = toInt(datum);
                 if (Number.isNaN(colSpan)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.colSpan = colSpan;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'controls': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
                 el.controls = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'default': {
             if (el instanceof HTMLTrackElement) {
                 el.default = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'defer': {
             if (el instanceof HTMLScriptElement) {
                 el.defer = !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'disabled': {
             if (el instanceof HTMLButtonElement ||
@@ -306,9 +321,9 @@ function setAttribute(el, attr, datum) {
                 el.disabled = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'download': {
             if (el instanceof HTMLAnchorElement) {
@@ -316,61 +331,61 @@ function setAttribute(el, attr, datum) {
                     el.download = `${datum}`;
                 }
                 else {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'high': {
             if (el instanceof HTMLMeterElement) {
                 const high = toInt(datum);
                 if (Number.isNaN(high)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.high = high;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'ismap': {
             if (el instanceof HTMLImageElement) {
                 el.isMap = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'loop': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
                 el.loop = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'low': {
             if (el instanceof HTMLMeterElement) {
                 const low = toInt(datum);
                 if (Number.isNaN(low)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.low = low;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'max': {
             if (el instanceof HTMLInputElement ||
@@ -378,88 +393,88 @@ function setAttribute(el, attr, datum) {
                 el instanceof HTMLProgressElement) {
                 const max = toInt(datum);
                 if (Number.isNaN(max)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.max = max;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'maxlength': {
             if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
                 const maxLength = toInt(datum);
                 if (Number.isNaN(maxLength)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.maxLength = Math.floor(maxLength);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'min': {
             if (el instanceof HTMLInputElement || el instanceof HTMLMeterElement) {
                 const min = toInt(datum);
                 if (Number.isNaN(min)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.min = min;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'multiple': {
             if (el instanceof HTMLInputElement || el instanceof HTMLSelectElement) {
                 el.multiple = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'novalidate': {
             if (el instanceof HTMLFormElement) {
                 el.noValidate = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
+            }
+            return;
+        }
+        case 'open': {
+            if (el instanceof HTMLDetailsElement) {
+                el.open = datum === '' ? true : !!datum;
+            }
+            else {
+                el.setAttribute(name, `${datum}`);
             }
             break;
         }
-        // ⚰️ Unsupported HTMLDetailsElement yet...
-        // case 'open': {
-        // 	if (el instanceof HTMLDetailsElement) {
-        // 		el.open = datum === '' ? true : !!datum;
-        // 	} else {
-        // 		el.setAttribute(attr, `${datum}`);
-        // 	}
-        // 	break;
-        // }
         case 'optimum': {
             if (el instanceof HTMLMeterElement) {
                 const optimum = toInt(datum);
                 if (Number.isNaN(optimum)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.optimum = Math.floor(optimum);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'preload': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
@@ -476,18 +491,18 @@ function setAttribute(el, attr, datum) {
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'readonly': {
             if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
                 el.readOnly = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'required': {
             if (el instanceof HTMLInputElement ||
@@ -496,93 +511,93 @@ function setAttribute(el, attr, datum) {
                 el.required = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'reversed': {
             if (el instanceof HTMLOListElement) {
                 el.reversed = datum === '' ? true : !!datum;
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'rows': {
             if (el instanceof HTMLTextAreaElement) {
                 const rows = toInt(datum);
                 if (Number.isNaN(rows)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.rows = Math.floor(rows);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'rowspan': {
             if (el instanceof HTMLTableCellElement) {
                 const rowSpan = toInt(datum);
                 if (Number.isNaN(rowSpan)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.rowSpan = Math.floor(rowSpan);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'size': {
             if (el instanceof HTMLInputElement || el instanceof HTMLSelectElement) {
                 const size = toInt(datum);
                 if (Number.isNaN(size)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.size = size;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'span': {
             if (el instanceof HTMLTableColElement) {
                 const span = toInt(datum);
                 if (Number.isNaN(span)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.span = span;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'start': {
             if (el instanceof HTMLOListElement) {
                 const start = toInt(datum);
                 if (Number.isNaN(start)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.start = start;
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'step': {
             if (el instanceof HTMLInputElement) {
@@ -592,16 +607,16 @@ function setAttribute(el, attr, datum) {
                 }
                 const step = toNum(datum);
                 if (Number.isNaN(step)) {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
                 else {
                     el.step = step.toString(10);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         case 'target': {
             if (el instanceof HTMLAnchorElement ||
@@ -611,13 +626,13 @@ function setAttribute(el, attr, datum) {
                     el.target = `${datum}`;
                 }
                 else {
-                    el.removeAttribute(attr);
+                    el.removeAttribute(name);
                 }
             }
             else {
-                el.setAttribute(attr, `${datum}`);
+                el.setAttribute(name, `${datum}`);
             }
-            break;
+            return;
         }
         // case 'accesskey':
         // case 'class':
@@ -669,10 +684,53 @@ function setAttribute(el, attr, datum) {
         // case 'wrap':
         // and Data-* attributes
         default: {
-            el.setAttribute(attr, `${datum}`);
+            el.setAttribute(name, `${datum}`);
         }
     }
 }
+/**
+ *
+ * @param el
+ * @param datum
+ * @param asHtml
+ * @param xssSanitize
+ */
+export function setContent(el, datum, asHtml = true, xssSanitize = true) {
+    if (el instanceof HTMLInputElement ||
+        el instanceof HTMLSelectElement ||
+        el instanceof HTMLTextAreaElement ||
+        el instanceof HTMLOutputElement) {
+        if (el instanceof HTMLInputElement &&
+            (el.type === 'radio' || el.type === 'checkbox')) {
+            if (typeof datum === 'boolean') {
+                el.checked = datum;
+                return;
+            }
+            el.checked = el.value === `${datum}`;
+            return;
+        }
+        el.value = `${datum}`;
+        return;
+    }
+    if (asHtml) {
+        // Sanitize HTML if XSS protection is enabled
+        const htmlStr = datum == null ? '' : `${datum}`;
+        if (xssSanitize && typeof htmlStr === 'string') {
+            // sanitizeHtml will now replace dangerous elements instead of removing them
+            el.innerHTML = sanitizeHtml(htmlStr);
+        }
+        else {
+            el.innerHTML = htmlStr;
+        }
+        return;
+    }
+    // No need to sanitize textContent (automatically escaped)
+    el.textContent = datum == null ? '' : `${datum}`;
+}
+/**
+ *
+ * @param datum
+ */
 function toNum(datum) {
     let i;
     if (typeof datum === 'boolean') {
@@ -686,6 +744,10 @@ function toNum(datum) {
     }
     return i;
 }
+/**
+ *
+ * @param datum
+ */
 function toInt(datum) {
     return Math.floor(toNum(datum));
 }