diff --git a/packages/markdown/__tests__/__snapshots__/index.test.js.snap b/packages/markdown/__tests__/__snapshots__/index.test.js.snap index 47b6fd533..8fbe44fa4 100644 --- a/packages/markdown/__tests__/__snapshots__/index.test.js.snap +++ b/packages/markdown/__tests__/__snapshots__/index.test.js.snap @@ -37,17 +37,13 @@ exports[`emojis 1`] = ` exports[`export multiple Markdown renderers allows complex compact headings 1`] = ` "

Basic Text

-

🙀 oh noes!

-

6. Oh No

-

Lorem ipsum dolor!

" `; exports[`export multiple Markdown renderers renders HTML 1`] = ` "

Hello World

-
@@ -96,11 +92,6 @@ exports[`export multiple Markdown renderers renders custom React components 1`] -
- - @@ -297,19 +288,6 @@ Object { Object { "type": "text", "value": " -", - }, - Object { - "children": Array [], - "properties": Object { - "id": "section-hello-world", - }, - "tagName": "div", - "type": "element", - }, - Object { - "type": "text", - "value": " @@ -837,11 +815,6 @@ exports[`export multiple Markdown renderers renders plain markdown as React 1`] -
- - @@ -1029,9 +1002,6 @@ exports[`list items 1`] = ` exports[`magic image 1`] = `"
\\"\\"\\"\\"

A guy. Eating pizza. And making an OK gesture.

"`; -exports[`prefix anchors with section- should add a section- prefix to heading anchors 1`] = ` -"

heading

-
" -`; +exports[`prefix anchors with section- should add a section- prefix to heading anchors 1`] = `"

heading

"`; exports[`tables 1`] = `"
TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1
"`; diff --git a/packages/markdown/components/Heading/index.jsx b/packages/markdown/components/Heading/index.jsx index 956e3a78f..98ea99d89 100644 --- a/packages/markdown/components/Heading/index.jsx +++ b/packages/markdown/components/Heading/index.jsx @@ -1,5 +1,14 @@ const React = require('react'); const PropTypes = require('prop-types'); +const kebab = require('lodash/kebabCase'); + +/* istanbul ignore next */ +function deprecatedGenerateHeadingId(e) { + if (typeof e === 'object') { + return deprecatedGenerateHeadingId(e.props.children[0]); + } + return kebab(e); +} function Heading({ tag, ...props }) { if (!props.children) return ''; @@ -9,6 +18,11 @@ function Heading({ tag, ...props }) { align: props.align, }; return React.createElement(tag, attrs, [ +
,
,
{props.children} diff --git a/packages/markdown/components/Heading/style.scss b/packages/markdown/components/Heading/style.scss index fa9fc1cbf..7aa544255 100644 --- a/packages/markdown/components/Heading/style.scss +++ b/packages/markdown/components/Heading/style.scss @@ -6,10 +6,15 @@ .heading-text { flex: 1 100%; } + .heading-anchor-deprecated { + position: absolute; + top: 0; + } .heading-anchor { top: -1rem !important; } - .heading-anchor, .heading-anchor-icon { + .heading-anchor, + .heading-anchor-icon { position: absolute !important; display: inline !important; order: -1; diff --git a/packages/markdown/index.js b/packages/markdown/index.js index 93fd15d40..b65f98344 100644 --- a/packages/markdown/index.js +++ b/packages/markdown/index.js @@ -62,10 +62,6 @@ const { rdmePinCompiler, } = require('./processor/compile'); -/* Custom Unified Plugins - */ -const sectionAnchorId = require('./processor/plugin/section-anchor-id'); - // Processor Option Defaults const options = require('./options.json'); @@ -148,7 +144,6 @@ export function processor(opts = {}) { .use(!opts.correctnewlines ? remarkBreaks : () => {}) .use(gemojiParser.sanitize(sanitize)) .use(remarkSlug) - .use(sectionAnchorId) .use(remarkRehype, { allowDangerousHtml: true }) .use(rehypeRaw) .use(rehypeSanitize, sanitize); diff --git a/packages/markdown/package-lock.json b/packages/markdown/package-lock.json index 2dbb3a452..1e53c4711 100644 --- a/packages/markdown/package-lock.json +++ b/packages/markdown/package-lock.json @@ -7402,8 +7402,7 @@ "lodash": { "version": "4.17.15", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", - "dev": true + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, "lodash.get": { "version": "4.4.2", @@ -10644,11 +10643,6 @@ } } }, - "unist-util-flatmap": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/unist-util-flatmap/-/unist-util-flatmap-1.0.0.tgz", - "integrity": "sha512-IG32jcKJlhARCYT2LsYPJWdoXYkzz3ESAdl1aa2hn9Auh+cgUmU6wgkII4yCc/1GgeWibRdELdCZh/p3QKQ1dQ==" - }, "unist-util-generated": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.5.tgz", diff --git a/packages/markdown/package.json b/packages/markdown/package.json index 715a262de..bab24874d 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -14,6 +14,7 @@ "@readme/variable": "^6.4.0", "copy-to-clipboard": "^3.3.1", "hast-util-sanitize": "^1.2.0", + "lodash": "^4.17.15", "prop-types": "^15.7.2", "react": "^16.4.2", "rehype-raw": "^4.0.1", @@ -27,7 +28,6 @@ "remark-slug": "^6.0.0", "remark-stringify": "^8.0.0", "unified": "^8.4.0", - "unist-util-flatmap": "^1.0.0", "unist-util-map": "^2.0.0", "unist-util-visit": "^2.0.1" }, diff --git a/packages/markdown/processor/plugin/section-anchor-id.js b/packages/markdown/processor/plugin/section-anchor-id.js deleted file mode 100644 index f6b989f29..000000000 --- a/packages/markdown/processor/plugin/section-anchor-id.js +++ /dev/null @@ -1,17 +0,0 @@ -const flatMap = require('unist-util-flatmap'); - -// Adds an empty
next to all headings. -// This is for compatibility with how we used to do slugs -function transformer(ast) { - return flatMap(ast, node => { - if (node.type === 'heading') { - const id = `section-${node.data.id}`; - return [node, { type: 'div', data: { hProperties: { id } } }]; - } - return [node]; - }); -} - -module.exports = function sectionAnchorId() { - return transformer; -};