From d79c91b806ab445e23df1904e3195df72450f245 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Sun, 14 Jun 2026 01:41:05 +0200
Subject: [PATCH 1/2] feat(YfmHtmlBlock): add HTML templates button

Add a templates button inside the YfmHtmlBlock node that opens a popup
with a searchable list of templates and an "add" action.

- templates are merged from plugin options and localStorage (localStorage
  overrides by id); adding writes only to localStorage, never to markup
- the add form accepts several <template id title> blocks at once
- selecting a template overwrites the block srcdoc
- new `templates` plugin option: { items, showButton, allowAdd }

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 demo/src/components/Playground.tsx            |   6 +
 demo/src/defaults/html-templates.ts           |  25 ++++
 .../YfmHtmlBlockNodeView/TemplatesPopup.scss  |  26 ++++
 .../YfmHtmlBlockNodeView/TemplatesPopup.tsx   | 137 ++++++++++++++++++
 .../YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx |  58 +++++++-
 .../YfmHtmlBlockNodeView/const.ts             |   4 +
 .../additional/YfmHtmlBlock/index.ts          |   2 +
 .../YfmHtmlBlock/templates/index.ts           |   8 +
 .../YfmHtmlBlock/templates/parse.test.ts      |  49 +++++++
 .../YfmHtmlBlock/templates/parse.ts           |  31 ++++
 .../YfmHtmlBlock/templates/storage.test.ts    |  54 +++++++
 .../YfmHtmlBlock/templates/storage.ts         |  58 ++++++++
 .../YfmHtmlBlock/templates/types.ts           |  15 ++
 .../editor/src/i18n/yfm-html-block/en.json    |   9 ++
 .../editor/src/i18n/yfm-html-block/index.ts   |   8 +
 .../editor/src/i18n/yfm-html-block/ru.json    |   9 ++
 16 files changed, 494 insertions(+), 5 deletions(-)
 create mode 100644 demo/src/defaults/html-templates.ts
 create mode 100644 packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss
 create mode 100644 packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.tsx
 create mode 100644 packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/const.ts
 create mode 100644 packages/editor/src/extensions/additional/YfmHtmlBlock/templates/index.ts
 create mode 100644 packages/editor/src/extensions/additional/YfmHtmlBlock/templates/parse.test.ts
 create mode 100644 packages/editor/src/extensions/additional/YfmHtmlBlock/templates/parse.ts
 create mode 100644 packages/editor/src/extensions/additional/YfmHtmlBlock/templates/storage.test.ts
 create mode 100644 packages/editor/src/extensions/additional/YfmHtmlBlock/templates/storage.ts
 create mode 100644 packages/editor/src/extensions/additional/YfmHtmlBlock/templates/types.ts
 create mode 100644 packages/editor/src/i18n/yfm-html-block/en.json
 create mode 100644 packages/editor/src/i18n/yfm-html-block/index.ts
 create mode 100644 packages/editor/src/i18n/yfm-html-block/ru.json

diff --git a/demo/src/components/Playground.tsx b/demo/src/components/Playground.tsx
index 9fec366ed..cbc294832 100644
--- a/demo/src/components/Playground.tsx
+++ b/demo/src/components/Playground.tsx
@@ -37,6 +37,7 @@ 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 {useLogs} from '../hooks/useLogs';
 import useYfmHtmlBlockStyles from '../hooks/useYfmHtmlBlockStyles';
