diff --git a/packages/docusaurus-mdx-loader/src/remark/rightToc/search.js b/packages/docusaurus-mdx-loader/src/remark/rightToc/search.js index 516dc44d92..bafac24e8e 100644 --- a/packages/docusaurus-mdx-loader/src/remark/rightToc/search.js +++ b/packages/docusaurus-mdx-loader/src/remark/rightToc/search.js @@ -9,7 +9,7 @@ const toString = require('mdast-util-to-string'); const visit = require('unist-util-visit'); -const escapeHtml = require('escape-html'); +const {toValue} = require('../utils'); /** @typedef {import('@docusaurus/types').MarkdownRightTableOfContents} TOC */ /** @typedef {import('unist').Node} Node */ @@ -23,33 +23,6 @@ const escapeHtml = require('escape-html'); * @property {StringValuedNode[]} children */ -// https://github.com/syntax-tree/mdast#heading -/** - * @param {StringValuedNode | undefined} node - * @returns {string} - */ -function toValue(node) { - if (node && node.type) { - switch (node.type) { - case 'text': - return escapeHtml(node.value); - case 'heading': - return node.children.map(toValue).join(''); - case 'inlineCode': - return `${escapeHtml(node.value)}`; - case 'emphasis': - return `${node.children.map(toValue).join('')}`; - case 'strong': - return `${node.children.map(toValue).join('')}`; - case 'delete': - return `${node.children.map(toValue).join('')}`; - default: - } - } - - return toString(node); -} - // Visit all headings. We `slug` all headings (to account for // duplicates), but only take h2 and h3 headings. /** diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.js.snap b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.js.snap index b8230a895a..b4af21f6fe 100644 --- a/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.js.snap +++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.js.snap @@ -12,11 +12,11 @@ exports[`transformImage plugin pathname protocol 1`] = ` exports[`transformImage plugin transform md images to 1`] = ` "![img](https://example.com/img.png) - + -{\\"img\\"} +{\\"img\\"} -{\\"img\\"} {\\"img\\"} +{\\"img\\"} {\\"img\\"} ## Heading @@ -24,6 +24,6 @@ exports[`transformImage plugin transform md images to 1`] = ` ![img](./img.png) \`\`\` -{\\"img\\"} +{\\"img\\"} " `; diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js index 65531b4a16..20797e3ead 100644 --- a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js +++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js @@ -9,6 +9,7 @@ const visit = require('unist-util-visit'); const path = require('path'); const url = require('url'); const fs = require('fs-extra'); +const escapeHtml = require('escape-html'); const {getFileLoaderUtils} = require('@docusaurus/core/lib/webpack/utils'); const {posixPath} = require('@docusaurus/utils'); @@ -18,11 +19,11 @@ const { const createJSX = (node, pathUrl) => { node.type = 'jsx'; - node.value = ``; + }${node.title ? ` title="${escapeHtml(node.title)}"` : ''} />`; if (node.url) { delete node.url; diff --git a/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__snapshots__/index.test.js.snap b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__snapshots__/index.test.js.snap index c7361ffe5b..1de13c618b 100644 --- a/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__snapshots__/index.test.js.snap +++ b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__snapshots__/index.test.js.snap @@ -10,11 +10,11 @@ exports[`transformAsset plugin pathname protocol 1`] = ` exports[`transformAsset plugin transform md links to 1`] = ` "[asset](https://example.com/asset.pdf) - + -asset +asset -asset ![seet](asset) +asset ## Heading @@ -26,10 +26,16 @@ exports[`transformAsset plugin transform md links to 1`] = ` [assets](/github/!file-loader!/assets.pdf) -asset +asset -staticAsset.pdf +staticAsset.pdf -@site/static/staticAsset.pdf +@site/static/staticAsset.pdf + +Just staticAsset.pdf, and awesome staticAsset 2.pdf 'It is really "AWESOME"', but also coded staticAsset 3.pdf + +{\\"Clickable + +Stylized link to asset file " `; diff --git a/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/fixtures/asset.md b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/fixtures/asset.md index 8973ba24af..2cd2ca2649 100644 --- a/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/fixtures/asset.md +++ b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/fixtures/asset.md @@ -4,7 +4,7 @@ [asset](./asset.pdf) -[asset](asset.pdf 'Title') ![seet](asset) +[asset](asset.pdf 'Title') ## Heading @@ -21,3 +21,9 @@ [staticAsset.pdf](/staticAsset.pdf) [@site/static/staticAsset.pdf](@site/static/staticAsset.pdf) + +[Just staticAsset.pdf](/staticAsset.pdf), and [**awesome** staticAsset 2.pdf 'It is really "AWESOME"'](/staticAsset.pdf), but also [coded `staticAsset 3.pdf`](/staticAsset.pdf) + +[![Clickable Docusaurus logo](./static/staticAssetImage.png)](/staticAssetImage.png) + +[Stylized link to asset file](./asset.pdf) diff --git a/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/fixtures/static/staticAssetImage.png b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/fixtures/static/staticAssetImage.png new file mode 100644 index 0000000000..a8fea3f654 Binary files /dev/null and b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/fixtures/static/staticAssetImage.png differ diff --git a/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/index.test.js b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/index.test.js index 2a0503ffb7..836f887b8d 100644 --- a/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/index.test.js +++ b/packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/index.test.js @@ -10,15 +10,15 @@ import remark from 'remark'; import mdx from 'remark-mdx'; import vfile from 'to-vfile'; import plugin from '..'; -import slug from '../../slug'; +import transformImage from '../../transformImage'; const processFixture = async (name, options) => { const path = join(__dirname, 'fixtures', `${name}.md`); const staticDir = join(__dirname, 'fixtures', 'static'); const file = await vfile.read(path); const result = await remark() - .use(slug) .use(mdx) + .use(transformImage, {...options, filePath: path, staticDir}) .use(plugin, {...options, filePath: path, staticDir}) .process(file); diff --git a/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js b/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js index 1960cbdd7c..5295acc2ae 100644 --- a/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js +++ b/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js @@ -11,6 +11,8 @@ const visit = require('unist-util-visit'); const path = require('path'); const url = require('url'); const fs = require('fs-extra'); +const escapeHtml = require('escape-html'); +const {toValue} = require('../utils'); const {getFileLoaderUtils} = require('@docusaurus/core/lib/webpack/utils'); const { @@ -35,7 +37,9 @@ async function ensureAssetFileExist(fileSystemAssetPath, sourceFilePath) { } // transform the link node to a jsx link with a require() call -function toAssetRequireNode({node, index, parent, filePath, requireAssetPath}) { +function toAssetRequireNode({node, filePath, requireAssetPath}) { + /* eslint-disable no-param-reassign */ + let relativeRequireAssetPath = posixPath( path.relative(path.dirname(filePath), requireAssetPath), ); @@ -45,35 +49,18 @@ function toAssetRequireNode({node, index, parent, filePath, requireAssetPath}) { ? relativeRequireAssetPath : `./${relativeRequireAssetPath}`; - const hrefProp = `require('${inlineMarkdownLinkFileLoader}${relativeRequireAssetPath}').default`; + const href = `require('${inlineMarkdownLinkFileLoader}${relativeRequireAssetPath}').default`; + const children = (node.children || []).map((n) => toValue(n)).join(''); + const title = node.title ? `title="${escapeHtml(node.title)}"` : ''; node.type = 'jsx'; - - node.value = ``; - - const linkText = (node.children[0] && node.children[0].value) || ''; - delete node.children; - - parent.children.splice(index + 1, 0, { - type: 'text', - value: linkText, - }); - - parent.children.splice(index + 2, 0, {type: 'jsx', value: ''}); + node.value = `${children}`; } // If the link looks like an asset link, we'll link to the asset, // and use a require("assetUrl") (using webpack url-loader/file-loader) // instead of navigating to such link -async function convertToAssetLinkIfNeeded({ - node, - index, - parent, - staticDir, - filePath, -}) { +async function convertToAssetLinkIfNeeded({node, staticDir, filePath}) { const assetPath = node.url; const hasSiteAlias = assetPath.startsWith('@site/'); @@ -89,8 +76,6 @@ async function convertToAssetLinkIfNeeded({ function toAssetLinkNode(requireAssetPath) { toAssetRequireNode({ node, - index, - parent, filePath, requireAssetPath, }); @@ -117,7 +102,7 @@ async function convertToAssetLinkIfNeeded({ } } -async function processLinkNode({node, index, parent, filePath, staticDir}) { +async function processLinkNode({node, _index, _parent, filePath, staticDir}) { if (!node.url) { // try to improve error feedback // see https://github.com/facebook/docusaurus/issues/3309#issuecomment-690371675 @@ -139,8 +124,6 @@ async function processLinkNode({node, index, parent, filePath, staticDir}) { await convertToAssetLinkIfNeeded({ node, - index, - parent, staticDir, filePath, }); diff --git a/packages/docusaurus-mdx-loader/src/remark/utils/index.js b/packages/docusaurus-mdx-loader/src/remark/utils/index.js new file mode 100644 index 0000000000..0cdf55733b --- /dev/null +++ b/packages/docusaurus-mdx-loader/src/remark/utils/index.js @@ -0,0 +1,39 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const escapeHtml = require('escape-html'); +const toString = require('mdast-util-to-string'); + +/** + * @param {StringValuedNode | undefined} node + * @returns {string} + */ +function toValue(node) { + if (node && node.type) { + switch (node.type) { + case 'text': + return escapeHtml(node.value); + case 'heading': + return node.children.map(toValue).join(''); + case 'inlineCode': + return `${escapeHtml(node.value)}`; + case 'emphasis': + return `${node.children.map(toValue).join('')}`; + case 'strong': + return `${node.children.map(toValue).join('')}`; + case 'delete': + return `${node.children.map(toValue).join('')}`; + default: + } + } + + return toString(node); +} + +module.exports = { + toValue, +};