Skip to content

Remove auto-compile toggle and compile button from playground #16741

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
Mossaka merged 1 commit into from
Feb 19, 2026
+3 −80
Merged

Remove auto-compile toggle and compile button from playground #16741

Show file tree
Hide file tree
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
35 changes: 3 additions & 32 deletions docs/public/editor/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ const editorMount = $('editorMount');
const outputPlaceholder = $('outputPlaceholder');
const outputMount = $('outputMount');
const outputContainer = $('outputContainer');
const compileBtn = $('compileBtn');
const statusBadge = $('statusBadge');
const statusText = $('statusText');
const statusDot = $('statusDot');
Expand All @@ -48,7 +47,6 @@ const errorText = $('errorText');
const warningBanner = $('warningBanner');
const warningText = $('warningText');
const themeToggle = $('themeToggle');
const toggleTrack = $('toggleTrack');
const divider = $('divider');
const panelEditor = $('panelEditor');
const panelOutput = $('panelOutput');
Expand All @@ -60,7 +58,6 @@ const panels = $('panels');
let compiler = null;
let isReady = false;
let isCompiling = false;
let autoCompile = true;
let compileTimer = null;
let currentYaml = '';

Expand Down Expand Up @@ -115,7 +112,7 @@ const editorView = new EditorView({
run: () => { doCompile(); return true; }
}]),
EditorView.updateListener.of(update => {
if (update.docChanged && autoCompile && isReady) {
if (update.docChanged && isReady) {
scheduleCompile();
}
}),
Expand Down Expand Up @@ -155,13 +152,6 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e)
}
});

// ---------------------------------------------------------------
// Keyboard shortcut hint (Mac vs other)
// ---------------------------------------------------------------
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
document.querySelectorAll('.kbd-hint-mac').forEach(el => el.style.display = isMac ? 'inline' : 'none');
document.querySelectorAll('.kbd-hint-other').forEach(el => el.style.display = isMac ? 'none' : 'inline');

// ---------------------------------------------------------------
// Status (uses Primer Label component)
// ---------------------------------------------------------------
Expand All @@ -187,18 +177,6 @@ function setStatus(status, text) {
}
}

// ---------------------------------------------------------------
// Auto-compile toggle
// ---------------------------------------------------------------
$('autoCompileToggle').addEventListener('click', () => {
autoCompile = !autoCompile;
if (autoCompile) {
toggleTrack.classList.add('active');
} else {
toggleTrack.classList.remove('active');
}
});

// ---------------------------------------------------------------
// Compile
// ---------------------------------------------------------------
Expand Down Expand Up @@ -226,7 +204,6 @@ async function doCompile() {

isCompiling = true;
setStatus('compiling', 'Compiling...');
compileBtn.disabled = true;

// Hide old banners
errorBanner.classList.add('d-none');
Expand Down Expand Up @@ -262,12 +239,9 @@ async function doCompile() {
errorBanner.classList.remove('d-none');
} finally {
isCompiling = false;
compileBtn.disabled = !isReady;
}
}

compileBtn.addEventListener('click', doCompile);

// ---------------------------------------------------------------
// Banner close
// ---------------------------------------------------------------
Expand Down Expand Up @@ -359,13 +333,10 @@ async function init() {
await compiler.ready;
isReady = true;
setStatus('ready', 'Ready');
compileBtn.disabled = false;
loadingOverlay.classList.add('hidden');

// Auto-compile the default content
if (autoCompile) {
doCompile();
}
// Compile the default content
doCompile();
} catch (err) {
setStatus('error', 'Failed to load');
loadingOverlay.querySelector('.f4').textContent = 'Failed to load compiler';
Expand Down
48 changes: 0 additions & 48 deletions docs/public/editor/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,42 +115,12 @@
50% { opacity: 0.35; }
}

/* Toggle switch (no Primer equivalent in CSS-only) */
.toggle-track {
position: relative;
width: 34px;
height: 20px;
border-radius: 10px;
background: var(--bgColor-neutral-muted, var(--color-neutral-muted, #afb8c1));
transition: background 180ms ease;
flex-shrink: 0;
cursor: pointer;
}
.toggle-track.active {
background: var(--fgColor-accent, var(--color-accent-fg));
}
.toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 180ms ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-track.active .toggle-knob {
transform: translateX(14px);
}

/* Responsive */
@media (max-width: 767px) {
.panels-container { flex-direction: column !important; }
.divider { width: 100%; height: 4px; cursor: row-resize; }
.header-bar { gap: 8px !important; padding: 8px 12px !important; flex-wrap: wrap; height: auto !important; min-height: 48px !important; }
.header-separator { display: none !important; }
.auto-compile-label-text { display: none; }
}
</style>
</head>
Expand Down Expand Up @@ -181,20 +151,6 @@
</span>

<div class="d-flex flex-items-center gap-3 ml-auto">
<label class="d-flex flex-items-center gap-1 f6 color-fg-muted cursor-pointer" style="white-space: nowrap; user-select: none;" id="autoCompileToggle" title="Auto-compile on change">
<div class="toggle-track active" id="toggleTrack">
<div class="toggle-knob"></div>
</div>
<span class="auto-compile-label-text">Auto</span>
</label>

<button class="btn btn-primary btn-sm" id="compileBtn" disabled title="Compile workflow">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="flex-shrink-0">
<path d="M4 2a1 1 0 011.5-.87l8.5 5a1 1 0 010 1.74l-8.5 5A1 1 0 014 12V2z"/>
</svg>
Compile
</button>

<button class="btn-octicon" id="themeToggle" title="Toggle theme" aria-label="Toggle dark mode">
<!-- Sun icon (shown in dark mode) -->
<svg class="icon-sun octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="display:none">
Expand Down Expand Up @@ -235,10 +191,6 @@
</svg>
Workflow (.md)
</span>
<kbd class="color-bg-subtle color-fg-muted text-mono" style="padding: 1px 5px; font-size: 11px; border: 1px solid var(--borderColor-default, var(--color-border-default)); border-radius: 3px; line-height: 1.4;" title="Press to compile">
<span class="kbd-hint-mac" style="display:none">&#8984;&#9166;</span>
<span class="kbd-hint-other">Ctrl+Enter</span>
</kbd>
</div>
<div class="flex-1" style="min-height: 0; overflow: hidden;" id="editorMount"></div>
</div>
Expand Down