Feat/yfm html block experiment

demo/.storybook/main.ts

@@ -17,6 +17,10 @@
         name: '@storybook/react-webpack5',
         options: {},
     },
+    // Allow access via the local dev hostname alias (http://md-editor:8888).
+    core: {
+        allowedHosts: ['md-editor'],
+    },
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: [
         '@storybook/preset-scss',
@@ -27,7 +31,7 @@
         check: true,
         reactDocgen: 'react-docgen-typescript',
     },
     webpackFinal: (config) => {
         config.plugins?.push(
             new webpack.DefinePlugin({
                 __VERSION__: `'${pkg.version}-storybook'`,
@@ -37,12 +41,12 @@
             }),
         );
 
         config.resolve ||= {};
         config.resolve.alias ||= {};
         config.resolve.fallback ||= {};
 
         // Node.js polyfills for browser
         config.resolve.fallback = {
             ...config.resolve.fallback,
             fs: false,
             path: require.resolve('path-browserify'),
@@ -50,19 +54,23 @@
             process: require.resolve('process/browser'),
         };
 
         config.ignoreWarnings ||= [];
         config.ignoreWarnings.push(/\.js\.map$/);
         config.module ||= {};
         config.module.rules ||= [];
         config.module.rules.push({
             test: /\.(js|css)\.map$/,
             include: /node_modules/,
             type: 'asset/resource' as const,
             generator: {emit: false},
         });
+        config.module.rules.push({
+            test: /\.html$/,
+            type: 'asset/source' as const,
+        });
 
         config.watchOptions ||= {};
         config.watchOptions.ignored = /node_modules([\\]+|\/)+(?!@gravity-ui\/markdown-editor)/;
 
         return config;
     },

demo/src/components/Playground.tsx

@@ -37,7 +37,9 @@ import {YfmPageConstructorExtension} from '@gravity-ui/markdown-editor-page-cons
 import {wYfmPageConstructorItemData} from '@gravity-ui/markdown-editor-page-constructor-extension/configs';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
+import {htmlBlockTemplates} from '../defaults/html-templates';
 import {getPlugins} from '../defaults/md-plugins';
+import {seedYfmHtmlConstructorTemplates} from '../defaults/yfm-html-constructor';
 import {useLogs} from '../hooks/useLogs';
 import useYfmHtmlBlockStyles from '../hooks/useYfmHtmlBlockStyles';
 import {randomDelay} from '../utils/delay';
@@ -61,6 +63,8 @@ const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig.concat(
     wysiwygToolbarConfigs.wYfmHtmlBlockItemData,
 );
 
+seedYfmHtmlConstructorTemplates();
+
 export type PlaygroundProps = {
     mobile?: boolean;
     initial?: MarkupString;
@@ -236,6 +240,19 @@ export const Playground = memo<PlaygroundProps>((props) => {
                                     storyAdditionalControls?.yfmHtmlBlockAutoSaveEnabled ?? true,
                                 delay: storyAdditionalControls?.yfmHtmlBlockAutoSaveDelay ?? 1000,
                             },
+                            templates: {
+                                items: htmlBlockTemplates,
+                                showButton: true,
+                                allowAdd: true,
+                            },
+                            constructor: {
+                                scopeStyles: true,
+                                templates: {
+                                    showButton: true,
+                                    allowAdd: true,
+                                },
+                            },
+                            editablePreview: true,
                             head: `
                         <base target="_blank" />
                         <style>

demo/src/defaults/html-templates.ts

@@ -0,0 +1,25 @@
+export const htmlBlockTemplates = [
+    {
+        id: 'callout',
+        title: 'Callout',
+        content: `<div style="padding:16px;border-left:4px solid #2563eb;background:#eff6ff;border-radius:8px;">
+  <strong>Heads up</strong>
+  <p style="margin:8px 0 0;">Replace this text with your message.</p>
+</div>`,
+    },
+    {
+        id: 'two-columns',
+        title: 'Two columns',
+        content: `<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
+  <div style="padding:16px;background:#f8fafc;border-radius:8px;">Left</div>
+  <div style="padding:16px;background:#f8fafc;border-radius:8px;">Right</div>
+</div>`,
+    },
+    {
+        id: 'cta-button',
+        title: 'CTA button',
+        content: `<a href="#" style="display:inline-block;padding:12px 20px;background:#2563eb;color:#fff;border-radius:8px;text-decoration:none;font-weight:600;">
+  Get started
+</a>`,
+    },
+];