gravity-ui · d3m1d0v · May 5, 2026 · May 6, 2026 · May 14, 2026 · May 15, 2026
@@ -266,6 +266,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
                         table_ignoreSplittersInBlockMath: true,
                         table_ignoreSplittersInInlineCode: true,
                         table_ignoreSplittersInInlineMath: true,
+                        cellBackground: true,
                     },
                     ...wysiwygConfig?.extensionOptions,
                 },

@@ -1,169 +1,6 @@
 export const markup = `
 &nbsp;
 
-Welcome to the editor! Start typing the character \`/\`
-
-![Markdown Editor](https://github.com/user-attachments/assets/0b4e5f65-54cf-475f-9c68-557a4e9edb46 =700x)
-
-## Markdown WYSIWYG and markup editor
-
-MarkdownEditor is a powerful tool for working with Markdown, which combines WYSIWYG and Markup modes. This means that you can create and edit content in a convenient visual mode, as well as have full control over the markup.
-
-The editor supports following formats:
-
-* WYSIWYG
-
-* markup
-
-Click on the gear in the upper right corner to change the mode and see the \`md\` markup.
-
-### Various blocks included
-
-{% cut "Combine different blocks" %}
-
-{% note info "Block for notes, tips, warnings, and alerts" %}
-
-Depending on the content, notes with different titles and formats are used:
-
-* Note: provides additional information.
-* Tip: offers a recommendation.
-* Warning: issues a warning.
-* Alert: indicates a restriction.
-
-{% endnote %}
-
-> [Improve](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-add-preview.md) the editor interface
->
-> *improved by you*
-
-{% endcut %}
-
-Or write your extension using a [convenient api](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-create-extension.md)
-
-### A user-friendly API is provided
-
-Easily connect to your React app with a hook:
-
-\`\`\`plaintext
-import React from 'react';
-import { useMarkdownEditor, MarkdownEditorView } from '@gravity-ui/markdown-editor';
-import { toaster } from '@gravity-ui/uikit/toaster-singleton';
-
-function Editor({ onSubmit }) {
-  const editor = useMarkdownEditor({ allowHTML: false });
-
-  React.useEffect(() => {
-    function submitHandler() {
-      // Serialize current content to markdown markup
-      const value = editor.getValue();
-      onSubmit(value);
-    }
-
-    editor.on('submit', submitHandler);
-    return () => {
-      editor.off('submit', submitHandler);
-    };
-  }, [onSubmit]);
-
-  return <MarkdownEditorView stickyToolbar autofocus editor={editor} />;
-}
-\`\`\`
-
-### Convenient UX control is equipped
-
-#### Hot keys
-
-{% list tabs %}
-
-- WYSIWYG mode
-
-
-
-  |Formatting|Windows Shortcut|Mac OS Shortcut|
-  |:---|:---|:---|
-  |Bold text|Ctrl \\+ B|⌘ \\+ B|
-  |Italic|Ctrl \\+ I|⌘ \\+ I|
-  |Underlined text|Ctrl \\+ U|⌘ \\+ U|
-  |Strikethrough text|Ctrl \\+ Shift \\+ S|⌘ \\+ Shift \\+ S|
-
-- Markup mode
-
-
-
-  |Formatting|Markup|Result|
-  |:---|:---|:---|
-  |Bold text|\`**Bold**\`|**Bold**|
-  |Italic|\`*Italic*\`|*Italic*|
-  |Underlined text|\`++Underlined++\`|++Underlined++|
-  |Strikethrough text|\`~~Strikethrough~~\`|~~Strikethrough~~|
-
-{% endlist %}
-
-#### Context menu
-
-Select this text and you will see **a context menu**.
-
-#### Auto-conversion
-
-Quickly create blocks by entering characters that will be replaced by blocks. For example, the automatic conversion of \`-\` and space creates a list, \`>\` and space creates a quote. Try it out.
-
----
-
-### Current and future features
-
-[X] Some already finished things
-
-[ ] VS Code plugin
-
-[ ] Mobile version
-
-### And a multitude of other functionalities :sweat_smile: :fire:
-
-See <https://github.com/gravity-ui/markdown-editor>
-
-# More examples  {#anchor}
-
-{% cut "Headings" %}
-
-# Heading 1
-
-## Heading 2
-
-### Heading 3
-
-#### Heading 4
-
-##### Heading 5
-
-###### Heading 6
-
-{% endcut %}
-
-{% cut "This is a cut heading" %}
-
-**A** *here* ~~it~~ ++is awesome++ ^c^~o~^n^~t~^e^~n~^t^
-
-> Done deal - deal done \`(quote)\`
-
-{% endcut %}
-
-{% cut "Formulas" %}
-
-This is an inline formula: $\\sqrt{3x-1}+(1+x)^2$
-
-And here is a block formula:
-
-$$f(\\relax{x}) = \\int_{-\\infty}^\\infty
-    \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}
-    \\,d\\xi
-$$
-
-*Click on the formula to edit it*
-
-{% endcut %}
-
----
-
 #|
 ||
 
@@ -247,34 +84,6 @@ New approaches to learning in the digital age
 ||
 |#
 
----
-
-{% note info "Attention, please!" %}
-
-* Thank
-
-  1. you
-
-  2. for
-
-     1. your
-
-  3. attention
-
-* (nested lists)
-
-> > > Quotes
-> >
-> > Nested
->
-> As well
-
-And ##monospace## can be **##com##**##bined\\*##
-
-{% endnote %}
-
----
-
 `.trim();
 
 export const loremIpsum = `

@@ -3,6 +3,7 @@ import {configure} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 
 import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/markdown-editor/styles/markdown.css'; // eslint-disable-line import/order
 
 export const withLang: Decorator = (StoryItem, context) => {
     const lang = context.globals.lang;

@@ -2,6 +2,7 @@ import {ThemeProvider} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 
 import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/markdown-editor/styles/markdown.css'; // eslint-disable-line import/order
 
 export const withThemeProvider: Decorator = (StoryItem, context) => {
     return (

@@ -3,6 +3,7 @@ import {toaster} from '@gravity-ui/uikit/toaster-singleton';
 import type {Decorator} from '@storybook/react';
 
 import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/markdown-editor/styles/markdown.css'; // eslint-disable-line import/order
 
 export const withToaster: Decorator = (StoryItem, context) => {
     return (

@@ -7,6 +7,7 @@ export const Story: StoryObj<typeof component> = {
         mobile: false,
         dnd: true,
         headerRows: true,
+        cellBackground: true,
     },
 };
 Story.storyName = "YFM Table D'n'D";

@@ -10,12 +10,14 @@ export type YfmTableDnDDemoProps = {
     mobile: boolean;
     dnd: boolean;
     headerRows: boolean;
+    cellBackground: boolean;
 };
 
 export const YfmTableDnDDemo = memo<YfmTableDnDDemoProps>(function YfmTableDnDDemo({
     mobile,
     dnd,
     headerRows,
+    cellBackground,
 }) {
     const editor = useMarkdownEditor(
         {
@@ -32,11 +34,12 @@ export const YfmTableDnDDemo = memo<YfmTableDnDDemoProps>(function YfmTableDnDDe
                     yfmTable: {
                         dnd,
                         headerRows,
+                        cellBackground,
                     },
                 },
             },
         },
-        [mobile, dnd, headerRows],
+        [mobile, dnd, headerRows, cellBackground],
     );
 
     return (

@@ -544,7 +544,7 @@ nested table
             ||
             |#
 
-            
+
             `;
 
         same(
@@ -594,7 +594,7 @@ nested table
             ||
             |#
 
-            
+
             `;
 
         same(
@@ -642,4 +642,86 @@ cell11
             ),
         );
     });
+
+    describe('cell-bg serialization', () => {
+        it('should serialize cell-bg on first cell (same line as ||)', () => {
+            const markup = dd`
+                #|
+                ||::{bg="info"}
+
+                cell11
+
+                ||
+                |#
+
+
+                `.trimStart();
+
+            same(markup, doc(table(tbody(tr(td({[YfmTableAttr.CellBg]: 'info'}, p('cell11')))))));
+        });
+
+        it('should serialize cell-bg on non-first cell (same line as |)', () => {
+            const markup = dd`
+                #|
+                ||
+
+                cell11
+
+                |::{bg="warning"}
+
+                cell12
+
+                ||
+                |#
+
+
+                `.trimStart();
+
+            same(
+                markup,
+                doc(
+                    table(
+                        tbody(
+                            tr(
+                                td(p('cell11')),
+                                td({[YfmTableAttr.CellBg]: 'warning'}, p('cell12')),
+                            ),
+                        ),
+                    ),
+                ),
+            );
+        });
+
+        it('should serialize cell-bg on multiple cells', () => {
+            const markup = dd`
+                #|
+                ||::{bg="info"}
+
+                cell11
+
+                |::{bg="danger"}
+
+                cell12
+
+                ||
+                |#
+
+
+                `.trimStart();
+
+            same(
+                markup,
+                doc(
+                    table(
+                        tbody(
+                            tr(
+                                td({[YfmTableAttr.CellBg]: 'info'}, p('cell11')),
+                                td({[YfmTableAttr.CellBg]: 'danger'}, p('cell12')),
+                            ),
+                        ),
+                    ),
+                ),
+            );
+        });
+    });
 });
@@ -8,6 +8,7 @@ export enum YfmTableNode {
 export enum YfmTableAttr {
     Colspan = 'colspan',
     Rowspan = 'rowspan',
+    CellBg = 'data-bg',
     CellAlign = 'data-cell-align',
     HeaderRows = 'data-header-rows',
 }
@@ -92,6 +92,7 @@ export const getSchemaSpecs = (
             [YfmTableAttr.Colspan]: {default: null},
             [YfmTableAttr.Rowspan]: {default: null},
             [YfmTableAttr.CellAlign]: {default: null},
+            [YfmTableAttr.CellBg]: {default: null},
         },
         parseDOM: [
             {tag: 'td', priority: 200},