@unicef-polymer/etools-form-builder 3.2.2 → 3.2.4

package/dist/rich-editor/rich-action.js

@@ -14,16 +14,16 @@ let RichAction = class RichAction extends LitElement {
     }
     render() {
         const hasItems = this.values.length > 0;
-        return html `<section style="color:${this.color}">
+        return html `<section style="color:${this.color}">
       ${hasItems
-            ? html ` <etools-dropdown
-            option-label="name"
-            option-value="value"
-            .options="${this.values}"
-            .selected="${this.selectedValue || this.values[0].value}"
-            dynamic-align
-            hide-search
-            trigger-value-change-event
+            ? html ` <etools-dropdown
+            option-label="name"
+            option-value="value"
+            .options="${this.values}"
+            .selected="${this.selectedValue || this.values[0].value}"
+            dynamic-align
+            hide-search
+            trigger-value-change-event
             @etools-selected-item-changed="${({ detail }) => {
                 if (detail === undefined || detail.selectedItem === null) {
                     return;
@@ -35,12 +35,12 @@ let RichAction = class RichAction extends LitElement {
                 else {
                     editorCommand(this.command, this.selectedValue);
                 }
-            }}"
-          >
+            }}"
+          >
           </etools-dropdown>`
-            : html `<etools-icon-button
-            ?active="${this.active}"
-            name="${this.icon}"
+            : html `<etools-icon-button
+            ?active="${this.active}"
+            name="${this.icon}"
             @click=${() => {
                 if (this.command) {
                     editorCommand(this.command, this.value);
@@ -51,29 +51,29 @@ let RichAction = class RichAction extends LitElement {
                         composed: true
                     }));
                 }
-            }}
-          ></etools-icon-button>`}
-      <div><slot></slot></div>
+            }}
+          ></etools-icon-button>`}
+      <div><slot></slot></div>
     </section>`;
     }
 };
