This is an automated email from the ASF dual-hosted git repository.
robin0716 pushed a commit to branch feat/1.3.5/embed
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
The following commit(s) were added to refs/heads/feat/1.3.5/embed by this push:
new 4108d2fa refactor(editor): update toolbar icons for consistency
4108d2fa is described below
commit 4108d2fa985f400cc3a3d019d4f0b77d2632a21a
Author: robin <[email protected]>
AuthorDate: Wed May 29 15:35:18 2024 +0800
refactor(editor): update toolbar icons for consistency
---
ui/src/components/Editor/ToolBars/blockquote.tsx | 2 +-
ui/src/components/Editor/ToolBars/bold.tsx | 2 +-
ui/src/components/Editor/ToolBars/code.tsx | 2 +-
ui/src/components/Editor/ToolBars/heading.tsx | 2 +-
ui/src/components/Editor/ToolBars/help.tsx | 2 +-
ui/src/components/Editor/ToolBars/image.tsx | 2 +-
ui/src/components/Editor/ToolBars/indent.tsx | 2 +-
ui/src/components/Editor/ToolBars/italic.tsx | 2 +-
ui/src/components/Editor/ToolBars/link.tsx | 2 +-
ui/src/components/Editor/ToolBars/ol.tsx | 2 +-
ui/src/components/Editor/ToolBars/outdent.tsx | 2 +-
ui/src/components/Editor/ToolBars/ul.tsx | 2 +-
ui/src/components/Editor/index.scss | 6 ++--
ui/src/components/Editor/toolItem.tsx | 9 +++---
ui/src/components/Editor/utils/index.ts | 41 ++++++++++++------------
15 files changed, 40 insertions(+), 40 deletions(-)
diff --git a/ui/src/components/Editor/ToolBars/blockquote.tsx
b/ui/src/components/Editor/ToolBars/blockquote.tsx
index 68d73cfc..fac2fc5a 100644
--- a/ui/src/components/Editor/ToolBars/blockquote.tsx
+++ b/ui/src/components/Editor/ToolBars/blockquote.tsx
@@ -28,7 +28,7 @@ const BlockQuote = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'blockquote',
+ label: 'quote',
keyMap: ['Ctrl-q'],
tip: `${t('blockquote.text')} (Ctrl+Q)`,
};
diff --git a/ui/src/components/Editor/ToolBars/bold.tsx
b/ui/src/components/Editor/ToolBars/bold.tsx
index 480872ae..8efe69c5 100644
--- a/ui/src/components/Editor/ToolBars/bold.tsx
+++ b/ui/src/components/Editor/ToolBars/bold.tsx
@@ -27,7 +27,7 @@ let context: IEditorContext;
const Bold = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'bold',
+ label: 'type-bold',
keyMap: ['Ctrl-b'],
tip: `${t('bold.text')} (Ctrl+b)`,
};
diff --git a/ui/src/components/Editor/ToolBars/code.tsx
b/ui/src/components/Editor/ToolBars/code.tsx
index df52d163..afbd7dde 100644
--- a/ui/src/components/Editor/ToolBars/code.tsx
+++ b/ui/src/components/Editor/ToolBars/code.tsx
@@ -155,7 +155,7 @@ const Code = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'code',
+ label: 'code-slash',
keyMap: ['Ctrl-k'],
tip: `${t('code.text')} (Ctrl+k)`,
};
diff --git a/ui/src/components/Editor/ToolBars/heading.tsx
b/ui/src/components/Editor/ToolBars/heading.tsx
index 5c22b606..123b5579 100644
--- a/ui/src/components/Editor/ToolBars/heading.tsx
+++ b/ui/src/components/Editor/ToolBars/heading.tsx
@@ -60,7 +60,7 @@ const Heading = () => {
},
];
const item = {
- label: 'heading',
+ label: 'type',
keyMap: ['Ctrl-h'],
tip: `${t('heading.text')} (Ctrl+h)`,
};
diff --git a/ui/src/components/Editor/ToolBars/help.tsx
b/ui/src/components/Editor/ToolBars/help.tsx
index e77c06b6..55d9a4c7 100644
--- a/ui/src/components/Editor/ToolBars/help.tsx
+++ b/ui/src/components/Editor/ToolBars/help.tsx
@@ -26,7 +26,7 @@ const Help = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'help',
+ label: 'question-circle-fill',
tip: t('help.text'),
};
const handleClick = () => {
diff --git a/ui/src/components/Editor/ToolBars/image.tsx
b/ui/src/components/Editor/ToolBars/image.tsx
index 60099193..68dd03cf 100644
--- a/ui/src/components/Editor/ToolBars/image.tsx
+++ b/ui/src/components/Editor/ToolBars/image.tsx
@@ -36,7 +36,7 @@ const Image = ({ editorInstance }) => {
const loadingText = `![${t('image.uploading')}...]()`;
const item = {
- label: 'image',
+ label: 'image-fill',
keyMap: ['Ctrl-g'],
tip: `${t('image.text')} (Ctrl+G)`,
};
diff --git a/ui/src/components/Editor/ToolBars/indent.tsx
b/ui/src/components/Editor/ToolBars/indent.tsx
index 124b2126..6ec01dce 100644
--- a/ui/src/components/Editor/ToolBars/indent.tsx
+++ b/ui/src/components/Editor/ToolBars/indent.tsx
@@ -27,7 +27,7 @@ let context: IEditorContext;
const Indent = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'indent',
+ label: 'text-indent-left',
tip: t('indent.text'),
};
const handleClick = (ctx) => {
diff --git a/ui/src/components/Editor/ToolBars/italic.tsx
b/ui/src/components/Editor/ToolBars/italic.tsx
index f9b0e955..cb585893 100644
--- a/ui/src/components/Editor/ToolBars/italic.tsx
+++ b/ui/src/components/Editor/ToolBars/italic.tsx
@@ -27,7 +27,7 @@ let context: IEditorContext;
const Italic = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'italic',
+ label: 'type-italic',
keyMap: ['Ctrl-i'],
tip: `${t('italic.text')} (Ctrl+i)`,
};
diff --git a/ui/src/components/Editor/ToolBars/link.tsx
b/ui/src/components/Editor/ToolBars/link.tsx
index f5b7c216..e761ef3d 100644
--- a/ui/src/components/Editor/ToolBars/link.tsx
+++ b/ui/src/components/Editor/ToolBars/link.tsx
@@ -28,7 +28,7 @@ let context: IEditorContext;
const Link = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'link',
+ label: 'link-45deg',
keyMap: ['Ctrl-l'],
tip: `${t('link.text')} (Ctrl+l)`,
};
diff --git a/ui/src/components/Editor/ToolBars/ol.tsx
b/ui/src/components/Editor/ToolBars/ol.tsx
index 76179cf6..011c35a3 100644
--- a/ui/src/components/Editor/ToolBars/ol.tsx
+++ b/ui/src/components/Editor/ToolBars/ol.tsx
@@ -27,7 +27,7 @@ let context: IEditorContext;
const OL = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'orderedList',
+ label: 'list-ol',
keyMap: ['Ctrl-o'],
tip: `${t('ordered_list.text')} (Ctrl+o)`,
};
diff --git a/ui/src/components/Editor/ToolBars/outdent.tsx
b/ui/src/components/Editor/ToolBars/outdent.tsx
index 8e5f6289..b8067037 100644
--- a/ui/src/components/Editor/ToolBars/outdent.tsx
+++ b/ui/src/components/Editor/ToolBars/outdent.tsx
@@ -27,7 +27,7 @@ let context: IEditorContext;
const Outdent = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'outdent',
+ label: 'text-indent-right',
keyMap: ['Shift-Tab'],
tip: t('outdent.text'),
};
diff --git a/ui/src/components/Editor/ToolBars/ul.tsx
b/ui/src/components/Editor/ToolBars/ul.tsx
index c0c5df52..b906a346 100644
--- a/ui/src/components/Editor/ToolBars/ul.tsx
+++ b/ui/src/components/Editor/ToolBars/ul.tsx
@@ -27,7 +27,7 @@ let context: IEditorContext;
const UL = () => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const item = {
- label: 'unorderedList',
+ label: 'list-ul',
keyMap: ['Ctrl-u'],
tip: `${t('unordered_list.text')} (Ctrl+u)`,
};
diff --git a/ui/src/components/Editor/index.scss
b/ui/src/components/Editor/index.scss
index 67b5f454..6cdc4b8c 100644
--- a/ui/src/components/Editor/index.scss
+++ b/ui/src/components/Editor/index.scss
@@ -60,11 +60,9 @@
background-color: var(--bs-body-bg);
height: 100%;
width: 100%;
- border-radius: 0;
- background-image: url('~@/assets/images/icon-editor-toolbar.png');
- background-size: 576px 72px;
border-radius: 3px;
-
+ font-size: 20px;
+ line-height: 20px;
&:hover {
background-color: var(--an-editor-toolbar-hover);
}
diff --git a/ui/src/components/Editor/toolItem.tsx
b/ui/src/components/Editor/toolItem.tsx
index 609e860c..0c4ca2f1 100644
--- a/ui/src/components/Editor/toolItem.tsx
+++ b/ui/src/components/Editor/toolItem.tsx
@@ -87,9 +87,9 @@ const ToolItem: FC<IProps> = (props) => {
<Button
variant="link"
title={tip}
- className={`p-0 b-0 btn-no-border toolbar icon-${label} ${
+ className={`p-0 b-0 btn-no-border toolbar text-body ${
disable ? 'disabled' : ''
- } `}
+ }`}
disabled={disable}
tabIndex={-1}
onClick={(e) => {
@@ -109,8 +109,9 @@ const ToolItem: FC<IProps> = (props) => {
replaceLines: editor?.replaceLines,
appendBlock: editor?.appendBlock,
});
- }}
- />
+ }}>
+ <i className={`bi bi-${label}`} />
+ </Button>
);
if (!editor) {
diff --git a/ui/src/components/Editor/utils/index.ts
b/ui/src/components/Editor/utils/index.ts
index d380620b..25a56a79 100644
--- a/ui/src/components/Editor/utils/index.ts
+++ b/ui/src/components/Editor/utils/index.ts
@@ -80,26 +80,23 @@ export const useEditor = ({
const [editor, setEditor] = useState<Editor | null>(null);
const [value, setValue] = useState<string>('');
const init = async () => {
- const theme = EditorView.theme(
- {
- '&': {
- height: '100%',
- },
- '&.cm-focused': {
- outline: 'none',
- },
- '.cm-content': {
- width: '100%',
- padding: '1rem',
- },
- '.cm-line': {
- whiteSpace: 'pre-wrap',
- wordWrap: 'break-word',
- wordBreak: 'break-all',
- },
+ const theme = EditorView.theme({
+ '&': {
+ height: '100%',
},
- { dark: false },
- );
+ '&.cm-focused': {
+ outline: 'none',
+ },
+ '.cm-content': {
+ width: '100%',
+ padding: '1rem',
+ },
+ '.cm-line': {
+ whiteSpace: 'pre-wrap',
+ wordWrap: 'break-word',
+ wordBreak: 'break-all',
+ },
+ });
const startState = EditorState.create({
extensions: [
@@ -150,9 +147,13 @@ export const useEditor = ({
}, [value]);
useEffect(() => {
- if (!(editorRef.current instanceof HTMLElement) || editor) {
+ if (!editorRef.current) {
return;
}
+ if (editorRef.current.children.length > 0 || editor) {
+ return;
+ }
+
init();
}, [editor]);
return editor;
