This is an automated email from the ASF dual-hosted git repository.
robin0716 pushed a commit to branch feat/embed
in repository https://gitbox.apache.org/repos/asf/incubator-answer-plugins.git
The following commit(s) were added to refs/heads/feat/embed by this push:
new 8394093 refactor: Use icons instead of svg
8394093 is described below
commit 83940930d480df621fcf625b3583307f3a1fa037
Author: robin <[email protected]>
AuthorDate: Thu May 30 16:06:00 2024 +0800
refactor: Use icons instead of svg
---
editor-chart/Chart.tsx | 64 ++++++++++++++++++-------------------
editor-chart/icon.svg | 4 ---
editor-formula/Formula.tsx | 78 +++++++++++++++++++++++-----------------------
editor-formula/icon.svg | 3 --
4 files changed, 71 insertions(+), 78 deletions(-)
diff --git a/editor-chart/Chart.tsx b/editor-chart/Chart.tsx
index f580210..be31df9 100644
--- a/editor-chart/Chart.tsx
+++ b/editor-chart/Chart.tsx
@@ -17,35 +17,34 @@
* under the License.
*/
-import { FC, useState } from 'react';
-import { Dropdown } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
+import { FC, useState } from 'react'
+import { Button, Dropdown } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
-import icon from './icon.svg';
-import { useRenderChart } from './hooks';
+import { useRenderChart } from './hooks'
interface ChartProps {
- editor;
- previewElement: HTMLElement;
+ editor
+ previewElement: HTMLElement
}
const Chart: FC<ChartProps> = ({ editor, previewElement }) => {
- useRenderChart(previewElement);
+ useRenderChart(previewElement)
const { t } = useTranslation('plugin', {
keyPrefix: 'chart',
- });
- const [isLocked, setLockState] = useState(false);
+ })
+ const [isLocked, setLockState] = useState(false)
const handleMouseEnter = () => {
if (isLocked) {
- return;
+ return
}
- setLockState(true);
- };
+ setLockState(true)
+ }
const handleMouseLeave = () => {
- setLockState(false);
- };
+ setLockState(false)
+ }
const headerList = [
{
label: t('flow_chart'),
@@ -135,42 +134,43 @@ const Chart: FC<ChartProps> = ({ editor, previewElement
}) => {
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
`,
},
- ];
+ ]
const handleChange = (tpl: string) => {
- const { ch } = editor.getCursor();
+ const { ch } = editor.getCursor()
- editor.replaceSelection(`${ch ? '\n' :
''}\`\`\`mermaid\n${tpl}\n\`\`\`\n`);
- };
+ editor.replaceSelection(`${ch ? '\n' : ''}\`\`\`mermaid\n${tpl}\n\`\`\`\n`)
+ }
return (
<div className="toolbar-item-wrap">
<Dropdown>
<Dropdown.Toggle
type="button"
- as="button"
- className="d-flex justify-content-center align-items-center p-0 b-0
btn-no-border btn btn-link">
- <img src={icon} alt="chart" />
+ as={Button}
+ variant="link"
+ className="p-0 b-0 btn-no-border toolbar text-body"
+ >
+ <i className="bi bi-diagram-3-fill"></i>
</Dropdown.Toggle>
- <Dropdown.Menu
- onMouseEnter={handleMouseEnter}
- onMouseLeave={handleMouseLeave}>
+ <Dropdown.Menu onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}>
{headerList.map((header) => {
return (
<Dropdown.Item
key={header.label}
onClick={(e) => {
- e.preventDefault();
- handleChange(header.tpl);
- }}>
+ e.preventDefault()
+ handleChange(header.tpl)
+ }}
+ >
{header.label}
</Dropdown.Item>
- );
+ )
})}
</Dropdown.Menu>
</Dropdown>
</div>
- );
-};
+ )
+}
-export default Chart;
+export default Chart
diff --git a/editor-chart/icon.svg b/editor-chart/icon.svg
deleted file mode 100644
index 7b226b0..0000000
--- a/editor-chart/icon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg";>
-<rect width="24" height="24" rx="3" fill="white" fill-opacity="0.01"/>
-<path d="M4.125 6.9375C4.125 6.22656 4.69922 5.625 5.4375 5.625H8.0625C8.77344
5.625 9.375 6.22656 9.375 6.9375V7.375H14.625V6.9375C14.625 6.22656 15.1992
5.625 15.9375 5.625H18.5625C19.2734 5.625 19.875 6.22656 19.875
6.9375V9.5625C19.875 10.3008 19.2734 10.875 18.5625 10.875H15.9375C15.1992
10.875 14.625 10.3008 14.625 9.5625V9.125H9.375V9.5625C9.375 9.61719 9.34766
9.67188 9.34766 9.69922L11.5625 12.625H14.1875C14.8984 12.625 15.5 13.2266 15.5
13.9375V16.5625C15.5 17.3008 14.8984 17.8 [...]
-</svg>
diff --git a/editor-formula/Formula.tsx b/editor-formula/Formula.tsx
index c5d949b..e8ac71c 100644
--- a/editor-formula/Formula.tsx
+++ b/editor-formula/Formula.tsx
@@ -17,37 +17,36 @@
* under the License.
*/
-import { FC, useState } from 'react';
-import { Dropdown } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
+import { FC, useState } from 'react'
+import { Button, Dropdown } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
-import 'katex/dist/katex.min.css';
+import 'katex/dist/katex.min.css'
-import icon from './icon.svg';
-import { useRenderFormula } from './hooks';
+import { useRenderFormula } from './hooks'
interface FormulaProps {
- editor;
- previewElement: HTMLElement;
+ editor
+ previewElement: HTMLElement
}
const Formula: FC<FormulaProps> = ({ editor, previewElement }) => {
- useRenderFormula(previewElement);
+ useRenderFormula(previewElement)
const { t } = useTranslation('plugin', {
keyPrefix: 'formula',
- });
- const [isLocked, setLockState] = useState(false);
+ })
+ const [isLocked, setLockState] = useState(false)
const handleMouseEnter = () => {
if (isLocked) {
- return;
+ return
}
- setLockState(true);
- };
+ setLockState(true)
+ }
const handleMouseLeave = () => {
- setLockState(false);
- };
+ setLockState(false)
+ }
const formulaList = [
{
type: 'line',
@@ -57,55 +56,56 @@ const Formula: FC<FormulaProps> = ({ editor, previewElement
}) => {
type: 'block',
label: t('options.block'),
},
- ];
+ ]
const handleClick = (type: string, label: string) => {
if (!editor) {
- return;
+ return
}
- const { wrapText } = editor;
+ const { wrapText } = editor
if (type === 'line') {
- wrapText('\\\\( ', ' \\\\)', label);
+ wrapText('\\\\( ', ' \\\\)', label)
} else {
- const cursor = editor.getCursor();
+ const cursor = editor.getCursor()
- wrapText('\n$$\n', '\n$$\n', label);
+ wrapText('\n$$\n', '\n$$\n', label)
editor.setSelection(
{ line: cursor.line + 2, ch: 0 },
- { line: cursor.line + 2, ch: label.length },
- );
+ { line: cursor.line + 2, ch: label.length }
+ )
}
- editor?.focus();
- };
+ editor?.focus()
+ }
return (
<div className="toolbar-item-wrap">
<Dropdown>
<Dropdown.Toggle
type="button"
- as="button"
- className="d-flex justify-content-center align-items-center p-0 b-0
btn-no-border btn btn-link">
- <img src={icon} alt="formula" />
+ as={Button}
+ variant="link"
+ className="p-0 b-0 btn-no-border toolbar text-body"
+ >
+ <i className="bi bi-123" />
</Dropdown.Toggle>
- <Dropdown.Menu
- onMouseEnter={handleMouseEnter}
- onMouseLeave={handleMouseLeave}>
+ <Dropdown.Menu onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}>
{formulaList.map((formula) => {
return (
<Dropdown.Item
key={formula.label}
onClick={(e) => {
- e.preventDefault();
- handleClick(formula.type, formula.label);
- }}>
+ e.preventDefault()
+ handleClick(formula.type, formula.label)
+ }}
+ >
{formula.label}
</Dropdown.Item>
- );
+ )
})}
</Dropdown.Menu>
</Dropdown>
</div>
- );
-};
+ )
+}
-export default Formula;
+export default Formula
diff --git a/editor-formula/icon.svg b/editor-formula/icon.svg
deleted file mode 100644
index 06e2ad9..0000000
--- a/editor-formula/icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg";>
-<path d="M3.59125 14.1212V5.17749H2.12375L0 6.72374V8.14499L2.05
6.66999H2.125V14.1212H3.5925H3.59125ZM7.6075 7.75874V7.67999C7.6075 6.90749
8.1575 6.21874 9.1025 6.21874C9.9475 6.21874 10.57 6.76874 10.57 7.60124C10.57
8.38124 10.045 8.97749 9.56125 9.50874L6.2375
13.1912V14.1212H12.2125V12.8837H8.30375V12.7975L10.5125 10.315C11.325 9.40999
12.0588 8.64999 12.0588 7.47749C12.0575 6.06124 10.9038 4.99999 9.135
4.99999C7.16875 4.99999 6.185 6.32999 6.185 7.68749V7.75874H7.6075ZM15.8063 10
[...]
-</svg>
