@elixpo/lixeditor 2.1.6

package/dist/styles/blocks.css

@@ -0,0 +1,1154 @@
+/* ===== No selection outline or drag handle for custom blocks ===== */
+
+.blog-editor-wrapper [data-content-type="codeBlock"],
+.blog-editor-wrapper [data-content-type="blockEquation"],
+.blog-editor-wrapper [data-content-type="mermaidBlock"] {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: var(--border-default) !important;
+}
+
+/* Remove the blue selected ring BlockNote adds */
+.blog-editor-wrapper [data-content-type="codeBlock"] *::selection,
+.blog-editor-wrapper [data-content-type="blockEquation"] *::selection,
+.blog-editor-wrapper [data-content-type="mermaidBlock"] *::selection {
+  background: transparent;
+}
+
+.blog-editor-wrapper .bn-block-outer[data-node-type="blockContainer"]:has([data-content-type="codeBlock"]) > .bn-block,
+.blog-editor-wrapper .bn-block-outer[data-node-type="blockContainer"]:has([data-content-type="blockEquation"]) > .bn-block,
+.blog-editor-wrapper .bn-block-outer[data-node-type="blockContainer"]:has([data-content-type="mermaidBlock"]) > .bn-block {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* ===== Code blocks ===== */
+
+.blog-editor-wrapper [data-content-type="codeBlock"] {
+  background: var(--code-bg);
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  font-family: 'lixCode', monospace;
+  padding: 4px 0;
+  margin: 12px 0;
+  overflow-x: auto;
+  -webkit-hyphens: none;
+  hyphens: none;
+}
+
+/* Light mode code block vars */
+:root {
+  --code-bg: #f8f8fb;
+  --code-text: #3d3d50;
+  --code-lang-bg: #eeeef2;
+  --code-lang-text: #6b7280;
+}
+
+[data-theme="dark"] {
+  --code-bg: #0e1219;
+  --code-text: #c8d1e0;
+  --code-lang-bg: #1a2030;
+  --code-lang-text: #9ba8b9;
+}
+
+.blog-editor-wrapper [data-content-type="codeBlock"] code {
+  color: var(--code-text);
+  font-size: 0.84em;
+  font-family: inherit;
+  background: none;
+  padding: 0;
+  line-height: 1.7;
+}
+
+.blog-editor-wrapper [data-content-type="codeBlock"] [contenteditable] {
+  padding: 8px 16px !important;
+  -webkit-text-decorations-in-effect: none;
+}
+
+/* Kill spellcheck red squiggles inside code blocks */
+.blog-editor-wrapper [data-content-type="codeBlock"] [contenteditable] * {
+  text-decoration: none !important;
+  -webkit-text-decoration: none !important;
+}
+
+/* Shiki syntax highlighting — let inline styles override default color */
+.blog-editor-wrapper [data-content-type="codeBlock"] code span[style] {
+  background: none !important;
+}
+
+/* Language selector dropdown (BlockNote built-in) */
+.blog-editor-wrapper [data-content-type="codeBlock"] select {
+  background: var(--code-lang-bg);
+  color: var(--code-lang-text);
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-family: 'lixCode', monospace;
+  cursor: pointer;
+  outline: none;
+  margin: 4px 8px;
+}
+
+.blog-editor-wrapper [data-content-type="codeBlock"] select:focus {
+  border-color: #a78bfa;
+}
+
+/* Language label */
+.code-lang-label {
+  position: absolute;
+  top: 0;
+  left: 16px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--code-lang-text);
+  background: var(--code-lang-bg);
+  padding: 2px 8px;
+  border-radius: 0 0 6px 6px;
+  cursor: pointer;
+  line-height: 1.5;
+  border: none;
+  transition: color 0.15s, background 0.15s;
+  z-index: 5;
+}
+
+.code-lang-label:hover {
+  color: #9b7bf7;
+  background: var(--bg-elevated);
+}
+
+/* Language picker dropdown */
+.code-lang-picker {
+  background-color: var(--bg-app);
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  box-shadow: var(--shadow-lg);
+  width: 180px;
+  max-height: 280px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.code-lang-search {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 12px;
+  border: none;
+  border-bottom: 1px solid var(--divider);
+  background: transparent;
+  color: var(--text-primary);
+  outline: none;
+}
+
+.code-lang-search::placeholder {
+  color: var(--text-faint);
+}
+
+.code-lang-list {
+  overflow-y: auto;
+  max-height: 220px;
+  padding: 4px;
+}
+
+.code-lang-option {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-family: monospace;
+  color: var(--text-body);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.code-lang-option:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.code-lang-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.code-lang-list::-webkit-scrollbar-thumb {
+  background: var(--border-default);
+  border-radius: 2px;
+}
+
+/* Code block copy button */
+.code-copy-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--code-lang-bg);
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  color: var(--code-lang-text);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+
+[data-content-type="codeBlock"]:hover .code-copy-btn {
+  opacity: 1;
+}
+
+.code-copy-btn:hover {
+  background: var(--bg-active);
+  color: #a78bfa;
+}
+
+/* ===== Divider / Horizontal Rule ===== */
+
+.blog-editor-wrapper [data-content-type="divider"] {
+  margin: 16px 0;
+  padding: 8px 0;
+  pointer-events: none;
+  user-select: none;
+  cursor: default;
+}
+
+.blog-editor-wrapper [data-content-type="divider"] hr {
+  border: none;
+  height: 1px;
+  background: var(--border-default);
+}
+
+/* ===== Sub-Page Block ===== */
+
+.blog-editor-wrapper [data-content-type="tabsBlock"] {
+  user-select: none;
+  width: 100%;
+}
+
+.blog-editor-wrapper [data-content-type="tabsBlock"] .bn-block-content {
+  cursor: default;
+  width: 100%;
+}
+
+/* Shared subpage styles (editor + preview) */
+
+.subpage-block {
+  width: 100%;
+  margin: 12px 0;
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg-surface);
+}
+
+.subpage-block-inner,
+.subpage-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 20px;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+  border-bottom: 1px solid var(--divider);
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.15s;
+}
+
+.subpage-item:last-child {
+  border-bottom: none;
+}
+
+.subpage-item:hover {
+  background: var(--bg-hover);
+}
+
+.subpage-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--bg-app);
+  border: 1px solid var(--border-default);
+  color: var(--text-faint);
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.subpage-item:hover .subpage-icon {
+  background: rgba(155, 123, 247, 0.08);
+  border-color: rgba(155, 123, 247, 0.25);
+  color: #9b7bf7;
+}
+
+.subpage-icon--add {
+  border-style: dashed;
+  border-color: rgba(155, 123, 247, 0.3);
+  background: rgba(155, 123, 247, 0.04);
+}
+
+.subpage-title {
+  flex: 1;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.3;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subpage-arrow {
+  flex-shrink: 0;
+  color: var(--text-faint);
+  transition: color 0.15s, transform 0.15s;
+}
+
+.subpage-item:hover .subpage-arrow {
+  color: #9b7bf7;
+  transform: translateX(2px);
+}
+
+.subpage-delete-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s, background 0.15s;
+}
+
+.group\/page:hover .subpage-delete-btn {
+  opacity: 1;
+}
+
+.subpage-delete-btn:hover {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.08);
+}
+
+.subpage-name-input {
+  flex: 1;
+  font-size: 15px;
+  font-weight: 500;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  min-width: 0;
+}
+
+.subpage-name-input::placeholder {
+  color: var(--text-faint);
+}
+
+.subpage-create-btn {
+  padding: 6px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: white;
+  background: #9b7bf7;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s;
+  flex-shrink: 0;
+}
+
+.subpage-create-btn:hover {
+  background: #8b6ae6;
+}
+
+.subpage-create-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.subpage-block-adding {
+  border: none;
+}
+
+/* ===== Lists ===== */
+
+.blog-editor-wrapper [data-content-type="bulletListItem"],
+.blog-editor-wrapper [data-content-type="numberedListItem"] {
+  color: var(--text-primary);
+}
+
+.blog-editor-wrapper [data-content-type="bulletListItem"]::before {
+  color: var(--text-muted);
+}
+
+.blog-editor-wrapper [data-content-type="numberedListItem"]::before {
+  color: var(--text-muted);
+}
+
+/* ===== Fancy Checkboxes ===== */
+
+.blog-editor-wrapper [data-content-type="checkListItem"] [data-checked-icon],
+.blog-editor-wrapper [data-content-type="checkListItem"] [data-unchecked-icon],
+.blog-editor-wrapper [data-content-type="checkListItem"] input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  border: 2px solid var(--border-default);
+  background-color: var(--bg-surface);
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  flex-shrink: 0;
+}
+
+.blog-editor-wrapper [data-content-type="checkListItem"] input[type="checkbox"]:hover {
+  border-color: #9b7bf7;
+  box-shadow: 0 0 0 3px rgba(155, 123, 247, 0.12);
+}
+
+.blog-editor-wrapper [data-content-type="checkListItem"] input[type="checkbox"]:checked {
+  background: linear-gradient(135deg, #9b7bf7, #8b6ae6);
+  border-color: #9b7bf7;
+  box-shadow: 0 1px 4px rgba(155, 123, 247, 0.3);
+}
+
+.blog-editor-wrapper [data-content-type="checkListItem"] input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  width: 5px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* Checked item text gets muted + strikethrough */
+.blog-editor-wrapper [data-content-type="checkListItem"][data-checked="true"] .bn-inline-content {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+/* BlockNote's native checkbox SVG icons — style them too */
+.blog-editor-wrapper [data-content-type="checkListItem"] .bn-checkbox {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  border: 2px solid var(--border-default);
+  background-color: var(--bg-surface);
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.blog-editor-wrapper [data-content-type="checkListItem"] .bn-checkbox:hover {
+  border-color: #9b7bf7;
+  box-shadow: 0 0 0 3px rgba(155, 123, 247, 0.12);
+}
+
+.blog-editor-wrapper [data-content-type="checkListItem"][data-checked="true"] .bn-checkbox {
+  background: linear-gradient(135deg, #9b7bf7, #8b6ae6);
+  border-color: #9b7bf7;
+  box-shadow: 0 1px 4px rgba(155, 123, 247, 0.3);
+}
+
+.blog-editor-wrapper [data-content-type="checkListItem"][data-checked="true"] .bn-checkbox svg {
+  color: white;
+}
+
+/* ===== Image blocks ===== */
+
+.blog-editor-wrapper [data-content-type="image"] img {
+  border-radius: 10px;
+  max-width: 100%;
+}
+
+.blog-editor-wrapper [data-content-type="image"] .bn-image-resize-handle {
+  background: #7ba8f0;
+}
+
+/* ===== Table ===== */
+
+.blog-editor-wrapper [data-content-type="table"] {
+  border-color: var(--border-default);
+}
+
+.blog-editor-wrapper [data-content-type="table"] td,
+.blog-editor-wrapper [data-content-type="table"] th {
+  border-color: var(--border-default);
+  padding: 8px 12px;
+}
+
+/* Table handles dark theme */
+.blog-editor-wrapper .bn-table-handle {
+  background: var(--border-default);
+  border: 1px solid #333;
+  color: var(--text-muted);
+}
+
+.blog-editor-wrapper .bn-table-handle:hover {
+  background: var(--border-hover);
+  color: #c4b5fd;
+}
+
+/* Table handle dropdown menu */
+.blog-editor-wrapper .bn-table-handle-menu,
+.bn-table-handle-menu {
+  background: var(--bg-surface) !important;
+  border: 1px solid var(--border-default) !important;
+  border-radius: 8px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
+}
+
+.blog-editor-wrapper .bn-table-handle-menu button,
+.bn-table-handle-menu button {
+  color: var(--text-primary) !important;
+}
+
+.blog-editor-wrapper .bn-table-handle-menu button:hover,
+.bn-table-handle-menu button:hover {
+  background: rgba(196, 181, 253, 0.1) !important;
+  color: #c4b5fd !important;
+}
+
+/* Table extend (add row/col) button */
+.blog-editor-wrapper .bn-extend-button {
+  background: rgba(196, 181, 253, 0.08);
+  border: 1px dashed rgba(196, 181, 253, 0.2);
+  color: var(--text-muted);
+  transition: all 0.15s;
+}
+
+.blog-editor-wrapper .bn-extend-button:hover {
+  background: rgba(196, 181, 253, 0.15);
+  border-color: rgba(196, 181, 253, 0.4);
+  color: #c4b5fd;
+}
+
+/* ===== KaTeX overrides ===== */
+
+.blog-editor-wrapper .katex {
+  color: var(--text-primary);
+  font-size: 1.1em;
+}
+
+.blog-editor-wrapper .katex-display {
+  margin: 0;
+}
+
+/* ===== Custom block styles ===== */
+
+.blog-editor-wrapper .toc-block a {
+  color: #9b7bf7;
+  text-decoration: none;
+}
+
+.blog-editor-wrapper .toc-block a:hover {
+  color: #b69aff;
+}
+
+/* Hide KaTeX MathML accessibility layer — it renders as visible duplicate text */
+.katex-mathml {
+  display: none !important;
+}
+
+/* ===== Inline equation chip (like DateChip) ===== */
+
+.inline-equation-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  margin: 0 2px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: #9b7bf7;
+  background: rgba(155, 123, 247, 0.06);
+  border: 1px solid rgba(155, 123, 247, 0.15);
+  font-size: 13px;
+}
+
+.inline-equation-chip:hover {
+  background: rgba(155, 123, 247, 0.12);
+  border-color: rgba(155, 123, 247, 0.3);
+  box-shadow: 0 0 0 2px rgba(155, 123, 247, 0.15);
+}
+
+.inline-equation-chip .katex {
+  font-size: 1em;
+  color: #9b7bf7;
+}
+
+/* Inline equation dropdown editor */
+
+.inline-equation-editor {
+  position: absolute;
+  z-index: 100;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  width: 320px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg-app);
+  border: 1px solid var(--border-default);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  animation: confirmDialogIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.inline-equation-editor-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  background: var(--bg-surface);
+  border: none;
+  border-bottom: 1px solid var(--border-default);
+  color: var(--text-primary);
+  font-family: 'lixCode', monospace;
+  font-size: 13px;
+  outline: none;
+}
+
+.inline-equation-editor-input::placeholder {
+  color: var(--text-faint);
+}
+
+.inline-equation-editor-preview {
+  padding: 8px 12px;
+  text-align: center;
+  border-bottom: 1px solid var(--border-default);
+  min-height: 24px;
+}
+
+.inline-equation-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  padding: 8px 12px;
+}
+
+/* ===== Inline LaTeX input popup ===== */
+
+.inline-latex-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  animation: confirmOverlayIn 0.15s ease-out;
+}
+
+.inline-latex-popup {
+  width: 100%;
+  max-width: 420px;
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
+  animation: confirmDialogIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.inline-latex-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 16px 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.inline-latex-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 16px;
+  margin-top: 8px;
+  background: var(--bg-app);
+  border: none;
+  border-top: 1px solid var(--border-default);
+  border-bottom: 1px solid var(--border-default);
+  color: var(--text-primary);
+  font-family: 'lixCode', monospace;
+  font-size: 14px;
+  outline: none;
+}
+
+.inline-latex-input::placeholder {
+  color: var(--text-faint);
+}
+
+.inline-latex-preview {
+  padding: 10px 16px;
+  text-align: center;
+  min-height: 28px;
+  border-bottom: 1px solid var(--border-default);
+}
+
+
+.inline-latex-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 16px;
+}
+
+/* ===== Mermaid diagram blocks ===== */
+
+.blog-editor-wrapper [data-content-type="mermaidBlock"],
+.blog-editor-wrapper [data-content-type="blockEquation"] {
+  width: 100%;
+}
+
+/* Block equation rendered state — matches preview .preview-block-equation */
+.editor-block-equation {
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-surface);
+  padding: 20px 24px;
+  margin: 8px 0;
+  text-align: center;
+  overflow-x: auto;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.editor-block-equation:hover {
+  border-color: var(--border-hover);
+}
+
+.editor-block-equation .katex {
+  font-size: 1.2em;
+  color: var(--text-primary);
+}
+
+.mermaid-block {
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-surface);
+  margin: 8px 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+.mermaid-block--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 32px 16px;
+  border-style: dashed;
+  background: rgba(240, 240, 245, 0.5);
+  color: var(--text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+[data-theme="dark"] .mermaid-block--empty {
+  background: rgba(20, 26, 38, 0.5);
+}
+
+.mermaid-block--empty:hover {
+  border-color: #ccc;
+  color: #7c5cbf;
+}
+
+[data-theme="dark"] .mermaid-block--empty:hover {
+  border-color: #333;
+  color: #c4b5fd;
+}
+
+.mermaid-block--editing {
+  padding: 0;
+}
+
+.mermaid-block-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 14px 0;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.mermaid-block-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--bg-app);
+  border: none;
+  border-top: 1px solid var(--border-default);
+  margin-top: 8px;
+  padding: 12px 14px;
+  color: var(--text-primary);
+  font-family: 'lixCode', monospace;
+  font-size: 13px;
+  resize: vertical;
+  outline: none;
+  min-height: 160px;
+}
+
+.mermaid-block-textarea::placeholder {
+  color: var(--text-faint);
+}
+
+/* Live preview panel inside edit mode */
+.mermaid-live-preview {
+  border-top: 1px solid var(--border-default);
+  background: var(--bg-app);
+}
+
+.mermaid-live-preview-label {
+  padding: 6px 14px 0;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.mermaid-viewport--compact {
+  height: 200px;
+  min-height: 120px;
+  border-radius: 0;
+}
+
+/* LaTeX live preview inside edit mode */
+.latex-live-preview {
+  border-top: 1px solid var(--border-default);
+  background: var(--bg-app);
+  padding: 12px 14px;
+  min-height: 40px;
+  text-align: center;
+  overflow-x: auto;
+}
+
+.latex-live-preview-label {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+
+.latex-live-preview .katex-display {
+  margin: 0;
+}
+
+
+.mermaid-block-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 14px;
+  border-top: 1px solid var(--border-default);
+}
+
+.mermaid-btn-cancel {
+  padding: 4px 12px;
+  font-size: 12px;
+  color: #888;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.mermaid-btn-cancel:hover {
+  color: var(--text-primary);
+}
+
+.mermaid-btn-save {
+  padding: 4px 12px;
+  font-size: 12px;
+  color: white;
+  background: #9b7bf7;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.mermaid-btn-save:hover {
+  background: #b69aff;
+}
+
+.mermaid-btn-save:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.mermaid-block--rendered {
+  position: relative;
+  padding: 0;
+  cursor: default;
+  min-height: 280px;
+}
+
+.mermaid-viewport {
+  position: relative;
+  width: 100%;
+  height: 320px;
+  overflow: hidden;
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+}
+
+.mermaid-viewport:active {
+  cursor: grabbing;
+}
+
+.mermaid-block-svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.05s linear;
+  will-change: transform;
+  padding: 24px;
+}
+
+.mermaid-block-svg svg {
+  max-width: none !important;
+  height: auto !important;
+}
+
+/* Make text inside mermaid SVG bigger and more readable */
+.mermaid-block-svg svg text {
+  font-size: 15px !important;
+}
+
+.mermaid-block-svg svg .nodeLabel,
+.mermaid-block-svg svg .edgeLabel {
+  font-size: 15px !important;
+}
+
+/* Zoom controls */
+.mermaid-zoom-controls {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  padding: 4px 6px;
+  z-index: 5;
+}
+
+[data-theme="dark"] .mermaid-zoom-controls {
+  background: rgba(14, 18, 27, 0.85);
+}
+
+.mermaid-zoom-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+}
+
+.mermaid-zoom-btn:hover {
+  color: #c4b5fd;
+  background: rgba(196, 181, 253, 0.1);
+}
+
+.mermaid-zoom-label {
+  font-size: 11px;
+  color: var(--text-faint);
+  min-width: 36px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+
+.mermaid-block-hover {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.mermaid-block--rendered:hover .mermaid-block-hover,
+.group:hover .mermaid-block-hover {
+  opacity: 1;
+}
+
+.mermaid-hover-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+}
+
+[data-theme="dark"] .mermaid-hover-btn {
+  background: rgba(14, 18, 27, 0.85);
+  border-color: #333;
+}
+
+.mermaid-hover-btn:hover {
+  color: var(--text-primary);
+  background: var(--border-default);
+}
+
+.mermaid-hover-delete:hover {
+  color: #f87171;
+}
+
+/* ===== Editor Outline Sidebar ===== */
+
+.editor-outline-sidebar {
+  position: fixed;
+  right: 24px;
+  top: 80px;
+  width: 200px;
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
+  z-index: 30;
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+
+.editor-outline-sidebar:hover {
+  opacity: 1;
+}
+
+.editor-outline-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-faint);
+  margin-bottom: 8px;
+  padding-left: 12px;
+}
+
+.editor-outline-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.editor-outline-item {
+  display: block;
+  padding: 3px 0;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.editor-outline-text {
+  font-size: 13px;
+  color: var(--text-muted);
+  text-decoration: none;
+  display: block;
+  line-height: 1.4;
+  transition: color 0.15s, font-weight 0.15s;
+}
+
+.editor-outline-item:hover .editor-outline-text {
+  color: var(--accent);
+}
+
+/* Hide on smaller screens where there's no room */
+@media (max-width: 1200px) {
+  .editor-outline-sidebar {
+    display: none;
+  }
+}
+
+/* Scrollbar styling for outline */
+.editor-outline-sidebar::-webkit-scrollbar {
+  width: 2px;
+}
+
+.editor-outline-sidebar::-webkit-scrollbar-thumb {
+  background: rgba(155, 123, 247, 0.2);
+  border-radius: 2px;
+}
+
+/* ===== Table delete button ===== */
+
+.table-delete-btn {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  z-index: 20;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  color: var(--text-faint);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s, background-color 0.15s, border-color 0.15s;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+[data-content-type="table"]:hover .table-delete-btn,
+.table-delete-btn:focus {
+  opacity: 1;
+}
+
+.table-delete-btn:hover {
+  color: #f87171;
+  background-color: rgba(248, 113, 113, 0.08);
+  border-color: rgba(248, 113, 113, 0.3);
+}