{# Shared TipTap-on-textarea editor. Included by post/edit.html and page/page_edit.html. The host template owns the surrounding

, the , and the

; this partial layers toolbar / image picker
   / mount / styles / wiring on top so non-JS clients keep getting
   a working plain textarea fallback.

Lives in `bragi/templates/admin/` (not `contrib/`) because both
   post and page consume it and the contrib boundary forbids
   sibling-plugin includes. #}
<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">• List</button>
  <button type="button" data-action="ordered-list" title="Ordered list">1. List</button>
  <button type="button" data-action="blockquote" title="Blockquote">“ ”</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>
  <button type="button" data-action="internal-link" title="Internal link to a post or page">Internal link</button>
  <button type="button" data-action="unlink" title="Remove link">Unlink</button>
  <span class="sep">|</span>
  <button type="button" data-action="image" title="Insert image">📷 Image</button>
</div>

<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;">
      ×
    </button>
  </div>
  <div id="image-picker-target">
    <p style="padding: 1rem; color: #888;">Loading...</p>
  </div>
</dialog>
<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;">
      ×
    </button>
  </div>
  <div id="internal-link-picker-target">
    <p style="padding: 1rem; color: #888;">Loading...</p>
  </div>
</dialog>
<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. #}
<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>

// Image: extend with a `class` HTML attribute so size + align
  // classes (`size-medium align-center`, etc.) round-trip through
  // markdown via the attrs_plugin syntax. Without `addAttributes`
  // overriding the parent Image's schema, TipTap drops unknown
  // HTML attributes on the node and the class vanishes on first
  // serialize.
  //
  // Per-size rendition URLs (renditionSmall/Medium/Full) are also
  // tracked on the node so the in-editor `<img src>` matches the
  // active size class. Without these, the editor renders the
  // multi-MB original even when the operator picks `size-small`,
  // and the editor becomes unusable on photos. The renditions are
  // NOT serialized to markdown — the stored `src` stays the
  // original-sha admin URL (which the load transform converts to /
  // from the public-prefix path the body persists as), so
  // pictureify on delivery still wraps the original in a
  // <picture>.
  const SIZE_TO_RENDITION_ATTR = {
    'size-small': 'renditionSmall',
    'size-medium': 'renditionMedium',
    'size-full': 'renditionFull',
  };

// Server-injected rendition lookup so reloading a post keeps the
  // in-editor `<img src>` pointing at the right-sized WebP instead
  // of falling back to the multi-MB original. Only the `class` is
  // stored in the markdown body — rendition URLs are editor-only
  // and would otherwise vanish on round-trip. The map is keyed by
  // sha (extracted from the image src); see attachments plugin's
  // `editor_image_renditions` Jinja global.
  let renditionMap = {};
  try {
    const renditionScript = document.getElementById('image-renditions');
    if (renditionScript && renditionScript.textContent.trim()) {
      renditionMap = JSON.parse(renditionScript.textContent);
    }
  } catch (e) {
    console.warn('[bragi-editor] failed to parse rendition map', e);
  }

// src may be either the public path (`/attachments/<sha>`) or
  // the admin-rewritten path (`/admin/sites/<slug>/attachments/file/<sha>`).
  // Optional `file/` segment handles both.
  const SHA_FROM_SRC_RE = /\/attachments\/(?:file\/)?([a-f0-9]{64})/;
  const renditionUrlForSrc = (src, size) => {
    const match = (src || '').match(SHA_FROM_SRC_RE);
    if (!match) return null;
    const tiers = renditionMap[match[1]];
    if (!tiers) return null;
    const key = tiers[size];
    return key ? ADMIN_ATTACHMENT_PREFIX + key : null;
  };
  const ClassedImage = Image.extend({
    // tiptap-markdown reads `storage.markdown.serialize` off each
    // node's extension and uses it when emitting markdown. Without
    // this, the default Image serializer emits `![alt](src)` with
    // no class, so save → reload drops the class on every cycle.
    // The parse half (markdown → editor) is handled by the
    // Python-side attrs_plugin which converts `{.class}` into a
    // `class="..."` attribute on the <img>; ClassedImage's
    // `parseHTML` for the class attribute then captures it.
    addStorage() {
      return {
        markdown: {
          serialize(state, node) {
            const alt = state.esc(node.attrs.alt || '');
            const src = state.esc(node.attrs.src || '');
            // markdown-it-attrs (and Python's mdit-py-plugins
            // attrs_plugin) only recognises `{.class}` when it
            // directly follows the closing `)` with no whitespace.
            // A single space turns the whole curly block into
            // literal text and silently drops the class on both
            // reload and delivery render.
            const cls = node.attrs.class
              ? `{.${node.attrs.class.split(' ').filter(Boolean).join(' .')}}`
              : '';
            state.write(`![${alt}](${src})${cls}`);
          },
          parse: {
            // setup(md) is invoked by tiptap-markdown's parser with
            // its internal markdown-it instance at parse time. We
            // register the attrs plugin so `{.class}` on a reloaded
            // body round-trips back into the <img>'s class
            // attribute, which ClassedImage.addAttributes.class
            // then captures.
            setup(md) {
              md.use(markdownItAttrs);
            },
          },
        },
      };
    },
    addAttributes() {
      return {
        ...this.parent?.(),
        class: {
          default: null,
          parseHTML: (el) => el.getAttribute('class'),
          renderHTML: (attrs) => {
            if (!attrs.class) return {};
            return { class: attrs.class };
          },
        },
        // Rendition URLs by size class. Editor-only — read by
        // renderHTML below to pick the visible `<img src>`; never
        // serialized to markdown. `renderHTML: () => ({})` is the
        // TipTap idiom for "don't put this in the rendered HTML
        // attributes". parseHTML looks the URL up in the server-
        // injected rendition map (keyed by sha extracted from the
        // image src), so reloading a post hydrates the same
        // rendition URLs the picker set at insert time.
        renditionSmall: {
          default: null,
          parseHTML: (el) => renditionUrlForSrc(el.getAttribute('src'), 'small'),
          renderHTML: () => ({}),
        },
        renditionMedium: {
          default: null,
          parseHTML: (el) => renditionUrlForSrc(el.getAttribute('src'), 'medium'),
          renderHTML: () => ({}),
        },
        renditionFull: {
          default: null,
          parseHTML: (el) => renditionUrlForSrc(el.getAttribute('src'), 'full'),
          renderHTML: () => ({}),
        },
      };
    },
    renderHTML({ node, HTMLAttributes }) {
      // Pick the per-size rendition URL based on the node's
      // active size class. Falls back to the node's `src` (the
      // original) when no matching rendition is set.
      const classes = (node.attrs.class || '').split(/\s+/);
      for (const cls of classes) {
        const attrName = SIZE_TO_RENDITION_ATTR[cls];
        if (attrName && node.attrs[attrName]) {
          return ['img', { ...HTMLAttributes, src: node.attrs[attrName] }];
        }
      }
      return ['img', HTMLAttributes];
    },
  });

// Site-scoped admin URL for attachment bytes. The stored
  // markdown uses public `/attachments/<key>` URLs so it round-
  // trips cleanly to delivery; in the editor we rewrite to the
  // admin-scoped URL on load (so in-editor previews resolve) and
  // back to the public URL on save. The delivery `/attachments/`
  // route resolves the site from the Host header, which doesn't
  // match on the admin host, so the editor can't fetch them
  // unrewritten.
  const ADMIN_ATTACHMENT_PREFIX = {{ url_for(
      "attachment_admin.serve_attachment_bytes",
      site_slug=request.view_args["site_slug"],
      storage_key="__STORAGE_KEY__",
  ) | tojson }}.replace("__STORAGE_KEY__", "");
  const PUBLIC_ATTACHMENT_MARKER = "](/attachments/";
  const ADMIN_ATTACHMENT_MARKER = "](" + ADMIN_ATTACHMENT_PREFIX;

function publicToAdmin(md) {
    return md.split(PUBLIC_ATTACHMENT_MARKER).join(ADMIN_ATTACHMENT_MARKER);
  }
  function adminToPublic(md) {
    return md.split(ADMIN_ATTACHMENT_MARKER).join(PUBLIC_ATTACHMENT_MARKER);
  }

document.body.classList.add('has-tiptap-editor');
    mount.hidden = false;
    toolbar.hidden = false;
    // Image bubble menu: we manage visibility + positioning
    // ourselves rather than via @tiptap/extension-bubble-menu
    // (Tippy.js). Tippy was clobbering the element in our setup
    // (the DOM was empty after init), so we keep the menu in its
    // template position, hide it by default, and `position:
    // absolute` it above the focused image on selectionUpdate.
    const imageBubbleMenu = document.getElementById('tiptap-image-bubble-menu');
    if (imageBubbleMenu) {
      // Reparent to <body> so the menu is free of any positioned
      // ancestor in the host form scaffolding. Without this the
      // `position: absolute` math is off by the offsetParent's
      // document-relative offset, which is what the "menu lands
      // at the top-left of the editor" bug was.
      document.body.appendChild(imageBubbleMenu);
      imageBubbleMenu.style.position = 'absolute';
      imageBubbleMenu.style.zIndex = '50';
      imageBubbleMenu.hidden = true;
    }

// Prefixes that map to bragi internal-link content types. v1
    // ships post + page in-tree; this list is the JS-side mirror of
    // the registered `ContentTypeSpec.internal_link_prefix` values.
    // A third-party content type that adopts the picker will need
    // one entry added here (small enough to be acceptable v1 cost;
    // an endpoint emitting the live list is a possible follow-up).
    const INTERNAL_LINK_PREFIXES = ['post', 'page'];

function currentInternalLinkMarker(editor) {
      if (!editor.isActive('link')) return null;
      const href = editor.getAttributes('link').href || '';
      const colon = href.indexOf(':');
      if (colon < 1) return null;
      const prefix = href.slice(0, colon);
      if (INTERNAL_LINK_PREFIXES.indexOf(prefix) === -1) return null;
      return href;
    }

toolbar.addEventListener('click', (e) => {
      const btn = e.target.closest('button[data-action]');
      if (!btn) return;
      e.preventDefault();
      const chain = editor.chain().focus();
      switch (btn.dataset.action) {
        case 'bold': chain.toggleBold().run(); break;
        case 'italic': chain.toggleItalic().run(); break;
        case 'code': chain.toggleCode().run(); break;
        case 'h1': chain.toggleHeading({ level: 1 }).run(); break;
        case 'h2': chain.toggleHeading({ level: 2 }).run(); break;
        case 'h3': chain.toggleHeading({ level: 3 }).run(); break;
        case 'bullet-list': chain.toggleBulletList().run(); break;
        case 'ordered-list': chain.toggleOrderedList().run(); break;
        case 'blockquote': chain.toggleBlockquote().run(); break;
        case 'code-block': chain.toggleCodeBlock().run(); break;
        case 'link': {
          const previous = editor.getAttributes('link').href || '';
          const url = window.prompt('Link URL', previous);
          if (url === null) break;
          if (url === '') { chain.unsetLink().run(); break; }
          chain.extendMarkRange('link').setLink({ href: url }).run();
          break;
        }
        case 'unlink': chain.unsetLink().run(); break;
        case 'image': openImagePicker(); break;
        case 'internal-link': openInternalLinkPicker(currentInternalLinkMarker(editor)); break;
      }
    });

// Image picker: open the `<dialog>`, lazy-load the grid via
    // htmx so the page weight stays light when the operator isn't
    // embedding images. Selecting a card inserts a markdown image
    // link at the cursor and closes the dialog.
    const pickerDialog = document.getElementById('image-picker-dialog');
    const pickerTarget = document.getElementById('image-picker-target');
    const pickerUrl = '{{ url_for("attachment_admin.picker") }}';

if (pickerDialog) {
      pickerDialog.addEventListener('click', (e) => {
        if (e.target.closest('[data-action="close-picker"]')) {
          pickerDialog.close();
          return;
        }
        const card = e.target.closest('.picker-card');
        if (!card) return;
        e.preventDefault();
        const key = card.dataset.storageKey || '';
        const filename = card.dataset.filename || '';
        const alt = card.dataset.altText || filename || 'image';
        if (!key) return;
        // setImage inserts a proper Image node into the document so
        // tiptap-markdown serializes it as `![alt](src)`. The
        // previous `insertContent('![alt](url)')` shape inserted the
        // markdown as plain text, which then got its special chars
        // escaped on save (#270). The src uses the admin-scoped URL
        // so the in-editor preview resolves; adminToPublic rewrites
        // it back to the public form on save.
        //
        // The per-size rendition URLs land on the node as
        // editor-only attrs; ClassedImage's renderHTML picks the
        // one matching the active size class so the visible
        // `<img src>` is the right-sized bytes (otherwise size-small
        // CSS-scales a 1.8MB JPEG and the editor lays out badly).
        // Each rendition key is a path-style storage_key
        // (`<sha>/<width>/webp`); empty string means no done WebP
        // at that tier yet, which falls back to the original src
        // via renderHTML.
        const buildRenditionUrl = (k) => k ? ADMIN_ATTACHMENT_PREFIX + k : null;
        editor
          .chain()
          .focus()
          .setImage({
            src: ADMIN_ATTACHMENT_PREFIX + key,
            alt: alt,
            // Default class: medium width, centered. The BubbleMenu
            // on the inserted Image node lets the operator swap to
            // small/full or left/right after insertion.
            class: 'size-medium align-center',
            renditionSmall: buildRenditionUrl(card.dataset.renditionSmall || ''),
            renditionMedium: buildRenditionUrl(card.dataset.renditionMedium || ''),
            renditionFull: buildRenditionUrl(card.dataset.renditionFull || ''),
          })
          .run();
        pickerDialog.close();
      });
      // Click on the backdrop closes; <dialog> doesn't do this by default.
      pickerDialog.addEventListener('click', (e) => {
        if (e.target === pickerDialog) pickerDialog.close();
      });
    }

// Internal-link picker: same htmx-into-<dialog> pattern as the
    // image picker. Selecting a card either replaces the current
    // link mark's href (cursor in an existing internal link),
    // wraps the current selection with a fresh link mark, or
    // inserts the target's title with the mark applied (no
    // selection). Persisted form for all three cases is the
    // typed-prefix marker `post:<id>` / `page:<id>`, which the
    // tiptap-markdown serializer round-trips to
    // `[text](post:<id>)`.
    const internalDialog = document.getElementById('internal-link-picker-dialog');
    const internalTarget = document.getElementById('internal-link-picker-target');
    const internalPickerUrl = '{{ url_for("internal_links_admin.picker") }}';

if (internalDialog) {
      internalDialog.addEventListener('click', (e) => {
        if (e.target.closest('[data-action="close-internal-picker"]')) {
          internalDialog.close();
          return;
        }
        const card = e.target.closest('.picker-card');
        if (!card) return;
        e.preventDefault();
        const marker = card.dataset.internalLinkMarker || '';
        const title = card.dataset.displayTitle || '';
        if (!marker) return;
        insertInternalLink(marker, title);
        internalDialog.close();
      });
      // Backdrop click closes the dialog. Same shape as the image picker.
      internalDialog.addEventListener('click', (e) => {
        if (e.target === internalDialog) internalDialog.close();
      });
    }

// Image bubble menu — hand-rolled.
    //
    // We tried `@tiptap/extension-bubble-menu` (Tippy.js) first;
    // Tippy yanked the menu element out of the DOM in this setup
    // and never put it back. Rolling our own keeps the element
    // where the template puts it, in our control: hide by default,
    // `position: absolute` it above the focused image on
    // selectionUpdate, listen for clicks directly on the menu.
    if (imageBubbleMenu) {
      const SIZE_CLASSES = new Set(['size-small', 'size-medium', 'size-full']);
      const ALIGN_CLASSES = new Set(['align-left', 'align-center', 'align-right']);
      // Prevent the button from stealing focus on mousedown.
      // Without this, clicking a bubble-menu button blurs the
      // image node selection; `updateAttributes('image', ...)`
      // then operates on the caret's surrounding text node and
      // the image's class doesn't change.
      imageBubbleMenu.addEventListener('mousedown', (e) => {
        if (e.target.closest('button[data-size], button[data-align]')) {
          e.preventDefault();
        }
      });
      imageBubbleMenu.addEventListener('click', (e) => {
        const btn = e.target.closest('button[data-size], button[data-align]');
        if (!btn) return;
        e.preventDefault();
        const current = (editor.getAttributes('image').class || '')
          .split(/\s+/).filter(Boolean);
        const isSize = btn.dataset.size != null;
        const incoming = isSize ? btn.dataset.size : btn.dataset.align;
        const group = isSize ? SIZE_CLASSES : ALIGN_CLASSES;
        const next = current.filter((c) => !group.has(c));
        next.push(incoming);
        editor.chain().focus().updateAttributes('image', {
          class: next.join(' '),
        }).run();
      });
      // Position + active-state for the bubble menu. Fires on:
      //   - selectionUpdate (the user moved the caret onto/off an image)
      //   - update          (the active image's attrs or layout changed
      //                      — e.g. clicking S re-renders the <img> at
      //                      a smaller width, so the menu must
      //                      reposition AND the active-state buttons
      //                      must reflect the new class)
      // updateAttributes('image', ...) fires `update` but NOT
      // `selectionUpdate` (selection didn't move, just attrs
      // changed); without the update binding, the "M is still
      // highlighted after clicking S" bug returns.
      const refreshBubbleMenu = () => {
        if (!editor.isActive('image')) {
          imageBubbleMenu.hidden = true;
          return;
        }
        const selectedImg = mount.querySelector('img.ProseMirror-selectednode')
          || mount.querySelector('img');
        if (!selectedImg) {
          imageBubbleMenu.hidden = true;
          return;
        }
        // Show before measuring: a `hidden`/`display: none` element
        // returns zeros from getBoundingClientRect, so on the first
        // show the menuRect was 0×0 and the centering math was off
        // by half the (true) menu width.
        imageBubbleMenu.style.visibility = 'hidden';
        imageBubbleMenu.hidden = false;
        const rect = selectedImg.getBoundingClientRect();
        const menuRect = imageBubbleMenu.getBoundingClientRect();
        // Menu is reparented to <body> at init, so `position:
        // absolute` resolves against the initial containing block.
        // Document coords = viewport coords + scrollX/Y.
        const top = rect.top + window.scrollY - menuRect.height - 8;
        const left = rect.left + window.scrollX + (rect.width - menuRect.width) / 2;
        imageBubbleMenu.style.top = `${Math.max(8, top)}px`;
        imageBubbleMenu.style.left = `${Math.max(8, left)}px`;
        imageBubbleMenu.style.visibility = '';
        // Active-state buttons mirror the node's current class.
        const active = (editor.getAttributes('image').class || '').split(/\s+/);
        imageBubbleMenu.querySelectorAll('button').forEach((b) => {
          const slug = b.dataset.size || b.dataset.align;
          b.classList.toggle('is-active', active.includes(slug));
        });
        // Re-fire once the new src finishes loading. Clicking a
        // size button swaps the `<img src>` to a different
        // rendition URL (per ClassedImage.renderHTML); for the
        // brief window between src-changed and bytes-loaded the
        // <img> has placeholder dimensions, so the rect we
        // measured above can be wildly off (centering math
        // collapses to the Math.max(8, ...) clamp). When load
        // fires, re-measure with the real dimensions. `{once:
        // true}` so we don't stack listeners across clicks.
        if (!selectedImg.complete) {
          selectedImg.addEventListener('load', refreshBubbleMenu, { once: true });
        }
      };
      editor.on('selectionUpdate', refreshBubbleMenu);
      editor.on('update', refreshBubbleMenu);
    }

// Belt-and-braces: even if onUpdate hasn't fired yet (rare race
    // when submitting immediately after typing), serialize one more
    // time on form submit so the textarea is fresh.
    const form = textarea.closest('form');
    if (form) {
      form.addEventListener('submit', () => {
        textarea.value = adminToPublic(editor.storage.markdown.getMarkdown());
      });
    }
  }
</script>