Merge branch 'main' into fix/sink-list-reverse-selection

Author: makhnatkin

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [15.12.0](https://github.com/gravity-ui/markdown-editor/compare/v15.11.1...v15.12.0) (2025-05-15)
+
+
+### Features
+
+* **view:** added hook for opening files gallery ([#742](https://github.com/gravity-ui/markdown-editor/issues/742)) ([622fdaa](https://github.com/gravity-ui/markdown-editor/commit/622fdaacd563551373119a2837df9e1672ed098a))
+
 ## [15.11.1](https://github.com/gravity-ui/markdown-editor/compare/v15.11.0...v15.11.1) (2025-05-13)
 
 

demo/stories/view/gallery/Gallery.stories.tsx

@@ -0,0 +1,17 @@
+import transform from '@diplodoc/transform';
+import type {StoryObj} from '@storybook/react';
+
+import {ViewWithGallery} from './ViewWithGallery';
+import {galleryMarkup} from './markup';
+
+export const Story: StoryObj<typeof ViewWithGallery> = {
+    args: {
+        html: transform(galleryMarkup).result.html,
+    },
+};
+Story.storyName = 'View gallery';
+
+export default {
+    title: 'View / Gallery',
+    component: ViewWithGallery,
+};

demo/stories/view/gallery/ViewWithGallery.scss

@@ -0,0 +1,5 @@
+.view-with-gallery {
+    img {
+        cursor: pointer;
+    }
+}

demo/stories/view/gallery/ViewWithGallery.tsx

@@ -0,0 +1,28 @@
+import type {FC} from 'react';
+
+import {GalleryProvider} from '@gravity-ui/components';
+
+import {YfmStaticView, type YfmStaticViewProps, useFilesGallery} from 'src/view';
+
+import './ViewWithGallery.scss';
+
+export type ViewWithGalleryProps = YfmStaticViewProps;
+
+const ViewWithGalleryContent: FC<ViewWithGalleryProps> = (props) => {
+    const {openFilesGallery} = useFilesGallery();
+
+    return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        <div className="view-with-gallery" onClick={openFilesGallery}>
+            <YfmStaticView {...props} />
+        </div>
+    );
+};
+
+export const ViewWithGallery: FC<ViewWithGalleryProps> = (props) => {
+    return (
+        <GalleryProvider>
+            <ViewWithGalleryContent {...props} />
+        </GalleryProvider>
+    );
+};

demo/stories/view/gallery/markup.ts

@@ -0,0 +1,10 @@
+export const galleryMarkup = `
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+![Dojocat](https://octodex.github.com/images/dojocat.jpg "The Dojocat")
+
+[Video](https://static.videezy.com/system/resources/previews/000/013/444/original/Water_43_-_37s_-_4k_res.mp4)
+`.trim();

demo/stories/view/staticView/YfmStaticView.stories.tsx

@@ -0,0 +1,18 @@
+import transform from '@diplodoc/transform';
+import type {StoryObj} from '@storybook/react';
+
+import {YfmStaticView} from 'src/view';
+
+import {markup} from '../../../defaults/content';
+
+export const Story: StoryObj<typeof YfmStaticView> = {
+    args: {
+        html: transform(markup).result.html,
+    },
+};
+Story.storyName = 'Static view';
+
+export default {
+    title: 'View / YfmStaticView',
+    component: YfmStaticView,
+};