'; let closeTag = ''; @@ -40,6 +40,14 @@ export const blockquoteCompiler = ({ renderer }) => } } - const body = this.parser.parse(tokens); + compiler.blockquoteDepth++; + let body = ''; + + try { + body = this.parser.parse(tokens); + } finally { + compiler.blockquoteDepth--; + } + return `${openTag}${body}${closeTag}`; }); diff --git a/src/core/render/compiler/code.js b/src/core/render/compiler/code.js index bfe57413b9..f9af670a0a 100644 --- a/src/core/render/compiler/code.js +++ b/src/core/render/compiler/code.js @@ -1,17 +1,21 @@ import * as Prism from 'prismjs'; // See https://github.com/PrismJS/prism/pull/1367 import 'prismjs/components/prism-markup-templating.js'; -import checkLangDependenciesAllLoaded from '../../util/prism.js'; +import checkLangDependenciesAllLoaded, { + sanitizeCodeLang, +} from '../../util/prism.js'; export const highlightCodeCompiler = ({ renderer }) => (renderer.code = function ({ text, lang = 'markup' }) { - checkLangDependenciesAllLoaded(lang); - const langOrMarkup = Prism.languages[lang] || Prism.languages.markup; + const { escapedLang, prismLang } = sanitizeCodeLang(lang); + + checkLangDependenciesAllLoaded(prismLang); + const langOrMarkup = Prism.languages[prismLang] || Prism.languages.markup; const code = Prism.highlight( text.replace(/@DOCSIFY_QM@/g, '`'), langOrMarkup, - lang, + prismLang, ); - return /* html */ `
${code}${code}${text}
`; +} + export const paragraphCompiler = ({ renderer }) => - (renderer.paragraph = function ({ tokens }) { - const text = this.parser.parseInline(tokens); + (renderer.paragraph = function ({ tokens, embedTokenMap }) { let result; - if (text.startsWith('!>')) { - result = helperTpl('callout important', text); - } else if (text.startsWith('?>')) { - result = helperTpl('callout tip', text); + if (embedTokenMap && tokens?.length) { + // Keep original inline order: plain text/link tokens stay inline, include links are replaced. + const parts = []; + let inlineBuffer = []; + + const flushInlineBuffer = () => { + if (!inlineBuffer.length) { + return; + } + const text = this.parser.parseInline(inlineBuffer); + parts.push(renderParagraphText(text)); + inlineBuffer = []; + }; + + tokens.forEach((inlineToken, inlineIndex) => { + const embedToken = embedTokenMap[inlineIndex]; + if (embedToken?.length) { + flushInlineBuffer(); + parts.push(this.parser.parse(embedToken)); + } else { + inlineBuffer.push(inlineToken); + } + }); + + flushInlineBuffer(); + result = parts.join(''); } else { - result = /* html */ `${text}
`; + const text = this.parser.parseInline(tokens); + result = renderParagraphText(text); } return result; diff --git a/src/core/render/compiler/tableCell.js b/src/core/render/compiler/tableCell.js index 063ed6682a..cc8ee44890 100644 --- a/src/core/render/compiler/tableCell.js +++ b/src/core/render/compiler/tableCell.js @@ -2,7 +2,18 @@ export const tableCellCompiler = ({ renderer }) => (renderer.tablecell = function (token) { let content; - if (token.embedTokens && token.embedTokens.length > 0) { + if (token.embedTokenMap && token.tokens?.length) { + // Preserve mixed content order: render inline tokens, replacing include links by position. + content = ''; + token.tokens.forEach((inlineToken, inlineIndex) => { + const embedToken = token.embedTokenMap[inlineIndex]; + if (embedToken?.length) { + content += this.parser.parse(embedToken); + } else { + content += this.parser.parseInline([inlineToken]); + } + }); + } else if (token.embedTokens && token.embedTokens.length > 0) { content = this.parser.parse(token.embedTokens); } else { content = this.parser.parseInline(token.tokens); diff --git a/src/core/render/embed.js b/src/core/render/embed.js index 8a55005341..47884e3d45 100644 --- a/src/core/render/embed.js +++ b/src/core/render/embed.js @@ -33,18 +33,13 @@ function extractFragmentContent(text, fragment, fullLine) { } function walkFetchEmbed({ embedTokens, compile, fetch }, cb) { - let token; - let step = 0; - let count = 0; - if (!embedTokens.length) { return cb({}); } - while ((token = embedTokens[step++])) { - const currentToken = token; + const processStep = step => { + const currentToken = embedTokens[step]; - // eslint-disable-next-line no-loop-func const next = text => { let embedToken; if (text) { @@ -119,17 +114,21 @@ function walkFetchEmbed({ embedTokens, compile, fetch }, cb) { tokenRef: currentToken.tokenRef, }); - if (++count >= embedTokens.length) { + if (step + 1 >= embedTokens.length) { cb({}); + } else { + processStep(step + 1); } }; - if (token.embed.url) { - get(token.embed.url).then(next); + if (currentToken.embed.url) { + get(currentToken.embed.url).then(next, () => next()); } else { - next(token.embed.html); + next(currentToken.embed.html); } - } + }; + + processStep(0); } export function prerenderEmbed({ compiler, raw = '', fetch }, done) { @@ -143,46 +142,56 @@ export function prerenderEmbed({ compiler, raw = '', fetch }, done) { const compile = compiler._marked; let tokens = compile.lexer(raw); const embedTokens = []; - const linkRE = compile.Lexer.rules.inline.normal.link; const links = tokens.links; - const linkMatcher = new RegExp(linkRE.source, 'g'); - tokens.forEach((token, index) => { if (token.type === 'paragraph') { - token.text = token.text.replace( - linkMatcher, - (src, filename, href, title) => { - const embed = compiler.compileEmbed(href, title); + (token.tokens || []).forEach( + ( + /** @type {{ type: string; href: any; title: any; }} */ inlineToken, + inlineIndex, + ) => { + if (inlineToken.type !== 'link') { + return; + } + + const embed = compiler.compileEmbed( + inlineToken.href, + inlineToken.title, + ); if (embed) { embedTokens.push({ index, tokenRef: token, + inlineIndex, embed, }); } - return src; }, ); } else if (token.type === 'table') { token.rows.forEach((row, rowIndex) => { row.forEach((cell, cellIndex) => { - cell.text = cell.text.replace( - linkMatcher, - (src, filename, href, title) => { - const embed = compiler.compileEmbed(href, title); - if (embed) { - embedTokens.push({ - index, - tokenRef: token, - rowIndex, - cellIndex, - embed, - }); - } - return src; - }, - ); + (cell.tokens || []).forEach((inlineToken, inlineIndex) => { + if (inlineToken.type !== 'link') { + return; + } + + const embed = compiler.compileEmbed( + inlineToken.href, + inlineToken.title, + ); + if (embed) { + embedTokens.push({ + index, + tokenRef: token, + rowIndex, + cellIndex, + inlineIndex, + embed, + }); + } + }); }); }); } @@ -192,32 +201,75 @@ export function prerenderEmbed({ compiler, raw = '', fetch }, done) { // so that we know where to insert the embedded tokens as they // are returned const moves = []; + const tokenInsertState = new WeakMap(); walkFetchEmbed( { compile, embedTokens, fetch }, ({ embedToken, token, rowIndex, cellIndex, tokenRef }) => { - if (token) { + if (token && embedToken) { + Object.assign(links, embedToken.links); + if (typeof rowIndex === 'number' && typeof cellIndex === 'number') { const cell = tokenRef.rows[rowIndex][cellIndex]; + if (typeof token.inlineIndex === 'number') { + cell.embedTokenMap ||= {}; + const existing = cell.embedTokenMap[token.inlineIndex]; + cell.embedTokenMap[token.inlineIndex] = existing + ? existing.concat(embedToken) + : embedToken; + } + + // Keep the flattened array for backward compatibility with older render paths. + if (cell.embedTokens && cell.embedTokens.length) { + cell.embedTokens = cell.embedTokens.concat(embedToken); + } else { + cell.embedTokens = embedToken; + } + } else if (tokenRef.type === 'paragraph') { + if (typeof token.inlineIndex === 'number') { + tokenRef.embedTokenMap ||= {}; + const existing = tokenRef.embedTokenMap[token.inlineIndex]; + tokenRef.embedTokenMap[token.inlineIndex] = existing + ? existing.concat(embedToken) + : embedToken; + } - cell.embedTokens = embedToken; + // Keep a flattened form as a fallback for custom renderers. + if (tokenRef.embedTokens && tokenRef.embedTokens.length) { + tokenRef.embedTokens = tokenRef.embedTokens.concat(embedToken); + } else { + tokenRef.embedTokens = embedToken; + } } else { - // iterate through the array of previously inserted tokens - // to determine where the current embedded tokens should be inserted - let index = token.index; - moves.forEach(pos => { - if (index > pos.start) { - index += pos.length; - } - }); + const state = tokenInsertState.get(tokenRef); + + if (state) { + const insertAt = state.nextIndex; - Object.assign(links, embedToken.links); + tokens = tokens + .slice(0, insertAt) + .concat(embedToken, tokens.slice(insertAt)); + moves.push({ start: insertAt, delta: embedToken.length }); + state.nextIndex = insertAt + embedToken.length; + } else { + // iterate through the array of previously inserted tokens + // to determine where the current embedded tokens should be inserted + let index = token.index; + moves.forEach(pos => { + if (index > pos.start) { + index += pos.delta; + } + }); - tokens = tokens - .slice(0, index) - .concat(embedToken, tokens.slice(index + 1)); - moves.push({ start: index, length: embedToken.length - 1 }); + tokens = tokens + .slice(0, index) + .concat(embedToken, tokens.slice(index + 1)); + moves.push({ start: index, delta: embedToken.length - 1 }); + tokenInsertState.set(tokenRef, { + nextIndex: index + embedToken.length, + }); + } } - } else { + } else if (!token) { cached[raw] = tokens.concat(); tokens.links = cached[raw].links = links; done(tokens); diff --git a/src/core/render/index.js b/src/core/render/index.js index 9e546a3d01..f4db193754 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -314,7 +314,9 @@ export function Render(Base) { sidebarToggleEl.setAttribute('aria-expanded', String(!isMobile())); - const activeElmHref = this.router.toURL(this.route.path); + const activeElmHref = decodeURIComponent( + this.router.toURL(this.route.path), + ); const activeEl = /** @type {HTMLElement | null} */ ( dom.find(`.sidebar-nav a[href="${activeElmHref}"]`) ); diff --git a/src/core/render/slugify.js b/src/core/render/slugify.js index d27250f65a..6f1f6a7ee2 100644 --- a/src/core/render/slugify.js +++ b/src/core/render/slugify.js @@ -13,6 +13,7 @@ export function slugify(str) { let slug = str .trim() .normalize('NFC') + .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') .replace(/\uFE0F/g, '') .replace(/[\p{Emoji_Presentation}\p{Extended_Pictographic}]/gu, '') .replace(/[A-Z]+/g, lower) diff --git a/src/core/render/utils.js b/src/core/render/utils.js index f402118043..2fd98e2768 100644 --- a/src/core/render/utils.js +++ b/src/core/render/utils.js @@ -94,3 +94,21 @@ export function getAndRemoveDocsifyIgnoreConfig(content = '') { ignoreSubHeading, }); } + +/** + * Escape HTML special characters in a string to prevent XSS attacks. + * + * @param string + * @returns {string} + */ +export function escapeHtml(string) { + const entityMap = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''', + }; + + return String(string).replace(/[&<>"']/g, s => entityMap[s]); +} diff --git a/src/core/router/history/html5.js b/src/core/router/history/html5.js index 9903e46986..48729b57f5 100644 --- a/src/core/router/history/html5.js +++ b/src/core/router/history/html5.js @@ -63,4 +63,6 @@ export class HTML5History extends History { response: {}, }; } + + normalize() {} } diff --git a/src/core/util/core.js b/src/core/util/core.js index 04f3fbdd12..827b79c605 100644 --- a/src/core/util/core.js +++ b/src/core/util/core.js @@ -10,8 +10,11 @@ export function cached(fn) { const cache = Object.create(null); return function (str) { const key = isPrimitive(str) ? str : JSON.stringify(str); - const hit = cache[key]; - return hit || (cache[key] = fn(str)); + if (key in cache) { + return cache[key]; + } + + return (cache[key] = fn(str)); }; } diff --git a/src/core/util/prism.js b/src/core/util/prism.js index 3f381701ee..1136d7055d 100644 --- a/src/core/util/prism.js +++ b/src/core/util/prism.js @@ -1,4 +1,5 @@ import * as Prism from 'prismjs'; +import { escapeHtml } from '../render/utils.js'; /** * * The dependencies map which syncs from @@ -220,6 +221,28 @@ const lang_aliases = { // preventing duplicate calculations and avoiding repeated warning messages. const depTreeCache = {}; +/** + * Normalizes the declared code-block language and provides a safe HTML value. + * + * - `codeLang`: normalized user-declared language (fallback: `markup`) + * - `prismLang`: resolved Prism language key used for dependency/highlight lookup + * - `escapedLang`: escaped language for safe insertion into HTML attributes + * + * @param {*} lang + * @returns {{codeLang: string, prismLang: any|string, escapedLang: string}} + */ +export const sanitizeCodeLang = lang => { + const codeLang = + typeof lang === 'string' && lang.trim().length ? lang.trim() : 'markup'; + const prismLang = lang_aliases[codeLang] || codeLang; + + return { + codeLang, + prismLang, + escapedLang: escapeHtml(codeLang), + }; +}; + /** * PrismJs language dependencies required a specific order to load. * Try to check and print a warning message if some dependencies missing or in wrong order. @@ -254,11 +277,11 @@ export default function checkLangDependenciesAllLoaded(lang) { depTreeCache[lang] = depTree; if (!dummy.loaded) { - const prettyOutput = prettryPrint(depTree, 1); + const prettyOutput = prettyPrint(depTree, 1); // eslint-disable-next-line no-console console.warn( `The language '${lang}' required dependencies for code block highlighting are not satisfied.`, - `Priority dependencies from low to high, consider to place all the necessary dependencie by priority (higher first): \n`, + `Priority dependencies from low to high, consider to place all the necessary dependencies by priority (higher first): \n`, prettyOutput, ); } @@ -288,11 +311,11 @@ const buildAndCheckDepTree = (lang, parent, dummy) => { parent.dependencies.push(cur); }; -const prettryPrint = (depTree, level) => { +const prettyPrint = (depTree, level) => { let cur = `${' '.repeat(level * 3)} ${depTree.cur} ${depTree.loaded ? '(+)' : '(-)'}`; if (depTree.dependencies.length) { depTree.dependencies.forEach(dep => { - cur += prettryPrint(dep, level + 1); + cur += prettyPrint(dep, level + 1); }); } return '\n' + cur; diff --git a/src/plugins/search/component.js b/src/plugins/search/component.js index 8d447c9cb1..59c012d5d6 100644 --- a/src/plugins/search/component.js +++ b/src/plugins/search/component.js @@ -1,5 +1,6 @@ -import { escapeHtml, search } from './search.js'; +import { search } from './search.js'; import cssText from './style.css'; +import { escapeHtml } from '../../core/render/utils.js'; let NO_DATA_TEXT = ''; diff --git a/src/plugins/search/search.js b/src/plugins/search/search.js index 6e3b2e0704..eb6f4d6186 100644 --- a/src/plugins/search/search.js +++ b/src/plugins/search/search.js @@ -2,7 +2,13 @@ import { getAndRemoveConfig, getAndRemoveDocsifyIgnoreConfig, removeAtag, + escapeHtml, } from '../../core/render/utils.js'; +import { + getPath, + getParentPath, + isAbsolutePath, +} from '../../core/router/util.js'; import { markdownToTxt } from './markdown-to-txt.js'; import Dexie from 'dexie'; @@ -15,10 +21,29 @@ db.version(1).stores({ }); async function saveData(maxAge, expireKey) { - INDEXES = Object.values(INDEXES).flatMap(innerData => - Object.values(innerData), - ); - await /** @type {any} */ (db).search.bulkPut(INDEXES); + const records = []; + + Object.values(INDEXES).forEach(entry => { + if (!entry || typeof entry !== 'object') { + return; + } + + // Entry may already be a flat record read from IndexedDB. + if ('slug' in entry) { + records.push(entry); + return; + } + + // Entry may be a per-path map of slug -> record produced by genIndex(). + Object.values(entry).forEach(item => { + if (item && typeof item === 'object' && 'slug' in item) { + records.push(item); + } + }); + }); + + INDEXES = records; + await /** @type {any} */ (db).search.bulkPut(records); await /** @type {any} */ (db).expires.put({ key: expireKey, value: Date.now() + maxAge, @@ -54,18 +79,6 @@ function resolveIndexKey(namespace) { : LOCAL_STORAGE.INDEX_KEY; } -export function escapeHtml(string) { - const entityMap = { - '&': '&', - '<': '<', - '>': '>', - '"': '"', - "'": ''', - }; - - return String(string).replace(/[&<>"']/g, s => entityMap[s]); -} - function getAllPaths(router) { const paths = []; @@ -107,6 +120,111 @@ function getListData(token) { return token.text; } +function extractFragmentContent(text, fragment, fullLine) { + if (!fragment) { + return text; + } + + let fragmentRegex = `(?:###|\\/\\/\\/)\\s*\\[${fragment}\\]`; + if (fullLine) { + fragmentRegex = `.*${fragmentRegex}.*\n`; + } + + const pattern = new RegExp( + `(?:${fragmentRegex})([\\s\\S]*?)(?:${fragmentRegex})`, + ); + const match = text.match(pattern); + return ((match || [])[1] || '').trim(); +} + +function collectEmbedRequests(raw = '', path, vm) { + const tokens = window.marked.lexer(raw); + const requests = []; + + const maybePushEmbed = inlineToken => { + if ( + !inlineToken || + (inlineToken.type !== 'link' && inlineToken.type !== 'image') + ) { + return; + } + + const { config } = getAndRemoveConfig(inlineToken.title || ''); + if (!config.include || !inlineToken.href) { + return; + } + + const href = isAbsolutePath(inlineToken.href) + ? inlineToken.href + : getPath(vm.router.getBasePath(), getParentPath(path), inlineToken.href); + + let type = 'code'; + if (/\.(md|markdown)/.test(href)) { + type = 'markdown'; + } else if (/\.mmd/.test(href)) { + type = 'mermaid'; + } + + requests.push({ + url: href, + type, + fragment: config.fragment, + omitFragmentLine: config.omitFragmentLine, + }); + }; + + tokens.forEach(token => { + if (token.type === 'paragraph') { + (token.tokens || []).forEach(maybePushEmbed); + } else if (token.type === 'table') { + (token.header || []).forEach(cell => { + (cell.tokens || []).forEach(maybePushEmbed); + }); + (token.rows || []).forEach(row => { + row.forEach(cell => { + (cell.tokens || []).forEach(maybePushEmbed); + }); + }); + } + }); + + return requests; +} + +async function getEmbeddedContent(raw = '', path, vm) { + const requests = collectEmbedRequests(raw, path, vm); + if (!requests.length) { + return ''; + } + + const results = await Promise.all( + requests.map( + request => + new Promise(resolve => { + Docsify.get(request.url, false, vm.config.requestHeaders).then( + text => { + let content = text || ''; + if (request.fragment) { + content = extractFragmentContent( + content, + request.fragment, + request.omitFragmentLine, + ); + } + + resolve( + request.type === 'markdown' ? content : markdownToTxt(content), + ); + }, + () => resolve(''), + ); + }), + ), + ); + + return results.filter(Boolean).join('\n'); +} + export function genIndex(path, content = '', router, depth, indexKey) { const tokens = window.marked.lexer(content); const slugify = window.Docsify.slugify; @@ -216,8 +334,6 @@ export function search(query) { ), 'gi', ); - let indexTitle = -1; - let indexContent = -1; handlePostTitle = postTitle ? escapeHtml(ignoreDiacriticalMarks(postTitle)) : postTitle; @@ -225,8 +341,8 @@ export function search(query) { ? escapeHtml(ignoreDiacriticalMarks(postContent)) : postContent; - indexTitle = postTitle ? handlePostTitle.search(regEx) : -1; - indexContent = postContent ? handlePostContent.search(regEx) : -1; + const indexTitle = postTitle ? handlePostTitle.search(regEx) : -1; + let indexContent = postContent ? handlePostContent.search(regEx) : -1; if (indexTitle >= 0 || indexContent >= 0) { matchesScore += indexTitle >= 0 ? 3 : indexContent >= 0 ? 2 : 0; @@ -234,11 +350,8 @@ export function search(query) { indexContent = 0; } - let start = 0; - let end = 0; - - start = indexContent < 11 ? 0 : indexContent - 10; - end = start === 0 ? 100 : indexContent + keyword.length + 90; + const start = indexContent < 11 ? 0 : indexContent - 10; + let end = start === 0 ? 100 : indexContent + keyword.length + 90; if (handlePostContent && end > handlePostContent.length) { end = handlePostContent.length; @@ -317,26 +430,38 @@ export async function init(config, vm) { const len = paths.length; let count = 0; + const markComplete = async () => { + if (len === ++count) { + await saveData(config.maxAge, expireKey); + } + }; + paths.forEach(path => { const pathExists = Array.isArray(INDEXES) ? INDEXES.some(obj => obj.path === path) : false; if (pathExists) { - return count++; + void markComplete(); + return; } Docsify.get(vm.router.getFile(path), false, vm.config.requestHeaders).then( async result => { + const embeddedContent = await getEmbeddedContent(result, path, vm); + const contentToIndex = embeddedContent + ? `${result}\n${embeddedContent}` + : result; INDEXES[path] = genIndex( path, - result, + contentToIndex, vm.router, config.depth, indexKey, ); - if (len === ++count) { - await saveData(config.maxAge, expireKey); - } + return markComplete(); + }, + () => { + return markComplete(); }, ); }); diff --git a/test/config/playwright.setup.js b/test/config/playwright.setup.js index 3b0b918af0..e0fe04a790 100644 --- a/test/config/playwright.setup.js +++ b/test/config/playwright.setup.js @@ -1,5 +1,5 @@ import { startServer } from './server.js'; export default async config => { - startServer(); + await startServer(); }; diff --git a/test/config/server.js b/test/config/server.js index 5875be3a26..a376286360 100644 --- a/test/config/server.js +++ b/test/config/server.js @@ -19,7 +19,7 @@ export async function startServer() { console.log( `\nPort ${settings.port} not available. Exiting process.\n`, ); - process.exit(0); + process.exit(1); } resolve(bsServer); diff --git a/test/e2e/anchor-scroll.test.js b/test/e2e/anchor-scroll.test.js new file mode 100644 index 0000000000..b81ebd91bd --- /dev/null +++ b/test/e2e/anchor-scroll.test.js @@ -0,0 +1,722 @@ +import docsifyInit from '../helpers/docsify-init.js'; +import { test, expect } from './fixtures/docsify-init-fixture.js'; + +async function recordScrollIntoViewCalls(page) { + await page.addInitScript(() => { + const originalScrollIntoView = Element.prototype.scrollIntoView; + const originalScrollTo = window.scrollTo; + + window.__scrollIntoViewCalls = []; + window.__scrollToCalls = []; + window.__imageLoadEvents = []; + document.addEventListener( + 'load', + event => { + const image = event.target; + + if (image instanceof HTMLImageElement) { + window.__imageLoadEvents.push({ + alt: image.alt, + time: performance.now(), + }); + } + }, + true, + ); + Element.prototype.scrollIntoView = function (options) { + window.__scrollIntoViewCalls.push({ + id: this.id, + block: options?.block, + behavior: options?.behavior, + time: performance.now(), + }); + + return originalScrollIntoView.call(this, options); + }; + window.scrollTo = function (...args) { + const options = args[0]; + const call = { + time: performance.now(), + }; + + if (typeof options === 'object' && options !== null) { + call.behavior = options.behavior; + call.left = options.left; + call.top = options.top; + } else { + call.left = options; + call.top = args[1]; + } + + window.__scrollToCalls.push(call); + + return originalScrollTo.apply(this, args); + }; + }); +} + +async function routeDelayedImage(page, url, imageReleased, height) { + await page.route(`**/${url}`, async route => { + await imageReleased; + await route.fulfill({ + contentType: 'image/svg+xml', + body: ` + + `, + }); + }); +} + +async function routeTimedImage(page, url, delay, height) { + await page.route(`**/${url}`, async route => { + await new Promise(resolve => setTimeout(resolve, delay)); + await route.fulfill({ + contentType: 'image/svg+xml', + body: ` + + `, + }); + }); +} + +test.describe('Anchor scrolling', () => { + test('keeps smooth scrolling for same-page anchor clicks', async ({ + page, + }) => { + await page.addInitScript(() => { + const originalScrollIntoView = Element.prototype.scrollIntoView; + + window.__scrollendEvents = []; + window.__scrollEvents = []; + window.__scrollIntoViewCalls = []; + document.addEventListener('scroll', () => { + window.__scrollEvents.push({ time: performance.now() }); + }); + document.addEventListener('scrollend', () => { + window.__scrollendEvents.push({ time: performance.now() }); + }); + Element.prototype.scrollIntoView = function (options) { + window.__scrollIntoViewCalls.push({ + id: this.id, + behavior: options?.behavior, + time: performance.now(), + }); + + return originalScrollIntoView.call(this, options); + }; + }); + + await docsifyInit({ + markdown: { + homepage: ` + # Anchor Scroll + + [Jump to target](#target-section) + + ## Middle Section + + This section keeps the target below the fold. + + ## Target Section + + This is the linked section. + `, + }, + style: ` + .markdown-section { + padding-bottom: 1200px; + } + + #middle-section { + margin-top: 900px; + } + `, + styleURLs: ['/dist/themes/core.css'], + }); + + await page.getByRole('link', { name: 'Jump to target' }).click(); + await page.waitForFunction(() => { + return window.__scrollIntoViewCalls?.some( + call => call.id === 'target-section' && call.behavior === 'smooth', + ); + }); + await page.evaluate(() => { + return new Promise(resolve => { + requestAnimationFrame(() => requestAnimationFrame(resolve)); + }); + }); + await page.waitForFunction(() => { + const scrollendTime = window.__scrollendEvents[0]?.time; + const lastScrollTime = window.__scrollEvents.at(-1)?.time; + const readyTime = + scrollendTime ?? + (lastScrollTime === undefined ? undefined : lastScrollTime + 700); + + return readyTime !== undefined && performance.now() > readyTime; + }); + + const { readyTime, targetCalls } = await page.evaluate(() => { + const scrollendTime = window.__scrollendEvents[0]?.time; + const lastScrollTime = window.__scrollEvents.at(-1)?.time; + + return { + readyTime: + scrollendTime ?? + (lastScrollTime === undefined ? undefined : lastScrollTime + 700), + targetCalls: (window.__scrollIntoViewCalls ?? []).filter( + call => call.id === 'target-section', + ), + }; + }); + const earlyInstantCalls = targetCalls.filter(call => { + return ( + call.behavior === 'instant' && + (readyTime === undefined || call.time < readyTime) + ); + }); + + expect(targetCalls).toHaveLength(1); + expect(targetCalls[0]).toMatchObject({ behavior: 'smooth' }); + expect(earlyInstantCalls).toEqual([]); + }); + + test('waits for images above a direct anchor before smooth scrolling', async ({ + page, + }) => { + await recordScrollIntoViewCalls(page); + + await routeTimedImage(page, 'slow-anchor-image-1.svg', 80, 900); + await routeTimedImage(page, 'slow-anchor-image-2.svg', 120, 700); + + const initPromise = docsifyInit({ + testURL: '/docsify-init.html#/?id=target-section', + markdown: { + homepage: ` + # Anchor Scroll + +  + +  + + ## Middle Section + + This section should not stay at the top after the image loads. + + ## Target Section + + This is the linked section. + + Trailing content keeps the target scrollable. + `, + }, + routes: { + '/docsify-init.html': ` + + + + + + + + + + `, + }, + style: ` + .markdown-section { + overflow-anchor: none; + padding-bottom: 1200px; + } + + .markdown-section img { + display: block; + width: 100%; + height: auto; + } + `, + styleURLs: ['/dist/themes/core.css'], + }); + + await initPromise; + await page.waitForFunction(() => { + const firstImage = document.querySelector('img[alt="Slow image 1"]'); + const secondImage = document.querySelector('img[alt="Slow image 2"]'); + const firstImageLoadTime = window.__imageLoadEvents.find(event => { + return event.alt === 'Slow image 1'; + })?.time; + const secondImageLoadTime = window.__imageLoadEvents.find(event => { + return event.alt === 'Slow image 2'; + })?.time; + + return ( + firstImage instanceof HTMLImageElement && + secondImage instanceof HTMLImageElement && + firstImage.complete && + secondImage.complete && + firstImage.naturalHeight > 0 && + secondImage.naturalHeight > 0 && + firstImageLoadTime !== undefined && + secondImageLoadTime !== undefined + ); + }); + await page.waitForFunction(() => { + const target = document.querySelector('#target-section'); + const targetCalls = (window.__scrollIntoViewCalls ?? []).filter( + call => call.id === 'target-section', + ); + const targetTop = target?.getBoundingClientRect().top; + + return targetCalls.length === 1 && targetTop >= -1 && targetTop < 80; + }); + + const { firstImageLoadTime, secondImageLoadTime, targetCalls, targetTop } = + await page.evaluate(() => { + const target = document.querySelector('#target-section'); + const firstImageLoadTime = window.__imageLoadEvents.find(event => { + return event.alt === 'Slow image 1'; + })?.time; + const secondImageLoadTime = window.__imageLoadEvents.find(event => { + return event.alt === 'Slow image 2'; + })?.time; + + return { + firstImageLoadTime, + secondImageLoadTime, + targetCalls: (window.__scrollIntoViewCalls ?? []).filter( + call => call.id === 'target-section', + ), + targetTop: target.getBoundingClientRect().top, + }; + }); + + expect(firstImageLoadTime).not.toBeUndefined(); + expect(secondImageLoadTime).not.toBeUndefined(); + + expect(targetCalls).toHaveLength(1); + expect(targetCalls[0]).toMatchObject({ + behavior: 'smooth', + block: 'start', + }); + expect(targetCalls[0].time).toBeGreaterThanOrEqual(firstImageLoadTime); + expect(targetCalls[0].time).toBeGreaterThanOrEqual(secondImageLoadTime); + expect(targetTop).toBeGreaterThanOrEqual(-1); + expect(targetTop).toBeLessThan(80); + }); + + test('keeps a direct anchor aligned when images load after the fallback scroll', async ({ + page, + }) => { + await recordScrollIntoViewCalls(page); + + let releaseImage = () => {}; + const imageReleased = new Promise(resolve => { + releaseImage = resolve; + }); + + await routeDelayedImage( + page, + 'very-slow-anchor-image.svg', + imageReleased, + 1200, + ); + + const initPromise = docsifyInit({ + config: { + topMargin: 90, + }, + testURL: '/docsify-init.html#/?id=target-section', + markdown: { + homepage: ` + # Anchor Scroll + +  + + ## Middle Section + + This section should not stay at the top after the image loads. + + ## Target Section + + This is the linked section. + + Trailing content keeps the target scrollable. + `, + }, + routes: { + '/docsify-init.html': ` + + + + + + + + + + `, + }, + style: ` + .markdown-section { + overflow-anchor: none; + padding-bottom: 2200px; + } + + .markdown-section img { + display: block; + width: 100%; + height: auto; + } + `, + styleURLs: ['/dist/themes/core.css'], + }); + + await page.locator('#target-section').waitFor(); + await page.locator('img[alt="Very slow image"]').waitFor({ + state: 'attached', + }); + await page.waitForFunction(() => { + return (window.__scrollIntoViewCalls ?? []).some( + call => call.id === 'target-section', + ); + }); + + const targetCallsBeforeImage = await page.evaluate(() => { + return (window.__scrollIntoViewCalls ?? []).filter( + call => call.id === 'target-section', + ); + }); + + expect(targetCallsBeforeImage).toHaveLength(1); + expect(targetCallsBeforeImage[0]).toMatchObject({ + behavior: 'smooth', + block: 'start', + }); + + releaseImage(); + await initPromise; + await page.waitForFunction(() => { + const image = document.querySelector('img[alt="Very slow image"]'); + + return ( + image instanceof HTMLImageElement && + image.complete && + image.naturalHeight > 0 + ); + }); + await page.waitForFunction(() => { + const target = document.querySelector('#target-section'); + const targetTop = target?.getBoundingClientRect().top; + + return targetTop >= 70 && targetTop < 120; + }); + + const { imageLoadTime, targetCalls, targetTop } = await page.evaluate( + () => { + const target = document.querySelector('#target-section'); + + return { + imageLoadTime: window.__imageLoadEvents.find(event => { + return event.alt === 'Very slow image'; + })?.time, + targetCalls: (window.__scrollIntoViewCalls ?? []).filter( + call => call.id === 'target-section', + ), + targetTop: target.getBoundingClientRect().top, + }; + }, + ); + + expect(imageLoadTime).toBeGreaterThanOrEqual(targetCalls[0].time); + expect(targetCalls).toHaveLength(1); + expect(targetCalls[0]).toMatchObject({ + behavior: 'smooth', + block: 'start', + }); + expect(targetTop).toBeGreaterThanOrEqual(70); + expect(targetTop).toBeLessThan(120); + }); + + test('cancels a pending direct anchor scroll after user input', async ({ + page, + }) => { + await recordScrollIntoViewCalls(page); + await page.addInitScript(() => { + window.__wheelTime = undefined; + window.__anchorWheelListenerAttachedTime = undefined; + const originalAddEventListener = window.addEventListener; + + window.addEventListener = function (eventName, listener, options) { + if ( + eventName === 'wheel' && + options?.once === true && + options?.passive === true + ) { + window.__anchorWheelListenerAttachedTime = performance.now(); + } + + return originalAddEventListener.call( + this, + eventName, + listener, + options, + ); + }; + + window.addEventListener( + 'wheel', + () => { + window.__wheelTime = performance.now(); + }, + { capture: true }, + ); + }); + + let releaseImage = () => {}; + const imageReleased = new Promise(resolve => { + releaseImage = resolve; + }); + + await routeDelayedImage(page, 'slow-anchor-image.svg', imageReleased, 900); + + const initPromise = docsifyInit({ + testURL: '/docsify-init.html#/?id=target-section', + markdown: { + homepage: ` + # Anchor Scroll + +  + + ## Middle Section + + This section should not stay at the top after the image loads. + + ## Target Section + + This is the linked section. + + Trailing content keeps the target scrollable. + `, + }, + routes: { + '/docsify-init.html': ` + + + + + + + + + + `, + }, + style: ` + .markdown-section { + overflow-anchor: none; + padding-bottom: 2200px; + } + + .markdown-section img { + display: block; + width: 100%; + height: auto; + } + `, + styleURLs: ['/dist/themes/core.css'], + }); + + await page.locator('#target-section').waitFor(); + await page.locator('img[alt="Slow image"]').waitFor({ + state: 'attached', + }); + await page.waitForFunction(() => { + return window.__anchorWheelListenerAttachedTime !== undefined; + }); + + await page.mouse.wheel(0, 900); + const wheelTimeHandle = await page.waitForFunction( + () => window.__wheelTime, + ); + const wheelTime = await wheelTimeHandle.jsonValue(); + releaseImage(); + await initPromise; + await page.waitForFunction(() => { + const image = document.querySelector('img[alt="Slow image"]'); + + return ( + image instanceof HTMLImageElement && + image.complete && + image.naturalHeight > 0 + ); + }); + await page.waitForFunction(wheelTime => { + return performance.now() - wheelTime > 700; + }, wheelTime); + + const { scrollStopsAfterWheel, targetCalls, targetCallsAfterWheel } = + await page.evaluate(wheelTime => { + return { + scrollStopsAfterWheel: (window.__scrollToCalls ?? []).filter(call => { + return call.time >= wheelTime; + }), + targetCalls: (window.__scrollIntoViewCalls ?? []).filter( + call => call.id === 'target-section', + ), + targetCallsAfterWheel: (window.__scrollIntoViewCalls ?? []).filter( + call => call.id === 'target-section' && call.time >= wheelTime, + ), + }; + }, wheelTime); + + expect(targetCalls).toEqual([]); + expect(targetCallsAfterWheel).toEqual([]); + expect(scrollStopsAfterWheel).toEqual([]); + }); + + test('does not pull back after user input following a fallback scroll', async ({ + page, + }) => { + await recordScrollIntoViewCalls(page); + await page.addInitScript(() => { + window.__wheelTime = undefined; + + window.addEventListener( + 'wheel', + () => { + window.__wheelTime = performance.now(); + }, + { capture: true }, + ); + }); + + let releaseImage = () => {}; + const imageReleased = new Promise(resolve => { + releaseImage = resolve; + }); + + await routeDelayedImage( + page, + 'post-scroll-slow-image.svg', + imageReleased, + 1200, + ); + + const initPromise = docsifyInit({ + testURL: '/docsify-init.html#/?id=target-section', + markdown: { + homepage: ` + # Anchor Scroll + +  + + ## Middle Section + + This section should not pull the user back after wheel input. + + ## Target Section + + This is the linked section. + + Trailing content keeps the target scrollable. + `, + }, + routes: { + '/docsify-init.html': ` + + + + + + + + + + `, + }, + style: ` + .markdown-section { + overflow-anchor: none; + padding-bottom: 3200px; + } + + .markdown-section img { + display: block; + width: 100%; + height: auto; + } + `, + styleURLs: ['/dist/themes/core.css'], + }); + + await page.locator('#target-section').waitFor(); + await page.locator('img[alt="Post-scroll slow image"]').waitFor({ + state: 'attached', + }); + await page.waitForFunction(() => { + return (window.__scrollIntoViewCalls ?? []).some( + call => call.id === 'target-section', + ); + }); + + const scrollYBeforeWheel = await page.evaluate(() => scrollY); + await page.mouse.wheel(0, 900); + const wheelTimeHandle = await page.waitForFunction( + () => window.__wheelTime, + ); + const wheelTime = await wheelTimeHandle.jsonValue(); + await page.waitForFunction( + scrollYBeforeWheel => Math.abs(scrollY - scrollYBeforeWheel) > 100, + scrollYBeforeWheel, + ); + const scrollYAfterWheel = await page.evaluate(() => scrollY); + await page.waitForFunction(wheelTime => { + return performance.now() - wheelTime > 200; + }, wheelTime); + const scrollYBeforeImage = await page.evaluate(() => scrollY); + + releaseImage(); + await initPromise; + await page.waitForFunction(() => { + const image = document.querySelector('img[alt="Post-scroll slow image"]'); + + return ( + image instanceof HTMLImageElement && + image.complete && + image.naturalHeight > 0 + ); + }); + await page.waitForFunction(() => { + const imageLoadTime = window.__imageLoadEvents.find(event => { + return event.alt === 'Post-scroll slow image'; + })?.time; + + return ( + imageLoadTime !== undefined && performance.now() - imageLoadTime > 300 + ); + }); + + const { scrollStopsAfterWheel, scrollYAfterImage, targetCallsAfterWheel } = + await page.evaluate(wheelTime => { + return { + scrollStopsAfterWheel: (window.__scrollToCalls ?? []).filter(call => { + return call.time >= wheelTime; + }), + scrollYAfterImage: scrollY, + targetCallsAfterWheel: (window.__scrollIntoViewCalls ?? []).filter( + call => call.id === 'target-section' && call.time >= wheelTime, + ), + }; + }, wheelTime); + + expect(Math.abs(scrollYAfterWheel - scrollYBeforeWheel)).toBeGreaterThan( + 100, + ); + expect(targetCallsAfterWheel).toEqual([]); + expect(scrollStopsAfterWheel).toEqual([]); + expect(Math.abs(scrollYAfterImage - scrollYBeforeImage)).toBeLessThan(200); + }); +}); diff --git a/test/e2e/search.test.js b/test/e2e/search.test.js index a99e0121a2..c36c0a1812 100644 --- a/test/e2e/search.test.js +++ b/test/e2e/search.test.js @@ -198,6 +198,130 @@ test.describe('Search Plugin Tests', () => { await expect(resultsHeadingElm).toHaveText('EmptyContent'); }); + test('keeps saving index when one auto path request fails with cached records', async ({ + page, + }) => { + const indexKey = 'docsify.search.index'; + const expireKey = 'docsify.search.expires'; + + const pageErrors = []; + page.on('pageerror', error => pageErrors.push(error.message)); + + await page.evaluate( + ({ indexKey, expireKey }) => { + return new Promise((resolve, reject) => { + const request = indexedDB.open('docsify', 1); + + request.onupgradeneeded = () => { + const db = request.result; + + if (!db.objectStoreNames.contains('search')) { + db.createObjectStore('search', { keyPath: 'slug' }); + } + + if (!db.objectStoreNames.contains('expires')) { + db.createObjectStore('expires', { keyPath: 'key' }); + } + }; + + request.onerror = () => reject(request.error); + request.onsuccess = () => { + const db = request.result; + const tx = db.transaction(['search', 'expires'], 'readwrite'); + + tx.objectStore('search').put({ + slug: '/cached', + title: 'Cached Page', + body: 'cached record', + path: '/cached', + indexKey, + }); + tx.objectStore('expires').put({ + key: expireKey, + value: Date.now() + 60 * 1000, + }); + + tx.oncomplete = () => { + db.close(); + resolve(); + }; + tx.onerror = () => reject(tx.error); + }; + }); + }, + { indexKey, expireKey }, + ); + + await docsifyInit({ + markdown: { + homepage: '# Home', + sidebar: ` + - [Cached](cached) + - [Success](success) + - [Fail](fail) + `, + }, + routes: { + '/success.md': '# Success\n\nregressionKeyword', + '/fail.md': { + status: 404, + body: 'Not Found', + contentType: 'text/markdown', + }, + }, + scriptURLs: ['/dist/plugins/search.js'], + }); + + await expect + .poll(async () => { + return await page.evaluate(indexKey => { + return new Promise((resolve, reject) => { + const request = indexedDB.open('docsify'); + + request.onerror = () => reject(request.error); + request.onsuccess = () => { + const db = request.result; + const tx = db.transaction(['search', 'expires'], 'readonly'); + const searchStore = tx.objectStore('search'); + const expiresStore = tx.objectStore('expires'); + const searchReq = searchStore.getAll(); + const expiresReq = expiresStore.get('docsify.search.expires'); + + tx.onerror = () => reject(tx.error); + tx.oncomplete = () => { + const records = Array.isArray(searchReq.result) + ? searchReq.result + : []; + const hasSuccessRecord = records.some( + record => + record && + record.indexKey === indexKey && + record.path === '/success', + ); + const hasInvalidRecord = records.some( + record => !record || typeof record.slug !== 'string', + ); + const hasExpireRecord = Boolean(expiresReq.result?.value); + + db.close(); + resolve( + hasSuccessRecord && hasExpireRecord && !hasInvalidRecord, + ); + }; + }; + }); + }, indexKey); + }) + .toBe(true); + + const searchFieldElm = page.locator('input[type=search]'); + const resultsHeadingElm = page.locator('.results-panel .title'); + + await searchFieldElm.fill('regressionKeyword'); + await expect(resultsHeadingElm).toHaveText('Success'); + expect(pageErrors).toEqual([]); + }); + test('handles default focusSearch binding', async ({ page }) => { const docsifyInitConfig = { scriptURLs: ['/dist/plugins/search.js'], @@ -277,10 +401,64 @@ console.log('Hello World'); await docsifyInit(docsifyInitConfig); await searchFieldElm.fill('filename'); expect(await resultsHeadingElm.textContent()).toContain( - '...filename _media/example.js :include :type=code :fragment=demo...', + 'filename _media/example.js :include :type=code :fragment=demo', ); }); + test('search should index embedded include content', async ({ page }) => { + const docsifyInitConfig = { + markdown: { + homepage: ` +# Include Search + + + `, + }, + routes: { + '/snippet.js': ` +const embeddedSearchKeyword = 'ok'; + `, + }, + scriptURLs: ['/dist/plugins/search.js'], + }; + + const searchFieldElm = page.locator('input[type=search]'); + const resultsHeadingElm = page.locator('.results-panel .title'); + + await docsifyInit(docsifyInitConfig); + await searchFieldElm.fill('embeddedSearchKeyword'); + await expect(resultsHeadingElm).toHaveText('Include Search'); + }); + + test('search should index embedded include content from relative path', async ({ + page, + }) => { + const docsifyInitConfig = { + markdown: { + homepage: '# Home', + sidebar: '- [Guide Intro](guide/intro)', + }, + routes: { + '/guide/intro.md': ` +# Relative Include Search + + + `, + '/guide/snippets/demo.js': ` +const embeddedRelativeKeyword = 'ok'; + `, + }, + scriptURLs: ['/dist/plugins/search.js'], + }; + + const searchFieldElm = page.locator('input[type=search]'); + const resultsHeadingElm = page.locator('.results-panel .title'); + + await docsifyInit(docsifyInitConfig); + await searchFieldElm.fill('embeddedRelativeKeyword'); + await expect(resultsHeadingElm).toHaveText('Relative Include Search'); + }); + test('search result should remove checkbox markdown and keep related values', async ({ page, }) => { diff --git a/test/integration/__snapshots__/docs.test.js.snap b/test/integration/__snapshots__/docs.test.js.snap index 3e1dca8756..c90522f4aa 100644 --- a/test/integration/__snapshots__/docs.test.js.snap +++ b/test/integration/__snapshots__/docs.test.js.snap @@ -3,26 +3,18 @@ exports[`Docs Site coverpage renders and is unchanged 1`] = ` "
-
-
"
`;
-exports[`Docs Site navbar renders and is unchanged 1`] = `
-""
-`;
+exports[`Docs Site navbar renders and is unchanged 1`] = `""`;
exports[`Docs Site sidebar renders and is unchanged 1`] = `
""
`;
diff --git a/test/integration/__snapshots__/emoji.test.js.snap b/test/integration/__snapshots__/emoji.test.js.snap
index 57b0ffdb5a..74fdac693f 100644
--- a/test/integration/__snapshots__/emoji.test.js.snap
+++ b/test/integration/__snapshots__/emoji.test.js.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`Emoji Ignores all emoji shorthand codes (noEmoji:true) 1`] = `"
"
});
});
+ // Code
+ // ---------------------------------------------------------------------------
+ describe('code', function () {
+ beforeEach(async () => {
+ await docsifyInit();
+ });
+
+ test('escapes language metadata to prevent attribute injection', async function () {
+ const output = window.marked(stripIndent`
+ \`\`\`js" onmouseover="alert(1)
+ const answer = 42;
+ \`\`\`
+ `);
+
+ expect(output).not.toContain('" onmouseover="alert(1)');
+ expect(output).toContain(
+ 'data-lang="js" onmouseover="alert(1)"',
+ );
+ expect(output).toContain(
+ 'class="language-js" onmouseover="alert(1)"',
+ );
+ });
+
+ test('keeps declared language class for normal fences', async function () {
+ const output = window.marked(stripIndent`
+ \`\`\`js
+ const answer = 42;
+ \`\`\`
+ `);
+
+ expect(output).toContain('data-lang="js"');
+ expect(output).toContain('class="language-js"');
+ expect(output).toContain('token keyword');
+ });
+ });
+
// Images
// ---------------------------------------------------------------------------
describe('images', function () {
@@ -205,6 +241,16 @@ Text"
'"
docsify 5.0.0-rc.4
A magical documentation site generator
- Simple and lightweight
- No statically built HTML files
- Multiple themes
docsify 5.0.0-rc.4
A magical documentation site generator
- Simple and lightweight
- No statically built HTML files
- Multiple themes
:smile:
:smile::smile:
:smile: :smile:
:smile::smile::smile:
:smile: :smile: :smile:
text:smile:
:smile:text
text:smile:text
"`; @@ -7,13 +7,9 @@ exports[`Emoji Ignores emoji shorthand codes in URIs 1`] = `"Url Achor tags 
:100:- -
:100:
:100
" `; diff --git a/test/integration/embed.test.js b/test/integration/embed.test.js new file mode 100644 index 0000000000..546a471b16 --- /dev/null +++ b/test/integration/embed.test.js @@ -0,0 +1,339 @@ +import { waitForFunction, waitForText } from '../helpers/wait-for.js'; +import docsifyInit from '../helpers/docsify-init.js'; + +describe('Embed', function () { + test('embed file code fragment renders', async () => { + await docsifyInit({ + markdown: { + homepage: ` + # Embed Test + + [filename](_media/example1.js ':include :type=code :fragment=demo') + `, + }, + routes: { + '_media/example1.js': ` + let myURL = 'https://api.example.com/data'; + /// [demo] + const result = fetch(myURL) + .then(response => { + return response.json(); + }) + .then(myJson => { + console.log(JSON.stringify(myJson)); + }); + /// [demo] + result.then(console.log).catch(console.error); + `, + }, + }); + + // Wait for the embedded fragment to be fetched and rendered into #main + expect( + await waitForText('#main', 'console.log(JSON.stringify(myJson));'), + ).toBeTruthy(); + + const mainText = document.querySelector('#main').textContent; + expect(mainText).not.toContain('https://api.example.com/data'); + expect(mainText).not.toContain( + 'result.then(console.log).catch(console.error);', + ); + }); + + test('embed file full line fragment identifier', async () => { + await docsifyInit({ + markdown: { + homepage: ` + # Embed Test + + [filename](_media/example1.html ':include :type=code :fragment=demo :omitFragmentLine') + `, + }, + routes: { + '_media/example1.html': ` + + `, + }, + }); + + // Wait for the embedded fragment to be fetched and rendered into #main + expect( + await waitForText('#main', 'console.log(JSON.stringify(myJson));'), + ).toBeTruthy(); + + const mainText = document.querySelector('#main').textContent; + expect(mainText).not.toContain('https://api.example.com/data'); + expect(mainText).not.toContain('Full line fragment identifier'); + expect(mainText).not.toContain('-->'); + expect(mainText).not.toContain( + 'result.then(console.log).catch(console.error);', + ); + }); + + test('embed multiple file code fragments', async () => { + await docsifyInit({ + markdown: { + homepage: ` + # Embed Test + + [filename](_media/example1.js ':include :type=code :fragment=demo') + + [filename](_media/example2.js ":include :type=code :fragment=something") + + # Text between + + [filename](_media/example3.js ':include :fragment=something_else_not_code') + + [filename](_media/example4.js ':include :fragment=demo') + + # Text after + `, + }, + routes: { + '_media/example1.js': ` + let example1 = 1; + /// [demo] + example1 += 10; + /// [demo] + console.log(example1);`, + '_media/example2.js': ` + let example1 = 1; + ### [something] + example2 += 10; + ### [something] + console.log(example2);`, + '_media/example3.js': ` + let example3 = 1; + ### [something_else_not_code] + example3 += 10; + /// [something_else_not_code] + console.log(example3);`, + '_media/example4.js': ` + let example4 = 1; + ### No fragment here + example4 += 10; + /// No fragment here + console.log(example4);`, + }, + }); + + expect(await waitForText('#main', 'example1 += 10;')).toBeTruthy(); + expect(await waitForText('#main', 'example2 += 10;')).toBeTruthy(); + expect(await waitForText('#main', 'example3 += 10;')).toBeTruthy(); + + const mainText = document.querySelector('#main').textContent; + expect(mainText).toContain('Text between'); + expect(mainText).toContain('Text after'); + expect(mainText).not.toContain('let example1 = 1;'); + expect(mainText).not.toContain('let example2 = 1;'); + expect(mainText).not.toContain('let example3 = 1;'); + expect(mainText).not.toContain('console.log(example1);'); + expect(mainText).not.toContain('console.log(example2);'); + expect(mainText).not.toContain('console.log(example3);'); + expect(mainText).not.toContain('console.log(example4);'); + expect(mainText).not.toContain('example4 += 10;'); + expect(mainText).not.toContain('No fragment here'); + }); + + test('embed multiple includes in same paragraph', async () => { + await docsifyInit({ + markdown: { + homepage: ` + # Embed Test + + [first](_media/first.md ':include') middle paragraph text [second](_media/second.md ':include') + `, + }, + routes: { + '_media/first.md': 'first include content', + '_media/second.md': 'second include content', + }, + }); + + expect(await waitForText('#main', 'first include content')).toBeTruthy(); + expect(await waitForText('#main', 'second include content')).toBeTruthy(); + + const mainText = document.querySelector('#main').textContent; + const firstIndex = mainText.indexOf('first include content'); + const middleIndex = mainText.indexOf('middle paragraph text'); + const secondIndex = mainText.indexOf('second include content'); + + expect(firstIndex).toBeGreaterThan(-1); + expect(middleIndex).toBeGreaterThan(-1); + expect(secondIndex).toBeGreaterThan(-1); + expect(firstIndex).toBeLessThan(middleIndex); + expect(middleIndex).toBeLessThan(secondIndex); + expect(mainText).not.toContain("_media/first.md ':include'"); + expect(mainText).not.toContain("_media/second.md ':include'"); + }); + + test('embed multiple include code fragments in same paragraph', async () => { + await docsifyInit({ + markdown: { + homepage: ` + # Embed Test + + [first](_media/first.js ':include :type=code :fragment=demo') [second](_media/second.js ':include :type=code :fragment=demo') + `, + }, + routes: { + '_media/first.js': ` + const first = 1; + /// [demo] + console.log('first demo line'); + /// [demo] + console.log('first outside'); + `, + '_media/second.js': ` + const second = 1; + /// [demo] + console.log('second demo line'); + /// [demo] + console.log('second outside'); + `, + }, + }); + + expect( + await waitForText('#main', "console.log('first demo line');"), + ).toBeTruthy(); + expect( + await waitForText('#main', "console.log('second demo line');"), + ).toBeTruthy(); + + const mainText = document.querySelector('#main').textContent; + const firstIndex = mainText.indexOf("console.log('first demo line');"); + const secondIndex = mainText.indexOf("console.log('second demo line');"); + + expect(firstIndex).toBeGreaterThan(-1); + expect(secondIndex).toBeGreaterThan(-1); + expect(firstIndex).toBeLessThan(secondIndex); + expect(mainText).not.toContain('first outside'); + expect(mainText).not.toContain('second outside'); + }); + + test('embed multiple includes in same table cell', async () => { + await docsifyInit({ + markdown: { + homepage: ` + # Embed Test + +Command | Description | Parameters +---: | --- | --- +\`do-something\` | Does something. | [first include](_media/first.md ':include') middle table text [second include](_media/second.md ':include') + `, + }, + routes: { + '_media/first.md': 'first table include content', + '_media/second.md': 'second table include content', + }, + }); + + expect( + await waitForText('#main', 'first table include content'), + ).toBeTruthy(); + expect( + await waitForText('#main', 'second table include content'), + ).toBeTruthy(); + + const mainText = document.querySelector('#main').textContent; + const firstIndex = mainText.indexOf('first table include content'); + const middleIndex = mainText.indexOf('middle table text'); + const secondIndex = mainText.indexOf('second table include content'); + + expect(firstIndex).toBeGreaterThan(-1); + expect(middleIndex).toBeGreaterThan(-1); + expect(secondIndex).toBeGreaterThan(-1); + expect(firstIndex).toBeLessThan(middleIndex); + expect(middleIndex).toBeLessThan(secondIndex); + expect(mainText).not.toContain("_media/first.md ':include'"); + expect(mainText).not.toContain("_media/second.md ':include'"); + }); + + test('failed embed URL does not block page render', async () => { + await docsifyInit({ + markdown: { + homepage: ` + # Embed Test + + [missing](_media/missing.md ':include') + + Text after missing embed + + [ok](_media/ok.md ':include') + `, + }, + routes: { + '_media/missing.md': { + status: 404, + body: 'Not Found', + contentType: 'text/markdown', + }, + '_media/ok.md': 'reachable include content', + }, + }); + + expect(await waitForText('#main', 'Text after missing embed')).toBeTruthy(); + expect( + await waitForText('#main', 'reachable include content'), + ).toBeTruthy(); + }); + + test('embed file table cell', async () => { + await docsifyInit({ + markdown: { + homepage: ` + # Embed Test + +Command | Description | Parameters +---: | --- | --- +**Something** | | +\`do-something\` | Does something. | [include content](_media/content.md ':include') +**Something else** | | +\`etc.\` | Etc. | | + `, + }, + routes: { + '_media/content.md': `this is include content`, + }, + }); + + const mainText = document.querySelector('#main').textContent; + expect(mainText).toContain('Something'); + expect(mainText).toContain('this is include content'); + }); + + test.each([ + { type: 'iframe', selector: 'iframe' }, + { type: 'video', selector: 'video' }, + { type: 'audio', selector: 'audio' }, + ])('embed %s escapes URL for XSS safety', async ({ type, selector }) => { + const dangerousUrl = 'https://example.com/?q=">