diff --git a/package.json b/package.json index 70ca39bc..c90d33a9 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "css:build": "compile-less -d src -o esm", "css:watch": "compile-less -d src -o esm --watch", "css:build:dist": "compile-less -d src --combine markdown.css --rm-global", - "watch": "tsbb watch", + "watch": "tsbb watch & npm run css:watch", "build": "tsbb build && npm run css:build && npm run css:build:dist", "test": "tsbb test --env=jsdom", "coverage": "tsbb test --env=jsdom --coverage" diff --git a/src/index.tsx b/src/index.tsx index 99d0aeee..60447a9e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React, { useImperativeHandle } from 'react'; import ReactMarkdown, { Options } from 'react-markdown'; +import { Root, Element, ElementContent } from 'hast'; import gfm from 'remark-gfm'; import slug from 'rehype-slug'; import headings from 'rehype-autolink-headings' @@ -10,35 +11,36 @@ import rehypeRewrite from 'rehype-rewrite'; import './styles/markdown.less'; import './styles/markdowncolor.less'; -const rehypeRewriteHandle = (node: any, index: number, parent: any) => { - if (node.type === 'element' && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) { - const child = node.children && node.children[0]; +const octiconLink: Element = { + type: 'element', + tagName: 'svg', + properties: { + class: 'octicon octicon-link', + viewBox: '0 0 16 16', + version: '1.1', + width: '16', + height: '16', + ariaHidden: 'true', + }, + children: [ + { + type: 'element', + tagName: 'path', + children: [], + properties: { + fillRule: 'evenodd', + d: 'M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z', + } + } + ] +} + +const rehypeRewriteHandle = (node: ElementContent, index: number | null, parent: Root | Element | null) => { + if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) { + const child = node.children && node.children[0] as Element; if (child && child.properties && child.properties.ariaHidden === 'true') { child.properties = { class: 'anchor', ...child.properties }; - child.children = [ - { - type: 'element', - tagName: 'svg', - properties: { - class: 'octicon octicon-link', - viewBox: '0 0 16 16', - version: '1.1', - width: '16', - height: '16', - ariaHidden: 'true', - }, - children: [ - { - type: 'element', - tagName: 'path', - properties: { - fillRule: 'evenodd', - d: 'M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z', - } - } - ] - } - ]; + child.children = [ octiconLink ]; } } } @@ -66,7 +68,7 @@ export default React.forwardRef((props