@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/src/themes/editor-theme.ts

@@ -1,118 +1,118 @@
-import { EditorThemeClasses } from "lexical"
-
-import "./editor-theme.scss"
-
-export const editorTheme: EditorThemeClasses = {
-  ltr: "editor-ltr",
-  rtl: "editor-rtl",
-  heading: {
-    h1: "editor-h1",
-    h2: "editor-h2",
-    h3: "editor-h3",
-    h4: "editor-h4",
-    h5: "editor-h5",
-    h6: "editor-h6",
-  },
-  paragraph: "editor-paragraph",
-  quote: "editor-quote",
-  link: "editor-link",
-  list: {
-    checklist: "editor-checklist",
-    listitem: "editor-listitem",
-    listitemChecked: "editor-listitem-checked",
-    listitemUnchecked: "editor-listitem-unchecked",
-    nested: {
-      listitem: "editor-nested-listitem",
-    },
-    ol: "editor-ol",
-    olDepth: [
-      "editor-ol-depth-1",
-      "editor-ol-depth-2",
-      "editor-ol-depth-3",
-      "editor-ol-depth-4",
-      "editor-ol-depth-5",
-    ],
-    ul: "editor-ul",
-    ulDepth: [
-      "editor-ul-depth-1",
-      "editor-ul-depth-2",
-      "editor-ul-depth-3",
-      "editor-ul-depth-4",
-      "editor-ul-depth-5",
-    ],
-  },
-  hashtag: "editor-hashtag",
-  text: {
-    bold: "editor-text-bold",
-    code: "editor-text-code",
-    italic: "editor-text-italic",
-    strikethrough: "editor-text-strikethrough",
-    subscript: "editor-text-subscript",
-    superscript: "editor-text-superscript",
-    underline: "editor-text-underline",
-    underlineStrikethrough: "editor-text-underline-strikethrough",
-  },
-  textAlign: {
-    left: "editor-text-align-left",
-    center: "editor-text-align-center",
-    right: "editor-text-align-right",
-    justify: "editor-text-align-justify",
-  },
-  image: "editor-image",
-  inlineImage: "editor-inline-image",
-  code: "editor-code",
-  codeHighlight: {
-    atrule: "editor-token--keyword",
-    attr: "editor-token--attr-name",
-    boolean: "editor-token--property",
-    builtin: "editor-token--selector",
-    cdata: "editor-token--comment",
-    char: "editor-token--selector",
-    class: "editor-token--function",
-    "class-name": "editor-token--function",
-    comment: "editor-token--comment",
-    constant: "editor-token--property",
-    deleted: "editor-token--property",
-    doctype: "editor-token--comment",
-    entity: "editor-token--operator",
-    function: "editor-token--function",
-    important: "editor-token--variable",
-    inserted: "editor-token--selector",
-    keyword: "editor-token--keyword",
-    namespace: "editor-token--variable",
-    number: "editor-token--property",
-    operator: "editor-token--operator",
-    prolog: "editor-token--comment",
-    property: "editor-token--property",
-    punctuation: "editor-token--punctuation",
-    regex: "editor-token--variable",
-    selector: "editor-token--selector",
-    string: "editor-token--string",
-    symbol: "editor-token--property",
-    tag: "editor-token--property",
-    url: "editor-token--operator",
-    variable: "editor-token--variable",
-  },
-  table: "editor-table",
-  tableCell: "editor-table-cell",
-  tableCellActionButton: "editor-table-cell-action-button",
-  tableCellActionButtonContainer: "editor-table-cell-action-button-container",
-  tableCellEditing: "editor-table-cell-editing",
-  tableCellHeader: "editor-table-cell-header",
-  tableCellPrimarySelected: "editor-table-cell-primary-selected",
-  tableCellResizer: "editor-table-cell-resizer",
-  tableCellSelected: "editor-table-cell-selected",
-  tableCellSortedIndicator: "editor-table-cell-sorted-indicator",
-  tableResizeRuler: "editor-table-cell-resize-ruler",
-  tableRowStriping: "editor-table-row-striping",
-  tableSelected: "editor-table-selected",
-  tableSelection: "editor-table-selection",
-  layoutItem: "editor-layout-item",
-  layoutContainer: "editor-layout-container",
-  autocomplete: "editor-autocomplete",
-  embedBlock: {
-    base: "editor-embed-block",
-    focus: "editor-embed-block-focused",
-  },
-  hr: "editor-hr",
-}
+import { EditorThemeClasses } from "lexical"
+
+import "./editor-theme.scss"
+
+export const editorTheme: EditorThemeClasses = {
+  ltr: "editor-ltr",
+  rtl: "editor-rtl",
+  heading: {
+    h1: "editor-h1",
+    h2: "editor-h2",
+    h3: "editor-h3",
+    h4: "editor-h4",
+    h5: "editor-h5",
+    h6: "editor-h6",
+  },
+  paragraph: "editor-paragraph",
+  quote: "editor-quote",
+  link: "editor-link",
+  list: {
+    checklist: "editor-checklist",
+    listitem: "editor-listitem",
+    listitemChecked: "editor-listitem-checked",
+    listitemUnchecked: "editor-listitem-unchecked",
+    nested: {
+      listitem: "editor-nested-listitem",
+    },
+    ol: "editor-ol",
+    olDepth: [
+      "editor-ol-depth-1",
+      "editor-ol-depth-2",
+      "editor-ol-depth-3",
+      "editor-ol-depth-4",
+      "editor-ol-depth-5",
+    ],
+    ul: "editor-ul",
+    ulDepth: [
+      "editor-ul-depth-1",
+      "editor-ul-depth-2",
+      "editor-ul-depth-3",
+      "editor-ul-depth-4",
+      "editor-ul-depth-5",
+    ],
+  },
+  hashtag: "editor-hashtag",
+  text: {
+    bold: "editor-text-bold",
+    code: "editor-text-code",
+    italic: "editor-text-italic",
+    strikethrough: "editor-text-strikethrough",
+    subscript: "editor-text-subscript",
+    superscript: "editor-text-superscript",
+    underline: "editor-text-underline",
+    underlineStrikethrough: "editor-text-underline-strikethrough",
+  },
+  textAlign: {
+    left: "editor-text-align-left",
+    center: "editor-text-align-center",
+    right: "editor-text-align-right",
+    justify: "editor-text-align-justify",
+  },
+  image: "editor-image",
+  inlineImage: "editor-inline-image",
+  code: "editor-code",
+  codeHighlight: {
+    atrule: "editor-token--keyword",
+    attr: "editor-token--attr-name",
+    boolean: "editor-token--property",
+    builtin: "editor-token--selector",
+    cdata: "editor-token--comment",
+    char: "editor-token--selector",
+    class: "editor-token--function",
+    "class-name": "editor-token--function",
+    comment: "editor-token--comment",
+    constant: "editor-token--property",
+    deleted: "editor-token--property",
+    doctype: "editor-token--comment",
+    entity: "editor-token--operator",
+    function: "editor-token--function",
+    important: "editor-token--variable",
+    inserted: "editor-token--selector",
+    keyword: "editor-token--keyword",
+    namespace: "editor-token--variable",
+    number: "editor-token--property",
+    operator: "editor-token--operator",
+    prolog: "editor-token--comment",
+    property: "editor-token--property",
+    punctuation: "editor-token--punctuation",
+    regex: "editor-token--variable",
+    selector: "editor-token--selector",
+    string: "editor-token--string",
+    symbol: "editor-token--property",
+    tag: "editor-token--property",
+    url: "editor-token--operator",
+    variable: "editor-token--variable",
+  },
+  table: "editor-table",
+  tableCell: "editor-table-cell",
+  tableCellActionButton: "editor-table-cell-action-button",
+  tableCellActionButtonContainer: "editor-table-cell-action-button-container",
+  tableCellEditing: "editor-table-cell-editing",
+  tableCellHeader: "editor-table-cell-header",
+  tableCellPrimarySelected: "editor-table-cell-primary-selected",
+  tableCellResizer: "editor-table-cell-resizer",
+  tableCellSelected: "editor-table-cell-selected",
+  tableCellSortedIndicator: "editor-table-cell-sorted-indicator",
+  tableResizeRuler: "editor-table-cell-resize-ruler",
+  tableRowStriping: "editor-table-row-striping",
+  tableSelected: "editor-table-selected",
+  tableSelection: "editor-table-selection",
+  layoutItem: "editor-layout-item",
+  layoutContainer: "editor-layout-container",
+  autocomplete: "editor-autocomplete",
+  embedBlock: {
+    base: "editor-embed-block",
+    focus: "editor-embed-block-focused",
+  },
+  hr: "editor-hr",
+}

