fix add-class and add-line-number-attribute

packages/app/src/services/renderer/rehype-plugins/add-class.ts

@@ -1,6 +1,7 @@
 // See: https://github.com/martypdx/rehype-add-classes for the original implementation.
 // Re-implemeted in TypeScript.
 import { selectAll, HastNode, Element } from 'hast-util-select';
+import { Properties } from 'hast-util-select/lib/types';
 import { Plugin } from 'unified';
 
 export type SelectorName = string; // e.g. 'h1'
@@ -8,9 +9,7 @@ export type ClassName = string; // e.g. 'header'
 export type Additions = Record<SelectorName, ClassName>;
 export type AdditionsEntry = [SelectorName, ClassName];
 
-const generateWriter = (className: string) => (element: Element) => {
-  const { properties } = element;
-
+export const addClassToProperties = (properties: Properties | undefined, className: string): void => {
   if (properties == null) {
     return;
   }
@@ -20,9 +19,19 @@ const generateWriter = (className: string) => (element: Element) => {
     return;
   }
 
+  if (Array.isArray(properties.className)) {
+    properties.className.push(className);
+    return;
+  }
+
   properties.className += ` ${className}`;
 };
 
+const generateWriter = (className: string) => (element: Element) => {
+  const { properties } = element;
+  addClassToProperties(properties, className);
+};
+
 const adder = (entry: AdditionsEntry) => {
   const [selectorName, className] = entry;
   const writer = generateWriter(className);
@@ -30,7 +39,7 @@ const adder = (entry: AdditionsEntry) => {
   return (node: HastNode) => selectAll(selectorName, node).forEach(writer);
 };
 
-export const addClass: Plugin<[Additions]> = (additions) => {
+export const rehypePlugin: Plugin<[Additions]> = (additions) => {
   const adders = Object.entries(additions).map(adder);
 
   return node => adders.forEach(a => a(node as HastNode));

packages/app/src/services/renderer/rehype-plugins/add-line-number-attribute.ts

@@ -3,7 +3,9 @@ import { Element } from 'hast-util-select';
 import { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
-const REGEXP_TARGET_TAGNAMES = new RegExp(/h1|h2|h3|h4|h5|h6|p|img|pre|blockquote|hr|ol|ul/);
+import { addClassToProperties } from './add-class';
+
+const REGEXP_TARGET_TAGNAMES = new RegExp(/^(h1|h2|h3|h4|h5|h6|p|img|pre|blockquote|hr|ol|ul)$/);
 
 export const rehypePlugin: Plugin = () => {
   return (tree) => {
@@ -12,7 +14,7 @@ export const rehypePlugin: Plugin = () => {
         const properties = node.properties ?? {};
 
         // add class
-        properties.className = [properties.className?.toString() ?? '', 'has-data-line'];
+        addClassToProperties(properties, 'has-data-line');
         // add attribute
         properties['data-line'] = node.position?.start.line;
 

packages/app/src/services/renderer/renderer.tsx

@@ -27,7 +27,7 @@ import { NextLink } from '~/components/ReactMarkdownComponents/NextLink';
 import { RendererConfig } from '~/interfaces/services/renderer';
 import loggerFactory from '~/utils/logger';
 
-import { addClass } from './rehype-plugins/add-class';
+import * as addClass from './rehype-plugins/add-class';
 import * as addLineNumberAttribute from './rehype-plugins/add-line-number-attribute';
 import { relativeLinks } from './rehype-plugins/relative-links';
 import { relativeLinksByPukiwikiLikeLinker } from './rehype-plugins/relative-links-by-pukiwiki-like-linker';
@@ -290,7 +290,7 @@ const generateCommonOptions = (pagePath: string|undefined, config: RendererConfi
       [relativeLinksByPukiwikiLikeLinker, { pagePath }],
       [relativeLinks, { pagePath }],
       raw,
-      [addClass, {
+      [addClass.rehypePlugin, {
         table: 'table table-bordered',
       }],
     ],