elements.
+ // Notionally:
+ // s/ (.katex-display) / div.z-k-outer > div.z-k-inner > $1 /
+ const outer = makeDiv('zulip-katex-outer');
+ const inner = makeDiv('zulip-katex-inner');
+
+ outer.appendChild(inner);
+ parent.replaceChild(outer, kd);
+ inner.appendChild(kd);
+ });
+};
+
+export default fixupKatex;
diff --git a/src/webview/js/generatedEs3.js b/src/webview/js/generatedEs3.js
index 0860c5315a7..74d4f4fed5f 100644
--- a/src/webview/js/generatedEs3.js
+++ b/src/webview/js/generatedEs3.js
@@ -18,8 +18,7 @@ var compiledWebviewJs = (function (exports) {
return new RegExp(r);
});
- var rewriteImageUrls = function rewriteImageUrls(auth) {
- var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+ var rewriteImageUrls = function rewriteImageUrls(auth, element) {
var realm = new URL(auth.realm);
var imageTags = [].concat(element instanceof HTMLImageElement ? [element] : [], Array.from(element.getElementsByTagName('img')));
imageTags.forEach(function (img) {
@@ -46,6 +45,23 @@ var compiledWebviewJs = (function (exports) {
});
};
+ var makeDiv = function makeDiv(className) {
+ var element = document.createElement('div');
+ element.classList.add(className);
+ return element;
+ };
+
+ var fixupKatex = function fixupKatex(root) {
+ Array.from(root.querySelectorAll('.katex-display')).forEach(function (kd) {
+ var parent = kd.parentNode;
+ var outer = makeDiv('zulip-katex-outer');
+ var inner = makeDiv('zulip-katex-inner');
+ outer.appendChild(inner);
+ parent.replaceChild(outer, kd);
+ inner.appendChild(kd);
+ });
+ };
+
if (!Array.from) {
Array.from = function from(arr) {
return Array.prototype.slice.call(arr);
@@ -379,7 +395,15 @@ var compiledWebviewJs = (function (exports) {
window.scrollBy(0, newBoundRect.top - prevBoundTop);
};
+ var processIncomingHtml = function processIncomingHtml(auth, root) {
+ rewriteImageUrls(auth, root);
+ fixupKatex(root);
+ };
+
var handleUpdateEventContent = function handleUpdateEventContent(uevent) {
+ var contentNode = document.createElement('div');
+ contentNode.innerHTML = uevent.content;
+ processIncomingHtml(uevent.auth, contentNode);
var target;
if (uevent.updateStrategy === 'replace') {
@@ -399,8 +423,7 @@ var compiledWebviewJs = (function (exports) {
target = findPreserveTarget();
}
- documentBody.innerHTML = uevent.content;
- rewriteImageUrls(uevent.auth);
+ documentBody.innerHTML = contentNode.innerHTML;
if (target.type === 'bottom') {
scrollToBottom();
@@ -420,8 +443,8 @@ var compiledWebviewJs = (function (exports) {
document.addEventListener('message', handleMessageEvent);
}
+ processIncomingHtml(auth, documentBody);
scrollToMessage(scrollMessageId);
- rewriteImageUrls(auth);
sendScrollMessageIfListShort();
scrollEventsDisabled = false;
};
diff --git a/src/webview/js/js.js b/src/webview/js/js.js
index f05de58ea59..18844f34a13 100644
--- a/src/webview/js/js.js
+++ b/src/webview/js/js.js
@@ -12,6 +12,7 @@ import type {
import type { MessageListEvent } from '../webViewEventHandlers';
import rewriteImageUrls from './rewriteImageUrls';
+import fixupKatex from './fixup-katex';
/*
* Supported platforms:
@@ -475,7 +476,22 @@ const scrollToPreserve = (msgId: number, prevBoundTop: number) => {
window.scrollBy(0, newBoundRect.top - prevBoundTop);
};
+/**
+ * Fix up supplied HTML as needed for display.
+ *
+ * The root itself must not need fixups.
+ */
+const processIncomingHtml = (auth: Auth, root: Element) => {
+ rewriteImageUrls(auth, root);
+ fixupKatex(root);
+};
+
const handleUpdateEventContent = (uevent: WebViewUpdateEventContent) => {
+ // Perform preprocessing on the webview content.
+ const contentNode: HTMLDivElement = document.createElement('div');
+ contentNode.innerHTML = uevent.content;
+ processIncomingHtml(uevent.auth, contentNode);
+
let target: ScrollTarget;
if (uevent.updateStrategy === 'replace') {
target = { type: 'none' };
@@ -491,9 +507,11 @@ const handleUpdateEventContent = (uevent: WebViewUpdateEventContent) => {
target = findPreserveTarget();
}
- documentBody.innerHTML = uevent.content;
-
- rewriteImageUrls(uevent.auth);
+ // TODO: eliminate the needless reserialization and deserialization
+ // step here, via something along the lines of
+ // documentBody.replaceChild(oldContentNode, contentNode)
+ // (which currently breaks our touch event handling).
+ documentBody.innerHTML = contentNode.innerHTML;
if (target.type === 'bottom') {
scrollToBottom();
@@ -522,8 +540,8 @@ export const handleInitialLoad = (
document.addEventListener('message', handleMessageEvent);
}
+ processIncomingHtml(auth, documentBody);
scrollToMessage(scrollMessageId);
- rewriteImageUrls(auth);
sendScrollMessageIfListShort();
scrollEventsDisabled = false;
};
diff --git a/src/webview/js/rewriteImageUrls.js b/src/webview/js/rewriteImageUrls.js
index a22bc60b058..4885f69d647 100644
--- a/src/webview/js/rewriteImageUrls.js
+++ b/src/webview/js/rewriteImageUrls.js
@@ -14,11 +14,8 @@ const inlineApiRoutes: RegExp[] = ['^/user_uploads/', '^/thumbnail$', '^/avatar/
* than the document location.
* 2. If the source URL names an endpoint known to require authentication,
* inject an API key into its query parameters.
- *
- * DEPRECATED: If no root element is specified, transform every ![]()
in the
- * entire document.
*/
-const rewriteImageUrls = (auth: Auth, element: Element | Document = document) => {
+const rewriteImageUrls = (auth: Auth, element: Element) => {
const realm = new URL(auth.realm);
// Find the image elements to act on.
diff --git a/tools/build-webview b/tools/build-webview
index ad12e794064..9b5633a1f06 100755
--- a/tools/build-webview
+++ b/tools/build-webview
@@ -31,6 +31,25 @@ err() {
exit 1;
}
+# Common rsync invocation. Exported for use by auxiliary scripts.
+#
+# Filter rules are expected to be passed in via stdin; this is most easily
+# accomplished with a heredoc, or `