refactor bleach and use it in the status view

apps/remix-ide/src/app/tabs/debugger-tab.js

@@ -3,7 +3,7 @@ import { DebuggerApiMixin } from '@remixproject/debugger-plugin' // eslint-disab
 import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 import React from 'react' // eslint-disable-line
-import * as remixBleach from '../../lib/remixBleach'
+import { bleach } from '@remix-ui/helper'
 import { compilationFinishedToastMsg, compilingToastMsg, localCompilationToastMsg, notFoundToastMsg, sourceVerificationNotAvailableToastMsg } from '@remix-ui/helper'
 const css = require('./styles/debugger-tab-styles')
 
@@ -59,7 +59,7 @@ export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
       this.call('notification', 'alert', {
         id: 'debuggerTabShowMessage',
         title,
-        message: remixBleach.sanitize(message)
+        message: bleach.sanitize(message)
       })
     } catch (e) {
       console.log(e)

libs/remix-ui/helper/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/remix-ui-helper'
+export * from './lib/bleach'
 export * from './lib/helper-components'
 export * from './lib/components/PluginViewWrapper'
 export * from './lib/components/custom-dropdown'

libs/remix-ui/helper/src/lib/bleach.ts

@@ -5,7 +5,7 @@
  */
 import * as he from 'he'
 
-const remixBleach = {
+export const bleach = {
 
   matcher: /<\/?([a-zA-Z0-9]+)*(.*?)\/?>/igm,
 
@@ -24,7 +24,7 @@ const remixBleach = {
     let match
 
     // extract all tags
-    while ((match = remixBleach.matcher.exec(html)) != null) {
+    while ((match = bleach.matcher.exec(html)) != null) {
       const attrr = match[2].split(' ')
       const attrs = []
 
@@ -57,14 +57,13 @@ const remixBleach = {
     return matches
   },
 
-  sanitize: function (html, options) {
+  sanitize: function (html, options = { mode: 'white', list: bleach.whitelist, encode_entities: false}) {
     html = String(html) || ''
-    options = options || {}
-
+    
     const mode = options.mode || 'white'
-    const list = options.list || remixBleach.whitelist
+    const list = options.list || bleach.whitelist
 
-    var matches = remixBleach.analyze(html)
+    var matches = bleach.analyze(html)
 
     if ((mode === 'white' && list.indexOf('script') === -1) ||
        (mode === 'black' && list.indexOf('script') !== -1)) {
@@ -95,5 +94,3 @@ const remixBleach = {
     return html
   }
 }
-
-module.exports = remixBleach

libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts

@@ -1,5 +1,7 @@
 import { checkSpecialChars } from '@remix-ui/helper'
 import { BadgeStatus, IconStatus } from '../components/Icon'
+import { bleach } from '@remix-ui/helper'
+
 
 export type IconBadgeReducerAction = {
   readonly type: string
@@ -20,13 +22,13 @@ function setIconStatus(name: string, status: IconStatus) {
   if (typeof status.key === 'number') {
     key = status.key
     text = key
-  } else key = checkSpecialChars(status.key) ? '' : status.key
+  } else key = checkSpecialChars(status.key) ? bleach.sanitize(status.key) : status.key
 
   let thisType = ''
   if (status.type === 'error') {
     thisType = 'danger' // to use with bootstrap
-  } else thisType = checkSpecialChars(status.type) ? '' : status.type!
-  const title = checkSpecialChars(status.title) ? '' : status.title
+  } else thisType = checkSpecialChars(status.type) ? bleach.sanitize(status.type) : status.type
+  const title = checkSpecialChars(status.title) ? bleach.sanitize(status.title) : status.title
   const pluginName = status.pluginName
   return { title, type: thisType, key, text, pluginName }
 }