.editor { position: relative; & h1, & h2, & h3 { padding: 0; color: #7c8382; text-decoration: none; border-bottom: none; margin-bottom: 20px; line-height: 1.45; } & h1 { font-size: 2.5rem; } & h2 { font-size: 2rem; } & h3 { font-size: 1.8rem; } & p { margin-bottom: 20px; } & hr { border: 1px solid; margin-bottom: 20px; } & li > p { margin: 0; } & div[data-plugin] { background: #fff; border: 1px solid #aaa; padding: 10px; margin-bottom: 20px; } } .dragging { } .shim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; border: 2px dashed #aaa; background: rgba(0,0,0,0.2); } .dragging .shim { z-index: 1000; display: block; pointer-events: none; } :global { & .ProseMirror { position: relative; } & .ProseMirror-content { white-space: pre-wrap; } & .ProseMirror-drop-target { position: absolute; width: 1px; background: #666; pointer-events: none; } & .ProseMirror-content ul, & .ProseMirror-content ol { padding-left: 30px; cursor: default; } & .ProseMirror-content blockquote { padding-left: 1em; border-left: 3px solid #eee; margin-left: 0; margin-right: 0; } & .ProseMirror-content pre { white-space: pre-wrap; } & .ProseMirror-content li { position: relative; pointer-events: none; /* Don't do weird stuff with marker clicks */ } & .ProseMirror-content li > * { pointer-events: auto; } & .ProseMirror-nodeselection *::selection { background: transparent; } & .ProseMirror-nodeselection *::-moz-selection { background: transparent; } & .ProseMirror-selectednode { outline: 2px solid #8cf; } /* Make sure li selections wrap around markers */ & li.ProseMirror-selectednode { outline: none; } & li.ProseMirror-selectednode:after { content: ""; position: absolute; left: -32px; right: -2px; top: -2px; bottom: -2px; border: 2px solid #8cf; pointer-events: none; } }