fix: selected node styles appear only if ProseMirror is focused (#138)

Outline should be set only if ProseMirror is focused.
gravity-ui · Oct 10, 2023 · dd873de · dd873de
1 parent 198f805
commit dd873de
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/extensions/base/BaseStyles/index.scss b/src/extensions/base/BaseStyles/index.scss
@@ -1,5 +1,25 @@
 @use '../../../../node_modules/prosemirror-view/style/prosemirror';
 
+// Make outline appear only if ProseMirror is focused
+
+.ProseMirror-selectednode {
+    outline: none;
+}
+
+.li.ProseMirror-selectednode:after {
+    border: none;
+}
+
+.yfm-editor.ProseMirror-focused {
+    .ProseMirror-selectednode {
+        outline: 2px solid #8cf;
+    }
+
+    li.ProseMirror-selectednode:after {
+        border: 2px solid #8cf;
+    }
+}
+
 .yfm-editor.ProseMirror,
 .yfm-editor .ProseMirror {
     &:focus {

diff --git a/src/extensions/behavior/Selection/selection.scss b/src/extensions/behavior/Selection/selection.scss
@@ -1,3 +1,3 @@
-.yfm-editor .pm-node-selected {
+.yfm-editor.ProseMirror-focused .pm-node-selected {
     box-shadow: var(--g-color-text-info) 0 0 0 1px;
 }