@thangph2146/lexical-editor 0.0.4 → 0.0.6

package/src/themes/core/_images.scss

@@ -0,0 +1,80 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.lexical-editor-root {
+  // 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;
+    }
+  }
+}

package/src/themes/core/_lists.scss

@@ -0,0 +1,214 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.lexical-editor-root {
+  // Ordered 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;
+    }
+
+    &[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; }
+    }
+  }
+
+  // Unordered Lists
+  .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; }
+    }
+
+    &[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;
+  }
+
+  // Checklists
+  .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;
+    box-shadow: none !important;
+
+    .editor-listitem-checked,
+    .editor-listitem-unchecked {
+      @include flex-center;
+      align-items: flex-start;
+      margin-left: 0;
+      padding: $editor-checklist-item-padding-vertical 0;
+      list-style: none;
+      outline: none;
+      gap: $editor-checklist-gap;
+
+      &::before {
+        content: "";
+        @include control-size($editor-checklist-icon-size);
+        flex-shrink: 0;
+        margin-top: $editor-checklist-icon-margin-top;
+        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;
+      }
+    }
+
+    .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;
+        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");
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .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;
+
+      &[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; }
+      }
+      &[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;
+      }
+    }
+  }
+}

package/src/themes/core/_misc.scss

@@ -0,0 +1,46 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.lexical-editor-root {
+  // 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;
+  }
+}

package/src/themes/core/_reset.scss

@@ -0,0 +1,119 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+// Editor Root Container
+.editor-root-container {
+  border-radius: $editor-border-radius;
+  transition: all $editor-transition-normal;
+
+  &.editor-root-container--shadow:focus-within {
+    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
+.lexical-editor-root {
+  font-family: $editor-font-family !important;
+  font-size: $editor-font-size-base;
+  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;
+  box-sizing: border-box !important;
+
+  // Reset common elements
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  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%;
+    vertical-align: baseline !important;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-osx-osx-font-smoothing: grayscale !important;
+    letter-spacing: normal !important;
+    word-spacing: normal !important;
+    text-indent: 0 !important;
+    text-transform: none !important;
+    text-decoration: none !important;
+    line-height: inherit;
+    text-align: inherit;
+    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;
+  }
+
+  ul, ol {
+    list-style-position: outside !important;
+    list-style-type: none !important;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  span[data-lexical-text="true"] {
+    display: inline !important;
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+}
+
+// Content Editable
+.editor-content-editable {
+  position: relative !important;
+  display: block !important;
+  outline: none !important;
+  
+  &:not(&--readonly):not(&--review) {
+    min-height: $editor-content-min-height !important;
+    padding: $editor-content-padding-y $editor-content-padding-x !important;
+  }
+  
+  &:focus {
+    outline: none !important;
+  }
+  
+  &--readonly,
+  &--review {
+    cursor: default !important;
+    user-select: text !important;
+    min-height: unset !important;
+    padding: 0 !important;
+  }
+}
+
+// Placeholder
+.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;
+  text-overflow: ellipsis !important;
+  user-select: none !important;
+
+  .editor-content-editable--readonly + &,
+  .editor-content-editable--review + & {
+    display: none !important;
+  }
+}

package/src/themes/core/_tables.scss

@@ -0,0 +1,145 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.lexical-editor-root {
+  // Table Styles
+  .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;
+      }
+    }
+    
+    .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;
+    }
+  }
+}
+
+// Table Cell Resizer
+.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;
+}

package/src/themes/core/_text.scss

@@ -0,0 +1,35 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.lexical-editor-root {
+  // 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; }
+
+  // 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;
+  }
+}

package/src/themes/core/_typography.scss

@@ -0,0 +1,73 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.lexical-editor-root {
+  // Paragraphs
+  .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
+  .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;
+  }
+
+  // Quotes
+  .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;
+  }
+}