@payloadcms/richtext-slate 1.0.0-beta.0 → 1.0.0-beta.1

package/dist/field/buttons.scss

@@ -0,0 +1,15 @@
+@import 'payload/scss';
+
+.rich-text__button {
+  position: relative;
+  cursor: pointer;
+
+  svg {
+    width: base(0.75);
+    height: base(0.75);
+  }
+
+  &--disabled {
+    opacity: 0.4;
+  }
+}

package/dist/field/elements/blockquote/index.scss

@@ -0,0 +1,9 @@
+@import 'payload/scss';
+
+.rich-text-blockquote {
+  &[data-slate-node='element'] {
+    margin: base(0.625) 0;
+    padding-left: base(0.625);
+    border-left: 1px solid var(--theme-elevation-200);
+  }
+}

package/dist/field/elements/link/Element/index.scss

@@ -0,0 +1,92 @@
+@import 'payload/scss';
+
+.rich-text-link {
+  position: relative;
+  text-decoration: underline;
+
+  .popup {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    .popup__hide-scrollbar,
+    .popup__scroll-container {
+      overflow: visible;
+    }
+
+    .popup__scroll-content {
+      white-space: pre;
+    }
+  }
+
+  .icon--x line {
+    stroke-width: 2px;
+  }
+
+  &__popup {
+    @extend %body;
+    font-family: var(--font-body);
+    display: flex;
+
+    button {
+      @extend %btn-reset;
+      font-weight: 600;
+      cursor: pointer;
+      margin: 0;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__link-label {
+    max-width: base(8);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-radius: 2px;
+
+    &:hover {
+      background-color: var(--popup-button-highlight);
+    }
+  }
+}
+
+.rich-text-link__popup {
+  display: flex;
+  gap: calc(var(--base) * 0.25);
+  button {
+    &:hover {
+      .btn__icon {
+        background-color: var(--popup-button-highlight);
+        .fill {
+          fill: var(--theme-text);
+        }
+        .stroke {
+          stroke: var(--theme-text);
+        }
+      }
+    }
+  }
+}
+
+.rich-text-link__popup-toggler {
+  position: relative;
+  border: 0;
+  background-color: transparent;
+  padding: 0;
+  text-decoration: underline;
+  cursor: text;
+
+  &:focus,
+  &:focus-within {
+    outline: none;
+  }
+
+  &--open {
+    z-index: var(--z-popup);
+  }
+}

package/dist/field/elements/link/LinkDrawer/index.scss

@@ -0,0 +1,50 @@
+@import 'payload/scss';
+
+.rich-text-link-edit-modal {
+  &__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/elements/ol/index.scss

@@ -0,0 +1,7 @@
+@import 'payload/scss';
+
+.rich-text-ol {
+  &[data-slate-node='element'] {
+    margin: base(0.625) 0;
+  }
+}

package/dist/field/elements/relationship/Button/index.scss

@@ -0,0 +1,7 @@
+@import 'payload/scss';
+
+.relationship-rich-text-button {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}

package/dist/field/elements/relationship/Element/index.scss

@@ -0,0 +1,93 @@
+@import 'payload/scss';
+
+.rich-text-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;
+  }
+
+  .rich-text-relationship__doc-drawer-toggler {
+    text-decoration: underline;
+    pointer-events: all;
+    line-height: inherit;
+  }
+
+  &__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;
+    }
+  }
+
+  &__doc-drawer-toggler,
+  &__list-drawer-toggler {
+    & > * {
+      margin: 0;
+    }
+
+    &:disabled {
+      color: var(--theme-elevation-300);
+      pointer-events: none;
+    }
+  }
+}

package/dist/field/elements/ul/index.scss

@@ -0,0 +1,7 @@
+@import 'payload/scss';
+
+.rich-text-ul {
+  &[data-slate-node='element'] {
+    margin: base(0.625) 0;
+  }
+}

package/dist/field/elements/upload/Button/index.scss

@@ -0,0 +1,7 @@
+@import 'payload/scss';
+
+.upload-rich-text-button {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}

package/dist/field/elements/upload/Element/index.scss

@@ -0,0 +1,147 @@
+@import 'payload/scss';
+
+.rich-text-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);
+
+  &: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);
+
+    .rich-text-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/icons/IndentLeft/index.scss

@@ -0,0 +1,16 @@
+@import 'payload/scss';
+
+.icon--indent-left {
+  height: $baseline;
+  width: $baseline;
+
+  .stroke {
+    fill: none;
+    stroke: var(--theme-elevation-800);
+    stroke-width: $style-stroke-width-m;
+  }
+
+  .fill {
+    fill: var(--theme-elevation-800);
+  }
+}

package/dist/field/icons/IndentRight/index.scss

