hydrooj-blockly-ide 0.0.1

package/.npmignore

@@ -0,0 +1,21 @@
+# 排除所有隱藏檔案與資料夾
+.*
+!/.npmignore
+
+# 排除 CI 與開發工具設定
+.github/
+.vscode/
+node_modules/
+*.log
+
+# 排除測試與原始碼 (如果你的 build 結果在 dist/ 或 lib/)
+test/
+tests/
+src/
+__tests__/
+jest.config.js
+tsconfig.json
+
+# 排除 semantic-release 可能產生的檔案
+release.config.js
+.releaserc

package/frontend/inject.page.tsx

@@ -0,0 +1,5 @@
+import { addPage, NamedPage, AutoloadPage } from '@hydrooj/ui-default';
+
+addPage(new NamedPage('problem_detail', async () => {
+  document.body.appendChild(document.createRange().createContextualFragment(`<script src='/blockly-addon.js'></script>`));
+}));

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "hydrooj-blockly-ide",
+  "version": "0.0.1",
+  "description": "HydroOJ blockly-ide module",
+  "main": "index.ts",
+  "author": "Bryan0324",
+  "license": "MIT",
+  "devDependencies": {
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/github": "^12.0.6",
+    "@semantic-release/npm": "^13.1.5",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "semantic-release": "^25.0.3"
+  }
+}

package/public/blockly-addon.js

