@thomd/rehype-textmarker 1.0.0 → 1.1.0

package/README.md

@@ -61,7 +61,7 @@ then running `node example.js` yields:
 
 ## Test
 
-    npm run test
+    pnpm run test
 
 ## API
 
@@ -90,9 +90,9 @@ The following options are available:
 
 - `className` (`string`, optional) — style class to be added to the html tag. Default is no style class.
 
-- `tags` (`array` of `string`, optional) — list of tags within whose text is highlighted. It is also possible to define tags with class names, e.g. `code.language-js`  which will only highlight wihtin Javascript code blocks . Default is `p` tag.
+- `tags` (`array` of `string`, optional) — list of tags within whose text is highlighted. It is also possible to define tags with class names, e.g. `code.language-js` which will only highlight wihtin Javascript code blocks . Default is `p` tag.
 
-- `ignore` (`array` of `string`, optional) — list of tags to ignore. Default is `[]`.
+- `ignore` (`array` of `string`, optional) — list of tags or tags with class names to ignore. Default is `[]`.
 
 [rehype]: https://github.com/rehypejs/rehype
 [build-badge]: https://github.com/thomd/rehype-textmarker/workflows/plugin-test/badge.svg

package/index.js

@@ -8,29 +8,38 @@ const rehypeTextmarker = (options) => {
       }
       return (tree) => {
          for (let option of options) {
+            const ignoreSelectors = option.ignore ?? []
+            const ignoreFn = (node) => {
+               return ignoreSelectors.some((selector) => {
+                  if (selector.includes('.')) {
+                     const [tag, cls] = selector.split('.')
+                     return node.tagName === tag && Array.isArray(node.properties?.className) && node.properties.className.includes(cls)
+                  }
+                  return node.tagName === selector
+               })
+            }
             visit(
                tree,
                (node) => {
                   const className = node.properties?.className
                   const tags = className && Array.isArray(className) ? className.map((cls) => `${node.tagName}.${cls}`) : []
-                  return option.tags ? option.tags.some((tag) => [node.tagName, ...tags].includes(tag)) : node.tagName == 'p'
+                  return option.tags ? option.tags.some((tag) => [node.tagName, ...tags].includes(tag)) : node.tagName === 'p'
                },
                (node) => {
                   findAndReplace(
                      node,
                      [
                         option.textPattern,
-                        (value, capture, match) => {
-                           const markNode = {
-                              type: 'element',
-                              tagName: option.htmlTag != null ? option.htmlTag : 'mark',
-                              properties: option.className != null ? { className: [option.className] } : {},
-                              children: [{ type: 'text', value: capture }],
-                           }
-                           return markNode
-                        },
+                        (value, capture) => ({
+                           type: 'element',
+                           tagName: option.htmlTag ?? 'mark',
+                           properties: option.className ? { className: [option.className] } : {},
+                           children: [{ type: 'text', value: capture }],
+                        }),
                      ],
-                     { ignore: defaultIgnore.concat(option.ignore ? option.ignore : []) }
+                     {
+                        ignore: [...defaultIgnore, ignoreFn],
+                     }
                   )
                }
             )
@@ -38,4 +47,5 @@ const rehypeTextmarker = (options) => {
       }
    }
 }
+
 export default rehypeTextmarker

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thomd/rehype-textmarker",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "rehype-plugin to enclode text pattern with a mark-tag for text highlighting",
   "keywords": [
     "rehype-plugin",