feat(EditorView): changed default selection styles

demo/stories/css-variables/CSSVariables.stories.tsx

@@ -28,6 +28,26 @@ export const Story: StoryObj<typeof component> = {
             control: {type: 'text'},
             description: 'Editor contents padding',
         },
+        '--g-md-wysiwyg-selection-border': {
+            control: {type: 'text'},
+            description: 'Editor selection border',
+        },
+        '--g-md-wysiwyg-selection-border-radius': {
+            control: {type: 'text'},
+            description: 'Editor selection border radius',
+        },
+        '--g-md-wysiwyg-selection-outline': {
+            control: {type: 'text'},
+            description: 'Editor selection outline',
+        },
+        '--g-md-wysiwyg-selection-background': {
+            control: {type: 'text'},
+            description: 'Editor selection background',
+        },
+        '--g-md-wysiwyg-selection-box-shadow': {
+            control: {type: 'text'},
+            description: 'Editor selection box-shadow',
+        },
     },
 };
 Story.storyName = 'Custom CSS Variables';

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

@@ -3,6 +3,7 @@
 ## How to customize the editor
 You can use CSS variables to make editor contents fit your own needs
 
+### Elements styles
 | **Variable** | **Description** | **CSS Property Type** | **Default** |
 | :---:  | :---: | :---: | :---: |
 | `--g-md-toolbar-padding` | Toolbar padding | padding | 0px |
@@ -11,3 +12,12 @@ You can use CSS variables to make editor contents fit your own needs
 | `--g-md-toolbar-sticky-offset` | Toolbar offset in sticky mode | top | 0px |
 | `--g-md-toolbar-sticky-border` | Toolbar border in sticky mode | border | 1px solid var(--g-color-line-generic-solid) |
 | `--g-md-editor-padding` | Editor contents padding | padding | 0px |
+
+### Selection styles
+| **Variable** | **Description** | **CSS Property Type** | **Default** |
+| :---:  | :---: | :---: | :---: |
+| `--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 |

src/extensions/additional/Math/MathSpecs/index.ts

@@ -45,6 +45,7 @@ export const MathSpecs: ExtensionAuto = (builder) => {
                 code: true,
                 toDOM: () => ['div', {class: 'math-block'}, 0],
                 parseDOM: [{tag: 'div.math-block', priority: 200}],
+                selectable: true,
             },
             fromMd: {
                 tokenName: 'math_block',

src/extensions/base/BaseSchema/BaseSchemaSpecs/index.ts

@@ -54,6 +54,7 @@ export const BaseSchemaSpecs: ExtensionAuto<BaseSchemaSpecsOptions> = (builder,
                         0,
                     ];
                 },
+                selectable: true,
                 placeholder: opts.paragraphPlaceholder
                     ? {
                           content: opts.paragraphPlaceholder,

src/extensions/base/BaseStyles/index.ts

@@ -2,8 +2,6 @@ import {Plugin} from 'prosemirror-state';
 
 import type {ExtensionAuto} from '../../../core';
 
-import './index.scss';
-
 export const BaseStyles: ExtensionAuto = (builder) => {
     builder.addPlugin(
         () =>