rehype-sanitize has different output than github

[RARgames]

From readme:

It drops anything that isn’t explicitly allowed by a schema (defaulting to how github.com works)

Example:
input:

<!-- test --> 123

<!-- test --> 456 <!-- test -->

output github:
123 456
output rehype-sanitize:
empty

[ChristianMurphy]

Hey @RARgames! 👋
Sorry you ran into some confusion.

rehype-santize does behave as GitHub does.
Make sure you have your remark and rehype configuration setup correctly.
A working example for reference: https://stackblitz.com/edit/github-ozn1qm?file=src%2Fmain.ts

source from sandbox

// ⚠️ Important! Please make sure the dependencies are up to date.

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import rehypeStringify from 'rehype-stringify';

const sourceMarkdown = `
<!-- test --> 123

<!-- test --> 456 <!-- test -->
`;

try {
  document.querySelector<HTMLPreElement>('#source')!.textContent =
    sourceMarkdown;

  const file = await unified()
    .use(remarkParse)
    // Add any remark plugins here
    .use(remarkRehype, { allowDangerousHtml: true })
    // Add any rehype plugins here
    .use(rehypeRaw)
    .use(rehypeSanitize)
    .use(rehypeStringify)
    .process(sourceMarkdown);

  document.querySelector<HTMLIFrameElement>(
    '#result'
  )!.contentWindow!.document.body.innerHTML = String(file);
  document.querySelector<HTMLPreElement>('#error')!.textContent = '';
} catch (error) {
  document.querySelector<HTMLPreElement>('#error')!.textContent = String(error);
}

[wooorm]

Why do we need rehypeRaw before rehypeSanitize?

Because plugins are order sensitive. Like so many things in life, doing two arbitrary things, doing them in a different order doesn’t work.

[RARgames]

My bad, the question was not precise: Why do we need to use rehypeRaw at all in order to make rehypeSanitize work correctly?
Proposed answer: We need to re-parse the document in order to rehypeSanitize has access to particular nodes instead of merged nodes (like it happens in case of comments, when there is 1 node instead of 3 here: <!-- test --> 456 <!-- test -->).

Is this right?

[wooorm]

Yes

[RARgames]

Sorry to ask similar questions over and over again. :)

I'm finishing my pipeline, but still cannot figure out how to make it work correctly.

I have 2 conflicting plugins: rehype-raw and rehype-prism-plus.
Either I have fully-working code blocks (comments are not working as intended), or I have fully-working comments (code blocks are not working as intended).

I have a few other rehype/remark plugins and a custom schema for rehype-sanitize, but they are working perfectly fine.

Here is the minimal example (without other plugins etc.)
https://codesandbox.io/embed/vq963l?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.js

Example 1 is almost good, but it's missing classes: line-number, highlight-line and line="number". Probably rehype-raw is removing {1,3-4} showLineNumbers from the start of the code block.
AFAIK rehype-prism-plus is getting this info ({1,3-4} showLineNumbers) from meta data: node.data.meta or node.properties.metastring.

Probably I can somehow save this info (e.g. using other plugin to create a node before rehype-raw) and then retrieve the info after rehype-raw using another plugin - but it seems like an overkill.

Any help will be appreciated!

[RARgames]

I've managed to get it working:

• I created 2 plugins: preserveMetaPlugin and retrieveMetaPlugin
• This is my minimal example plugins pipeline: [preserveMetaPlugin, rehypeRaw, metaBackPlugin, rehypeSanitize, rehypePrismPlus]

Not sure if it is the best way, but it works.

function preserveMetaPlugin() {
    return (tree, file) => {
      visit(tree, 'element', (node) => {
        if (node.tagName === 'code' && node.data && node.data.meta) {
          node.properties = { ...node.properties, 'data-meta': String(node.data.meta) };
        }
      });
    };
  }

  function retrieveMetaPlugin() {
    return (tree, file) => {
      visit(tree, 'element', (node) => {
        if (node.tagName === 'code' && node.properties && node.properties['dataMeta']) {
            if (!node.data) {
              node.data = {};
            }
            node.data.meta = node.properties['dataMeta'];
            delete node.properties['dataMeta'];
        }
      });
    };
  }