added transform and react hook

.gitignore

@@ -17,3 +17,4 @@ index.d.ts
 *.d.ts
 example/package-lock.json
 example/build
+example/node_modules

README.md

@@ -144,27 +144,5 @@ Example with some styles:
 You can use the React hook to interact programmatically with the HTML content inside the block.
 
 ```TypeScript
-import React, { useEffect } from 'react'
-import {useDiplodocHtml, HTMLBlock} from '@diplodoc/html-extension/react';
-
-export const App: React.FC = () => {
-    const selectTabHandler = useCallback<UseDiplodocTabsCallback>(
-        (html: HTMLBlock, currentTabId?: string) => {
-            const {group, key} = tab;
-            // Group could be empty
-            if (group) {
-                // ...
-            }
-        },
-        [],
-    );
-
-    const {selectTab, selectTabById} = useDiplodocTabs(selectTabHandler);
-
-    useEffect(() => {
-        selectTab({ group: 'group_1', key: 'my-key' });
-        // selectTabById('my-key-2');
-    }, [selectTab, selectTabById]);
-
-}
+// TODO
 ```

example/README.md

@@ -9,54 +9,51 @@ Then this documentation will be rendered by [@diplodoc/transform](https://github
 
 # Example
 
-{% list tabs group=group_1 %}
-
-- Python {#my-tab}
-
-  About python
-
-- Java
-  - One
-  - Two
-
-- TypeScript
-  1. One
-  2. Two
-
-- ipv4
-
-{% endlist %}
-
-{% list tabs group=group_1 %}
-
-- Python
-
-  About python
-
-- Java
-  - One
-  - Two
-
-- TypeScript
-  1. One
-  2. Two
-
-{% endlist %}
-
-{% list tabs %}
-
-- Python
-
-  About python
-
-- Java
-  - One
-  - Two
-
-- TypeScript
-  1. One
-  2. Two
-
-{% endlist %}
-
-After tabs
+::: html
+<div>Simple HTML code</div>
+:::
+
+## Markdown header
+Markdown text
+
+::: html
+<div>Complex HTML code</div>
+<style>
+/*****************/
+/***  header   ***/
+/*****************/
+.header {
+    background: #EEE;
+    border-radius: 16px;
+    font-size: 40px;
+    line-height: 40px;
+    padding:16px;
+    box-sizing: border-box;
+    color: #363E45;
+    height:335px;
+}
+.text_header { font-size:16px; line-height:120%; font-weight:500; }
+
+</style>
+
+<!----------------->
+<!--   header   --->
+<!----------------->
+<table width="100%">
+    <tr>
+        <td width="74%" class="header">
+            <div style="width:720px">
+                <strong>Header</strong>
+                <div class="text_header" style="width:520px">Some text here</div>
+            </div>
+        </td>
+        <td width="1%" style="padding-left:6px"></td>
+        <td width="25%" style="min-width:300px"></td>
+    </tr>
+</table>
+
+:::
+
+
+
+After html text

jest.config.js

@@ -0,0 +1,9 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+    preset: 'ts-jest',
+    transform: {
+        '^.+\\.(j|t)s?$': ['ts-jest', {tsconfig: '<rootDir>/test/tsconfig.json'}],
+    },
+    transformIgnorePatterns: [],
+    testEnvironment: 'jsdom',
+};