@thangph2146/lexical-editor 0.0.5 → 0.0.7

package/src/themes/editor-theme copy.scss

@@ -1,763 +0,0 @@
-/**
- * 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 $editor-transition-normal;
-
-  &.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 $editor-border-width $editor-border-color, 0 0 0 $editor-border-width + $editor-outline-width 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;
-  
-
-  // 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;
-    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;
-    padding-inline-end: 0;
-    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: $editor-paragraph-margin-vertical !important;
-    margin-bottom: $editor-paragraph-margin-vertical !important;
-    
-    &:first-child { margin-top: 0 !important; }
-  }
-
-  // Headings - Improved sizes and spacing
-  .editor-h1 {
-    font-size: $editor-h1-size;
-    line-height: $editor-heading-line-height !important;
-    font-weight: $editor-font-weight-bold !important;
-    letter-spacing: $editor-heading-letter-spacing-tight;
-    margin-top: $editor-heading-margin-top * 1.5 !important;
-    margin-bottom: $editor-heading-margin-bottom * 1.5 !important;
-  }
-  .editor-h2 {
-    font-size: $editor-h2-size;
-    line-height: $editor-heading-line-height !important;
-    font-weight: $editor-font-weight-semibold !important;
-    margin-top: $editor-heading-margin-top * 1.25 !important;
-    margin-bottom: $editor-heading-margin-bottom * 1.25 !important;
-    border-bottom: $editor-border-width solid var(--border);
-    padding-bottom: $editor-gap-1;
-  }
-  .editor-h3 {
-    font-size: $editor-h3-size;
-    line-height: $editor-heading-line-height !important;
-    font-weight: $editor-font-weight-semibold !important;
-    margin-top: $editor-heading-margin-top !important;
-    margin-bottom: $editor-heading-margin-bottom !important;
-  }
-  .editor-h4 {
-    font-size: $editor-h4-size;
-    line-height: $editor-heading-line-height !important;
-    font-weight: $editor-font-weight-semibold !important;
-    margin-top: $editor-heading-margin-top * 0.75 !important;
-    margin-bottom: $editor-heading-margin-bottom * 0.75 !important;
-  }
-  .editor-h5 {
-    font-size: $editor-h5-size;
-    line-height: $editor-heading-line-height !important;
-    font-weight: $editor-font-weight-semibold !important;
-    margin-top: $editor-heading-margin-top * 0.5 !important;
-    margin-bottom: $editor-heading-margin-bottom * 0.5 !important;
-  }
-  .editor-h6 {
-    font-size: $editor-h6-size;
-    line-height: $editor-heading-line-height !important;
-    font-weight: $editor-font-weight-semibold !important;
-    margin-top: $editor-heading-margin-top * 0.5 !important;
-    margin-bottom: $editor-heading-margin-bottom * 0.5 !important;
-  }
-
-  .editor-quote {
-    margin: $editor-code-margin 0 !important;
-    padding: $editor-quote-padding $editor-quote-padding $editor-quote-padding ($editor-quote-padding + $editor-gap-2);
-    border-left: $editor-quote-border-width solid var(--border);
-    font-size: $editor-quote-font-size;
-    color: var(--muted-foreground);
-    font-style: italic;
-    background-color: var(--muted);
-    @include rounded-r-md;
-  }
-
-  // Lists
-  .editor-ol {
-    list-style-type: decimal !important;
-    padding-left: $editor-list-padding-left !important;
-    margin-top: $editor-list-margin-vertical !important;
-    margin-bottom: $editor-list-margin-vertical !important;
-
-    &[data-list-marker="alpha"] {
-      list-style-type: lower-alpha !important;
-    }
-
-    // Handle custom marker string (e.g., "4.1.", "a)", etc.)
-    &[data-list-marker]:not([data-list-marker="alpha"]):not([data-list-marker="multi-level"]) {
-      list-style-type: none !important;
-      > li:not(.editor-nested-listitem)::marker {
-        content: attr(data-list-marker) !important;
-      }
-    }
-
-    &[data-list-marker="multi-level"] {
-      list-style-type: none !important;
-      counter-reset: item;
-    }
-
-    &[data-list-marker="multi-level"] > li {
-      counter-increment: item;
-    }
-
-    &[data-list-marker="multi-level"] > li.editor-nested-listitem {
-      counter-increment: none !important;
-    }
-
-    &[data-list-marker="multi-level"] > li:not(.editor-nested-listitem)::marker {
-      content: counters(item, ".") ". " !important;
-    }
-
-    &[data-list-marker="multi-level"] .editor-ol {
-      list-style-type: none !important;
-      counter-reset: item;
-    }
-
-    &[data-list-marker="multi-level"] .editor-ol > li {
-      counter-increment: item;
-    }
-
-    &[data-list-marker="multi-level"] .editor-ol > li.editor-nested-listitem {
-      counter-increment: none !important;
-    }
-
-    &[data-list-marker="multi-level"] .editor-ol > li:not(.editor-nested-listitem)::marker {
-      content: counters(item, ".") ". " !important;
-    }
-
-    &[data-list-color] {
-      li::marker { color: var(--list-marker-color, currentColor) !important; }
-    }
-  }
-
-  .editor-ul:not(.editor-checklist) {
-    padding-left: $editor-list-padding-left !important;
-    margin-top: $editor-list-margin-vertical !important;
-    margin-bottom: $editor-list-margin-vertical !important;
-
-    &:not([data-list-marker]) {
-      list-style-type: disc !important;
-    }
-
-    &[data-list-marker="-"] {
-      list-style-type: none !important;
-      > li:not(.editor-nested-listitem)::marker { content: "- " !important; }
-    }
-    &[data-list-marker="+"] {
-      list-style-type: none !important;
-      > li:not(.editor-nested-listitem)::marker { content: "+ " !important; }
-    }
-
-    // Handle custom marker string (e.g., "•", "—", etc.)
-    &[data-list-marker]:not([data-list-marker="-"]):not([data-list-marker="+"]) {
-      list-style-type: none !important;
-      > li:not(.editor-nested-listitem)::marker {
-        content: attr(data-list-marker) !important;
-      }
-    }
-
-    &[data-list-color] {
-      li::marker { color: var(--list-marker-color, currentColor) !important; }
-    }
-  }
-
-  .editor-listitem {
-    margin-bottom: $editor-list-item-margin-bottom !important;
-    line-height: $editor-line-height-relaxed !important;
-  }
-
-  .editor-checklist {
-    list-style: none !important;
-    padding: 0 !important;
-    margin-top: $editor-list-margin-vertical !important;
-    margin-bottom: $editor-list-margin-vertical !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 {
-      @include flex-center;
-      align-items: flex-start; // Align icon with the first line of text
-      margin-left: 0;
-      padding: $editor-checklist-item-padding-vertical 0; // Vertical padding only
-      list-style: none;
-      outline: none;
-      gap: $editor-checklist-gap; // Space between icon and text
-
-      // Checkbox Icon (using ::before as the visual container)
-      &::before {
-        content: "";
-        @include control-size($editor-checklist-icon-size);
-        flex-shrink: 0; // Prevent icon from shrinking
-        margin-top: $editor-checklist-icon-margin-top; // Optical alignment with text cap-height (approx)
-        cursor: pointer;
-        display: block;
-        border: $editor-border-width-thick solid var(--list-marker-color, #{$editor-link-color}) !important;
-        border-radius: $editor-checklist-icon-border-radius;
-        box-sizing: border-box;
-        transition: all $editor-transition-fast;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: $editor-checklist-icon-checkmark-size; // Size of the checkmark
-      }
-    }
-
-    .editor-listitem-checked {
-      text-decoration: line-through;
-      color: $editor-muted-foreground-color;
-      
-      &::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;
-
-      // Handle custom marker string (e.g., "4.1.", "a)", etc.)
-      &[data-list-marker]:not([data-list-marker="alpha"]):not([data-list-marker="multi-level"]) {
-        list-style-type: none !important;
-        > li:not(.editor-nested-listitem)::marker {
-          content: attr(data-list-marker) !important;
-        }
-      }
-      
-      &[data-list-marker="multi-level"] {
-        list-style-type: none !important;
-        counter-reset: item;
-      }
-      
-      &[data-list-marker="multi-level"] > li {
-        counter-increment: item;
-      }
-      
-      &[data-list-marker="multi-level"] > li.editor-nested-listitem {
-        counter-increment: none !important;
-      }
-      
-      &[data-list-marker="multi-level"] > li:not(.editor-nested-listitem)::marker {
-        content: counters(item, ".") ". " !important;
-      }
-    }
-    .editor-ul-depth-#{$depth}:not(.editor-checklist) {
-      &[data-list-marker="-"] {
-        list-style-type: none !important;
-        > li:not(.editor-nested-listitem)::marker { content: "- " !important; }
-      }
-      &[data-list-marker="+"] {
-        list-style-type: none !important;
-        > li:not(.editor-nested-listitem)::marker { content: "+ " !important; }
-      }
-      // Handle custom marker string (e.g., "•", "—", etc.)
-      &[data-list-marker]:not([data-list-marker="-"]):not([data-list-marker="+"]) {
-        list-style-type: none !important;
-        > li:not(.editor-nested-listitem)::marker {
-          content: attr(data-list-marker) !important;
-        }
-      }
-      &:not([data-list-marker]) {
-        list-style-type: disc !important;
-      }
-    }
-  }
-
-  // Code
-  .editor-code {
-    background-color: $editor-code-bg;
-    color: $editor-code-color;
-    font-family: $editor-font-family-mono;
-    display: block;
-    padding: $editor-code-padding $editor-code-padding $editor-code-padding ($editor-code-padding * 4);
-    line-height: $editor-line-height-base;
-    font-size: $editor-code-font-size;
-    margin: $editor-code-margin 0 !important;
-    overflow-x: auto;
-    border: $editor-border-width solid var(--border);
-    position: relative;
-    @include rounded-md;
-    tab-size: 2;
-    @include shadow-sm;
-
-    &::before {
-      content: attr(data-gutter);
-      position: absolute;
-      background-color: var(--muted);
-      left: 0;
-      top: 0;
-      bottom: 0;
-      padding: $editor-code-padding;
-      border-right: $editor-border-width solid var(--border);
-      color: var(--muted-foreground);
-      white-space: pre-wrap;
-      text-align: right;
-      min-width: ($editor-code-padding * 3);
-      font-size: calc($editor-code-font-size - $editor-outline-width);
-      user-select: none;
-    }
-  }
-
-  // Hashtag
-  .editor-hashtag {
-    background-color: rgba($editor-primary-color, $editor-hashtag-opacity);
-    color: $editor-primary-color;
-    border-bottom: $editor-border-width solid $editor-primary-color;
-    padding: 0 calc($editor-gap-1 / 2);
-  }
-
-  // Table Styles - Clean borders
-  .editor-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%; 
-    table-layout: fixed; 
-    margin: $editor-table-margin-vertical 0;
-    border-radius: $editor-border-radius;
-    border: $editor-border-width solid $editor-border-color;
-    
-    .editor-table-cell {
-      min-width: 0 !important;
-      border: $editor-border-width solid $editor-table-border-color;
-      padding: $editor-table-cell-padding-y $editor-table-cell-padding-x;
-      position: relative;
-      text-align: left;
-      vertical-align: top;
-    }
-
-    .editor-table-cell-header {
-      @extend .editor-table-cell;
-      background-color: $editor-table-header-bg;
-      font-weight: $editor-font-weight-semibold;
-      color: $editor-text-color;
-    }
-
-    .editor-table-cell-selected {
-      background-color: rgba($editor-primary-color, $editor-table-cell-selection-opacity) !important;
-      outline: 2px solid $editor-primary-color !important;
-      outline-offset: -2px;
-      
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba($editor-primary-color, $editor-table-cell-selection-opacity);
-        pointer-events: none;
-        z-index: 2; // Increased z-index
-      }
-    }
-    
-    .editor-table-cell-action-button-container {
-      display: block;
-      right: $editor-table-action-button-right;
-      top: $editor-table-action-button-top;
-      position: absolute;
-      z-index: $editor-z-index-layer-10;
-      width: $editor-table-action-button-size;
-      height: $editor-table-action-button-size;
-    }
-
-    .editor-table-cell-action-button {
-      background-color: $editor-muted-color;
-      display: block;
-      border: 0;
-      @include rounded-full;
-      @include control-size($editor-table-action-button-size);
-      color: $editor-text-color;
-      cursor: pointer;
-      transition: all $editor-transition-fast;
-
-      @include editor-button-interactive;
-    }
-    
-    .editor-table-cell-editing {
-      box-shadow: 0 0 $editor-shadow-blur-sm $editor-table-cell-editing-shadow;
-      border-radius: calc($editor-gap-1 / 2);
-    }
-    
-    .editor-table-cell-primary-selected {
-      border: $editor-outline-width solid $editor-primary-color;
-      display: block;
-      height: calc(100% - #{$editor-outline-width});
-      width: calc(100% - #{$editor-outline-width});
-      position: absolute;
-      left: -#{$editor-border-width};
-      top: -#{$editor-border-width};
-      z-index: $editor-z-index-layer-10;
-    }
-    
-    .editor-table-cell-sorted-indicator {
-      display: block;
-      opacity: 0.5;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: $editor-table-sorted-indicator-height;
-      background-color: $editor-muted-color;
-    }
-    
-    .editor-table-row-striping {
-      margin: 0;
-      border-top: $editor-border-width solid $editor-border-color;
-      padding: 0;
-      
-      &:nth-child(even) {
-        background-color: $editor-muted-color;
-      }
-    }
-    
-    .editor-table-selected {
-      outline: $editor-outline-width solid $editor-primary-color;
-    }
-    
-    .editor-table-selection {
-    background-color: rgba($editor-primary-color, $editor-table-cell-selection-opacity * 0.5) !important;
-  }
-}
-
-// Text Formatting
-  .editor-link { color: $editor-link-color; text-decoration: none; &:hover { text-decoration: underline; cursor: pointer; } }
-  .editor-text-bold { font-weight: $editor-font-weight-bold !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: $editor-script-font-size !important; }
-  .editor-text-superscript { vertical-align: super !important; font-size: $editor-script-font-size !important; }
-  .editor-text-code { 
-    background-color: $editor-muted-color; 
-    color: $editor-text-color;
-    padding: $editor-inline-code-padding-y $editor-inline-code-padding-x; 
-    font-family: $editor-font-family-mono;
-    font-size: $editor-code-font-size; 
-    @include rounded-md;
-    border: $editor-border-width solid $editor-border-color;
-    font-weight: $editor-font-weight-medium;
-  }
-
-  // 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: $editor-z-index-layer-1;
-    
-    img {
-      max-width: 100%;
-      height: auto;
-    }
-  }
-
-  .editor-image-focused {
-    outline: $editor-outline-width solid $editor-primary-color;
-    outline-offset: calc($editor-gap-1 / 2);
-  }
-  
-  .editor-image-draggable {
-    cursor: grab;
-    
-    &:active {
-      cursor: grabbing;
-    }
-  }
-  
-  .editor-image-caption {
-    display: block;
-    min-width: $editor-image-caption-min-width;
-    overflow: hidden;
-    padding: 0;
-    margin-top: $editor-gap-2;
-    
-    &.editable {
-      border: $editor-border-width solid $editor-border-color;
-      border-radius: $editor-border-radius;
-      background-color: $editor-image-caption-bg;
-    }
-    
-    &.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: $editor-image-broken-size;
-    height: $editor-image-broken-size;
-    
-    img {
-      opacity: 0.2;
-      object-fit: contain;
-    }
-  }
-
-  // Tweet
-  .editor-tweet-container {
-    display: block;
-    width: 100%;
-    max-width: $editor-tweet-max-width;
-  }
-
-  // Horizontal Rule
-  .editor-hr {
-    padding: calc($editor-gap-1 / 2);
-    border: none;
-    margin: $editor-hr-margin-vertical 0;
-    cursor: pointer;
-    
-    &:after {
-      content: "";
-      display: block;
-      height: $editor-hr-height;
-      background-color: $editor-border-color;
-      line-height: $editor-hr-height;
-    }
-    
-    &.selected {
-      outline: $editor-outline-width solid $editor-primary-color;
-      user-select: none;
-    }
-  }
-
-  // Embed Block
-  .editor-embed-block {
-    user-select: none;
-  }
-  
-  .editor-embed-block-focused {
-    outline: $editor-outline-width solid $editor-primary-color;
-  }
-  
-  // Autocomplete
-  .editor-autocomplete {
-    color: $editor-muted-foreground-color;
-  }
-
-
-}
-
-.editor-content-editable {
-  position: relative !important;
-  display: block !important;
-  outline: none !important;
-  
-  &:not(&--readonly):not(&--review) {
-    min-height: $editor-content-min-height !important; // min-h-72
-    padding: $editor-content-padding-y $editor-content-padding-x !important; // py-4 px-8
-  }
-  
-  &:focus {
-    outline: none !important;
-  }
-  
-  &--readonly,
-  &--review {
-    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: $editor-placeholder-padding-y $editor-content-padding-x !important; // py-[18px] px-8
-  text-overflow: ellipsis !important;
-  user-select: none !important;
-
-  .editor-content-editable--readonly + &,
-  .editor-content-editable--review + & {
-    display: none !important;
-  }
-}
-
-.editor-table-cell-resizer {
-  position: absolute;
-  height: 100%;
-  width: 16px;
-  cursor: col-resize;
-  z-index: $editor-z-index-floating;
-  top: 0;
-  pointer-events: auto !important;
-  user-select: none;
-  background-color: transparent;
-
-  &:hover {
-    background-color: rgba($editor-primary-color, 0.1);
-  }
-}
-
-.editor-table-cell-resize-ruler {
-  display: block;
-  position: absolute;
-  width: 1px;
-  height: 100%;
-  background-color: $editor-primary-color;
-  top: 0;
-  left: 8px;
-  pointer-events: none;
-}