Adjust text editor highlight css (#3775)

* Remove .ProseMirror global css

Signed-off-by: Anna No <anna.no@xored.com>

* Remove .ProseMirror global css

Signed-off-by: Anna No <anna.no@xored.com>

* Remove .ProseMirror global css

Signed-off-by: Anna No <anna.no@xored.com>

* remove unused css classes

Signed-off-by: Anna No <anna.no@xored.com>

* remove unused css classes

Signed-off-by: Anna No <anna.no@xored.com>

* adjust text editor highlight css

Signed-off-by: Anna No <anna.no@xored.com>

---------

Signed-off-by: Anna No <anna.no@xored.com>
This commit is contained in:
Anna No 2023-10-03 14:53:51 +07:00 committed by GitHub
parent 28b99d2525
commit 6e3a596055
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 15 deletions

View File

@ -3,9 +3,9 @@ import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
import { NodeUuidExtension, NodeUuidOptions } from './nodeUuid'
export enum NodeHighlightType {
WARNING = 'warning',
SUCCESS = 'success',
ERROR = 'error'
INFO = 'info',
ADD = 'add',
DELETE = 'delete'
}
export interface NodeHighlightExtensionOptions extends NodeUuidOptions {
getNodeHighlightType: (uuid: string) => NodeHighlightType | undefined | null
@ -77,12 +77,12 @@ export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions> =
if (options.isHighlightModeOn()) {
const type = options.getNodeHighlightType(uuid)
if (type === NodeHighlightType.ERROR) {
classAttrs.class = 'text-editor-highlighted-node-error'
} else if (type === NodeHighlightType.WARNING) {
classAttrs.class = 'text-editor-highlighted-node-warning'
} else if (type === NodeHighlightType.SUCCESS) {
classAttrs.class = 'text-editor-highlighted-node-success'
if (type === NodeHighlightType.INFO) {
classAttrs.class = 'text-editor-highlighted-node-info'
} else if (type === NodeHighlightType.ADD) {
classAttrs.class = 'text-editor-highlighted-node-add'
} else if (type === NodeHighlightType.DELETE) {
classAttrs.class = 'text-editor-highlighted-node-delete'
}
}

View File

@ -72,6 +72,16 @@
--highlight-red: #F96E50;
--highlight-red-hover: #ff967e;
--highlight-red-press: #f96f50bd;
--text-editor-highlighted-node-info-background-color: #F2D7AE;
--text-editor-highlighted-node-info-border-color: #DE9B35;
--text-editor-highlighted-node-add-background-color: #DAEDDC;
--text-editor-highlighted-node-add-font-color: #1C4220;
--text-editor-highlighted-node-delete-background-color: #F6DCDA;
--text-editor-highlighted-node-delete-font-color: #54201C;
}
/* Dark Theme */

View File

@ -108,16 +108,20 @@
object-fit: contain;
}
.text-editor-highlighted-node-warning {
background-color: var(--theme-warning-color);
.text-editor-highlighted-node-info {
background-color: var(--text-editor-highlighted-node-info-background-color);
border-bottom: 0.0625rem solid var(--text-editor-highlighted-node-info-border-color);
}
.text-editor-highlighted-node-error {
background-color: var(--theme-error-color);
.text-editor-highlighted-node-delete {
background-color: var(--text-editor-highlighted-node-delete-background-color);
color: var(--text-editor-highlighted-node-delete-font-color);
text-decoration: line-through;
}
.text-editor-highlighted-node-success {
background-color: var(--theme-won-color);
.text-editor-highlighted-node-add {
background-color: var(--text-editor-highlighted-node-add-background-color);
color: var(--text-editor-highlighted-node-add-font-color)
}
.text-editor-popup {