This is an automated email from the ASF dual-hosted git repository. linkinstar pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/incubator-answer-plugins.git
commit df61990bbaefd151f16026a9e0e9a06287753167 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>
