feat(view): added option to control HTML block runtimes (#674)

Co-authored-by: vladkrk <[email protected]>

Author: vladKrk

demo/components/Playground.tsx

@@ -1,5 +1,6 @@
 import {type CSSProperties, memo, useCallback, useEffect, useMemo, useState} from 'react';
 
+import type {EmbeddingMode} from '@diplodoc/html-extension';
 import {defaultOptions} from '@diplodoc/transform/lib/sanitize';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
@@ -77,6 +78,7 @@ export type PlaygroundProps = {
     onChangeEditorType?: (mode: MarkdownEditorMode) => void;
     onChangeSplitModeEnabled?: (splitModeEnabled: boolean) => void;
     directiveSyntax?: DirectiveSyntaxValue;
+    disabledHTMLBlockModes?: EmbeddingMode[];
 } & Pick<UseMarkdownEditorProps, 'experimental' | 'wysiwygConfig'> &
     Pick<
         MarkdownEditorViewProps,
@@ -125,6 +127,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
         hidePreviewAfterSubmit,
         experimental,
         directiveSyntax,
+        disabledHTMLBlockModes,
     } = props;
     const [editorMode, setEditorMode] = useState<MarkdownEditorMode>(initialEditor ?? 'wysiwyg');
     const [mdRaw, setMdRaw] = useState<MarkupString>(initial || '');
@@ -143,9 +146,10 @@ export const Playground = memo<PlaygroundProps>((props) => {
                 breaks={md.breaks}
                 needToSanitizeHtml={sanitizeHtml}
                 plugins={getPlugins({directiveSyntax})}
+                htmlRuntimeConfig={{disabledModes: disabledHTMLBlockModes}}
             />
         ),
-        [sanitizeHtml],
+        [sanitizeHtml, disabledHTMLBlockModes],
     );
 
     const logger = useMemo(() => new Logger2().nested({env: 'playground'}), []);

demo/components/PlaygroundMini.tsx

@@ -23,6 +23,7 @@ export type PlaygroundMiniProps = Pick<
     | 'onChangeEditorType'
     | 'onChangeSplitModeEnabled'
     | 'directiveSyntax'
