[Notebook] Links, Restricted Notebook Links, Search links (#6344)

* big simplification and enhancement to highlight component and added formatting for locked notebooks as well

* fix typo, fix logic

src/plugins/notebook/components/NotebookEntry.vue

@@ -64,7 +64,7 @@
                     tabindex="0"
                 >
                     <TextHighlight
-                        :text="entryText"
+                        :text="formatValidUrls(entry.text)"
                         :highlight="highlightText"
                         :highlight-class="'search-highlight'"
                     />
@@ -94,7 +94,7 @@
                     class="c-ne__text"
                     contenteditable="false"
                     tabindex="0"
-                    v-html="formattedText"
+                    v-bind.prop="formattedText"
                 >
                 </div>
             </template>
@@ -228,7 +228,9 @@ export default {
         },
         selectedEntryId: {
             type: String,
-            required: true
+            default() {
+                return '';
+            }
         }
     },
     data() {
@@ -236,7 +238,7 @@ export default {
             editMode: false,
             canEdit: true,
             enableEmbedsWrapperScroll: false,
-            urlWhitelist: null
+            urlWhitelist: []
         };
     },
     computed: {
@@ -248,28 +250,15 @@ export default {
         },
         formattedText() {
             // remove ANY tags
-            let text = sanitizeHtml(this.entry.text, SANITIZATION_SCHEMA);
+            const text = sanitizeHtml(this.entry.text, SANITIZATION_SCHEMA);
 
-            if (this.editMode || !this.urlWhitelist) {
+            if (this.editMode || this.urlWhitelist.length === 0) {
                 return { innerText: text };
             }
 
-            text = text.replace(URL_REGEX, (match) => {
-                const url = new URL(match);
-                const domain = url.hostname;
-                let result = match;
-                let isMatch = this.urlWhitelist.find((partialDomain) => {
-                    return domain.endsWith(partialDomain);
-                });
+            const html = this.formatValidUrls(text);
 
-                if (isMatch) {
-                    result = `<a class="c-hyperlink" target="_blank" href="${match}">${match}</a>`;
-                }
-
-                return result;
-            });
-
-            return { innerHTML: text };
+            return { innerHTML: html };
         },
         isSelectedEntry() {
             return this.selectedEntryId === this.entry.id;
@@ -355,6 +344,22 @@ export default {
         deleteEntry() {
             this.$emit('deleteEntry', this.entry.id);
         },
+        formatValidUrls(text) {
+            return text.replace(URL_REGEX, (match) => {
+                const url = new URL(match);
+                const domain = url.hostname;
+                let result = match;
+                let isMatch = this.urlWhitelist.find((partialDomain) => {
+                    return domain.endsWith(partialDomain);
+                });
+
+                if (isMatch) {
+                    result = `<a class="c-hyperlink" target="_blank" href="${match}">${match}</a>`;
+                }
+
+                return result;
+            });
+        },
         manageEmbedLayout() {
             if (this.$refs.embeds) {
                 const embedsWrapperLength = this.$refs.embedsWrapper.clientWidth;

src/utils/textHighlight/TextHighlight.vue

@@ -21,24 +21,13 @@
  *****************************************************************************/
 
 <template>
-
-<span>
-    <span
-        v-for="segment in segments"
-        :key="segment.id"
-        :style="getStyles(segment)"
-        :class="{ [highlightClass] : segment.type === 'highlight' }"
-    >
-        {{ segment.text }}
-    </span>
-</span>
+<!-- eslint-disable-next-line vue/no-v-html -->
+<span v-html="highlightedText"></span>
 
 </template>
 
 <script>
 
-import { v4 as uuid } from 'uuid';
-
 export default {
     props: {
         text: {
@@ -58,68 +47,11 @@ export default {
             }
         }
     },
-    data() {
-        return {
-            segments: []
-        };
-    },
-    watch: {
-        highlight() {
-            this.highlightText();
-        },
-        text() {
-            this.highlightText();
-        }
-    },
-    mounted() {
-        this.highlightText();
-    },
-    methods: {
-        addHighlightSegment(segment) {
-            this.segments.push({
-                id: uuid(),
-                text: segment,
-                type: 'highlight',
-                spaceBefore: segment.startsWith(' '),
-                spaceAfter: segment.endsWith(' ')
-            });
-        },
-        addTextSegment(segment) {
-            this.segments.push({
-                id: uuid(),
-                text: segment,
-                type: 'text',
-                spaceBefore: segment.startsWith(' '),
-                spaceAfter: segment.endsWith(' ')
-            });
-        },
-        getStyles(segment) {
-            let styles = {
-                display: 'inline-block'
-            };
+    computed: {
+        highlightedText() {
+            let regex = new RegExp(`(?<!<[^>]*)(${this.highlight})`, 'gi');
 
-            if (segment.spaceBefore) {
-                styles.paddingLeft = '.33em';
-            }
-
-            if (segment.spaceAfter) {
-                styles.paddingRight = '.33em';
-            }
-
-            return styles;
-        },
-        highlightText() {
-            this.segments = [];
-            let regex = new RegExp('(' + this.highlight + ')', 'gi');
-            let textSegments = this.text.split(regex);
-
-            for (let i = 0; i < textSegments.length; i++) {
-                if (textSegments[i].toLowerCase() === this.highlight.toLowerCase()) {
-                    this.addHighlightSegment(textSegments[i]);
-                } else {
-                    this.addTextSegment(textSegments[i]);
-                }
-            }
+            return this.text.replace(regex, `<span class="${this.highlightClass}">${this.highlight}</span>`);
         }
     }
 };