fix(yfmHtmlBlock): added sanitize prop to YfmHtmlBlockView (#307)

Author: makhnatkin

demo/Playground.tsx

@@ -1,5 +1,6 @@
 import React, {CSSProperties, useCallback, useEffect} from 'react';
 
+import sanitize from '@diplodoc/transform/lib/sanitize';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
 import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 
@@ -161,6 +162,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
                 })
                 .use(YfmHtmlBlock, {
                     useConfig: useYfmHtmlBlockStyles,
+                    sanitize,
                 }),
     });
 

src/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/NodeView.tsx

@@ -95,11 +95,12 @@ export class WYfmHtmlBlockNodeView implements NodeView {
     private renderYfmHtmlBlock() {
         return createPortal(
             <YfmHtmlBlockView
+                getPos={this.getPos}
+                node={this.node}
+                onChange={this.onChange.bind(this)}
+                sanitize={this.options.sanitize}
                 useConfig={this.options.useConfig}
                 view={this.view}
-                onChange={this.onChange.bind(this)}
-                node={this.node}
-                getPos={this.getPos}
             />,
             this.dom,
         );

src/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx

@@ -199,12 +199,13 @@ const CodeEditMode: React.FC<{
 };
 
 export const YfmHtmlBlockView: React.FC<{
-    view: EditorView;
-    onChange: (attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) => void;
-    node: Node;
     getPos: () => number | undefined;
+    node: Node;
+    onChange: (attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) => void;
+    sanitize?: (dirtyHtml: string) => string;
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
-}> = ({onChange, node, getPos, view, useConfig}) => {
+    view: EditorView;
+}> = ({onChange, node, getPos, view, useConfig, sanitize}) => {
     const [editing, setEditing, unsetEditing, toggleEditing] = useBooleanState(
         Boolean(node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated]),
     );
@@ -231,16 +232,15 @@ export const YfmHtmlBlockView: React.FC<{
         );
     }
 
+    const dirtyHtml = node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    const html = sanitize ? sanitize(dirtyHtml) : dirtyHtml;
+
     return (
         <div className={b()} onDoubleClick={setEditing}>
             <Label className={b('label')} icon={<Icon size={16} data={Eye} />}>
                 {i18n('preview')}
             </Label>
-            <YfmHtmlBlockPreview
-                html={node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc]}
-                onСlick={handleClick}
-                config={config}
-            />
+            <YfmHtmlBlockPreview html={html} onСlick={handleClick} config={config} />
 
             <div className={b('menu')}>
                 <Button