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
commit 19f2d00c93a3aefc896d1eb26c064cb63b3c5efa Author: robin <[email protected]> AuthorDate: Wed Jun 5 18:21:40 2024 +0800 refactor: Update .prettierrc.json files for embed-basic and editor-formula packages --- editor-formula/.prettierrc.json | 8 +++++ editor-formula/Formula.tsx | 72 ++++++++++++++++++++--------------------- embed-basic/.prettierrc.json | 8 +++++ embed-basic/Component.tsx | 56 ++++++++++++++++---------------- embed-basic/modal.tsx | 62 ++++++++++++++++++----------------- 5 files changed, 114 insertions(+), 92 deletions(-) diff --git a/editor-formula/.prettierrc.json b/editor-formula/.prettierrc.json new file mode 100644 index 0000000..c707926 --- /dev/null +++ b/editor-formula/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "trailingComma": "all", + "tabWidth": 2, + "singleQuote": true, + "jsxBracketSameLine": true, + "printWidth": 80, + "endOfLine": "auto" +} diff --git a/editor-formula/Formula.tsx b/editor-formula/Formula.tsx index 188ff10..459a945 100644 --- a/editor-formula/Formula.tsx +++ b/editor-formula/Formula.tsx @@ -17,36 +17,36 @@ * under the License. */ -import { FC, useState } from 'react' -import { Button, 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 { 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_editor.frontend', - }) - 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', @@ -56,27 +56,27 @@ 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> @@ -85,28 +85,28 @@ const Formula: FC<FormulaProps> = ({ editor, previewElement }) => { as={Button} variant="link" title={t('title')} - className="p-0 b-0 btn-no-border toolbar text-body" - > + 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/embed-basic/.prettierrc.json b/embed-basic/.prettierrc.json new file mode 100644 index 0000000..c707926 --- /dev/null +++ b/embed-basic/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "trailingComma": "all", + "tabWidth": 2, + "singleQuote": true, + "jsxBracketSameLine": true, + "printWidth": 80, + "endOfLine": "auto" +} diff --git a/embed-basic/Component.tsx b/embed-basic/Component.tsx index 4d920b7..7b69bf6 100644 --- a/embed-basic/Component.tsx +++ b/embed-basic/Component.tsx @@ -17,55 +17,57 @@ * under the License. */ -import { useState, useEffect } from 'react' -import { Button } from 'react-bootstrap' -import { useTranslation } from 'react-i18next' +import { useState, useEffect } from 'react'; +import { Button } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; -import EmbedModal from './modal' -import { useRenderEmbed } from './hooks' +import EmbedModal from './modal'; +import { useRenderEmbed } from './hooks'; const Component = ({ editor, previewElement }) => { - const [show, setShowState] = useState(false) + const [show, setShowState] = useState(false); const { t } = useTranslation('plugin', { keyPrefix: 'basic_embed.frontend', - }) - useRenderEmbed(previewElement) - + }); + useRenderEmbed(previewElement); useEffect(() => { - if (!editor) return + if (!editor) return; editor.addKeyMap({ 'Ctrl-m': handleShow, - }) - }, [editor]) + }); + }, [editor]); const handleShow = () => { - setShowState(true) - } + setShowState(true); + }; const handleConfirm = ({ title, url }) => { - setShowState(false) - const cursor = editor.getCursor() + setShowState(false); + const cursor = editor.getCursor(); if (cursor.ch !== 0) { - editor.replaceSelection('\n') + editor.replaceSelection('\n'); } - const embed = `\n[${title}](${url} "@embed")\n` - editor.replaceSelection(embed) - editor.focus() - } + const embed = `\n[${title}](${url} "@embed")\n`; + editor.replaceSelection(embed); + editor.focus(); + }; return ( <div className="toolbar-item-wrap"> <Button variant="link" className="p-0 b-0 btn-no-border toolbar text-body" onClick={handleShow} - title={`${t('label')} (Ctrl+m)`} - > + title={`${t('label')} (Ctrl+m)`}> <i className="bi bi-window" /> </Button> - <EmbedModal show={show} setShowState={setShowState} onConfirm={handleConfirm} /> + <EmbedModal + show={show} + setShowState={setShowState} + onConfirm={handleConfirm} + /> </div> - ) -} + ); +}; -export default Component +export default Component; diff --git a/embed-basic/modal.tsx b/embed-basic/modal.tsx index 5322808..4008e52 100644 --- a/embed-basic/modal.tsx +++ b/embed-basic/modal.tsx @@ -17,44 +17,44 @@ * under the License. */ -import { useState } from 'react' -import { Modal, Button, Form } from 'react-bootstrap' -import { useTranslation } from 'react-i18next' +import { useState } from 'react'; +import { Modal, Button, Form } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; const EmbedModal = ({ show, setShowState, onConfirm }) => { const [title, setTitle] = useState({ value: '', isInvalid: false, errorMsg: '', - }) + }); const [url, setUrl] = useState({ value: '', isInvalid: false, errorMsg: '', - }) + }); const { t } = useTranslation('plugin', { keyPrefix: 'basic_embed.frontend', - }) + }); const handleHide = () => { - setShowState(false) - } + setShowState(false); + }; const handleChangeTitle = (e) => { setTitle({ value: e.target.value, isInvalid: false, errorMsg: '', - }) - } + }); + }; const handleChangeUrl = (e) => { setUrl({ value: e.target.value, isInvalid: false, errorMsg: '', - }) - } + }); + }; const handleSubmit = () => { if (!title.value) { @@ -62,45 +62,45 @@ const EmbedModal = ({ show, setShowState, onConfirm }) => { ...title, isInvalid: true, errorMsg: t('required_title'), - }) - return + }); + return; } if (!url.value) { setUrl({ ...url, isInvalid: true, errorMsg: t('required_url'), - }) - return + }); + return; } const urlRegex = - /^[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/ + /^[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/; if (!urlRegex.test(url.value)) { setUrl({ ...url, isInvalid: true, errorMsg: t('invalid_url'), - }) - return + }); + return; } onConfirm({ title: title.value, url: url.value, - }) - setShowState(false) + }); + setShowState(false); setTitle({ value: '', isInvalid: false, errorMsg: '', - }) + }); setUrl({ value: '', isInvalid: false, errorMsg: '', - }) - } + }); + }; return ( <Modal show={show} onHide={handleHide}> <Modal.Header closeButton> @@ -116,7 +116,9 @@ const EmbedModal = ({ show, setShowState, onConfirm }) => { isInvalid={title.isInvalid} onChange={handleChangeTitle} /> - <Form.Control.Feedback type="invalid">{title.errorMsg}</Form.Control.Feedback> + <Form.Control.Feedback type="invalid"> + {title.errorMsg} + </Form.Control.Feedback> </Form.Group> <Form.Group className="mb-3" controlId="editor.plugin.embed.url"> <Form.Label>{t('url')}</Form.Label> @@ -126,7 +128,9 @@ const EmbedModal = ({ show, setShowState, onConfirm }) => { isInvalid={url.isInvalid} onChange={handleChangeUrl} /> - <Form.Control.Feedback type="invalid">{url.errorMsg}</Form.Control.Feedback> + <Form.Control.Feedback type="invalid"> + {url.errorMsg} + </Form.Control.Feedback> </Form.Group> </Form> </Modal.Body> @@ -139,7 +143,7 @@ const EmbedModal = ({ show, setShowState, onConfirm }) => { </Button> </Modal.Footer> </Modal> - ) -} + ); +}; -export default EmbedModal +export default EmbedModal;
