@payloadcms/richtext-lexical 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/index.scss

@@ -0,0 +1,100 @@
+@import 'payload/scss';
+
+.floating-select-toolbar-popup__dropdown {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+  height: 30px;
+  width: 40px;
+  border: 0;
+  background: none;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  padding: 0;
+
+  &:disabled {
+    cursor: not-allowed;
+
+    .icon {
+      opacity: 0.2;
+    }
+  }
+
+  &:hover:not([disabled]) {
+    background-color: var(--color-base-100);
+  }
+
+  &.active {
+    background-color: var(--color-base-100);
+
+    .floating-select-toolbar-popup__dropdown--caret {
+      &:after {
+        transform: rotate(0deg);
+      }
+    }
+  }
+
+  &--caret {
+    &:after {
+      transform: rotate(180deg);
+
+      content: ' ';
+      position: absolute;
+      top: 13px;
+
+      /* Vector 3 */
+
+      width: 7px;
+      height: 4px;
+
+      opacity: 0.3;
+      background-image: url(../../../ui/icons/Caret/index.svg);
+      background-position-y: 0px;
+      background-position-x: 0px;
+    }
+  }
+
+  &--items {
+    position: absolute;
+    background: var(--color-base-0);
+    border-radius: 4px;
+    width: 132.5px;
+    z-index: 100;
+
+    .item {
+      all: unset; // reset all default button styles
+      cursor: pointer;
+      color: var(--color-base-900);
+
+      &:hover:not([disabled]) {
+        background-color: var(--color-base-100);
+      }
+      padding-left: 6.25px;
+      padding-right: 6.25px;
+      width: 100%;
+      height: 30px;
+      border-radius: 4px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: 6.25px;
+
+      .icon {
+        min-width: 20px;
+        height: 20px;
+        color: var(--color-base-600);
+      }
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .floating-select-toolbar-popup__dropdown {
+    &--items {
+      position: absolute;
+      box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.2);
+    }
+  }
+}

package/dist/field/lexical/plugins/FloatingSelectToolbar/index.scss

@@ -0,0 +1,57 @@
+@import 'payload/scss';
+
+html[data-theme='light'] {
+  .floating-select-toolbar-popup {
+    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.floating-select-toolbar-popup {
+  display: flex;
+  align-items: center;
+  background: var(--color-base-0);
+  padding: 0px 3.72px 0px 6.25px;
+  vertical-align: middle;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  opacity: 0;
+  border-radius: 6.25px;
+  transition: opacity 0.2s;
+  height: 37.5px;
+  will-change: transform;
+
+  .caret {
+    z-index: 93;
+    position: absolute;
+    top: calc(100% - 16px);
+    border: 12px solid transparent;
+    pointer-events: none;
+    border-top-color: var(--color-base-0);
+  }
+
+  &__section {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      min-width: 20px;
+      height: 20px;
+      color: var(--color-base-600);
+    }
+
+    .divider {
+      width: 1px;
+      height: 15px;
+      background-color: var(--color-base-100);
+      margin: 0 6.25px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    button.insert-comment {
+      display: none;
+    }
+  }
+}

package/dist/field/lexical/plugins/SlashMenu/index.scss

@@ -0,0 +1,49 @@
+@import 'payload/scss';
+
+html[data-theme='light'] {
+  .slash-menu {
+    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.slash-menu {
+  background: var(--color-base-0);
+  width: 200px;
+  color: var(--color-base-800);
+  border-radius: 4px;
+  list-style: none;
+
+  .group {
+    padding-bottom: 8px;
+  }
+
+  .group-title {
+    padding-left: 10px;
+    color: var(--color-base-600);
+    font-size: 10px;
+  }
+
+  .item {
+    padding-left: 8px;
+    background: none;
+    border: none;
+    color: var(--color-base-900);
+    display: flex;
+    align-items: center;
+    height: 30px;
+    width: 100%;
+    cursor: pointer;
+
+    &.selected {
+      background: var(--color-base-100);
+    }
+
+    .text {
+      margin-left: 6px;
+    }
+
+    .icon {
+      color: var(--color-base-500);
+    }
+  }
+}

package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.scss

@@ -0,0 +1,35 @@
+@import 'payload/scss';
+
+.add-block-menu {
+  all: unset; // reset all default button styles
+  border-radius: 4px;
+  padding: 0px;
+  cursor: pointer;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    .icon {
+      opacity: 1;
+    }
+  }
+
+  .icon {
+    width: 18px;
+    height: 24px;
+    opacity: 0.3;
+    background-image: url(../../../ui/icons/Add/index.svg);
+    background-position-y: 2.5px;
+    background-position-x: 0px;
+  }
+
+  html[data-theme='dark'] & {
+    .icon {
+      filter: invert(1);
+    }
+  }
+}

package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/index.scss

@@ -0,0 +1,50 @@
+@import 'payload/scss';
+
+.draggable-block-menu {
+  border-radius: 4px;
+  padding: 0px;
+  cursor: grab;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    .icon {
+      opacity: 1;
+    }
+  }
+
+  .icon {
+    width: 18px;
+    height: 24px;
+    opacity: 0.3;
+    background-image: url(../../../ui/icons/DraggableBlock/index.svg);
+  }
+
+  html[data-theme='dark'] & {
+    .icon {
+      filter: invert(1);
+    }
+  }
+}
+
+.draggable-block-target-line {
+  pointer-events: none;
+  background: var(--theme-elevation-200);
+  border: 1px solid var(--theme-elevation-650);
+  border-radius: 4px;
+  height: 50px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
+  transition: transform 0.05s;
+}