-RichAction.styles = css `
-    section {
-      height: 100%;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-    etools-icon-button {
-      cursor: pointer;
-      width: 12px;
-      padding: 0px 8px;
-    }
-    etools-dropdown {
-      min-width: 140px;
-      margin-block-end: 2px;
-    }
+RichAction.styles = css `
+    section {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    etools-icon-button {
+      cursor: pointer;
+      width: 12px;
+      padding: 0px 8px;
+    }
+    etools-dropdown {
+      min-width: 140px;
+      margin-block-end: 2px;
+    }
   `;
 __decorate([
     property({ type: String })

package/dist/rich-editor/rich-text.d.ts

@@ -7,6 +7,7 @@ export declare class RichText extends LitElement {
     readonly: boolean;
     node: Element;
     value: string | null | undefined;
+    clean: any;
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
 }

package/dist/rich-editor/rich-text.js

@@ -4,21 +4,113 @@ import { property, customElement } from 'lit/decorators.js';
 import { fireEvent } from '../lib/utils/fire-custom-event';
 import './rich-toolbar';
 import './rich-viewer';
+import DOMPurify from 'dompurify';
 let RichText = class RichText extends LitElement {
     constructor() {
         super(...arguments);
         this.selection = null;
         this.readonly = false;
         this.node = document.createElement('div');
+        this.clean = {
+            FORBID_TAGS: ['style', 'script'],
+            FORBID_ATTR: [
+                'class',
+                'onauxclick',
+                'onafterprint',
+                'onbeforematch',
+                'onbeforeprint',
+                'onbeforeunload',
+                'onbeforetoggle',
+                'onblur',
+                'oncancel',
+                'oncanplay',
+                'oncanplaythrough',
+                'onchange',
+                'onclick',
+                'onclose',
+                'oncontextlost',
+                'oncontextmenu',
+                'oncontextrestored',
+                'oncopy',
+                'oncuechange',
+                'oncut',
+                'ondblclick',
+                'ondrag',
+                'ondragend',
+                'ondragenter',
+                'ondragleave',
+                'ondragover',
+                'ondragstart',
+                'ondrop',
+                'ondurationchange',
+                'onemptied',
+                'onended',
+                'onerror',
+                'onfocus',
+                'onformdata',
+                'onhashchange',
+                'oninput',
+                'oninvalid',
+                'onkeydown',
+                'onkeypress',
+                'onkeyup',
+                'onlanguagechange',
+                'onload',
+                'onloadeddata',
+                'onloadedmetadata',
+                'onloadstart',
+                'onmessage',
+                'onmessageerror',
+                'onmousedown',
+                'onmouseenter',
+                'onmouseleave',
+                'onmousemove',
+                'onmouseout',
+                'onmouseover',
+                'onmouseup',
+                'onoffline',
+                'ononline',
+                'onpagehide',
+                'onpageshow',
+                'onpaste',
+                'onpause',
+                'onplay',
+                'onplaying',
+                'onpopstate',
+                'onprogress',
+                'onratechange',
+                'onreset',
+                'onresize',
+                'onrejectionhandled',
+                'onscroll',
+                'onscrollend',
+                'onsecuritypolicyviolation',
+                'onseeked',
+                'onseeking',
+                'onselect',
+                'onslotchange',
+                'onstalled',
+                'onstorage',
+                'onsubmit',
+                'onsuspend',
+                'ontimeupdate',
+                'ontoggle',
+                'onunhandledrejection',
+                'onunload',
+                'onvolumechange',
+                'onwaiting',
+                'onwheel'
+            ]
+        };
     }
     render() {
         const { selection, readonly, node } = this;
-        return html `<main>
-      <rich-toolbar
-        part="rich-toolbar"
-        ?hidden="${this.readonly}"
-        .selection="${selection}"
-        .node="${node}"
+        return html `<main>
+      <rich-toolbar
+        part="rich-toolbar"
+        ?hidden="${this.readonly}"
+        .selection="${selection}"
+        .node="${node}"
         @set-content=${(e) => {
             var _a;
             const event = e;
@@ -27,20 +119,26 @@ let RichText = class RichText extends LitElement {
             const root = doc.querySelector('body');
             this.node.innerHTML = (_a = root === null || root === void 0 ? void 0 : root.innerHTML) !== null && _a !== void 0 ? _a : '';
             this.requestUpdate();
-        }}
-      ></rich-toolbar>
-      <rich-viewer
-        part="rich-viewer"
-        ?readonly="${readonly}"
-        .value="${this.value}"
+        }}
+      ></rich-toolbar>
+      <rich-viewer
+        part="rich-viewer"
+        ?readonly="${readonly}"
+        .value="${this.value}"
         @selection=${(e) => {
             const event = e;
             this.selection = event.detail.selection;
-            fireEvent(this, 'editor-changed', { value: event.detail.html });
-        }}
-        .node="${node}"
-      >
-      </rich-viewer>
+            let sanitizedHTML = event.detail.html || '';
+            // remove all mso- from styling
+            sanitizedHTML = sanitizedHTML.replace(/mso-[^:]+:[^;"]+;?/gi, '');
+            // remove all comments
+            sanitizedHTML = sanitizedHTML.replace(/<!--[\s\S]*?-->/g, '');
+            sanitizedHTML = DOMPurify.sanitize(sanitizedHTML, this.clean);
+            fireEvent(this, 'editor-changed', { value: sanitizedHTML });
+        }}
+        .node="${node}"
+      >
+      </rich-viewer>
     </main>`;
     }
     firstUpdated() {
@@ -58,54 +156,54 @@ let RichText = class RichText extends LitElement {
         }
     }
 };