@@ -0,0 +1,16 @@
+@import 'payload/scss';
+
+.icon--indent-right {
+  height: $baseline;
+  width: $baseline;
+
+  .stroke {
+    fill: none;
+    stroke: var(--theme-elevation-800);
+    stroke-width: $style-stroke-width-m;
+  }
+
+  .fill {
+    fill: var(--theme-elevation-800);
+  }
+}

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

@@ -0,0 +1,11 @@
+@import 'payload/scss';
+
+.icon--link {
+  width: $baseline;
+  height: $baseline;
+
+  .stroke {
+    stroke: var(--theme-elevation-800);
+    stroke-width: $style-stroke-width;
+  }
+}

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

@@ -0,0 +1,12 @@
+@import 'payload/scss';
+
+.icon--relationship {
+  height: $baseline;
+  width: $baseline;
+
+  .stroke {
+    fill: none;
+    stroke: var(--theme-elevation-800);
+    stroke-width: $style-stroke-width-m;
+  }
+}

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

@@ -0,0 +1,11 @@
+@import 'payload/scss';
+
+.icon--upload {
+  height: $baseline;
+  width: $baseline;
+
+  .fill {
+    fill: var(--theme-elevation-800);
+    stroke: none;
+  }
+}

package/dist/field/index.scss

@@ -0,0 +1,193 @@
+@import 'payload/scss';
+
+.rich-text {
+  margin-bottom: base(2);
+  display: flex;
+  isolation: isolate;
+
+  &__toolbar {
+    @include blur-bg(var(--theme-elevation-0));
+    margin-bottom: $baseline;
+    border: $style-stroke-width-s solid var(--theme-elevation-150);
+    position: sticky;
+    z-index: 1;
+    top: var(--doc-controls-height);
+  }
+
+  &__toolbar-wrap {
+    padding: base(0.25);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    position: relative;
+    z-index: 1;
+
+    &:after {
+      content: ' ';
+      opacity: 0.8;
+      position: absolute;
+      top: calc(100% + 1px);
+      background: linear-gradient(var(--theme-elevation-0), transparent);
+      display: block;
+      left: -1px;
+      right: -1px;
+      height: base(1);
+    }
+  }
+
+  &__editor {
+    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;
+    }
+
+    h1[data-slate-node='element'] {
+      font-size: base(1.5);
+      margin: base(1) 0 base(0.5);
+    }
+
+    h2[data-slate-node='element'] {
+      font-size: base(1.25);
+      margin: base(1) 0 base(0.5);
+    }
+
+    h3[data-slate-node='element'] {
+      font-size: base(1.125);
+      margin: base(0.75) 0 base(0.5);
+    }
+
+    h4[data-slate-node='element'] {
+      font-size: base(1);
+      margin: base(0.5) 0 base(0.5);
+    }
+
+    h5[data-slate-node='element'] {
+      font-size: base(0.875);
+      margin: base(0.25) 0 base(0.25);
+    }
+
+    h6[data-slate-node='element'] {
+      font-size: base(0.75);
+      margin: base(0.25) 0 base(0.25);
+    }
+  }
+
+  &--gutter {
+    .rich-text__editor {
+      padding-left: $baseline;
+      border-left: 1px solid var(--theme-elevation-100);
+    }
+  }
+
+  &__input {
+    min-height: base(10);
+  }
+
+  &__wrap {
+    width: 100%;
+    position: relative;
+  }
+
+  &__wrapper {
+    width: 100%;
+  }
+
+  &--read-only {
+    .rich-text__editor {
+      background: var(--theme-elevation-200);
+      color: var(--theme-elevation-450);
+      padding: base(0.5);
+
+      .popup button {
+        display: none;
+      }
+    }
+
+    .rich-text__toolbar {
+      pointer-events: none;
+      position: relative;
+      top: 0;
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--theme-elevation-200);
+        opacity: 0.85;
+        z-index: 2;
+        backdrop-filter: unset;
+      }
+    }
+  }
+
+  &__button {
+    @extend %btn-reset;
+    padding: base(0.25);
+
+    svg {
+      @include color-svg(var(--theme-elevation-800));
+      width: base(0.75);
+      height: base(0.75);
+    }
+
+    &:hover {
+      background-color: var(--theme-elevation-100);
+    }
+
+    &__button--active,
+    &__button--active:hover {
+      background-color: var(--theme-elevation-150);
+    }
+  }
+
+  &__drawerIsOpen {
+    top: base(1);
+  }
+
+  @include mid-break {
+    &__toolbar {
+      top: base(3);
+    }
+
+    &__drawerIsOpen {
+      top: base(1);
+    }
+  }
+}
+
+[data-slate-node='element'] {
+  margin-bottom: base(0.25);
+}
+
+html[data-theme='light'] {
+  .rich-text {
+    &.error {
+      .rich-text__editor,
+      .rich-text__toolbar {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .rich-text {
+    &.error {
+      .rich-text__editor,
+      .rich-text__toolbar {
+        @include darkInputError;
+      }
+    }
+  }
+}