github-mirror/BookStack
github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-03-14 14:35:14 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Lexical: Added dark mode styles, fixed autolink range

Browse Source
This commit is contained in:
Dan Brown 2024-12-14 15:17:33 +00:00
parent 97b201f61f
commit a71aa241ad
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/wysiwyg/services/__tests__/auto-links.test.ts
View File

@ -24,7 +24,7 @@ describe('Auto-link service tests', () => {
pNode.append(text); pNode.append(text);
$getRoot().append(pNode); $getRoot().append(pNode);
text.select(35, 35); text.select(34, 34);
}); });
editor.commitUpdates(); editor.commitUpdates();
@ -62,7 +62,7 @@ describe('Auto-link service tests', () => {
pNode.append(text); pNode.append(text);
$getRoot().append(pNode); $getRoot().append(pNode);
text.select(35, 35); text.select(34, 34);
}); });
editor.commitUpdates(); editor.commitUpdates();

2
resources/js/wysiwyg/services/auto-links.ts
View File

@ -27,7 +27,7 @@ function handlePotentialLinkEvent(node: TextNode, selection: BaseSelection, edit
return; return;
} }
const cursorPoint = selectionRange[0].offset - 1; const cursorPoint = selectionRange[0].offset;
const nodeText = node.getTextContent(); const nodeText = node.getTextContent();
const rTrimText = nodeText.slice(0, cursorPoint); const rTrimText = nodeText.slice(0, cursorPoint);
const priorSpaceIndex = rTrimText.lastIndexOf(' '); const priorSpaceIndex = rTrimText.lastIndexOf(' ');

47
resources/sass/_editor.scss
View File