package/src/themes/plugins/_auto-embed.scss

@@ -0,0 +1,11 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-auto-embed-menu {
+  width: $editor-mentions-width;
+  padding: 0;
+}
+
+.editor-auto-embed-wrapper {
+  transform: translateY(-100%);
+}

package/src/themes/plugins/_color-picker.scss

@@ -0,0 +1,103 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-color-picker-content {
+  @include flex-col;
+  gap: $editor-gap-4;
+  padding: $editor-gap-4;
+}
+
+.editor-color-picker-area {
+  position: relative;
+  height: $editor-color-picker-height; // h-40
+  width: 100%;
+  cursor: crosshair;
+  touch-action: none;
+  @include rounded-sm;
+  border: $editor-border-width solid var(--border);
+  overflow: hidden;
+
+  &[data-disabled="true"] {
+    pointer-events: none;
+    opacity: $editor-opacity-disabled;
+  }
+}
+
+.editor-slider-root {
+  position: relative;
+  @include flex-center;
+  width: 100%;
+  touch-action: none;
+  user-select: none;
+  
+  &[data-disabled] {
+    opacity: $editor-opacity-disabled;
+    pointer-events: none;
+  }
+}
+
+.editor-slider-track {
+  position: relative;
+  height: $editor-gap-3; // h-3
+  width: 100%;
+  flex-grow: 1;
+  overflow: hidden;
+  @include rounded-full;
+}
+
+.editor-slider-thumb {
+  display: block;
+  @include control-size($editor-icon-size-sm);
+  @include rounded-full;
+  border: $editor-border-width solid var(--border); // border-primary/50
+  background-color: var(--background);
+  @include shadow-sm;
+  transition: background-color $editor-transition-fast, border-color $editor-transition-fast;
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.editor-color-swatch {
+  box-sizing: border-box;
+  @include control-size($editor-control-size-sm);
+  @include rounded-sm;
+  border: $editor-border-width solid var(--border);
+  @include shadow-sm;
+
+  &--disabled {
+    opacity: $editor-opacity-disabled;
+  }
+}
+
+.editor-color-presets {
+  @include flex-center;
+  gap: $editor-gap-2;
+  width: 100%;
+}
+
+.editor-color-preset-item {
+  height: $editor-control-size-sm;
+  padding-left: $editor-gap-2;
+  padding-right: $editor-gap-2;
+  flex: 1;
+  
+  &__preview {
+    @include control-size($editor-gap-3);
+    @include rounded-full;
+    border: $editor-border-width solid var(--border);
+  }
+  
+  &__label {
+    font-family: $editor-font-family-mono;
+    @include text-sm;
+  }
+}
+
+.editor-color-value-text {
+  color: $editor-muted-foreground-color;
+  font-family: $editor-font-family-mono;
+  @include text-sm;
+  font-variant-numeric: tabular-nums;
+}

package/src/themes/plugins/_draggable-block.scss

@@ -0,0 +1,32 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-draggable-line {
+  background-color: var(--secondary-foreground);
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: $editor-gap-1;
+  opacity: 0;
+  will-change: transform;
+}
+
+.editor-draggable-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: grab;
+  @include rounded-sm;
+  padding: $editor-gap-0-5 $editor-gap-1;
+  opacity: 0;
+  will-change: transform;
+  
+  &:hover {
+    background-color: $editor-accent-color;
+  }
+  
+  &:active {
+    cursor: grabbing;
+  }
+}

