{# Shared TipTap-on-textarea editor. Included by post/edit.html,
   page/page_edit.html, and the account-profile bio field. The host
   template owns the surrounding <fieldset>, the <label>, and the
   <textarea>; this partial layers toolbar / image picker / mount /
   styles / wiring on top so non-JS clients keep getting a working
   plain textarea fallback.

   Include-time params (all optional; defaults preserve the post/page
   behaviour byte-for-byte):
   - editor_textarea_id: id of the caller's <textarea> the editor
     binds to (default "body_markdown").
   - editor_enable_media: render the image-library picker + renditions
     (default true). Turn OFF where there is no site context to scope
     the library to (e.g. the global account bio).
   - editor_enable_internal_links: render the post/page link picker
     (default true). Same site-scoping caveat.

   Lives in `bragi/templates/admin/` (not `contrib/`) because post,
   page, and account-profile all consume it and the contrib boundary
   forbids sibling-plugin includes. #}
{% set _ed_textarea_id = editor_textarea_id | default('body_markdown') %}
{% set _ed_media = editor_enable_media | default(true) %}
{% set _ed_internal = editor_enable_internal_links | default(true) %}
<div id="tiptap-editor-toolbar" class="editor-toolbar" role="toolbar" hidden>
  <button type="button" data-action="bold" title="Bold"><strong>B</strong></button>
  <button type="button" data-action="italic" title="Italic"><em>I</em></button>
  <button type="button" data-action="code" title="Inline code"><code>code</code></button>
  <span class="sep">|</span>
  <button type="button" data-action="h1" title="Heading 1">H1</button>
  <button type="button" data-action="h2" title="Heading 2">H2</button>
  <button type="button" data-action="h3" title="Heading 3">H3</button>
  <span class="sep">|</span>
  <button type="button" data-action="bullet-list" title="Bullet list">&bull; List</button>
  <button type="button" data-action="ordered-list" title="Ordered list">1. List</button>
  <button type="button" data-action="blockquote" title="Blockquote">&ldquo; &rdquo;</button>
  <button type="button" data-action="code-block" title="Code block">{ }</button>
  <span class="sep">|</span>
  <button type="button" data-action="link" title="External link">Link</button>
  {% if _ed_internal %}
  <button type="button" data-action="internal-link" title="Internal link to a post or page">Internal link</button>
  {% endif %}
  <button type="button" data-action="unlink" title="Remove link">Unlink</button>
  <span class="sep">|</span>
  {% if _ed_media %}
  <button type="button" data-action="image" title="Insert image">&#128247; Image</button>
  <span class="sep">|</span>
  {% endif %}
  <details class="toolbar-menu">
    <summary title="Table">Table &#9662;</summary>
    <div class="toolbar-menu__panel">
      <button type="button" data-action="table" title="Insert table">Insert table</button>
      <button type="button" data-action="table-row-before" title="Add row above">Row above</button>
      <button type="button" data-action="table-row-after" title="Add row below">Row below</button>
      <button type="button" data-action="table-col-before" title="Add column left">Column left</button>
      <button type="button" data-action="table-col-after" title="Add column right">Column right</button>
      <button type="button" data-action="table-row-delete" title="Delete row">Delete row</button>
      <button type="button" data-action="table-col-delete" title="Delete column">Delete column</button>
      <button type="button" data-action="table-header-toggle" title="Toggle header row">Toggle header</button>
      <button type="button" data-action="table-delete" title="Delete table">Delete table</button>
    </div>
  </details>
  <details class="toolbar-menu">
    <summary title="Callout">Callout &#9662;</summary>
    <div class="toolbar-menu__panel">
      <button type="button" data-action="callout-note" title="Insert note callout">Note</button>
      <button type="button" data-action="callout-tip" title="Insert tip callout">Tip</button>
      <button type="button" data-action="callout-info" title="Insert info callout">Info</button>
      <button type="button" data-action="callout-warning" title="Insert warning callout">Warning</button>
      <button type="button" data-action="callout-danger" title="Insert danger callout">Danger</button>
    </div>
  </details>
</div>

{% if _ed_media %}
<dialog id="image-picker-dialog"
        style="max-width: 800px; width: 90vw; padding: 0;
               border: 1px solid #bbb; border-radius: 4px;">
  <div style="display: flex; align-items: center; justify-content: space-between;
              padding: 0.5rem 0.75rem; border-bottom: 1px solid #eee;">
    <strong>Insert image</strong>
    <button type="button"
            data-action="close-picker"
            style="background: none; border: 0; font-size: 1.2em; cursor: pointer;">
      &times;
    </button>
  </div>
  <div id="image-picker-target">
    <p style="padding: 1rem; color: #888;">Loading...</p>
  </div>
</dialog>
{% endif %}
{% if _ed_internal %}
<dialog id="internal-link-picker-dialog"
        style="max-width: 640px; width: 90vw; padding: 0;
               border: 1px solid #bbb; border-radius: 4px;">
  <div style="display: flex; align-items: center; justify-content: space-between;
              padding: 0.5rem 0.75rem; border-bottom: 1px solid #eee;">
    <strong>Internal link</strong>
    <button type="button"
            data-action="close-internal-picker"
            style="background: none; border: 0; font-size: 1.2em; cursor: pointer;">
      &times;
    </button>
  </div>
  <div id="internal-link-picker-target">
    <p style="padding: 1rem; color: #888;">Loading...</p>
  </div>
</dialog>
{% endif %}
<div id="tiptap-editor" class="editor-mount" hidden></div>

{# Rendition lookup for the in-editor image preview. Registered by
   the attachments plugin as a Jinja global; emits a map of
   {sha: {small, medium, full}} for images referenced in the
   body so the editor JS can hydrate per-image rendition URLs on
   reload. The markdown body itself stays pristine — only the
   class survives the save→reload round-trip; renditions are
   computed server-side per request and re-applied to the editor
   nodes during initial parse via ClassedImage.parseHTML. #}
{% if _ed_media %}
<script id="image-renditions" type="application/json">
{%- if editor_image_renditions is defined -%}
{{ editor_image_renditions(
     form.get("body_markdown", ""),
     request.view_args.get("site_slug")
   ) | tojson }}
{%- else -%}
{}
{%- endif -%}
</script>

<div id="tiptap-image-bubble-menu" class="tiptap-bubble-menu" hidden>
  <div class="tiptap-bubble-menu__group" role="radiogroup" aria-label="Image size">
    <button type="button" data-size="size-small"  title="Small">S</button>
    <button type="button" data-size="size-medium" title="Medium">M</button>
    <button type="button" data-size="size-full"   title="Full width">full</button>
  </div>
  <span class="tiptap-bubble-menu__sep">|</span>
  <div class="tiptap-bubble-menu__group" role="radiogroup" aria-label="Image alignment">
    <button type="button" data-align="align-left"   title="Float left">&larr;</button>
    <button type="button" data-align="align-center" title="Center">&mdash;</button>
    <button type="button" data-align="align-right"  title="Float right">&rarr;</button>
  </div>
</div>
{% endif %}

{# Editor styles: served static (cacheable, CSP-friendly). A <link> in
   body is valid HTML5; the mount/toolbar stay `hidden` until the JS
   wires them, so there is no flash of unstyled editor. #}
<link rel="stylesheet" href="{{ url_for('admin_static.static', filename='tiptap-editor.css') }}">

{# Editor config as a non-executable JSON island (CSP-safe: an
   application/json script is not restricted by `script-src`). The static
   module reads it by id. Values are computed here exactly as the former
   inline module interpolated them. #}
{% if _ed_media %}
{% set _attach_prefix = url_for("attachment_admin.serve_attachment_bytes", site_slug=request.view_args["site_slug"], storage_key="__STORAGE_KEY__") | replace("__STORAGE_KEY__", "") %}
{% else %}
{% set _attach_prefix = "/admin/__no-attachments__/" %}
{% endif %}
<script type="application/json" id="tiptap-editor-config">
{{ {
  "textareaId": _ed_textarea_id,
  "pickerUrl": (url_for("attachment_admin.picker") if _ed_media else ""),
  "internalPickerUrl": (url_for("internal_links_admin.picker") if _ed_internal else ""),
  "attachmentPrefix": _attach_prefix
} | tojson }}
</script>
<script type="module" src="{{ url_for('admin_static.static', filename='tiptap-editor.js') }}"></script>