@ -8,18 +8,20 @@
// Main UI elements // Main UI elements
.editor-container { .editor-container {
background-color: #FFF; @include mixins.lightDark(background-color, #FFF, #222);
position: relative; position: relative;
&.fullscreen { &.fullscreen {
z-index: 500; z-index: 500;
} }
} }
.editor-toolbar-main { .editor-toolbar-main {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
border-top: 1px solid #DDD; border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
@include mixins.lightDark(border-color, #DDD, #000);
} }
body.editor-is-fullscreen { body.editor-is-fullscreen {
@ -46,6 +48,7 @@ body.editor-is-fullscreen {
font-size: 12px; font-size: 12px;
padding: 4px; padding: 4px;
color: #444; color: #444;
@include mixins.lightDark(color, #444, #999);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -54,6 +57,7 @@ body.editor-is-fullscreen {
} }
.editor-button:hover { .editor-button:hover {
background-color: #EEE; background-color: #EEE;
@include mixins.lightDark(background-color, #EEE, #333);
cursor: pointer; cursor: pointer;
color: #000; color: #000;
} }
@ -63,7 +67,7 @@ body.editor-is-fullscreen {
opacity: .6; opacity: .6;
} }
.editor-button-active, .editor-button-active:hover { .editor-button-active, .editor-button-active:hover {
background-color: #ceebff; @include mixins.lightDark(background-color, #ceebff, #444);
color: #000; color: #000;
} }
.editor-button-long { .editor-button-long {
@ -75,7 +79,7 @@ body.editor-is-fullscreen {
} }
.editor-button-text { .editor-button-text {
font-weight: 400; font-weight: 400;
color: #000; @include mixins.lightDark(color, #000, #AAA);
font-size: 14px; font-size: 14px;
flex: 1; flex: 1;
padding-inline-end: 4px; padding-inline-end: 4px;
@ -126,7 +130,8 @@ body.editor-is-fullscreen {
} }
} }
&:hover { &:hover {
outline: 1px solid #DDD; outline: 1px solid;
@include mixins.lightDark(outline-color, #DDD, #111);
outline-offset: -3px; outline-offset: -3px;
} }
} }
@ -137,11 +142,14 @@ body.editor-is-fullscreen {
} }
.editor-dropdown-menu { .editor-dropdown-menu {
position: absolute; position: absolute;
background-color: #FFF; border: 1px solid;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15); @include mixins.lightDark(background-color, #FFF, #292929);
@include mixins.lightDark(border-color, #FFF, #333);
@include mixins.lightDark(box-shadow, 0 0 6px 0 rgba(0, 0, 0, 0.15), 0 1px 4px 0 rgba(0, 0, 0, 0.4));
z-index: 99; z-index: 99;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-radius: 3px;
} }
.editor-dropdown-menu-vertical { .editor-dropdown-menu-vertical {
display: flex; display: flex;
@ -163,8 +171,8 @@ body.editor-is-fullscreen {
.editor-separator { .editor-separator {
display: block; display: block;
height: 1px; height: 1px;
background-color: #DDD;
opacity: .8; opacity: .8;
@include mixins.lightDark(background-color, #DDD, #000);
} }
.editor-format-menu-toggle { .editor-format-menu-toggle {
@ -199,6 +207,7 @@ body.editor-is-fullscreen {
display: flex; display: flex;
border-inline: 1px solid #DDD; border-inline: 1px solid #DDD;
padding-inline: 4px; padding-inline: 4px;
@include mixins.lightDark(border-color, #DDD, #000);
&:first-child { &:first-child {
border-inline-start: none; border-inline-start: none;
} }
@ -212,11 +221,12 @@ body.editor-is-fullscreen {
.editor-context-toolbar { .editor-context-toolbar {
position: fixed; position: fixed;
background-color: #FFF;
border: 1px solid #DDD; border: 1px solid #DDD;
@include mixins.lightDark(background-color, #FFF, #222);
@include mixins.lightDark(border-color, #DDD, #333);
@include mixins.lightDark(box-shadow, 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 4px 0 rgba(0, 0, 0, 0.4));
padding: .2rem; padding: .2rem;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
&:before { &:before {
@ -226,9 +236,10 @@ body.editor-is-fullscreen {
width: 8px; width: 8px;
height: 8px; height: 8px;
position: absolute; position: absolute;
background-color: #FFF; @include mixins.lightDark(background-color, #FFF, #222);
border-top: 1px solid #DDD; border-top: 1px solid #DDD;
border-left: 1px solid #DDD; border-left: 1px solid #DDD;
@include mixins.lightDark(border-color, #DDD, #333);
transform: rotate(45deg); transform: rotate(45deg);
left: 50%; left: 50%;
margin-left: -4px; margin-left: -4px;
@ -252,7 +263,7 @@ body.editor-is-fullscreen {
height: 100%; height: 100%;
} }
.editor-modal { .editor-modal {
background-color: #FFF; @include mixins.lightDark(background-color, #FFF, #222);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
@ -314,7 +325,8 @@ body.editor-is-fullscreen {
display: flex; display: flex;
} }
.editor-table-creator-cell { .editor-table-creator-cell {
border: 1px solid #DDD; border: 1px solid;
@include mixins.lightDark(border-color, #DDD, #000);
width: 15px; width: 15px;
height: 15px; height: 15px;
cursor: pointer; cursor: pointer;
@ -347,7 +359,7 @@ body.editor-is-fullscreen {
height: 10px; height: 10px;
border: 2px solid var(--editor-color-primary); border: 2px solid var(--editor-color-primary);
z-index: 3; z-index: 3;
background-color: #FFF; @include mixins.lightDark(background-color, #FFF, #000);
user-select: none; user-select: none;
&.nw { &.nw {
inset-inline-start: -5px; inset-inline-start: -5px;
@ -477,10 +489,11 @@ body.editor-is-fullscreen {
display: block; display: block;
width: 100%; width: 100%;
min-width: 250px; min-width: 250px;
border: 1px solid #DDD; border: 1px solid;
@include mixins.lightDark(border-color, #DDD, #000);
padding: .5rem; padding: .5rem;
border-radius: 4px; border-radius: 4px;
color: #444; @include mixins.lightDark(color, #444, #BBB);
} }
textarea.editor-form-field-input { textarea.editor-form-field-input {
font-family: var(--font-code); font-family: var(--font-code);
@ -557,7 +570,7 @@ textarea.editor-form-field-input {
.editor-form-tab-control { .editor-form-tab-control {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: #444; @include mixins.lightDark(color, #444, #666);
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -565,7 +578,7 @@ textarea.editor-form-field-input {
text-align: start; text-align: start;
&[aria-selected="true"] { &[aria-selected="true"] {
border-color: var(--editor-color-primary); border-color: var(--editor-color-primary);
color: var(--editor-color-primary); color: var(--editor-color-primary) !important;
} }
&[aria-selected="true"]:after, &:hover:after { &[aria-selected="true"]:after, &:hover:after {
background-color: var(--editor-color-primary); background-color: var(--editor-color-primary);