feat(EditorView): add padding variables (#477)

demo/css-variables/CSSVariables.stories.tsx

@@ -0,0 +1,37 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {CustomCSSVariablesDemo} from './CSSVariablesDemo';
+
+const meta: Meta = {
+    title: 'Experiments / Custom CSS Variables',
+    component: CustomCSSVariablesDemo,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CustomCSSVariablesDemo>;
+
+export const CustomCSSVariables: Story = {
+    argTypes: {
+        '--g-md-toolbar-padding': {
+            control: {type: 'text'},
+            description: 'Toolbar padding',
+        },
+        '--g-md-toolbar-sticky-padding': {
+            control: {type: 'text'},
+            description: 'Toolbar padding in sticky mode',
+        },
+        '--g-md-toolbar-sticky-inset': {
+            control: {type: 'text'},
+            description: 'Toolbar inset in sticky mode',
+        },
+        '--g-md-toolbar-sticky-offset': {
+            control: {type: 'text'},
+            description: 'Toolbar padding in sticky mode',
+        },
+        '--g-md-editor-padding': {
+            control: {type: 'text'},
+            description: 'Editor contents padding',
+        },
+    },
+};

demo/css-variables/CSSVariablesDemo.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {PlaygroundMini} from '../playground/PlaygroundMini';
+
+export const CustomCSSVariablesDemo = React.memo((styles) => {
+    return (
+        <div style={styles}>
+            <PlaygroundMini
+                initialEditor="wysiwyg"
+                settingsVisible
+                withDefaultInitialContent
+                stickyToolbar
+            />
+        </div>
+    );
+});
+
+CustomCSSVariablesDemo.displayName = 'CustomCSSVariables';

docs/how-to-customize-the-editor.md

@@ -0,0 +1,9 @@
+## How to customize the editor
+You can use CSS variables to make editor contents fit your own needs
+| **Variable** | **Description** | **CSS Property Type** | **Default** |
+| :---:  | :---: | :---: | :---: |
+| `--g-md-toolbar-padding` | Toolbar padding | padding | 0px |
+| `--g-md-toolbar-sticky-padding` | Toolbar padding in sticky mode | padding | -4px |
+| `--g-md-toolbar-sticky-inset` | Toolbar inset in sticky mode | inset | -4px |
+| `--g-md-toolbar-sticky-offset` | Toolbar offset in sticky mode | top | 0px |
+| `--g-md-editor-padding` | Editor contents padding | padding | 0px |

src/bundle/MarkupEditorView.scss

@@ -11,13 +11,16 @@ $toolbar-height: 28px;
 
     &__toolbar {
         flex-shrink: 0;
+
+        padding: var(--g-md-toolbar-padding);
     }
 
     &__editor {
         flex-basis: 100%;
         // Height of one line + margin. Because where there is no toolbar and there is a small space, the markup editor is not visible.
         min-height: 36px;
         max-height: 100%;
+        padding: var(--g-md-editor-padding);
 
         cursor: text;
         // We subtract the height of the toolbar only when it is drawn.

src/bundle/WysiwygEditorView.scss

@@ -4,12 +4,16 @@
 
     &__toolbar {
         flex-shrink: 0;
+
+        padding: var(--g-md-toolbar-padding);
     }
 
     &__editor {
         overflow-y: auto;
         flex-grow: 1;
 
+        padding: var(--g-md-editor-padding);
+
         .g-root_theme_dark & .pm-iframe-container {
             background-color: var(--g-color-base-light);
         }

src/bundle/sticky/sticky.scss

@@ -15,9 +15,11 @@ $block: 'g-md-editor-sticky';
     &_sticky-active:not(.#{$block}_clear) {
         z-index: zIndexVars.$sticky-toolbar;
 
+        padding: var(--g-md-toolbar-sticky-padding);
+
         &::before {
             position: absolute;
-            inset: -4px;
+            inset: var(--g-md-toolbar-sticky-inset, -4px);
 
             content: '';