dorfteich/apps/web/src/editor/SectionStyleMenu.tsx

import type { Editor } from '@tiptap/core';
import { useEditorState } from '@tiptap/react';
import { useTranslation } from 'react-i18next';

import type { SectionStyleOption } from '../plugins/use-pond-plugins';

/** The option's label in the UI language, falling back through English to the
 * raw id (a manifest always carries de and en, so the id is a last resort). */
function optionLabel(option: SectionStyleOption, language: string): string {
  const base = language.split('-')[0] ?? language;
  return option.title[base] ?? option.title.en ?? option.styleId;
}

/**
 * Toolbar control for styled sections (issue #75): a picker over the section
 * styles the pond's active `section_style` plugins declare. Selecting a style
 * wraps the selection (or restyles the surrounding section); the dedicated
 * button unwraps. Hidden entirely when no style plugin is active — the
 * feature only exists where an admin turned a plugin on.
 */
export function SectionStyleMenu({
  editor,
  options,
}: {
  editor: Editor;
  options: SectionStyleOption[];
}): React.JSX.Element | null {
  const { t, i18n } = useTranslation('editor');
  const active = useEditorState({
    editor,
    selector: ({ editor: e }) => {
      if (!e.isActive('section')) return null;
      const attrs = e.getAttributes('section');
      return { pluginId: String(attrs.pluginId ?? ''), styleId: String(attrs.styleId ?? '') };
    },
  });

  if (options.length === 0) return null;

  const activeKey = active ? `${active.pluginId}/${active.styleId}` : '';

  function applyStyle(key: string): void {
    const [pluginId, styleId] = key.split('/');
    if (!pluginId || !styleId) return;
    const chain = editor.chain().focus();
    if (active) {
      chain.updateAttributes('section', { pluginId, styleId }).run();
    } else {
      chain.wrapInSection({ pluginId, styleId }).run();
    }
  }

  return (
    <div className="editor-toolbar__group editor-toolbar__section-menu">
      <label className="editor-toolbar__section-label">
        <span className="visually-hidden">{t('toolbar.section.label')}</span>
        <select
          className="editor-toolbar__section-select"
          title={t('toolbar.section.label')}
          value={activeKey}
          // Keep the editor selection: without this the select steals focus
          // and the wrap applies to a collapsed selection at the wrong spot.
          onMouseDown={(event) => event.stopPropagation()}
          onChange={(event) => applyStyle(event.target.value)}
        >
          <option value="" disabled>
            {t('toolbar.section.none')}
          </option>
          {options.map((option) => {
            const key = `${option.pluginId}/${option.styleId}`;
            return (
              <option key={key} value={key}>
                {optionLabel(option, i18n.language)}
              </option>
            );
          })}
        </select>
      </label>
      <button
        type="button"
        className="toolbar-button"
        title={t('toolbar.section.remove')}
        aria-label={t('toolbar.section.remove')}
        disabled={!active}
        onMouseDown={(event) => event.preventDefault()}
        onClick={() => editor.chain().focus().unwrapSection().run()}
      >
        ⬚
      </button>
    </div>
  );
}