cebb3e9e44
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; 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.
78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
/**
|
|
* Resolving guide images.
|
|
*
|
|
* A guide image lives behind an authenticated route, and an <img src> is a
|
|
* plain browser request that carries no Authorization header - this app keeps
|
|
* its JWT in one. Pointing src at the image route therefore yields 401 and a
|
|
* broken-image icon for every reader, which is how guides first shipped.
|
|
*
|
|
* So the bytes are fetched through the api client, which attaches the token and
|
|
* resolves against its own baseURL - the latter also fixing a stored
|
|
* '/api/guides/images/N' string under a subpath mount, where the API is not at
|
|
* /api at all.
|
|
*
|
|
* Used by the renderer AND the editor: an author needs to see the screenshot
|
|
* they just pasted as much as a reader does.
|
|
*/
|
|
import { reactive, watch, onBeforeUnmount } from 'vue'
|
|
import api from '@/api'
|
|
|
|
/** The image id a block refers to, whichever way it was written.
|
|
*
|
|
* Blocks store imageid (written since this was fixed) or a url string (written
|
|
* before it). The url is never used as a src, only read for its id.
|
|
*/
|
|
export function imageIdOf (block) {
|
|
if (!block) return ''
|
|
if (block.imageid) return String(block.imageid)
|
|
const match = /\/guides\/images\/(\d+)/.exec(block.url || '')
|
|
return match ? match[1] : ''
|
|
}
|
|
|
|
/**
|
|
* Keeps object URLs for the image blocks in `blocksRef`, fetching each id once
|
|
* however many blocks use it, and revoking them as blocks go away.
|
|
*
|
|
* Returns `state(block)` -> { src, failed }.
|
|
*/
|
|
export function useGuideImages (blocksRef) {
|
|
const images = reactive({})
|
|
|
|
async function load (id) {
|
|
if (images[id]) return
|
|
images[id] = { src: '', failed: false }
|
|
try {
|
|
const response = await api.get(`/guides/images/${id}`, { responseType: 'blob' })
|
|
images[id].src = URL.createObjectURL(response.data)
|
|
} catch (err) {
|
|
images[id].failed = true
|
|
}
|
|
}
|
|
|
|
function release (id) {
|
|
if (images[id] && images[id].src) URL.revokeObjectURL(images[id].src)
|
|
delete images[id]
|
|
}
|
|
|
|
function state (block) {
|
|
const id = imageIdOf(block)
|
|
if (!id) return { src: '', failed: true }
|
|
return images[id] || { src: '', failed: false }
|
|
}
|
|
|
|
// Editing replaces the block list on every keystroke, so resolve only ids
|
|
// that are new and keep the ones already held. Without that, every keystroke
|
|
// would refetch every image in the guide.
|
|
watch(blocksRef, blocks => {
|
|
const wanted = new Set(
|
|
(blocks || []).filter(b => b && b.type === 'image')
|
|
.map(imageIdOf).filter(Boolean))
|
|
wanted.forEach(load)
|
|
Object.keys(images).forEach(id => { if (!wanted.has(id)) release(id) })
|
|
}, { immediate: true, deep: true })
|
|
|
|
onBeforeUnmount(() => { Object.keys(images).forEach(release) })
|
|
|
|
return { state }
|
|
}
|