Skip to content

Editor: Tab inserts 4 spaces (no TabError) #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cedricvogel-leo merged 1 commit into from
Oct 25, 2026
Merged

Editor: Tab inserts 4 spaces (no TabError) #13

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,22 @@ comment: Embed the glpython editor, execution visualizer, and turtle graphics
return `${/^[0-9]/.test(stem) ? "_" : ""}${stem}.py`
}

// LiaScript's editor indents with real tabs, 2 wide (tabSize 2, useSoftTabs
// False), so Tab in a block indented with 4 spaces mixes the two and Python
// stops with TabError. The block's editors indent with 4 spaces instead,
// unless the course chose otherwise with data-tabsize or data-ace-options
// (which LiaScript puts on the editor as attributes). LiaScript sets these
// options only for a new editor or when its own value changes, and
// attach() runs on every re-render, so a new editor gets them again. An
// editor that isn't upgraded to LiaScript's element yet is left for the
// next attach(): setting a property on it now would hide the setter.
const indentWithSpaces = (editor) => {
if (!("tabSize" in editor) || !("useSoftTabs" in editor)) return
const aceOptions = (editor.getAttribute("data-ace-options") ?? "").split(/[\s,]+/).map((entry) => entry.split("=")[0])
if (!editor.hasAttribute("data-tabsize") && !aceOptions.includes("tabSize") && editor.tabSize !== 4) editor.tabSize = 4
if (!aceOptions.includes("useSoftTabs") && editor.useSoftTabs !== true) editor.useSoftTabs = true
}

// Every code block right before the iframe (LiaScript groups consecutive
// blocks into one project), with its file name and its current text.
const readCodeFiles = () => {
Expand Down Expand Up @@ -463,6 +479,7 @@ comment: Embed the glpython editor, execution visualizer, and turtle graphics
const warningText = unknownFeatures.length > 0 ? strings.unknownFeatures(unknownFeatures.join(", ")) : ""
if (warning && warning.textContent !== warningText) warning.textContent = warningText
setShown(warning, warningText !== "")
for (const editor of codeBlock?.querySelectorAll("lia-editor") ?? []) indentWithSpaces(editor)
updateRunButton(readCodeFiles() ?? [])
libraries.then(showLibraries)
if (frame.dataset.glpythonInitialized === "true") return
Expand Down Expand Up @@ -556,6 +573,11 @@ saves edits and keeps its code history (the version arrows stay). The glpython r
provides output and the step-by-step visualizer without mounting a second editor. It
does not reserve space for turtle graphics.

The macro makes the block's editor indent with 4 spaces: Tab inserts spaces, not
LiaScript's default tab character, which would stop Python with a `TabError` in a block
indented with spaces. A block's own `data-tabsize` or `data-ace-options` (e.g.
`<!-- data-ace-options="useSoftTabs=false" -->`) still wins.

## State and navigation

The fenced source belongs to LiaScript. Edits therefore survive slide navigation and
Expand Down
Loading