From 08e5753921690ade26fb9a7935d833ccdc942d25 Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Mon, 16 Jun 2025 16:27:56 +0100
Subject: [PATCH 1/5] chore(ui): update lexical field error state styling
---
.../src/lexical/ui/ContentEditable.scss | 32 ++++---------------
1 file changed, 7 insertions(+), 25 deletions(-)
diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index dca212cfc22..1af8b88db06 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -46,38 +46,20 @@ $lexical-contenteditable-bottom-padding: 8px;
}
html[data-theme='light'] {
- .rich-text-lexical.rich-text-lexical--show-gutter {
- &.error:not(:hover) {
- > .rich-text-lexical__wrap
- > .editor-container
- > .editor-scroller
- > .editor
- > .ContentEditable__root::before {
- border-left: 2px solid var(--theme-error-400);
- }
- }
-
- &.error:hover {
- > .rich-text-lexical__wrap
- > .editor-container
- > .editor-scroller
- > .editor
- > .ContentEditable__root::before {
- border-left: 2px solid var(--theme-error-500);
+ .rich-text-lexical {
+ &.error {
+ > .rich-text-lexical__wrap {
+ @include lightInputError;
}
}
}
}
html[data-theme='dark'] {
- .rich-text-lexical.rich-text-lexical--show-gutter {
+ .rich-text-lexical {
&.error {
- > .rich-text-lexical__wrap
- > .editor-container
- > .editor-scroller
- > .editor
- > .ContentEditable__root::before {
- border-left: 2px solid var(--theme-error-500);
+ > .rich-text-lexical__wrap {
+ @include darkInputError;
}
}
}
From 347000d30c8a49555545fbb21301b7e9ecd89330 Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Mon, 16 Jun 2025 18:48:08 +0100
Subject: [PATCH 2/5] chore(richtext-lexical): revert error state change and
apply same styling on small break
---
.../src/lexical/ui/ContentEditable.scss | 49 +++++++++++++++----
1 file changed, 39 insertions(+), 10 deletions(-)
diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index 1af8b88db06..3355f74f2e8 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -25,11 +25,7 @@ $lexical-contenteditable-bottom-padding: 8px;
}
}
- .rich-text-lexical--show-gutter
- > .rich-text-lexical__wrap
- > .editor-container
- > .editor-scroller
- > .editor {
+ .rich-text-lexical > .rich-text-lexical__wrap > .editor-container > .editor-scroller > .editor {
> .ContentEditable__root {
padding-left: 3rem;
}
@@ -47,9 +43,23 @@ $lexical-contenteditable-bottom-padding: 8px;
html[data-theme='light'] {
.rich-text-lexical {
- &.error {
- > .rich-text-lexical__wrap {
- @include lightInputError;
+ &.error:not(:hover) {
+ > .rich-text-lexical__wrap
+ > .editor-container
+ > .editor-scroller
+ > .editor
+ > .ContentEditable__root::before {
+ border-left: 2px solid var(--theme-error-400);
+ }
+ }
+
+ &.error:hover {
+ > .rich-text-lexical__wrap
+ > .editor-container
+ > .editor-scroller
+ > .editor
+ > .ContentEditable__root::before {
+ border-left: 2px solid var(--theme-error-500);
}
}
}
@@ -58,8 +68,27 @@ $lexical-contenteditable-bottom-padding: 8px;
html[data-theme='dark'] {
.rich-text-lexical {
&.error {
- > .rich-text-lexical__wrap {
- @include darkInputError;
+ > .rich-text-lexical__wrap
+ > .editor-container
+ > .editor-scroller
+ > .editor
+ > .ContentEditable__root::before {
+ border-left: 2px solid var(--theme-error-500);
+ }
+ }
+ }
+ }
+
+ @include small-break {
+ .rich-text-lexical {
+ &.error {
+ > .rich-text-lexical__wrap
+ > .editor-container
+ > .editor-scroller
+ > .editor
+ > .ContentEditable__root::before {
+ top: 0;
+ height: 100%;
}
}
}
From 208abad2e9c2c652df149501c3d39974a3701fb5 Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Wed, 25 Jun 2025 10:40:01 +0100
Subject: [PATCH 3/5] chore(ui): remove gutter on lexical field below small
break
---
.../src/lexical/ui/ContentEditable.scss | 49 +++++++++----------
1 file changed, 22 insertions(+), 27 deletions(-)
diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index 3355f74f2e8..728b139f7f3 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -25,24 +25,34 @@ $lexical-contenteditable-bottom-padding: 8px;
}
}
- .rich-text-lexical > .rich-text-lexical__wrap > .editor-container > .editor-scroller > .editor {
+ .rich-text-lexical--show-gutter
+ > .rich-text-lexical__wrap
+ > .editor-container
+ > .editor-scroller
+ > .editor {
> .ContentEditable__root {
padding-left: 3rem;
}
+ }
+
+ .rich-text-lexical
+ > .rich-text-lexical__wrap
+ > .editor-container
+ > .editor-scroller
+ > .editor
> .ContentEditable__root::before {
- content: ' ';
- position: absolute;
- top: $lexical-contenteditable-top-padding;
- left: 0;
- height: calc(
- 100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
- );
- border-left: 1px solid var(--theme-elevation-100);
- }
+ content: ' ';
+ position: absolute;
+ top: $lexical-contenteditable-top-padding;
+ left: 0;
+ height: calc(
+ 100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
+ );
+ border-left: 1px solid var(--theme-elevation-100);
}
html[data-theme='light'] {
- .rich-text-lexical {
+ .rich-text-lexical.rich-text-lexical {
&.error:not(:hover) {
> .rich-text-lexical__wrap
> .editor-container
@@ -66,7 +76,7 @@ $lexical-contenteditable-bottom-padding: 8px;
}
html[data-theme='dark'] {
- .rich-text-lexical {
+ .rich-text-lexical.rich-text-lexical {
&.error {
> .rich-text-lexical__wrap
> .editor-container
@@ -78,19 +88,4 @@ $lexical-contenteditable-bottom-padding: 8px;
}
}
}
-
- @include small-break {
- .rich-text-lexical {
- &.error {
- > .rich-text-lexical__wrap
- > .editor-container
- > .editor-scroller
- > .editor
- > .ContentEditable__root::before {
- top: 0;
- height: 100%;
- }
- }
- }
- }
}
From 69242bbd7fa24d30282229acb4807f615b7fdf82 Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Mon, 30 Jun 2025 16:36:38 +0100
Subject: [PATCH 4/5] fix(richtext-lexical): prevent gutter border being shown
on small screens
---
packages/richtext-lexical/src/lexical/ui/ContentEditable.scss | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index 728b139f7f3..393b9501979 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -32,6 +32,9 @@ $lexical-contenteditable-bottom-padding: 8px;
> .editor {
> .ContentEditable__root {
padding-left: 3rem;
+ &::before {
+ border-left: 1px solid var(--theme-elevation-100);
+ }
}
}
@@ -48,7 +51,6 @@ $lexical-contenteditable-bottom-padding: 8px;
height: calc(
100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
);
- border-left: 1px solid var(--theme-elevation-100);
}
html[data-theme='light'] {
From 90541cbf89b13950783a9ccc482f99dabefc1feb Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Tue, 1 Jul 2025 09:49:40 +0100
Subject: [PATCH 5/5] chore: apply input error style to lexical field at small
break
---
.../src/lexical/ui/ContentEditable.scss | 50 ++++++++++++-------
1 file changed, 31 insertions(+), 19 deletions(-)
diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index 393b9501979..f8e336f0367 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -32,29 +32,21 @@ $lexical-contenteditable-bottom-padding: 8px;
> .editor {
> .ContentEditable__root {
padding-left: 3rem;
- &::before {
- border-left: 1px solid var(--theme-elevation-100);
- }
}
- }
-
- .rich-text-lexical
- > .rich-text-lexical__wrap
- > .editor-container
- > .editor-scroller
- > .editor
> .ContentEditable__root::before {
- content: ' ';
- position: absolute;
- top: $lexical-contenteditable-top-padding;
- left: 0;
- height: calc(
- 100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
- );
+ content: ' ';
+ position: absolute;
+ top: $lexical-contenteditable-top-padding;
+ left: 0;
+ height: calc(
+ 100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
+ );
+ border-left: 1px solid var(--theme-elevation-100);
+ }
}
html[data-theme='light'] {
- .rich-text-lexical.rich-text-lexical {
+ .rich-text-lexical.rich-text-lexical--show-gutter {
&.error:not(:hover) {
> .rich-text-lexical__wrap
> .editor-container
@@ -75,10 +67,20 @@ $lexical-contenteditable-bottom-padding: 8px;
}
}
}
+
+ @include small-break {
+ .rich-text-lexical {
+ &.error {
+ > .rich-text-lexical__wrap {
+ @include lightInputError;
+ }
+ }
+ }
+ }
}
html[data-theme='dark'] {
- .rich-text-lexical.rich-text-lexical {
+ .rich-text-lexical.rich-text-lexical--show-gutter {
&.error {
> .rich-text-lexical__wrap
> .editor-container
@@ -89,5 +91,15 @@ $lexical-contenteditable-bottom-padding: 8px;
}
}
}
+
+ @include small-break {
+ .rich-text-lexical {
+ &.error {
+ > .rich-text-lexical__wrap {
+ @include darkInputError;
+ }
+ }
+ }
+ }
}
}