feat(yfmHtmlBlock): updated yfm-html-block (#354)

Author: makhnatkin

demo/RememberMode.stories.tsx

@@ -86,8 +86,11 @@ aside blockquote {
 
     <div class="container">
         <div class="main">
+            <h3 id="top">Top</h3>
             <p>HTML, or HyperText Markup Language, is the standard language used to create web pages. It allows developers to structure content and make it accessible and attractive to users.</p>
 
+            <a href="http://yandex.com">Yandex site</a>
+
             <p>HTML was first developed by Tim Berners-Lee in 1991, and since then, it has gone through numerous iterations to become the versatile tool it is today. One of the core tenets of HTML is its simplicity and accessibility. By using a series of tags, you can define various elements on a webpage, such as headings, paragraphs, links, images, and more.</p>
 
             <p>HTML documents are plain text files that can be created and edited with any text editor. When opened in a web browser, the HTML code is parsed and rendered to display the structured content. This is achieved through the use of various HTML elements, each represented by tags.</p>
@@ -103,6 +106,8 @@ aside blockquote {
 
             <p>HTML also supports multimedia, allowing you to embed videos, audio, and interactive content. Modern HTML (HTML5) introduces several new elements and APIs to enhance functionality, making it easier for developers to create rich, interactive web experiences.</p>
 
+            <a href="#top">to top</a>
+
             <p>In conclusion, understanding HTML is fundamental for web development. Its role in structuring and presenting content on the web is indispensable. Whether you are a beginner or a seasoned developer, mastering HTML opens the door to creating engaging and effective web pages.</p>
         </div>
 

demo/hooks/useYfmHtmlBlockStyles.ts

@@ -31,8 +31,6 @@ export const useYfmHtmlBlockStyles = () => {
         setConfig({
             styles: getYfmHtmlBlockCssVariables(styles),
             classNames: [theme],
-            resizePadding: 50,
-            resizeDelay: 100,
         });
     }, [theme]);
 

package-lock.json

@@ -200,7 +200,7 @@
   },
   "devDependencies": {
     "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "1.5.0",
+    "@diplodoc/html-extension": "2.1.0",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/transform": "4.22.0",
@@ -275,7 +275,7 @@
   },
   "peerDependencies": {
     "@diplodoc/folding-headings-extension": "^0.1.0",
-    "@diplodoc/html-extension": "^1.2.7",
+    "@diplodoc/html-extension": "2.1.0",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
     "@diplodoc/transform": "^4.5.0",

package.json

@@ -29,8 +29,6 @@ describe('YfmHtmlBlock extension', () => {
             doc(
                 yfmHtmlBlock({
                     [YfmHtmlBlockAttrs.srcdoc]: 'content\n',
-                    [YfmHtmlBlockAttrs.style]: 'width:100%',
-                    [YfmHtmlBlockAttrs.frameborder]: '0',
                 }),
             ),
         ));

src/extensions/yfm/YfmHtmlBlock/YfmHtmlBlock.test.ts

@@ -36,6 +36,18 @@ export function generateID() {
 const DEFAULT_PADDING = 20;
 const DEFAULT_DELAY = 100;
 
+const createLinkCLickHandler = (value: Element, document: Document) => (event: Event) => {
+    event.preventDefault();
+    const targetId = value.getAttribute('href');
+
+    if (targetId) {
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+            targetElement.scrollIntoView({behavior: 'smooth'});
+        }
+    }
+};
+
 const YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onСlick, config}) => {
     const ref = useRef<HTMLIFrameElement>(null);
     const styles = useRef<Record<string, string>>({});
@@ -45,10 +57,6 @@ const YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onСlick, c
     const [height, setHeight] = useState('100%');
 
     useEffect(() => {
-        resizeConfig.current = {
-            padding: config?.resizePadding ?? DEFAULT_PADDING,
-            delay: config?.resizeDelay ?? DEFAULT_DELAY,
-        };
         setStyles(config?.styles);
         setClassNames(config?.classNames);
     }, [config, ref.current?.contentWindow?.document?.body]);
@@ -130,17 +138,35 @@ const YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onСlick, c
         }
     };
 