+    | 'disabledHTMLBlockModes'
 > & {withDefaultInitialContent?: boolean};
 
 export const PlaygroundMini = memo<PlaygroundMiniProps>(

demo/components/SplitModePreview.tsx

@@ -1,5 +1,6 @@
 import {useEffect, useMemo, useRef, useState} from 'react';
 
+import type {HTMLRuntimeConfig} from '@diplodoc/html-extension';
 import transform from '@diplodoc/transform';
 import {useThemeValue} from '@gravity-ui/uikit';
 import type MarkdownIt from 'markdown-it';
@@ -31,10 +32,20 @@ export type SplitModePreviewProps = {
     linkify?: boolean;
     linkifyTlds?: string | string[];
     needToSanitizeHtml?: boolean;
+    htmlRuntimeConfig?: HTMLRuntimeConfig;
 };
 
 export const SplitModePreview: React.FC<SplitModePreviewProps> = (props) => {
-    const {plugins, getValue, allowHTML, breaks, linkify, linkifyTlds, needToSanitizeHtml} = props;
+    const {
+        plugins,
+        getValue,
+        allowHTML,
+        breaks,
+        linkify,
+        linkifyTlds,
+        needToSanitizeHtml,
+        htmlRuntimeConfig,
+    } = props;
     const [html, setHtml] = useState('');
     const [meta, setMeta] = useState<object | undefined>({});
     const divRef = useRef<HTMLDivElement>(null);
@@ -74,6 +85,7 @@ export const SplitModePreview: React.FC<SplitModePreviewProps> = (props) => {
             noListReset
             mermaidConfig={mermaidConfig}
             yfmHtmlBlockConfig={yfmHtmlBlockConfig}
+            htmlRuntimeConfig={htmlRuntimeConfig}
             className="demo-preview"
         />
     );

demo/defaults/args.ts

@@ -17,4 +17,5 @@ export const args: Meta<PlaygroundMiniProps>['args'] = {
     renderPreviewDefined: true,
     height: 'initial',
     directiveSyntax: 'disabled',
+    disabledHTMLBlockModes: [],
 };

demo/stories/yfm/content.ts

@@ -102,6 +102,8 @@ html, body {
 
 Simple text again
 
+<div data-yfm-sandbox-mode='shadow' data-yfm-sandbox-content='This is shadow html block content that injected in html by runtime'>This is initial shadow html block content</div>
+
 ## Next is another YFM HTML block with styles
 
 ::: html

package-lock.json

@@ -210,7 +210,7 @@
   "devDependencies": {
     "@diplodoc/cut-extension": "^0.6.1",
     "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "^2.5.0",
+    "@diplodoc/html-extension": "2.7.1",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/tabs-extension": "^3.5.1",
@@ -295,8 +295,8 @@
   },
   "peerDependencies": {
     "@diplodoc/cut-extension": "^0.5.0 || ^0.6.1 || ^0.7.1",
-    "@diplodoc/folding-headings-extension": "^0.1.0",
     "@diplodoc/file-extension": "^0.2.1",
+    "@diplodoc/folding-headings-extension": "^0.1.0",
     "@diplodoc/html-extension": "^2.3.2",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",

package.json

@@ -274,7 +274,9 @@ export const YfmHtmlBlockView: React.FC<{
     const body = `<body>${node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc] ?? ''}</body>`;
     const html = `<!DOCTYPE html><html>${head}${body}</html>`;
 
-    const resultHtml = sanitize ? sanitize(html) : html;
+    const sanitizeFunction = typeof sanitize === 'function' ? sanitize : sanitize?.body;
+
+    const resultHtml = sanitizeFunction ? sanitizeFunction(html) : html;
 
     return (
         <div className={b()} onDoubleClick={setEditing}>

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

@@ -1,5 +1,6 @@
 import {type ComponentType, type RefAttributes, forwardRef, useEffect} from 'react';
 
+import type {HTMLRuntimeConfig} from '@diplodoc/html-extension';
 import {useDiplodocEmbeddedContentController} from '@diplodoc/html-extension/react';
 import type {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';
 
@@ -14,16 +15,17 @@ export type WithYfmHtmlBlockOptions = {
 export type WithYfmHtmlBlockProps = {
     meta: TransformMeta;
     yfmHtmlBlockConfig?: IHTMLIFrameElementConfig;
+    htmlRuntimeConfig?: HTMLRuntimeConfig;
 };
 
 export function withYfmHtmlBlock(opts: WithYfmHtmlBlockOptions) {
     return <T extends {html: string}>(
         Component: ComponentType<T & RefAttributes<HTMLDivElement>>,
     ) =>
         forwardRef<HTMLDivElement, T & WithYfmHtmlBlockProps>(function WithYfmHtml(props, ref) {
-            const {meta, html, yfmHtmlBlockConfig} = props;
+            const {meta, html, yfmHtmlBlockConfig, htmlRuntimeConfig} = props;
 
-            useYfmHtmlBlockRuntime(meta, opts.runtime);
+            useYfmHtmlBlockRuntime(meta, opts.runtime, htmlRuntimeConfig);
 
             const yfmHtmlBlock = useDiplodocEmbeddedContentController();
 

src/view/hocs/withYfmHtml/index.tsx

@@ -1,11 +1,16 @@
+import type {HTMLRuntimeConfig} from '@diplodoc/html-extension';
+import {setupRuntimeConfig} from '@diplodoc/html-extension/utils';
+
 import type {PluginRuntime, TransformMeta} from './types';
 
 /** @internal */
 export function useYfmHtmlBlockRuntime(
     meta: TransformMeta,
     runtime: PluginRuntime = '_assets/html-extension.js',
+    htmlRuntimeConfig: HTMLRuntimeConfig = {},
 ) {
     if (meta?.script?.includes(runtime)) {
+        setupRuntimeConfig(htmlRuntimeConfig);
         import(/* webpackChunkName: "yfm-html-runtime" */ '@diplodoc/html-extension/runtime');
     }
 }