Added anchorme to make chat messages with links clickable

This commit is contained in:
joker-x 2020-09-16 03:49:34 +02:00 committed by Jonas Herzig
parent 78161b3a2c
commit 7692a02ab7
3 changed files with 27 additions and 4 deletions

View file

@ -9,6 +9,7 @@ import audioContext from 'audio-context'
import ko from 'knockout' import ko from 'knockout'
import _dompurify from 'dompurify' import _dompurify from 'dompurify'
import keyboardjs from 'keyboardjs' import keyboardjs from 'keyboardjs'
import anchorme from 'anchorme'
import { ContinuousVoiceHandler, PushToTalkVoiceHandler, VADVoiceHandler, initVoice } from './voice' import { ContinuousVoiceHandler, PushToTalkVoiceHandler, VADVoiceHandler, initVoice } from './voice'
import {initialize as localizationInitialize, translate} from './loc'; import {initialize as localizationInitialize, translate} from './loc';
@ -17,10 +18,25 @@ const dompurify = _dompurify(window)
function sanitize (html) { function sanitize (html) {
return dompurify.sanitize(html, { return dompurify.sanitize(html, {
ALLOWED_TAGS: ['br', 'b', 'i', 'u', 'a', 'span', 'p'] ALLOWED_TAGS: ['br', 'b', 'i', 'u', 'a', 'span', 'p', 'img', 'center']
}) })
} }
const anchormeOptions = {
// force target _blank attribute
attributes: {
target: "_blank"
},
// force https protocol except email
protocol: function(s) {
if (anchorme.validate.email(s)) {
return "mailto:";
} else {
return "https://";
}
}
}
function openContextMenu (event, contextMenu, target) { function openContextMenu (event, contextMenu, target) {
contextMenu.posX(event.clientX) contextMenu.posX(event.clientX)
contextMenu.posY(event.clientY) contextMenu.posY(event.clientY)
@ -405,7 +421,7 @@ class GlobalBindings {
type: 'chat-message', type: 'chat-message',
user: sender.__ui, user: sender.__ui,
channel: channels.length > 0, channel: channels.length > 0,
message: sanitize(message) message: anchorme({input: sanitize(message), options: anchormeOptions})
}) })
}) })
@ -779,13 +795,13 @@ class GlobalBindings {
if (target.users) { // Channel if (target.users) { // Channel
this.log.push({ this.log.push({
type: 'chat-message-self', type: 'chat-message-self',
message: sanitize(message), message: anchorme({input: sanitize(message), options: anchormeOptions}),
channel: target channel: target
}) })
} else { // User } else { // User
this.log.push({ this.log.push({
type: 'chat-message-self', type: 'chat-message-self',
message: sanitize(message), message: anchorme({input: sanitize(message), options: anchormeOptions}),
user: target user: target
}) })
} }

6
package-lock.json generated
View file

@ -1181,6 +1181,12 @@
"audio-frequency-to-index": "^2.0.0" "audio-frequency-to-index": "^2.0.0"
} }
}, },
"anchorme": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/anchorme/-/anchorme-2.1.2.tgz",
"integrity": "sha512-2iPY3kxDDZvtRzauqKDb4v7a5sTF4GZ+esQTY8nGYvmhAtGTeFPMn4cRnvyWS1qmtPTP0Mv8hyLOp9l3ZzWMKg==",
"dev": true
},
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",

View file

@ -21,6 +21,7 @@
"@babel/plugin-transform-runtime": "^7.9.0", "@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0", "@babel/preset-env": "^7.9.0",
"@babel/runtime": "^7.9.2", "@babel/runtime": "^7.9.2",
"anchorme": "^2.1.2",
"audio-buffer-utils": "^5.1.2", "audio-buffer-utils": "^5.1.2",
"audio-context": "^1.0.3", "audio-context": "^1.0.3",
"babel-loader": "^8.1.0", "babel-loader": "^8.1.0",