basic impl of creating a link, with preview

src/Link.js

@@ -166,4 +166,12 @@ export class Link {
 			this.servers.length === link.servers.length &&
 			this.servers.every((s, i) => link.servers[i] === s);
 	}
+
+	toFragment() {
+		if (this.eventId) {
+			return `/${this.identifier}/${this.eventId}`;
+		} else {
+			return `/${this.identifier}`;
+		}
+	}
 }

src/RootViewModel.js

@@ -41,7 +41,8 @@ export class RootViewModel extends ViewModel {
 				this.openLinkViewModel.load();
 			}
 		} else {
-			this.previewViewModel = null;
+			this.openLinkViewModel = null;
+			this.createLinkViewModel = new CreateLinkViewModel(this.childOptions());
 		}
 		this.emitChange();
 	}

src/create/CreateLinkView.js

@@ -0,0 +1,33 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {TemplateView} from "../utils/TemplateView.js";
+import {PreviewView} from "../preview/PreviewView.js";
+
+export class CreateLinkView extends TemplateView {
+	render(t, vm) {
+		return t.div({className: "CreateLinkView card"}, [
+			t.mapView(vm => vm.previewViewModel, childVM => childVM ? new PreviewView(childVM) : null),
+			t.h2({className: {hidden: vm => !vm.linkUrl}}, t.a({href: vm => vm.linkUrl}, vm => vm.linkUrl)),
+			t.div(t.input({
+				className: "fullwidth",
+				type: "text",
+				onChange: evt => vm.createLink(evt.target.value),
+				placeholder: "#room:example.com, @user:example.com"
+			})),
+		]);
+	}
+}

src/create/CreateLinkViewModel.js

@@ -14,13 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import {ViewModel} from "../utils/ViewModel.js";
+import {PreviewViewModel} from "../preview/PreviewViewModel.js";
+import {Link} from "../Link.js";
+
 export class CreateLinkViewModel extends ViewModel {
-    createLink(identifier) {
+	constructor(options) {
-        this._link = Link.fromIdentifier(identifier);
+		super(options);
+		this.previewViewModel = null;
+	}
+
+    async createLink(identifier) {
+        this._link = Link.parseFragment(identifier);
+        if (this._link) {
+        	// TODO: abort previous load
+        	this.previewViewModel = new PreviewViewModel(this.childOptions({
+        		link: this._link,
+        		consentedServers: this._link.servers,
+        	}));
+        	this.emitChange();
+        	await this.previewViewModel.load();
+        }
         this.emitChange();
     }
 
-    get link() {
+    get linkUrl() {
-        this._link.toURL();
+    	if (this._link) {
+        	return `${this.origin}/#${this._link.toFragment()}`;
+    	}
     }
 }

src/utils/ViewModel.js

@@ -61,6 +61,7 @@ export class ViewModel extends EventEmitter {
     }
 
     get request() { return this._options.request; }
+    get origin() { return this._options.origin; }
     get openLink() { return this._options.openLink; }
     get platforms() { return this._options.platforms; }
     get preferences() { return this._options.preferences; }
@@ -68,6 +69,7 @@ export class ViewModel extends EventEmitter {
     childOptions(options = {}) {
         return Object.assign({
             request: this.request,
+            origin: this.origin,
             openLink: this.openLink,
             platforms: this.platforms,
             preferences: this.preferences,