tolaria/src/components/Editor.css

/* Wikilink inline content — color is set via inline style per note type */
.wikilink {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  border-radius: 2px;
  padding: 0 1px;
}

.wikilink:hover {
  text-decoration-style: solid;
  opacity: 0.85;
}

/* Broken wikilink: dashed underline + lower opacity */
.wikilink--broken {
  text-decoration-style: dashed;
  opacity: 0.7;
}

.wikilink--broken:hover {
  opacity: 0.55;
}

/* Breadcrumb bar: border can still react to the data attribute, but the
   breadcrumb filename/title stays visible at all times. */
.breadcrumb-bar {
  transition: border-color 0.2s ease;
}

.breadcrumb-bar[data-title-hidden] {
  border-bottom-color: var(--border);
}

.breadcrumb-bar__title {
  display: flex;
}

/* Scroll area wrapping title + editor — single scroll context for alignment */
.editor-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* BlockNote container */
.editor__blocknote-container {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
  cursor: text;
}

/* Drag-over state: subtle border highlight */
.editor__blocknote-container--drag-over {
  outline: 2px dashed var(--primary, #155DFF);
  outline-offset: -2px;
}

/* Drop overlay shown when dragging images over the editor */
.editor__drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 93, 255, 0.06);
  pointer-events: none;
}

.editor__drop-overlay-label {
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--background, #fff);
  color: var(--primary, #155DFF);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.editor__blocknote-container .bn-container {
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 15px;
  /* Override BlockNote's internal color variables so .bn-editor background
     matches our vault theme instead of BlockNote's hardcoded light/dark defaults. */
  --bn-colors-editor-background: var(--bg-primary);
  --bn-colors-editor-text: var(--text-primary);
  --bn-colors-menu-background: var(--bg-card);
  --bn-colors-menu-text: var(--text-primary);
  --bn-colors-tooltip-background: var(--bg-hover);
  --bn-colors-tooltip-text: var(--text-primary);
  --bn-colors-hovered-background: var(--bg-hover);
  --bn-colors-hovered-text: var(--text-primary);
  --bn-colors-selected-background: var(--bg-selected);
  --bn-colors-selected-text: var(--text-primary);
  --bn-colors-border: var(--border-primary);
  --bn-colors-shadow: var(--border-primary);
  --bn-colors-side-menu: var(--text-muted);
}

.editor__blocknote-container .bn-editor {
  width: 100%;
  padding: 20px 0;
}

/* =============================================
   Bear-style live preview: zero horizontal shift
   ============================================= */

/* FIX 1: Remove header underlines */
.cm-heading-line {
  border-bottom: none !important;
  text-decoration: none !important;
}

/* FIX 2: Heading markers in left gutter area
   The ## markers are absolutely positioned in the content's left padding (40px),
   so they never affect text flow — zero horizontal shift. */
.cm-heading-line {
  position: relative;
}

.cm-heading-line .cm-formatting-block {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  right: 100%;
  padding-right: 4px;
  font-size: 0.75rem !important;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease-out !important;
  white-space: nowrap;
  pointer-events: none;
  color: var(--text-faint);
}

.cm-heading-line .cm-formatting-block.cm-formatting-block-visible {
  font-size: 0.75rem !important;
  opacity: 0.5;
  pointer-events: auto;
}

/* FIX 3: List/block bullets — always visible, fixed width, zero shift
   Override the library's font-size animation so the marker always occupies
   the same space regardless of cursor position. */
.cm-line:not(.cm-heading-line) .cm-formatting-block {
  font-size: 1em !important;
  display: inline-block !important;
  min-width: 1.5em !important;
  vertical-align: baseline;
  transition: color 0.15s ease-out, opacity 0.15s ease-out !important;
}

/* Inactive state: hide source text, show bullet dot via ::before */
.cm-line:not(.cm-heading-line) .cm-formatting-block:not(.cm-formatting-block-visible) {
  color: transparent !important;
  opacity: 1 !important;
  position: relative;
  overflow: visible !important;
}

.cm-line:not(.cm-heading-line) .cm-formatting-block:not(.cm-formatting-block-visible)::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
}