+    // finds all relative links (href^="#") and changes their click behavior
+    const createAnchorLinkHandlers = (type: 'add' | 'remove') => () => {
+        const document = ref.current?.contentWindow!.document;
+
+        if (document) {
+            document.querySelectorAll('a[href^="#"]').forEach((value: Element) => {
+                const handler = createLinkCLickHandler(value, document);
+                if (type === 'add') {
+                    value.addEventListener('click', handler);
+                } else {
+                    value.removeEventListener('click', handler);
+                }
+            });
+        }
+    };
+
     useEffect(() => {
         ref.current?.addEventListener('load', handleLoadIFrame);
+        ref.current?.addEventListener('load', createAnchorLinkHandlers('add'));
         return () => {
             ref.current?.removeEventListener('load', handleLoadIFrame);
+            ref.current?.removeEventListener('load', createAnchorLinkHandlers('remove'));
         };
     }, [html]);
 
     useEffect(() => {
         if (ref.current) {
             const resizeObserver = new window.ResizeObserver(
-                debounce(handleResizeIFrame, resizeConfig.current?.delay ?? DEFAULT_DELAY),
+                debounce(handleResizeIFrame, DEFAULT_DELAY),
             );
             resizeObserver.observe(ref.current);
         }

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

@@ -9,7 +9,7 @@ import {YfmHtmlBlockConsts} from './const';
 export {yfmHtmlBlockNodeName} from './const';
 
 export interface YfmHtmlBlockSpecsOptions
-    extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
+    extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     nodeView?: ExtensionNodeSpec['view'];
 }
 
@@ -18,14 +18,23 @@ const YfmHtmlBlockSpecsExtension: ExtensionAuto<YfmHtmlBlockSpecsOptions> = (
     {nodeView, ...options},
 ) => {
     builder
-        .configureMd((md) => md.use(transform({bundle: false, ...options}), {}))
+        .configureMd((md) =>
+            md.use(
+                transform({
+                    bundle: false,
+                    embeddingMode: 'srcdoc',
+                    ...options,
+                }),
+                {},
+            ),
+        )
         .addNode(YfmHtmlBlockConsts.NodeName, () => ({
             fromMd: {
                 tokenSpec: {
                     name: YfmHtmlBlockConsts.NodeName,
                     type: 'node',
                     noCloseToken: true,
-                    getAttrs: (token) => Object.fromEntries(token.attrs ?? []),
+                    getAttrs: ({content}) => ({srcdoc: content}),
                 },
             },
             spec: {

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

@@ -9,7 +9,7 @@ import {YfmHtmlBlockAction} from './YfmHtmlBlockSpecs/const';
 import {addYfmHtmlBlock} from './actions';
 
 export interface YfmHtmlBlockOptions
-    extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
+    extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
 }
 

src/extensions/yfm/YfmHtmlBlock/index.ts

@@ -1,6 +1,6 @@
 import React, {ComponentType, RefAttributes, forwardRef, useEffect} from 'react';
 
-import {useDiplodocHtml} from '@diplodoc/html-extension/react';
+import {useDiplodocEmbeddedContentController} from '@diplodoc/html-extension/react';
 import {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';
 
 import type {PluginRuntime, TransformMeta} from '../withMermaid/types';
@@ -25,14 +25,14 @@ export function withYfmHtmlBlock(opts: WithYfmHtmlBlockOptions) {
 
             useYfmHtmlBlockRuntime(meta, opts.runtime);
 
-            const yfmHtmlBlock = useDiplodocHtml();
+            const yfmHtmlBlock = useDiplodocEmbeddedContentController();
 
             useEffect(() => {
                 if (yfmHtmlBlock) {
                     if (yfmHtmlBlockConfig) {
                         yfmHtmlBlock.setConfig(yfmHtmlBlockConfig);
                     }
-                    yfmHtmlBlock.reinitialize();
+                    yfmHtmlBlock.initialize();
                 }
             }, [yfmHtmlBlock, html, yfmHtmlBlockConfig]);