ui: add highlight preview

packages/ui-default/pages/home_preference.page.jsx

@@ -1,72 +0,0 @@
-import $ from 'jquery';
-import { renderLanguageSelect } from 'vj/components/languageselect';
-import { NamedPage } from 'vj/misc/Page';
-import {
-  delay, getAvailableLangs, i18n, tpl,
-} from 'vj/utils';
-
-async function initCodeLangHelper() {
-  const $el = $(tpl`<div class="row" id="codelang-select"></div>`);
-  $('[name="codeLang"]')
-    .parent().parent().parent()
-    .parent()
-    .hide()
-    .after($el);
-
-  const main = {};
-  for (const key in window.LANGS) {
-    if (!key.includes('.') && !window.LANGS[key].hidden) main[key] = window.LANGS[key].display;
-  }
-
-  await delay(50);
-  renderLanguageSelect(
-    document.getElementById('codelang-select'),
-    $('[name="codeLang"]'),
-    getAvailableLangs(),
-    main,
-    [$('[name="codeLang"]').val()],
-  );
-}
-
-function supportFontFamily(f) {
-  const h = 'Arial';
-  if (f.toLowerCase() === h.toLowerCase()) return true;
-  const canvas = document.createElement('canvas');
-  canvas.width = 100;
-  canvas.height = 100;
-  const ctx = canvas.getContext('2d');
-  ctx.textAlign = 'center';
-  ctx.fillStyle = 'black';
-  ctx.textBaseline = 'middle';
-  const g = (j) => {
-    ctx.clearRect(0, 0, 100, 100);
-    ctx.font = `100px ${j}, ${h}`;
-    ctx.fillText('a', 50, 50);
-    const k = ctx.getImageData(0, 0, 100, 100).data;
-    return [].slice.call(k).filter((l) => l !== 0);
-  };
-  return g(h).join('') !== g(f).join('');
-}
-
-const page = new NamedPage('home_preference', () => {
-  initCodeLangHelper();
-  $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
-    if (!supportFontFamily(this.value)) {
-      $(this).hide();
-      console.log(`Unsupported: ${this.value}`);
-    }
-    this.style.fontFamily = this.getAttribute('value');
-    this.textContent = i18n(this.textContent.trim());
-  });
-  function updateFont() {
-    this.style.fontFamily = $(this).val();
-  }
-  document.fonts.onloadingdone = () => {
-    $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
-      if (supportFontFamily(this.value)) $(this).show();
-    });
-  };
-  $('[name="fontFamily"], [name="codeFontFamily"]').on('change', updateFont).each(updateFont);
-});
-
-export default page;

packages/ui-default/pages/home_preference.page.tsx

