mathew/frontend/app/components/EditorCheatsheet.vue

<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>