/* Active state: show source marker (-, *, +, etc.) */
.cm-line:not(.cm-heading-line) .cm-formatting-block.cm-formatting-block-visible {
  color: var(--text-faint) !important;
  opacity: 1 !important;
}

/* --- Editor content wrapper: single source of truth for horizontal padding --- */
.editor-content-wrapper {
  max-width: var(--editor-max-width, 760px);
  margin: 0 auto;
  padding: 0 var(--editor-padding-horizontal, 40px);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* --- Title Section: wraps icon + title + separator --- */
.title-section {
  width: 100%;
  flex-shrink: 0;
}

.title-section__heading {
  position: relative;
}

.title-section__inline-add-icon {
  position: absolute;
  left: 8px;
  top: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.title-section:hover .title-section__inline-add-icon,
.title-section__inline-add-icon:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.title-section__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding-top: 8px;
  margin-left: 8px;
}

/* No emoji: title aligns flush left (no indent for icon area) */
.title-section__row--no-icon {
  margin-left: 0;
}

/* When emoji is present, restore top padding to the row itself */
.title-section__row:has(.note-icon-button--active) {
  padding-top: 32px;
}

.title-section__separator {
  border-bottom: 1px solid var(--border-primary, rgba(0, 0, 0, 0.08));
  margin-top: 12px;
  margin-left: 8px;
}

/* --- Note Icon Area --- */
.note-icon-area {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.note-icon-button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.note-icon-button:disabled {
  cursor: default;
}

.note-icon-button--active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 36px;
  line-height: 1;
  transition: transform 0.1s;
}

.note-icon-button--active:hover:not(:disabled) {
  transform: scale(1.1);
}

.note-icon-button--active :is(img, svg) {
  display: block;
}

.note-icon-button--add {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-faint, #999);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.15s;
}

.title-section:hover .note-icon-button--add,
.note-icon-button--add:focus-visible {
  opacity: 1;
}

.note-icon-button__plus {
  font-size: 16px;
  font-weight: 300;
}

.note-icon-button__label {
  font-size: 12px;
}

.note-icon-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  border-radius: 8px;
  border: 1px solid var(--border-dialog, var(--border));
  background: var(--popover);
  box-shadow: 0 4px 16px var(--shadow-dialog, rgba(0,0,0,0.1));
  padding: 4px;
}

.note-icon-menu__item {
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--foreground);
  border-radius: 4px;
  transition: background 0.1s;
}

.note-icon-menu__item:hover {
  background: var(--accent);
}

.note-icon-menu__item--danger {
  color: var(--destructive, #ef4444);
}

/* --- Title Field --- */
.title-field {
  flex: 1;
  min-width: 0;
}

.title-field__input {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--headings-h1-font-size, 32px);
  font-weight: var(--headings-h1-font-weight, 700);
  line-height: var(--headings-h1-line-height, 1.2);
  letter-spacing: var(--headings-h1-letter-spacing, -0.015em);
  color: var(--foreground);
  padding: 0;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  field-sizing: content;
}

.title-field__input::placeholder {
  color: var(--text-faint, #ccc);
}

.title-field__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.title-field__filename {
  display: block;
  font-size: 11px;
  color: var(--text-faint, #999);
  margin-top: 2px;
}

/* When the legacy title UI is shown, hide the first H1 heading in BlockNote
   to avoid duplicate title display. Otherwise the editor's H1 remains visible
   and serves as the title surface. */
.title-section[data-title-ui-visible] ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child [data-content-type="heading"][data-level="1"] {
  display: none;
}
.title-section[data-title-ui-visible] ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child:has([data-content-type="heading"][data-level="1"]) {
  display: none;
}

/* =============================================
   Disable BlockNote/Mantine editor animations
   =============================================
   Scoped to .editor__blocknote-container so app-wide
   components (dialogs, sidebar, etc.) are unaffected.
   Preserves cursor blink and text selection. */
.editor__blocknote-container *,
.editor__blocknote-container *::before,
.editor__blocknote-container *::after {
  transition: none !important;
  animation: none !important;
}

/* Reduce padding at narrow editor widths so content isn't cramped */
@container editor (max-width: 600px) {
  .editor-content-wrapper {
    padding: 0 16px;
  }
  .editor__blocknote-container .bn-editor {
    padding: 12px 0;
  }
}