elements icon indicating copy to clipboard operation
elements copied to clipboard

Support <video> tags on the Documentation

Open nihey opened this issue 2 years ago • 4 comments

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/#/

nihey avatar Oct 17 '23 19:10 nihey

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

chohmann avatar Nov 03 '23 16:11 chohmann

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.

RanolP avatar Mar 01 '24 14:03 RanolP