@meith/web 0.31.0 → 0.33.0

package/src/components/admin/theme-forms.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState, useEffect, useState } from 'react'
 
+import { textLinkVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
   importThemeAction,
@@ -43,8 +45,7 @@ const INPUT =
 const GHOST_BUTTON =
   'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
-const LINK =
-  'text-xs font-medium underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const LINK = `${textLinkVariants({ tone: 'inherit', size: 'xs' })} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`
 
 export type TokenValue = EditableToken
 

package/src/components/admin/webhook-forms.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { useActionState } from 'react'
+
+import { EMPTY_STATE } from '@/server/auth-form-state'
+import {
+  createWebhookAction,
+  deleteWebhookAction,
+  toggleWebhookAction,
+} from '@/server/webhook-actions'
+
+import { FormError, SubmitButton } from '../auth/form-controls'
+import { type Copy, fromCopy } from '../shell/copy'
+
+export function CreateWebhookForm({
+  topics,
+  formats,
+  copy,
+}: {
+  topics: readonly string[]
+  formats: readonly string[]
+  copy: Copy
+}) {
+  const [state, action] = useActionState(createWebhookAction, EMPTY_STATE)
+
+  return (
+    <form action={action} className="flex flex-col gap-4">
+      <FormError message={state.error} />
+
+      {state.notice === 'created' && state.values?.secret !== undefined && (
+        <div
+          role="status"
+          className="flex flex-col gap-2 rounded-md border border-accent bg-post-highlight px-3 py-3"
+        >
+          <p className="text-sm font-semibold">{fromCopy(copy, 'adminPanel.webhook.copyNow')}</p>
+          <code className="block overflow-x-auto rounded-sm bg-card px-2 py-1 font-mono text-sm">
+            {state.values.secret}
+          </code>
+        </div>
+      )}
+
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="font-medium">{fromCopy(copy, 'adminPanel.webhook.url')}</span>
+        <input
+          name="url"
+          type="url"
+          required
+          placeholder={fromCopy(copy, 'adminPanel.webhook.urlPlaceholder')}
+          className="rounded-sm border border-input bg-card px-2 py-1"
+        />
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.webhook.urlHint')}
+        </span>
+      </label>
+
+      <fieldset className="flex flex-col gap-2">
+        <legend className="text-sm font-medium">
+          {fromCopy(copy, 'adminPanel.webhook.topics')}
+        </legend>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.webhook.topicsHint')}
+        </span>
+        <div className="flex flex-wrap gap-x-4 gap-y-2">
+          {topics.map((topic) => (
+            <label key={topic} className="flex items-center gap-2 text-sm">
+              <input type="checkbox" name="topics" value={topic} />
+              <code className="font-mono text-xs">{topic}</code>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+
+      <fieldset className="flex flex-col gap-2">
+        <legend className="text-sm font-medium">
+          {fromCopy(copy, 'adminPanel.webhook.format')}
+        </legend>
+        <span className="text-xs text-muted-foreground">
+          {fromCopy(copy, 'adminPanel.webhook.formatHint')}
+        </span>
+        <div className="flex flex-wrap gap-x-4 gap-y-2">
+          {formats.map((format, index) => (
+            <label key={format} className="flex items-center gap-2 text-sm">
+              <input type="radio" name="format" value={format} defaultChecked={index === 0} />
+              <span>{fromCopy(copy, `adminPanel.webhook.format.${format}`)}</span>
+            </label>
+          ))}
+        </div>
+      </fieldset>
+
+      <label className="flex items-center gap-2 text-sm">
+        <input type="checkbox" name="active" value="true" defaultChecked />
+        <span className="font-medium">{fromCopy(copy, 'adminPanel.webhook.active')}</span>
+      </label>
+
+      <SubmitButton>{fromCopy(copy, 'adminPanel.webhook.create')}</SubmitButton>
+    </form>
+  )
+}
+
+export function ToggleWebhookForm({
+  webhookId,
+  active,
+  copy,
+}: {
+  webhookId: number
+  active: boolean
+  copy: Copy
+}) {
+  const [state, action] = useActionState(toggleWebhookAction, EMPTY_STATE)
+
+  return (
+    <form action={action}>
+      <input type="hidden" name="webhookId" value={webhookId} />
+      <input type="hidden" name="active" value={active ? 'false' : 'true'} />
+      <SubmitButton>
+        {fromCopy(copy, active ? 'adminPanel.webhook.disable' : 'adminPanel.webhook.enable')}
+      </SubmitButton>
+      {state.error !== undefined && (
+        <span className="ml-2 text-xs text-destructive">{state.error}</span>
+      )}
+    </form>
+  )
+}
+
+export function DeleteWebhookForm({ webhookId, copy }: { webhookId: number; copy: Copy }) {
+  const [state, action] = useActionState(deleteWebhookAction, EMPTY_STATE)
+
+  return (
+    <form action={action}>
+      <input type="hidden" name="webhookId" value={webhookId} />
+      <SubmitButton>{fromCopy(copy, 'adminPanel.webhook.delete')}</SubmitButton>
+      {state.error !== undefined && (
+        <span className="ml-2 text-xs text-destructive">{state.error}</span>
+      )}
+    </form>
+  )
+}

package/src/components/auth/register-form.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { TextLink } from '@meith/ui'
+
 import { registerAction } from '@/server/auth-actions'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
@@ -135,14 +137,9 @@ export function RegisterForm({
           />
           <span>
             {copy['authForm.register.termsLead']}
-            <a
-              href={terms.href}
-              target="_blank"
-              rel="noreferrer"
-              className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
-            >
+            <TextLink href={terms.href} target="_blank" rel="noreferrer">
               {terms.label}
-            </a>
+            </TextLink>
             {copy['authForm.register.termsTail']}
           </span>
         </label>

package/src/components/board/live-region.tsx

@@ -2,6 +2,8 @@
 
 import { type ReactNode, useEffect, useRef, useState } from 'react'
 
+import { textLinkVariants } from '@meith/ui'
+
 export interface LiveRegionProps {
   readonly children: ReactNode
   readonly refresh: () => Promise<ReactNode>
@@ -63,7 +65,7 @@ export function LiveRegion({ children, refresh, seconds, label }: LiveRegionProp
           <button
             type="button"
             onClick={() => setPaused((was) => !was)}
-            className="font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground"
+            className={textLinkVariants()}
           >
             {paused ? 'Resume' : 'Pause'}
           </button>

package/src/components/content/attachment-field.tsx

@@ -1,45 +1,116 @@
 'use client'
 
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 
 import { maxBytesFor, maxPerPostFor, type UploadLimits } from '@meith/attachments/limits'
 import { ACCEPTED_EXTENSIONS, ATTACHMENT_FIELD } from '@meith/attachments/types'
+import { cn } from '@meith/ui'
 
 import { formatBytes } from '@/view/attachments'
 
 import { formatFromCopy, fromCopy, useCopy } from '../shell/copy'
 
+interface ChosenFile {
+  readonly id: string
+  readonly file: File
+}
+
+function filesFrom(input: HTMLInputElement | null): readonly File[] {
+  return input === null ? [] : Array.from(input.files ?? [])
+}
+
 export function AttachmentField({ limits }: { limits: UploadLimits }) {
   const input = useRef<HTMLInputElement>(null)
   const copy = useCopy()
   const perPost = maxPerPostFor(limits)
   const maxBytes = maxBytesFor(limits)
 
+  const [chosen, setChosen] = useState<readonly ChosenFile[]>([])
+  const [dragging, setDragging] = useState(false)
+
+  function sync(): void {
+    setChosen(filesFrom(input.current).map((file) => ({ id: crypto.randomUUID(), file })))
+  }
+
+  function addFiles(added: FileList): void {
+    if (input.current === null) return
+    const next = new DataTransfer()
+    for (const file of filesFrom(input.current)) next.items.add(file)
+    for (const file of added) next.items.add(file)
+    input.current.files = next.files
+    sync()
+  }
+
+  function removeChosen(id: string): void {
+    if (input.current === null) return
+    const next = new DataTransfer()
+    for (const entry of chosen) {
+      if (entry.id !== id) next.items.add(entry.file)
+    }
+    input.current.files = next.files
+    sync()
+  }
+
   return (
-    <div
-      className="flex flex-col gap-1 text-sm"
-      onDragOver={(event) => event.preventDefault()}
-      onDrop={(event) => {
-        event.preventDefault()
-        if (input.current === null) return
-        const files = new DataTransfer()
-        for (const file of event.dataTransfer.files) files.items.add(file)
-        input.current.files = files.files
-      }}
-    >
+    <div className="flex flex-col gap-1 text-sm">
       <label htmlFor={ATTACHMENT_FIELD} className="font-medium">
         {fromCopy(copy, 'composer.attachments.label')}
       </label>
-      <input
-        ref={input}
-        id={ATTACHMENT_FIELD}
-        type="file"
-        name={ATTACHMENT_FIELD}
-        multiple
-        aria-describedby={`${ATTACHMENT_FIELD}-limits`}
-        accept={ACCEPTED_EXTENSIONS.map((extension) => `.${extension}`).join(',')}
-        className="rounded-md border border-input bg-card px-3 py-1.5 text-sm file:mr-3 file:rounded file:border-0 file:bg-muted file:px-3 file:py-1 file:text-sm"
-      />
+
+      <div
+        className={cn(
+          'flex flex-col gap-2 rounded-md border-2 border-dashed p-3 transition-colors',
+          dragging ? 'border-ring bg-muted/50' : 'border-input',
+        )}
+        onDragOver={(event) => {
+          event.preventDefault()
+          setDragging(true)
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(event) => {
+          event.preventDefault()
+          setDragging(false)
+          addFiles(event.dataTransfer.files)
+        }}
+      >
+        <input
+          ref={input}
+          id={ATTACHMENT_FIELD}
+          type="file"
+          name={ATTACHMENT_FIELD}
+          multiple
+          aria-describedby={`${ATTACHMENT_FIELD}-limits`}
+          accept={ACCEPTED_EXTENSIONS.map((extension) => `.${extension}`).join(',')}
+          onChange={sync}
+          className="rounded-md border border-input bg-card px-3 py-1.5 text-sm file:mr-3 file:rounded file:border-0 file:bg-muted file:px-3 file:py-1 file:text-sm"
+        />
+
+        {chosen.length > 0 && (
+          <ul className="flex flex-col gap-1">
+            {chosen.map((entry) => (
+              <li
+                key={entry.id}
+                className="flex items-center justify-between gap-2 rounded bg-card px-2 py-1 text-xs"
+              >
+                <span className="min-w-0 truncate">
+                  {entry.file.name} · {formatBytes(entry.file.size)}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => removeChosen(entry.id)}
+                  aria-label={formatFromCopy(copy, 'composer.attachments.removeChosen', {
+                    name: entry.file.name,
+                  })}
+                  className="shrink-0 text-muted-foreground hover:text-destructive"
+                >
+                  {fromCopy(copy, 'composer.attachments.remove')}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
       <p id={`${ATTACHMENT_FIELD}-limits`} className="text-xs text-muted-foreground">
         {formatFromCopy(copy, 'composer.attachments.hint', {
           count: perPost,

package/src/components/content/combobox-keys.ts

@@ -0,0 +1,38 @@
+export interface ComboboxKeyEvent {
+  readonly key: string
+  readonly metaKey: boolean
+  readonly ctrlKey: boolean
+}
+
+export interface ComboboxState {
+  readonly count: number
+  readonly active: number
+}
+
+export type ComboboxKeyAction =
+  | { readonly type: 'move'; readonly active: number }
+  | { readonly type: 'choose'; readonly index: number }
+  | { readonly type: 'dismiss' }
+  | null
+
+export function comboboxKeyAction(
+  event: ComboboxKeyEvent,
+  state: ComboboxState,
+): ComboboxKeyAction {
+  const { count, active } = state
+  if (count <= 0) return null
+
+  switch (event.key) {
+    case 'ArrowDown':
+      return { type: 'move', active: (active + 1) % count }
+    case 'ArrowUp':
+      return { type: 'move', active: (active - 1 + count) % count }
+    case 'Escape':
+      return { type: 'dismiss' }
+    case 'Enter':
+    case 'Tab':
+      return event.metaKey || event.ctrlKey ? null : { type: 'choose', index: active }
+    default:
+      return null
+  }
+}

package/src/components/content/edit-post-form.tsx

@@ -3,18 +3,86 @@
 import type { ReactNode } from 'react'
 import { useActionState } from 'react'
 
+import type { UploadLimits } from '@meith/attachments/limits'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { deletePostAction, editPostAction, restorePostAction } from '@/server/content-actions'
+import type { EditableAttachment } from '@/view/attachments'
 
 import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
-import { type Copy, fromCopy } from '../shell/copy'
+import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
+import { AttachmentField } from './attachment-field'
 import { MarkdownEditor } from './markdown-editor'
 
+function ExistingAttachments({
+  attachments,
+  copy,
+}: {
+  attachments: readonly EditableAttachment[]
+  copy: Copy
+}) {
+  if (attachments.length === 0) return null
+
+  return (
+    <fieldset className="flex flex-col gap-2 text-sm">
+      <legend className="font-medium">{fromCopy(copy, 'composer.edit.attachments')}</legend>
+      <ul className="flex flex-col gap-2">
+        {attachments.map((attachment) => (
+          <li
+            key={attachment.id}
+            className="flex items-center gap-3 rounded-md border border-border bg-card p-2"
+          >
+            {attachment.thumbnailHref !== null ? (
+              <img
+                src={attachment.thumbnailHref}
+                alt=""
+                className="size-10 shrink-0 rounded object-cover"
+              />
+            ) : (
+              <span
+                aria-hidden="true"
+                className="flex size-10 shrink-0 items-center justify-center rounded bg-muted text-sm text-muted-foreground"
+              >
+                {attachment.status === 'failed' ? '!' : attachment.status === 'pending' ? '…' : '·'}
+              </span>
+            )}
+
+            <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span className="truncate font-medium">{attachment.filename}</span>
+              <span className="text-xs text-muted-foreground">
+                {attachment.status === 'pending' &&
+                  fromCopy(copy, 'composer.edit.attachmentProcessing')}
+                {attachment.status === 'failed' && fromCopy(copy, 'composer.edit.attachmentFailed')}
+                {attachment.status === 'ready' && attachment.size}
+              </span>
+            </span>
+
+            <label className="flex shrink-0 items-center gap-1.5 text-xs">
+              <input
+                type="checkbox"
+                name="removeAttachmentIds"
+                value={attachment.id}
+                aria-label={formatFromCopy(copy, 'composer.edit.removeAttachment', {
+                  name: attachment.filename,
+                })}
+                className="size-4"
+              />
+              <span aria-hidden="true">{fromCopy(copy, 'composer.edit.remove')}</span>
+            </label>
+          </li>
+        ))}
+      </ul>
+    </fieldset>
+  )
+}
+
 export function EditPostForm({
   threadId,
   postId,
   message,
   reason,
+  attachments,
+  attachmentLimits,
   toolbar,
   copy,
 }: {
@@ -22,6 +90,8 @@ export function EditPostForm({
   postId: number
   message: string
   reason: string | null
+  attachments: readonly EditableAttachment[]
+  attachmentLimits: UploadLimits | null
   toolbar?: ReactNode
   copy: Copy
 }) {
@@ -51,6 +121,10 @@ export function EditPostForm({
         />
       </label>
 
+      <ExistingAttachments attachments={attachments} copy={copy} />
+
+      {attachmentLimits !== null && <AttachmentField limits={attachmentLimits} />}
+
       <div className="flex flex-wrap gap-3">
         <SubmitButton>{fromCopy(copy, 'composer.edit.submit')}</SubmitButton>
         <PendingButton

package/src/components/content/markdown-editor.tsx

@@ -13,15 +13,13 @@ import {
   uploadInlineAttachmentAction,
 } from '@/server/attachment-upload-actions'
 import { type PreviewScope, renderPreviewAction } from '@/server/content-actions'
-import { searchMentionCandidatesAction } from '@/server/mention-actions'
 
 import { type Copy, formatFromCopy, fromCopy, useCopy } from '../shell/copy'
 import { attachmentFieldId, MESSAGE_TEXTAREA_ID } from './composer-ids'
 import { listContinuation, pasteAsLink } from './markdown-syntax'
+import { useMentionCombobox } from './mention-combobox'
 import { activeMentionToken, type MentionToken } from './mention-token'
 
-const MENTION_DEBOUNCE_MS = 150
-
 interface Tool {
   readonly tag: EditorTag
   readonly labelKey: string
@@ -52,6 +50,12 @@ const TOOLS: readonly Tool[] = [
     placeholderKey: 'composer.placeholder.struck',
   },
   { tag: 'link', labelKey: 'composer.tool.link', glyph: 'Link', shortcut: 'k' },
+  {
+    tag: 'image',
+    labelKey: 'composer.tool.image',
+    glyph: 'Image',
+    placeholderKey: 'composer.placeholder.image',
+  },
   { tag: 'quote', labelKey: 'composer.tool.quote', glyph: '“”' },
   { tag: 'code', labelKey: 'composer.tool.code', glyph: '</>' },
   {
@@ -62,7 +66,14 @@ const TOOLS: readonly Tool[] = [
   },
   { tag: 'bulletedList', labelKey: 'composer.tool.bulletedList', glyph: '•' },
   { tag: 'numberedList', labelKey: 'composer.tool.numberedList', glyph: '1.' },
+  { tag: 'taskList', labelKey: 'composer.tool.taskList', glyph: '☑' },
   { tag: 'heading', labelKey: 'composer.tool.heading', glyph: 'H' },
+  {
+    tag: 'table',
+    labelKey: 'composer.tool.table',
+    glyph: 'Table',
+    placeholderKey: 'composer.placeholder.table',
+  },
 ]
 
 function runTool(field: HTMLTextAreaElement, tool: Tool, copy: Copy): void {
@@ -122,10 +133,14 @@ export function MarkdownEditor({
 
   const mentions = scope === 'post'
   const [mentionToken, setMentionToken] = useState<MentionToken | null>(null)
-  const [mentionMatches, setMentionMatches] = useState<readonly MemberSuggestion[]>([])
-  const [mentionActive, setMentionActive] = useState(0)
-  const latestMentionToken = useRef(mentionToken)
-  latestMentionToken.current = mentionToken
+
+  const combobox = useMentionCombobox({
+    query: mentionToken?.query ?? null,
+    onChoose: (candidate) => {
+      if (field.current !== null) applyMention(field.current, candidate)
+    },
+    onDismiss: () => setMentionToken(null),
+  })
 
   const fit = useCallback(() => {
     const element = field.current
@@ -159,23 +174,6 @@ export function MarkdownEditor({
     }
   }
 
-  useEffect(() => {
-    if (mentionToken === null) {
-      setMentionMatches([])
-      return
-    }
-
-    const handle = setTimeout(() => {
-      void searchMentionCandidatesAction(mentionToken.query).then((matches) => {
-        if (latestMentionToken.current !== mentionToken) return
-        setMentionMatches(matches)
-        setMentionActive(0)
-      })
-    }, MENTION_DEBOUNCE_MS)
-
-    return () => clearTimeout(handle)
-  }, [mentionToken])
-
   function syncMentionToken(element: HTMLTextAreaElement): void {
     if (!mentions) return
     const found =
@@ -243,28 +241,7 @@ export function MarkdownEditor({
   function onKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>): void {
     const element = event.currentTarget
 
-    if (mentionToken !== null && mentionMatches.length > 0) {
-      if (event.key === 'ArrowDown') {
-        event.preventDefault()
-        setMentionActive((index) => (index + 1) % mentionMatches.length)
-        return
-      }
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-        setMentionActive((index) => (index - 1 + mentionMatches.length) % mentionMatches.length)
-        return
-      }
-      if (event.key === 'Escape') {
-        event.preventDefault()
-        setMentionToken(null)
-        return
-      }
-      if ((event.key === 'Enter' || event.key === 'Tab') && !event.metaKey && !event.ctrlKey) {
-        event.preventDefault()
-        applyMention(element, mentionMatches[mentionActive]!)
-        return
-      }
-    }
+    if (combobox.handleKeyDown(event)) return
 
     if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
       element.form?.requestSubmit()
@@ -449,52 +426,15 @@ export function MarkdownEditor({
             }}
             onSelect={(event) => syncMentionToken(event.currentTarget)}
             onBlur={() => setMentionToken(null)}
-            {...(enhanced && mentionToken !== null && mentionMatches.length > 0
-              ? {
-                  role: 'combobox',
-                  'aria-expanded': true,
-                  'aria-controls': `${panelId}-mentions`,
-                  'aria-activedescendant': `${panelId}-mention-${mentionActive}`,
-                  'aria-autocomplete': 'list' as const,
-                }
-              : {})}
+            {...(enhanced ? combobox.anchorProps : {})}
             className={cn(
               'w-full rounded-md border border-input bg-card px-3 py-2 font-normal text-sm leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
               onWriteTab && 'rounded-t-none border-t-0',
             )}
           />
 
-          {enhanced && mentionToken !== null && mentionMatches.length > 0 && (
-            <div
-              id={`${panelId}-mentions`}
-              role="listbox"
-              aria-label={fromCopy(copy, 'composer.mention.suggestions')}
-              className="absolute inset-x-0 top-full z-10 mt-1 max-h-48 overflow-y-auto rounded-md border border-border bg-card py-1 text-sm shadow-lg"
-            >
-              {mentionMatches.map((candidate, index) => (
-                <button
-                  key={candidate.id}
-                  type="button"
-                  id={`${panelId}-mention-${index}`}
-                  role="option"
-                  aria-selected={index === mentionActive}
-                  onMouseDown={(event) => event.preventDefault()}
-                  onClick={() => {
-                    if (field.current !== null) applyMention(field.current, candidate)
-                  }}
-                  onMouseEnter={() => setMentionActive(index)}
-                  className={cn(
-                    'block w-full px-3 py-1.5 text-start',
-                    index === mentionActive
-                      ? 'bg-muted text-foreground'
-                      : 'text-foreground hover:bg-muted',
-                  )}
-                >
-                  @{candidate.username}
-                </button>
-              ))}
-            </div>
-          )}
+          {enhanced && combobox.listbox}
+          {enhanced && combobox.liveRegion}
         </div>
       </div>
 
@@ -577,8 +517,11 @@ function FormattingHelp({ scope }: { scope: PreviewScope }) {
     ['```', 'composer.help.codeBlock'],
     ['> quoted', 'composer.help.quote'],
     ['- item', 'composer.help.list'],
+    ['- [ ] task', 'composer.help.taskList'],
     ['## Heading', 'composer.help.heading'],
+    ['| a | b |', 'composer.help.table'],
     [':::spoiler', 'composer.help.spoiler'],
+    ['![alt](url)', 'composer.help.image'],
     ['@name', 'composer.help.mention'],
     ['[attachment=id]', 'composer.help.attachment'],
   ]