Skip to content

Commit 1eb4d11

Browse files
makhnatkinmakhnatkin
authored
feat(YfmHtmlBlock): added YfmHtmlBlock extension (#281)
1 parent e2b7b4e commit 1eb4d11

39 files changed

+1291
-134
lines changed

‎demo/Playground.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
import type {ToolbarActionData} from '../src/bundle/Editor';
1717
import {Math} from '../src/extensions/yfm/Math';
1818
import {Mermaid} from '../src/extensions/yfm/Mermaid';
19+
import {YfmHtmlBlock} from '../src/extensions/yfm/YfmHtmlBlock';
1920
import {cloneDeep} from '../src/lodash';
2021
import type {FileUploadHandler} from '../src/utils/upload';
2122
import {VERSION} from '../src/version';
@@ -25,6 +26,7 @@ import {WysiwygDevTools} from './ProseMirrorDevTools';
2526
import {SplitModePreview} from './SplitModePreview';
2627
import {block} from './cn';
2728
import {randomDelay} from './delay';
29+
import useYfmHtmlBlockStyles from './hooks/useYfmHtmlBlockStyles';
2830
import {debouncedUpdateLocation as updateLocation} from './location';
2931
import {plugins} from './md-plugins';
3032

@@ -39,7 +41,7 @@ const fileUploadHandler: FileUploadHandler = async (file) => {
3941

4042
const mToolbarConfig = [
4143
...markupToolbarConfigs.mToolbarConfig,
42-
[markupToolbarConfigs.mMermaidButton],
44+
[markupToolbarConfigs.mMermaidButton, markupToolbarConfigs.mYfmHtmlBlockButton],
4345
];
4446
mToolbarConfig[2].push(markupToolbarConfigs.mMathListItem);
4547

@@ -155,6 +157,9 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
155157
/* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime'
156158
);
157159
},
160+
})
161+
.use(YfmHtmlBlock, {
162+
useConfig: useYfmHtmlBlockStyles,
158163
}),
159164
});
160165

‎demo/RememberMode.stories.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,112 @@ MarkdownEditor API provides access to flexible configuration, in this demo, when
1919
2020
For this example, the settings are saved in localStorage, but you can use other methods
2121
22+
## Next is another YFM HTML block with styles
23+
24+
::: html
25+
26+
<style>
27+
html, body {
28+
background-color: var(--yfm-html-color-background);
29+
color: var(--yfm-html-color-text-primary);
30+
font-size: var(--yfm-html-font-size);
31+
font-family: var(--yfm-html-font-family);
32+
}
33+
.container {
34+
display: flex;
35+
margin: 20px;
36+
}
37+
.main {
38+
flex: 2;
39+
padding: 20px;
40+
}
41+
42+
.main ul {
43+
list-style-type: disc;
44+
margin-left: 20px;
45+
}
46+
47+
aside {
48+
flex: 1;
49+
padding: 20px;
50+
}
51+
52+
aside blockquote {
53+
font-style: italic;
54+
color: var(--yfm-html-color-text-primary);
55+
border-left: 4px solid var(--yfm-html-color-text-primary);
56+
padding-left: 10px;
57+
}
58+
59+
.info-block {
60+
margin-top: 20px;
61+
}
62+
63+
.info-block h3 {
64+
color: var(--yfm-html-color-text-primary);
65+
}
66+
67+
.info-block ul {
68+
list-style-type: circle;
69+
margin-left: 20px;
70+
}
71+
72+
.dark a {
73+
color: red;
74+
text-decoration: none;
75+
}
76+
.light a {
77+
color: blue;
78+
text-decoration: none;
79+
}
80+
81+
</style>
82+
83+
<header>
84+
<h1>Understanding HTML: The Backbone of Web Development</h1>
85+
</header>
86+
87+
<div class="container">
88+
<div class="main">
89+
<p>HTML, or HyperText Markup Language, is the standard language used to create web pages. It allows developers to structure content and make it accessible and attractive to users.</p>
90+
91+
<p>HTML was first developed by Tim Berners-Lee in 1991, and since then, it has gone through numerous iterations to become the versatile tool it is today. One of the core tenets of HTML is its simplicity and accessibility. By using a series of tags, you can define various elements on a webpage, such as headings, paragraphs, links, images, and more.</p>
92+
93+
<p>HTML documents are plain text files that can be created and edited with any text editor. When opened in a web browser, the HTML code is parsed and rendered to display the structured content. This is achieved through the use of various HTML elements, each represented by tags.</p>
94+
95+
<p>Some of the most commonly used HTML tags include:</p>
96+
<ul>
97+
<li><strong>&lt;h1&gt; to &lt;h6&gt;</strong> – Define headings.</li>
98+
<li><strong>&lt;p&gt;</strong> – Defines a paragraph.</li>
99+
<li><strong>&lt;a&gt;</strong> – Defines a hyperlink.</li>
100+
<li><strong>&lt;img&gt;</strong> – Embeds an image.</li>
101+
<li><strong>&lt;div&gt;</strong> – Defines a division or a section in a document.</li>
102+
</ul>
103+
104+
<p>HTML also supports multimedia, allowing you to embed videos, audio, and interactive content. Modern HTML (HTML5) introduces several new elements and APIs to enhance functionality, making it easier for developers to create rich, interactive web experiences.</p>
105+
106+
<p>In conclusion, understanding HTML is fundamental for web development. Its role in structuring and presenting content on the web is indispensable. Whether you are a beginner or a seasoned developer, mastering HTML opens the door to creating engaging and effective web pages.</p>
107+
</div>
108+
109+
<aside>
110+
<blockquote>
111+
"HTML is the skeleton of the web, essential and foundational. Every web page owes its structure to HTML."
112+
</blockquote>
113+
114+
<div class="info-block">
115+
<h3>Quick Facts:</h3>
116+
<ul>
117+
<li>Released in 1991 by Tim Berners-Lee.</li>
118+
<li>The latest version is HTML5.</li>
119+
<li>HTML stands for HyperText Markup Language.</li>
120+
</ul>
121+
</div>
122+
</aside>
123+
</div>
124+
125+
126+
:::
127+
22128
`.trim(),
23129
};
24130

‎demo/SplitModePreview.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,22 @@ import {useThemeValue} from '@gravity-ui/uikit';
55

66
import {MarkupString, colorClassName} from '../src';
77
import {debounce} from '../src/lodash';
8-
import {YfmHtml} from '../src/view/components/YfmHtml';
8+
import {YfmStaticView} from '../src/view/components/YfmHtml';
99
import {withLatex} from '../src/view/hocs/withLatex';
1010
import {MermaidConfig, withMermaid} from '../src/view/hocs/withMermaid';
11+
import {withYfmHtmlBlock} from '../src/view/hocs/withYfmHtml';
1112

12-
import {LATEX_RUNTIME, MERMAID_RUNTIME} from './md-plugins';
13+
import useYfmHtmlBlockStyles from './hooks/useYfmHtmlBlockStyles';
14+
import {LATEX_RUNTIME, MERMAID_RUNTIME, YFM_HTML_BLOCK_RUNTIME} from './md-plugins';
1315

1416
const ML_ATTR = 'data-ml';
1517
const mermaidConfig: MermaidConfig = {theme: 'forest'};
1618

17-
const Html = withMermaid({runtime: MERMAID_RUNTIME})(withLatex({runtime: LATEX_RUNTIME})(YfmHtml));
19+
const Preview = withMermaid({runtime: MERMAID_RUNTIME})(
20+
withLatex({runtime: LATEX_RUNTIME})(
21+
withYfmHtmlBlock({runtime: YFM_HTML_BLOCK_RUNTIME})(YfmStaticView),
22+
),
23+
);
1824

1925
export type SplitModePreviewProps = {
2026
plugins?: import('markdown-it').PluginSimple[];
@@ -57,13 +63,16 @@ export const SplitModePreview: React.FC<SplitModePreviewProps> = (props) => {
5763
render();
5864
}, [props, render]);
5965

66+
const yfmHtmlBlockConfig = useYfmHtmlBlockStyles();
67+
6068
return (
61-
<Html
69+
<Preview
6270
ref={divRef}
6371
html={html}
6472
meta={meta}
6573
noListReset
6674
mermaidConfig={mermaidConfig}
75+
yfmHtmlBlockConfig={yfmHtmlBlockConfig}
6776
className="demo-preview"
6877
/>
6978
);

‎demo/YFM.stories.tsx‎

Lines changed: 150 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,141 @@ Content displayed when clicked.
7373
The text of tab2.
7474
7575
{% endlist %}
76+
`.trim(),
77+
78+
yfmHtmlBlock: `
79+
Some text here
80+
81+
## Next is YFM HTML block
82+
83+
::: html
84+
85+
<style>
86+
html, body {
87+
background-color: var(--yfm-html-color-background);
88+
color: var(--yfm-html-color-text-primary);
89+
font-size: var(--yfm-html-font-size);
90+
font-family: var(--yfm-html-font-family);
91+
}
92+
</style>
93+
94+
<h1>Duis faucibus dignissim posuere</h1>
95+
<p>Nam dui purus, imperdiet ut eros a, volutpat blandit lectus. Morbi tincidunt ipsum erat, non mollis augue gravida ac. Morbi mi ligula, blandit quis magna at, porttitor dapibus nisl. Maecenas vestibulum dolor id sem faucibus rutrum. Nullam lacinia ac purus non auctor. Donec rutrum gravida neque, ac viverra nisi molestie et. Curabitur non mi vitae felis mollis rutrum. Phasellus ornare sem vel nunc pulvinar aliquet. Etiam id viverra libero, a accumsan felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
96+
<p>Mauris nisi nunc, elementum non ornare sit amet, vehicula nec dui. Cras rhoncus dui ut sagittis placerat. Integer eu augue sed risus faucibus mattis. Nulla vitae dapibus lectus. Suspendisse nibh lacus, porttitor in posuere at, elementum non ligula. Phasellus porttitor egestas mi non lacinia. Nunc volutpat nisl sit amet venenatis tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus malesuada tortor nec feugiat euismod. Etiam molestie pretium odio, egestas venenatis eros efficitur eget. Ut at dignissim elit.</p>
97+
<p>Sed congue rhoncus tincidunt. Donec porttitor diam vehicula diam vehicula, vel imperdiet mauris mollis. Sed tincidunt aliquam est eu fermentum. Proin vestibulum bibendum scelerisque. Quisque facilisis neque diam, in aliquam nisl aliquam auctor. Ut at elementum diam, eget tincidunt nulla. Quisque ac ligula eget velit tempor tristique. Aliquam blandit diam magna, et accumsan leo fringilla eget. Phasellus ut lectus urna. Proin ac est et risus elementum consequat. Mauris maximus porttitor massa, in rutrum odio blandit non. Curabitur posuere sem eu nulla efficitur, in placerat diam consectetur. Duis ipsum libero, convallis vel hendrerit sed, bibendum id ipsum. Sed sollicitudin maximus diam, at facilisis ipsum vulputate nec. Morbi eu risus ultricies, bibendum tortor non, interdum sem.</p>
98+
<p>Suspendisse tellus nulla, eleifend in libero id, tristique ultricies odio. Vivamus vel ex laoreet, scelerisque ligula ut, vehicula elit. Ut commodo enim at semper finibus. In at vestibulum ante. Praesent bibendum dolor eget metus semper faucibus. Duis luctus feugiat neque, eu blandit elit molestie in. Quisque laoreet consectetur felis. Suspendisse non turpis id sapien rutrum placerat ac nec dolor. Donec maximus justo ac vestibulum ullamcorper.</p>
99+
<p>Cras tristique dolor magna, quis consectetur odio aliquet at. In eu enim at nisl ultricies ultrices nec et est. Praesent at velit in mi posuere hendrerit nec eu sapien. Fusce sed porta mauris, vitae vehicula mi. Cras facilisis mauris a turpis vehicula fermentum. Suspendisse potenti. Maecenas a odio non neque egestas blandit ac vitae dui. Mauris suscipit turpis efficitur turpis volutpat scelerisque. Proin sit amet lacinia sapien. Donec at metus nec tortor dictum rutrum vehicula at turpis. Etiam consectetur odio in felis sollicitudin mattis.</p>
100+
101+
:::
102+
103+
Simple text again
104+
105+
## Next is another YFM HTML block with styles
106+
107+
::: html
108+
109+
<style>
110+
html, body {
111+
background-color: var(--yfm-html-color-background);
112+
color: var(--yfm-html-color-text-primary);
113+
font-size: var(--yfm-html-font-size);
114+
font-family: var(--yfm-html-font-family);
115+
}
116+
.container {
117+
display: flex;
118+
margin: 20px;
119+
}
120+
.main {
121+
flex: 2;
122+
padding: 20px;
123+
}
124+
125+
.main ul {
126+
list-style-type: disc;
127+
margin-left: 20px;
128+
}
129+
130+
aside {
131+
flex: 1;
132+
padding: 20px;
133+
}
134+
135+
aside blockquote {
136+
font-style: italic;
137+
color: var(--yfm-html-color-text-primary);
138+
border-left: 4px solid var(--yfm-html-color-text-primary);
139+
padding-left: 10px;
140+
}
141+
142+
.info-block {
143+
margin-top: 20px;
144+
}
145+
146+
.info-block h3 {
147+
color: var(--yfm-html-color-text-primary);
148+
}
149+
150+
.info-block ul {
151+
list-style-type: circle;
152+
margin-left: 20px;
153+
}
154+
155+
.dark a {
156+
color: red;
157+
text-decoration: none;
158+
}
159+
.light a {
160+
color: blue;
161+
text-decoration: none;
162+
}
163+
164+
</style>
165+
166+
<header>
167+
<h1>Understanding HTML: The Backbone of Web Development</h1>
168+
</header>
169+
170+
<div class="container">
171+
<div class="main">
172+
<p>HTML, or HyperText Markup Language, is the standard language used to create web pages. It allows developers to structure content and make it accessible and attractive to users.</p>
173+
174+
<p>HTML was first developed by Tim Berners-Lee in 1991, and since then, it has gone through numerous iterations to become the versatile tool it is today. One of the core tenets of HTML is its simplicity and accessibility. By using a series of tags, you can define various elements on a webpage, such as headings, paragraphs, links, images, and more.</p>
175+
176+
<p>HTML documents are plain text files that can be created and edited with any text editor. When opened in a web browser, the HTML code is parsed and rendered to display the structured content. This is achieved through the use of various HTML elements, each represented by tags.</p>
177+
178+
<p>Some of the most commonly used HTML tags include:</p>
179+
<ul>
180+
<li><strong>&lt;h1&gt; to &lt;h6&gt;</strong> – Define headings.</li>
181+
<li><strong>&lt;p&gt;</strong> – Defines a paragraph.</li>
182+
<li><strong>&lt;a&gt;</strong> – Defines a hyperlink.</li>
183+
<li><strong>&lt;img&gt;</strong> – Embeds an image.</li>
184+
<li><strong>&lt;div&gt;</strong> – Defines a division or a section in a document.</li>
185+
</ul>
186+
187+
<p>HTML also supports multimedia, allowing you to embed videos, audio, and interactive content. Modern HTML (HTML5) introduces several new elements and APIs to enhance functionality, making it easier for developers to create rich, interactive web experiences.</p>
188+
189+
<p>In conclusion, understanding HTML is fundamental for web development. Its role in structuring and presenting content on the web is indispensable. Whether you are a beginner or a seasoned developer, mastering HTML opens the door to creating engaging and effective web pages.</p>
190+
</div>
191+
192+
<aside>
193+
<blockquote>
194+
"HTML is the skeleton of the web, essential and foundational. Every web page owes its structure to HTML."
195+
</blockquote>
196+
197+
<div class="info-block">
198+
<h3>Quick Facts:</h3>
199+
<ul>
200+
<li>Released in 1991 by Tim Berners-Lee.</li>
201+
<li>The latest version is HTML5.</li>
202+
<li>HTML stands for HyperText Markup Language.</li>
203+
</ul>
204+
</div>
205+
</aside>
206+
</div>
207+
208+
209+
:::
210+
76211
`.trim(),
77212

78213
yfmFile: `
@@ -210,6 +345,10 @@ export const YfmTabs: StoryFn<PlaygroundStoryProps> = (props) => (
210345
<PlaygroundComponent {...props} initial={markup.yfmTabs} />
211346
);
212347

348+
export const YfmHtmlBlock: StoryFn<PlaygroundStoryProps> = (props) => (
349+
<PlaygroundComponent {...props} initial={markup.yfmHtmlBlock} sanitizeHtml={false} />
350+
);
351+
213352
export const YfmFile: StoryFn<PlaygroundStoryProps> = (props) => (
214353
<PlaygroundComponent {...props} initial={markup.yfmFile} />
215354
);
@@ -226,18 +365,23 @@ export const MermaidDiagram: StoryFn<PlaygroundStoryProps> = (props) => (
226365
<PlaygroundComponent {...props} initial={markup.mermaidDiagram} />
227366
);
228367

368+
TextMarks.storyName = 'Text';
229369
TextMarks.args = args;
230-
YfmNote.args = args;
231370
YfmNote.storyName = 'YFM Note';
232-
YfmCut.args = args;
371+
YfmNote.args = args;
233372
YfmCut.storyName = 'YFM Cut';
234-
YfmTabs.args = args;
373+
YfmCut.args = args;
235374
YfmTabs.storyName = 'YFM Tabs';
236-
YfmFile.args = args;
375+
YfmTabs.args = args;
376+
YfmHtmlBlock.storyName = 'YFM HTML';
377+
YfmHtmlBlock.args = args;
237378
YfmFile.storyName = 'YFM File';
238-
YfmTable.args = args;
379+
YfmFile.args = args;
239380
YfmTable.storyName = 'YFM Table';
381+
YfmTable.args = args;
382+
Tasklist.storyName = 'Task list';
240383
Tasklist.args = args;
241-
LaTeXFormulas.args = args;
242384
LaTeXFormulas.storyName = 'LaTeX Formulas';
385+
LaTeXFormulas.args = args;
386+
MermaidDiagram.storyName = 'Mermaid diagram';
243387
MermaidDiagram.args = args;

0 commit comments

Comments
 (0)