Render Markdown in browser chat messages

DEVELOPMENT.md

@@ -237,3 +237,27 @@ authentication redirects, login, and bundled assets using a JVM server.
 Icons are vendored from [Phosphor Icons core 2.1.1](https://github.com/phosphor-icons/core)
 under its MIT license (`web/icons/LICENSE`). They need no runtime package or CDN.
 Use upstream SVG assets when adding icons and retain the license.
+
+### Message Markdown
+
+The Worker injects `web/markdown.mjs` into the Host and parses each incoming
+message once. It ignores any HTML supplied by the sender and publishes locally
+generated HTML alongside the original text. The DOM layer renders that markup;
+copying always uses the original text. Raw HTML stays disabled, and markdown-it's
+default dangerous-URL validation remains enabled. Links open separately with
+`noopener noreferrer`; Markdown images can load their referenced URLs.
+
+The browser bundle of markdown-it 15.0.2 and its license notices are checked in
+under `web/vendor/markdown-it/`; there is no runtime CDN dependency. After updating
+the pinned test-tool dependency and lockfile, regenerate the vendored files with:
+
+```sh
+npm ci --prefix tests/web
+npm --prefix tests/web run vendor:markdown
+npm --prefix tests/web test
+npm --prefix tests/web run test:browser
+```
+
+The vendoring script copies the official browser bundle and license files, omitting
+only its source-map reference. Keep raw HTML disabled and run the malicious-input
+fixtures when changing parser options or adding plugins.

README.md

@@ -102,7 +102,9 @@ Open the phone's server address in a browser on the same network. Enter the acce
 password configured on the phone, or choose **未设置密码，直接进入** if none is set.
 The **文件** page lists files selected on the phone; choose **下载** beside a file
 to save it. The list refreshes automatically when the phone changes its selection.
-Use **消息** to send and copy text between connected devices. If the connection
+Use **消息** to send and copy text between connected devices. Messages render
+Markdown headings, emphasis, lists, quotes, code blocks, tables, links, and images.
+The copy button preserves the original Markdown. Raw HTML is displayed as text. If the connection
 closes, the draft stays in the input; choose **重新连接** before sending again.
 
 The browser pages adapt to desktop and phone screens. Their styles, scripts, and

app/src/main/resources/web/app.js

@@ -123,8 +123,10 @@ function renderChat(state) {
     button.type = "button";
     button.append(icon("copy"), document.createTextNode("复制"));
     button.addEventListener("click", () => copy(message.data));
-    const text = document.createElement("p");
-    text.textContent = message.data;
+    const text = document.createElement("div");
+    text.className = "markdown-body";
+    // HTML is generated by our local parser in the Worker, never from a wire field.
+    text.innerHTML = message.html;
     header.append(sender, button);
     item.append(header, text);
     list.append(item);

app/src/main/resources/web/host.js

@@ -102,7 +102,12 @@ export class WebHost {
         this.update({
           messages: Object.freeze([
             ...this.state.messages,
-            Object.freeze(message),
+            Object.freeze({
+              from: message.from,
+              data: message.data,
+              // Ignore any HTML field supplied over the socket.
+              html: this.io.renderMarkdown(message.data),
+            }),
           ]),
         });
       } catch {

app/src/main/resources/web/markdown.mjs

@@ -0,0 +1,20 @@
+import MarkdownIt from "./vendor/markdown-it/markdown-it.esm.min.mjs";
+
+// Keep raw HTML disabled: only parser-generated markup reaches the DOM.
+const markdown = new MarkdownIt({ html: false, breaks: true, linkify: true });
+const defaultLink = markdown.renderer.rules.link_open;
+markdown.renderer.rules.link_open = (tokens, index, options, env, renderer) => {
+  tokens[index].attrSet("target", "_blank");
+  tokens[index].attrSet("rel", "noopener noreferrer");
+  return defaultLink
+    ? defaultLink(tokens, index, options, env, renderer)
+    : renderer.renderToken(tokens, index, options);
+};
+const defaultImage = markdown.renderer.rules.image;
+markdown.renderer.rules.image = (tokens, index, options, env, renderer) => {
+  tokens[index].attrSet("loading", "lazy");
+  tokens[index].attrSet("referrerpolicy", "no-referrer");
+  return defaultImage(tokens, index, options, env, renderer);
+};
+
+export const renderMarkdown = (text) => markdown.render(text);

app/src/main/resources/web/style.css

@@ -162,7 +162,8 @@ textarea:focus-visible {
   flex-direction: column;
 }
 .topbar {
-  font-size: 20px;  height: 62px;
+  font-size: 20px;
+  height: 62px;
   flex-shrink: 0;
   border-bottom: 1px solid var(--line);
   display: flex;
@@ -591,3 +592,119 @@ input {
     transition: background-color 0.15s ease;
   }
 }
+
+/* Parsed message content remains contained on narrow screens. */
+.markdown-body {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.message .markdown-body p {
+  white-space: normal;
+  margin: 0.6em 0;
+}
+.markdown-body > :first-child {
+  margin-top: 0;
+}
+.markdown-body > :last-child {
+  margin-bottom: 0;
+}
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin: 1em 0 0.4em;
+  line-height: 1.4;
+}
+.markdown-body h1 {
+  font-size: 1.6em;
+}
+.markdown-body h2 {
+  font-size: 1.4em;
+}
+.markdown-body h3 {
+  font-size: 1.2em;
+}
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  font-size: 1em;
+}
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 1.6em;
+  margin: 0.6em 0;
+}
+.markdown-body blockquote {
+  margin: 0.8em 0;
+  padding: 0.2em 1em;
+  border-left: 3px solid var(--green);
+  color: var(--muted);
+}
+.markdown-body code {
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+  background: var(--rail);
+  border-radius: 4px;
+  padding: 0.15em 0.3em;
+}
+.markdown-body pre {
+  max-width: 100%;
+  overflow-x: auto;
+  padding: 16px;
+  border-radius: 8px;
+  background: var(--rail);
+  white-space: pre;
+}
+.markdown-body pre code {
+  padding: 0;
+  background: transparent;
+  overflow-wrap: normal;
+}
+.markdown-body table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+.markdown-body th,
+.markdown-body td {
+  padding: 8px 12px;
+  border: 1px solid var(--line);
+  text-align: left;
+}
+.markdown-body th {
+  background: var(--rail);
+}
+.markdown-body img {
+  max-width: 100%;
+  height: auto;
+}
+.markdown-body a {
+  text-decoration: underline;
+}
+.markdown-body hr {
+  border: 0;
+  border-top: 1px solid var(--line);
+  margin: 1em 0;
+}
+
+/* Long Markdown scrolls inside the log, keeping the composer in view. */
+.chat {
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+.chat .workspace {
+  flex: 1;
+  min-height: 0;
+}
+.chat-content {
+  height: auto;
+  min-height: 0;
+}
+.messages {
+  min-height: 0;
+}

app/src/main/resources/web/vendor/markdown-it/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Vitaly Puzrin, Alex Kocharin.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

app/src/main/resources/web/vendor/markdown-it/THIRD-PARTY-NOTICES.txt

@@ -0,0 +1,136 @@
+entities
+========
+Copyright (c) Felix Böhm
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+
+linkify-it
+==========
+Copyright (c) 2015 Vitaly Puzrin.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+
+mdurl
+=====
+Copyright (c) 2015 Vitaly Puzrin, Alex Kocharin.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+.parse() is based on Joyent's node.js `url` code:
+
+Copyright Joyent, Inc. and other Node contributors. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+
+
+punycode.js
+===========
+Copyright Mathias Bynens <https://mathiasbynens.be/>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+uc.micro
+========
+Copyright Mathias Bynens <https://mathiasbynens.be/>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.