@thangph2146/lexical-editor 0.0.4 → 0.0.5

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

@@ -0,0 +1,763 @@
+/**
+ * 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;
+}