4.0.0-rc3. Display a warning for complex or invalid filtering terms, using the safe-regex NPM module. Add a separate Regex (Word) filtering mode. Fix channel hosting control. Fix hide extensions. Add a fix for bad local echo emote indices for chat. Position the color picker above rather than below for filter terms. Apply a dark theme to the color picker. Rewrite the filter terms editor to use the term editor component for adding a new term.

src/modules/main_menu/components/term-editor.vue

@@ -1,6 +1,18 @@
 <template lang="html">
-	<li class="ffz--term">
+	<div class="ffz--term">
 		<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
+			<div v-if="! is_valid" class="tw-tooltip-wrapper tw-mg-r-05">
+				<figure class="tw-c-text-error ffz-i-attention" />
+				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+					{{ t('setting.terms.warn-invalid', 'This highlight term is invalid.') }}
+				</div>
+			</div>
+			<div v-if="! is_safe" class="tw-tooltip-wrapper tw-mg-r-05">
+				<figure class="tw-c-text-hint ffz-i-attention" />
+				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+					{{ t('setting.terms.warn-complex', 'This highlight term is potentially too complex. It may cause client lag.') }}
+				</div>
+			</div>
 			<div class="tw-flex-grow-1">
 				<h4 v-if="! editing" class="ffz-monospace">
 					<pre>{{ term.v }}</pre>
@@ -8,7 +20,7 @@
 				<input
 					v-else
 					v-model="edit_data.v"
-					:placeholder="edit_data.v"
+					:placeholder="adding ? t('setting.terms.add-placeholder', 'Add a new term') : edit_data.v"
 					type="text"
 					class="tw-input"
 					autocapitalize="off"
@@ -16,7 +28,7 @@
 				>
 			</div>
 			<div v-if="colored" class="tw-flex-shrink-0 tw-mg-l-05">
-				<color-picker v-if="editing" v-model="edit_data.c" :nullable="true" :show-input="false" />
+				<color-picker v-if="editing" v-model="edit_data.c" :nullable="true" :show-input="false" :open-up="true" />
 				<div v-else-if="term.c" class="ffz-color-preview">
 					<figure :style="`background-color: ${term.c}`">
 						&nbsp;
@@ -27,11 +39,19 @@
 				<span v-if="! editing">{{ term_type }}</span>
 				<select v-else v-model="edit_data.t" class="tw-select ffz-min-width-unset">
 					<option value="text">{{ t('setting.terms.type.text', 'Text') }}</option>
-					<option value="raw">{{ t('setting.terms.type.regex', 'Regex') }}</option>
 					<option value="glob">{{ t('setting.terms.type.glob', 'Glob') }}</option>
+					<option value="regex">{{ t('setting.terms.type.regex-word', 'Regex (Word)') }}</option>
+					<option value="raw">{{ t('setting.terms.type.regex', 'Regex') }}</option>
 				</select>
 			</div>
-			<div v-if="editing" class="tw-flex-shrink-0">
+			<div v-if="adding" class="tw-flex-shrink-0">
+				<button class="tw-button" @click="save">
+					<span class="tw-button__text">
+						{{ t('setting.terms.add-term', 'Add') }}
+					</span>
+				</button>
+			</div>
+			<div v-else-if="editing" class="tw-flex-shrink-0">
 				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="save">
 					<span class="tw-button__text ffz-i-floppy" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
@@ -74,17 +94,36 @@
 				</button>
 			</div>
 		</div>
-	</li>
+	</div>
 </template>
 
 <script>
 
-import {deep_copy} from 'utilities/object';
+import safety from 'safe-regex';
+
+import {deep_copy, glob_to_regex, escape_regex} from 'utilities/object';
 
 export default {
-	props: ['term', 'colored'],
+	props: {
+		term: Object,
+		colored: {
+			type: Boolean,
+			default: false
+		},
+		adding: {
+			type: Boolean,
+			default: false
+		}
+	},
 
 	data() {
+		if ( this.adding )
+			return {
+				deleting: false,
+				editing: true,
+				edit_data: deep_copy(this.term)
+			};
+
 		return {
 			deleting: false,
 			editing: false,
@@ -93,6 +132,41 @@ export default {
 	},
 
 	computed: {
+		is_valid() {
+			const data = this.editing ? this.edit_data : this.term,
+				t = data.t;
+
+			let v = data.v;
+
+			if ( t === 'text' )
+				v = escape_regex(v);
+
+			else if ( t === 'glob' )
+				v = glob_to_regex(v);
+
+			try {
+				new RegExp(v);
+				return true;
+			} catch(err) {
+				return false;
+			}
+		},
+
+		is_safe() {
+			const data = this.editing ? this.edit_data : this.term,
+				t = data.t;
+
+			let v = data.v;
+
+			if ( t === 'text' )
+				v = escape_regex(v);
+
+			else if ( t === 'glob' )
+				v = glob_to_regex(v);
+
+			return safety(v);
+		},
+
 		term_type() {
 			const t = this.term && this.term.t;
 			if ( t === 'text' )
@@ -104,6 +178,9 @@ export default {
 			else if ( t === 'glob' )
 				return this.t('setting.terms.type.glob', 'Glob');
 
+			else if ( t === 'regex' )
+				return this.t('setting.terms.type.regex-word', 'Regex (Word)');
+
 			return this.t('setting.unknown', 'Unknown Value');
 		}
 	},
@@ -115,8 +192,13 @@ export default {
 		},
 
 		cancel() {
-			this.editing = false;
-			this.edit_data = null;
+			if ( this.adding ) {
+				this.edit_data = deep_copy(this.term);
+
+			} else {
+				this.editing = false;
+				this.edit_data = null;
+			}
 		},
 
 		save() {