feat(yfHtmlBlock): updated YfmHtmlBlock options (#327)

Author: makhnatkin

demo/md-plugins.ts

@@ -55,7 +55,11 @@ const extendedPlugins = defaultPlugins.concat(
     mark,
     mermaid({bundle: false, runtime: MERMAID_RUNTIME}),
     sub,
-    yfmHtmlBlock({bundle: false, runtimeJsPath: YFM_HTML_BLOCK_RUNTIME}),
+    yfmHtmlBlock({
+        bundle: false,
+        runtimeJsPath: YFM_HTML_BLOCK_RUNTIME,
+        styles: 'https://meyerweb.com/eric/tools/css/reset/reset200802.css',
+    }),
     foldingHeadings({bundle: false}),
 );
 

package-lock.json

@@ -200,7 +200,7 @@
   },
   "devDependencies": {
     "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "1.2.7",
+    "@diplodoc/html-extension": "1.3.1",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/transform": "4.22.0",

package.json

@@ -1,5 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import {transform} from '@diplodoc/html-extension';
+import {BaseTarget, StylesObject} from '@diplodoc/html-extension/plugin';
 
 import type {ExtensionAuto, ExtensionNodeSpec} from '../../../../core';
 
@@ -10,14 +11,16 @@ export {yfmHtmlBlockNodeName} from './const';
 export type YfmHtmlBlockSpecsOptions = {
     nodeView?: ExtensionNodeSpec['view'];
     sanitize?: (dirtyHtml: string) => string;
+    styles?: string | StylesObject;
+    baseTarget?: BaseTarget;
 };
 
 const YfmHtmlBlockSpecsExtension: ExtensionAuto<YfmHtmlBlockSpecsOptions> = (
     builder,
-    {nodeView, sanitize},
+    {nodeView, ...options},
 ) => {
     builder
-        .configureMd((md) => md.use(transform({bundle: false, sanitize}), {}))
+        .configureMd((md) => md.use(transform({bundle: false, ...options}), {}))
         .addNode(YfmHtmlBlockConsts.NodeName, () => ({
             fromMd: {
                 tokenSpec: {

src/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.tsx

@@ -1,3 +1,4 @@
+import {BaseTarget, StylesObject} from '@diplodoc/html-extension/plugin';
 import type {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';
 
 import {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';
@@ -10,12 +11,17 @@ import {addYfmHtmlBlock} from './actions';
 export type YfmHtmlBlockOptions = {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
     sanitize?: (dirtyHtml: string) => string;
+    styles?: string | StylesObject;
+    baseTarget?: BaseTarget;
 };
 
-export const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions> = (builder, options) => {
+export const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions> = (
+    builder,
+    {useConfig: _, ...options},
+) => {
     builder.use(YfmHtmlBlockSpecs, {
         nodeView: YfmHtmlBlockNodeViewFactory(options),
-        sanitize: options.sanitize,
+        ...options,
     });
 
     builder.addAction(YfmHtmlBlockAction, () => addYfmHtmlBlock);