feat(yfmHtmlBlock): updated @diplodoc/html-extension (#343)

makhnatkin · web-flow · commit 4a6df5662aa1 · 2024-08-21T12:26:17.000+02:00
diff --git a/demo/Playground.tsx b/demo/Playground.tsx
@@ -169,12 +169,15 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
                 .use(YfmHtmlBlock, {
                     useConfig: useYfmHtmlBlockStyles,
                     sanitize: getSanitizeYfmHtmlBlock({options: defaultOptions}),
-                    baseTarget: '_blank',
-                    styles: {
-                        body: {
-                            margin: 0,
-                        },
-                    },
+                    head: `
+                        <base target="_blank" />
+                        <style>
+                            html, body {
+                                margin: 0;
+                                padding: 0;
+                            }
+                        </style
+                    `,
                 })
                 .use(FoldingHeading),
     });
diff --git a/demo/md-plugins.ts b/demo/md-plugins.ts
@@ -58,7 +58,15 @@ const extendedPlugins = defaultPlugins.concat(
     yfmHtmlBlock({
         bundle: false,
         runtimeJsPath: YFM_HTML_BLOCK_RUNTIME,
-        styles: 'https://meyerweb.com/eric/tools/css/reset/reset200802.css',
+        head: `
+            <base target="_blank" />
+            <style>
+                html, body {
+                    margin: 0;
+                    padding: 0;
+                }
+            </style
+        `,
     }),
     foldingHeadings({bundle: false}),
 );
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -200,7 +200,7 @@
   },
   "devDependencies": {
     "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "1.3.3",
+    "@diplodoc/html-extension": "1.5.0",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/transform": "4.22.0",
diff --git a/src/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx b/src/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx
@@ -206,7 +206,13 @@ export const YfmHtmlBlockView: React.FC<{
     onChange: (attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) => void;
     options: YfmHtmlBlockOptions;
     view: EditorView;
-}> = ({onChange, node, getPos, view, options: {useConfig, sanitize, styles, baseTarget = '_'}}) => {
+}> = ({
+    onChange,
+    node,
+    getPos,
+    view,
+    options: {useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = ''},
+}) => {
     const [editing, setEditing, unsetEditing, toggleEditing] = useBooleanState(
         Boolean(node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated]),
     );
@@ -233,25 +239,27 @@ export const YfmHtmlBlockView: React.FC<{
         );
     }
 
-    let dirtyHtml =
-        `<base target="${baseTarget}">` + node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc];
-
+    let additional = baseTarget ? `<base target="${baseTarget}">` : '';
     if (styles) {
         const stylesContent =
             typeof styles === 'string'
                 ? `<link rel="stylesheet" href="${styles}" />`
                 : `<style>${getStyles(styles)}</style>`;
-        dirtyHtml = stylesContent + dirtyHtml;
+        additional += stylesContent;
     }
 
-    const html = sanitize ? sanitize(dirtyHtml) : dirtyHtml;
+    const head = `<head>${headContent || additional}</head>`;
+    const body = `<body>${node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc] ?? ''}</body>`;
+    const html = `<!DOCTYPE html><html>${head}${body}</html>`;
+
+    const resultHtml = sanitize ? sanitize(html) : html;
 
     return (
         <div className={b()} onDoubleClick={setEditing}>
             <Label className={b('label')} icon={<Icon size={16} data={Eye} />}>
                 {i18n('preview')}
             </Label>
-            <YfmHtmlBlockPreview html={html} onСlick={handleClick} config={config} />
+            <YfmHtmlBlockPreview html={resultHtml} onСlick={handleClick} config={config} />
 
             <div className={b('menu')}>
                 <Button
diff --git a/src/extensions/yfm/YfmHtmlBlock/index.ts b/src/extensions/yfm/YfmHtmlBlock/index.ts
@@ -13,6 +13,7 @@ export type YfmHtmlBlockOptions = {
     sanitize?: (dirtyHtml: string) => string;
     styles?: string | StylesObject;
     baseTarget?: BaseTarget;
+    head?: string;
 };
 
 export const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions> = (
