First commit

frontend/app/components/EditorCheatsheet.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+/* Writing-help popup for the editor, opened by the "?" in the toolbar.
+   Same shape as SettingsModal: teleported overlay, closes on backdrop
+   click or the × (Esc is handled by ArticleForm, which also keeps it in
+   front of the fullscreen toggle). */
+defineProps<{ open: boolean }>()
+const emit = defineEmits<{ close: [] }>()
+const { t } = useI18n()
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="cheatsheet-popup">
+      <div v-if="open" class="cheatsheet-overlay" @click.self="emit('close')">
+        <div
+          class="cheatsheet-modal"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="t('cheatsheet.title')"
+        >
+          <div class="cheatsheet-head">
+            <h2 class="cheatsheet-title">{{ t('cheatsheet.title') }}</h2>
+            <button
+              type="button"
+              class="panel-icon-btn"
+              :aria-label="t('cheatsheet.closeAria')"
+              :title="t('common.close')"
+              @click="emit('close')"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </button>
+          </div>
+
+          <div class="cheatsheet-body">
+            <section class="cheatsheet-group">
+              <h3 class="cheatsheet-group-title">{{ t('cheatsheet.links') }}</h3>
+              <div class="cheat-row">
+                <code>[[Riemann zeta function]]</code>
+                <span>{{ t('cheatsheet.linkByTitle') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>[[Cauchy–Schwarz|the inequality]]</code>
+                <span>{{ t('cheatsheet.linkOwnWording') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>[text](https://example.org)</code>
+                <span>{{ t('cheatsheet.linkWebPage') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>https://example.org</code>
+                <span>{{ t('cheatsheet.bareUrl') }}</span>
+              </div>
+            </section>
+
+            <section class="cheatsheet-group">
+              <h3 class="cheatsheet-group-title">{{ t('cheatsheet.math') }}</h3>
+              <div class="cheat-row">
+                <code>$e^{i\pi}+1=0$</code>
+                <span>{{ t('cheatsheet.inline') }} — <KatexSpan tex="\,e^{i\pi}+1=0\," /></span>
+              </div>
+              <div class="cheat-row">
+                <code>$$\frac{\pi^2}{6}$$</code>
+                <span>{{ t('cheatsheet.display') }} — <KatexSpan tex="\,\tfrac{\pi^2}{6}\," /></span>
+              </div>
+              <div class="cheat-row">
+                <code>\R \N \Z \Q \C</code>
+                <span>{{ t('cheatsheet.numberSets') }} — <KatexSpan tex="\,\R\ \N\ \Z\ \Q\ \C\," /></span>
+              </div>
+              <div class="cheat-row">
+                <code>\sum \int \frac{a}{b} \sqrt{x}</code>
+                <span>{{ t('cheatsheet.sumsEtc') }}</span>
+              </div>
+            </section>
+
+            <section class="cheatsheet-group">
+              <h3 class="cheatsheet-group-title">{{ t('cheatsheet.text') }}</h3>
+              <div class="cheat-row">
+                <code>**bold** *italic*</code>
+                <span v-html="t('cheatsheet.boldItalic')"></span>
+              </div>
+              <div class="cheat-row">
+                <code>~~struck out~~</code>
+                <span v-html="t('cheatsheet.struckOut')"></span>
+              </div>
+              <div class="cheat-row">
+                <code>`inline code`</code>
+                <span>{{ t('cheatsheet.shadedCode') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>```python … ```</code>
+                <span>{{ t('cheatsheet.fencedBlock') }}</span>
+              </div>
+            </section>
+
+            <section class="cheatsheet-group">
+              <h3 class="cheatsheet-group-title">{{ t('cheatsheet.blocks') }}</h3>
+              <div class="cheat-row">
+                <code># ## ###</code>
+                <span>{{ t('cheatsheet.headings') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>- item</code>
+                <span>{{ t('cheatsheet.bulletList') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>1. item</code>
+                <span>{{ t('cheatsheet.numberedList') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>&gt; quote</code>
+                <span>{{ t('cheatsheet.blockquote') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>| a | b |</code>
+                <span>{{ t('cheatsheet.tableRows') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>---</code>
+                <span>{{ t('cheatsheet.hr') }}</span>
+              </div>
+            </section>
+
+            <section class="cheatsheet-group">
+              <h3 class="cheatsheet-group-title">{{ t('cheatsheet.shortcuts') }}</h3>
+              <div class="cheat-row">
+                <code>Ctrl / ⌘ + S</code>
+                <span>{{ t('cheatsheet.saveShortcut') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>Tab</code>
+                <span>{{ t('cheatsheet.tabIndent') }}</span>
+              </div>
+              <div class="cheat-row">
+                <code>Esc</code>
+                <span>{{ t('cheatsheet.escHelp') }}</span>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>