@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/src/themes/editor-theme.scss

@@ -8,624 +8,12 @@
 @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;
-  outline: none !important;
-  
-  &:not(&--readonly) {
-    min-height: 288px !important; // min-h-72
-    padding: 16px 32px !important; // py-4 px-8
-  }
-  
-  &:focus {
-    outline: none !important;
-  }
-  
-  &--readonly {
-    cursor: default !important;
-    user-select: text !important;
-    min-height: unset !important;
-    padding: 0 !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;
-
-  .editor-content-editable--readonly + & {
-    display: none !important;
-  }
-}
+// Core Editor Styles
+@use "core/reset";
+@use "core/typography";
+@use "core/lists";
+@use "core/code";
+@use "core/tables";
+@use "core/text";
+@use "core/images";
+@use "core/misc";