-RichText.styles = css `
-    :host {
-      --rich-color: black;
-      --rich-background: white;
-      --rich-action-active-color: red;
-      --icon-size: 24px;
-      border: solid 1px var(--rich-border-color, #eeeeee);
-      background-color: #ffffff;
-      width: 100%;
-    }
-    main {
-      height: 100%;
-      width: 100%;
-      display: grid;
-      grid-template-rows: 1fr auto;
-      grid-template-columns: 1fr;
-      grid-template-areas:
-        'viewer'
-        'toolbar';
-    }
-
-    rich-toolbar {
-      grid-area: toolbar;
-      width: 100%;
-      background-color: var(--rich-toolbar-background, #ffffff);
-      color: var(--rich-color);
-      border-bottom: 1px solid var(--rich-toolbar-border-color, #eeeeee);
-    }
-
-    rich-viewer {
-      grid-area: viewer;
-      flex: 1;
-      width: 100%;
-      min-height: 40px;
-      overflow-y: auto;
-      background-color: var(--rich-background);
-      color: var(--rich-color);
-    }
-    main {
-      grid-template-rows: auto 1fr;
-      grid-template-areas:
-        'toolbar'
-        'viewer';
-    }
-    rich-toolbar {
-      border-top: none;
-      border-bottom: 1px solid var(--rich-color);
-    }
+RichText.styles = css `
+    :host {
+      --rich-color: black;
+      --rich-background: white;
+      --rich-action-active-color: red;
+      --icon-size: 24px;
+      border: solid 1px var(--rich-border-color, #eeeeee);
+      background-color: #ffffff;
+      width: 100%;
+    }
+    main {
+      height: 100%;
+      width: 100%;
+      display: grid;
+      grid-template-rows: 1fr auto;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        'viewer'
+        'toolbar';
+    }
+
+    rich-toolbar {
+      grid-area: toolbar;
+      width: 100%;
+      background-color: var(--rich-toolbar-background, #ffffff);
+      color: var(--rich-color);
+      border-bottom: 1px solid var(--rich-toolbar-border-color, #eeeeee);
+    }
+
+    rich-viewer {
+      grid-area: viewer;
+      flex: 1;
+      width: 100%;
+      min-height: 40px;
+      overflow-y: auto;
+      background-color: var(--rich-background);
+      color: var(--rich-color);
+    }
+    main {
+      grid-template-rows: auto 1fr;
+      grid-template-areas:
+        'toolbar'
+        'viewer';
+    }
+    rich-toolbar {
+      border-top: none;
+      border-bottom: 1px solid var(--rich-color);
+    }
   `;
 __decorate([
     property({ type: Object, hasChanged: () => true })

package/dist/rich-editor/rich-toolbar.js

@@ -8,100 +8,100 @@ import { getTranslation } from '../lib/utils/translate';
 let RichToolbar = class RichToolbar extends LitElement {
     render() {
         const tags = this.getTags();
-        return html `<header>
-      <rich-action icon="editor:format-bold" command="bold" ?active=${tags.includes('b')}></rich-action>
-      <rich-action icon="editor:format-italic" command="italic" ?active=${tags.includes('i')}></rich-action>
-      <rich-action icon="editor:format-underlined" command="underline" ?active=${tags.includes('u')}></rich-action>
-      <rich-action
-        icon="editor:format-align-left"
-        command="justifyleft"
-        ?active=${tags.includes('text-align-left')}
-      ></rich-action>
-      <rich-action
-        icon="editor:format-align-center"
-        command="justifycenter"
-        ?active=${tags.includes('text-align-center')}
-      ></rich-action>
-      <rich-action
-        icon="editor:format-align-right"
-        command="justifyright"
-        ?active=${tags.includes('text-align-right')}
-      ></rich-action>
-      <rich-action
-        icon="editor:format-list-numbered"
-        command="insertorderedlist"
-        ?active=${tags.includes('ol')}
-      ></rich-action>
-      <rich-action
-        icon="editor:format-list-bulleted"
-        command="insertunorderedlist"
-        ?active=${tags.includes('ul')}
-      ></rich-action>
-      <rich-action
-        icon="format_quote"
-        command="formatblock"
-        value="blockquote"
-        ?active=${tags.includes('blockquote')}
-      ></rich-action>
-      <!-- <rich-action icon="format_indent_decrease" command="outdent"></rich-action>
-      <rich-action icon="format_indent_increase" command="indent"></rich-action> -->
-      <rich-action
-        icon="editor:add-link"
-        ?active=${tags.includes('a')}
+        return html `<header>
+      <rich-action icon="editor:format-bold" command="bold" ?active=${tags.includes('b')}></rich-action>
+      <rich-action icon="editor:format-italic" command="italic" ?active=${tags.includes('i')}></rich-action>
+      <rich-action icon="editor:format-underlined" command="underline" ?active=${tags.includes('u')}></rich-action>
+      <rich-action
+        icon="editor:format-align-left"
+        command="justifyleft"
+        ?active=${tags.includes('text-align-left')}
+      ></rich-action>
+      <rich-action
+        icon="editor:format-align-center"
+        command="justifycenter"
+        ?active=${tags.includes('text-align-center')}
+      ></rich-action>
+      <rich-action
+        icon="editor:format-align-right"
+        command="justifyright"
+        ?active=${tags.includes('text-align-right')}
+      ></rich-action>
+      <rich-action
+        icon="editor:format-list-numbered"
+        command="insertorderedlist"
+        ?active=${tags.includes('ol')}
+      ></rich-action>
+      <rich-action
+        icon="editor:format-list-bulleted"
+        command="insertunorderedlist"
+        ?active=${tags.includes('ul')}
+      ></rich-action>
+      <rich-action
+        icon="format_quote"
+        command="formatblock"
+        value="blockquote"
+        ?active=${tags.includes('blockquote')}
+      ></rich-action>
+      <!-- <rich-action icon="format_indent_decrease" command="outdent"></rich-action>
+      <rich-action icon="format_indent_increase" command="indent"></rich-action> -->
+      <rich-action
+        icon="editor:add-link"
+        ?active=${tags.includes('a')}
         @action=${() => {
             const newLink = prompt('Write the URL here', 'https://');
             // Check if valid url
             if (newLink && newLink.match(/^(http|https):\/\/[^ "]+$/)) {
                 editorCommand('createlink', newLink);
             }
-        }}
-      >
-      </rich-action>
-      <rich-action icon="editor:unlink" command="unlink"></rich-action>
-      <rich-action
-        icon="editor:format-color-text"
-        .color="${this.formatColor}"
-        @action=${() => editorCommand('forecolor', this.formatColor)}
-      >
-        <etools-icon-button
-          class="arrow-icon"
-          name="arrow-drop-down"
-          @click="${() => this.fgColorInput.click()}"
-        ></etools-icon-button>
-        <input
-          type="color"
-          id="fg-color"
+        }}
+      >
+      </rich-action>
+      <rich-action icon="editor:unlink" command="unlink"></rich-action>
+      <rich-action
+        icon="editor:format-color-text"
+        .color="${this.formatColor}"
+        @action=${() => editorCommand('forecolor', this.formatColor)}
+      >
+        <etools-icon-button
+          class="arrow-icon"
+          name="arrow-drop-down"
+          @click="${() => this.fgColorInput.click()}"
+        ></etools-icon-button>
+        <input
+          type="color"
+          id="fg-color"
           @input=${(e) => {
             const input = e.target;
             this.formatColor = input.value;
             editorCommand('forecolor', input.value);
-        }}
-        />
-      </rich-action>
-      <rich-action
-        icon="editor:background-color"
-        .color="${this.backgroundColor}"
-        @action=${() => editorCommand('backcolor', this.backgroundColor)}
-      >
-        <etools-icon-button
-          class="arrow-icon"
-          name="arrow-drop-down"
-          @click="${() => this.bdColorInput.click()}"
-        ></etools-icon-button>
-        <input
-          type="color"
-          id="bd-color"
+        }}
+        />
+      </rich-action>
+      <rich-action
+        icon="editor:background-color"
+        .color="${this.backgroundColor}"
+        @action=${() => editorCommand('backcolor', this.backgroundColor)}
+      >
+        <etools-icon-button
+          class="arrow-icon"
+          name="arrow-drop-down"
+          @click="${() => this.bdColorInput.click()}"
+        ></etools-icon-button>
+        <input
+          type="color"
+          id="bd-color"
           @input=${(e) => {
             const input = e.target;
             this.backgroundColor = input.value;
             editorCommand('backcolor', input.value);
-        }}
-        />
-      </rich-action>
-      <rich-action
-        icon="title"
-        command="formatblock"
-        .selectedValue="${this.selectedFormatBlock}"
+        }}
+        />
+      </rich-action>
+      <rich-action
+        icon="title"
+        command="formatblock"
+        .selectedValue="${this.selectedFormatBlock}"
         .values=${[
             { name: getTranslation(this.language, 'NORMAL_TEXT'), value: '--' },
             { name: getTranslation(this.language, 'HEADING1'), value: 'h1' },
@@ -110,12 +110,12 @@ let RichToolbar = class RichToolbar extends LitElement {
             { name: getTranslation(this.language, 'HEADING4'), value: 'h4' },
             { name: getTranslation(this.language, 'PARAGRAPH'), value: 'p' },
             { name: getTranslation(this.language, 'PRE_FORMATTED'), value: 'pre' }
-        ]}
-      ></rich-action>
-      <rich-action
-        icon="editor:format-size"
-        command="fontsize"
-        .selectedValue="${this.selectedFontSize}"
+        ]}
+      ></rich-action>
+      <rich-action
+        icon="editor:format-size"
+        command="fontsize"
+        .selectedValue="${this.selectedFontSize}"
         .values=${[
             { name: getTranslation(this.language, 'FONT_SIZE'), value: '--' },
             { name: getTranslation(this.language, 'VERY_SMALL'), value: '1' },
@@ -123,14 +123,14 @@ let RichToolbar = class RichToolbar extends LitElement {
             { name: getTranslation(this.language, 'NORMAL'), value: '3' },
             { name: getTranslation(this.language, 'MEDIUM_LARGE'), value: '4' },
             { name: getTranslation(this.language, 'LARGE'), value: '5' }
-        ]}
-      ></rich-action>
-      <rich-action icon="undo" command="undo"></rich-action>
-      <rich-action icon="redo" command="redo"></rich-action>
-      <rich-action icon="editor:format-clear" command="removeFormat"></rich-action>
-      <!-- <rich-action icon="content_cut" command="cut"></rich-action> -->
-      <!-- <rich-action icon="content_copy" command="copy"></rich-action>
-      <rich-action icon="content_paste" command="paste"></rich-action> -->
+        ]}
+      ></rich-action>
+      <rich-action icon="undo" command="undo"></rich-action>
+      <rich-action icon="redo" command="redo"></rich-action>
+      <rich-action icon="editor:format-clear" command="removeFormat"></rich-action>
+      <!-- <rich-action icon="content_cut" command="cut"></rich-action> -->
+      <!-- <rich-action icon="content_copy" command="copy"></rich-action>
+      <rich-action icon="content_paste" command="paste"></rich-action> -->
     </header>`;
     }
     constructor() {
@@ -217,37 +217,37 @@ let RichToolbar = class RichToolbar extends LitElement {
         return tags;
     }
 };
-RichToolbar.styles = css `
-    header {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: flex-end;
-      justify-content: flex-start;
-      padding-inline-start: 12px;
-      flex-wrap: wrap;
-    }
-    input[type='color'] {
-      -webkit-appearance: none;
-      border: none;
-      width: 0;
-      height: 0;
-    }
-    input[type='color']::-webkit-color-swatch-wrapper {
-      padding: 0;
-    }
-    input[type='color']::-webkit-color-swatch {
-      border: none;
-    }
-    rich-action {
-      margin: 2px 4px 2px 2px;
-    }
-    rich-action[active] {
-      background-color: #e8e8e8;
-    }
-    .arrow-icon {
-      margin-left: -6px;
-    }
+RichToolbar.styles = css `
+    header {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      justify-content: flex-start;
+      padding-inline-start: 12px;
+      flex-wrap: wrap;
+    }
+    input[type='color'] {
+      -webkit-appearance: none;
+      border: none;
+      width: 0;
+      height: 0;
+    }
+    input[type='color']::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+    input[type='color']::-webkit-color-swatch {
+      border: none;
+    }
+    rich-action {
+      margin: 2px 4px 2px 2px;
+    }
+    rich-action[active] {
+      background-color: #e8e8e8;
+    }
+    .arrow-icon {
+      margin-left: -6px;
+    }
   `;
 __decorate([
     query('#fg-color')