@elixpo/lixeditor 2.1.6

package/dist/styles/preview.css

@@ -0,0 +1,620 @@
+/* ===== Preview Floating TOC (top-right sidebar) ===== */
+
+.preview-floating-toc {
+  position: fixed;
+  top: 80px;
+  right: 24px;
+  width: 220px;
+  z-index: 30;
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
+}
+
+.preview-floating-toc-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-faint);
+  font-weight: 700;
+  margin-bottom: 14px;
+}
+
+.preview-floating-toc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.preview-floating-toc-link {
+  font-size: 13px;
+  color: var(--text-muted);
+  text-decoration: none;
+  display: block;
+  padding: 3px 0;
+  transition: color 0.15s, font-weight 0.15s;
+  line-height: 1.4;
+}
+
+.preview-floating-toc-link:hover {
+  color: var(--accent);
+}
+
+/* Hide when viewport too narrow for sidebar */
+@media (max-width: 1400px) {
+  .preview-floating-toc {
+    display: none;
+  }
+}
+
+/* ===== Back to Top Button ===== */
+
+.preview-back-to-top {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 30;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1px solid var(--border-default);
+  background: var(--bg-surface);
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.preview-back-to-top:hover {
+  color: #c4b5fd;
+  border-color: rgba(196, 181, 253, 0.25);
+}
+
+/* ===== Full-width preview wrapper — breaks out of 720px parent ===== */
+
+.blog-preview-fullwidth {
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  min-height: calc(100vh - 120px);
+  padding: 0;
+}
+
+.blog-preview-fullwidth .blog-preview {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 0 24px;
+  min-height: calc(100vh - 160px);
+}
+
+/* ===== Preview Prose Styles (matched to editor for WYSIWYG) ===== */
+
+.blog-preview-content {
+  color: var(--text-primary);
+  font-family: 'Source Serif 4', 'Georgia', serif;
+  font-size: 1em;
+  line-height: 1.75;
+}
+
+.blog-preview-content h1 {
+  font-family: 'Source Serif 4', 'Georgia', serif;
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 1.2em 0 0.5em;
+  color: var(--text-primary);
+}
+
+.blog-preview-content h2 {
+  font-family: 'Source Serif 4', 'Georgia', serif;
+  font-size: 24px;
+  font-weight: 650;
+  line-height: 1.35;
+  margin: 1em 0 0.45em;
+  color: var(--text-primary);
+}
+
+.blog-preview-content h3 {
+  font-family: 'Source Serif 4', 'Georgia', serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.4;
+  margin: 0.9em 0 0.4em;
+  color: var(--text-primary);
+}
+
+.blog-preview-content p {
+  color: var(--text-primary);
+  font-size: 1em;
+  line-height: 1.75;
+  margin-bottom: 0.75em;
+}
+
+/* Links — blue with subtle underline */
+.blog-preview-content a {
+  color: #7ba8f0;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(123, 168, 240, 0.3);
+  padding-bottom: 1px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.blog-preview-content a:hover {
+  color: #9dc0ff;
+  border-bottom-color: rgba(157, 192, 255, 0.5);
+  background: rgba(123, 168, 240, 0.06);
+}
+
+/* Mention chips, TOC links, subpage items have their own styling */
+.blog-preview-content a.preview-toc-link,
+.blog-preview-content a.link-preview-card,
+.blog-preview-content a.subpage-item {
+  color: inherit !important;
+  border-bottom: none !important;
+  background: none !important;
+  text-decoration: none !important;
+  padding-bottom: 10px !important;
+}
+
+/* Mention chips — match editor styling */
+.blog-preview-content a.mention-chip {
+  border-bottom: none !important;
+  padding-bottom: 0 !important;
+}
+
+/* All mention types (user, blog, org) use .mention-chip — styled in mentions.css */
+
+.blog-preview-content a.subpage-item:hover {
+  color: inherit !important;
+  background: var(--bg-hover) !important;
+}
+
+/* Subpage block in preview — proper spacing */
+.blog-preview-content .subpage-block {
+  margin: 1.5em 0;
+}
+
+.blog-preview-content strong {
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.blog-preview-content em {
+  font-style: italic;
+}
+
+.blog-preview-content ul,
+.blog-preview-content ol {
+  padding-left: 1.5em;
+  margin-bottom: 0.75em;
+  color: var(--text-primary);
+}
+
+.blog-preview-content ul {
+  list-style-type: disc;
+}
+
+.blog-preview-content ol {
+  list-style-type: decimal;
+}
+
+.blog-preview-content li {
+  margin-bottom: 0.35em;
+  line-height: 1.75;
+  display: list-item;
+}
+
+/* Nested lists inside list items */
+.blog-preview-content li > ul,
+.blog-preview-content li > ol {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+/* ===== Checklist Styling (matches editor checkboxes) ===== */
+
+.blog-preview-content .preview-checklist {
+  list-style: none;
+  padding-left: 0;
+}
+
+.blog-preview-content .preview-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  list-style: none;
+  line-height: 1.75;
+  margin-bottom: 0.35em;
+}
+
+.preview-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 6px;
+  border: 2px solid var(--border-default);
+  background-color: var(--bg-surface);
+  margin-top: 5px;
+}
+
+.preview-checkbox--checked {
+  background: linear-gradient(135deg, #9b7bf7, #8b6ae6);
+  border-color: #9b7bf7;
+  box-shadow: 0 1px 4px rgba(155, 123, 247, 0.3);
+}
+
+.preview-checkbox-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-check--checked .preview-check-text {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+/* Nested checklists */
+.blog-preview-content .preview-check > ul {
+  margin-top: 0.25em;
+}
+
+/* BlockNote HTML output uses data attributes — handle those too */
+.blog-preview-content [data-content-type="bulletListItem"] {
+  display: list-item;
+  list-style-type: disc;
+  margin-left: 1.5em;
+  color: var(--text-primary);
+  line-height: 1.75;
+  margin-bottom: 0.25em;
+}
+
+.blog-preview-content [data-content-type="numberedListItem"] {
+  display: list-item;
+  list-style-type: decimal;
+  margin-left: 1.5em;
+  color: var(--text-primary);
+  line-height: 1.75;
+  margin-bottom: 0.25em;
+}
+
+.blog-preview-content blockquote {
+  border-left: 3px solid #7ba8f0;
+  padding-left: 1em;
+  margin: 0.75em 0;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.blog-preview-content pre {
+  background: var(--code-bg);
+  border: 1px solid var(--border-default);
+  border-radius: 10px;
+  padding: 28px 16px 12px;
+  overflow-x: auto;
+  margin: 0.75em 0;
+  position: relative;
+  font-family: 'lixCode', monospace;
+  font-size: 0.84em;
+  line-height: 1.7;
+}
+
+.blog-preview-content pre code {
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  padding: 0;
+  color: var(--code-text);
+}
+
+/* Shiki syntax highlighting — let inline styles override */
+.blog-preview-content pre code span[style] {
+  background: none !important;
+}
+
+.blog-preview-content p code,
+.blog-preview-content li code {
+  padding: 0.15em 0.4em;
+}
+
+/* Preview code block language label */
+.preview-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;
+  line-height: 1.5;
+  z-index: 5;
+  pointer-events: none;
+}
+
+/* Preview code block copy button */
+.preview-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;
+}
+
+.blog-preview-content pre:hover .preview-code-copy-btn {
+  opacity: 1;
+}
+
+.preview-code-copy-btn:hover {
+  background: var(--bg-active);
+  color: #a78bfa;
+}
+
+.blog-preview-content img:not(.mention-chip-avatar) {
+  border-radius: 10px;
+  max-width: 100%;
+  width: 100%;
+  margin: 1em 0;
+}
+
+.blog-preview-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5em 0;
+}
+
+.blog-preview-content th,
+.blog-preview-content td {
+  border: 1px solid var(--border-default);
+  padding: 8px 12px;
+  text-align: left;
+  color: var(--text-primary);
+}
+
+.blog-preview-content th {
+  background: var(--bg-surface);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.blog-preview-content hr {
+  border: none;
+  border-top: 1px solid var(--border-default);
+  margin: 1.5em 0;
+}
+
+/* ===== Preview Block Equations ===== */
+
+.blog-preview-content .preview-block-equation {
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-surface);
+  padding: 20px 24px;
+  margin: 0.75em 0;
+  text-align: center;
+  overflow-x: auto;
+}
+
+.blog-preview-content .preview-block-equation .katex {
+  font-size: 1.2em;
+  color: var(--text-primary);
+}
+
+/* Inline equation chip — matches editor .inline-equation-chip */
+.blog-preview-content .preview-inline-equation {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  margin: 0 2px;
+  border-radius: 5px;
+  color: #9b7bf7;
+  background: rgba(155, 123, 247, 0.06);
+  border: 1px solid rgba(155, 123, 247, 0.15);
+  font-size: 13px;
+  vertical-align: baseline;
+}
+
+.blog-preview-content .preview-inline-equation .katex {
+  font-size: 1em;
+  color: #9b7bf7;
+}
+
+/* ===== Preview Mermaid Diagrams ===== */
+
+.blog-preview-content .preview-mermaid-block {
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-surface);
+  padding: 20px;
+  margin: 0.75em 0;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.blog-preview-content .preview-mermaid-block svg {
+  max-width: none;
+  width: 100%;
+  height: auto;
+  min-height: 180px;
+}
+
+/* ===== Preview Inline TOC Block (matches editor toc-block) ===== */
+
+.blog-preview-content .preview-toc-block {
+  border: 1px solid var(--border-default);
+  border-radius: 12px;
+  background: var(--bg-surface);
+  padding: 16px 20px;
+  margin: 0.75em 0;
+  user-select: none;
+}
+
+.blog-preview-content .preview-toc-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.blog-preview-content .preview-toc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.blog-preview-content .preview-toc-list li {
+  margin: 0;
+  display: block;
+}
+
+.blog-preview-content .preview-toc-link {
+  font-size: 13px;
+  color: #9b7bf7;
+  text-decoration: none;
+  display: block;
+  padding: 2px 0;
+  transition: color 0.15s;
+  cursor: pointer;
+}
+
+.blog-preview-content .preview-toc-link:hover {
+  color: #b69aff;
+}
+
+/* ===== Preview Date Chip (matches editor DateChip) ===== */
+
+.preview-date-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #9b7bf7;
+  background: rgba(155, 123, 247, 0.06);
+  border: 1px solid rgba(155, 123, 247, 0.15);
+  margin: 0 2px;
+  white-space: nowrap;
+}
+
+.preview-date-chip svg {
+  flex-shrink: 0;
+}
+
+/* ===== Preview Mention Hover Card ===== */
+
+.mention-hover-card {
+  position: fixed;
+  z-index: 1000;
+  width: 260px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+  animation: linkPreviewIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  padding: 14px;
+  pointer-events: auto;
+}
+
+[data-theme="dark"] .mention-hover-card {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+.mention-hover-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.mention-hover-card-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: var(--bg-elevated);
+}
+
+.mention-hover-card-initial {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--bg-elevated);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.mention-hover-card-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+
+.mention-hover-card-username {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.mention-hover-card-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #9b7bf7;
+  text-decoration: none !important;
+  border: none !important;
+}
+
+.mention-hover-card-link:hover {
+  color: #b69aff;
+  background: none !important;
+}
+
+/* ===== Preview figcaption ===== */
+
+.blog-preview-content figcaption {
+  text-align: center;
+  font-size: 0.85em;
+  color: var(--text-faint);
+  margin-top: 6px;
+}

package/dist/styles/variables.css

@@ -0,0 +1,75 @@
+/* ===== LixEditor CSS Variables =====
+ * Override these to customize the editor's appearance.
+ * All variables fall back to sensible defaults. */
+
+:root {
+  /* Text colors */
+  --lix-text-primary: #1a1a2e;
+  --lix-text-secondary: #4a4a5a;
+  --lix-text-muted: #6b7280;
+  --lix-text-faint: #9ca3af;
+
+  /* Backgrounds */
+  --lix-bg-app: #ffffff;
+  --lix-bg-surface: #f7f7f9;
+  --lix-bg-elevated: #eeeef2;
+  --lix-bg-hover: rgba(0, 0, 0, 0.04);
+
+  /* Borders */
+  --lix-border: #dcdce4;
+  --lix-border-hover: #c4c4d0;
+  --lix-divider: #eeeef2;
+
+  /* Accent */
+  --lix-accent: #9b7bf7;
+  --lix-accent-hover: #8b6ae6;
+  --lix-accent-subtle: rgba(155, 123, 247, 0.08);
+
+  /* Code blocks */
+  --lix-code-bg: #f8f8fb;
+  --lix-code-text: #3d3d50;
+  --lix-code-lang-bg: #eeeef2;
+  --lix-code-lang-text: #6b7280;
+
+  /* Links */
+  --lix-link-color: #7ba8f0;
+  --lix-link-hover: #9dc0ff;
+
+  /* Inline code */
+  --lix-inline-code-color: #7c3aed;
+  --lix-inline-code-bg: rgba(124, 58, 237, 0.08);
+
+  /* Shadows */
+  --lix-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --lix-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
+
+  /* Font families */
+  --lix-font-body: 'Source Serif 4', Georgia, serif;
+  --lix-font-code: 'SF Mono', 'Fira Code', monospace;
+}
+
+[data-theme="dark"] {
+  --lix-text-primary: #e4e4e7;
+  --lix-text-secondary: #b0b0c0;
+  --lix-text-muted: #8b8fa3;
+  --lix-text-faint: #555;
+
+  --lix-bg-app: #0e1219;
+  --lix-bg-surface: #141a26;
+  --lix-bg-elevated: #1e2638;
+  --lix-bg-hover: rgba(255, 255, 255, 0.05);
+
+  --lix-border: #232d3f;
+  --lix-border-hover: #333d50;
+  --lix-divider: #1e2638;
+
+  --lix-code-bg: #0e1219;
+  --lix-code-text: #c8d1e0;
+  --lix-code-lang-bg: #1a2030;
+  --lix-code-lang-text: #9ba8b9;
+
+  --lix-inline-code-color: #c4b5fd;
+  --lix-inline-code-bg: rgba(196, 181, 253, 0.1);
+
+  --lix-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
+}