art-dag/mono
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Eliminate raw HTML injection: convert ~kg-html/captions to native sx

Browse Source 
Add shared/sx/html_to_sx.py (HTMLParser-based HTML→sx converter) and
update lexical_to_sx.py so HTML cards, markdown cards, and captions all
produce native sx expressions instead of opaque HTML strings.

- ~kg-html now wraps native sx children (editor can identify the block)
- New ~kg-md component for markdown card blocks
- Captions are sx expressions, not escaped HTML strings
- kg_cards.sx: replace (raw! caption) with direct caption rendering
- sx-editor.js: htmlToSx() via DOMParser, serializeInline for captions,
  _childrenSx for ~kg-html/~kg-md, new kg-md edit UI
- Migration script (blog/scripts/migrate_sx_html.py) to re-convert
  stored sx_content from lexical source

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-02 19:57:27 +00:00
parent 4668c30890
commit 8ceb9aee62
7 changed files with 595 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
shared/static/scripts/sx-editor.js
View File

@@ -98,6 +98,106 @@
return d.innerHTML;
}
// Void elements that have no closing tag
var VOID_ELEMENTS = {
area:1, base:1, br:1, col:1, embed:1, hr:1, img:1, input:1,
link:1, meta:1, param:1, source:1, track:1, wbr:1
};
// Boolean HTML attributes
var BOOLEAN_ATTRS = {
async:1, autofocus:1, autoplay:1, checked:1, controls:1,
default:1, defer:1, disabled:1, formnovalidate:1, hidden:1,
inert:1, ismap:1, loop:1, multiple:1, muted:1, nomodule:1,
novalidate:1, open:1, playsinline:1, readonly:1, required:1,
reversed:1, selected:1
};
/**
* Convert an HTML string to sx source using the browser's DOM parser.
*/
function htmlToSx(html) {
if (!html || !html.trim()) return '""';
var doc = new DOMParser().parseFromString("<body>" + html + "</body>", "text/html");
var body = doc.body;
// Collect non-whitespace-only root nodes
var roots = [];
for (var i = 0; i < body.childNodes.length; i++) {
var n = body.childNodes[i];
if (n.nodeType === 3 && !n.textContent.trim()) continue; // skip ws-only text at root
roots.push(n);
}
if (!roots.length) return '""';
if (roots.length === 1) return nodeToSx(roots[0]);
var parts = [];
for (var i = 0; i < roots.length; i++) parts.push(nodeToSx(roots[i]));
return "(<> " + parts.join(" ") + ")";
}
function nodeToSx(node) {
if (node.nodeType === 3) {
return '"' + escSx(node.textContent) + '"';
}
if (node.nodeType === 8) return ""; // comment
if (node.nodeType !== 1) return "";
var tag = node.tagName.toLowerCase();
var parts = [tag];
// Attributes
for (var i = 0; i < node.attributes.length; i++) {
var a = node.attributes[i];
if (BOOLEAN_ATTRS[a.name]) {
parts.push(":" + a.name + " true");
} else {
parts.push(':' + a.name + ' "' + escSx(a.value) + '"');
}
}
if (VOID_ELEMENTS[tag]) return "(" + parts.join(" ") + ")";
// Children
var children = [];
for (var i = 0; i < node.childNodes.length; i++) {
var s = nodeToSx(node.childNodes[i]);
if (s) children.push(s);
}
if (children.length) return "(" + parts.join(" ") + " " + children.join(" ") + ")";
return "(" + parts.join(" ") + ")";
}
/**
* Render sx children expressions back to an HTML string (for the HTML card textarea).
*/
function sxChildrenToHtml(childrenSx) {
if (!childrenSx || !childrenSx.trim()) return "";
try {
var rendered = Sx.render(childrenSx);
if (rendered instanceof Node) {
var div = document.createElement("div");
div.appendChild(rendered);
return div.innerHTML;
}
return String(rendered);
} catch (e) {
return childrenSx;
}
}
/**
* Serialize a parsed sx expression (from Sx.parse) back to sx source string.
* Used to capture children of ~kg-html/~kg-md cards from the parsed tree.
*/
function serializeExpr(expr) {
if (typeof expr === "string") return '"' + escSx(expr) + '"';
if (expr && expr.constructor === Sx.Keyword) return ":" + expr.name;
if (expr && expr.name !== undefined && expr.constructor !== Sx.Keyword) return expr.name;
if (Array.isArray(expr)) {
var parts = [];
for (var i = 0; i < expr.length; i++) parts.push(serializeExpr(expr[i]));
return "(" + parts.join(" ") + ")";
}
if (expr === true) return "true";
if (expr === false) return "false";
if (expr === null || expr === undefined) return "nil";
return String(expr);
}
function closestBlock(node, container) {
while (node && node !== container) {
if (node.hasAttribute && node.hasAttribute("data-sx-block")) return node;
@@ -223,28 +323,47 @@
return "(<>\n " + parts.join("\n ") + ")";
}
// Cards whose children are positional sx args (not kwargs)
var CHILDREN_CARDS = { "kg-html": true, "kg-md": true };
function serializeCard(block) {
var cardType = block.getAttribute("data-sx-card");
var attrsJson = block.getAttribute("data-sx-attrs") || "{}";
var attrs;
try { attrs = JSON.parse(attrsJson); } catch (e) { attrs = {}; }
// Serialize caption as inline sx from the contenteditable
var captionEl = block.querySelector("[data-sx-caption]");
if (captionEl) {
var captionText = captionEl.textContent.trim();
if (captionText) attrs.caption = captionText;
else delete attrs.caption;
var captionHtml = captionEl.innerHTML.trim();
if (captionHtml && captionEl.textContent.trim()) {
attrs.caption = serializeInline(captionEl);
} else {
delete attrs.caption;
}
}
var parts = ["(~" + cardType];
for (var k in attrs) {
if (attrs[k] === null || attrs[k] === undefined || attrs[k] === false) continue;
if (k === "caption") {
// Caption is already an sx expression string
parts.push(":caption " + attrs[k]);
continue;
}
if (k === "_childrenSx") continue; // handled below
if (attrs[k] === true) {
parts.push(":" + k + " true");
} else {
parts.push(':' + k + ' "' + escSx(String(attrs[k])) + '"');
}
}
// Append children for cards like ~kg-html, ~kg-md
if (CHILDREN_CARDS[cardType] && attrs._childrenSx) {
parts.push(attrs._childrenSx);
}
parts.push(")");
return parts.join(" ");
}
@@ -305,7 +424,21 @@
}
if (tag.charAt(0) === "~") {
var cardType = tag.slice(1);
var attrs = extractKwargs(expr.slice(1));
var args = expr.slice(1);
var attrs = extractKwargs(args);
// For children-based cards, capture positional children as sx source
if (CHILDREN_CARDS[cardType]) {
var children = extractChildren(args);
if (children.length) {
var childParts = [];
for (var ci = 0; ci < children.length; ci++) childParts.push(serializeExpr(children[ci]));
attrs._childrenSx = childParts.join(" ");
}
}
// Convert caption from parsed sx expression back to sx source string
if (attrs.caption !== undefined && attrs.caption !== null) {
attrs.caption = serializeExpr(attrs.caption);
}
return createCardBlock(cardType, attrs);
}
return null;
@@ -535,7 +668,7 @@
// Add caption for applicable card types
var captionTypes = {
"kg-image": true, "kg-gallery": true, "kg-embed": true,
"kg-bookmark": true, "kg-video": true
"kg-bookmark": true, "kg-video": true, "kg-file": true
};
if (captionTypes[cardType]) {
var captionEl = el("div", {
@@ -544,7 +677,10 @@
"data-sx-caption": "true",
"data-placeholder": "Type caption for image (optional)"
});
if (attrs.caption) captionEl.textContent = attrs.caption;
if (attrs.caption) {
// Caption is an sx expression string — render to HTML for the contenteditable
captionEl.innerHTML = sxChildrenToHtml(attrs.caption);
}
wrapper.appendChild(captionEl);
}
@@ -566,12 +702,22 @@
var parts = ["(~" + cardType];
for (var k in attrs) {
if (attrs[k] === null || attrs[k] === undefined || attrs[k] === false || attrs[k] === "") continue;
if (k === "caption") {
// Caption is an sx expression, not a quoted string
parts.push(":caption " + attrs[k]);
continue;
}
if (k === "_childrenSx") continue; // handled below
if (attrs[k] === true) {
parts.push(":" + k + " true");
} else {
parts.push(':' + k + ' "' + escSx(String(attrs[k])) + '"');
}
}
// Append children for ~kg-html, ~kg-md
if (CHILDREN_CARDS[cardType] && attrs._childrenSx) {
parts.push(attrs._childrenSx);
}
parts.push(")");
return parts.join(" ");
}
@@ -602,6 +748,7 @@
case "kg-image": buildImageEditUI(attrs, editPanel, wrapper); break;
case "kg-gallery": buildGalleryEditUI(attrs, editPanel, wrapper); break;
case "kg-html": buildHtmlEditUI(attrs, editPanel, wrapper); break;
case "kg-md": buildMarkdownEditUI(attrs, editPanel, wrapper); break;
case "kg-embed": buildEmbedEditUI(attrs, editPanel, wrapper); break;
case "kg-bookmark": buildBookmarkEditUI(attrs, editPanel, wrapper); break;
case "kg-callout": buildCalloutEditUI(attrs, editPanel, wrapper); break;
@@ -717,11 +864,13 @@
// -- HTML card edit UI --
function buildHtmlEditUI(attrs, panel, wrapper) {
// Show HTML in textarea; convert HTML↔sx children for storage
var currentHtml = attrs._childrenSx ? sxChildrenToHtml(attrs._childrenSx) : "";
var textarea = el("textarea", {
className: "sx-edit-html-textarea",
placeholder: "Paste HTML here...",
spellcheck: "false"
}, attrs.html || "");
}, currentHtml);
function autoResize() {
textarea.style.height = "auto";
@@ -729,7 +878,31 @@
}
textarea.addEventListener("input", function () {
attrs.html = textarea.value;
attrs._childrenSx = htmlToSx(textarea.value);
updateCardAttrs(wrapper, attrs);
autoResize();
});
setTimeout(autoResize, 0);
panel.appendChild(textarea);
}
// -- Markdown card edit UI (read-only rendered view, edit as HTML) --
function buildMarkdownEditUI(attrs, panel, wrapper) {
var currentHtml = attrs._childrenSx ? sxChildrenToHtml(attrs._childrenSx) : "";
var textarea = el("textarea", {
className: "sx-edit-html-textarea",
placeholder: "Markdown content (as HTML)...",
spellcheck: "false"
}, currentHtml);
function autoResize() {
textarea.style.height = "auto";
textarea.style.height = Math.max(120, textarea.scrollHeight) + "px";
}
textarea.addEventListener("input", function () {
attrs._childrenSx = htmlToSx(textarea.value);
updateCardAttrs(wrapper, attrs);
autoResize();
});
@@ -1613,7 +1786,7 @@
block.querySelector(".sx-card-preview").click();
return;
} else if (type === "html") {
block = createCardBlock("kg-html", { html: "" });
block = createCardBlock("kg-html", { _childrenSx: '""' });
insertBlockNode(editor, block, refBlock);
block.querySelector(".sx-card-preview").click();
return;

122
shared/sx/html_to_sx.py Normal file
View File

@@ -0,0 +1,122 @@
"""
HTML → sx source converter.
Converts an HTML string to an equivalent s-expression source string so that
raw HTML can be eliminated from the sx tree.
html_to_sx('<p class="intro">Hello <em>world</em></p>')
# → '(p :class "intro" "Hello " (em "world"))'
Uses only stdlib ``html.parser`` — no extra dependencies.
"""
from __future__ import annotations
from html.parser import HTMLParser
from .html import VOID_ELEMENTS, BOOLEAN_ATTRS
def html_to_sx(html: str) -> str:
"""Convert an HTML string to sx source."""
if not html or not html.strip():
return '""'
parser = _SxBuilder()
parser.feed(html)
nodes = parser.finish()
if not nodes:
return '""'
if len(nodes) == 1:
return _serialize(nodes[0])
return "(<> " + " ".join(_serialize(n) for n in nodes) + ")"
# ---------------------------------------------------------------------------
# Internal tree builder
# ---------------------------------------------------------------------------
class _TextNode:
__slots__ = ("text",)
def __init__(self, text: str):
self.text = text
class _ElementNode:
__slots__ = ("tag", "attrs", "children")
def __init__(self, tag: str, attrs: list[tuple[str, str | None]]):
self.tag = tag
self.attrs = attrs
self.children: list[_TextNode | _ElementNode] = []
class _SxBuilder(HTMLParser):
def __init__(self):
super().__init__(convert_charrefs=True)
self._roots: list[_TextNode | _ElementNode] = []
self._stack: list[_ElementNode] = []
def _append(self, node: _TextNode | _ElementNode):
if self._stack:
self._stack[-1].children.append(node)
else:
self._roots.append(node)
def handle_starttag(self, tag: str, attrs: list[tuple[str, str | None]]):
node = _ElementNode(tag, attrs)
self._append(node)
if tag not in VOID_ELEMENTS:
self._stack.append(node)
def handle_endtag(self, tag: str):
# Pop back to the matching open tag (tolerant of mismatches)
for i in range(len(self._stack) - 1, -1, -1):
if self._stack[i].tag == tag:
self._stack[i + 1:] = []
self._stack.pop(i)
return
def handle_data(self, data: str):
if data:
self._append(_TextNode(data))
def handle_comment(self, data: str):
pass # skip HTML comments
def finish(self) -> list[_TextNode | _ElementNode]:
# Strip whitespace-only text nodes at root level
return [n for n in self._roots
if not (isinstance(n, _TextNode) and not n.text.strip())]
# ---------------------------------------------------------------------------
# Serializer
# ---------------------------------------------------------------------------
def _esc(s: str) -> str:
"""Escape a string for sx double-quoted literals."""
return s.replace("\\", "\\\\").replace('"', '\\"')
def _serialize(node: _TextNode | _ElementNode) -> str:
if isinstance(node, _TextNode):
return f'"{_esc(node.text)}"'
parts = [node.tag]
for name, value in node.attrs:
if name in BOOLEAN_ATTRS:
if value is None or value == "" or value == name:
parts.append(f":{name} true")
else:
parts.append(f':{name} "{_esc(value)}"')
elif value is None:
# Attribute without value (non-boolean) — treat as boolean true
parts.append(f":{name} true")
else:
parts.append(f':{name} "{_esc(value)}"')
if node.tag in VOID_ELEMENTS:
return "(" + " ".join(parts) + ")"
if node.children:
child_parts = [_serialize(c) for c in node.children]
return "(" + " ".join(parts) + " " + " ".join(child_parts) + ")"
return "(" + " ".join(parts) + ")"

159
shared/sx/tests/test_html_to_sx.py Normal file
View File

@@ -0,0 +1,159 @@
"""Unit tests for html_to_sx converter."""
from __future__ import annotations
import pytest
from shared.sx.html_to_sx import html_to_sx
class TestBasicElements:
def test_simple_paragraph(self):
assert html_to_sx("<p>Hello</p>") == '(p "Hello")'
def test_with_class(self):
assert html_to_sx('<p class="intro">Hi</p>') == '(p :class "intro" "Hi")'
def test_multiple_attrs(self):
result = html_to_sx('<a href="u" class="link">click</a>')
assert result == '(a :href "u" :class "link" "click")'
def test_nested_inline(self):
result = html_to_sx("<p>Hello <em>world</em></p>")
assert result == '(p "Hello " (em "world"))'
def test_deeply_nested(self):
result = html_to_sx("<div><p><strong>bold</strong></p></div>")
assert result == '(div (p (strong "bold")))'
class TestVoidElements:
def test_br(self):
assert html_to_sx("<br>") == "(br)"
def test_img(self):
result = html_to_sx('<img src="a.jpg" alt="pic">')
assert result == '(img :src "a.jpg" :alt "pic")'
def test_hr(self):
assert html_to_sx("<hr>") == "(hr)"
def test_input(self):
result = html_to_sx('<input type="text" value="hi">')
assert result == '(input :type "text" :value "hi")'
class TestBooleanAttrs:
def test_checked(self):
result = html_to_sx('<input type="checkbox" checked>')
assert result == '(input :type "checkbox" :checked true)'
def test_disabled(self):
result = html_to_sx('<button disabled>No</button>')
assert result == '(button :disabled true "No")'
def test_controls(self):
result = html_to_sx('<video controls></video>')
assert result == '(video :controls true)'
class TestTopLevel:
def test_multiple_top_level(self):
result = html_to_sx("<p>A</p><p>B</p>")
assert result == '(<> (p "A") (p "B"))'
def test_single_top_level(self):
result = html_to_sx("<p>Only</p>")
assert result == '(p "Only")'
def test_text_only(self):
result = html_to_sx("just text")
assert result == '"just text"'
def test_empty(self):
assert html_to_sx("") == '""'
def test_whitespace_only(self):
assert html_to_sx(" \n ") == '""'
class TestWhitespace:
def test_root_whitespace_stripped(self):
result = html_to_sx("\n<p>A</p>\n<p>B</p>\n")
assert result == '(<> (p "A") (p "B"))'
class TestEntities:
def test_amp(self):
result = html_to_sx("<p>A &amp; B</p>")
assert result == '(p "A & B")'
def test_lt_gt(self):
result = html_to_sx("<p>&lt;tag&gt;</p>")
assert result == '(p "<tag>")'
def test_nbsp(self):
result = html_to_sx("<p>hello&nbsp;world</p>")
assert result == '(p "hello\u00a0world")'
class TestEscaping:
def test_quotes_in_text(self):
result = html_to_sx('<p>He said "hello"</p>')
assert result == '(p "He said \\"hello\\"")'
def test_backslash_in_text(self):
result = html_to_sx("<p>a\\b</p>")
assert result == '(p "a\\\\b")'
def test_quotes_in_attr(self):
# Attribute values with quotes get escaped
result = html_to_sx('<div title="a&quot;b">x</div>')
assert result == '(div :title "a\\"b" "x")'
class TestComments:
def test_comment_stripped(self):
result = html_to_sx("<!-- comment --><p>hi</p>")
assert result == '(p "hi")'
class TestMixedContent:
def test_caption_with_link(self):
result = html_to_sx('Photo by <a href="https://x.com">Author</a>')
assert result == '(<> "Photo by " (a :href "https://x.com" "Author"))'
def test_caption_plain_text(self):
result = html_to_sx("Figure 1")
assert result == '"Figure 1"'
class TestRoundtrip:
"""html_to_sx → parse → render should produce equivalent HTML."""
def _roundtrip(self, html_in: str) -> str:
from shared.sx.parser import parse
from shared.sx.html import render
sx_src = html_to_sx(html_in)
expr = parse(sx_src)
return render(expr)
def test_simple(self):
assert self._roundtrip("<p>Hello</p>") == "<p>Hello</p>"
def test_nested(self):
assert self._roundtrip("<p>A <em>B</em> C</p>") == "<p>A <em>B</em> C</p>"
def test_void(self):
assert self._roundtrip('<img src="a.jpg" alt="">') == '<img src="a.jpg" alt="">'
def test_link(self):
html = '<a href="https://example.com">click</a>'
assert self._roundtrip(html) == html
def test_entities_roundtrip(self):
# Entities get decoded by parser, then re-escaped by render
assert self._roundtrip("<p>A &amp; B</p>") == "<p>A &amp; B</p>"
def test_multi_block(self):
html = "<p>A</p><p>B</p>"
assert self._roundtrip(html) == html