tolaria/src/components/Editor.css

/* Wikilink inline content — color is set via inline style per note type */
.wikilink {
  cursor: pointer;
  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: title + shadow toggled via data attribute (no React re-render) */
.breadcrumb-bar {
  transition: box-shadow 0.2s ease;
  box-shadow: none;
}

.breadcrumb-bar[data-title-hidden] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.breadcrumb-bar__title {
  display: none;
}

.breadcrumb-bar[data-title-hidden] .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__add-icon {
  /* "Add icon" button above the title when no emoji — Notion-style */
  padding-top: 24px;
  margin-left: 8px;
  min-height: 28px;
}

.title-section__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  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 {
  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 {
  font-size: 36px;
  line-height: 1;
  transition: transform 0.1s;
  margin-right: 10px;
}

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

.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 TitleField is shown (no H1 in body), hide the first H1 heading in
   BlockNote to avoid duplicate title display. When hasH1 is set, the
   TitleField is hidden and the H1 in the editor serves as the title. */
.title-section:not([data-has-h1]) ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child [data-content-type="heading"][data-level="1"] {
  display: none;
}
.title-section:not([data-has-h1]) ~ .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;
  }
}