@gravity-ui/markdown-editor 13.4.2 → 13.5.1

package/build/cjs/bundle/Editor.d.ts

@@ -19,7 +19,7 @@ export declare type ToolbarActionData = {
         [key: string]: any;
     };
 };
-interface EventMap {
+export interface EventMap {
     change: null;
     cancel: null;
     submit: null;
@@ -70,4 +70,3 @@ export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'li
     preset: EditorPreset;
     extraMarkupExtensions?: CodemirrorExtension[];
 };
-export {};

package/build/cjs/bundle/Editor.js

@@ -155,6 +155,7 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
                 uploadHandler: this.fileUploadHandler,
                 needImgDimms: this.needToSetDimensionsForUploadedImages,
                 extraMarkupExtensions: tslib_1.__classPrivateFieldGet(this, _EditorImpl_extraMarkupExtensions, "f"),
+                receiver: this,
             })), "f");
         }
         return tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f");

package/build/cjs/bundle/MarkdownEditorView.js

@@ -113,6 +113,7 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
                     react_1.default.createElement(SplitModeView_1.SplitModeView, { editor: editor, ref: splitModeViewWrapperRef })))))));
 });
 exports.MarkdownEditorView.displayName = 'MarkdownEditorView';
+const MarkupSearchAnchor = ({ mode }) => (react_1.default.createElement(react_1.default.Fragment, null, mode === 'markup' && react_1.default.createElement("div", { className: "g-md-search-anchor" })));
 function Settings(props) {
     const wrapperRef = (0, react_1.useRef)(null);
     const isSticky = (0, useSticky_1.useSticky)(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;
@@ -121,7 +122,8 @@ function Settings(props) {
                 withToolbar: props.toolbarVisibility,
                 stickyActive: isSticky,
             }) },
