From 6e3a5960552f48f707ed50a2b95c244c63c3249e Mon Sep 17 00:00:00 2001 From: Anna No Date: Tue, 3 Oct 2023 14:53:51 +0700 Subject: [PATCH] Adjust text editor highlight css (#3775) * Remove .ProseMirror global css Signed-off-by: Anna No * Remove .ProseMirror global css Signed-off-by: Anna No * Remove .ProseMirror global css Signed-off-by: Anna No * remove unused css classes Signed-off-by: Anna No * remove unused css classes Signed-off-by: Anna No * adjust text editor highlight css Signed-off-by: Anna No --------- Signed-off-by: Anna No --- .../src/components/extension/nodeHighlight.ts | 18 +++++++++--------- packages/theme/styles/_colors.scss | 10 ++++++++++ packages/theme/styles/_text-editor.scss | 16 ++++++++++------ 3 files changed, 29 insertions(+), 15 deletions(-) diff --git a/packages/text-editor/src/components/extension/nodeHighlight.ts b/packages/text-editor/src/components/extension/nodeHighlight.ts index 5b4e14542a..bbca722b26 100644 --- a/packages/text-editor/src/components/extension/nodeHighlight.ts +++ b/packages/text-editor/src/components/extension/nodeHighlight.ts @@ -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 = 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' } } diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index 429d9df181..299a1aece0 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -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 */ diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss index 66ada28ed6..6da29a594d 100644 --- a/packages/theme/styles/_text-editor.scss +++ b/packages/theme/styles/_text-editor.scss @@ -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 {