feat(EditorView): change default selection variable names

gravity-ui · Dec 10, 2024 · d5ffabc · d5ffabc
1 parent 0ae5e41
commit d5ffabc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 26 deletions.
diff --git a/demo/stories/css-variables/CSSVariables.stories.tsx b/demo/stories/css-variables/CSSVariables.stories.tsx
@@ -28,27 +28,23 @@ export const Story: StoryObj<typeof component> = {
             control: {type: 'text'},
             description: 'Editor contents padding',
         },
-        '--g-selection-bg-color': {
-            control: {type: 'text'},
-            description: 'Editor selection bg color',
-        },
-        '--g-selection-border': {
+        '--g-md-wysiwyg-selection-border': {
             control: {type: 'text'},
             description: 'Editor selection border',
         },
-        '--g-selection-border-radius': {
+        '--g-md-wysiwyg-selection-border-radius': {
             control: {type: 'text'},
             description: 'Editor selection border radius',
         },
-        '--g-selection-outline': {
+        '--g-md-wysiwyg-selection-outline': {
             control: {type: 'text'},
             description: 'Editor selection outline',
         },
-        '--g-selection-background': {
+        '--g-md-wysiwyg-selection-background': {
             control: {type: 'text'},
             description: 'Editor selection background',
         },
-        '--g-selection-box-shadow': {
+        '--g-md-wysiwyg-selection-box-shadow': {
             control: {type: 'text'},
             description: 'Editor selection box-shadow',
         },

diff --git a/docs/how-to-customize-the-editor.md b/docs/how-to-customize-the-editor.md
@@ -15,8 +15,8 @@ You can use CSS variables to make editor contents fit your own needs
 
 ### Selection styles
 | **Variable** | **Description** | **CSS Property Type** | **Default** |
-| `--g-selection-border` | Editor selection border | border | none |
-| `--g-selection-border-radius` | Editor selection border radius | border-radius | 6px |
-| `--g-selection-outline` | Editor selection outline | outline | none |
-| `--g-selection-background` | Editor selection background | background | #e6e6e6 |
-| `--g-selection-box-shadow` | Editor selection box shadow | box-shadow | none |
+| `--g-md-wysiwyg-selection-border` | Editor selection border | border | none |
+| `--g-md-wysiwyg-selection-border-radius` | Editor selection border radius | border-radius | 6px |
+| `--g-md-wysiwyg-selection-outline` | Editor selection outline | outline | none |
+| `--g-md-wysiwyg-selection-background` | Editor selection background | background | #e6e6e6 |
+| `--g-md-wysiwyg-selection-box-shadow` | Editor selection box shadow | box-shadow | none |
diff --git a/src/extensions/behavior/Selection/selection.scss b/src/extensions/behavior/Selection/selection.scss
@@ -4,7 +4,8 @@ $active-node-default-indent-left: calc(-1 * var(--g-spacing-2));
 $active-node-default-indent-right: calc(-1 * var(--g-spacing-2));
 
 $active-node-selector: '.pm-node-selected';
-$basic-elements: h1, h2, h3, h4, h5, h6, p, ul, ol, span, pre, '*[data-html]', '.g-md-checkbox', '.g-md-table-wrapper';
+$basic-elements: h1, h2, h3, h4, h5, h6, p, ul, ol, span, pre, '*[data-html]', '.g-md-checkbox',
+    '.g-md-table-wrapper';
 $yfm-elements: 'div[class^="yfm-"]';
 
 $default-selection-border: none;
@@ -22,16 +23,16 @@ $default-li-marker-width: var(--g-spacing-4);
     border: $default-selection-border;
     border-radius: $default-selection-border-radius;
     outline: $default-selection-outline;
-    background: var(--g-selection-background, $default-selection-background);
+    background: var(--g-md-wysiwyg-selection-background, $default-selection-background);
     box-shadow: $default-selection-box-shadow;
 }
 
 @mixin selection-props {
-    border: var(--g-selection-border, $default-selection-border);
-    border-radius: var(--g-selection-border-radius, $default-selection-border-radius);
-    outline: var(--g-selection-outline, $default-selection-outline);
-    background: var(--g-selection-background, $default-selection-background);
-    box-shadow: var(--g-selection-box-shadow, $default-selection-box-shadow);
+    border: var(--g-md-wysiwyg-selection-border, $default-selection-border);
+    border-radius: var(--g-md-wysiwyg-selection-border-radius, $default-selection-border-radius);
+    outline: var(--g-md-wysiwyg-selection-outline, $default-selection-outline);
+    background: var(--g-md-wysiwyg-selection-background, $default-selection-background);
+    box-shadow: var(--g-md-wysiwyg-selection-box-shadow, $default-selection-box-shadow);
 }
 
 [class].g-md-editor {
@@ -56,7 +57,6 @@ $default-li-marker-width: var(--g-spacing-4);
                 mix-blend-mode: multiply;
             }
         }
-
     }
 
     & #{$yfm-elements}#{$active-node-selector} {
@@ -65,10 +65,8 @@ $default-li-marker-width: var(--g-spacing-4);
         &::after {
             position: absolute;
             z-index: -1;
-            inset: $active-node-default-indent-top
-                $active-node-default-indent-right
-                $active-node-default-indent-bottom
-                $active-node-default-indent-left;
+            inset: $active-node-default-indent-top $active-node-default-indent-right
+                $active-node-default-indent-bottom $active-node-default-indent-left;
 
             content: '';