fix: address grid templates lint

Author: makhnatkin

packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts

@@ -47,7 +47,11 @@ describe('GridBlockTemplates extension', () => {
                 doc(
                     gridBlockTemplates({
                         [GridBlockTemplatesAttrs.blocks]: [
-                            {id: 'block-1', css: '& { padding: 12px; }\nh3 { margin: 0; }', content: 'First'},
+                            {
+                                id: 'block-1',
+                                css: '& { padding: 12px; }\nh3 { margin: 0; }',
+                                content: 'First',
+                            },
                         ],
                         [GridBlockTemplatesAttrs.customCss]: '.grid { align-items: center; }',
                         [GridBlockTemplatesAttrs.EntityId]: 'grid_block_templates-1',

packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx

@@ -1,6 +1,12 @@
+import type {
+    ClipboardEvent,
+    FocusEvent,
+    MouseEvent,
+    PointerEvent as ReactPointerEvent,
+} from 'react';
+
 import {Gear, GripHorizontal} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
-import type {ClipboardEvent, FocusEvent, MouseEvent, PointerEvent as ReactPointerEvent} from 'react';
 
 import {i18n} from 'src/i18n/grid-block-templates';
 

packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss

@@ -129,8 +129,8 @@
         align-items: center;
 
         width: 100%;
-        margin-top: 8px;
         min-height: 56px;
+        margin-top: 8px;
         padding: 12px;
 
         cursor: pointer;
@@ -179,6 +179,7 @@
     &__field-label {
         font-size: var(--g-text-caption-1-font-size);
         line-height: var(--g-text-caption-1-line-height);
+
         color: var(--g-color-text-secondary);
     }
 }

packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx

@@ -10,6 +10,7 @@ import {useBooleanState, useElementState} from 'src/react-utils/hooks';
 import {removeNode} from 'src/utils/remove-node';
 
 import {GridBlockTemplatesConsts} from '../GridBlockTemplatesSpecs/const';
+import {mergeTemplatesById, readStoredTemplates} from '../templates';
 import type {
     GridBlock,
     GridBlockBlockTemplate,
@@ -18,9 +19,11 @@ import type {
     GridBlockTemplateBlock,
     GridBlockTemplatesOptions,
 } from '../types';
-import {mergeTemplatesById, readStoredTemplates} from '../templates';
 
 import {BlockInsertPopup} from './BlockInsertPopup';
+import {GridBlockItem} from './GridBlockItem';
+import {BlockSettingsPopup, ContainerCssPopup} from './SettingsPopups';
+import {TemplatesPopup} from './TemplatesPopup';
 import {
     buildScopedCss,
     containerTemplateToAttrs,
@@ -30,18 +33,16 @@ import {
     rawTemplateBlockToBlock,
     templateToBlock,
 } from './blockUtils';
-import {TemplatesPopup} from './TemplatesPopup';
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 import {useGridBlockDrag} from './drag';
-import {GridBlockItem} from './GridBlockItem';
-import {BlockSettingsPopup, ContainerCssPopup} from './SettingsPopups';
 
 import './GridBlockTemplates.scss';
 
 export {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 
 const b = cnGridBlockTemplates;
 const stop = STOP_EVENT_CLASSNAME;
+const EMPTY_BLOCKS: GridBlock[] = [];
 
 export const GridBlockTemplatesView: React.FC<{
     node: Node;
@@ -52,7 +53,8 @@ export const GridBlockTemplatesView: React.FC<{
 }> = ({node, getPos, view, onChange, options}) => {
     const entityId: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId];
     const customCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.customCss] ?? '';
-    const blocks: GridBlock[] = node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks] ?? [];
+    const blocks: GridBlock[] =
+        node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks] ?? EMPTY_BLOCKS;
     const {templates} = options;
 
     const scopeClass = useMemo(() => getGridScopeClass(entityId), [entityId]);

packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx

@@ -36,7 +36,9 @@ export const BlockSettingsPopup: React.FC<{
                     controlProps={{className: stop}}
                     value={css}
                     onUpdate={onCssChange}
-                    placeholder={'& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'}
+                    placeholder={
+                        '& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'
+                    }
                     minRows={5}
                 />
             </div>
@@ -57,7 +59,9 @@ export const ContainerCssPopup: React.FC<{
                 controlProps={{className: stop}}
                 value={css}
                 onUpdate={onCssChange}
-                placeholder={'.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'}
+                placeholder={
+                    '.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'
+                }
                 minRows={6}
                 autoFocus
             />

packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx

@@ -6,8 +6,8 @@ import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
 import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
 import {i18n} from 'src/i18n/grid-block-templates';
 
-import type {GridBlockTemplate} from '../types';
 import {clearStoredTemplates, parseTemplates, saveTemplates} from '../templates';
+import type {GridBlockTemplate} from '../types';
 
 import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
 

packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts

@@ -56,6 +56,5 @@ export const isContainerTemplate = (
     template: GridBlockTemplate,
 ): template is GridBlockContainerTemplate => template.type === 'container';
 
-export const isBlockTemplate = (
-    template: GridBlockTemplate,
-): template is GridBlockBlockTemplate => template.type === 'block';
+export const isBlockTemplate = (template: GridBlockTemplate): template is GridBlockBlockTemplate =>
+    template.type === 'block';

packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts

@@ -19,13 +19,11 @@ const getDropPlacement = (rect: DOMRect, clientX: number, clientY: number): Drop
     const centerY = rect.top + rect.height / 2;
     const useHorizontalAxis = Math.abs(clientX - centerX) > Math.abs(clientY - centerY);
 
-    return useHorizontalAxis
-        ? clientX < centerX
-            ? 'before'
-            : 'after'
-        : clientY < centerY
-          ? 'before'
-          : 'after';
+    if (useHorizontalAxis) {
+        return clientX < centerX ? 'before' : 'after';
+    }
+
+    return clientY < centerY ? 'before' : 'after';
 };
 
 const getPointerDropTarget = (

packages/editor/src/extensions/additional/GridBlockTemplates/css.ts

@@ -10,9 +10,7 @@ export const inlineToRule = (declarations: string, selector = '&'): string => {
 };
 
 const scopeSelector = (selector: string, base: string) =>
-    selector.includes('&')
-        ? selector.replace(/&/g, base)
-        : `${base} ${selector}`;
+    selector.includes('&') ? selector.replace(/&/g, base) : `${base} ${selector}`;
 
 /**
  * Prefixes every top-level selector with `base` so rules stay local. `&` in a selector

packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss

@@ -12,15 +12,14 @@
     &__editor {
         display: flex;
         flex-direction: column;
-
         gap: 8px;
+
         padding: 8px;
     }
 
     &__controls {
         display: flex;
         justify-content: end;
-
         gap: 8px;
     }
 }