@thangph2146/lexical-editor 0.0.1

package/src/themes/editor-theme.scss

@@ -0,0 +1,622 @@
+/**
+ * Editor Theme - Independent SCSS Structure
+ * Built for Lexical + Next.js Monorepo
+ */
+
+@use "variables" as *;
+@use "mixins" as *;
+@use "ui-components";
+@use "plugins";
+
+// 2. Scoped Editor Styles
+.editor-root-container {
+  // Editor Container Border (matches input style)
+  // border: 1px solid transparent; // Removed default border to avoid layout issues
+  border-radius: $editor-border-radius;
+  transition: all 0.2s ease-in-out;
+
+  &.editor-root-container--shadow:focus-within {
+    // Use box-shadow to simulate border and ring without layout shift
+    // 1px border simulation + 2px ring
+    box-shadow: 0 0 0 1px $editor-border-color, 0 0 0 3px var(--ring, rgba(59, 130, 246, 0.5));
+  }
+}
+
+.lexical-editor-root {
+  font-family: $editor-font-family !important;
+  font-size: $editor-font-size-base; // Set base font size for consistency
+  color: $editor-text-color !important;
+  background-color: $editor-bg-color !important;
+  position: relative !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  text-align: left !important; // Ensure consistent text alignment
+  box-sizing: border-box !important;
+  
+  // Editor Container Border (matches input style)
+  // border: 1px solid transparent;
+  // border-radius: $editor-border-radius;
+  // transition: all 0.2s ease-in-out;
+
+  // &:focus-within {
+  //   border-color: $editor-border-color !important;
+  //   box-shadow: 0 0 0 2px var(--ring, rgba(59, 130, 246, 0.5));
+  // }
+
+  // 2.1 CSS Reset & Style Isolation
+  // Reset common elements to prevent host app styles from leaking in.
+  // Using specific selectors to maintain performance while ensuring isolation.
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  // Reset base typography and layout tags
+  p, ul, ol, li, span, strong, em, b, i, blockquote, h1, h2, h3, h4, h5, h6 {
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+    font-size: 100%; // Removed !important to allow overrides
+    // font: inherit !important; // Removed aggressive font reset to allow inline styles
+    vertical-align: baseline !important;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-font-smoothing: grayscale !important;
+    letter-spacing: normal !important; // Reset letter spacing
+    word-spacing: normal !important;   // Reset word spacing
+    text-indent: 0 !important;         // Reset text indentation
+    text-transform: none !important;   // Reset text transformation
+    text-decoration: none !important;  // Reset text decoration
+    line-height: inherit; // Removed !important to allow overrides
+    text-align: inherit; // Removed !important to allow overrides
+    white-space: inherit !important;
+    word-break: normal !important;
+    word-wrap: normal !important;
+    overflow-wrap: normal !important;
+    margin-inline-start: 0 !important;
+    margin-inline-end: 0 !important;
+    padding-inline-start: 0 !important;
+    padding-inline-end: 0 !important;
+    margin-block-start: 0 !important;
+    margin-block-end: 0 !important;
+    -webkit-tap-highlight-color: transparent !important;
+  }
+
+  // Ensure consistent list behavior
+  ul, ol {
+    list-style-position: outside !important;
+    list-style-type: none !important; // Default to none, will be overridden by .editor-ul/ol
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  // Ensure span (Lexical text nodes) don't inherit unexpected layout properties
+  span[data-lexical-text="true"] {
+    display: inline !important;
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  // Core Typography
+  .editor-paragraph {
+    font-size: $editor-font-size-base !important;
+    line-height: $editor-line-height-base !important;
+    margin-top: 12px !important; // Increased spacing
+    margin-bottom: 12px !important;
+    
+    &:first-child { margin-top: 0 !important; }
+  }
+
+  // Headings - Improved sizes and spacing
+  .editor-h1 { font-size: 36px; line-height: 40px !important; font-weight: 700 !important; letter-spacing: -0.025em; margin-top: 32px !important; margin-bottom: 16px !important; }
+  .editor-h2 { font-size: 30px; line-height: 36px !important; font-weight: 600 !important; letter-spacing: -0.025em; margin-top: 24px !important; margin-bottom: 12px !important; border-bottom: 1px solid $editor-border-color; padding-bottom: 5px; }
+  .editor-h3 { font-size: 24px; line-height: 32px !important; font-weight: 600 !important; letter-spacing: -0.025em; margin-top: 24px !important; margin-bottom: 12px !important; }
+  .editor-h4 { font-size: 20px; line-height: 28px !important; font-weight: 600 !important; margin-top: 20px !important; margin-bottom: 8px !important; }
+  .editor-h5 { font-size: 18px; line-height: 28px !important; font-weight: 600 !important; margin-top: 20px !important; margin-bottom: 8px !important; }
+  .editor-h6 { font-size: 16px; line-height: 24px !important; font-weight: 600 !important; margin-top: 20px !important; margin-bottom: 8px !important; }
+
+  // Quote
+  .editor-quote {
+    margin: 24px 0 !important;
+    padding-left: 16px !important;
+    border-left: 4px solid $editor-quote-border-color !important;
+    font-style: italic !important;
+    color: #64748b !important; // slate-500
+  }
+
+  // Lists
+  .editor-ol {
+    list-style-type: decimal !important;
+    padding-left: 24px !important;
+    margin-top: 8px !important;
+    margin-bottom: 8px !important;
+
+    &[data-list-marker="alpha"] {
+      list-style-type: lower-alpha !important;
+    }
+
+    &[data-list-color] {
+      li::marker { color: var(--list-marker-color, currentColor) !important; }
+    }
+  }
+
+  .editor-ul:not(.editor-checklist) {
+    padding-left: 24px !important;
+    margin-top: 8px !important;
+    margin-bottom: 8px !important;
+
+    &:not([data-list-marker]) {
+      list-style-type: disc !important;
+    }
+
+    &[data-list-marker="-"] {
+      list-style-type: none !important;
+      > li::marker { content: "- " !important; }
+    }
+    &[data-list-marker="+"] {
+      list-style-type: none !important;
+      > li::marker { content: "+ " !important; }
+    }
+
+    &[data-list-color] {
+      li::marker { color: var(--list-marker-color, currentColor) !important; }
+    }
+  }
+
+  .editor-listitem {
+    margin-bottom: 4px !important;
+    line-height: 1.6 !important;
+  }
+
+  .editor-checklist {
+    list-style: none !important;
+    padding: 0 !important;
+    margin-top: 8px !important;
+    margin-bottom: 8px !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    outline: none !important; // Prevent focus outline
+    box-shadow: none !important; // Prevent focus ring
+
+    .editor-listitem-checked,
+    .editor-listitem-unchecked {
+      display: flex; // Use Flexbox for natural alignment
+      align-items: flex-start; // Align icon with the first line of text
+      margin-left: 0;
+      padding: 4px 0; // Vertical padding only
+      list-style: none;
+      outline: none;
+      gap: 12px; // Space between icon and text
+
+      // Checkbox Icon (using ::before as the visual container)
+      &::before {
+        content: "";
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0; // Prevent icon from shrinking
+        margin-top: 3px; // Optical alignment with text cap-height (approx)
+        cursor: pointer;
+        display: block;
+        border: 2px solid var(--list-marker-color, #{$editor-link-color}) !important;
+        border-radius: 4px;
+        box-sizing: border-box;
+        transition: all 0.1s ease-in-out;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 12px; // Size of the checkmark
+      }
+    }
+
+    .editor-listitem-checked {
+      text-decoration: line-through;
+      color: #64748b;
+      
+      &::before {
+        background-color: var(--list-marker-color, #{$editor-link-color}) !important;
+        border-color: var(--list-marker-color, #{$editor-link-color}) !important;
+        // SVG Checkmark
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7.5L5.5 10L11 4.5'/%3E%3C/svg%3E");
+      }
+
+      // Remove old ::after tick mark
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  // Remove the standalone .editor-listitem-checked/unchecked blocks if they exist elsewhere
+  // But wait, are they used outside .editor-checklist?
+  // Checklist items are only in checklists.
+
+
+  .editor-nested-listitem {
+    list-style: none;
+    
+    &::before, &::after { display: none; }
+  }
+
+  // List Depths
+  $list-styles: (
+    1: decimal,
+    2: upper-roman,
+    3: lower-roman,
+    4: upper-alpha,
+    5: lower-alpha
+  );
+
+  @each $depth, $style in $list-styles {
+    .editor-ol-depth-#{$depth} {
+      list-style-type: $style !important;
+    }
+    .editor-ul-depth-#{$depth}:not(.editor-checklist) {
+      &[data-list-marker="-"] {
+        list-style-type: none !important;
+        li::marker { content: "- " !important; }
+      }
+      &[data-list-marker="+"] {
+        list-style-type: none !important;
+        li::marker { content: "+ " !important; }
+      }
+      &:not([data-list-marker]) {
+        list-style-type: disc !important;
+      }
+    }
+  }
+
+  // Code Block
+  .editor-code {
+    background-color: #fcfcfc;
+    color: #1a1a1a;
+    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    display: block;
+    padding: 16px 16px 16px 64px;
+    line-height: 1.6;
+    font-size: 14px;
+    margin: 24px 0 !important;
+    overflow-x: auto;
+    border: 1px solid #e2e8f0;
+    position: relative;
+    border-radius: 8px;
+    tab-size: 2;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+
+    &:before {
+      content: attr(data-gutter);
+      position: absolute;
+      background-color: #f8fafc;
+      border-right: 1px solid #e2e8f0;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      padding: 16px 12px;
+      color: #94a3b8;
+      white-space: pre-wrap;
+      text-align: right;
+      min-width: 56px;
+      font-variant-numeric: tabular-nums;
+      user-select: none;
+      font-size: 12px;
+    }
+  }
+
+  // Hashtag
+  .editor-hashtag {
+    background-color: rgba($editor-primary-color, 0.1);
+    color: $editor-primary-color;
+    border-bottom: 1px solid $editor-primary-color;
+    padding: 0 2px;
+  }
+
+  // Table Styles - Clean borders
+  .editor-table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%; // Fit to parent container
+    // min-width: 100%;    // Ensure it fills at least the container (redundant with width: 100%)
+    table-layout: fixed; // Ensure accurate column resizing
+    margin: 16px 0;
+    // overflow-x: auto; // Removed: overflow should be handled by the container
+    border-radius: $editor-border-radius;
+    border: 1px solid $editor-border-color;
+    
+    .editor-table-cell,
+    .editor-table-cell-header {
+      min-width: 0 !important;
+      border: 1px solid $editor-table-border-color;
+      padding: 8px 6px; // Further reduced padding for better data density
+      position: relative;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    .editor-table-cell-header {
+      background-color: $editor-table-header-bg;
+      font-weight: 600;
+      color: $editor-text-color;
+    }
+
+    .editor-table-cell-selected {
+      background-color: rgba($editor-primary-color, 0.05);
+    }
+    
+    .editor-table-cell-resizer {
+      position: absolute;
+      right: -4px;
+      height: 100%;
+      width: 8px;
+      cursor: ew-resize;
+      z-index: 10;
+      top: 0;
+    }
+    
+    .editor-table-cell-resize-ruler {
+      display: block;
+      position: absolute;
+      width: 1px;
+      height: 100%;
+      background-color: $editor-primary-color;
+      top: 0;
+    }
+
+    .editor-table-cell-action-button-container {
+      display: block;
+      right: 4px;
+      top: 6px;
+      position: absolute;
+      z-index: 10;
+      width: 20px;
+      height: 20px;
+    }
+
+    .editor-table-cell-action-button {
+      background-color: #eee;
+      display: block;
+      border: 0;
+      border-radius: 20px;
+      width: 20px;
+      height: 20px;
+      color: #222;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #ddd;
+      }
+    }
+    
+    .editor-table-cell-editing {
+      box-shadow: 0 0 5px rgba(0,0,0,0.1);
+      border-radius: 2px;
+    }
+    
+    .editor-table-cell-primary-selected {
+      border: 2px solid $editor-primary-color;
+      display: block;
+      height: calc(100% - 2px);
+      width: calc(100% - 2px);
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      z-index: 10;
+    }
+    
+    .editor-table-cell-sorted-indicator {
+      display: block;
+      opacity: 0.5;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background-color: $editor-muted-color;
+    }
+    
+    .editor-table-row-striping {
+      margin: 0;
+      border-top: 1px solid $editor-border-color;
+      padding: 0;
+      
+      &:nth-child(even) {
+        background-color: $editor-muted-color;
+      }
+    }
+    
+    .editor-table-selected {
+      outline: 2px solid $editor-primary-color;
+    }
+    
+    .editor-table-selection {
+      background-color: transparent;
+    }
+  }
+
+  // Text Formatting
+  .editor-link { color: $editor-link-color; text-decoration: none; &:hover { text-decoration: underline; cursor: pointer; } }
+  .editor-text-bold { font-weight: 700 !important; }
+  .editor-text-italic { font-style: italic !important; }
+  .editor-text-underline { text-decoration: underline !important; }
+  .editor-text-strikethrough { text-decoration: line-through !important; }
+  .editor-text-underline-strikethrough { text-decoration: underline line-through !important; }
+  .editor-text-subscript { vertical-align: sub !important; font-size: 0.8em !important; }
+  .editor-text-superscript { vertical-align: super !important; font-size: 0.8em !important; }
+  .editor-text-code { 
+    background-color: #f1f5f9; 
+    color: #0f172a;
+    padding: 2px 6px; 
+    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 14px; 
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+    font-weight: 500;
+  }
+
+  // Text Alignment
+  .editor-text-align-left {
+    text-align: left !important;
+  }
+  
+  .editor-text-align-center {
+    text-align: center !important;
+  }
+  
+  .editor-text-align-right {
+    text-align: right !important;
+  }
+  
+  .editor-text-align-justify {
+    text-align: justify !important;
+  }
+
+  // Images
+  .editor-image {
+    display: inline-block;
+    position: relative;
+    cursor: default;
+    user-select: none;
+    
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+  
+  .editor-inline-image {
+    display: inline-block;
+    position: relative;
+    z-index: 1;
+    
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  .editor-image-focused {
+    outline: 2px solid $editor-primary-color;
+    outline-offset: 2px;
+  }
+  
+  .editor-image-draggable {
+    cursor: grab;
+    
+    &:active {
+      cursor: grabbing;
+    }
+  }
+  
+  .editor-image-caption {
+    display: block;
+    min-width: 100px;
+    overflow: hidden;
+    padding: 0;
+    margin-top: 8px;
+    
+    &.editable {
+      border: 1px solid $editor-border-color;
+      border-radius: $editor-border-radius;
+      background-color: rgba(255, 255, 255, 0.9);
+    }
+    
+    &.readonly {
+      border: 0;
+      background-color: transparent;
+    }
+  }
+  
+  .editor-lazy-image-wrapper {
+    display: inline-block;
+    
+    &.full-width {
+      width: 100%;
+    }
+  }
+
+  // Broken Image
+  .editor-broken-image-container {
+    display: inline-block;
+    width: 200px;
+    height: 200px;
+    
+    img {
+      opacity: 0.2;
+      object-fit: contain;
+    }
+  }
+
+  // Tweet
+  .editor-tweet-container {
+    display: block;
+    width: 100%;
+    max-width: 550px;
+  }
+
+  // Horizontal Rule
+  .editor-hr {
+    padding: 2px;
+    border: none;
+    margin: 1em 0;
+    cursor: pointer;
+    
+    &:after {
+      content: "";
+      display: block;
+      height: 2px;
+      background-color: $editor-border-color;
+      line-height: 2px;
+    }
+    
+    &.selected {
+      outline: 2px solid $editor-primary-color;
+      user-select: none;
+    }
+  }
+
+  // Embed Block
+  .editor-embed-block {
+    user-select: none;
+  }
+  
+  .editor-embed-block-focused {
+    outline: 2px solid $editor-primary-color;
+  }
+  
+  // Autocomplete
+  .editor-autocomplete {
+    color: #9ca3af; // text-muted-foreground
+  }
+
+
+}
+
+.editor-content-editable {
+  position: relative !important;
+  display: block !important;
+  min-height: 288px !important; // min-h-72
+  padding: 16px 32px !important; // py-4 px-8
+  outline: none !important;
+  
+  &:focus {
+    outline: none !important;
+  }
+  
+  &--readonly {
+    cursor: default !important;
+    user-select: text !important;
+  }
+}
+
+.editor-placeholder {
+  color: var(--muted-foreground) !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  overflow: hidden !important;
+  padding: 18px 32px !important; // py-[18px] px-8
+  text-overflow: ellipsis !important;
+  user-select: none !important;
+}