feat(actions): add heading previews (#582)

Co-authored-by: whiteformed <[email protected]>
Co-authored-by: vladkrk <[email protected]>
Co-authored-by: makhnatkin <[email protected]>
Co-authored-by: d3m1d0v <[email protected]>

Author: 5 people

src/bundle/config/markup.tsx

@@ -3,6 +3,7 @@
  */
 import React from 'react';
 
+import {HeadingPreview} from '../../bundle/config/previews/HeadingPreview';
 import {i18n} from '../../i18n/menubar';
 import {
     insertHRule,
@@ -363,6 +364,7 @@ export const mHeading1ItemData: ToolbarListButtonItemData<CodeEditor> = {
     exec: (e) => toH1(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: <HeadingPreview level={1} />,
 };
 export const mHeading2ItemData: ToolbarListButtonItemData<CodeEditor> = {
     id: ActionName.heading2,
@@ -372,6 +374,7 @@ export const mHeading2ItemData: ToolbarListButtonItemData<CodeEditor> = {
     exec: (e) => toH2(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: <HeadingPreview level={2} />,
 };
 export const mHeading3ItemData: ToolbarListButtonItemData<CodeEditor> = {
     id: ActionName.heading3,
@@ -381,6 +384,7 @@ export const mHeading3ItemData: ToolbarListButtonItemData<CodeEditor> = {
     exec: (e) => toH3(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: <HeadingPreview level={3} />,
 };
 export const mHeading4ItemData: ToolbarListButtonItemData<CodeEditor> = {
     id: ActionName.heading4,
@@ -390,6 +394,7 @@ export const mHeading4ItemData: ToolbarListButtonItemData<CodeEditor> = {
     exec: (e) => toH4(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: <HeadingPreview level={4} />,
 };
 export const mHeading5ItemData: ToolbarListButtonItemData<CodeEditor> = {
     id: ActionName.heading5,
@@ -399,6 +404,7 @@ export const mHeading5ItemData: ToolbarListButtonItemData<CodeEditor> = {
     exec: (e) => toH5(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: <HeadingPreview level={5} />,
 };
 export const mHeading6ItemData: ToolbarListButtonItemData<CodeEditor> = {
     id: ActionName.heading6,
@@ -408,6 +414,7 @@ export const mHeading6ItemData: ToolbarListButtonItemData<CodeEditor> = {
     exec: (e) => toH6(e.cm),
     isActive: inactive,
     isEnable: enable,
+    preview: <HeadingPreview level={6} />,
 };
 
 export const mBulletListItemData: ToolbarListButtonItemData<CodeEditor> = {

src/bundle/config/previews/ActionPreview.scss

@@ -0,0 +1,57 @@
+:root {
+    --toolbar-item-preview-width: 144px;
+    --toolbar-item-preview-height: 104px;
+
+    --toolbar-item-preview-h1-margin: 10px 0 2px;
+    --toolbar-item-preview-h2-margin: 20px 0 4px;
+    --toolbar-item-preview-h3-margin: 24px 0 4px;
+    --toolbar-item-preview-h4-margin: 24px 0 4px;
+    --toolbar-item-preview-h5-margin: 26px 0 6px;
+    --toolbar-item-preview-h6-margin: 28px 0 6px;
+}
+
+.g-md-action-preview {
+    overflow: hidden;
+
+    width: var(--toolbar-item-preview-width);
+    height: var(--toolbar-item-preview-height);
+
+    white-space: pre;
+
+    // Redefine yfm styles
+    &.yfm > *:not(h2):not(h3):not(h4):not(h5):not(h6):first-child {
+        /* stylelint-disable-next-line declaration-no-important */
+        margin: var(--toolbar-item-preview-h1-margin) !important;
+    }
+
+    &.yfm > h2 {
+        /* stylelint-disable-next-line declaration-no-important */
+        margin: var(--toolbar-item-preview-h2-margin) !important;
+    }
+
+    &.yfm > h3 {
+        /* stylelint-disable-next-line declaration-no-important */
+        margin: var(--toolbar-item-preview-h3-margin) !important;
+    }
+
+    &.yfm > h4 {
+        /* stylelint-disable-next-line declaration-no-important */
+        margin: var(--toolbar-item-preview-h4-margin) !important;
+    }
+
+    &.yfm > h5 {
+        /* stylelint-disable-next-line declaration-no-important */
+        margin: var(--toolbar-item-preview-h5-margin) !important;
+    }
+
+    &.yfm > h6 {
+        /* stylelint-disable-next-line declaration-no-important */
+        margin: var(--toolbar-item-preview-h6-margin) !important;
+    }
+
+    &__text-with-head {
+        margin-top: 0;
+
+        color: var(--g-color-text-hint);
+    }
+}

src/bundle/config/previews/ActionPreview.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {cn} from '../../../classname';
+
+import './ActionPreview.scss';
+
+const b = cn('action-preview');
+
+export const ActionPreview = ({children}: {children: React.ReactNode}) => {
+    return <div className={b(null, ['yfm'])}>{children}</div>;
+};

src/bundle/config/previews/HeadingPreview.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {cn} from '../../../classname';
+import {i18n} from '../../../i18n/action-previews';
+
+import {ActionPreview} from './ActionPreview';
+
+import './ActionPreview.scss';
+
+const b = cn('action-preview');
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export const HeadingPreview = ({level}: {level: HeadingLevel}) => {
+    const Heading = `h${level}` as const;
+
+    return (
+        <ActionPreview>
+            <Heading>{i18n('heading')}</Heading>
+            <p className={b('text-with-head')}>{i18n('text-with-head')}</p>
+        </ActionPreview>
+    );
+};

src/bundle/config/previews/TextPreview.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {cn} from '../../../classname';
+import {i18n} from '../../../i18n/action-previews';
+
+import {ActionPreview} from './ActionPreview';
+
+import './ActionPreview.scss';
+
+const b = cn('action-preview');
+
+export const TextPreview = () => {
+    return (
+        <ActionPreview>
+            <p className={b('text')}>{i18n('text')}</p>
+        </ActionPreview>
+    );
+};

src/bundle/config/w-heading-config.ts renamed to src/bundle/config/w-heading-config.tsx

@@ -1,9 +1,13 @@
+import React from 'react';
+
 import {i18n} from '../../i18n/menubar';
 import {Action as A, formatter as f} from '../../shortcuts';
 import type {WToolbarListButtonData, WToolbarListButtonItemData} from '../toolbar/types';
 
 import {ActionName} from './action-names';
 import {icons} from './icons';
+import {HeadingPreview} from './previews/HeadingPreview';
+import {TextPreview} from './previews/TextPreview';
 
 export const wTextItemData: WToolbarListButtonItemData = {
     id: ActionName.paragraph,
@@ -14,6 +18,7 @@ export const wTextItemData: WToolbarListButtonItemData = {
     isActive: (e) => e.actions.toParagraph.isActive(),
     isEnable: (e) => e.actions.toParagraph.isEnable(),
     doNotActivateList: true,
+    preview: <TextPreview />,
 };
 export const wHeading1ItemData: WToolbarListButtonItemData = {
     id: ActionName.heading1,
@@ -23,6 +28,7 @@ export const wHeading1ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH1.run(),
     isActive: (e) => e.actions.toH1.isActive(),
     isEnable: (e) => e.actions.toH1.isEnable(),
+    preview: <HeadingPreview level={1} />,
 };
 export const wHeading2ItemData: WToolbarListButtonItemData = {
     id: ActionName.heading2,
@@ -32,6 +38,7 @@ export const wHeading2ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH2.run(),
     isActive: (e) => e.actions.toH2.isActive(),
     isEnable: (e) => e.actions.toH2.isEnable(),
+    preview: <HeadingPreview level={2} />,
 };
 export const wHeading3ItemData: WToolbarListButtonItemData = {
     id: ActionName.heading3,
@@ -41,6 +48,7 @@ export const wHeading3ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH3.run(),
     isActive: (e) => e.actions.toH3.isActive(),
     isEnable: (e) => e.actions.toH3.isEnable(),
+    preview: <HeadingPreview level={3} />,
 };
 export const wHeading4ItemData: WToolbarListButtonItemData = {
     id: ActionName.heading4,
@@ -50,6 +58,7 @@ export const wHeading4ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH4.run(),
     isActive: (e) => e.actions.toH4.isActive(),
     isEnable: (e) => e.actions.toH4.isEnable(),
+    preview: <HeadingPreview level={4} />,
 };
 export const wHeading5ItemData: WToolbarListButtonItemData = {
     id: ActionName.heading5,
@@ -59,6 +68,7 @@ export const wHeading5ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH5.run(),
     isActive: (e) => e.actions.toH5.isActive(),
     isEnable: (e) => e.actions.toH5.isEnable(),
+    preview: <HeadingPreview level={5} />,
 };
 export const wHeading6ItemData: WToolbarListButtonItemData = {
     id: ActionName.heading6,
@@ -68,6 +78,7 @@ export const wHeading6ItemData: WToolbarListButtonItemData = {
     exec: (e) => e.actions.toH6.run(),
     isActive: (e) => e.actions.toH6.isActive(),
     isEnable: (e) => e.actions.toH6.isEnable(),
+    preview: <HeadingPreview level={6} />,
 };
 
 export const wHeadingListConfig: WToolbarListButtonData = {

src/bundle/toolbar/utils/toolbarsConfigs.ts

@@ -29,6 +29,7 @@ interface TransformedItem {
     icon?: ToolbarIconData;
     hotkey?: string;
     withArrow?: boolean;
+    preview?: React.ReactNode;
     wysiwyg?: ToolbarItemWysiwyg<ToolbarDataType>;
     markup?: ToolbarItemMarkup<ToolbarDataType>;
 }
@@ -46,6 +47,7 @@ const transformItem = (
     }
 
     const isListButton = item.view.type === ToolbarDataType.ListButton;
+    const isSingleButton = item.view.type === ToolbarDataType.SingleButton;
 
     return {
         type: item.view.type ?? ToolbarDataType.SingleButton,
@@ -54,6 +56,7 @@ const transformItem = (
         hint: item.view.hint,
         icon: item.view.icon,
         hotkey: item.view.hotkey,
+        ...(isSingleButton && {preview: (item.view as any).preview}),
         ...(isListButton && {withArrow: (item.view as any).withArrow}),
         ...(type === 'wysiwyg' && item.wysiwyg && {...item.wysiwyg}),
         ...(type === 'markup' && item.markup && {...item.markup}),

src/extensions/behavior/CommandMenu/component.tsx

@@ -7,6 +7,7 @@ import {cn} from '../../../classname';
 import {i18n} from '../../../i18n/suggest';
 import {isFunction} from '../../../lodash';
 import {ErrorLoggerBoundary} from '../../../react-utils/ErrorBoundary';
+import {PreviewTooltip} from '../../../toolbar/PreviewTooltip';
 import {AutocompletePopupProps} from '../../../utils/autocomplete-popup';
 
 import type {CommandAction} from './types';
@@ -24,7 +25,10 @@ function calcListHeight(itemsCount: number): number | undefined {
     return Math.min(MAX_LIST_HEIGHT, itemsCount * ITEM_HEIGHT);
 }
 
-export type CommandMenuItem = Pick<CommandAction, 'id' | 'title' | 'icon' | 'hotkey' | 'hint'>;
+export type CommandMenuItem = Pick<
+    CommandAction,
+    'id' | 'title' | 'icon' | 'hotkey' | 'hint' | 'preview'
+>;
 
 export type CommandMenuComponentProps = AutocompletePopupProps & {
     currentIndex?: number;
@@ -73,20 +77,23 @@ export const CommandMenuComponent: React.FC<CommandMenuComponentProps> = ({
     );
 };
 
-function renderItem({id, title, icon, hotkey, hint}: CommandMenuItem): React.ReactNode {
+function renderItem({id, title, icon, hotkey, hint, preview}: CommandMenuItem): React.ReactNode {
     const titleText = isFunction(title) ? title() : title;
     const hintText = isFunction(hint) ? hint() : hint;
+
     return (
-        <div key={id} className={b('item', {id})}>
-            <Icon data={icon.data} size={20} className={b('item-icon')} />
-            <div className={b('item-body')}>
-                <span className={b('item-title')}>{titleText}</span>
-                <div className={b('item-extra')}>
-                    {hotkey && <Hotkey value={hotkey} className={b('item-hotkey')} />}
-                    {hintText && <HelpPopover className={b('item- hint')} content={hintText} />}
+        <PreviewTooltip preview={preview}>
+            <div key={id} className={b('item', {id})}>
+                <Icon data={icon.data} size={20} className={b('item-icon')} />
+                <div className={b('item-body')}>
+                    <span className={b('item-title')}>{titleText}</span>
+                    <div className={b('item-extra')}>
+                        {hotkey && <Hotkey value={hotkey} className={b('item-hotkey')} />}
+                        {hintText && <HelpPopover className={b('item-hint')} content={hintText} />}
+                    </div>
                 </div>
             </div>
-        </div>
+        </PreviewTooltip>
     );
 }
 

src/i18n/action-previews/en.json

@@ -0,0 +1,5 @@
+{
+  "text": "This is a text without a title. \nBoth the title and the text \nbelow it can be highlighted in bold, italics, color, \nstrikethrough, and underline. You can also add lists, \ntables, links, formulas, anchors, \nand code blocks.",
+  "text-with-head": "This is the text with the title. \nBoth the title and the text \nbelow it can be highlighted in bold, italics, color, \nstrikethrough, and underline. You can also add lists, \ntables, links, formulas, anchors, \nand code blocks.",
+  "heading": "Text"
+}

src/i18n/action-previews/index.ts

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