ui: add hint for problem_submit page

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

@@ -1,7 +1,9 @@
 import $ from 'jquery';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import { renderLanguageSelect } from 'vj/components/languageselect';
 import { NamedPage } from 'vj/misc/Page';
-import { getAvailableLangs } from 'vj/utils';
+import { getAvailableLangs, i18n, tpl } from 'vj/utils';
 
 const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', 'homework_detail_problem_submit'], async () => {
   const { config } = UiContext.pdoc;
@@ -33,6 +35,21 @@ const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', '
     mainLangs,
     preferences,
   );
+
+  if (localStorage.getItem('submit-hint') === 'dismiss') return;
+  $(tpl`<div name="hint" class="typo"></div>`).prependTo('[name="submit_section"]');
+  const root = ReactDOM.createRoot(document.querySelector('[name="hint"]'));
+  function ignore() {
+    root.unmount();
+    localStorage.setItem('submit-hint', 'dismiss');
+  }
+
+  root.render(<blockquote className="note">
+    <p>{i18n('This page is only for pasting code from other sources.')}</p>
+    <p>{i18n("To get a better editing experience, with code highlighting and test runs, \
+please go back to the problem detail page and use 'Open Scratchpad' button.")}</p>
+    <a onClick={() => root.unmount()}>{i18n('Dismiss')}</a> / <a onClick={ignore}>{i18n("Don't show again")}</a>
+  </blockquote>);
 });
 
 export default page;