diff --git a/libraries/Library/Std/APIs/DOM.md b/libraries/Library/Std/APIs/DOM.md index 985905e1..8ba572c9 100644 --- a/libraries/Library/Std/APIs/DOM.md +++ b/libraries/Library/Std/APIs/DOM.md @@ -10,8 +10,10 @@ dom.span { -- tag attributes can be set like this: class = "my-class", id = "my-id", - -- Plain text body elements can be added like this + -- Plain text body elements can be added like this (rendered as markdown) "Span content", + -- Use __rawText to add plain text without markdown processing + __rawText = "1. This won't become a list", -- And elements can be nested dom.strong { "I am strong" }, -- Widgets can also be embedded @@ -46,7 +48,9 @@ dom = setmetatable({}, { for key, val in pairs(spec) do if type(key) == "string" then -- This is an attribute - if key:startsWith("on") then + if key == "__rawText" then + node.appendChild(js.window.document.createTextNode(val)) + elseif key:startsWith("on") then node.addEventListener(key:sub(3), val) else node.setAttribute(key, val) diff --git a/libraries/Library/Std/Widgets/Widgets.md b/libraries/Library/Std/Widgets/Widgets.md index 01e81916..93680f49 100644 --- a/libraries/Library/Std/Widgets/Widgets.md +++ b/libraries/Library/Std/Widgets/Widgets.md @@ -86,7 +86,7 @@ end font-weight: bold; user-select: none; padding: 15px 10px; - margin: -10px; + margin: -10px -10px 0 -10px; background-color: var(--editor-widget-background-color); } .sb-toc-content { @@ -175,21 +175,44 @@ function widgets.toc(options) minLevel = math.min(minLevel, header.level) end - -- Build TOC entries as DOM elements - local tocItems = {} - for _, header in ipairs(headersToDisplay) do - local indent = (header.level - minLevel) * 1.5 - table.insert(tocItems, dom.div { - class = "sb-toc-item", - style = "margin-left: " .. indent .. "rem;", - dom.a { - onclick = function() - editor.navigate({ page = pageName, pos = header.pos }) - end, - class = "sb-toc-link", - "- " .. header.name + -- Build a nested ul/li structure based on heading levels + local function buildTocList(headers) + local root = dom.ul { } + local stack = { { node = root, level = minLevel - 1, lastLi = nil } } + + for _, header in ipairs(headers) do + -- Pop back up when heading is at same or higher level + while #stack > 1 and stack[#stack].level >= header.level do + table.remove(stack) + end + + -- Open nested