tolaria/src/components/EditorTheme.css

/* ==============================================
   EditorTheme.css — BlockNote theme overrides
   Driven by CSS custom properties from theme.json
   ============================================== */

/* --- Editor root --- */
.editor__blocknote-container .bn-editor {
  font-family: var(--editor-font-family);
  font-size: var(--editor-font-size);
  line-height: var(--editor-line-height);
  max-width: var(--editor-max-width);
  margin: 0 auto;  /* Center the editor body */
  padding: var(--editor-padding-vertical) var(--editor-padding-horizontal);
  color: var(--colors-text);
  caret-color: var(--colors-cursor);
}

.editor-content-width--wide .editor__blocknote-container .bn-editor {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Override BlockNote's default line-height on block-outer so our theme controls it */
.editor__blocknote-container .bn-block-outer {
  line-height: var(--editor-line-height) !important;
}

/* Stack handle buttons horizontally instead of vertically to reduce height,
   so they fit within a single text line for headings and paragraphs. */
.editor__blocknote-container .bn-side-menu {
  --group-wrap: nowrap !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

.editor__blocknote-container .bn-side-menu [draggable="true"] * {
  pointer-events: none;
}

/* More horizontal space between drag handle and content */
.editor__blocknote-container .bn-side-menu ~ * ,
.editor__blocknote-container [class*="bn-side-menu"] {
  /* The side menu is positioned via transform — we shift it further left */
}
.editor__blocknote-container .bn-block-content {
  margin-left: 8px;
}

.editor__blocknote-container .bn-editor ::selection {
  background: var(--colors-selection);
}

/* Keep BlockNote toolbar/menu icons at a stable size.
   Some default React Icons-based controls inherit `1em` sizing and can blow up
   when upstream toolbar styling changes. */
.editor__blocknote-container :is(.bn-toolbar, .bn-formatting-toolbar, .bn-menu-dropdown, .bn-grid-suggestion-menu) button svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}

/* --- Paragraph spacing --- */
.editor__blocknote-container .bn-block-content[data-content-type="paragraph"] {
  margin-bottom: var(--editor-paragraph-spacing);
}

/* --- Headings --- */
/* Heading spacing: use margin-top on .bn-block-outer (creates space between blocks)
   and ensure the handle aligns by NOT adding padding/margin on inner elements.
   BlockNote positions handles via JS based on .bn-block-content bounding rect. */

/* Title (H1) — visually separated from content.
   BlockNote renders H1 without data-level, so we target :has(h1) */
.editor__blocknote-container .bn-block-outer:has(h1) {
  margin-top: var(--headings-h1-margin-top) !important;
  margin-bottom: var(--headings-h1-margin-bottom) !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--border-primary);
}
.editor__blocknote-container [data-content-type="heading"]:not([data-level]) .bn-inline-content,
.editor__blocknote-container [data-content-type="heading"][data-level="1"] .bn-inline-content {
  font-size: var(--headings-h1-font-size);
  font-weight: var(--headings-h1-font-weight);
  line-height: var(--headings-h1-line-height);
  color: var(--headings-h1-color);
  letter-spacing: var(--headings-h1-letter-spacing);
}
.editor__blocknote-container [data-content-type="heading"]:not([data-level])[data-is-empty-and-focused] .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before,
.editor__blocknote-container [data-content-type="heading"]:not([data-level])[data-is-only-empty-block] .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before,
.editor__blocknote-container [data-content-type="heading"][data-level="1"][data-is-empty-and-focused] .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before,
.editor__blocknote-container [data-content-type="heading"][data-level="1"][data-is-only-empty-block] .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
  content: "Title" !important;
}

.editor__blocknote-container .bn-block-outer:has(> .bn-block > [data-content-type="heading"][data-level="2"]) {
  margin-top: var(--headings-h2-margin-top) !important;
  margin-bottom: var(--headings-h2-margin-bottom) !important;
}
.editor__blocknote-container [data-content-type="heading"][data-level="2"] .bn-inline-content {
  font-size: var(--headings-h2-font-size);
  font-weight: var(--headings-h2-font-weight);
  line-height: var(--headings-h2-line-height);
  color: var(--headings-h2-color);
  letter-spacing: var(--headings-h2-letter-spacing);
}

.editor__blocknote-container .bn-block-outer:has(> .bn-block > [data-content-type="heading"][data-level="3"]) {
  margin-top: var(--headings-h3-margin-top) !important;
  margin-bottom: var(--headings-h3-margin-bottom) !important;
}
.editor__blocknote-container [data-content-type="heading"][data-level="3"] .bn-inline-content {
  font-size: var(--headings-h3-font-size);
  font-weight: var(--headings-h3-font-weight);
  line-height: var(--headings-h3-line-height);
  color: var(--headings-h3-color);
  letter-spacing: var(--headings-h3-letter-spacing);
}