@@ -0,0 +1,200 @@
+import $ from 'jquery';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { renderLanguageSelect } from 'vj/components/languageselect';
+import Dom from 'vj/components/react/DomComponent';
+import { NamedPage } from 'vj/misc/Page';
+import {
+  delay, getAvailableLangs, i18n, tpl,
+} from 'vj/utils';
+
+async function initCodeLangHelper() {
+  const $el = $(tpl`<div className="row" id="codelang-select"></div>`);
+  $('[name="codeLang"]')
+    .parent().parent().parent()
+    .parent()
+    .hide()
+    .after($el);
+
+  const main = {};
+  for (const key in window.LANGS) {
+    if (!key.includes('.') && !window.LANGS[key].hidden) main[key] = window.LANGS[key].display;
+  }
+
+  await delay(50);
+  renderLanguageSelect(
+    document.getElementById('codelang-select'),
+    $('[name="codeLang"]'),
+    getAvailableLangs(),
+    main,
+    [$('[name="codeLang"]').val()],
+  );
+}
+
+function supportFontFamily(f) {
+  const h = 'Arial';
+  if (f.toLowerCase() === h.toLowerCase()) return true;
+  const canvas = document.createElement('canvas');
+  canvas.width = 100;
+  canvas.height = 100;
+  const ctx = canvas.getContext('2d');
+  ctx.textAlign = 'center';
+  ctx.fillStyle = 'black';
+  ctx.textBaseline = 'middle';
+  const g = (j) => {
+    ctx.clearRect(0, 0, 100, 100);
+    ctx.font = `100px ${j}, ${h}`;
+    ctx.fillText('a', 50, 50);
+    const k = ctx.getImageData(0, 0, 100, 100).data;
+    return [].slice.call(k).filter((l) => l !== 0);
+  };
+  return g(h).join('') !== g(f).join('');
+}
+
+interface HighlightProps {
+  theme: string;
+  setAvailableThemes: (themes: string[]) => void;
+}
+function HighlightPreview(props: HighlightProps) {
+  const [ready, setReady] = React.useState(false);
+  const [html, setHtml] = React.useState(tpl`<pre><code></code></pre>`);
+  const [code, setCode] = React.useState('');
+  const [module, setShikiModule] = React.useState(null);
+  const [rerender, setRerender] = React.useState(0);
+
+  React.useEffect(() => {
+    $('[name="showInvisibleChar"]').on('change', (ev) => {
+      UserContext.showInvisibleChar = ev.target.checked;
+      setRerender((i) => i + 1);
+    });
+    Promise.all([
+      import('vj/components/highlighter/shiki'),
+      import('vj/components/highlighter/code-example'),
+    ]).then(([m, { default: c }]) => {
+      setShikiModule(m);
+      setCode(c);
+      props.setAvailableThemes(Object.keys(m.bundledThemes));
+    });
+  }, []);
+  React.useEffect(() => {
+    setReady(false);
+    let theme = props.theme;
+    if (!module?.bundledThemes?.[theme]) theme = 'light-plus';
+    module?.createHighlighter({ langs: ['cpp'], themes: [theme] }).then((shiki) => {
+      setHtml(shiki.codeToHtml(code, { lang: 'cpp', theme, transformers: module.getTransformers() }));
+      setReady(true);
+    });
+  }, [props.theme, module, code, rerender]);
+  return <div style={{ width: '100%' }}>
+    {(!ready) && <div className="loader-container" style={{ position: 'absolute' }}><div className="loader"></div></div>}
+    <div style={{ overflow: 'auto', maxHeight: '80vh' }} dangerouslySetInnerHTML={{ __html: html }}></div>
+  </div>;
+}
+
+const page = new NamedPage('home_preference', () => {
+  const div = document.createElement('div');
+
+  function App() {
+    const [highlightTheme, setHighlightTheme] = React.useState(UserContext.highlightTheme);
+    const [themes, setAvailableThemes] = React.useState([]);
+
+    React.useEffect(() => {
+      // document.fonts.onloadingdone = () => setProbeFont((i) => i + 1);
+      $('[name="highlightTheme"]').on('change', (ev) => {
+        setHighlightTheme(ev.target.value);
+      });
+    }, []);
+    React.useEffect(() => {
+      UserContext.highlightTheme = highlightTheme;
+    }, [highlightTheme]);
+
+    return <div>
+      <Dom childDom={$('#setting_display').parent().get(0)} />
+      <div className="section__body">
+        <div className="row">
+          <div className="medium-5 columns form__item">
+            <Dom childDom={$('[name="form_item_viewLang"]').parent().get(0)} />
+          </div>
+          <div className="medium-5 columns form__item end">
+            <Dom childDom={$('[name="form_item_theme"]').parent().get(0)} />
+          </div>
+        </div>
+        <div className="row">
+          <div className="medium-5 columns form__item end">
+            <Dom childDom={$('[name="form_item_timeZone"]').parent().get(0)} />
+          </div>
+        </div>
+        <div className="row">
+          <div className="medium-5 columns form__item">
+            <Dom childDom={$('[name="form_item_fontFamily"]').parent().get(0)} />
+          </div>
+          <div className="medium-5 columns form__item end">
+            <Dom childDom={$('[name="form_item_codeFontFamily"]').parent().get(0)} />
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="medium-5 columns form__item">
+            <Dom childDom={$('[name="form_item_skipAnimate"]').parent().get(0)} />
+          </div>
+          <div className="medium-5 columns form__item end">
+            <Dom childDom={$('[name="form_item_showTimeAgo"]').parent().get(0)} />
+          </div>
+        </div>
+      </div>
+      <div className="section__header">
+        <h1>test</h1>
+      </div>
+      <div className="section__body">
+        <div className="row">
+          <div className="medium-4 columns form__item">
+            <Dom childDom={$('[name="form_item_showInvisibleChar"]').parent().get(0)} />
+          </div>
+          <div className="medium-4 columns form__item">
+            <Dom childDom={$('[name="form_item_codeFontLigatures"]').parent().get(0)} />
+          </div>
+          <div className="medium-4 columns form__item end">
+            <Dom childDom={$('[name="form_item_formatCode"]').parent().get(0)} />
+          </div>
+        </div>
+        <div className="row">
+          <div className="medium-4 columns form__item">
+            {themes.length ? <label>
+              {i18n('highlightTheme')}
+              <select value={highlightTheme} onChange={(ev) => { setHighlightTheme(ev.target.value); }} name="highlightTheme" className="select">
+                {themes.map((theme) => <option key={theme} value={theme}>{theme}</option>)}
+              </select>
+            </label>
+              : <Dom childDom={$('[name="form_item_highlightTheme"]').parent().get(0)} />}
+          </div>
+        </div>
+        <React.Suspense fallback={<p>Loading preview</p>}>
+          <HighlightPreview theme={highlightTheme} setAvailableThemes={setAvailableThemes} />
+        </React.Suspense>
+      </div>
+    </div>;
+  }
+
+  $('form[method="post"]').prepend(div);
+  ReactDOM.createRoot(div).render(<App />);
+  initCodeLangHelper();
+  $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
+    if (!supportFontFamily(this.value)) {
+      $(this).hide();
+      console.log(`Unsupported: ${this.value}`);
+    }
+    this.style.fontFamily = this.getAttribute('value');
+    this.textContent = i18n(this.textContent.trim());
+  });
+  function updateFont() {
+    this.style.fontFamily = $(this).val();
+  }
+  document.fonts.onloadingdone = () => {
+    $('[name="fontFamily"] option, [name="codeFontFamily"] option').each(function () {
+      if (supportFontFamily(this.value)) $(this).show();
+    });
+  };
+  $('[name="fontFamily"], [name="codeFontFamily"]').on('change', updateFont).each(updateFont);
+});
+
+export default page;