styles.css

/* Basic styles for proseMirror view and gapCursor */
.ProseMirror {
  background: #fff;
  color: #111;
  font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */
  font-family: 'Arial';
  font-variant-ligatures: none;
  line-height: 1.6;
  font-size: 14px;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
}

.ProseMirror:focus {
  outline: none;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection {
  background: transparent;
}

.ProseMirror-hideselection *::-moz-selection {
  background: transparent;
}

.ProseMirror-hideselection {
  caret-color: transparent;
}

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  border: 2px solid #8cf;
  bottom: -2px;
  content: '';
  left: -32px;
  pointer-events: none;
  position: absolute;
  right: -2px;
  top: -2px;
}

/* Protect against generic img rules */

img.ProseMirror-separator {
  border: none !important;
  display: inline !important;
  margin: 0 !important;
}

.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: relative;
}

.ProseMirror-gapcursor:after {
  content: '';
  display: block;
  position: relative;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

/* Read-Only */

  /* div[contenteditable='false'] {
    pointer-events: none;
    user-select: none;
  } */


/* placeholder */
  .empty-node::before {
    color: #aaa;
    float: left;
    font-style: italic;
    pointer-events: none;
    height: 0;
  }

  p.empty-node:first-child::before {
    content: attr(data-content);
  }

  /* invisible characters */
  .invisible {
    pointer-events: none;
    user-select: none;
  }

  .invisible:before {
    caret-color: inherit;
    color: gray;
    display: inline-block;
    font-weight: 400;
    font-style: normal;
    line-height: 1em;
    width: 0;
  }

  .invisible--space:before {
    content: '·';
  }

  .invisible--break:before {
    content: '¬';
  }

  .invisible--par:after {
    content: '¶';
  }


/* -- Selection Plugin ---------------------------------- */

  .math-node.math-select .math-render {
    background-color: #c0c0c0ff;
  }
  math-inline.math-select .math-render {
    padding-top: 2px;
  }

  span[data-type='inline'] {
    display: inline;
    font-weight: 500;
  }

  span[data-type='inline']:before {
    color: #006f19;
    content: ' | ';
    font-weight: 600;
    margin-left: 0;
  }

  span[data-type='inline']:after {
    color: #006f19;
    content: ' | ';
    display: inline;
    font-weight: 600;
  }

  p[data-type='block'] {
    display: block;
    margin-top: 1em;
  }

  p[data-type='block']:before {
    color: #006f19;
    content: '⌜';
    display: inline;
    font-weight: 600;
    font-size: 22px;
    position: relative;
    top: 2px;
    left: 6px;
  }

  p[data-type='block']:after {
    color: #006f19;
    content: '⌟';
    display: inline;
    font-weight: 600;
    font-size: 22px;
    position: relative;
    top: 5px;
    right: 6px;
  }

  .transform-icon {
    transform: rotate(40deg);
  }

  /* hr */ 

  hr {
    padding: 2px 10px;
    border: none;
    margin: 1em 0;
  }

  hr:after {
    content: '';
    display: block;
    height: 1px;
    background-color: silver;
    line-height: 2px;
  }

    /* Wax Selection Marker */
    .ProseMirror .wax-selection-marker {
    background-color: #C5D7FE;
    opacity: 0.8;
  }

 .ProseMirror *::selection{
   background-color: #C5D7FE;
  color: #000;
}


@-moz-document url-prefix() {
  span#fake-cursor::before {
      height: 18px !important;
  }
}

span#fake-cursor::before {
  display: inline;
  content: '';
  border-right: 1px solid black;
  height: 23px;
  position: absolute;
  z-index: 999;
  }