.editor__blocknote-container .bn-block-outer:has(> .bn-block > [data-content-type="heading"][data-level="4"]) {
  margin-top: var(--headings-h4-margin-top) !important;
  margin-bottom: var(--headings-h4-margin-bottom) !important;
}
.editor__blocknote-container [data-content-type="heading"][data-level="4"] .bn-inline-content {
  font-size: var(--headings-h4-font-size);
  font-weight: var(--headings-h4-font-weight);
  line-height: var(--headings-h4-line-height);
  color: var(--headings-h4-color);
  letter-spacing: var(--headings-h4-letter-spacing);
}

/* --- Bullet lists --- */
/* BlockNote renders bullet as ::before on [data-content-type="bulletListItem"] 
   with content: "•", display: flex, width: 24px */
.editor__blocknote-container [data-content-type="bulletListItem"] {
  padding-left: var(--lists-padding-left);
  margin-bottom: var(--lists-item-spacing);
  gap: var(--lists-bullet-gap) !important;
}

.editor__blocknote-container [data-content-type="bulletListItem"]::before {
  font-size: var(--lists-bullet-size) !important;
  color: var(--lists-bullet-color) !important;
  min-width: var(--lists-indent-size) !important;
  width: var(--lists-indent-size) !important;
  /* Align bullet with first line of text */
  height: calc(var(--editor-font-size) * var(--editor-line-height)) !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Nested list indentation */
.editor__blocknote-container .bn-block-group .bn-block-group {
  margin-left: var(--lists-indent-size);
}

/* Hide the vertical nesting lines — cleaner without them */
.editor__blocknote-container .bn-block-group .bn-block-group .bn-block-outer::before {
  border-left: none !important;
}

/* --- Numbered lists --- */
.editor__blocknote-container [data-content-type="numberedListItem"] {
  padding-left: var(--lists-padding-left);
  margin-bottom: var(--lists-item-spacing);
  gap: var(--lists-bullet-gap) !important;
}

.editor__blocknote-container [data-content-type="numberedListItem"]::before {
  color: var(--lists-bullet-color) !important;
  font-size: var(--editor-font-size) !important;
  min-width: var(--lists-indent-size) !important;
  width: var(--lists-indent-size) !important;
  height: calc(var(--editor-font-size) * var(--editor-line-height)) !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* --- Checkbox / check list items --- */
/* BlockNote renders checkbox as: div > input[type=checkbox] inside .bn-block-content */
.editor__blocknote-container [data-content-type="checkListItem"] {
  margin-bottom: var(--lists-item-spacing);
  gap: var(--checkboxes-gap) !important;
}

.editor__blocknote-container [data-content-type="checkListItem"] input[type="checkbox"] {
  width: var(--checkboxes-size) !important;
  height: var(--checkboxes-size) !important;
  min-width: var(--checkboxes-size) !important;
  min-height: var(--checkboxes-size) !important;
  border-radius: var(--checkboxes-border-radius) !important;
  accent-color: var(--checkboxes-checked-color) !important;
  border-color: var(--checkboxes-unchecked-border-color) !important;
  cursor: pointer;
}

/* Checkbox container div — control spacing, align to first line */
.editor__blocknote-container [data-content-type="checkListItem"] > div[contenteditable="false"] {
  width: var(--lists-indent-size) !important;
  min-width: var(--lists-indent-size) !important;
  height: calc(var(--editor-font-size) * var(--editor-line-height)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* --- Inline: bold --- */
.editor__blocknote-container .bn-editor strong {
  font-weight: var(--inline-styles-bold-font-weight);
  color: var(--inline-styles-bold-color);
}

/* --- Inline: italic --- */
.editor__blocknote-container .bn-editor em {
  font-style: var(--inline-styles-italic-font-style);
  color: var(--inline-styles-italic-color);
}

/* --- Inline: strikethrough --- */
.editor__blocknote-container .bn-editor s,
.editor__blocknote-container .bn-editor del {
  color: var(--inline-styles-strikethrough-color);
  text-decoration: var(--inline-styles-strikethrough-text-decoration);
}

/* --- Inline: code --- */
.editor__blocknote-container .bn-inline-content code {
  font-family: var(--inline-styles-code-font-family);
  font-size: var(--inline-styles-code-font-size);
  background-color: var(--inline-styles-code-background-color);
  padding: var(--inline-styles-code-padding-vertical) var(--inline-styles-code-padding-horizontal);
  border-radius: var(--inline-styles-code-border-radius);
  color: var(--inline-styles-code-color);
}

/* --- Inline: links --- */
.editor__blocknote-container .bn-editor a {
  color: var(--inline-styles-link-color);
  text-decoration: var(--inline-styles-link-text-decoration);
  cursor: text;
}

/* --- Wikilinks (override from Editor.css with theme vars) --- */
.editor__blocknote-container .wikilink {
  color: var(--inline-styles-wikilink-color);
  text-decoration: var(--inline-styles-wikilink-text-decoration);
  border-bottom: var(--inline-styles-wikilink-border-bottom);
  cursor: text;
}

.editor__blocknote-container .math {
  color: var(--colors-text);
  cursor: text;
}

.editor__blocknote-container .math--inline {
  display: inline-flex;
  max-width: 100%;
  vertical-align: -0.15em;
}

.editor__blocknote-container .math-block-shell {
  width: 100%;
  overflow-x: auto;
  padding: 6px 0;
}

.editor__blocknote-container .math--block {
  display: block;
  min-width: max-content;
  text-align: center;
}

.editor__blocknote-container .math .katex-error {
  color: var(--destructive) !important;
  white-space: pre-wrap;
}

.editor__blocknote-container .mermaid-diagram {
  position: relative;
  width: 100%;
  margin: 10px 0;
  color: var(--colors-text);
}

.editor__blocknote-container .mermaid-diagram__viewport {
  max-width: 100%;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--surface-editor);
}

.editor__blocknote-container .mermaid-diagram__expand-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  opacity: 0;
  background: var(--surface-editor);
  box-shadow: 0 6px 16px rgb(15 23 42 / 0.14);
}

.editor__blocknote-container .mermaid-diagram:is(:hover, :focus-within) .mermaid-diagram__expand-button {
  opacity: 1;
}

.editor__blocknote-container .mermaid-diagram__viewport:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.editor__blocknote-container .mermaid-diagram__viewport svg {
  display: block;
  max-width: none;
  min-width: min-content;
  height: auto;
  margin: 0 auto;
}

@media (hover: none) {
  .editor__blocknote-container .mermaid-diagram__expand-button {
    opacity: 1;
  }
}

.mermaid-diagram__dialog {
  width: calc(100vw - 32px);
  max-width: calc(100vw - 32px);
  height: calc(100dvh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  padding: 0;
}

.mermaid-diagram__dialog-viewport {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 24px;
  background: #fff;
}

.mermaid-diagram__dialog-viewport:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.mermaid-diagram__dialog-viewport svg {
  display: block;
  max-width: none;
  min-width: min-content;
  height: auto;
  margin: auto;
}

.editor__blocknote-container .mermaid-diagram--error {
  padding: 12px;
  border: 1px solid var(--destructive);
  border-radius: 8px;
  background: color-mix(in srgb, var(--destructive) 8%, transparent);
}

.editor__blocknote-container .mermaid-diagram--error figcaption {
  margin-bottom: 8px;
  color: var(--destructive);
  font-size: 0.85rem;
  font-weight: 600;
}

.editor__blocknote-container .mermaid-diagram--error pre {
  max-width: 100%;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  background: var(--inline-styles-code-background-color);
  color: var(--inline-styles-code-color);
  font-size: 0.85rem;
}

.editor__blocknote-container[data-follow-links] .bn-editor a,
.editor__blocknote-container[data-follow-links] .wikilink {
  cursor: pointer;
}

/* Code blocks intentionally keep BlockNote's dark shell and syntax-highlighted content. */
.editor__blocknote-container .bn-block-content[data-content-type="codeBlock"] pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.editor__blocknote-container .bn-block-content[data-content-type="codeBlock"] pre code .shiki {
  background-color: transparent !important;
}

/* --- Blockquote --- */
.editor__blocknote-container [data-content-type="blockquote"],
.editor__blocknote-container blockquote {
  border-left: var(--blockquote-border-left-width) solid var(--blockquote-border-left-color);
  padding-left: var(--blockquote-padding-left);
  margin-top: var(--blockquote-margin-vertical);
  margin-bottom: var(--blockquote-margin-vertical);
  color: var(--blockquote-color);
  font-style: var(--blockquote-font-style);
}

/* --- Table --- */
.editor__blocknote-container [data-content-type="table"] table {
  border-color: var(--table-border-color);
  font-size: var(--table-font-size);
}

.editor__blocknote-container [data-content-type="table"] th {
  background: var(--table-header-background);
  padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
}

.editor__blocknote-container [data-content-type="table"] td {
  padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
  border-color: var(--table-border-color);
}

/* --- Horizontal rule --- */
.editor__blocknote-container hr {
  border: none;
  border-top: var(--horizontal-rule-thickness) solid var(--horizontal-rule-color);
  margin: var(--horizontal-rule-margin-vertical) 0;
}