fixed example build

example/index.js

@@ -1,14 +1,14 @@
 import transform from '@diplodoc/transform';
-import tabs from '@diplodoc/tabs-extension';
+import htmlPlugin from '@diplodoc/html-extension';
 
 import {readFile} from 'node:fs/promises';
 
 (async () => {
-    const content = await readFile('./Readme.md', 'utf8');
+    const content = await readFile('./README.md', 'utf8');
     const {result} = await transform(content, {
         output: './build',
         plugins: [
-            tabs.transform({
+            htmlPlugin.transform({
                 bundle: true,
             }),
         ],

example/package.json

@@ -1,12 +1,12 @@
 {
-  "name": "@diplodoc/tabs-extension-example",
+  "name": "@diplodoc/html-extension-example",
   "private": true,
   "type": "module",
   "scripts": {
     "start": "node . 1> build/index.html; open build/index.html"
   },
   "dependencies": {
-    "@diplodoc/tabs-extension": "..",
+    "@diplodoc/html-extension": "file:..",
     "@diplodoc/transform": "*"
   }
 }

package.json

@@ -57,9 +57,7 @@
   "devDependencies": {
     "@diplodoc/eslint-config": "^2.0.0",
     "@diplodoc/prettier-config": "^2.0.0",
-    "@diplodoc/transform": "^4.19.0",
     "@diplodoc/tsconfig": "^1.0.2",
-    "@gravity-ui/uikit": "^6.17.0",
     "@types/github-slugger": "^1.3.0",
     "@types/jest": "^29.5.2",
     "@types/markdown-it": "^13.0.0",

src/common.ts

@@ -0,0 +1,9 @@
+import {HtmlController} from './runtime/HtmlController';
+
+export const GLOBAL_SYMBOL: unique symbol = Symbol.for('diplodocHtml');
+
+declare global {
+    interface Window {
+        [GLOBAL_SYMBOL]: HtmlController;
+    }
+}

src/plugin/transform.ts

@@ -1,6 +1,6 @@
 import MarkdownIt, {PluginSimple} from 'markdown-it';
 
-import {defaultSanitize} from './utils';
+import {addHiddenProperty, defaultSanitize} from './utils';
 import {copyRuntimeFiles} from './copyRuntimeFiles';
 import directivePlugin, {DirectiveBlockHandler} from 'markdown-it-directive';
 import type {MarkdownItWithDirectives} from 'markdown-it-directive';
@@ -37,7 +37,7 @@ export function transform({
     containerClasses = '',
     bundle = true,
     sanitize = defaultSanitize,
-    shouldUseSanitize = true,
+    shouldUseSanitize = false,
     shouldUseIframe = true,
 }: Partial<PluginOptions> = empty) {
     return function html(md: MarkdownIt, options?: TransformOptions) {
@@ -50,6 +50,8 @@ export function transform({
 
             const {env} = state;
 
+            addHiddenProperty(env, 'bundled', new Set<string>());
+
             const tag = shouldUseIframe ? 'iframe' : 'div';
             const token = state.push(TOKEN_TYPE, tag, 0);
             token.block = true;

src/plugin/utils.ts

@@ -1,3 +1,18 @@
 import sanitizeHtml from 'sanitize-html';
 
 export const defaultSanitize = (dirtyHtml: string) => sanitizeHtml(dirtyHtml);
+
+export function addHiddenProperty<
+    B extends Record<string | symbol, unknown>,
+    F extends string | symbol,
+    V,
+>(box: B, field: F, value: V) {
+    if (!(field in box)) {
+        Object.defineProperty(box, field, {
+            enumerable: false,
+            value: value,
+        });
+    }
+
+    return box as B & {[P in F]: V};
+}

src/react/useYfmHtmlThemes.ts

@@ -1,9 +1,9 @@
 import {DependencyList, RefObject, useEffect} from 'react';
 
-import {useThemeValue} from '@gravity-ui/uikit';
+// import {useThemeValue} from '@gravity-ui/uikit';
 
 export function useYfmHtmlThemes(ref: RefObject<HTMLElement>, deps: DependencyList) {
-    const theme = useThemeValue();
+    const theme = 'dark'; // FIXME: debug only
 
     useEffect(() => {
         if (!ref.current) return;

src/runtime/HtmlController.ts

@@ -0,0 +1,11 @@
+export class HtmlController {
+    // @ts-ignore
+    private _document: Document;
+
+    constructor(document: Document) {
+        this._document = document;
+        this._document.addEventListener('click', (event) => {
+            console.log('event', event);
+        });
+    }
+}

src/runtime/index.ts

@@ -0,0 +1,7 @@
+import {GLOBAL_SYMBOL} from '../common';
+import {HtmlController} from './HtmlController';
+import './scss/html.scss';
+
+if (typeof window?.document !== 'undefined' && !window[GLOBAL_SYMBOL]) {
+    window[GLOBAL_SYMBOL] = new HtmlController(document);
+}

src/runtime/scss/html.scss

@@ -0,0 +1,3 @@
+.yfm-html {
+    /* TODO: add some styles */
+}