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

package/dist/field/features/Blocks/component/index.scss

@@ -0,0 +1,125 @@
+@import 'payload/scss';
+
+.lexical-block {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base) / 2);
+  font-family: var(
+    --font-body
+  ); // Reset font to non-serif, body font, as the lexical editor parent uses a serif font.
+
+  &__header {
+    h3 {
+      margin: 0;
+    }
+  }
+
+  &__header-wrap {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  &__heading-with-error {
+    display: flex;
+    align-items: center;
+    gap: base(0.5);
+  }
+
+  &--has-no-error {
+    > .array-field__header .array-field__heading-with-error {
+      color: var(--theme-text);
+    }
+  }
+
+  &--has-error {
+    > .array-field__header {
+      color: var(--theme-error-500);
+    }
+  }
+
+  &__error-pill {
+    align-self: center;
+  }
+
+  &__header-actions {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+
+  &__header-action {
+    @extend %btn-reset;
+    cursor: pointer;
+    margin-left: base(0.5);
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: underline;
+    }
+  }
+
+  &__block-header {
+    display: inline-flex;
+    max-width: 100%;
+    overflow: hidden;
+    gap: base(0.375);
+  }
+
+  &__block-number {
+    flex-shrink: 0;
+  }
+
+  &__block-pill {
+    flex-shrink: 0;
+    display: block;
+    line-height: unset;
+  }
+
+  &__error-wrap {
+    position: relative;
+  }
+
+  &__rows {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+  }
+
+  &__drawer-toggler {
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    border: none;
+    align-self: flex-start;
+
+    .btn {
+      color: var(--theme-elevation-400);
+      margin: 0;
+
+      &:hover {
+        color: var(--theme-elevation-800);
+      }
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .blocks-field--has-error {
+    .section-title__input,
+    .blocks-field__heading-with-error {
+      color: var(--theme-error-750);
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .blocks-field--has-error {
+    .section-title__input,
+    .blocks-field__heading-with-error {
+      color: var(--theme-error-500);
+    }
+  }
+}

package/dist/field/features/Blocks/drawer/index.scss

@@ -0,0 +1 @@
+@import 'payload/scss';

package/dist/field/features/Blocks/index.scss

@@ -0,0 +1 @@
+@import 'payload/scss';

package/dist/field/features/Link/drawer/index.scss

@@ -0,0 +1,50 @@
+@import 'payload/scss';
+
+.lexical-link-edit-drawer {
+  &__template {
+    position: relative;
+    z-index: 1;
+    padding-top: base(1);
+    padding-bottom: base(2);
+  }
+
+  &__header {
+    width: 100%;
+    margin-bottom: $baseline;
+    display: flex;
+    justify-content: space-between;
+    margin-top: base(2.5);
+    margin-bottom: base(1);
+
+    @include mid-break {
+      margin-top: base(1.5);
+    }
+  }
+
+  &__header-text {
+    margin: 0;
+  }
+
+  &__header-close {
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+    width: base(1);
+    height: base(1);
+
+    svg {
+      width: base(2.75);
+      height: base(2.75);
+      position: relative;
+      left: base(-0.825);
+      top: base(-0.825);
+
+      .stroke {
+        stroke-width: 2px;
+        vector-effect: non-scaling-stroke;
+      }
+    }
+  }
+}

package/dist/field/features/Link/index.scss

@@ -0,0 +1 @@
+@import 'payload/scss';

package/dist/field/features/Link/plugins/floatingLinkEditor/index.scss

@@ -0,0 +1,79 @@
+@import 'payload/scss';
+
+html[data-theme='light'] {
+  .link-editor {
+    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.link-editor {
+  z-index: 10;
+  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;
+
+  .link-input {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    min-height: 28px;
+    box-sizing: border-box;
+    padding: 2px 4px;
+    font-size: 15px;
+    border: 0;
+    outline: 0;
+    position: relative;
+    font-family: inherit;
+
+    a {
+      text-decoration: none;
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      margin-right: 30px;
+      text-overflow: ellipsis;
+      color: var(--color-blue-600);
+      border-bottom: 1px dotted;
+
+      &:hover {
+        color: var(--color-blue-400);
+      }
+    }
+  }
+
+  button {
+    all: unset;
+    background-size: 16px;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    color: var(--color-base-600);
+    border-radius: 4px;
+
+    &:hover:not([disabled]) {
+      background-color: var(--color-base-100);
+    }
+  }
+
+  .link-edit {
+    background-image: url(../../../../lexical/ui/icons/Edit/index.svg);
+  }
+
+  .link-trash {
+    background-image: url(../../../../lexical/ui/icons/Remove/index.svg);
+  }
+}

package/dist/field/features/Relationship/drawer/index.scss

@@ -0,0 +1 @@
+@import 'payload/scss';

package/dist/field/features/Relationship/index.scss

@@ -0,0 +1 @@
+@import 'payload/scss';

package/dist/field/features/Relationship/nodes/components/index.scss

@@ -0,0 +1,89 @@
+@import 'payload/scss';
+
+.lexical-relationship {
+  @extend %body;
+  @include shadow-sm;
+  padding: base(0.75);
+  display: flex;
+  align-items: center;
+  background: var(--theme-input-bg);
+  border: 1px solid var(--theme-elevation-100);
+  max-width: base(15);
+  font-family: var(--font-body);
+
+  &:hover {
+    border: 1px solid var(--theme-elevation-150);
+  }
+
+  &[data-slate-node='element'] {
+    margin: base(0.625) 0;
+  }
+
+  &__label {
+    margin-bottom: base(0.25);
+  }
+
+  &__title {
+    margin: 0;
+  }
+
+  &__label,
+  &__title {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 1 !important;
+  }
+
+  &__title {
+    font-weight: bold;
+  }
+
+  &__wrap {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  &--selected {
+    box-shadow: $focus-box-shadow;
+    outline: none;
+  }
+
+  &__doc-drawer-toggler {
+    text-decoration: underline;
+    pointer-events: all;
+    line-height: inherit;
+    & > * {
+      margin: 0;
+    }
+
+    &:disabled {
+      color: var(--theme-elevation-300);
+      pointer-events: none;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: base(0.5);
+
+    & > *:not(:last-child) {
+      margin-right: base(0.25);
+    }
+  }
+
+  &__removeButton {
+    margin: 0;
+
+    line {
+      stroke-width: $style-stroke-width-m;
+    }
+
+    &:disabled {
+      color: var(--theme-elevation-300);
+      pointer-events: none;
+    }
+  }
+}

package/dist/field/features/Upload/component/index.scss

@@ -0,0 +1,151 @@
+@import 'payload/scss';
+
+.lexical-upload {
+  @extend %body;
+  @include shadow-sm;
+  max-width: base(15);
+  display: flex;
+  align-items: center;
+  background: var(--theme-input-bg);
+  border: 1px solid var(--theme-elevation-100);
+  position: relative;
+  font-family: var(--font-body);
+
+  .btn {
+    margin: 0;
+  }
+
+  &:hover {
+    border: 1px solid var(--theme-elevation-150);
+  }
+
+  &[data-slate-node='element'] {
+    margin: base(0.625) 0;
+  }
+
+  &__card {
+    @include soft-shadow-bottom;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &__topRow {
+    display: flex;
+  }
+
+  &__thumbnail {
+    width: base(3.25);
+    height: auto;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    img,
+    svg {
+      position: absolute;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      background-color: var(--theme-elevation-800);
+    }
+  }
+
+  &__topRowRightPanel {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    padding: base(0.75);
+    justify-content: space-between;
+    max-width: calc(100% - #{base(3.25)});
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: base(0.5);
+
+    .lexical-upload__doc-drawer-toggler {
+      pointer-events: all;
+    }
+
+    & > *:not(:last-child) {
+      margin-right: base(0.25);
+    }
+  }
+
+  &__removeButton {
+    margin: 0;
+
+    line {
+      stroke-width: $style-stroke-width-m;
+    }
+
+    &:disabled {
+      color: var(--theme-elevation-300);
+      pointer-events: none;
+    }
+  }
+
+  &__upload-drawer-toggler {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    line-height: inherit;
+  }
+
+  &__doc-drawer-toggler {
+    text-decoration: underline;
+  }
+
+  &__doc-drawer-toggler,
+  &__list-drawer-toggler,
+  &__upload-drawer-toggler {
+    & > * {
+      margin: 0;
+    }
+
+    &:disabled {
+      color: var(--theme-elevation-300);
+      pointer-events: none;
+    }
+  }
+
+  &__collectionLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__bottomRow {
+    padding: base(0.5);
+    border-top: 1px solid var(--theme-elevation-100);
+  }
+
+  h5 {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &__wrap {
+    padding: base(0.5) base(0.5) base(0.5) base(1);
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &--selected {
+    box-shadow: $focus-box-shadow;
+    outline: none;
+  }
+
+  @include small-break {
+    &__topRowRightPanel {
+      padding: base(0.75) base(0.5);
+    }
+  }
+}

package/dist/field/features/Upload/drawer/index.scss

@@ -0,0 +1 @@
+@import 'payload/scss';

package/dist/field/features/Upload/index.scss

@@ -0,0 +1 @@
+@import 'payload/scss';

package/dist/field/features/Upload/nodes/UploadNode.scss

@@ -0,0 +1,4 @@
+@import 'payload/scss';
+
+.editor-upload {
+}

package/dist/field/features/align/index.scss

@@ -0,0 +1,4 @@
+.floating-select-toolbar-popup__section-dropdown-align {
+  display: flex;
+  gap: 2px;
+}

package/dist/field/features/common/floatingSelectToolbarFeaturesButtonsSection/index.scss

@@ -0,0 +1,4 @@
+.floating-select-toolbar-popup__section-features {
+  display: flex;
+  gap: 2px;
+}

package/dist/field/features/common/floatingSelectToolbarTextDropdownSection/index.scss

@@ -0,0 +1,4 @@
+.floating-select-toolbar-popup__section-dropdown-text {
+  display: flex;
+  gap: 2px;
+}

package/dist/field/features/debug/TreeView/index.scss

@@ -0,0 +1,78 @@
+.tree-view-output {
+  display: block;
+  background: #222;
+  color: #fff;
+  padding: 0;
+  font-size: 12px;
+  margin: 1px auto 10px auto;
+  position: relative;
+  overflow: hidden;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  pre {
+    line-height: 1.1;
+    background: #222;
+    color: #fff;
+    margin: 0;
+    padding: 10px;
+    font-size: 12px;
+    overflow: auto;
+    max-height: 400px;
+  }
+
+  .debug-treetype-button {
+    border: 0;
+    padding: 0;
+    font-size: 12px;
+    top: 10px;
+    right: 85px;
+    position: absolute;
+    background: none;
+    color: #fff;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .debug-timetravel-button {
+    border: 0;
+    padding: 0;
+    font-size: 12px;
+    top: 10px;
+    right: 15px;
+    position: absolute;
+    background: none;
+    color: #fff;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .debug-timetravel-panel {
+    overflow: hidden;
+    padding: 0 0 10px;
+    margin: auto;
+    display: flex;
+
+    &-button {
+      padding: 0;
+      border: 0;
+      background: none;
+      flex: 1;
+      color: #fff;
+      font-size: 12px;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &-slider {
+      padding: 0;
+      flex: 8;
+    }
+  }
+}

package/dist/field/features/format/common/index.scss

@@ -0,0 +1,4 @@
+.floating-select-toolbar-popup__section-format {
+  display: flex;
+  gap: 2px;
+}

package/dist/field/features/indent/index.scss

@@ -0,0 +1,4 @@
+.floating-select-toolbar-popup__section-indent {
+  display: flex;
+  gap: 2px;
+}

package/dist/field/index.scss

@@ -0,0 +1 @@
+@import 'payload/scss';

package/dist/field/lexical/LexicalEditor.scss

@@ -0,0 +1,34 @@
+@import 'payload/scss';
+
+.editor-shell {
+  position: relative;
+
+  font-family: var(--font-serif);
+  font-size: base(0.625);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-body);
+    line-height: 1.125;
+  }
+}
+
+.editor-placeholder {
+  position: absolute;
+  top: 8px;
+  left: 0px;
+  font-size: 15px;
+  color: var(--theme-elevation-500);
+  /* Prevent text selection */
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+
+  /* Make it behave more like a background element (no interaction) */
+  pointer-events: none;
+}

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

@@ -0,0 +1,39 @@
+@import 'payload/scss';
+
+.floating-select-toolbar-popup__button {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+  height: 30px;
+  width: 30px;
+  border: 0;
+  background: none;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0;
+
+  &.spaced {
+    margin-right: 2px;
+  }
+
+  &.active {
+    background-color: var(--color-base-100);
+
+    .icon {
+      opacity: 1;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .icon {
+      opacity: 0.2;
+    }
+  }
+
+  &:hover:not([disabled]) {
+    background-color: var(--color-base-100);
+  }
+}