Support <video> tags on the Documentation

[nihey]

Context

We are starting to use Elements as a Documentation tool and we needed the support to add videos on the Documentation description.

Current Behavior

Currently the video tags are sanitized out of the Markdown so they never appear on the final

Expected Behavior

Video tags would work just like other HTML tags on the documentation

Possible Solution(s)

I've checked your code and it is possible to do it by changing https://www.npmjs.com/package/@stoplight/markdown-viewer (which does not seem to be Open Source).

I would be willing to contribute if the repository was open, the change I've made to workaround it was:

// Change the file: node_modules/@stoplight/markdown-viewer/index.mjs
sanitizationSchema = deepmerge(defaultSchema, {^M
    tagNames: ['tabs', 'tab', 'codegroup', 'button', 'video', 'source'],
    attributes: {
        '*': ['className', 'style', 'id'],
        code: ['title', 'lineNumbers', 'inline', 'highlightLines', 'lang', 'live', 'jsonSchema', 'http', 'resolved'],
        img: ['bg', 'focus', 'inline', 'invertOnDark'],
        blockquote: ['theme'],
        video: ['src', 'controls'],
        source: ['src'],
    },
});

The rebuild the project and serve the files from my rebuilt version.

Example with videos: https://videomatik-editor-git-redoc-kassellabs.vercel.app/#/

[chohmann]

place in markdown viewer to update: https://github.com/stoplightio/markdown-viewer/blob/master/src/utils/parse.ts

[RanolP]

imho giving users control over what nodes should be kept is also a good solution. e.g. the doc author trying to use custom elements for icons.

[njho]

This would be fantastic. Is there a workaround in the interim?

[RanolP]

I just forked this repo and patched @stoplight/markdown-viewer. then have vendored the custom build of elements; just works for our docs.