import {html} from 'htm/preact';
import {Link, Setting, SettingProps, TRXComponent} from '../..';

export function MarkdownToolbarSetting(props: SettingProps): TRXComponent {
  return html`<${Setting} ...${props}>
    <p class="info">
      Adds a toolbar with a selection of Markdown snippets that when used will
      insert the according Markdown where your cursor is. Particularly useful
      for the${' '}
      <${Link}
        url="https://docs.tildes.net/instructions/text-formatting#expandable-sections"
        text="expandable section"
      />
      /spoilerbox syntax. If you have text selected, the Markdown will be
      inserted around your text.

      <br />

      A full list of the snippets is available${' '}
      <${Link}
        url="https://gitlab.com/tildes-community/tildes-reextended/-/issues/12"
        text="on GitLab"
      />
      .
    </p>
  <//>`;
}