@@ -0,0 +1,409 @@
+/* global UiContext, UserContext */
+(() => {
+  // ===================== config =====================
+  const BLOCKLY_KEY = 'blockly.py';
+  const BLOCKLY_DISPLAY = 'Blockly (Python)';
+  const SUBMIT_LANG = 'py';
+  const BLOCKLY_VERSION = '6.20210701.0';
+
+  const TOOLBOX_XML = `
+<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox">
+  <category name="Logic" colour="%{BKY_LOGIC_HUE}">
+    <block type="controls_if"></block>
+    <block type="logic_compare"></block>
+    <block type="logic_operation"></block>
+    <block type="logic_negate"></block>
+    <block type="logic_boolean"></block>
+    <block type="logic_null"></block>
+    <block type="logic_ternary"></block>
+  </category>
+
+  <category name="Loops" colour="%{BKY_LOOPS_HUE}">
+    <block type="controls_repeat_ext">
+      <value name="TIMES">
+        <block type="math_number"><field name="NUM">10</field></block>
+      </value>
+    </block>
+    <block type="controls_whileUntil"></block>
+    <block type="controls_for"></block>
+    <block type="controls_forEach"></block>
+    <block type="controls_flow_statements"></block>
+  </category>
+
+  <category name="Math" colour="%{BKY_MATH_HUE}">
+    <block type="math_number"><field name="NUM">123</field></block>
+    <block type="math_arithmetic"></block>
+    <block type="math_single"></block>
+    <block type="math_trig"></block>
+    <block type="math_constant"></block>
+    <block type="math_number_property"></block>
+    <block type="math_round"></block>
+    <block type="math_modulo"></block>
+    <block type="math_random_int"></block>
+    <block type="math_random_float"></block>
+  </category>
+
+  <category name="Text" colour="%{BKY_TEXTS_HUE}">
+    <block type="text"></block>
+    <block type="text_join"></block>
+    <block type="text_length"></block>
+    <block type="text_isEmpty"></block>
+    <block type="text_indexOf"></block>
+    <block type="text_charAt"></block>
+    <block type="text_getSubstring"></block>
+    <block type="text_changeCase"></block>
+    <block type="text_trim"></block>
+    <block type="text_print"></block>
+    <block type="text_prompt_ext"></block>
+  </category>
+
+  <category name="Lists" colour="%{BKY_LISTS_HUE}">
+    <block type="lists_create_empty"></block>
+    <block type="lists_create_with"></block>
+    <block type="lists_repeat">
+      <value name="NUM">
+        <block type="math_number"><field name="NUM">5</field></block>
+      </value>
+    </block>
+    <block type="lists_length"></block>
+    <block type="lists_isEmpty"></block>
+    <block type="lists_indexOf"></block>
+    <block type="lists_getIndex"></block>
+    <block type="lists_setIndex"></block>
+  </category>
+
+  <sep></sep>
+  <category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}"></category>
+  <category name="Functions" custom="PROCEDURE" colour="%{BKY_PROCEDURES_HUE}"></category>
+</xml>`.trim();
+
+  const log = (...a) => console.log('[blockly-addon]', ...a);
+
+  // ===================== LANGS injection =====================
+  function ensureLangs() {
+    window.LANGS ||= {};
+    if (!window.LANGS[BLOCKLY_KEY]) {
+      window.LANGS[BLOCKLY_KEY] = {
+        display: BLOCKLY_DISPLAY,
+        monaco: 'blockly',
+        pretest: true,
+      };
+    }
+  }
+
+  // 題目允許 py / py.* -> 自動允許 blockly.py
+  function expandProblemLangsForBlockly() {
+    try {
+      const langs = UiContext?.pdoc?.config?.langs;
+      if (!Array.isArray(langs)) return;
+
+      const hasPy = langs.some((x) => x === 'py' || (typeof x === 'string' && x.startsWith('py.')));
+      if (hasPy && !langs.includes(BLOCKLY_KEY)) langs.push(BLOCKLY_KEY);
+    } catch (e) {
+      // ignore
+    }
+  }
+
+  // ===================== store wait =====================
+  function isReduxStore(x) {
+    return x && typeof x.getState === 'function'
+      && typeof x.dispatch === 'function'
+      && typeof x.subscribe === 'function';
+  }
+
+  async function waitForStore({ timeoutMs = 60000, intervalMs = 200 } = {}) {
+    const start = Date.now();
+    while (Date.now() - start < timeoutMs) {
+      if (isReduxStore(window.store)) return window.store;
+      await new Promise((r) => setTimeout(r, intervalMs));
+    }
+    throw new Error('Timed out waiting for window.store');
+  }
+
+  // ===================== request lang mapping (blockly.py -> py) =====================
+  function tryRewriteBody(body) {
+    if (body == null) return body;
+
+    // JSON string
+    if (typeof body === 'string') {
+      const s = body.trim();
+      if (!s) return body;
+      if (s[0] === '{' || s[0] === '[') {
+        try {
+          const obj = JSON.parse(s);
+          if (obj && typeof obj === 'object' && obj.lang === BLOCKLY_KEY) {
+            obj.lang = SUBMIT_LANG;
+            return JSON.stringify(obj);
+          }
+        } catch (e) {}
+      }
+      return body;
+    }
+
+    // FormData
+    if (typeof FormData !== 'undefined' && body instanceof FormData) {
+      if (body.get('lang') === BLOCKLY_KEY) body.set('lang', SUBMIT_LANG);
+      return body;
+    }
+
+    // URLSearchParams
+    if (typeof URLSearchParams !== 'undefined' && body instanceof URLSearchParams) {
+      if (body.get('lang') === BLOCKLY_KEY) body.set('lang', SUBMIT_LANG);
+      return body;
+    }
+
+    return body;
+  }
+
+  function patchFetchAndXHR() {
+    // fetch
+    if (!window.__blocklyAddonFetchPatched && typeof window.fetch === 'function') {
+      window.__blocklyAddonFetchPatched = true;
+      const origFetch = window.fetch.bind(window);
+      window.fetch = async (input, init = {}) => {
+        try {
+          if (init && init.body != null) init = { ...init, body: tryRewriteBody(init.body) };
+        } catch (e) {}
+        return origFetch(input, init);
+      };
+      log('fetch patched');
+    }
+
+    // XHR
+    if (!window.__blocklyAddonXHRPatched && window.XMLHttpRequest) {
+      window.__blocklyAddonXHRPatched = true;
+      const origSend = window.XMLHttpRequest.prototype.send;
+      window.XMLHttpRequest.prototype.send = function patchedSend(body) {
+        try { body = tryRewriteBody(body); } catch (e) {}
+        return origSend.call(this, body);
+      };
+      log('xhr patched');
+    }
+  }
+
+  // ===================== editor container finding =====================
+  function findEditorContainer() {
+    // 1) 最準：直接找 ScratchpadMonacoEditor（初始就是 blockly 時也存在）
+    const direct = document.querySelector('.ScratchpadMonacoEditor');
+    if (direct) return direct;
+  
+    // 2) 若 monaco 已經存在，用 monaco dom node 往上找最近的 ScratchpadMonacoEditor
+    const monacoRoot = document.querySelector('.monaco-editor');
+    if (monacoRoot) {
+      const host = monacoRoot.closest('.ScratchpadMonacoEditor');
+      if (host) return host;
+      // 退一步用 parent
+      if (monacoRoot.parentElement) return monacoRoot.parentElement;
+    }
+  
+    // 3) 最後 fallback：找可能的 editor slot（避免掛到 #scratchpad 這種頁面根容器）
+    return document.querySelector('[data-scratchpad-editor], .scratchpad__editor') || null;
+  }
+
+  // ===================== Blockly loader (python only) =====================
+  async function loadBlockly() {
+    if (window.Blockly) return window.Blockly;
+
+    const base = `https://unpkg.com/blockly@${BLOCKLY_VERSION}/`;
+
+    // core
+    await loadScript(`${base}blockly_compressed.js`);
+
+    // preload en msg (avoid some constants/mixins undefined when blocks load)
+    try {
+      await loadScript(`${base}msg/en.js`);
+      if (window.Blockly && window.Blockly.Msg && typeof window.Blockly.setLocale === 'function') {
+        window.Blockly.setLocale(window.Blockly.Msg);
+      }
+    } catch (e) {
+      log('preload msg/en failed (continue)', e);
+    }
+
+    // blocks
+    await loadScript(`${base}blocks_compressed.js`);
+
+    // python generator
+    await loadScript(`${base}python_compressed.js`);
+
+    // user locale (optional)
+    const lang = (UserContext && (UserContext.viewLang || UserContext.lang)) || 'en';
+    const map = {
+      zh: 'zh-hans',
+      zh_CN: 'zh-hans',
+      zh_TW: 'zh-hant',
+      ko: 'ko',
+      ko_KR: 'ko',
+      en: 'en',
+      en_US: 'en',
+    };
+    const msg = map[lang] || 'en';
+    try {
+      if (msg !== 'en') await loadScript(`${base}msg/${msg}.js`);
+      if (window.Blockly && window.Blockly.Msg && typeof window.Blockly.setLocale === 'function') {
+        window.Blockly.setLocale(window.Blockly.Msg);
+      }
+    } catch (e) {
+      log('locale load failed, continue with en', e);
+    }
+
+    if (!window.Blockly) throw new Error('Blockly not loaded');
+    return window.Blockly;
+  }
+
+  function loadScript(src) {
+    return new Promise((resolve, reject) => {
+      const existed = Array.from(document.scripts).some((s) => s.src === src);
+      if (existed) return resolve(null);
+      const el = document.createElement('script');
+      el.src = src;
+      el.async = true;
+      el.onload = () => resolve(null);
+      el.onerror = (err) => reject(err);
+      document.head.appendChild(el);
+    });
+  }
+
+  // ===================== mount/unmount + codegen =====================
+  let mounted = false;
+  let workspace = null;
+  let blocklyDiv = null;
+  let unsubscribe = null;
+  let lastLangKey = null;
+  let ro = null;
+
+  function genPython(Blockly) {
+    const gen = Blockly.Python;
+    return gen.workspaceToCode(workspace);
+  }
+
+  async function mountIfNeeded(store) {
+    const state = store.getState();
+    const langKey = state?.editor?.lang;
+
+    if (langKey === lastLangKey) return;
+    lastLangKey = langKey;
+
+    const isBlockly = (langKey === BLOCKLY_KEY);
+
+    if (!isBlockly) {
+      if (mounted) unmountBlockly();
+      return;
+    }
+
+    if (mounted) {
+      // already mounted, regenerate once
+      try {
+        const Blockly = window.Blockly;
+        const code = genPython(Blockly);
+        store.dispatch({ type: 'SCRATCHPAD_EDITOR_UPDATE_CODE', payload: code });
+      } catch (e) {}
+      return;
+    }
+
+    const container = findEditorContainer();
+    if (!container) {
+      // editor DOM might not be ready yet
+      lastLangKey = null;
+      setTimeout(() => mountIfNeeded(store), 250);
+      return;
+    }
+    // sanity check: avoid mounting on page root by mistake
+    if (container.id === 'scratchpad') {
+      lastLangKey = null;
+      setTimeout(() => mountIfNeeded(store), 200);
+      return;
+    }
+    const Blockly = await loadBlockly();
+
+    // ensure container has measurable height
+    container.style.height = '100%';
+    container.style.minHeight = '60vh';
+
+    blocklyDiv = document.createElement('div');
+    blocklyDiv.className = 'hydro-blockly-root';
+    blocklyDiv.style.width = '100%';
+    blocklyDiv.style.height = '100%';
+    blocklyDiv.style.minHeight = '60vh';
+    blocklyDiv.style.background = '#fff';
+
+    // replace monaco DOM
+    container.innerHTML = '';
+    container.appendChild(blocklyDiv);
+
+    workspace = Blockly.inject(blocklyDiv, {
+      toolbox: TOOLBOX_XML,
+      // 建議之後自帶 media，避免外部 sprites
+      // media: '/static/blockly/media/',
+    });
+
+    const doResize = () => {
+      try { Blockly.svgResize(workspace); } catch (e) {}
+    };
+
+    // observe resize
+    if (window.ResizeObserver) {
+      ro = new ResizeObserver(() => doResize());
+      ro.observe(container);
+    }
+
+    // initial resize after layout settles
+    requestAnimationFrame(() => requestAnimationFrame(doResize));
+    setTimeout(doResize, 0);
+    setTimeout(doResize, 200);
+
+    // change -> generate python -> write back to redux
+    workspace.addChangeListener(() => {
+      try {
+        const code = genPython(Blockly);
+        store.dispatch({ type: 'SCRATCHPAD_EDITOR_UPDATE_CODE', payload: code });
+      } catch (e) {
+        log('generate failed', e);
+      }
+    });
+
+    // initial generate once
+    try {
+      const code = genPython(Blockly);
+      store.dispatch({ type: 'SCRATCHPAD_EDITOR_UPDATE_CODE', payload: code });
+    } catch (e) {}
+
+    mounted = true;
+    log('Blockly mounted for', langKey);
+  }
+
+  function unmountBlockly() {
+    try {
+      if (ro) { ro.disconnect(); ro = null; }
+    } catch (e) {}
+    try {
+      if (workspace && typeof workspace.dispose === 'function') workspace.dispose();
+    } catch (e) {}
+
+    workspace = null;
+    mounted = false;
+
+    if (blocklyDiv && blocklyDiv.parentElement) blocklyDiv.parentElement.removeChild(blocklyDiv);
+    blocklyDiv = null;
+
+    log('Blockly unmounted');
+  }
+
+  // ===================== bootstrap =====================
+  async function startWhenReady() {
+    ensureLangs();
+    expandProblemLangsForBlockly();
+    patchFetchAndXHR();
+
+    const store = await waitForStore({ timeoutMs: 60000, intervalMs: 200 });
+
+    if (unsubscribe) unsubscribe();
+    unsubscribe = store.subscribe(() => mountIfNeeded(store));
+
+    // initial
+    mountIfNeeded(store);
+
+    log('started (store ready)');
+  }
+
+  startWhenReady().catch((e) => console.error('[blockly-addon] start failed:', e));
+})();