package/src/themes/plugins/_floating-link-editor.scss

@@ -0,0 +1,47 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-floating-link-editor {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $editor-z-index-floating;
+  max-width: $editor-link-editor-max-width;
+  width: 100%;
+  opacity: 0;
+  background-color: var(--background);
+  @include rounded-md;
+  border: $editor-border-width solid var(--border);
+  @include shadow-lg;
+  transition: opacity $editor-transition-normal;
+  will-change: transform;
+
+  &__input-container {
+    @include flex-center;
+    gap: $editor-gap-1;
+    padding: $editor-gap-1;
+    width: 100%;
+  }
+
+  &__view-container {
+    @include flex-center;
+    justify-content: space-between;
+    gap: $editor-gap-2;
+    padding: $editor-gap-1 $editor-gap-1 $editor-gap-1 $editor-gap-3;
+    width: 100%;
+  }
+
+  &__link {
+    display: block;
+    flex-grow: 1;
+    @include truncate;
+    color: var(--primary);
+    @include text-sm;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

package/src/themes/plugins/_floating-toolbars.scss

@@ -0,0 +1,61 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-floating-toolbar {
+  @include floating-toolbar-base;
+  @include backdrop-blur(8px, rgba(var(--background-rgb, 255, 255, 255), 0.85));
+  max-width: $editor-floating-toolbar-max-width;
+  flex-wrap: wrap;
+}
+
+.editor-floating-text-format {
+  @include floating-toolbar-base;
+  @include backdrop-blur(8px, rgba(var(--background-rgb, 255, 255, 255), 0.8));
+  @include backdrop-blur-dark(8px, rgba(var(--background-rgb, 15, 15, 15), 0.8));
+  
+  // Hover effect for the whole bar
+  &:hover {
+    @include shadow-xl;
+  }
+
+  // Divider between groups
+  .editor-separator--vertical {
+    height: $editor-gap-5;
+    width: $editor-border-width;
+    margin: 0 $editor-gap-1;
+    background-color: var(--border);
+  }
+
+  // Custom styling for buttons in floating toolbar
+  .editor-toggle-group-item, .editor-btn, .editor-toolbar-item {
+    border: none;
+    border-radius: calc($editor-border-radius - 4px);
+    @include control-size(30px);
+    padding: 0;
+    background-color: transparent;
+    transition: all $editor-transition-normal;
+    @include flex-center-justify;
+
+    &:hover {
+      background-color: $editor-accent-color;
+      color: $editor-accent-foreground-color;
+    }
+
+    &[data-state="on"], &[data-state="active"], &--active {
+      background-color: $editor-accent-color;
+      color: $editor-accent-foreground-color !important;
+      font-weight: $editor-font-weight-bold;
+    }
+  }
+
+  // Group of buttons with border as requested
+  .editor-floating-group, .editor-floating-group--lg {
+    @include flex-center;
+    gap: $editor-gap-0-5;
+    padding: $editor-gap-0-5;
+    border-radius: calc($editor-border-radius - 2px);
+    // Remove border from inner groups to make it cleaner
+    border: none;
+    background-color: transparent;
+  }
+}

package/src/themes/plugins/_image-resizer.scss

@@ -0,0 +1,38 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-image-resizer {
+  &-handle {
+    position: absolute;
+    @include control-size(10px); // Slightly larger for better grab area
+    background-color: var(--primary); // Using primary color
+    border: $editor-border-width solid var(--background); // Background color for contrast
+    z-index: $editor-z-index-floating; // Ensure on top of image
+    transition: background-color $editor-transition-normal;
+
+    &:hover {
+      background-color: $editor-accent-color; // Highlight on hover
+    }
+
+    // Directions
+    &--n {
+      top: -5px;
+      left: 50%;
+      transform: translateX(-50%);
+      cursor: ns-resize;
+    }
+
+    &--ne {
+      top: -5px;
+      right: -5px;
+      cursor: nesw-resize;
+    }
+
+    &--e {
+      top: 50%;
+      right: -5px;
+      transform: translateY(-50%);
+      cursor: ew-resize;
+    }
+  }
+}

package/src/themes/plugins/_image.scss

@@ -0,0 +1,57 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-image-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $editor-gap-2;
+  margin-bottom: $editor-gap-3;
+}
+
+.editor-image-btn {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  @include rounded-sm;
+  overflow: hidden;
+  border: $editor-border-width-thick solid transparent;
+  transition: all $editor-transition-normal;
+  cursor: pointer;
+  padding: 0;
+  
+  &--selected {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 $editor-outline-width var(--primary), 0 0 0 calc($editor-outline-width * 2) var(--background);
+  }
+  
+  &:hover:not(&--selected) {
+    border-color: color-mix(in srgb, var(--primary), transparent 50%);
+  }
+}
+
+.editor-folder-tree-trigger {
+  @include flex-center;
+  gap: $editor-gap-2;
+  width: 100%;
+  padding: calc($editor-gap-1 + 2px) $editor-gap-2;
+  @include rounded-sm;
+  transition: background-color $editor-transition-normal;
+  text-align: left;
+  border: none;
+  background: transparent;
+  
+  &:hover {
+    background-color: $editor-accent-color;
+    color: $editor-accent-foreground-color;
+  }
+}
+
+.editor-tree-content {
+  margin-left: $editor-gap-4;
+  margin-top: $editor-gap-1;
+}
+
+.editor-empty-state {
+  text-align: center;
+  padding-top: $editor-control-size-sm;
+  padding-bottom: $editor-control-size-sm;
+}

package/src/themes/plugins/_layout.scss

@@ -0,0 +1,39 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-layout-dialog-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: $editor-gap-3;
+  
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.editor-layout-dialog-group {
+  @include flex-col;
+  gap: $editor-gap-1-5;
+}
+
+.editor-layout-color-trigger {
+  height: $editor-control-size-xl; // h-11
+  width: 100%;
+  justify-content: flex-start;
+  gap: $editor-gap-2;
+  padding-left: $editor-gap-2;
+  padding-right: $editor-gap-2;
+  @include text-sm;
+  transition: all $editor-transition-normal;
+
+  &:hover:not(:disabled) {
+    @include editor-button-interactive;
+  }
+}
+
+.editor-layout-color-preview {
+  @include control-size($editor-icon-size-sm);
+  flex-shrink: 0;
+  @include rounded-sm;
+  border: $editor-border-width solid var(--border);
+}

package/src/themes/plugins/_list-color.scss

@@ -0,0 +1,23 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-list-color-dialog {
+  padding: $editor-gap-2 0;
+  animation: editor-fade-in $editor-transition-slow;
+}
+
+.editor-list-color-trigger {
+  height: $editor-control-size-xl;
+  width: 100%;
+  @include flex-center;
+  justify-content: flex-start;
+  gap: $editor-gap-3;
+  @include rounded-md;
+  border: $editor-border-width solid var(--input);
+  padding: 0 $editor-gap-4;
+  background-color: var(--background);
+  transition: all $editor-transition-normal;
+  @include shadow-sm;
+
+  @include editor-button-interactive;
+}

package/src/themes/plugins/_mentions.scss

@@ -0,0 +1,21 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-mentions-popover {
+  position: fixed;
+  z-index: $editor-z-index-layer-10;
+  width: $editor-mentions-width;
+  @include rounded-md;
+  @include shadow-md;
+}
+
+.editor-mentions-item {
+  @include flex-center;
+  gap: $editor-gap-2;
+  
+  @include editor-dropdown-item-interactive;
+  
+  &--transparent {
+    background-color: transparent !important;
+  }
+}