@@ -236,6 +237,11 @@ export const Playground = memo<PlaygroundProps>((props) => {
                                     storyAdditionalControls?.yfmHtmlBlockAutoSaveEnabled ?? true,
                                 delay: storyAdditionalControls?.yfmHtmlBlockAutoSaveDelay ?? 1000,
                             },
+                            templates: {
+                                items: htmlBlockTemplates,
+                                showButton: true,
+                                allowAdd: true,
+                            },
                             head: `
                         <base target="_blank" />
                         <style>
diff --git a/demo/src/defaults/html-templates.ts b/demo/src/defaults/html-templates.ts
new file mode 100644
index 000000000..11942c2a8
--- /dev/null
+++ b/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>`,
+    },
+];
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss
new file mode 100644
index 000000000..3bb299ca9
--- /dev/null
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss
@@ -0,0 +1,26 @@
+.g-md-yfm-html-block-templates {
+    display: flex;
+    flex-direction: column;
+
+    min-width: 240px;
+    max-width: 360px;
+
+    &__search {
+        padding: 8px 8px 4px;
+    }
+
+    &__editor {
+        display: flex;
+        flex-direction: column;
+
+        gap: 8px;
+        padding: 8px;
+    }
+
+    &__controls {
+        display: flex;
+        justify-content: end;
+
+        gap: 8px;
+    }
+}
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.tsx
new file mode 100644
index 000000000..03745f10f
--- /dev/null
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.tsx
@@ -0,0 +1,137 @@
+import {useMemo, useState} from 'react';
+
+import {Plus} from '@gravity-ui/icons';
+import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
+
+import {cn} from 'src/classname';
+import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
+import {i18n} from 'src/i18n/yfm-html-block';
+
+import {type HtmlTemplate, parseTemplates, saveTemplates} from '../templates';
+
+import {STOP_EVENT_CLASSNAME} from './const';
+
+import './TemplatesPopup.scss';
+
+const b = cn('yfm-html-block-templates');
+const stop = STOP_EVENT_CLASSNAME;
+
+interface TemplatesPopupProps {
+    anchor: HTMLElement | null;
+    open: boolean;
+    templates: HtmlTemplate[];
+    allowAdd: boolean;
+    onClose: () => void;
+    onApply: (template: HtmlTemplate) => void;
+    onAdded: (templates: HtmlTemplate[]) => void;
+}
+
+export const TemplatesPopup: React.FC<TemplatesPopupProps> = ({
+    anchor,
+    open,
+    templates,
+    allowAdd,
+    onClose,
+    onApply,
+    onAdded,
+}) => {
+    const [adding, setAdding] = useState(false);
+    const [input, setInput] = useState('');
+    const [filter, setFilter] = useState('');
+
+    const filtered = useMemo(() => {
+        const query = filter.trim().toLowerCase();
+        if (!query) return templates;
+        return templates.filter((t) => t.title.toLowerCase().includes(query));
+    }, [templates, filter]);
+
+    const close = () => {
+        setAdding(false);
+        setInput('');
+        setFilter('');
+        onClose();
+    };
+
+    const handleSave = () => {
+        const parsed = parseTemplates(input);
+        if (parsed.length) onAdded(saveTemplates(parsed));
+        setInput('');
+        setAdding(false);
+    };
+
+    return (
+        <Popup anchorElement={anchor} open={open} onOpenChange={close} placement="bottom-end">
+            <div className={b(null, [stop])}>
+                {adding ? (
+                    <div className={b('editor')}>
+                        <TextArea
+                            controlProps={{className: stop}}
+                            value={input}
+                            onUpdate={setInput}
+                            placeholder={i18n('templates_input_placeholder')}
+                            minRows={6}
+                            autoFocus
+                        />
+                        <div className={b('controls')}>
+                            <Button view="flat" className={stop} onClick={() => setAdding(false)}>
+                                <span className={stop}>{i18n('cancel')}</span>
+                            </Button>
+                            <Button
+                                view="action"
+                                className={stop}
+                                disabled={!input.trim()}
+                                onClick={handleSave}
+                            >
+                                <span className={stop}>{i18n('save')}</span>
+                            </Button>
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        {templates.length > 0 && (
+                            <div className={b('search')}>
+                                <TextInput
+                                    className={stop}
+                                    controlProps={{className: stop}}
+                                    size="s"
+                                    value={filter}
+                                    onUpdate={setFilter}
+                                    placeholder={i18n('search_templates')}
+                                    autoFocus
+                                />
+                            </div>
+                        )}
+                        <Menu className={stop}>
+                            {allowAdd && (
+                                <Menu.Item
+                                    className={stop}
+                                    iconStart={<Icon data={Plus} />}
+                                    onClick={() => setAdding(true)}
+                                >
+                                    {i18n('add_template')}
+                                </Menu.Item>
+                            )}
+                            {filtered.map((template) => (
+                                <Menu.Item
+                                    key={template.id}
+                                    className={stop}
+                                    onClick={() => {
+                                        onApply(template);
+                                        close();
+                                    }}
+                                >
+                                    {template.title}
+                                </Menu.Item>
+                            ))}
+                            {filtered.length === 0 && (
+                                <Menu.Item disabled className={stop}>
+                                    {i18n('templates_empty')}
+                                </Menu.Item>
+                            )}
+                        </Menu>
+                    </>
+                )}
+            </div>
+        </Popup>
+    );
+};
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx
index f360bd098..8944ca631 100644
--- a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx
@@ -2,15 +2,15 @@ import {useEffect, useMemo, useRef, useState} from 'react';
 
 import {getStyles} from '@diplodoc/html-extension';
 import type {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';
-import {Ellipsis as DotsIcon, Eye} from '@gravity-ui/icons';
+import {Ellipsis as DotsIcon, Eye, LayoutHeaderColumns} from '@gravity-ui/icons';
 import {Button, Icon, Label, Menu, Popup} from '@gravity-ui/uikit';
 import type {Node} from 'prosemirror-model';
 import type {EditorView} from 'prosemirror-view';
 
-import {cn} from 'src/classname';
 import {SharedStateKey} from 'src/extensions/behavior/SharedState';
 import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
 import {i18n} from 'src/i18n/common';
+import {i18n as i18nTemplates} from 'src/i18n/yfm-html-block';
 import {debounce} from 'src/lodash';
 import {useAutoSave, useBooleanState, useElementState} from 'src/react-utils/hooks';
 import {useSharedEditingState} from 'src/react-utils/useSharedEditingState';
@@ -18,12 +18,15 @@ import {removeNode} from 'src/utils/remove-node';
 
 import {YfmHtmlBlockConsts} from '../YfmHtmlBlockSpecs/const';
 import type {YfmHtmlBlockOptions} from '../index';
+import {type HtmlTemplate, mergeTemplatesById, readStoredTemplates} from '../templates';
 import type {YfmHtmlBlockEntitySharedState} from '../types';
 
+import {TemplatesPopup} from './TemplatesPopup';
+import {STOP_EVENT_CLASSNAME, cnYfmHtmlBlock} from './const';
+
 import './YfmHtmlBlock.scss';
 
-export const cnYfmHtmlBlock = cn('yfm-html-block');
-export const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';
+export {STOP_EVENT_CLASSNAME, cnYfmHtmlBlock} from './const';
 
 const b = cnYfmHtmlBlock;
 
@@ -245,7 +248,14 @@ export const YfmHtmlBlockView: React.FC<{
     options: YfmHtmlBlockOptions;
     view: EditorView;
 }> = ({onChange, node, getPos, view, options}) => {
-    const {useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = ''} = options;
+    const {
+        useConfig,
+        sanitize,
+        styles,
+        baseTarget = '_parent',
+        head: headContent = '',
+        templates,
+    } = options;
     const entityId: string = node.attrs[YfmHtmlBlockConsts.NodeAttrs.EntityId];
     const entityKey = useMemo(
         () => SharedStateKey.define<YfmHtmlBlockEntitySharedState>({name: entityId}),
@@ -258,6 +268,22 @@ export const YfmHtmlBlockView: React.FC<{
     const [menuOpen, _openMenu, closeMenu, toggleMenuOpen] = useBooleanState(false);
     const [anchorElement, setAnchorElement] = useElementState();
 
+    const allowAdd = Boolean(templates?.allowAdd);
+    const [storedTemplates, setStoredTemplates] = useState<HtmlTemplate[]>(readStoredTemplates);
+    const effectiveTemplates = useMemo(
+        () => mergeTemplatesById(templates?.items ?? [], storedTemplates),
+        [templates?.items, storedTemplates],
+    );
+    const showTemplatesButton =
+        Boolean(templates?.showButton) && (allowAdd || effectiveTemplates.length > 0);
+    const [templatesOpen, , closeTemplates, toggleTemplatesOpen] = useBooleanState(false);
+    const [templatesAnchor, setTemplatesAnchor] = useElementState();
+
+    const applyTemplate = (template: HtmlTemplate) => {
+        onChange({[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: template.content});
+        closeTemplates();
+    };
+
     if (editing) {
         return (
             <CodeEditMode
@@ -296,6 +322,28 @@ export const YfmHtmlBlockView: React.FC<{
             <YfmHtmlBlockPreview html={resultHtml} onClick={setEditing} config={config} />
 
             <div className={b('menu')}>
+                {showTemplatesButton && (
+                    <>
+                        <Button
+                            onClick={toggleTemplatesOpen}
+                            ref={setTemplatesAnchor}
+                            size="s"
+                            className={STOP_EVENT_CLASSNAME}
+                            aria-label={i18nTemplates('templates')}
+                        >
+                            <Icon data={LayoutHeaderColumns} className={STOP_EVENT_CLASSNAME} />
+                        </Button>
+                        <TemplatesPopup
+                            anchor={templatesAnchor}
+                            open={templatesOpen}
+                            templates={effectiveTemplates}
+                            allowAdd={allowAdd}
+                            onClose={closeTemplates}
+                            onApply={applyTemplate}
+                            onAdded={setStoredTemplates}
+                        />
+                    </>
+                )}
                 <Button
                     onClick={toggleMenuOpen}
                     ref={setAnchorElement}
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/const.ts b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/const.ts
new file mode 100644
index 000000000..19dbe7f17
--- /dev/null
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/const.ts
@@ -0,0 +1,4 @@
+import {cn} from 'src/classname';
+
+export const cnYfmHtmlBlock = cn('yfm-html-block');
+export const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/index.ts b/packages/editor/src/extensions/additional/YfmHtmlBlock/index.ts
index 06c582471..43df87142 100644
--- a/packages/editor/src/extensions/additional/YfmHtmlBlock/index.ts
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/index.ts
@@ -7,6 +7,7 @@ import {WYfmHtmlBlockNodeView} from './YfmHtmlBlockNodeView';
 import {YfmHtmlBlockSpecs} from './YfmHtmlBlockSpecs';
 import {YfmHtmlBlockAction} from './YfmHtmlBlockSpecs/const';
 import {addYfmHtmlBlock} from './actions';
+import type {YfmHtmlBlockTemplatesOptions} from './templates';
 
 export interface YfmHtmlBlockOptions extends Omit<
     PluginOptions,
@@ -17,6 +18,7 @@ export interface YfmHtmlBlockOptions extends Omit<
         enabled: boolean;
         delay?: number; // по умолчанию 1000ms
     };
+    templates?: YfmHtmlBlockTemplatesOptions;
 }
 
 export const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions> = (
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/index.ts b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/index.ts
new file mode 100644
index 000000000..70eb05ff5
--- /dev/null
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/index.ts
@@ -0,0 +1,8 @@
+export type {HtmlTemplate, YfmHtmlBlockTemplatesOptions} from './types';
+export {parseTemplates} from './parse';
+export {
+    YFM_HTML_BLOCK_TEMPLATES_STORAGE_KEY,
+    mergeTemplatesById,
+    readStoredTemplates,
+    saveTemplates,
+} from './storage';
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/parse.test.ts b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/parse.test.ts
new file mode 100644
index 000000000..84b700d8f
--- /dev/null
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/parse.test.ts
@@ -0,0 +1,49 @@
+import {parseTemplates} from './parse';
+
+describe('parseTemplates', () => {
+    it('parses a single template with id and title', () => {
+        const result = parseTemplates(
+            '<template id="hero" title="Hero block"><div>Hello</div></template>',
+        );
+
+        expect(result).toEqual([{id: 'hero', title: 'Hero block', content: '<div>Hello</div>'}]);
+    });
+
+    it('parses multiple templates at once', () => {
+        const result = parseTemplates(`
+            <template id="a" title="First"><p>1</p></template>
+            <template id="b" title="Second"><p>2</p></template>
+        `);
+
+        expect(result).toHaveLength(2);
+        expect(result[0]).toMatchObject({id: 'a', title: 'First', content: '<p>1</p>'});
+        expect(result[1]).toMatchObject({id: 'b', title: 'Second', content: '<p>2</p>'});
+    });
+
+    it('falls back title to id when title is missing', () => {
+        const [template] = parseTemplates('<template id="only-id"><span>x</span></template>');
+
+        expect(template.id).toBe('only-id');
+        expect(template.title).toBe('only-id');
+    });
+
+    it('generates an id when it is missing', () => {
+        const [template] = parseTemplates('<template title="No id"><span>x</span></template>');
+
+        expect(template.id).toBeTruthy();
+        expect(template.title).toBe('No id');
+    });
+
+    it('treats input without template tags as a single template', () => {
+        const result = parseTemplates('<div class="card">card</div>');
+
+        expect(result).toHaveLength(1);
+        expect(result[0].content).toBe('<div class="card">card</div>');
+        expect(result[0].id).toBeTruthy();
+    });
+
+    it('returns an empty array for blank input', () => {
+        expect(parseTemplates('   ')).toEqual([]);
+        expect(parseTemplates('')).toEqual([]);
+    });
+});
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/parse.ts b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/parse.ts
new file mode 100644
index 000000000..ab1d73a6d
--- /dev/null
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/parse.ts
@@ -0,0 +1,31 @@
+import {v4 as uuidv4} from 'uuid';
+
+import type {HtmlTemplate} from './types';
+
+const genId = () => 'yfm-html-template-' + uuidv4();
+
+/**
+ * Parses one or more `<template id="..." title="...">…</template>` blocks.
+ * When the input has no `<template>` tag, the whole string is treated as a single template.
+ */
+export function parseTemplates(input: string): HtmlTemplate[] {
+    const value = input.trim();
+    if (!value) return [];
+
+    if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') {
+        return [{id: genId(), title: genId(), content: value}];
+    }
+
+    const doc = new DOMParser().parseFromString(value, 'text/html');
+    const templates = Array.from(doc.querySelectorAll('template'));
+
+    if (templates.length === 0) {
+        return [{id: genId(), title: value.slice(0, 40), content: value}];
+    }
+
+    return templates.map((el) => {
+        const id = el.getAttribute('id')?.trim() || genId();
+        const title = el.getAttribute('title')?.trim() || id;
+        return {id, title, content: el.innerHTML.trim()};
+    });
+}
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/storage.test.ts b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/storage.test.ts
new file mode 100644
index 000000000..a89aeebf5
--- /dev/null
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/storage.test.ts
@@ -0,0 +1,54 @@
+import {
+    YFM_HTML_BLOCK_TEMPLATES_STORAGE_KEY,
+    mergeTemplatesById,
+    readStoredTemplates,
+    saveTemplates,
+} from './storage';
+import type {HtmlTemplate} from './types';
+
+const tpl = (id: string, title = id, content = `<div>${id}</div>`): HtmlTemplate => ({
+    id,
+    title,
+    content,
+});
+
+beforeEach(() => {
+    window.localStorage.clear();
+});
+
+describe('mergeTemplatesById', () => {
+    it('keeps order and overrides duplicates with the later source', () => {
+        const result = mergeTemplatesById([tpl('a', 'option a'), tpl('b')], [tpl('a', 'stored a')]);
+
+        expect(result).toEqual([tpl('a', 'stored a'), tpl('b')]);
+    });
+});
+
+describe('readStoredTemplates', () => {
+    it('returns an empty array when nothing is stored', () => {
+        expect(readStoredTemplates()).toEqual([]);
+    });
+
+    it('ignores malformed json', () => {
+        window.localStorage.setItem(YFM_HTML_BLOCK_TEMPLATES_STORAGE_KEY, '{not json');
+        expect(readStoredTemplates()).toEqual([]);
+    });
+
+    it('filters out entries with the wrong shape', () => {
+        window.localStorage.setItem(
+            YFM_HTML_BLOCK_TEMPLATES_STORAGE_KEY,
+            JSON.stringify([tpl('a'), {id: 'b'}, 42]),
+        );
+        expect(readStoredTemplates()).toEqual([tpl('a')]);
+    });
+});
+
+describe('saveTemplates', () => {
+    it('persists templates and merges by id across calls', () => {
+        saveTemplates([tpl('a', 'first')]);
+        const result = saveTemplates([tpl('a', 'second'), tpl('b')]);
+
+        expect(result).toEqual([tpl('a', 'second'), tpl('b')]);
+        expect(readStoredTemplates()).toEqual([tpl('a', 'second'), tpl('b')]);
+    });
+});
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/storage.ts b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/storage.ts
new file mode 100644
index 000000000..a487494c5
--- /dev/null
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/storage.ts
@@ -0,0 +1,58 @@
+import type {HtmlTemplate} from './types';
+
+export const YFM_HTML_BLOCK_TEMPLATES_STORAGE_KEY = 'gravity-md-editor:yfm-html-block-templates';
+
+const isHtmlTemplate = (value: unknown): value is HtmlTemplate =>
+    typeof value === 'object' &&
+    value !== null &&
+    typeof (value as HtmlTemplate).id === 'string' &&
+    typeof (value as HtmlTemplate).title === 'string' &&
+    typeof (value as HtmlTemplate).content === 'string';
+
+const getStorage = (): Storage | null => {
+    if (typeof window === 'undefined') return null;
+    try {
+        return window.localStorage;
+    } catch {
+        return null;
+    }
+};
+
+export function readStoredTemplates(): HtmlTemplate[] {
+    const storage = getStorage();
+    if (!storage) return [];
+
+    try {
+        const raw = storage.getItem(YFM_HTML_BLOCK_TEMPLATES_STORAGE_KEY);
+        if (!raw) return [];
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed.filter(isHtmlTemplate) : [];
+    } catch {
+        return [];
+    }
+}
+
+/** Merges `next` into already stored templates by id and persists the result. */
+export function saveTemplates(next: HtmlTemplate[]): HtmlTemplate[] {
+    const merged = mergeTemplatesById(readStoredTemplates(), next);
+
+    const storage = getStorage();
+    if (storage) {
+        try {
+            storage.setItem(YFM_HTML_BLOCK_TEMPLATES_STORAGE_KEY, JSON.stringify(merged));
+        } catch {
+            // storage may be full or unavailable; keep the in-memory result
+        }
+    }
+
+    return merged;
+}
+
+/** Later templates override earlier ones with the same id; order is preserved. */
+export function mergeTemplatesById(...sources: HtmlTemplate[][]): HtmlTemplate[] {
+    const byId = new Map<string, HtmlTemplate>();
+    for (const template of sources.flat()) {
+        byId.set(template.id, template);
+    }
+    return [...byId.values()];
+}
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/types.ts b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/types.ts
new file mode 100644
index 000000000..b7e383f0d
--- /dev/null
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/templates/types.ts
@@ -0,0 +1,15 @@
+export interface HtmlTemplate {
+    id: string;
+    title: string;
+    /** HTML inserted into the block's srcdoc */
+    content: string;
+}
+
+export interface YfmHtmlBlockTemplatesOptions {
+    /** Templates provided via plugin options; read-only source */
+    items?: HtmlTemplate[];
+    /** Show the templates button inside the block */
+    showButton?: boolean;
+    /** Show the "add template" button (writes to localStorage) */
+    allowAdd?: boolean;
+}
diff --git a/packages/editor/src/i18n/yfm-html-block/en.json b/packages/editor/src/i18n/yfm-html-block/en.json
new file mode 100644
index 000000000..d782008ce
--- /dev/null
+++ b/packages/editor/src/i18n/yfm-html-block/en.json
@@ -0,0 +1,9 @@
+{
+  "templates": "HTML templates",
+  "add_template": "Add",
+  "search_templates": "Search by name",
+  "templates_empty": "No templates",
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\">\n  <div>Your HTML</div>\n</template>",
+  "save": "Save",
+  "cancel": "Cancel"
+}
diff --git a/packages/editor/src/i18n/yfm-html-block/index.ts b/packages/editor/src/i18n/yfm-html-block/index.ts
new file mode 100644
index 000000000..c3766e48a
--- /dev/null
+++ b/packages/editor/src/i18n/yfm-html-block/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const KEYSET = 'yfm-html-block';
+
+export const i18n = registerKeyset(KEYSET, {en, ru});
diff --git a/packages/editor/src/i18n/yfm-html-block/ru.json b/packages/editor/src/i18n/yfm-html-block/ru.json
new file mode 100644
index 000000000..c3fa7c5d7
--- /dev/null
+++ b/packages/editor/src/i18n/yfm-html-block/ru.json
@@ -0,0 +1,9 @@
+{
+  "templates": "HTML-шаблоны",
+  "add_template": "Добавить",
+  "search_templates": "Поиск по названию",
+  "templates_empty": "Нет шаблонов",
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\">\n  <div>Ваш HTML</div>\n</template>",
+  "save": "Сохранить",
+  "cancel": "Отмена"
+}

From fccec4650b23460eed4662535ff79edaddaa3e26 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Sun, 14 Jun 2026 19:19:53 +0200
Subject: [PATCH 2/2] feat(YfmHtmlBlock): add editable preview mode

---
 demo/src/components/Playground.tsx            |  1 +
 .../YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx | 76 ++++++++++++++++---
 .../additional/YfmHtmlBlock/index.ts          |  7 ++
 3 files changed, 75 insertions(+), 9 deletions(-)

diff --git a/demo/src/components/Playground.tsx b/demo/src/components/Playground.tsx
index cbc294832..90d7c0d75 100644
--- a/demo/src/components/Playground.tsx
+++ b/demo/src/components/Playground.tsx
@@ -242,6 +242,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
                                 showButton: true,
                                 allowAdd: true,
                             },
+                            editablePreview: true,
                             head: `
                         <base target="_blank" />
                         <style>
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx
index 8944ca631..6317d3bd5 100644
--- a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx
@@ -34,6 +34,8 @@ interface YfmHtmlBlockViewProps {
     html: string;
     onClick: () => void;
     config?: IHTMLIFrameElementConfig;
+    editablePreview?: boolean;
+    onInlineSave?: (innerHtml: string) => void;
 }
 
 export function generateID() {
@@ -55,11 +57,18 @@ const createLinkCLickHandler = (value: Element, document: Document) => (event: E
     }
 };
 
-const YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onClick, config}) => {
+const YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({
+    html,
+    onClick,
+    config,
+    editablePreview,
+    onInlineSave,
+}) => {
     const ref = useRef<HTMLIFrameElement>(null);
     const styles = useRef<Record<string, string>>({});
     const classNames = useRef<string[]>([]);
     const resizeConfig = useRef<Record<string, number>>({});
+    const isInlineEditing = useRef(false);
 
     const [height, setHeight] = useState('100%');
 
@@ -68,19 +77,53 @@ const YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onClick, co
         setClassNames(config?.classNames);
     }, [config, ref.current?.contentWindow?.document?.body]);
 
+    const enterInlineEdit = () => {
+        const body = ref.current?.contentWindow?.document.body;
+        if (!body) return;
+        isInlineEditing.current = true;
+        body.contentEditable = 'true';
+        body.style.cursor = 'text';
+        body.focus();
+    };
+
+    const handleBodyBlur = () => {
+        const body = ref.current?.contentWindow?.document.body;
+        if (!body || !isInlineEditing.current) return;
+        isInlineEditing.current = false;
+        body.contentEditable = 'false';
+        body.style.removeProperty('cursor');
+        onInlineSave?.(body.innerHTML);
+    };
+
+    const handleDblClick = () => {
+        if (editablePreview) {
+            enterInlineEdit();
+        } else {
+            onClick();
+        }
+    };
+
     const handleLoadIFrame = () => {
         const contentWindow = ref.current?.contentWindow;
 
+        // fresh document after reload: not editing yet
+        isInlineEditing.current = false;
         handleResizeIFrame();
 
         if (contentWindow) {
             const frameDocument = contentWindow.document;
-            frameDocument.addEventListener('dblclick', () => {
-                onClick();
-            });
+            frameDocument.addEventListener('dblclick', handleDblClick);
+            // blur does not bubble; capture catches focus leaving the body
+            frameDocument.body?.addEventListener('blur', handleBodyBlur, true);
         }
     };
 
+    const handleUnloadIFrame = () => {
+        const frameDocument = ref.current?.contentWindow?.document;
+        frameDocument?.removeEventListener('dblclick', handleDblClick);
+        frameDocument?.body?.removeEventListener('blur', handleBodyBlur, true);
+    };
+
     const handleResizeIFrame = () => {
         if (ref.current) {
             const contentWindow = ref.current?.contentWindow;
@@ -162,11 +205,13 @@ const YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onClick, co
     };
 
     useEffect(() => {
-        ref.current?.addEventListener('load', handleLoadIFrame);
-        ref.current?.addEventListener('load', createAnchorLinkHandlers('add'));
+        const iframe = ref.current;
+        iframe?.addEventListener('load', handleLoadIFrame);
+        iframe?.addEventListener('load', createAnchorLinkHandlers('add'));
         return () => {
-            ref.current?.removeEventListener('load', handleLoadIFrame);
-            ref.current?.removeEventListener('load', createAnchorLinkHandlers('remove'));
+            handleUnloadIFrame();
+            iframe?.removeEventListener('load', handleLoadIFrame);
+            iframe?.removeEventListener('load', createAnchorLinkHandlers('remove'));
         };
     }, [html]);
 
@@ -255,6 +300,7 @@ export const YfmHtmlBlockView: React.FC<{
         baseTarget = '_parent',
         head: headContent = '',
         templates,
+        editablePreview,
     } = options;
     const entityId: string = node.attrs[YfmHtmlBlockConsts.NodeAttrs.EntityId];
     const entityKey = useMemo(
@@ -284,6 +330,12 @@ export const YfmHtmlBlockView: React.FC<{
         closeTemplates();
     };
 
+    const handleInlineSave = (innerHtml: string) => {
+        const current = node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc] ?? '';
+        if (innerHtml === current) return;
+        onChange({[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: innerHtml});
+    };
+
     if (editing) {
         return (
             <CodeEditMode
@@ -319,7 +371,13 @@ export const YfmHtmlBlockView: React.FC<{
             <Label className={b('label')} icon={<Icon size={16} data={Eye} />}>
                 {i18n('preview')}
             </Label>
-            <YfmHtmlBlockPreview html={resultHtml} onClick={setEditing} config={config} />
+            <YfmHtmlBlockPreview
+                html={resultHtml}
+                onClick={setEditing}
+                config={config}
+                editablePreview={editablePreview}
+                onInlineSave={handleInlineSave}
+            />
 
             <div className={b('menu')}>
                 {showTemplatesButton && (
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/index.ts b/packages/editor/src/extensions/additional/YfmHtmlBlock/index.ts
index 43df87142..33ed36d97 100644
--- a/packages/editor/src/extensions/additional/YfmHtmlBlock/index.ts
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/index.ts
@@ -19,6 +19,13 @@ export interface YfmHtmlBlockOptions extends Omit<
         delay?: number; // по умолчанию 1000ms
     };
     templates?: YfmHtmlBlockTemplatesOptions;
+    /**
+     * Double-clicking the preview edits text inline inside the iframe instead of
+     * opening the raw HTML code editor. The code editor stays reachable via the
+     * "Edit" menu item.
+     * @default false
+     */
+    editablePreview?: boolean;
 }
 
 export const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions> = (