@prosekit/basic/dist/style.css

A quick starter for ProseKit

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
  position: relative;
}

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

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection ::selection {
  background: none;
}

.ProseMirror-hideselection ::selection {
  background: none;
}

.ProseMirror-hideselection {
  caret-color: #0000;
}

.ProseMirror [draggable][contenteditable="false"] {
  user-select: text;
}

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

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  pointer-events: none;
  border: 2px solid #8cf;
  position: absolute;
  inset: -2px -2px -2px -32px;
}

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

:root {
  --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
  --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
  --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
}

.prosemirror-flat-list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.prosemirror-flat-list > .list-marker {
  width: 1.5em;
  width: 1lh;
  height: 1.5em;
  text-align: center;
  height: 1lh;
  position: absolute;
  inset-inline-start: 0;
}

.prosemirror-flat-list > .list-content {
  margin-inline-start: 1.5em;
  margin-inline-start: 1lh;
}

.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker, .prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
  background-color: currentColor;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker {
  mask-image: var(--prosekit-list-bullet-icon);
}

.prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
  mask-image: var(--prosekit-list-toggle-open-icon);
}

.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-marker {
  mask-image: var(--prosekit-list-toggle-closed-icon);
}

.prosemirror-flat-list[data-list-kind="ordered"] > * {
  contain: style;
}

.prosemirror-flat-list[data-list-kind="ordered"]:before {
  inset-inline-end: calc(100% - 1.5em);
  content: counter(prosemirror-flat-list-counter, decimal) ". ";
  font-variant-numeric: tabular-nums;
  position: absolute;
  inset-inline-end: calc(100% - 1lh);
}

.prosemirror-flat-list[data-list-kind="ordered"] {
  counter-increment: prosemirror-flat-list-counter;
}

.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"] {
  counter-reset: prosemirror-flat-list-counter;
}

@supports (counter-set: prosemirror-flat-list-counter 1) {
  :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
    counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
  }
}

@supports not (counter-set: prosemirror-flat-list-counter 1) {
  :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
    counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
  }
}

.prosemirror-flat-list[data-list-kind="task"] > .list-marker, .prosemirror-flat-list[data-list-kind="task"] > .list-marker * {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
}

.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable] > .list-marker {
  cursor: pointer;
}

.prosemirror-flat-list[data-list-kind="toggle"]:not([data-list-collapsable]) > .list-marker {
  opacity: .4;
  pointer-events: none;
}

.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
  display: none;
}

.ProseMirror .tableWrapper {
  overflow-x: auto;
}

.ProseMirror table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}

.ProseMirror td, .ProseMirror th {
  box-sizing: border-box;
  vertical-align: top;
  border-width: 1px;
  padding-left: .75rem;
  padding-right: .75rem;
  position: relative;
}

prosekit-table-handle-drop-indicator {
  background-color: highlighttext;
}

.ProseMirror .column-resize-handle {
  z-index: 20;
  pointer-events: none;
  background-color: highlighttext;
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
}

.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

.ProseMirror .selectedCell {
  --color: 210, 100%, 56%;
  border: 1px double hsl(var(--color));
  background-color: hsla(var(--color), 20%);
}

.prosekit-placeholder:before {
  content: attr(data-placeholder);
  opacity: .3;
  pointer-events: none;
  height: 0;
  position: absolute;
}

.prosekit-virtual-selection {
  background-color: #8888884d;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #8888884d;
}

.prosekit-commit-deletion {
  background-color: #e5534b80;
  text-decoration: line-through;
}

.prosekit-commit-addition {
  background-color: #53e54b80;
}

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

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

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

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

prosekit-autocomplete-root, prosekit-block-handle-root, prosekit-table-handle-root, prosekit-table-handle-column-menu-root, prosekit-table-handle-row-menu-root, prosekit-tooltip-root, prosekit-menu-root {
  display: contents;
}

prosekit-tooltip-positioner, prosekit-autocomplete-positioner, prosekit-menu-positioner, prosekit-popover-positioner, prosekit-inline-popover-positioner, prosekit-block-handle-positioner, prosekit-table-handle-column-positioner, prosekit-table-handle-row-positioner {
  background: none;
}

:is(prosekit-tooltip-positioner, prosekit-autocomplete-positioner, prosekit-menu-positioner, prosekit-popover-positioner, prosekit-inline-popover-positioner, prosekit-block-handle-positioner, prosekit-table-handle-column-positioner, prosekit-table-handle-row-positioner):not([data-state]) {
  display: none;
}