// ==UserScript==
// @name Google Sites - Code Formatter Modal
// @namespace google-sites-explainpark101-code-formatter
// @version 0.4.2
// @description Allows use of code formatter in Google Sites
// @match https://sites.google.com/d/*/edit
// @grant GM_addStyle
// @grant GM_setClipboard
// @run-at document-idle
// @require https://unpkg.com/[email protected]/standalone.js
// @require https://unpkg.com/[email protected]/plugins/babel.js
// @require https://unpkg.com/[email protected]/plugins/typescript.js
// @require https://unpkg.com/[email protected]/plugins/estree.js
// @require https://unpkg.com/[email protected]/plugins/html.js
// @require https://unpkg.com/[email protected]/plugins/postcss.js
// @require https://unpkg.com/[email protected]/plugins/markdown.js
// @require https://unpkg.com/[email protected]/dist/sql-formatter.min.js
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// -------------------- Styles --------------------
GM_addStyle(`
.exlnprk-open-btn {
position: fixed;
/* 수정: right -> left 로 변경 */
left: max(16px, env(safe-area-inset-left) + 12px);
bottom: max(16px, env(safe-area-inset-bottom) + 12px);
z-index: 2147483647;
background: #1f6feb; color: #fff; border: none; border-radius: 20px;
padding: 10px 14px; font-size: 14px; cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
transition: transform .12s ease, box-shadow .12s ease;
}
.exlnprk-open-btn:focus { outline: 2px solid #99c2ff; outline-offset: 2px; }
@media (max-width: 640px) {
.exlnprk-open-btn {
bottom: calc(max(16px, env(safe-area-inset-bottom) + 12px) + 56px);
}
}
/* 드래그 중 시각 효과 */
.exlnprk-open-btn.exlnprk-dragging {
transform: scale(0.96);
box-shadow: 0 10px 24px rgba(0,0,0,.35);
cursor: grabbing;
}
.exlnprk-open-btn.exlnprk-dragging::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 24px;
border: 2px dashed #1f6feb;
opacity: .6;
animation: exlnprk-pulse 1s ease-in-out infinite;
pointer-events: none;
}
@keyframes exlnprk-pulse {
0% { opacity: .6; }
50% { opacity: .2; }
100% { opacity: .6; }
}
dialog.exlnprk-dialog {
z-index: 2147483647; border: none; border-radius: 12px; padding: 0;
width: min(920px, 92vw);
color: #1f2328; background: #ffffff; box-shadow: 0 20px 48px rgba(0,0,0,.25);
}
dialog.exlnprk-dialog::backdrop { background: rgba(0,0,0,.35); }
.exlnprk-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-bottom: 1px solid #e6e6e6; background: #f7f9fc;
border-top-left-radius: 12px; border-top-right-radius: 12px;
}
.exlnprk-title { margin: 0; font-size: 16px; font-weight: 700; }
.exlnprk-close {
background: transparent; border: none; font-size: 18px; cursor: pointer;
}
.exlnprk-body { padding: 12px 16px 8px 16px; }
.exlnprk-controls {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px;
}
.exlnprk-controls label { font-size: 13px; color: #3b3f45; }
.exlnprk-controls select, .exlnprk-controls input[type="number"] {
padding: 4px 8px; font-size: 13px;
}
.exlnprk-checkbox { display: inline-flex; align-items: center; gap: 6px; }
.exlnprk-ta {
width: 100%; height: 380px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 13px; line-height: 1.5; padding: 10px 12px; border: 1px solid #e1e4e8; border-radius: 8px;
}
.exlnprk-footer {
display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 10px 16px 16px 16px;
}
.exlnprk-btn {
border: 1px solid #d0d7de; background: #f6f8fa; color: #24292f;
padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.exlnprk-btn.primary { background: #1f6feb; color: #fff; border-color: #1f6feb; }
.exlnprk-btn:focus { outline: 2px solid #99c2ff; outline-offset: 2px; }
.exlnprk-status { font-size: 12px; color: #59636e; padding: 0 16px 12px 16px; min-height: 18px; }
.exlnprk-left { display: flex; gap: 8px; }
.exlnprk-right { display: flex; gap: 8px; }
.exlnprk-body {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.exlnprk-controls {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.exlnprk-ta {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
resize: vertical;
overflow: auto;
}
`);
// -------------------- Constants & Utils --------------------
const LS_KEYS = {
customLangs: 'exlnprk-customLangs',
lastLang: 'exlnprk-lastLang',
btnPos: 'exlnprk-open-btn-pos',
};
const baseLangs = ['python', 'javascript', 'sql', 'css', 'html', 'vue', 'cpp', 'rust', 'go', 'r'];
const prettierParsers = {
javascript: 'babel',
typescript: 'typescript',
html: 'html',
css: 'css',
json: 'json',
markdown: 'markdown',
vue: 'vue',
};
const loadCustomLangs = () => {
try { return JSON.parse(localStorage.getItem(LS_KEYS.customLangs) || '[]'); }
catch { return []; }
};
const saveCustomLangs = (arr) => {
try { localStorage.setItem(LS_KEYS.customLangs, JSON.stringify(arr)); } catch {}
};
const getIndent = () => Math.min(Math.max(parseInt(indentInput.value || '2', 10), 1), 8);
const tabsToSpaces = (text, size) => text.replace(/\t/g, ' '.repeat(size));
const normalizeEOL = (text) => text.replace(/\r\n?/g, '\n');
function setStatus(msg, isError = false) {
status.textContent = msg || '';
status.style.color = isError ? '#b42318' : '#59636e';
}
function ensurePrettier() {
const has = !!(globalThis.prettier && globalThis.prettierPlugins);
if (!has) setStatus('Prettier 로딩 중이거나 사용 불가 상태입니다.', true);
return has;
}
function ensureSqlFormatter() {
return !!globalThis.sqlFormatter;
}
function displayName(v) {
const map = {
python: 'Python', javascript: 'JavaScript', sql: 'SQL', css: 'CSS',
html: 'HTML', vue: 'Vue', cpp: 'C++', rust: 'Rust', go: 'Go', r: 'R'
};
return map[v] || v;
}
function option(value, text) {
const o = document.createElement('option'); o.value = value; o.textContent = text; return o;
}
function isCustomValue(v) { return v.startsWith('custom:'); }
function customValue(name) { return 'custom:' + name; }
// -------------------- Elements (Trusted Types-safe) --------------------
const openBtn = document.createElement('button');
openBtn.className = 'exlnprk-open-btn';
openBtn.type = 'button';
openBtn.setAttribute('aria-label', 'Code Formatter 열기');
openBtn.textContent = 'Code Formatter';
const dlg = document.createElement('dialog');
dlg.className = 'exlnprk-dialog';
dlg.setAttribute('role', 'dialog');
dlg.setAttribute('aria-modal', 'true');
const header = document.createElement('div');
header.className = 'exlnprk-header';
const title = document.createElement('h2');
title.id = 'exlnprk-title';
title.className = 'exlnprk-title';
title.textContent = '코드 포맷터';
const closeX = document.createElement('button');
closeX.className = 'exlnprk-close';
closeX.type = 'button';
closeX.setAttribute('aria-label', '닫기');
closeX.textContent = '✕';
header.append(title, closeX);
const body = document.createElement('div');
body.className = 'exlnprk-body';
body.setAttribute('aria-labelledby', 'exlnprk-title');
const controls = document.createElement('div');
controls.className = 'exlnprk-controls';
const langLabel = document.createElement('label'); langLabel.textContent = '언어 ';
const langSel = document.createElement('select');
langSel.id = 'exlnprk-lang';
langSel.setAttribute('aria-label', '언어 선택');
langLabel.appendChild(langSel);
const addBtn = document.createElement('button');
addBtn.type = 'button';
addBtn.className = 'exlnprk-btn';
addBtn.textContent = '언어 추가';
const delBtn = document.createElement('button');
delBtn.type = 'button';
delBtn.className = 'exlnprk-btn';
delBtn.textContent = '언어 삭제';
const indentLabel = document.createElement('label'); indentLabel.textContent = '들여쓰기 ';
const indentInput = document.createElement('input');
indentInput.id = 'exlnprk-indent';
indentInput.type = 'number'; indentInput.min = '1'; indentInput.max = '8'; indentInput.value = '2';
indentInput.setAttribute('aria-label', '들여쓰기 공백 수');
indentLabel.appendChild(indentInput);
const cbWrap = document.createElement('label'); cbWrap.className = 'exlnprk-checkbox';
const autoTabs = document.createElement('input');
autoTabs.id = 'exlnprk-autoTabs'; autoTabs.type = 'checkbox'; autoTabs.checked = true;
cbWrap.append(autoTabs, document.createTextNode('붙여넣을 때 탭을 스페이스로 자동 변환'));
controls.append(langLabel, addBtn, delBtn, indentLabel, cbWrap);
const ta = document.createElement('textarea');
ta.id = 'exlnprk-ta';
ta.className = 'exlnprk-ta';
ta.setAttribute('spellcheck', 'false');
ta.placeholder = '여기에 코드를 붙여넣으세요';
body.append(controls, ta);
const status = document.createElement('div');
status.id = 'exlnprk-status';
status.className = 'exlnprk-status';
status.setAttribute('aria-live', 'polite');
const footer = document.createElement('div');
footer.className = 'exlnprk-footer';
const leftGrp = document.createElement('div'); leftGrp.className = 'exlnprk-left';
const fmtBtn = document.createElement('button');
fmtBtn.id = 'exlnprk-format';
fmtBtn.className = 'exlnprk-btn';
fmtBtn.type = 'button';
fmtBtn.title = 'Ctrl+Enter';
fmtBtn.textContent = '포맷팅';
const copyBtn = document.createElement('button');
copyBtn.id = 'exlnprk-copy';
copyBtn.className = 'exlnprk-btn primary';
copyBtn.type = 'button';
copyBtn.title = 'Ctrl+Shift+C';
copyBtn.textContent = '복사';
leftGrp.append(fmtBtn, copyBtn);
const rightGrp = document.createElement('div'); rightGrp.className = 'exlnprk-right';
const closeBtn2 = document.createElement('button');
closeBtn2.id = 'exlnprk-close';
closeBtn2.className = 'exlnprk-btn';
closeBtn2.type = 'button';
closeBtn2.textContent = '닫기(Esc)';
rightGrp.append(closeBtn2);
footer.append(leftGrp, rightGrp);
dlg.append(header, body, status, footer);
document.documentElement.append(openBtn, dlg);
// -------------------- Language select --------------------
function populateLangs() {
const current = langSel.value;
langSel.replaceChildren();
baseLangs.forEach(l => langSel.appendChild(option(l, displayName(l))));
loadCustomLangs().forEach(name => langSel.appendChild(option(customValue(name), name)));
const last = localStorage.getItem(LS_KEYS.lastLang);
if (last && [...langSel.options].some(o => o.value === last)) langSel.value = last;
else if (current && [...langSel.options].some(o => o.value === current)) langSel.value = current;
}
populateLangs();
// -------------------- Formatters --------------------
async function formatWithPrettier(code, lang) {
const parser = prettierParsers[lang];
if (!parser) return null;
const prettier = globalThis.prettier;
const plugins = globalThis.prettierPlugins;
return await prettier.format(code, {
parser,
plugins,
tabWidth: getIndent(),
useTabs: false,
endOfLine: 'lf',
semi: true,
singleQuote: true,
printWidth: 100,
trailingComma: 'es5',
});
}
function formatWithSqlFormatter(code) {
if (!ensureSqlFormatter()) return null;
try {
return globalThis.sqlFormatter.format(code, { language: 'sql', tabWidth: getIndent() });
} catch (e) {
console.error('[exlnprk] sql format error:', e);
setStatus(`SQL 포맷 실패: ${e?.message || e}`, true);
return null;
}
}
function basicCleanup(text) {
return tabsToSpaces(normalizeEOL(text), getIndent());
}
// -------------------- Core actions --------------------
async function formatCode() {
let code = ta.value;
code = tabsToSpaces(code, getIndent());
const lang = langSel.value;
try {
if (prettierParsers[lang]) {
if (!ensurePrettier()) {
const safe = normalizeEOL(code);
ta.value = safe;
return { ok: false, code: safe, message: 'Prettier 미사용: 기본 정리만 적용' };
}
try {
const formatted = await formatWithPrettier(code, lang);
ta.value = formatted;
return { ok: true, code: formatted };
} catch (err) {
console.warn('[exlnprk] Prettier parse error; fallback to basic cleanup:', err);
setStatus(`포맷 실패(구문 오류 가능). 기본 정리로 대체했습니다.`, true);
const safe = basicCleanup(code);
ta.value = safe;
return { ok: false, code: safe, message: err?.message || String(err) };
}
}
if (lang === 'sql') {
const formatted = formatWithSqlFormatter(code) || normalizeEOL(code);
ta.value = formatted;
return { ok: true, code: formatted };
}
const cleaned = basicCleanup(code);
ta.value = cleaned;
return { ok: true, code: cleaned };
} catch (e) {
console.error('[exlnprk] format error:', e);
setStatus(`포맷팅 실패: ${e?.message || e}`, true);
const safe = normalizeEOL(code);
ta.value = safe;
return { ok: false, code: safe, message: e?.message || String(e) };
}
}
async function copyFormatted() {
const { code } = await formatCode();
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(code);
} else if (typeof GM_setClipboard === 'function') {
GM_setClipboard(code, { type: 'text', mimetype: 'text/plain' });
} else {
const tmp = document.createElement('textarea');
tmp.value = code;
document.body.appendChild(tmp);
tmp.select();
document.execCommand('copy');
tmp.remove();
}
setStatus('포맷팅된 코드를 클립보드로 복사했습니다.');
} catch (e) {
console.error('[exlnprk] copy error:', e);
setStatus('클립보드 복사에 실패했습니다.', true);
}
}
// -------------------- Dialog open/close --------------------
let openerForFocus = null;
function openDialog() {
openerForFocus = document.activeElement;
dlg.showModal();
setTimeout(() => ta.focus(), 0);
setStatus('팁: Ctrl+Enter=포맷, Ctrl+Shift+C=복사, Esc=닫기');
}
function closeDialog() {
dlg.close();
setStatus('');
if (openerForFocus && typeof openerForFocus.focus === 'function') openerForFocus.focus();
else openBtn.focus();
}
// -------------------- Events --------------------
closeX.addEventListener('click', closeDialog);
closeBtn2.addEventListener('click', closeDialog);
ta.addEventListener('paste', (ev) => {
if (!autoTabs.checked) return;
try {
const data = ev.clipboardData?.getData('text');
if (typeof data === 'string') {
ev.preventDefault();
const converted = tabsToSpaces(data, getIndent());
const { selectionStart, selectionEnd, value } = ta;
const before = value.slice(0, selectionStart);
const after = value.slice(selectionEnd);
ta.value = before + converted + after;
const pos = before.length + converted.length;
ta.setSelectionRange(pos, pos);
}
} catch {}
});
dlg.addEventListener('keydown', async (e) => {
if (e.key === 'Escape') { e.preventDefault(); closeDialog(); return; }
const meta = e.ctrlKey || e.metaKey;
if (meta && e.key.toLowerCase() === 'enter') { e.preventDefault(); const res = await formatCode(); if (res.ok) setStatus('포맷팅 완료'); }
if (meta && e.shiftKey && e.key.toLowerCase() === 'c') { e.preventDefault(); await copyFormatted(); }
});
fmtBtn.addEventListener('click', async () => {
const res = await formatCode();
if (res.ok) setStatus('포맷팅 완료');
});
copyBtn.addEventListener('click', async () => { await copyFormatted(); });
window.addEventListener('keydown', (e) => {
if (e.altKey && e.shiftKey && e.key.toLowerCase() === 'm') {
e.preventDefault();
if (dlg.open) closeDialog(); else openDialog();
}
});
['keydown', 'keyup', 'keypress'].forEach(type => {
ta.addEventListener(type, (e) => e.stopPropagation());
});
langSel.addEventListener('change', () => {
try { localStorage.setItem(LS_KEYS.lastLang, langSel.value); } catch {}
delBtn.disabled = !isCustomValue(langSel.value);
});
addBtn.addEventListener('click', () => {
const name = (prompt('추가할 언어 이름을 입력하세요 (예: Kotlin)') || '').trim();
if (!name) return;
const exists = [...langSel.options].some(o => o.textContent.toLowerCase() === name.toLowerCase());
if (exists) { setStatus('이미 존재하는 언어입니다.'); return; }
const list = loadCustomLangs(); list.push(name); saveCustomLangs(list);
populateLangs();
langSel.value = customValue(name);
try { localStorage.setItem(LS_KEYS.lastLang, langSel.value); } catch {}
delBtn.disabled = false;
setStatus(`언어 추가: ${name}`);
});
delBtn.addEventListener('click', () => {
const v = langSel.value;
if (!isCustomValue(v)) { setStatus('기본 언어는 삭제할 수 없습니다.'); return; }
const name = v.slice('custom:'.length);
if (!confirm(`"${name}" 언어를 삭제할까요?`)) return;
const list = loadCustomLangs().filter(n => n !== name);
saveCustomLangs(list);
populateLangs();
delBtn.disabled = !isCustomValue(langSel.value);
setStatus(`언어 삭제: ${name}`);
});
delBtn.disabled = !isCustomValue(langSel.value);
// -------------------- Hold-to-drag(500ms) on FAB --------------------
(function installHoldDragButton(btn, onActivate, opts = {}) {
const holdMs = opts.holdMs ?? 500;
const storageKey = LS_KEYS.btnPos;
try {
const saved = JSON.parse(localStorage.getItem(storageKey) || 'null');
// 수정: saved.right -> saved.left
if (saved && saved.left && saved.bottom) {
// 수정: btn.style.right -> btn.style.left
btn.style.left = saved.left;
btn.style.bottom = saved.bottom;
}
} catch {}
let down = false;
let dragging = false;
let holdTimer = null;
// 수정: startRight -> startLeft
let startX = 0, startY = 0, startLeft = 0, startBottom = 0;
let pointerId = null;
function savePos() {
try {
localStorage.setItem(storageKey, JSON.stringify({
// 수정: right -> left
left: btn.style.left || '',
bottom: btn.style.bottom || ''
}));
} catch {}
}
function startDragVisual() {
dragging = true;
btn.classList.add('exlnprk-dragging');
try { setStatus('버튼 이동 모드: 드래그로 위치 조정'); } catch {}
}
function endDragVisual() {
dragging = false;
btn.classList.remove('exlnprk-dragging');
try { setStatus(''); } catch {}
}
function onPointerDown(e) {
if (typeof e.button === 'number' && e.button !== 0) return;
down = true;
dragging = false;
pointerId = e.pointerId;
btn.setPointerCapture?.(pointerId);
const cs = getComputedStyle(btn);
startX = e.clientX;
startY = e.clientY;
// 수정: cs.right -> cs.left, startRight -> startLeft
startLeft = parseInt(cs.left, 10) || 0;
startBottom = parseInt(cs.bottom, 10) || 0;
holdTimer = setTimeout(() => {
if (!down) return;
startDragVisual();
}, holdMs);
e.preventDefault();
e.stopPropagation();
}
function onPointerMove(e) {
if (!down || !dragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
// 수정: right 계산 -> left 계산
btn.style.left = Math.max(0, startLeft + dx) + 'px';
btn.style.bottom = Math.max(0, startBottom - dy) + 'px';
}
function onPointerUp(e) {
if (!down) return;
down = false;
clearTimeout(holdTimer);
holdTimer = null;
if (dragging) {
endDragVisual();
savePos();
e.preventDefault();
e.stopPropagation();
return;
}
if (typeof onActivate === 'function') onActivate();
e.preventDefault();
e.stopPropagation();
}
function onPointerCancel() {
if (!down) return;
down = false;
clearTimeout(holdTimer);
holdTimer = null;
if (dragging) {
endDragVisual();
savePos();
}
}
btn.addEventListener('pointerdown', onPointerDown);
btn.addEventListener('pointermove', onPointerMove);
btn.addEventListener('pointerup', onPointerUp);
btn.addEventListener('pointercancel', onPointerCancel);
btn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
}, true);
})(openBtn, openDialog, { holdMs: 500 });
// -------------------- Keyboard nudge(Alt+Shift+Arrows) --------------------
(function enablePositionNudge(btn) {
function save() {
try {
localStorage.setItem(LS_KEYS.btnPos, JSON.stringify({
// 수정: right -> left
left: btn.style.left || '',
bottom: btn.style.bottom || ''
}));
} catch {}
}
window.addEventListener('keydown', (e) => {
if (!(e.altKey && e.shiftKey)) return;
const step = 4;
const cs = getComputedStyle(btn);
// 수정: curRight -> curLeft
const curLeft = parseInt(cs.left, 10) || 0;
const curBottom = parseInt(cs.bottom, 10) || 0;
if (e.key === 'ArrowUp') { btn.style.bottom = (curBottom + step) + 'px'; save(); e.preventDefault(); }
else if (e.key === 'ArrowDown') { btn.style.bottom = Math.max(0, curBottom - step) + 'px'; save(); e.preventDefault(); }
// 수정: right -> left 로직 변경
else if (e.key === 'ArrowLeft') { btn.style.left = Math.max(0, curLeft - step) + 'px'; save(); e.preventDefault(); }
else if (e.key === 'ArrowRight') { btn.style.left = (curLeft + step) + 'px'; save(); e.preventDefault(); }
// 수정: right, left 스타일 초기화
else if (e.key.toLowerCase() === 'r') { btn.style.left = ''; btn.style.right = ''; btn.style.bottom = ''; localStorage.removeItem(LS_KEYS.btnPos); e.preventDefault(); }
});
})(openBtn);
})();
