Automatically hyperlink links in WYSIWYG editors

src/app/components/nodes/norm/norm.component.html

@@ -78,6 +78,6 @@
     <div
         class="editable-base"
         *ngIf="!isFocused"
-        [innerHTML]="initialValue"
+        [innerHTML]="displayContents"
     ></div>
 </div>

src/app/components/nodes/norm/norm.component.ts

@@ -19,6 +19,10 @@ export class NormComponent extends EditorNodeContract implements OnInit {
     private dirtyOverride = false;
     protected hadOneFocusOut = false;
 
+    public get displayContents() {
+        return this.contents.replace(/</g, '\n<').replace(/(https?:\/\/[^\s]+)/g, (val) => `<a href="${val}" target="_blank">${val}</a>`);
+    }
+
     constructor(
         public editorService: EditorService,
     ) {