RFC: Add bindings to use YFM into ReactJs

[d3m1d0v]

Description

Many of our services use transformer together with ReactJS and display HTML obtained from transformer inside React-app (usually using dangerouslySetInnerHTML). And each service has its own implementation of this rendering.

Proposal

Create a separate package which contain renderer (bindings) for YFM-HTML inside React-app. This renderer should know about base class name (.yfm) for container, about known modifiers (links-visited and no-list-reset), set default role- and aria- attributes, and so on. It will also may contain any common helpers/utilities/bindings for interacting with content inside React-app (for example, using meta or any other data from transformer).

Package name example: @diplodoc/react

Example of current utils/helpers that should be in this package: first second

Renderer implementation example

type YfmHtmlProps = {
  qa?: string;
  className?: string;
  html?: string;
  role?: string;
  mods?: {
    'links-visited'?: boolean;
    'no-list-reset'?: boolean;
    [key: string]: boolean;
  };
};

const YfmHtmlRenderer = React.forwardRef<HTMLDivElement, YfmStaticViewProps>(props, ref) => {
  return (
    <div
        ref={ref}
        role={props.role ?? 'presentation'}
        dangerouslySetInnerHTML={{__html: props.html}}
        className={cn('yfm', props.mods, props.className)}
        data-qa={props.qa}
    /> 
  );
}