@rws-framework/client 2.18.11 → 2.18.13

package/cfg/build_steps/webpack/_loaders.js

@@ -22,7 +22,7 @@ function getRWSLoaders(packageDir, executionDir, tsConfigData, appRootDir, entry
       test: /\.json$/,
       type: 'javascript/auto',
       include: [
-        path.resolve(appRootDir, 'node_modules/entities/lib/maps')
+        path.resolve(appRootDir, 'node_modules/entities/lib/maps'),        
       ],
     },
     {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.18.11",
+    "version": "2.18.13",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -32,7 +32,6 @@
         "@types/moment": "^2.13.0",
         "deepmerge": "^4.3.1",
         "dragula": "^3.7.3",
-        "entities": "6.0.0",
         "he": "^1.2.0",
         "json5": "^2.2.3",
         "lodash": "^4.17.21",
@@ -45,10 +44,9 @@
         "url-router": "^13.0.0",
         "uuid": "^9.0.1",
         "v4": "^0.0.1",
-        "scss-loading-animations": "^1.0.1"
+        "scss-loading-animations": "^1.0.1"        
     },
-    "devDependencies": {
-        "sanitize-html": "^2.16.0",
+    "devDependencies": {        
         "sass": "^1.87.0",
         "html-webpack-plugin": "^5.6.3",
         "css-minimizer-webpack-plugin": "^7.0.2",

package/src/components/index.ts

@@ -5,6 +5,7 @@ import { RWSApiResource } from './rws/rws-api-resource/component';
 import { ReFormer } from './rws/reformer/component';
 import { RWSTable } from './rws/rws-table/component';
 import { RWSModal } from './rws/rws-modal/component';
+import { LineSplitter } from './rws/line-splitter/component';
 
 
 function declareRWSComponents(parted: boolean = false): void
@@ -15,6 +16,7 @@ function declareRWSComponents(parted: boolean = false): void
         RWSLoader;
         RWSTable;
         RWSModal;
+        LineSplitter;
 
         RWSApiResource;
         ReFormer;

package/src/components/rws/line-splitter/component.ts

@@ -0,0 +1,90 @@
+import { RWSViewComponent } from '../../../components/_component';
+import { RWSView } from '../../../components/_decorator';
+import { observable, attr } from '@microsoft/fast-element';
+
+import { ViewTemplate } from '@microsoft/fast-element';
+
+@RWSView('line-splitter', { debugPackaging: false })
+class LineSplitter extends RWSViewComponent {
+  @observable text: string = '';
+  @observable content: string | ViewTemplate = '<span class="dots">.</span>';
+  @observable query: string = '';
+  
+  @attr allowedTags = '';
+  @attr addClass = '';  
+
+  private allowedHTMLTags: string[] = ['dl', 'dt', 'dd', 'br', 'blockquote', 'span', 'p', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'strong', 'i', 'small', 'u'];
+
+
+  parseTags(line: string): string | ViewTemplate
+  {     
+    const componentAllowedTags: string[] = this.allowedHTMLTags.concat(this.allowedTags.split(','));  
+
+    let output = this.domService.sanitizeHTML(line, { ADD_TAGS: [], ALLOWED_TAGS: componentAllowedTags });      
+
+    output = output.replace(/<.*>([\s\S]*?)<\/.*>/g, (match: string) => {
+        return match.replace(/\n/g, '');
+    });
+    output = output.replace(/\n\n/g, '\n');
+    output = output.replace(/\n/g, '<br/>');
+    output = output.replace(/<\/p><br\/>/g, '</p>');
+    output = output                
+        .replace(/<br\/><h([1-3])>/g, '<h$1>')
+        .replace(/<\/h([1-3])><br\/>/g, '</h$1>');
+
+    if(this.query !== null || this.query !== '')    {
+      const query: string[] = this.query ? this.query.split(',').map(word => word.trim()) : []; 
+
+      query.forEach(word => {
+          // Create a regex for the word, ensuring it's case-insensitive and doesn't affect existing HTML tags
+          const regex = new RegExp(`(${word})(?![^<]*>)`, 'gi');
+          output = output.replace(regex, '<span class="tagged">$1</span>');
+      });
+    }
+   
+
+    return output;
+  }
+
+  splitLines(): void
+  {    
+      if([". ", ". . ", ". . . "].includes(this.text)){
+          this.content = `<span class="dots">${this.text}</span>`
+      }else{
+        this.content = this.parseTags(this.text);
+      }
+  }
+
+  textChanged(oldVal: string, newVal: string)
+  {    
+      if(newVal){        
+        this.text = newVal;         
+        this.splitLines();
+      }
+  }
+
+  addClassChanged(oldVal: string, newVal: string)
+  {
+      if(newVal){
+          this.addClass = newVal;
+      }
+  }
+
+  connectedCallback(): void {
+      super.connectedCallback();
+
+      if(this.text){
+        this.splitLines();
+      }
+  }
+
+  queryChanged(oldVal: string, newVal: string){
+    if(newVal){
+      this.splitLines();
+    }
+  }
+}
+
+LineSplitter.defineComponent();
+
+export { LineSplitter };

package/src/components/rws/line-splitter/styles/_tags.scss

@@ -0,0 +1,104 @@
+
+
+$bgcolor: var(--line-splitter-bgcolor, #CCC);
+$maincolor: var(--line-splitter-maincolor, #333);;
+$altcolor: #fff;
+
+blockquote {
+    position: relative;
+    font-family: 'Barlow Condensed', sans-serif;
+    max-width: 620px;
+    margin: 0 auto 80px auto;
+    align-self: center;
+    display: inline-block;
+    width: 100%;
+
+    .quote-cnt {
+        font-family: 'Abril Fatface', cursive;
+        position: relative; /* for pseudos */
+        color: $maincolor;
+        font-size: 1.4rem;    
+        line-height: 1;
+        margin: 0;
+        border: 2px solid #fff;
+        border: solid 2px;
+        border-radius:20px;
+        padding: 25px;
+        font-weight: bold;
+
+        .native {
+            font-weight: bold;
+        }
+
+        .native + .pronounciation {
+            color: $altcolor;
+
+            font-weight: normal;
+            font-size: 0.9rem; 
+            margin-left: 15px;   
+        }
+    
+        &:after {
+            content:"";
+            position: absolute;
+            border: 2px solid $maincolor;
+            border-radius: 0 50px 0 0;
+            width: 60px;
+            height: 60px;
+            bottom: -62px;
+            left: 50px;
+            border-bottom: none;
+            border-left: none;
+            z-index: 3; 
+        }
+    
+        &:before {
+            content:"";
+            position: absolute;
+            width: 80px;
+            border: 6px solid $bgcolor;
+            bottom: -3px;
+            left: 50px;
+            z-index: 2;
+        }
+    }
+}
+
+dl{
+
+    @include grid-container();
+    @include grid-flex-align-items(center, center);
+
+    dt{        
+        text-align: right;
+        font-weight: bold;
+        font-size: 1.2rem; 
+        padding: 0 15px;
+        margin-bottom: 80px;
+
+        @include grid-column(6);
+
+        &:after{
+            content: ":";       
+            font-weight: bold;
+            font-size: 1.2rem;                  
+        }
+    }
+
+    dd{        
+        margin-left: 0;
+        @include grid-column(6);
+    }
+}
+
+p{
+    margin: 0 0 15px 0;
+}
+
+h1, h2, h3 {
+    margin: 10px 0 15px 0;
+}
+
+ul, ol {
+    margin: 0;
+}

package/src/components/rws/line-splitter/styles/layout.scss

@@ -0,0 +1,38 @@
+@import "@rws-mixins";
+@import "_tags";
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.spacer {
+  margin-right: 10px;
+}
+  
+
+.text-splitter-area {
+
+  .dots {
+    font-weight: 700;
+  }
+
+  &.loading {
+
+    p:last-child:after{
+      content: '';			
+      display: inline-block;
+      width: 5px;
+      height: 1rem;
+      height: 1.2rem;
+      background: rgb(114, 106, 106);
+      animation: 0.7s ease 0s infinite normal none running blink;
+      transform: translateY(5px);
+      margin-left: 5px;
+    }
+  }
+}
+
+.tagged {
+  background-color: yellow;
+}

package/src/components/rws/line-splitter/template.html

@@ -0,0 +1 @@
+<div class="text-splitter-area ${x => x.addClass}" :innerHTML="${(x) => x.content}"></div>

package/src/index.ts

@@ -1,4 +1,3 @@
-import { Transformer as HTMLTagTransformerType, Tag as HTMLTag, Attributes as HTMLAttributes } from 'sanitize-html';
 import { observable, attr } from '@microsoft/fast-element';
 
 import RWSService from './services/_service';
@@ -84,8 +83,5 @@ export type {
     IAssetShowOptions as IRWSAssetShowOptions,
     IRWSConfig,
     IRWSUser,
-    TagsProcessorType,
-    HTMLTagTransformerType,
-    HTMLTag,
-    HTMLAttributes
+    TagsProcessorType
 }

package/src/services/DOMService.ts

@@ -1,6 +1,6 @@
 import RWSService from './_service';
 import { DOM } from '@microsoft/fast-element';
-// import htmlSanitizer, { Transformer, IOptions } from 'sanitize-html';
+import DOMPurify from 'dompurify';
 
 type TagsProcessorType = { [tagName: string]: string | Transformer };
 type DOMOutputType<T extends Element> = NodeListOf<T> | T | null;
@@ -77,6 +77,15 @@ class DOMService extends RWSService {
             });
         });
     }
+
+    sanitizeHTML(
+        line: string,                
+        sanitizeOptions: DOMPurify.Config = { })
+    {
+        const output: string = line.trim();
+        const sanitized = DOMPurify.sanitize(output, { USE_PROFILES: { html: true }, ...sanitizeOptions});
+        return sanitized;
+    }
 }