a2d68f84e1
## Description - Improves the standard typography styles of the rich text editors. - Improve styles of Lexical relationship, inline-relationship, upload, and blocks features. - Improves drag and drop interaction for Lexical. - Adds a dark mode style for Lexical inline toolbar, floating link editor, and slash menu. - [x] I have read and understand the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository. ## Type of change <!-- Please delete options that are not relevant. --> - [x] Chore (non-breaking change which does not add functionality) ## Checklist: - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] Existing test suite passes locally with my changes - [ ] I have made corresponding changes to the documentation
64 lines
1.1 KiB
SCSS
64 lines
1.1 KiB
SCSS
@import '../scss/styles';
|
|
|
|
.rich-text-lexical {
|
|
.editor {
|
|
position: relative;
|
|
}
|
|
|
|
.editor-container {
|
|
position: relative;
|
|
|
|
font-family: var(--font-serif);
|
|
font-size: base(0.8);
|
|
letter-spacing: 0.02em;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--font-body);
|
|
line-height: 1.125;
|
|
letter-spacing: 0;
|
|
}
|
|
}
|
|
|
|
&--show-gutter {
|
|
> .rich-text-lexical__wrap
|
|
> .editor-container
|
|
> .editor-scroller
|
|
> .editor
|
|
> div
|
|
> .editor-placeholder {
|
|
left: 3rem;
|
|
}
|
|
}
|
|
|
|
&:not(&--show-gutter)
|
|
> .rich-text-lexical__wrap
|
|
> .editor-container
|
|
> .editor-scroller
|
|
> .editor
|
|
> div
|
|
> .editor-placeholder {
|
|
left: 0;
|
|
}
|
|
|
|
.editor-placeholder {
|
|
position: absolute;
|
|
top: 8px;
|
|
font-size: base(0.8);
|
|
line-height: 1.5;
|
|
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;
|
|
}
|
|
}
|