-            react_1.default.createElement(settings_1.EditorSettings, Object.assign({}, props)))));
+            react_1.default.createElement(settings_1.EditorSettings, Object.assign({}, props)),
+            react_1.default.createElement(MarkupSearchAnchor, Object.assign({}, props)))));
 }
 function isPreviewKeyDown(e) {
     const modKey = (0, platform_1.isMac)() ? e.metaKey : e.ctrlKey;

package/build/cjs/extensions/markdown/Link/plugins/LinkTooltipPlugin/TooltipView.js

@@ -6,14 +6,14 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const TextInput_1 = require("../../../../../forms/TextInput");
 const UrlInputRow_1 = require("../../../../../forms/UrlInputRow");
 const base_1 = tslib_1.__importDefault(require("../../../../../forms/base"));
-const utils_1 = require("../../../../../forms/utils");
 const forms_1 = require("../../../../../i18n/forms");
+const handlers_1 = require("../../../../../utils/handlers");
 exports.LinkForm = react_1.default.memo(function LinkForm({ href, autoFocus, onChange, onCancel, }) {
     const [url, setUrl] = react_1.default.useState(href);
     const handleSubmit = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange({ href: url });
     };
-    const inputEnterKeyHandler = (0, utils_1.enterKeyHandler)(handleSubmit);
+    const inputEnterKeyHandler = (0, handlers_1.enterKeyHandler)(handleSubmit);
     return (react_1.default.createElement(base_1.default.Form, null,
         react_1.default.createElement(base_1.default.Layout, null,
             react_1.default.createElement(base_1.default.Row, { label: (0, forms_1.i18n)('common_link'), help: (0, forms_1.i18n)('link_url_help'), control: react_1.default.createElement(UrlInputRow_1.UrlInputRow, { href: url, input: react_1.default.createElement(TextInput_1.TextInputFixed, { size: "s", hasClear: true, view: "normal", value: url, onUpdate: setUrl, placeholder: "https://", autoFocus: autoFocus, onKeyPress: inputEnterKeyHandler }) }) })),

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/ImageForm.js

@@ -8,9 +8,9 @@ const is_number_1 = tslib_1.__importDefault(require("is-number"));
 const classname_1 = require("../../../../../../classname");
 const base_1 = tslib_1.__importDefault(require("../../../../../../forms/base"));
 const components_1 = require("../../../../../../forms/components");
-const utils_1 = require("../../../../../../forms/utils");
 const forms_1 = require("../../../../../../i18n/forms");
 const useAutoFocus_1 = require("../../../../../../react-utils/useAutoFocus");
+const handlers_1 = require("../../../../../../utils/handlers");
 const markdown_1 = require("../../../../../markdown");
 const specs_1 = require("../../../../../specs");
 const b = (0, classname_1.cn)('image-tooltip-form');
@@ -38,7 +38,7 @@ const ImageForm = ({ node, updateAttributes, view, unsetEdit, dom }) => {
     const linkRef = react_1.default.useRef(null);
     const imageNameRef = react_1.default.useRef(null);
     (0, useAutoFocus_1.useAutoFocus)(link ? linkRef : imageNameRef);
-    const inputEnterKeyHandler = (0, utils_1.enterKeyHandler)(handleSubmit);
+    const inputEnterKeyHandler = (0, handlers_1.enterKeyHandler)(handleSubmit);
     return (react_1.default.createElement(uikit_1.Popup, { open: true, anchorRef: dom, placement: ['bottom-start', 'top-start', 'bottom-end', 'top-end'], onOutsideClick: unsetEdit },
         react_1.default.createElement(base_1.default.Form, { className: b() },
             react_1.default.createElement(base_1.default.Layout, null,

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts

@@ -2,6 +2,7 @@ import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
 export declare type YfmHtmlBlockSpecsOptions = {
     nodeView?: ExtensionNodeSpec['view'];
+    sanitize?: (dirtyHtml: string) => string;
 };
 export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
     readonly NodeName: "yfm_html_block";

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js

@@ -6,9 +6,9 @@ const html_extension_1 = require("@diplodoc/html-extension");
 const const_1 = require("./const");
 var const_2 = require("./const");
 Object.defineProperty(exports, "yfmHtmlBlockNodeName", { enumerable: true, get: function () { return const_2.yfmHtmlBlockNodeName; } });
-const YfmHtmlBlockSpecsExtension = (builder, { nodeView }) => {
+const YfmHtmlBlockSpecsExtension = (builder, { nodeView, sanitize }) => {
     builder
-        .configureMd((md) => md.use((0, html_extension_1.transform)({ bundle: false }), {}))
+        .configureMd((md) => md.use((0, html_extension_1.transform)({ bundle: false, sanitize }), {}))
         .addNode(const_1.YfmHtmlBlockConsts.NodeName, () => ({
         fromMd: {
             tokenSpec: {

package/build/cjs/extensions/yfm/YfmHtmlBlock/index.d.ts

@@ -3,6 +3,7 @@ import { Action, ExtensionAuto } from '../../../core';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
 export declare type YfmHtmlBlockOptions = {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
+    sanitize?: (dirtyHtml: string) => string;
 };
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {

package/build/cjs/extensions/yfm/YfmHtmlBlock/index.js

@@ -8,6 +8,7 @@ const actions_1 = require("./actions");
 const YfmHtmlBlock = (builder, options) => {
     builder.use(YfmHtmlBlockSpecs_1.YfmHtmlBlockSpecs, {
         nodeView: YfmHtmlBlockNodeViewFactory(options),
+        sanitize: options.sanitize,
     });
     builder.addAction(const_1.YfmHtmlBlockAction, () => actions_1.addYfmHtmlBlock);
 };

package/build/cjs/forms/FileForm.js

@@ -7,10 +7,10 @@ const uikit_1 = require("@gravity-ui/uikit");
 const classname_1 = require("../classname");
 const forms_1 = require("../i18n/forms");
 const lodash_1 = require("../lodash");
+const handlers_1 = require("../utils/handlers");
 const TextInput_1 = require("./TextInput");
 const base_1 = tslib_1.__importDefault(require("./base"));
 const components_1 = require("./components");
-const utils_1 = require("./utils");
 const b = (0, classname_1.cn)('file-form');
 const FileForm = ({ className, autoFocus, onCancel, onSubmit, onAttach, loading, }) => {
     const [tabId, setTabId] = react_1.default.useState(() => (0, lodash_1.isFunction)(onAttach) ? "attach" /* TabId.Attach */ : "link" /* TabId.Link */);
@@ -28,7 +28,7 @@ const FileForm = ({ className, autoFocus, onCancel, onSubmit, onAttach, loading,
             name: name.trim(),
         });
     };
-    const inputEnterKeyHandler = (0, utils_1.enterKeyHandler)(handleSubmit);
+    const inputEnterKeyHandler = (0, handlers_1.enterKeyHandler)(handleSubmit);
     return (react_1.default.createElement(base_1.default.Form, { className: b(null, [className]) },
         shouldRenderTabs && (react_1.default.createElement(uikit_1.Tabs, { activeTab: tabId, onSelectTab: setTabId, items: [
                 { id: "attach" /* TabId.Attach */, title: (0, forms_1.i18n)('common_tab_attach') },

package/build/cjs/forms/ImageForm.js

@@ -7,10 +7,10 @@ const uikit_1 = require("@gravity-ui/uikit");
 const classname_1 = require("../classname");
 const forms_1 = require("../i18n/forms");
 const lodash_1 = require("../lodash");
+const handlers_1 = require("../utils/handlers");
 const TextInput_1 = require("./TextInput");
 const base_1 = tslib_1.__importDefault(require("./base"));
 const components_1 = require("./components");
-const utils_1 = require("./utils");
 const b = (0, classname_1.cn)('image-form');
 const ImageForm = ({ className, autoFocus, onCancel, onSubmit, onAttach, loading, }) => {
     const [tabId, setTabId] = react_1.default.useState(() => (0, lodash_1.isFunction)(onAttach) ? "attach" /* ImageTabId.Attach */ : "link" /* ImageTabId.Link */);
@@ -37,7 +37,7 @@ const ImageForm = ({ className, autoFocus, onCancel, onSubmit, onAttach, loading
             data.height = height;
         onSubmit(data);
     };
-    const inputEnterKeyHandler = (0, utils_1.enterKeyHandler)(handleSubmit);
+    const inputEnterKeyHandler = (0, handlers_1.enterKeyHandler)(handleSubmit);
     return (react_1.default.createElement(base_1.default.Form, { className: b(null, [className]) },
         shouldRenderTabs && (react_1.default.createElement(uikit_1.Tabs, { activeTab: tabId, onSelectTab: setTabId, items: [
                 { id: "attach" /* ImageTabId.Attach */, title: (0, forms_1.i18n)('common_tab_attach') },

package/build/cjs/forms/LinkForm.js

@@ -5,17 +5,17 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const forms_1 = require("../i18n/forms");
+const handlers_1 = require("../utils/handlers");
 const TextInput_1 = require("./TextInput");
 const UrlInputRow_1 = require("./UrlInputRow");
 const base_1 = tslib_1.__importDefault(require("./base"));
-const utils_1 = require("./utils");
 exports.LinkForm = react_1.default.memo(function LinkForm({ className, autoFocus, initialUrl, initialText, readOnlyText, onSubmit, onCancel, }) {
     const [url, setUrl] = react_1.default.useState(initialUrl !== null && initialUrl !== void 0 ? initialUrl : '');
     const [text, setText] = react_1.default.useState(initialText !== null && initialText !== void 0 ? initialText : '');
     const handleSubmit = () => {
         onSubmit({ url, text });
     };
-    const inputEnterKeyHandler = (0, utils_1.enterKeyHandler)(handleSubmit);
+    const inputEnterKeyHandler = (0, handlers_1.enterKeyHandler)(handleSubmit);
     return (react_1.default.createElement(base_1.default.Form, { className: className },
         react_1.default.createElement(base_1.default.Layout, null,
             react_1.default.createElement(base_1.default.Row, { label: (0, forms_1.i18n)('common_link'), help: (0, forms_1.i18n)('link_url_help'), control: react_1.default.createElement(UrlInputRow_1.UrlInputRow, { href: url, input: react_1.default.createElement(TextInput_1.TextInputFixed, { size: "s", view: "normal", value: url, onUpdate: setUrl, autoFocus: autoFocus, placeholder: "https://", onKeyPress: inputEnterKeyHandler }) }) }),

package/build/cjs/i18n/search/en.json

@@ -0,0 +1,5 @@
+{
+  "label_case-sensitive": "Case sensitive",
+  "label_whole-word": "Whole word",
+  "title": "Search in code"
+}

package/build/cjs/i18n/search/index.d.ts

@@ -0,0 +1,7 @@
+export declare const i18n: <G extends "title" | "label_case-sensitive" | "label_whole-word", S extends string>(key: G | (string extends S ? S : never), params?: {
+    [key: string]: any;
+} | undefined) => S extends G ? {
+    "label_case-sensitive": string;
+    "label_whole-word": string;
+    title: string;
+}[G] : string;

package/build/cjs/i18n/search/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("../i18n");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const KEYSET = 'search';
+exports.i18n = (0, i18n_1.registerKeyset)(KEYSET, { en: en_json_1.default, ru: ru_json_1.default });

package/build/cjs/i18n/search/ru.json

@@ -0,0 +1,5 @@
+{
+  "label_case-sensitive": "С учетом регистра",
+  "label_whole-word": "Слово целиком",
+  "title": "Найти в коде"
+}

package/build/cjs/markup/codemirror/create.d.ts

@@ -1,6 +1,8 @@
 import type { Extension, StateCommand } from '@codemirror/state';
 import { EditorView, EditorViewConfig } from '@codemirror/view';
+import { EventMap } from '../../bundle/Editor';
 import { ReactRenderStorage } from '../../extensions';
+import { Receiver } from '../../utils';
 import { FileUploadHandler } from './files-upload-facet';
 export declare type CreateCodemirrorParams = {
     doc: EditorViewConfig['doc'];
@@ -14,6 +16,7 @@ export declare type CreateCodemirrorParams = {
     uploadHandler?: FileUploadHandler;
     needImgDimms?: boolean;
     extraMarkupExtensions?: Extension[];
+    receiver?: Receiver<EventMap>;
 };
 export declare function createCodemirror(params: CreateCodemirrorParams): EditorView;
 export declare function withLogger(action: string, command: StateCommand): StateCommand;

package/build/cjs/markup/codemirror/create.js

@@ -13,9 +13,10 @@ const files_upload_facet_1 = require("./files-upload-facet");
 const gravity_1 = require("./gravity");
 const pairing_chars_1 = require("./pairing-chars");
 const react_facet_1 = require("./react-facet");
+const plugin_1 = require("./search-plugin/plugin");
 const yfm_1 = require("./yfm");
 function createCodemirror(params) {
-    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extraMarkupExtensions, } = params;
+    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extraMarkupExtensions, receiver, } = params;
     const extensions = [
         gravity_1.gravityTheme,
         (0, view_1.placeholder)(placeholderText),
@@ -69,6 +70,10 @@ function createCodemirror(params) {
                 onScroll(event);
             },
         }),
+        (0, plugin_1.SearchPanelPlugin)({
+            anchorSelector: '.g-md-search-anchor',
+            receiver,
+        }),
     ];
     if (params.uploadHandler) {
         extensions.push(files_upload_facet_1.FileUploadHandlerFacet.of({

package/build/cjs/markup/codemirror/search-plugin/plugin.d.ts

@@ -0,0 +1,42 @@
+import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { EditorMode, EventMap } from '../../../bundle/Editor';
+import type { RendererItem } from '../../../extensions';
+import { Receiver } from '../../../utils';
+interface SearchQueryParams {
+    search: string;
+    caseSensitive?: boolean;
+    literal?: boolean;
+    regexp?: boolean;
+    replace?: string;
+    valid?: boolean;
+    wholeWord?: boolean;
+}
+export interface SearchPanelPluginParams {
+    anchorSelector: string;
+    inputDelay?: number;
+    receiver?: Receiver<EventMap>;
+}
+export declare const SearchPanelPlugin: (params: SearchPanelPluginParams) => ViewPlugin<{
+    readonly view: EditorView;
+    readonly params: SearchPanelPluginParams;
+    anchor: HTMLElement | null;
+    renderer: RendererItem | null;
+    searchQuery: SearchQueryParams;
+    receiver: Receiver<EventMap> | undefined;
+    setViewSearchWithDelay: (config: Partial<SearchQueryParams>) => void;
+    update(update: ViewUpdate): void;
+    destroy(): void;
+    setViewSearch(config: Partial<SearchQueryParams>): void;
+    handleEditorModeChange({ mode }: {
+        mode: EditorMode;
+    }): void;
+    handleChange(search: string): void;
+    handleClose(): void;
+    handleSearchNext(): void;
+    handleSearchPrev(): void;
+    handleSearchConfigChange({ isCaseSensitive, isWholeWord, }: {
+        isCaseSensitive?: boolean | undefined;
+        isWholeWord?: boolean | undefined;
+    }): void;
+}>;
+export {};

package/build/cjs/markup/codemirror/search-plugin/plugin.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchPanelPlugin = void 0;
+const search_1 = require("@codemirror/search");
+const view_1 = require("@codemirror/view");
+const lodash_1 = require("../../../lodash");
+const react_facet_1 = require("../react-facet");
+const SearchPopup_1 = require("./view/SearchPopup");
+const INPUT_DELAY = 200;
+const SearchPanelPlugin = (params) => view_1.ViewPlugin.fromClass(class {
+    constructor(view) {
+        var _a, _b;
+        this.searchQuery = {
+            search: '',
+            caseSensitive: false,
+            wholeWord: false,
+        };
+        this.view = view;
+        this.anchor = null;
+        this.renderer = null;
+        this.params = params;
+        this.receiver = params.receiver;
+        this.handleClose = this.handleClose.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSearchNext = this.handleSearchNext.bind(this);
+        this.handleSearchPrev = this.handleSearchPrev.bind(this);
+        this.handleSearchConfigChange = this.handleSearchConfigChange.bind(this);
+        this.handleEditorModeChange = this.handleEditorModeChange.bind(this);
+        this.setViewSearchWithDelay = (0, lodash_1.debounce)(this.setViewSearch, (_a = this.params.inputDelay) !== null && _a !== void 0 ? _a : INPUT_DELAY);
+        (_b = this.receiver) === null || _b === void 0 ? void 0 : _b.on('change-editor-mode', this.handleEditorModeChange);
+    }
+    update(update) {
+        var _a;
+        const isPanelOpen = (0, search_1.searchPanelOpen)(update.state);
+        if (isPanelOpen && !this.renderer) {
+            this.anchor = document.querySelector(this.params.anchorSelector);
+            this.renderer = this.view.state
+                .facet(react_facet_1.ReactRendererFacet)
+                .createItem('cm-search', () => (0, SearchPopup_1.renderSearchPopup)({
+                open: true,
+                anchor: this.anchor,
+                onChange: this.handleChange,
+                onClose: this.handleClose,
+                onSearchNext: this.handleSearchNext,
+                onSearchPrev: this.handleSearchPrev,
+                onConfigChange: this.handleSearchConfigChange,
+            }));
+        }
+        else if (!isPanelOpen && this.renderer) {
+            (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.remove();
+            this.renderer = null;
+        }
+    }
+    destroy() {
+        var _a, _b;
+        (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.remove();
+        this.renderer = null;
+        (_b = this.receiver) === null || _b === void 0 ? void 0 : _b.off('change-editor-mode', this.handleEditorModeChange);
+    }
+    setViewSearch(config) {
+        this.searchQuery = Object.assign(Object.assign({}, this.searchQuery), config);
+        const searchQuery = new search_1.SearchQuery(Object.assign({}, this.searchQuery));
+        this.view.dispatch({ effects: search_1.setSearchQuery.of(searchQuery) });
+    }
+    handleEditorModeChange({ mode }) {
+        if (mode === 'wysiwyg') {
+            (0, search_1.closeSearchPanel)(this.view);
+        }
+    }
+    handleChange(search) {
+        this.setViewSearchWithDelay({ search });
+    }
+    handleClose() {
+        this.setViewSearch({ search: '' });
+        (0, search_1.closeSearchPanel)(this.view);
+    }
+    handleSearchNext() {
+        (0, search_1.findNext)(this.view);
+    }
+    handleSearchPrev() {
+        (0, search_1.findPrevious)(this.view);
+    }
+    handleSearchConfigChange({ isCaseSensitive, isWholeWord, }) {
+        this.setViewSearch({
+            caseSensitive: isCaseSensitive,
+            wholeWord: isWholeWord,
+        });
+    }
+}, {
+    provide: () => [
+        view_1.keymap.of(search_1.searchKeymap),
+        (0, search_1.search)({
+            createPanel: () => ({
+                // Create an empty search panel
+                dom: document.createElement('div'),
+            }),
+        }),
+    ],
+});
+exports.SearchPanelPlugin = SearchPanelPlugin;

package/build/cjs/markup/codemirror/search-plugin/view/SearchPopup.css

@@ -0,0 +1,9 @@
+.g-md-search-card {
+  padding: var(--g-spacing-2) var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-4);
+}
+.g-md-search-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--g-spacing-1);
+}

package/build/cjs/markup/codemirror/search-plugin/view/SearchPopup.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+interface SearchConfig {
+    isCaseSensitive: boolean;
+    isWholeWord: boolean;
+}
+interface SearchCardProps {
+    onSearchKeyDown?: (query: string) => void;
+    onChange?: (query: string) => void;
+    onClose?: (query: string) => void;
+    onSearchPrev?: (query: string) => void;
+    onSearchNext?: (query: string) => void;
+    onConfigChange?: (config: SearchConfig) => void;
+}
+export declare const SearchCard: React.FC<SearchCardProps>;
+export interface SearchPopupProps {
+    anchor: HTMLElement;
+    onChange: (query: string) => void;
+    onClose: () => void;
+    onSearchNext: () => void;
+    onSearchPrev: () => void;
+    onConfigChange: (config: SearchConfig) => void;
+    open: boolean;
+}
+export declare const SearchPopup: React.FC<SearchPopupProps>;
+interface SearchPopupWithRefProps extends Omit<SearchPopupProps, 'anchor'> {
+    anchor: HTMLElement | null;
+}
+export declare function renderSearchPopup({ anchor, open, onClose, ...props }: SearchPopupWithRefProps): JSX.Element;
+export {};

package/build/cjs/markup/codemirror/search-plugin/view/SearchPopup.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderSearchPopup = exports.SearchPopup = exports.SearchCard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../../classname");
+const search_1 = require("../../../../i18n/search");
+const handlers_1 = require("../../../../utils/handlers");
+const b = (0, classname_1.cn)('search-card');
+const noop = () => { };
+const SearchCard = ({ onChange = noop, onClose = noop, onSearchPrev = noop, onSearchNext = noop, onConfigChange = noop, }) => {
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [isCaseSensitive, setIsCaseSensitive] = (0, react_1.useState)(false);
+    const [isWholeWord, setIsWholeWord] = (0, react_1.useState)(false);
+    const textInputRef = (0, react_1.useRef)(null);
+    const setInputFocus = () => {
+        var _a;
+        (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleInputChange = (event) => {
+        const { target: { value }, } = event;
+        setQuery(value);
+        onChange(value);
+    };
+    const handleClose = () => {
+        setQuery('');
+        onClose(query);
+        setInputFocus();
+    };
+    const handlePrev = () => {
+        onSearchPrev(query);
+        setInputFocus();
+    };
+    const handleNext = () => {
+        onSearchNext(query);
+        setInputFocus();
+    };
+    const handleIsCaseSensitive = () => {
+        onConfigChange({
+            isCaseSensitive: !isCaseSensitive,
+            isWholeWord,
+        });
+        setIsCaseSensitive((isCaseSensitive) => !isCaseSensitive);
+        setInputFocus();
+    };
+    const handleIsWholeWord = () => {
+        onConfigChange({
+            isCaseSensitive,
+            isWholeWord: !isWholeWord,
+        });
+        setIsWholeWord((isWholeWord) => !isWholeWord);
+        setInputFocus();
+    };
+    const handleSearchKeyPress = (0, handlers_1.enterKeyHandler)(handleNext);
+    return (react_1.default.createElement(uikit_1.Card, { className: b() },
+        react_1.default.createElement("div", { className: b('header') },
+            react_1.default.createElement("span", { className: b('title') },
+                " ",
+                (0, search_1.i18n)('title')),
+            react_1.default.createElement(uikit_1.Button, { onClick: handleClose, size: "s", view: "flat" },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 14 }))),
+        react_1.default.createElement(uikit_1.TextInput, { controlRef: textInputRef, className: (0, uikit_1.sp)({ mb: 2 }), size: "s", autoFocus: true, onKeyPress: handleSearchKeyPress, onChange: handleInputChange, value: query, endContent: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(uikit_1.Button, { onClick: handlePrev },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronUp, size: 12 })),
+                react_1.default.createElement(uikit_1.Button, { onClick: handleNext },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, size: 12 }))) }),
+        react_1.default.createElement(uikit_1.Checkbox, { size: "m", onUpdate: handleIsCaseSensitive, checked: isCaseSensitive, className: (0, uikit_1.sp)({ mr: 4 }) }, (0, search_1.i18n)('label_case-sensitive')),
+        react_1.default.createElement(uikit_1.Checkbox, { size: "m", onUpdate: handleIsWholeWord, checked: isWholeWord }, (0, search_1.i18n)('label_whole-word'))));
+};
+exports.SearchCard = SearchCard;
+const SearchPopup = (_a) => {
+    var { open, anchor, onClose } = _a, props = tslib_1.__rest(_a, ["open", "anchor", "onClose"]);
+    const anchorRef = (0, react_1.useRef)(anchor);
+    return (react_1.default.createElement(uikit_1.Popup, { onEscapeKeyDown: onClose, open: anchorRef.current && open, anchorRef: anchorRef, placement: "bottom-end" },
+        react_1.default.createElement(exports.SearchCard, Object.assign({ onClose: onClose }, props))));
+};
+exports.SearchPopup = SearchPopup;
+exports.SearchPopup.displayName = 'SearchPopup';
+function renderSearchPopup(_a) {
+    var { anchor, open, onClose } = _a, props = tslib_1.__rest(_a, ["anchor", "open", "onClose"]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, anchor && react_1.default.createElement(exports.SearchPopup, Object.assign({ open: open, onClose: onClose, anchor: anchor }, props))));
+}
+exports.renderSearchPopup = renderSearchPopup;

package/build/cjs/utils/handlers.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function enterKeyHandler<T>(handler: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;
+export declare function escapeKeyHandler<T>(handler: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;
+export declare function combinedKeyHandler<T>(handlers: Record<string, React.KeyboardEventHandler<T>>): React.KeyboardEventHandler<T>;

package/build/cjs/utils/handlers.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.combinedKeyHandler = exports.escapeKeyHandler = exports.enterKeyHandler = void 0;
+const shortcuts_1 = require("../shortcuts");
+function enterKeyHandler(handler) {
+    return (event) => {
+        if (event.key === shortcuts_1.Key.Enter) {
+            handler(event);
+        }
+    };
+}
+exports.enterKeyHandler = enterKeyHandler;
+function escapeKeyHandler(handler) {
+    return (event) => {
+        if (event.key === shortcuts_1.Key.Esc) {
+            handler(event);
+        }
+    };
+}
+exports.escapeKeyHandler = escapeKeyHandler;
+function combinedKeyHandler(handlers) {
+    return (event) => {
+        const handler = handlers[event.key];
+        if (handler) {
+            handler(event);
+        }
+    };
+}
+exports.combinedKeyHandler = combinedKeyHandler;

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '13.4.2' !== 'undefined' ? '13.4.2' : 'unknown';
+exports.VERSION = typeof '13.5.1' !== 'undefined' ? '13.5.1' : 'unknown';

package/build/esm/bundle/Editor.d.ts

@@ -19,7 +19,7 @@ export declare type ToolbarActionData = {
         [key: string]: any;
     };
 };
-interface EventMap {
+export interface EventMap {
     change: null;
     cancel: null;
     submit: null;
@@ -70,4 +70,3 @@ export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'li
     preset: EditorPreset;
     extraMarkupExtensions?: CodemirrorExtension[];
 };
-export {};

package/build/esm/bundle/Editor.js

@@ -152,6 +152,7 @@ export class EditorImpl extends SafeEventEmitter {
                 uploadHandler: this.fileUploadHandler,
                 needImgDimms: this.needToSetDimensionsForUploadedImages,
                 extraMarkupExtensions: __classPrivateFieldGet(this, _EditorImpl_extraMarkupExtensions, "f"),
+                receiver: this,
             })), "f");
         }
         return __classPrivateFieldGet(this, _EditorImpl_markupEditor, "f");

package/build/esm/bundle/MarkdownEditorView.js

@@ -110,6 +110,7 @@ export const MarkdownEditorView = React.forwardRef((props, ref) => {
                     React.createElement(SplitModeView, { editor: editor, ref: splitModeViewWrapperRef })))))));
 });
 MarkdownEditorView.displayName = 'MarkdownEditorView';
+const MarkupSearchAnchor = ({ mode }) => (React.createElement(React.Fragment, null, mode === 'markup' && React.createElement("div", { className: "g-md-search-anchor" })));
 function Settings(props) {
     const wrapperRef = useRef(null);
     const isSticky = useSticky(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;
@@ -118,7 +119,8 @@ function Settings(props) {
                 withToolbar: props.toolbarVisibility,
                 stickyActive: isSticky,
             }) },
-            React.createElement(EditorSettings, Object.assign({}, props)))));
+            React.createElement(EditorSettings, Object.assign({}, props)),
+            React.createElement(MarkupSearchAnchor, Object.assign({}, props)))));
 }
 function isPreviewKeyDown(e) {
     const modKey = isMac() ? e.metaKey : e.ctrlKey;

package/build/esm/extensions/markdown/Link/plugins/LinkTooltipPlugin/TooltipView.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { TextInputFixed } from '../../../../../forms/TextInput';
 import { UrlInputRow } from '../../../../../forms/UrlInputRow';
 import Form from '../../../../../forms/base';
-import { enterKeyHandler } from '../../../../../forms/utils';
 import { i18n } from '../../../../../i18n/forms';
+import { enterKeyHandler } from '../../../../../utils/handlers';
 export const LinkForm = React.memo(function LinkForm({ href, autoFocus, onChange, onCancel, }) {
     const [url, setUrl] = React.useState(href);
     const handleSubmit = () => {

package/build/esm/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/ImageForm.js

@@ -4,9 +4,9 @@ import isNumber from 'is-number';
 import { cn } from '../../../../../../classname';
 import Form from '../../../../../../forms/base';
 import { NumberInput } from '../../../../../../forms/components';
-import { enterKeyHandler } from '../../../../../../forms/utils';
 import { i18n } from '../../../../../../i18n/forms';
 import { useAutoFocus } from '../../../../../../react-utils/useAutoFocus';
+import { enterKeyHandler } from '../../../../../../utils/handlers';
 import { LinkAttr, linkType } from '../../../../../markdown';
 import { ImgSizeAttr } from '../../../../../specs';
 import './ImageForm.css';

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts

@@ -2,6 +2,7 @@ import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
 export declare type YfmHtmlBlockSpecsOptions = {
     nodeView?: ExtensionNodeSpec['view'];
+    sanitize?: (dirtyHtml: string) => string;
 };
 export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
     readonly NodeName: "yfm_html_block";

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js

@@ -2,9 +2,9 @@
 import { transform } from '@diplodoc/html-extension';
 import { YfmHtmlBlockConsts } from './const';
 export { yfmHtmlBlockNodeName } from './const';
-const YfmHtmlBlockSpecsExtension = (builder, { nodeView }) => {
+const YfmHtmlBlockSpecsExtension = (builder, { nodeView, sanitize }) => {
     builder
-        .configureMd((md) => md.use(transform({ bundle: false }), {}))
+        .configureMd((md) => md.use(transform({ bundle: false, sanitize }), {}))
         .addNode(YfmHtmlBlockConsts.NodeName, () => ({
         fromMd: {
             tokenSpec: {

package/build/esm/extensions/yfm/YfmHtmlBlock/index.d.ts

@@ -3,6 +3,7 @@ import { Action, ExtensionAuto } from '../../../core';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
 export declare type YfmHtmlBlockOptions = {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
+    sanitize?: (dirtyHtml: string) => string;
 };
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {

package/build/esm/extensions/yfm/YfmHtmlBlock/index.js

@@ -5,6 +5,7 @@ import { addYfmHtmlBlock } from './actions';
 export const YfmHtmlBlock = (builder, options) => {
     builder.use(YfmHtmlBlockSpecs, {
         nodeView: YfmHtmlBlockNodeViewFactory(options),
+        sanitize: options.sanitize,
     });
     builder.addAction(YfmHtmlBlockAction, () => addYfmHtmlBlock);
 };

package/build/esm/forms/FileForm.js

@@ -3,10 +3,10 @@ import { Tabs, TextInput } from '@gravity-ui/uikit';
 import { cn } from '../classname';
 import { i18n } from '../i18n/forms';
 import { isFunction } from '../lodash';
+import { enterKeyHandler } from '../utils/handlers';
 import { TextInputFixed } from './TextInput';
 import Form from './base';
 import { ButtonAttach } from './components';
-import { enterKeyHandler } from './utils';
 const b = cn('file-form');
 export const FileForm = ({ className, autoFocus, onCancel, onSubmit, onAttach, loading, }) => {
     const [tabId, setTabId] = React.useState(() => isFunction(onAttach) ? "attach" /* TabId.Attach */ : "link" /* TabId.Link */);

package/build/esm/forms/ImageForm.js

@@ -3,10 +3,10 @@ import { Tabs, TextInput } from '@gravity-ui/uikit';
 import { cn } from '../classname';
 import { i18n } from '../i18n/forms';
 import { isFunction } from '../lodash';
+import { enterKeyHandler } from '../utils/handlers';
 import { TextInputFixed } from './TextInput';
 import Form from './base';
 import { ButtonAttach, NumberInput } from './components';
-import { enterKeyHandler } from './utils';
 import './ImageForm.css';
 const b = cn('image-form');
 export const ImageForm = ({ className, autoFocus, onCancel, onSubmit, onAttach, loading, }) => {

package/build/esm/forms/LinkForm.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { TextInput } from '@gravity-ui/uikit';
 import { i18n } from '../i18n/forms';
+import { enterKeyHandler } from '../utils/handlers';
 import { TextInputFixed } from './TextInput';
 import { UrlInputRow } from './UrlInputRow';
 import Form from './base';
-import { enterKeyHandler } from './utils';
 export const LinkForm = React.memo(function LinkForm({ className, autoFocus, initialUrl, initialText, readOnlyText, onSubmit, onCancel, }) {
     const [url, setUrl] = React.useState(initialUrl !== null && initialUrl !== void 0 ? initialUrl : '');
     const [text, setText] = React.useState(initialText !== null && initialText !== void 0 ? initialText : '');

package/build/esm/i18n/search/en.json

@@ -0,0 +1,5 @@
+{
+  "label_case-sensitive": "Case sensitive",
+  "label_whole-word": "Whole word",
+  "title": "Search in code"
+}

package/build/esm/i18n/search/index.d.ts

@@ -0,0 +1,7 @@
+export declare const i18n: <G extends "title" | "label_case-sensitive" | "label_whole-word", S extends string>(key: G | (string extends S ? S : never), params?: {
+    [key: string]: any;
+} | undefined) => S extends G ? {
+    "label_case-sensitive": string;
+    "label_whole-word": string;
+    title: string;
+}[G] : string;

package/build/esm/i18n/search/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../i18n';
+import en from './en.json';
+import ru from './ru.json';
+const KEYSET = 'search';
+export const i18n = registerKeyset(KEYSET, { en, ru });

package/build/esm/i18n/search/ru.json

@@ -0,0 +1,5 @@
+{
+  "label_case-sensitive": "С учетом регистра",
+  "label_whole-word": "Слово целиком",
+  "title": "Найти в коде"
+}

package/build/esm/markup/codemirror/create.d.ts

@@ -1,6 +1,8 @@
 import type { Extension, StateCommand } from '@codemirror/state';
 import { EditorView, EditorViewConfig } from '@codemirror/view';
+import { EventMap } from '../../bundle/Editor';
 import { ReactRenderStorage } from '../../extensions';
+import { Receiver } from '../../utils';
 import { FileUploadHandler } from './files-upload-facet';
 export declare type CreateCodemirrorParams = {
     doc: EditorViewConfig['doc'];
@@ -14,6 +16,7 @@ export declare type CreateCodemirrorParams = {
     uploadHandler?: FileUploadHandler;
     needImgDimms?: boolean;
     extraMarkupExtensions?: Extension[];
+    receiver?: Receiver<EventMap>;
 };
 export declare function createCodemirror(params: CreateCodemirrorParams): EditorView;
 export declare function withLogger(action: string, command: StateCommand): StateCommand;

package/build/esm/markup/codemirror/create.js

@@ -10,9 +10,10 @@ import { FileUploadHandlerFacet } from './files-upload-facet';
 import { gravityHighlightStyle, gravityTheme } from './gravity';
 import { PairingCharactersExtension } from './pairing-chars';
 import { ReactRendererFacet } from './react-facet';
+import { SearchPanelPlugin } from './search-plugin/plugin';
 import { yfmLang } from './yfm';
 export function createCodemirror(params) {
-    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extraMarkupExtensions, } = params;
+    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extraMarkupExtensions, receiver, } = params;
     const extensions = [
         gravityTheme,
         placeholder(placeholderText),
@@ -66,6 +67,10 @@ export function createCodemirror(params) {
                 onScroll(event);
             },
         }),
+        SearchPanelPlugin({
+            anchorSelector: '.g-md-search-anchor',
+            receiver,
+        }),
     ];
     if (params.uploadHandler) {
         extensions.push(FileUploadHandlerFacet.of({

package/build/esm/markup/codemirror/search-plugin/plugin.d.ts

@@ -0,0 +1,42 @@
+import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { EditorMode, EventMap } from '../../../bundle/Editor';
+import type { RendererItem } from '../../../extensions';
+import { Receiver } from '../../../utils';
+interface SearchQueryParams {
+    search: string;
+    caseSensitive?: boolean;
+    literal?: boolean;
+    regexp?: boolean;
+    replace?: string;
+    valid?: boolean;
+    wholeWord?: boolean;
+}
+export interface SearchPanelPluginParams {
+    anchorSelector: string;
+    inputDelay?: number;
+    receiver?: Receiver<EventMap>;
+}
+export declare const SearchPanelPlugin: (params: SearchPanelPluginParams) => ViewPlugin<{
+    readonly view: EditorView;
+    readonly params: SearchPanelPluginParams;
+    anchor: HTMLElement | null;
+    renderer: RendererItem | null;
+    searchQuery: SearchQueryParams;
+    receiver: Receiver<EventMap> | undefined;
+    setViewSearchWithDelay: (config: Partial<SearchQueryParams>) => void;
+    update(update: ViewUpdate): void;
+    destroy(): void;
+    setViewSearch(config: Partial<SearchQueryParams>): void;
+    handleEditorModeChange({ mode }: {
+        mode: EditorMode;
+    }): void;
+    handleChange(search: string): void;
+    handleClose(): void;
+    handleSearchNext(): void;
+    handleSearchPrev(): void;
+    handleSearchConfigChange({ isCaseSensitive, isWholeWord, }: {
+        isCaseSensitive?: boolean | undefined;
+        isWholeWord?: boolean | undefined;
+    }): void;
+}>;
+export {};

package/build/esm/markup/codemirror/search-plugin/plugin.js

@@ -0,0 +1,96 @@
+import { SearchQuery, closeSearchPanel, findNext, findPrevious, search, searchKeymap, searchPanelOpen, setSearchQuery, } from '@codemirror/search';
+import { ViewPlugin, keymap } from '@codemirror/view';
+import { debounce } from '../../../lodash';
+import { ReactRendererFacet } from '../react-facet';
+import { renderSearchPopup } from './view/SearchPopup';
+const INPUT_DELAY = 200;
+export const SearchPanelPlugin = (params) => ViewPlugin.fromClass(class {
+    constructor(view) {
+        var _a, _b;
+        this.searchQuery = {
+            search: '',
+            caseSensitive: false,
+            wholeWord: false,
+        };
+        this.view = view;
+        this.anchor = null;
+        this.renderer = null;
+        this.params = params;
+        this.receiver = params.receiver;
+        this.handleClose = this.handleClose.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSearchNext = this.handleSearchNext.bind(this);
+        this.handleSearchPrev = this.handleSearchPrev.bind(this);
+        this.handleSearchConfigChange = this.handleSearchConfigChange.bind(this);
+        this.handleEditorModeChange = this.handleEditorModeChange.bind(this);
+        this.setViewSearchWithDelay = debounce(this.setViewSearch, (_a = this.params.inputDelay) !== null && _a !== void 0 ? _a : INPUT_DELAY);
+        (_b = this.receiver) === null || _b === void 0 ? void 0 : _b.on('change-editor-mode', this.handleEditorModeChange);
+    }
+    update(update) {
+        var _a;
+        const isPanelOpen = searchPanelOpen(update.state);
+        if (isPanelOpen && !this.renderer) {
+            this.anchor = document.querySelector(this.params.anchorSelector);
+            this.renderer = this.view.state
+                .facet(ReactRendererFacet)
+                .createItem('cm-search', () => renderSearchPopup({
+                open: true,
+                anchor: this.anchor,
+                onChange: this.handleChange,
+                onClose: this.handleClose,
+                onSearchNext: this.handleSearchNext,
+                onSearchPrev: this.handleSearchPrev,
+                onConfigChange: this.handleSearchConfigChange,
+            }));
+        }
+        else if (!isPanelOpen && this.renderer) {
+            (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.remove();
+            this.renderer = null;
+        }
+    }
+    destroy() {
+        var _a, _b;
+        (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.remove();
+        this.renderer = null;
+        (_b = this.receiver) === null || _b === void 0 ? void 0 : _b.off('change-editor-mode', this.handleEditorModeChange);
+    }
+    setViewSearch(config) {
+        this.searchQuery = Object.assign(Object.assign({}, this.searchQuery), config);
+        const searchQuery = new SearchQuery(Object.assign({}, this.searchQuery));
+        this.view.dispatch({ effects: setSearchQuery.of(searchQuery) });
+    }
+    handleEditorModeChange({ mode }) {
+        if (mode === 'wysiwyg') {
+            closeSearchPanel(this.view);
+        }
+    }
+    handleChange(search) {
+        this.setViewSearchWithDelay({ search });
+    }
+    handleClose() {
+        this.setViewSearch({ search: '' });
+        closeSearchPanel(this.view);
+    }
+    handleSearchNext() {
+        findNext(this.view);
+    }
+    handleSearchPrev() {
+        findPrevious(this.view);
+    }
+    handleSearchConfigChange({ isCaseSensitive, isWholeWord, }) {
+        this.setViewSearch({
+            caseSensitive: isCaseSensitive,
+            wholeWord: isWholeWord,
+        });
+    }
+}, {
+    provide: () => [
+        keymap.of(searchKeymap),
+        search({
+            createPanel: () => ({
+                // Create an empty search panel
+                dom: document.createElement('div'),
+            }),
+        }),
+    ],
+});

package/build/esm/markup/codemirror/search-plugin/view/SearchPopup.css

@@ -0,0 +1,9 @@
+.g-md-search-card {
+  padding: var(--g-spacing-2) var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-4);
+}
+.g-md-search-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--g-spacing-1);
+}

package/build/esm/markup/codemirror/search-plugin/view/SearchPopup.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import './SearchPopup.css';
+interface SearchConfig {
+    isCaseSensitive: boolean;
+    isWholeWord: boolean;
+}
+interface SearchCardProps {
+    onSearchKeyDown?: (query: string) => void;
+    onChange?: (query: string) => void;
+    onClose?: (query: string) => void;
+    onSearchPrev?: (query: string) => void;
+    onSearchNext?: (query: string) => void;
+    onConfigChange?: (config: SearchConfig) => void;
+}
+export declare const SearchCard: React.FC<SearchCardProps>;
+export interface SearchPopupProps {
+    anchor: HTMLElement;
+    onChange: (query: string) => void;
+    onClose: () => void;
+    onSearchNext: () => void;
+    onSearchPrev: () => void;
+    onConfigChange: (config: SearchConfig) => void;
+    open: boolean;
+}
+export declare const SearchPopup: React.FC<SearchPopupProps>;
+interface SearchPopupWithRefProps extends Omit<SearchPopupProps, 'anchor'> {
+    anchor: HTMLElement | null;
+}
+export declare function renderSearchPopup({ anchor, open, onClose, ...props }: SearchPopupWithRefProps): JSX.Element;
+export {};

package/build/esm/markup/codemirror/search-plugin/view/SearchPopup.js

@@ -0,0 +1,80 @@
+import { __rest } from "tslib";
+import React, { useRef, useState } from 'react';
+import { ChevronDown, ChevronUp, Xmark } from '@gravity-ui/icons';
+import { Button, Card, Checkbox, Icon, Popup, TextInput, sp, } from '@gravity-ui/uikit';
+import { cn } from '../../../../classname';
+import { i18n } from '../../../../i18n/search';
+import { enterKeyHandler } from '../../../../utils/handlers';
+import './SearchPopup.css';
+const b = cn('search-card');
+const noop = () => { };
+export const SearchCard = ({ onChange = noop, onClose = noop, onSearchPrev = noop, onSearchNext = noop, onConfigChange = noop, }) => {
+    const [query, setQuery] = useState('');
+    const [isCaseSensitive, setIsCaseSensitive] = useState(false);
+    const [isWholeWord, setIsWholeWord] = useState(false);
+    const textInputRef = useRef(null);
+    const setInputFocus = () => {
+        var _a;
+        (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleInputChange = (event) => {
+        const { target: { value }, } = event;
+        setQuery(value);
+        onChange(value);
+    };
+    const handleClose = () => {
+        setQuery('');
+        onClose(query);
+        setInputFocus();
+    };
+    const handlePrev = () => {
+        onSearchPrev(query);
+        setInputFocus();
+    };
+    const handleNext = () => {
+        onSearchNext(query);
+        setInputFocus();
+    };
+    const handleIsCaseSensitive = () => {
+        onConfigChange({
+            isCaseSensitive: !isCaseSensitive,
+            isWholeWord,
+        });
+        setIsCaseSensitive((isCaseSensitive) => !isCaseSensitive);
+        setInputFocus();
+    };
+    const handleIsWholeWord = () => {
+        onConfigChange({
+            isCaseSensitive,
+            isWholeWord: !isWholeWord,
+        });
+        setIsWholeWord((isWholeWord) => !isWholeWord);
+        setInputFocus();
+    };
+    const handleSearchKeyPress = enterKeyHandler(handleNext);
+    return (React.createElement(Card, { className: b() },
+        React.createElement("div", { className: b('header') },
+            React.createElement("span", { className: b('title') },
+                " ",
+                i18n('title')),
+            React.createElement(Button, { onClick: handleClose, size: "s", view: "flat" },
+                React.createElement(Icon, { data: Xmark, size: 14 }))),
+        React.createElement(TextInput, { controlRef: textInputRef, className: sp({ mb: 2 }), size: "s", autoFocus: true, onKeyPress: handleSearchKeyPress, onChange: handleInputChange, value: query, endContent: React.createElement(React.Fragment, null,
+                React.createElement(Button, { onClick: handlePrev },
+                    React.createElement(Icon, { data: ChevronUp, size: 12 })),
+                React.createElement(Button, { onClick: handleNext },
+                    React.createElement(Icon, { data: ChevronDown, size: 12 }))) }),
+        React.createElement(Checkbox, { size: "m", onUpdate: handleIsCaseSensitive, checked: isCaseSensitive, className: sp({ mr: 4 }) }, i18n('label_case-sensitive')),
+        React.createElement(Checkbox, { size: "m", onUpdate: handleIsWholeWord, checked: isWholeWord }, i18n('label_whole-word'))));
+};
+export const SearchPopup = (_a) => {
+    var { open, anchor, onClose } = _a, props = __rest(_a, ["open", "anchor", "onClose"]);
+    const anchorRef = useRef(anchor);
+    return (React.createElement(Popup, { onEscapeKeyDown: onClose, open: anchorRef.current && open, anchorRef: anchorRef, placement: "bottom-end" },
+        React.createElement(SearchCard, Object.assign({ onClose: onClose }, props))));
+};
+SearchPopup.displayName = 'SearchPopup';
+export function renderSearchPopup(_a) {
+    var { anchor, open, onClose } = _a, props = __rest(_a, ["anchor", "open", "onClose"]);
+    return (React.createElement(React.Fragment, null, anchor && React.createElement(SearchPopup, Object.assign({ open: open, onClose: onClose, anchor: anchor }, props))));
+}

package/build/esm/utils/handlers.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function enterKeyHandler<T>(handler: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;
+export declare function escapeKeyHandler<T>(handler: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;
+export declare function combinedKeyHandler<T>(handlers: Record<string, React.KeyboardEventHandler<T>>): React.KeyboardEventHandler<T>;

package/build/esm/utils/handlers.js

@@ -0,0 +1,23 @@
+import { Key } from '../shortcuts';
+export function enterKeyHandler(handler) {
+    return (event) => {
+        if (event.key === Key.Enter) {
+            handler(event);
+        }
+    };
+}
+export function escapeKeyHandler(handler) {
+    return (event) => {
+        if (event.key === Key.Esc) {
+            handler(event);
+        }
+    };
+}
+export function combinedKeyHandler(handlers) {
+    return (event) => {
+        const handler = handlers[event.key];
+        if (handler) {
+            handler(event);
+        }
+    };
+}

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '13.4.2' !== 'undefined' ? '13.4.2' : 'unknown';
+export const VERSION = typeof '13.5.1' !== 'undefined' ? '13.5.1' : 'unknown';

package/build/styles.css

@@ -1290,6 +1290,15 @@ img.ProseMirror-separator {
 .g-root_theme_dark .g-md-yfm-html-block_editing .g-text-area__content {
   color: var(--g-color-text-primary);
 }
+.g-md-search-card {
+  padding: var(--g-spacing-2) var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-4);
+}
+.g-md-search-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--g-spacing-1);
+}
 .g-md-code-block-toolbar {
   margin: 2px 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.4.2",
+  "version": "13.5.1",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -163,6 +163,7 @@
     "@codemirror/commands": "6.5.0",
     "@codemirror/lang-markdown": "6.2.5",
     "@codemirror/language": "6.10.1",
+    "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
     "@codemirror/view": "6.26.3",
     "@gravity-ui/i18n": "^1.1.0",
@@ -198,9 +199,9 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
+    "@diplodoc/html-extension": "1.2.7",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
-    "@diplodoc/html-extension": "1.2.7",
     "@diplodoc/transform": "4.5.0",
     "@gravity-ui/components": "3.0.0",
     "@gravity-ui/eslint-config": "3.1.1",
@@ -268,9 +269,9 @@
     }
   },
   "peerDependencies": {
+    "@diplodoc/html-extension": "^1.2.7",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
-    "@diplodoc/html-extension": "^1.2.7",
     "@diplodoc/transform": "^4.5.0",
     "@gravity-ui/components": "^3.0.0",
     "@gravity-ui/uikit": "^6.11.0",

package/build/cjs/forms/utils.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function enterKeyHandler<T>(handler: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;

package/build/cjs/forms/utils.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.enterKeyHandler = void 0;
-function enterKeyHandler(handler) {
-    return (event) => {
-        if (event.key === 'Enter') {
-            handler(event);
-        }
-    };
-}
-exports.enterKeyHandler = enterKeyHandler;

package/build/esm/forms/utils.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function enterKeyHandler<T>(handler: React.KeyboardEventHandler<T>): React.KeyboardEventHandler<T>;

package/build/esm/forms/utils.js

@@ -1,7 +0,0 @@
-export function enterKeyHandler(handler) {
-    return (event) => {
-        if (event.key === 'Enter') {
-            handler(event);
-        }
-    };
-}