From 4a6df5662aa19b759653eef2e095a6e46874604c Mon Sep 17 00:00:00 2001
From: Sergey Makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 21 Aug 2024 12:26:17 +0200
Subject: [PATCH] feat(yfmHtmlBlock): updated @diplodoc/html-extension (#343)

---
 demo/Playground.tsx                           | 15 ++++++++-----
 demo/md-plugins.ts                            | 10 ++++++++-
 package-lock.json                             |  8 +++----
 package.json                                  |  2 +-
 .../YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx | 22 +++++++++++++------
 src/extensions/yfm/YfmHtmlBlock/index.ts      |  1 +
 6 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/demo/Playground.tsx b/demo/Playground.tsx
index 904bf63c..4f277ae7 100644
--- 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
index 03bd5c35..c8feb95a 100644
--- 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
index 82ca9a77..998ac673 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,7 +52,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",
@@ -2628,9 +2628,9 @@
       "dev": true
     },
     "node_modules/@diplodoc/html-extension": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@diplodoc/html-extension/-/html-extension-1.3.3.tgz",
-      "integrity": "sha512-kw8fj+BejT8OVIJoj/+OoWicm1S4jrGX8F5A8wISTIq1SjBi0ltg/M5+mAJPqlpP8Y7XJtH0RvLH2jtCbh2vFA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@diplodoc/html-extension/-/html-extension-1.5.0.tgz",
+      "integrity": "sha512-J2qEwMj7PHqjuGFvlK/A6crSxB1JY6g1OKaC8W5RzY/sKa78P+EviE0gzcIJQ1oo3B2xbvLkRoyq7trKFBQCDw==",
       "dev": true,
       "dependencies": {
         "lodash.debounce": "^4.0.8",
diff --git a/package.json b/package.json
index 7de8cfac..c6485d73 100644
--- 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
index 82473ff0..bce1aa49 100644
--- 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
index 6aa354eb..5b33c781 100644
--- 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> = (