Heading markers are now only displayed when editor is focused

impelsystems · Dec 16, 2021 · d41b849 · d41b849
1 parent db94c77
commit d41b849
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/nodes/Heading.ts b/src/nodes/Heading.ts
@@ -59,7 +59,9 @@ export default class Heading extends Node {
         fold.className = `heading-fold ${
           node.attrs.collapsed ? "collapsed" : ""
         }`;
-        fold.addEventListener("click", event => this.handleFoldContent(event));
+        fold.addEventListener("mousedown", event =>
+          this.handleFoldContent(event)
+        );
 
         return [
           `h${node.attrs.level + (this.options.offset || 0)}`,
@@ -111,6 +113,7 @@ export default class Heading extends Node {
     event.preventDefault();
 
     const { view } = this.editor;
+    const hadFocus = view.hasFocus();
     const { tr } = view.state;
     const { top, left } = event.target.getBoundingClientRect();
     const result = view.posAtCoords({ top, left });
@@ -142,7 +145,10 @@ export default class Heading extends Node {
         }
 
         view.dispatch(transaction);
-        view.focus();
+
+        if (hadFocus) {
+          view.focus();
+        }
       }
     }
   };

diff --git a/src/styles/editor.ts b/src/styles/editor.ts
@@ -139,6 +139,8 @@ export const StyledEditor = styled("div")<{
       font-size: 13px;
       line-height: 0;
       margin-${props => (props.rtl ? "right" : "left")}: -24px;
+      transition: opacity 150ms ease-in-out;
+      opacity: 0;
       width: 24px;
     }
 
@@ -195,6 +197,19 @@ export const StyledEditor = styled("div")<{
     content: "H6";
   }
 
+  .ProseMirror-focused {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      &:not(.placeholder):before {
+        opacity: 1;
+      }
+    }
+  }
+
   .with-emoji {
     margin-${props => (props.rtl ? "right" : "left")}: -1em;
   }