@elixpo/lixeditor 2.1.6

package/src/styles/editor.css

@@ -0,0 +1,499 @@
+/* ===== Edit page scrollbar ===== */
+
+.edit-page {
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-elevated) transparent;
+}
+
+.edit-page::-webkit-scrollbar {
+  width: 8px;
+}
+
+.edit-page::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.edit-page::-webkit-scrollbar-thumb {
+  background: var(--bg-elevated);
+  border-radius: 4px;
+}
+
+.edit-page::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
+
+/* ===== Subtle noise texture background ===== */
+
+.editor-texture-bg {
+  position: relative;
+  background-color: var(--bg-app);
+}
+
+
+.editor-texture-bg > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* ===== BlogEditor (BlockNote) Dark Theme ===== */
+
+.blog-editor-wrapper .bn-editor {
+  background: transparent;
+  color: var(--text-primary);
+  font-family: 'Source Serif 4', Georgia, serif;
+  font-size: 1em;
+  line-height: 1.75;
+  padding-left: 0;
+}
+
+.blog-editor-wrapper .bn-container {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.blog-editor-wrapper [class*="blockOuter"] {
+  padding-left: 0;
+}
+
+.blog-editor-wrapper .bn-block-content {
+  font-size: 1em;
+}
+
+/* Placeholder */
+.blog-editor-wrapper .bn-inline-content[data-placeholder]::before {
+  color: var(--text-faint);
+  font-style: normal;
+}
+
+/* Headings — override BlockNote's .bn-default-styles h1 { font-size: inherit } */
+.blog-editor-wrapper .bn-default-styles h1 {
+  font-size: 30px !important;
+  font-family: 'Source Serif 4', Georgia, serif;
+  font-weight: 700 !important;
+  color: var(--text-primary);
+}
+.blog-editor-wrapper .bn-default-styles h2 {
+  font-size: 24px !important;
+  font-family: 'Source Serif 4', Georgia, serif;
+  font-weight: 650 !important;
+  color: var(--text-primary);
+}
+.blog-editor-wrapper .bn-default-styles h3 {
+  font-size: 20px !important;
+  font-family: 'Source Serif 4', Georgia, serif;
+  font-weight: 600 !important;
+  color: var(--text-primary);
+}
+
+/* Inline code — purple accent, adapts to theme.
+   Excludes code inside code blocks so Shiki syntax highlighting isn't overridden. */
+.blog-editor-wrapper code,
+.blog-preview-content code {
+  color: #7c3aed;
+  background: rgba(124, 58, 237, 0.08);
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+  font-size: 0.82em;
+  font-family: 'lixCode', monospace;
+  -webkit-hyphens: none;
+  hyphens: none;
+  text-decoration: none !important;
+  -webkit-text-decoration: none !important;
+  -webkit-text-decorations-in-effect: none !important;
+  text-decoration-line: none !important;
+  text-decoration-style: initial !important;
+  text-underline-position: under;
+}
+
+/* Force hide spellcheck squiggles on all code elements */
+.blog-editor-wrapper code *,
+.blog-editor-wrapper [data-content-type="codeBlock"] * {
+  text-decoration: none !important;
+  -webkit-text-decoration: none !important;
+  -webkit-text-decorations-in-effect: none !important;
+  text-decoration-line: none !important;
+}
+
+[data-theme="dark"] .blog-editor-wrapper code,
+[data-theme="dark"] .blog-preview-content code {
+  color: #c4b5fd;
+  background: rgba(196, 181, 253, 0.1);
+}
+
+/* Reset inline code styles inside code blocks — let Shiki/theme handle these */
+.blog-editor-wrapper [data-content-type="codeBlock"] code,
+.blog-preview-content pre code {
+  color: var(--code-text);
+  background: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+/* Code blocks — lixCode font, no line highlights */
+.blog-editor-wrapper [data-content-type="codeBlock"] code,
+.blog-editor-wrapper [data-content-type="codeBlock"] pre,
+.blog-editor-wrapper [data-content-type="codeBlock"] [contenteditable] {
+  font-family: 'lixCode', 'SF Mono', 'Fira Code', monospace !important;
+  font-size: 0.9em;
+}
+
+.blog-editor-wrapper [data-content-type="codeBlock"] .hljs-ln-line,
+.blog-editor-wrapper [data-content-type="codeBlock"] .line-highlight,
+.blog-editor-wrapper [data-content-type="codeBlock"] .bn-line-number {
+  background: none !important;
+}
+
+/* AI-generated blocks use named 'purple' — ensure readable text in both themes */
+.blog-editor-wrapper [data-text-color="purple"] { color: var(--text-secondary) !important; }
+.blog-editor-wrapper [data-background-color="purple"] { background-color: rgba(155, 123, 247, 0.06) !important; }
+
+/* Map BlockNote block-level text color (data-text-color on block containers) */
+.blog-editor-wrapper [data-text-color="#ffffff"] { color: #ffffff !important; }
+.blog-editor-wrapper [data-text-color="#9ca3af"] { color: var(--text-muted) !important; }
+.blog-editor-wrapper [data-text-color="#f87171"] { color: #f87171 !important; }
+.blog-editor-wrapper [data-text-color="#fb923c"] { color: #fb923c !important; }
+.blog-editor-wrapper [data-text-color="#fbbf24"] { color: #fbbf24 !important; }
+.blog-editor-wrapper [data-text-color="#4ade80"] { color: #4ade80 !important; }
+.blog-editor-wrapper [data-text-color="#60a5fa"] { color: #60a5fa !important; }
+.blog-editor-wrapper [data-text-color="#a78bfa"] { color: #a78bfa !important; }
+.blog-editor-wrapper [data-text-color="#f472b6"] { color: #f472b6 !important; }
+
+/* Map BlockNote inline text color marks (data-style-type="textColor" with data-value) */
+.blog-editor-wrapper [data-style-type="textColor"][data-value="#ffffff"] { color: #ffffff !important; }
+.blog-editor-wrapper [data-style-type="textColor"][data-value="#9ca3af"] { color: var(--text-muted) !important; }
+.blog-editor-wrapper [data-style-type="textColor"][data-value="#f87171"] { color: #f87171 !important; }
+.blog-editor-wrapper [data-style-type="textColor"][data-value="#fb923c"] { color: #fb923c !important; }
+.blog-editor-wrapper [data-style-type="textColor"][data-value="#fbbf24"] { color: #fbbf24 !important; }
+.blog-editor-wrapper [data-style-type="textColor"][data-value="#4ade80"] { color: #4ade80 !important; }
+.blog-editor-wrapper [data-style-type="textColor"][data-value="#60a5fa"] { color: #60a5fa !important; }
+.blog-editor-wrapper [data-style-type="textColor"][data-value="#a78bfa"] { color: #a78bfa !important; }
+.blog-editor-wrapper [data-style-type="textColor"][data-value="#f472b6"] { color: #f472b6 !important; }
+
+/* Map BlockNote block-level background color */
+.blog-editor-wrapper [data-background-color="rgba(156,163,175,0.25)"] { background-color: rgba(156,163,175,1) !important; }
+.blog-editor-wrapper [data-background-color="rgba(248,113,113,0.25)"] { background-color: rgba(248,113,113,1) !important; }
+.blog-editor-wrapper [data-background-color="rgba(251,146,60,0.25)"] { background-color: rgba(251,146,60,1) !important; }
+.blog-editor-wrapper [data-background-color="rgba(251,191,36,0.25)"] { background-color: rgba(251,191,36,1) !important; }
+.blog-editor-wrapper [data-background-color="rgba(74,222,128,0.25)"] { background-color: rgba(74,222,128,1) !important; }
+.blog-editor-wrapper [data-background-color="rgba(96,165,250,0.25)"] { background-color: rgba(96,165,250,1) !important; }
+.blog-editor-wrapper [data-background-color="rgba(167,139,250,0.25)"] { background-color: rgba(167,139,250,1) !important; }
+.blog-editor-wrapper [data-background-color="rgba(244,114,182,0.25)"] { background-color: rgba(244,114,182,1) !important; }
+
+/* Map BlockNote inline background color marks */
+.blog-editor-wrapper [data-style-type="backgroundColor"][data-value="rgba(156,163,175,0.25)"] { background-color: rgba(156,163,175,0.25) !important; }
+.blog-editor-wrapper [data-style-type="backgroundColor"][data-value="rgba(248,113,113,0.25)"] { background-color: rgba(248,113,113,0.25) !important; }
+.blog-editor-wrapper [data-style-type="backgroundColor"][data-value="rgba(251,146,60,0.25)"] { background-color: rgba(251,146,60,0.25) !important; }
+.blog-editor-wrapper [data-style-type="backgroundColor"][data-value="rgba(251,191,36,0.25)"] { background-color: rgba(251,191,36,0.25) !important; }
+.blog-editor-wrapper [data-style-type="backgroundColor"][data-value="rgba(74,222,128,0.25)"] { background-color: rgba(74,222,128,0.25) !important; }
+.blog-editor-wrapper [data-style-type="backgroundColor"][data-value="rgba(96,165,250,0.25)"] { background-color: rgba(96,165,250,0.25) !important; }
+.blog-editor-wrapper [data-style-type="backgroundColor"][data-value="rgba(167,139,250,0.25)"] { background-color: rgba(167,139,250,0.25) !important; }
+.blog-editor-wrapper [data-style-type="backgroundColor"][data-value="rgba(244,114,182,0.25)"] { background-color: rgba(244,114,182,0.25) !important; }
+
+/* Cover gradient blur placeholder */
+.cover-gradient-blur {
+  background: linear-gradient(
+    135deg,
+    rgba(155, 123, 247, 0.4) 0%,
+    rgba(96, 165, 250, 0.35) 25%,
+    rgba(244, 114, 182, 0.3) 50%,
+    rgba(52, 211, 153, 0.3) 75%,
+    rgba(251, 191, 36, 0.3) 100%
+  );
+  filter: blur(40px) saturate(1.5);
+}
+
+/* Cover banner slide-in animation */
+@keyframes coverBannerIn {
+  from {
+    opacity: 0;
+    transform: scaleY(0.92);
+    transform-origin: top;
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: top;
+  }
+}
+
+.cover-banner-enter {
+  animation: coverBannerIn 0.35s ease-out;
+}
+
+/* Cover toolbar buttons */
+.cover-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  border: none;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(12px);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.cover-toolbar-btn:hover {
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+}
+
+.cover-toolbar-btn-danger:hover {
+  background: rgba(239, 68, 68, 0.5);
+  color: #fca5a5;
+}
+
+/* Glassmorphic emoji picker wrapper */
+.emoji-picker-glass {
+  background: rgba(14, 18, 27, 0.7);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+/* Side menu (+ / drag handle) — lavender glassmorphic */
+.blog-editor-wrapper .bn-side-menu {
+  background: rgba(196, 181, 253, 0.06);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(196, 181, 253, 0.15);
+  border-radius: 8px;
+  margin-right: 16px;
+  height: 28px !important;
+  max-height: 28px !important;
+  min-height: 28px !important;
+  align-items: center;
+  align-self: flex-start !important;
+  overflow: hidden;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.blog-editor-wrapper .bn-side-menu:hover {
+  background: rgba(196, 181, 253, 0.1);
+  border-color: rgba(196, 181, 253, 0.25);
+}
+
+.blog-editor-wrapper .bn-side-menu button {
+  color: rgba(196, 181, 253, 0.5);
+  transition: color 0.15s ease;
+}
+
+.blog-editor-wrapper .bn-side-menu button:hover {
+  color: #c4b5fd;
+}
+
+.blog-editor-wrapper .bn-drag-handle {
+  color: rgba(196, 181, 253, 0.4);
+}
+
+.blog-editor-wrapper .bn-drag-handle:hover {
+  color: #c4b5fd;
+}
+
+/* Selection highlight */
+.blog-editor-wrapper ::selection {
+  background: rgba(123, 168, 240, 0.3);
+}
+
+/* ===== Editor links — distinct styling ===== */
+.blog-editor-wrapper .bn-editor a,
+.blog-editor-wrapper .bn-block-content a {
+  color: #7ba8f0 !important;
+  text-decoration: none !important;
+  border-bottom: 1px solid rgba(123, 168, 240, 0.3);
+  padding-bottom: 1px;
+  cursor: text;
+  pointer-events: auto;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+
+.blog-editor-wrapper .bn-editor a:hover,
+.blog-editor-wrapper .bn-block-content a:hover {
+  color: #9dc0ff !important;
+  border-bottom-color: rgba(157, 192, 255, 0.5);
+  background: rgba(123, 168, 240, 0.06);
+}
+
+/* Ctrl/Cmd held — links become clickable, show pointer cursor */
+.blog-editor-wrapper.ctrl-held .bn-editor a,
+.blog-editor-wrapper.ctrl-held .bn-block-content a {
+  cursor: pointer;
+  text-decoration: underline !important;
+  border-bottom: none;
+}
+
+/* ===== Link Preview Tooltip ===== */
+
+.link-preview-tooltip {
+  position: fixed;
+  z-index: 1000;
+  width: 320px;
+  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), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  animation: linkPreviewIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: auto;
+}
+
+[data-theme="dark"] .link-preview-tooltip {
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+@keyframes linkPreviewIn {
+  from { opacity: 0; transform: translateY(4px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.link-preview-card {
+  display: block;
+  text-decoration: none !important;
+  border: none !important;
+  color: inherit;
+  background: none !important;
+}
+
+.link-preview-card:hover {
+  background: none !important;
+  border: none !important;
+}
+
+.link-preview-image {
+  width: 100%;
+  height: 140px;
+  overflow: hidden;
+  background: var(--bg-elevated);
+}
+
+.link-preview-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.link-preview-body {
+  padding: 12px 14px;
+}
+
+.link-preview-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.4;
+  margin-bottom: 4px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.link-preview-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.45;
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.link-preview-domain {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+.link-preview-favicon {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+.link-preview-loading {
+  padding: 14px;
+}
+
+.link-preview-skeleton {
+  background: var(--bg-elevated);
+  border-radius: 4px;
+  animation: skeletonPulse 1.2s ease-in-out infinite;
+}
+
+@keyframes skeletonPulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.8; }
+}
+
+/* ===== Dark scrollbar (used in emoji picker, editor dropdowns) ===== */
+
+.dark-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dark-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dark-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--bg-elevated);
+  border-radius: 3px;
+}
+
+.dark-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
+
+/* Firefox */
+.dark-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-elevated) transparent;
+}
+
+/* ===== Editor Confirm Modal ===== */
+
+.editor-confirm-overlay {
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(4px);
+  animation: confirmOverlayIn 0.15s ease-out;
+}
+
+@keyframes confirmOverlayIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.editor-confirm-dialog {
+  background: var(--bg-app);
+  border: 1px solid var(--border-default);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  animation: confirmDialogIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes confirmDialogIn {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.editor-confirm-cancel {
+  color: var(--text-body);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+}
+
+.editor-confirm-cancel:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-hover);
+}

package/src/styles/index.css

@@ -0,0 +1,11 @@
+/**
+ * @elixpo/lixeditor styles
+ * Import in your app: import '@elixpo/lixeditor/styles';
+ */
+
+@import './variables.css';
+@import './editor.css';
+@import './blocks.css';
+@import './menus.css';
+@import './preview.css';
+@import './blog-image.css';