Feat: single runnable code block plugin for the editor

[khanzadimahdi]

Summary

Combines the code block feature and the separate "executable" runtime dropdown into one CKEditor plugin, adds a proper settings panel for code blocks, and makes snippets runnable inside the editor — not just in the published article.

The plugin requires CodeBlockEditing and registers its own codeBlock toolbar item (split button: insert + language list + "Code block settings"), so CodeBlock and the second executable toolbar entry are gone from the editor config. The old executable-code-block-plugin.ts is deleted.

Component settings

A contextual balloon follows the caret into any code block:

Language ▾        Runtime ▾
(toggle) Editable code        [▶ Run]     ← only with a runtime
─────────────────────────────────────
Program output:                     ✕
  …

• Language and Runtime as bordered input-like dropdowns showing their current value.
• Editable code — off by default, and only meaningful with a runtime: the row appears when one is chosen, and clearing the runtime clears the flag.
• Run + output, going through the same runCode WebSocket call the published page uses (wired via the new runnableCodeBlock: { onRun, translate, direction } config).
• Runnable blocks are labelled with their runtime next to the language label in the editing view.
• Panel direction follows the app direction (useI18n()), since the panel is translated by the app dictionary while the CKEditor UI language stays en. New UI strings added to en.json / fa.json.

Published rendering

CodeHighlight now honours the flag: CodeMirror is read-only unless the block is runnable and marked editable; the reset control follows the same condition, and run controls key off the runtime rather than the mere presence of the attribute object.

Data contract

Unchanged and back-compatible: data-executable="<runtime>" plus the new data-executable-editable="true" on <code>, which the article body parser already maps to executable.editable. Upcast now migrates both into real model attributes — including legacy content carrying them on <pre> — and strips them from the General-HTML-Support bag so they are never written twice.

Testing

Verified in a headless CKEditor instance (jsdom): loading, both commands, panel bindings, running with output, and data round-tripping. <pre><code class="language-go" data-executable="go-1.24" data-executable-editable="true"> survives load→save byte-identically and unrelated GHS attributes are preserved. npm run build passes; the repo has no jest tests.

Not covered by that: real balloon positioning and pointer interaction in a browser — worth a quick manual pass in the dashboard editor.

🤖 Generated with Claude Code