Guides: make images render, and stop drafts leaking to readers

Images were a broken icon for every user. The stored URL was bound straight
to <img src>, and a plain image request carries no Authorization header while
this app keeps its JWT in one, so every fetch was a 401. They are now fetched
through the API client, which also fixes the stored '/api/...' path under a
subpath mount where the API is not at /api at all. A failed image says so in
words rather than rendering as a broken icon, and the editor's own thumbnails
go through the same path - an author needs to see the screenshot they pasted.

Revision and image routes gated on their parent guide. Both were gated on
guides.view alone, and revision ids are sequential, so being able to read one
guide was enough to walk the ids and read every unpublished draft on the site -
the opposite of what docs/GUIDES.md promises. An image in a PUBLISHED guide
still serves to any reader; one that only appears in a draft does not.

The guide list, the tag chips and search now match the PUBLISHED text rather
than the working copy. Matching the working copy handed readers a hit on
wording that is not in the page when they open it.

The slug no longer follows the title. It was regenerated on every save that
carried a title and the editor autosaves every three seconds, so fixing a typo
in a heading silently moved the URL and broke exactly the pasted links the
stored slug exists to protect.

publish() now aborts when the pre-publish save failed. It ran regardless, so
the author saw "Published version N" while readers got the previous revision.

Link rendering: text is escaped before formatting, so a captured URL arrives
carrying entities and was escaped a second time - every multi-parameter
ServiceNow and SharePoint link opened with &amp;amp; in it. Emphasis could also
reach inside an href, and '//host' passed as an in-app link when the browser
reads it as off-site.

Tests are now HTTP-level. The draft-invisibility rule lived entirely in routes
that no test executed, which is how three of them shipped serving drafts.

plugins/guides/frontend/views/GuideEditor.vue

@@ -142,7 +142,12 @@
           </div>
 
           <div v-if="block.type === 'image'" class="ge-image">
-            <img v-if="block.url" :src="block.url" alt="">
+            <!-- Same authenticated fetch as the reader's view: an author must
+                 see the screenshot they just pasted. -->
+            <img v-if="imageState(block).src" :src="imageState(block).src" alt="">
+            <p v-else-if="imageState(block).failed" class="ge-imagefailed">
+              Image unavailable - it may have been removed
+            </p>
             <input v-model="block.caption" placeholder="Caption (optional)">
             <input v-model="block.alt" placeholder="Alt text, for anyone who cannot see it">
           </div>
@@ -203,6 +208,7 @@ import { useAuthStore } from '@/stores/auth'
 import GuideBlocks from '../components/GuideBlocks.vue'
 import { templates } from '../utils/templates.js'
 import { proof, applyFix } from '../utils/proof.js'
+import { useGuideImages } from '../utils/images.js'
 
 const route = useRoute()
 const router = useRouter()
@@ -382,7 +388,10 @@ async function insertImage (file) {
   status.value = 'Uploading image...'
   try {
     const image = await uploadImage(file)
-    const block = { id: newid(), type: 'image', url: image.url, caption: '', alt: '' }
+    // imageid is what the renderer resolves; url stays for older readers and
+    // for anything that still treats a block as a plain document.
+    const block = { id: newid(), type: 'image', imageid: image.guideimageid,
+                    url: image.url, caption: '', alt: '' }
     blocks.value.splice(insertIndex(), 0, block)
     focused.value = block.id
     status.value = ''
@@ -413,15 +422,21 @@ function onFilePick (event) {
   event.target.value = ''
 }
 
+// Editor thumbnails resolve the same way the reader's do; see utils/images.js.
+const { state: imageState } = useGuideImages(blocks)
+
 function payload () {
   return { title: guide.title, summary: guide.summary || '',
            tags: guide.tags || '', blocks: blocks.value }
 }
 
+// Returns whether the save actually reached the server. publish() depends on
+// that answer: a publish that runs after a failed save promotes the LAST
+// revision the server accepted, which is not what is on the author's screen.
 async function save (quiet) {
   if (!guide.title.trim()) {
     if (!quiet) error.value = 'A guide needs a title before it can be saved'
-    return
+    return false
   }
   saving.value = true
   error.value = ''
@@ -439,9 +454,11 @@ async function save (quiet) {
     dirty.value = false
     status.value = 'Saved ' + new Date().toLocaleTimeString()
     await loadRevisions()
+    return true
   } catch (err) {
     error.value = apiError(err, 'Could not save this guide')
     status.value = 'Not saved'
+    return false
   } finally {
     saving.value = false
   }
@@ -476,7 +493,14 @@ async function publish () {
       + 'anything flagged in a command. Publish anyway?')
     if (!ok) return
   }
-  await save(true)
+  // Publishing promotes the newest SAVED revision, so an unsaved edit is not
+  // in what readers get. Reporting "Published version 4" over a failed save
+  // tells the author their words went out when the old ones did.
+  if (!await save(true)) {
+    error.value = error.value
+      || 'Could not save this guide, so it was not published'
+    return
+  }
   try {
     const response = await api.post('/guides/' + guide.guideid + '/publish')
     guide.ispublished = true
@@ -637,6 +661,8 @@ onMounted(async () => {
   background: transparent; color: var(--text-light); border-radius: 3px;
   cursor: pointer; justify-self: start;
 }
+.ge-imagefailed { margin: 0 0 0.35rem; padding: 0.5rem 0.7rem; font-size: 0.85rem;
+  color: var(--danger, #b3261e); border: 1px dashed var(--border); border-radius: 4px; }
 .ge-image img { max-width: 18rem; display: block; margin-bottom: 0.35rem;
                 border: 1px solid var(--border); border-radius: 4px; }
 .ge-image input { width: 100%; margin-bottom: 0.25rem; padding: 0.3rem 0.45rem;