init
This commit is contained in:
commit
4203a8ca37
29
.gitignore
vendored
Normal file
29
.gitignore
vendored
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.env.*
|
||||||
|
test
|
||||||
|
*test*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
stats.html
|
||||||
27
README.md
Normal file
27
README.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||||
|
|
||||||
|
- Configure the top-level `parserOptions` property like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
sourceType: 'module',
|
||||||
|
project: ['./tsconfig.json', './tsconfig.node.json'],
|
||||||
|
tsconfigRootDir: __dirname,
|
||||||
|
},
|
||||||
|
```
|
||||||
|
|
||||||
|
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
|
||||||
|
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
|
||||||
|
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
40
package.json
Normal file
40
package.json
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"name": "quill-test",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --host",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^5.2.6",
|
||||||
|
"@react-three/drei": "^9.92.5",
|
||||||
|
"@readyplayerme/visage": "^4.12.4",
|
||||||
|
"@tiptap/pm": "^2.1.13",
|
||||||
|
"@tiptap/react": "^2.1.13",
|
||||||
|
"@tiptap/starter-kit": "^2.1.13",
|
||||||
|
"antd": "^5.12.4",
|
||||||
|
"re-resizable": "^6.9.11",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-quill": "^2.0.0",
|
||||||
|
"three": "^0.159.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.15",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@types/three": "^0.159.0",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||||
|
"@typescript-eslint/parser": "^6.0.0",
|
||||||
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
|
"eslint": "^8.45.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
|
"less": "^4.2.0",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"vite": "^4.4.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/baifenhao_no_anim.glb
Normal file
BIN
public/baifenhao_no_anim.glb
Normal file
Binary file not shown.
BIN
public/cloud.glb
Normal file
BIN
public/cloud.glb
Normal file
Binary file not shown.
BIN
public/gift.glb
Normal file
BIN
public/gift.glb
Normal file
Binary file not shown.
BIN
public/jinzita.glb
Normal file
BIN
public/jinzita.glb
Normal file
Binary file not shown.
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
137
src/App.css
Normal file
137
src/App.css
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
#root {
|
||||||
|
/* width: 1440px;
|
||||||
|
max-width: 90%; */
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-toolbar.ql-snow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container {
|
||||||
|
position: relative;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
.ql-container.ql-snow{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mouse-pos {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 999;
|
||||||
|
pointer-events: none;
|
||||||
|
background-color: #feb03b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container .hilight {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 999;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container .hilight-item {
|
||||||
|
position: absolute;
|
||||||
|
--selected-background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container .hilight-item-selected {
|
||||||
|
--selected-background: rgba(254, 176, 59, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container .hilight-item:before {
|
||||||
|
content: "" !important;
|
||||||
|
position: absolute !important;
|
||||||
|
width: 100% !important;
|
||||||
|
left: 0 !important;
|
||||||
|
height: 100% !important;
|
||||||
|
top: 0 !important;
|
||||||
|
background: var(--selected-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container .hilight-item:after {
|
||||||
|
visibility: visible !important;
|
||||||
|
bottom: -2px !important;
|
||||||
|
height: 2px !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
content: "" !important;
|
||||||
|
position: absolute !important;
|
||||||
|
width: 100%;
|
||||||
|
left: 0 !important;
|
||||||
|
background: #feb03b;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-wrapper {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff;
|
||||||
|
padding: 15px 20px;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar{
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
word-break: break-all;
|
||||||
|
font-family: inherit;
|
||||||
|
word-wrap: normal;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.editor-resize-demo{
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
|
||||||
|
width: 1000px;
|
||||||
|
max-width: 90%;
|
||||||
|
margin: 0px auto;
|
||||||
|
}
|
||||||
|
.editor-container{
|
||||||
|
flex: 1;
|
||||||
|
/* padding: 20px 0;
|
||||||
|
background-color: #6ff; */
|
||||||
|
}
|
||||||
|
.editor-container .inner {
|
||||||
|
width: 1000px;
|
||||||
|
max-width: 90%;
|
||||||
|
margin: 0px auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.editor-resize-demo .panel {
|
||||||
|
background: #f00;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
13
src/App.tsx
Normal file
13
src/App.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from "react";
|
||||||
|
import Editor from "./views/editor";
|
||||||
|
import './App.css'
|
||||||
|
import './quill.less'
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
|
||||||
|
return <div>
|
||||||
|
<Editor />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
30
src/component/editor/delete.ts
Normal file
30
src/component/editor/delete.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
|
||||||
|
import ReactQuill from "react-quill";
|
||||||
|
import { TProofreadItem } from "../../views/types";
|
||||||
|
const Inline = ReactQuill.Quill.import('blots/inline');
|
||||||
|
|
||||||
|
class DeleteParserBlot extends Inline {
|
||||||
|
static tagName = "del";
|
||||||
|
static className = "proodfread-delete-item";
|
||||||
|
static blotName = "delete";
|
||||||
|
|
||||||
|
static create(data: TProofreadItem) {
|
||||||
|
// if(!data.correctedContent){
|
||||||
|
// return super.create(data)
|
||||||
|
// }
|
||||||
|
const node = super.create() as HTMLElement;
|
||||||
|
|
||||||
|
node.setAttribute('data-proofread-id', String(data.id))
|
||||||
|
node.classList.add(`proofread-item-${data.id}`)
|
||||||
|
node.classList.add(`proofread-item`)
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
static formats(node: HTMLElement) {
|
||||||
|
console.log(node.innerText,node.getAttribute('data-proofread-id'),'<--',node.className)
|
||||||
|
return {
|
||||||
|
id: node.getAttribute("data-proofread-id"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactQuill.Quill.register(DeleteParserBlot, true);
|
||||||
23
src/component/editor/insert.ts
Normal file
23
src/component/editor/insert.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import ReactQuill from "react-quill";
|
||||||
|
const Inline = ReactQuill.Quill.import('blots/inline');
|
||||||
|
|
||||||
|
class InsertParserBlot extends Inline {
|
||||||
|
static tagName = "span";
|
||||||
|
static className = "proodfread-insert-item";
|
||||||
|
static blotName = "insert";
|
||||||
|
static create(data: {origin:string;text:string;}) {
|
||||||
|
const node = super.create() as HTMLElement;
|
||||||
|
node.setAttribute('data-origin',data.origin)
|
||||||
|
node.setAttribute('data-text',data.text)
|
||||||
|
node.innerHTML = ''
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
static formats(node: HTMLElement){
|
||||||
|
return {
|
||||||
|
origin: node.getAttribute("data-origin"),
|
||||||
|
text: node.getAttribute("data-text"),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactQuill.Quill.register(InsertParserBlot, true);
|
||||||
40
src/component/editor/replace.ts
Normal file
40
src/component/editor/replace.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import ReactQuill from "react-quill";
|
||||||
|
import { TProofreadItem } from "../../views/types";
|
||||||
|
const Inline = ReactQuill.Quill.import('blots/inline');
|
||||||
|
|
||||||
|
class ReplaceParserBlot extends Inline {
|
||||||
|
static tagName = "span";
|
||||||
|
static className = "proofread-item";
|
||||||
|
static blotName = "replace";
|
||||||
|
// static create(data: {origin:string;text:string;}) {
|
||||||
|
// const node = super.create() as HTMLElement;
|
||||||
|
// node.setAttribute('data-origin',data.origin)
|
||||||
|
// node.setAttribute('data-text',data.text)
|
||||||
|
// return node;
|
||||||
|
// }
|
||||||
|
// static formats(node: HTMLElement){
|
||||||
|
// return {
|
||||||
|
// origin: node.getAttribute("data-origin"),
|
||||||
|
// text: node.getAttribute("data-text"),
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
static create(data: TProofreadItem) {
|
||||||
|
// if(!data.correctedContent){
|
||||||
|
// return super.create(data)
|
||||||
|
// }
|
||||||
|
const node = super.create() as HTMLElement;
|
||||||
|
|
||||||
|
node.setAttribute('data-proofread-id', String(data.id))
|
||||||
|
node.classList.add(`proofread-item-${data.id}`)
|
||||||
|
node.classList.add(`proofread-${data.action || ''}-item`)
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
static formats(node: HTMLElement) {
|
||||||
|
// console.log(node.innerText, node.getAttribute('data-proofread-id'), '<--', node.className)
|
||||||
|
return {
|
||||||
|
id: Number(node.getAttribute("data-proofread-id")),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactQuill.Quill.register(ReplaceParserBlot, true);
|
||||||
43
src/index.css
Normal file
43
src/index.css
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* button {
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.4em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #747bffe4;
|
||||||
|
color:#fff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button + button{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
background-color: #646cff;
|
||||||
|
} */
|
||||||
14
src/main.tsx
Normal file
14
src/main.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import './component/editor/replace.ts'
|
||||||
|
import './component/editor/insert.ts'
|
||||||
|
import './component/editor/delete.ts'
|
||||||
|
|
||||||
|
import App from './App.tsx'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
183
src/mock.ts
Normal file
183
src/mock.ts
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
const resultList = {
|
||||||
|
"code": 0,
|
||||||
|
"msg": "",
|
||||||
|
"data": {
|
||||||
|
"countResp": {
|
||||||
|
"blackWord": 0,
|
||||||
|
"characterError": 7,
|
||||||
|
"wordError": 0,
|
||||||
|
"numberError": 0,
|
||||||
|
"unitsError": 0,
|
||||||
|
"punctuationError": 0,
|
||||||
|
"grammarError": 0,
|
||||||
|
"knowledgeableError": 0,
|
||||||
|
"tendentiousError": 0,
|
||||||
|
"inconsistentError": 0,
|
||||||
|
"formatError": 0,
|
||||||
|
"total": 7,
|
||||||
|
"untreated": 7
|
||||||
|
},
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"id": 3333,
|
||||||
|
"uid": 8,
|
||||||
|
"fid": 224,
|
||||||
|
"key": "0632d957fbe9c61a1fcfe564b7063930",
|
||||||
|
"text": "威望的增加、权利的扩张丝毫没有改变他原有的样样子，他迈步走进岳楼，回忆起在湖北省张家界市的一段往事。",
|
||||||
|
"newText": "威望的增加、权力的扩张丝毫没有改变他原有的样子，他迈步走进岳楼，回忆起在湖南省张家界市的一段往事。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "r",
|
||||||
|
"origin": "北",
|
||||||
|
"text": "南",
|
||||||
|
"start": 38,
|
||||||
|
"end": 39
|
||||||
|
},
|
||||||
|
"checkTime": 1696667454,
|
||||||
|
"offset": 89,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1696667454,
|
||||||
|
"utime": 1696667454,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3332,
|
||||||
|
"uid": 8,
|
||||||
|
"fid": 224,
|
||||||
|
"key": "0632d957fbe9c61a1fcfe564b7063930",
|
||||||
|
"text": "威望的增加、权利的扩张丝毫没有改变他原有的样样子，他迈步走进岳楼，回忆起在湖北省张家界市的一段往事。",
|
||||||
|
"newText": "威望的增加、权力的扩张丝毫没有改变他原有的样子，他迈步走进岳楼，回忆起在湖南省张家界市的一段往事。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "d",
|
||||||
|
"origin": "样",
|
||||||
|
"text": "",
|
||||||
|
"start": 21,
|
||||||
|
"end": 22
|
||||||
|
},
|
||||||
|
"checkTime": 1696667454,
|
||||||
|
"offset": 89,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1696667454,
|
||||||
|
"utime": 1696667454,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3331,
|
||||||
|
"uid": 8,
|
||||||
|
"fid": 224,
|
||||||
|
"key": "0632d957fbe9c61a1fcfe564b7063930",
|
||||||
|
"text": "威望的增加、权利的扩张丝毫没有改变他原有的样样子，他迈步走进岳楼，回忆起在湖北省张家界市的一段往事。",
|
||||||
|
"newText": "威望的增加、权力的扩张丝毫没有改变他原有的样子，他迈步走进岳楼，回忆起在湖南省张家界市的一段往事。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "r",
|
||||||
|
"origin": "利",
|
||||||
|
"text": "力",
|
||||||
|
"start": 7,
|
||||||
|
"end": 8
|
||||||
|
},
|
||||||
|
"checkTime": 1696667454,
|
||||||
|
"offset": 89,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1696667454,
|
||||||
|
"utime": 1696667454,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3330,
|
||||||
|
"uid": 8,
|
||||||
|
"fid": 224,
|
||||||
|
"key": "1fd42303b7851f8649c7d22285d733db",
|
||||||
|
"text": "原本偏安一隅的小国，从他的手中变成了十三个州，国人对这位领袖的敬意由\n然而\n生。",
|
||||||
|
"newText": "原本偏安一隅的小国，从他的手中变成了十三个州，国人对这位领袖的敬意由然而是生的。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "i",
|
||||||
|
"origin": "",
|
||||||
|
"text": "的",
|
||||||
|
"start": 38,
|
||||||
|
"end": 39
|
||||||
|
},
|
||||||
|
"checkTime": 1696667454,
|
||||||
|
"offset": 49,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1696667454,
|
||||||
|
"utime": 1696667454,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3329,
|
||||||
|
"uid": 8,
|
||||||
|
"fid": 224,
|
||||||
|
"key": "1fd42303b7851f8649c7d22285d733db",
|
||||||
|
"text": "原本偏安一隅的小国，从他的手中变成了十三个州，国人对这位领袖的敬意由\n然而\n生。",
|
||||||
|
"newText": "原本偏安一隅的小国，从他的手中变成了十三个州，国人对这位领袖的敬意由然而是生的。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "r",
|
||||||
|
"origin": "\n",
|
||||||
|
"text": "是",
|
||||||
|
"start": 37,
|
||||||
|
"end": 38
|
||||||
|
},
|
||||||
|
"checkTime": 1696667454,
|
||||||
|
"offset": 49,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1696667454,
|
||||||
|
"utime": 1696667454,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3328,
|
||||||
|
"uid": 8,
|
||||||
|
"fid": 224,
|
||||||
|
"key": "1fd42303b7851f8649c7d22285d733db",
|
||||||
|
"text": "原本偏安一隅的小国，从他的手中变成了十三个州，国人对这位领袖的敬意由\n然而\n生。",
|
||||||
|
"newText": "原本偏安一隅的小国，从他的手中变成了十三个州，国人对这位领袖的敬意由然而是生的。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "d",
|
||||||
|
"origin": "\n",
|
||||||
|
"text": "",
|
||||||
|
"start": 34,
|
||||||
|
"end": 35
|
||||||
|
},
|
||||||
|
"checkTime": 1696667454,
|
||||||
|
"offset": 49,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1696667454,
|
||||||
|
"utime": 1696667454,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3327,
|
||||||
|
"uid": 8,
|
||||||
|
"fid": 224,
|
||||||
|
"key": "251feba0841e26f461afe044093cb199",
|
||||||
|
"text": "想当年，他所带领的军队以锐不可挡之势，横扫大江南北，可以说是在父兄基业上既往开来，成就了一番伟业。",
|
||||||
|
"newText": "想当年，他所带领的军队以锐不可挡之势，横扫大江南北，可以说是在父兄基业上继往开来，成就了一番伟业。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "r",
|
||||||
|
"origin": "既",
|
||||||
|
"text": "继",
|
||||||
|
"start": 36,
|
||||||
|
"end": 37
|
||||||
|
},
|
||||||
|
"checkTime": 1696667454,
|
||||||
|
"offset": 0,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1696667454,
|
||||||
|
"utime": 1696667454,
|
||||||
|
"dtime": 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pagination": {
|
||||||
|
"current": 1,
|
||||||
|
"pageSize": 1000,
|
||||||
|
"total": 7,
|
||||||
|
"sort": "id desc"
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/quill.less
Normal file
31
src/quill.less
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.editor-container .ql-editor {
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
p+p {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.proofread-item {
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
border-bottom: solid 2px #f00;
|
||||||
|
&.selected{
|
||||||
|
background-color: rgba(254, 209, 198, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.proofread-delete-item {
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: line-through;
|
||||||
|
text-decoration-color: #f00;
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proofread-insert-item {
|
||||||
|
border-bottom: double 6px #00f;
|
||||||
|
}
|
||||||
245
src/views/EditorBasic.tsx
Normal file
245
src/views/EditorBasic.tsx
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
import ReactQuill, { Quill } from 'react-quill'
|
||||||
|
import 'react-quill/dist/quill.snow.css'
|
||||||
|
import { useRef, useState } from 'react'
|
||||||
|
import { TOPS, TProofreadItem } from './types'
|
||||||
|
import { test_content_1 } from './convert'
|
||||||
|
|
||||||
|
const ProofreadList: TProofreadItem[] = [
|
||||||
|
{
|
||||||
|
id: 17009,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "5aa5de13391f8038c55ab2174f13bb84",
|
||||||
|
text: "虽然我没有相关的教学经验，但我觉得这是一个不错锻炼自己，并且能钱。",
|
||||||
|
newText:
|
||||||
|
"虽然我没有相关的教学经验，但我觉得这是一个锻炼自己，并且能赚钱的工作。",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "d",
|
||||||
|
origin: "打发",
|
||||||
|
text: "",
|
||||||
|
start: 21,
|
||||||
|
end: 23,
|
||||||
|
},
|
||||||
|
action: "delete",
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 35,
|
||||||
|
isAccept: 2,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17010,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "5aa5de13391f8038c55ab2174f13bb84",
|
||||||
|
text: "虽然我没有相关的教学经验，但我觉得这是一个不错锻炼自己，并且能钱。",
|
||||||
|
newText:
|
||||||
|
"虽然我没有相关的教学经验，但我觉得这是一个锻炼自己，并且能赚钱的工作。",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "i",
|
||||||
|
origin: "",
|
||||||
|
text: "赚",
|
||||||
|
start: 29,
|
||||||
|
end: 29,
|
||||||
|
},
|
||||||
|
action: "insert",
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 35,
|
||||||
|
isAccept: 0,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17011,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "5aa5de13391f8038c55ab2174f13bb84",
|
||||||
|
text: "虽然我没有相关的教学经验，但我觉得这是一个不错锻炼自己，并且能钱。",
|
||||||
|
newText:
|
||||||
|
"虽然我没有相关的教学经验，但我觉得这是一个锻炼自己，并且能赚钱的工作。",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "i",
|
||||||
|
origin: "",
|
||||||
|
text: "的工作",
|
||||||
|
start: 30,
|
||||||
|
end: 30,
|
||||||
|
},
|
||||||
|
action: "insert",
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 35,
|
||||||
|
isAccept: 2,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17012,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "dbe3ddd3dae993521b00f39c01744695",
|
||||||
|
text: "\n然而，有一天晚上，我在酒吧喝了太多酒，失去失去了意识。",
|
||||||
|
newText: "然而，有一天晚上，我在酒吧喝了太多酒，失去了意识。",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "d",
|
||||||
|
origin: "失去",
|
||||||
|
text: "",
|
||||||
|
start: 22,
|
||||||
|
end: 24,
|
||||||
|
},
|
||||||
|
action: "delete",
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 69,
|
||||||
|
isAccept: 0,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17013,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "895f18874c0b473558d49409872c78ea",
|
||||||
|
text: "在酒经的作用下，我变得迷迷糊糊，不知道自己在做什么。",
|
||||||
|
newText: "在酒精的作用下，我变得迷迷糊糊，不知道自己在做什么。",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "r",
|
||||||
|
origin: "经",
|
||||||
|
text: "精",
|
||||||
|
start: 2,
|
||||||
|
end: 3,
|
||||||
|
},
|
||||||
|
action: "replace",
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 97,
|
||||||
|
isAccept: 0,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
// 将数组转换成对象
|
||||||
|
const proofreadData: Map<number, TProofreadItem> = new Map();
|
||||||
|
for (let i = 0; i < ProofreadList.length; i++) {
|
||||||
|
proofreadData.set(ProofreadList[i].id, ProofreadList[i])
|
||||||
|
}
|
||||||
|
|
||||||
|
const content: {
|
||||||
|
ops: Array<TOPS>
|
||||||
|
} = {
|
||||||
|
ops: test_content_1
|
||||||
|
}
|
||||||
|
|
||||||
|
const BasicEditor = () => {
|
||||||
|
const quill = useRef<ReactQuill>(null)
|
||||||
|
|
||||||
|
const [data, setData] = useState<{
|
||||||
|
content: string;
|
||||||
|
text?: string;
|
||||||
|
ops: any
|
||||||
|
}>({
|
||||||
|
content: '',
|
||||||
|
text: '',
|
||||||
|
ops: []
|
||||||
|
})
|
||||||
|
|
||||||
|
const setContent = () => {
|
||||||
|
const editor = quill.current?.editor;
|
||||||
|
if (!editor) return;
|
||||||
|
editor.setContents(content as any)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getContent = () => {
|
||||||
|
const editor = quill.current?.editor;
|
||||||
|
if (!editor) return;
|
||||||
|
const content = editor.getContents()
|
||||||
|
content.ops?.forEach((it) => {
|
||||||
|
// const proofread = ;
|
||||||
|
if (it.attributes?.delete && it.attributes.delete.id) {
|
||||||
|
const proofread = proofreadData.get(Number(it.attributes.delete.id));
|
||||||
|
if (proofread) {
|
||||||
|
console.log('delete proofread data', proofread)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
console.log(
|
||||||
|
content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
let prevSelectNode: HTMLSpanElement | null = null;
|
||||||
|
const handleEditorClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
const node = e.target as HTMLSpanElement;
|
||||||
|
if (!node || !node.classList.contains('proofread-item') || !node.getAttribute('data-proofread-id') || prevSelectNode == node) return;
|
||||||
|
prevSelectNode?.classList.remove('selected')
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
node.classList.add('selected')
|
||||||
|
prevSelectNode = node;
|
||||||
|
}
|
||||||
|
|
||||||
|
const setCursor = () => {
|
||||||
|
if(!quill.current) return;
|
||||||
|
const node = document.querySelector('.proofread-item-170')
|
||||||
|
if(!node) return;
|
||||||
|
|
||||||
|
node.setAttribute('data-result', '~~~');
|
||||||
|
node.innerHTML = '<del></del>';
|
||||||
|
// node.appendChild(document.createElement('del'));
|
||||||
|
const editor = quill.current.editor!;
|
||||||
|
const b = Quill.find(node);
|
||||||
|
var i = editor.getIndex(b);
|
||||||
|
// console.log(i)
|
||||||
|
editor?.setSelection(i, 0, 'silent')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='container'>
|
||||||
|
<div className='editor-container' style={{ width: '100%', marginTop: 10 }} onClick={handleEditorClick}>
|
||||||
|
<ReactQuill
|
||||||
|
ref={quill}
|
||||||
|
theme='snow'
|
||||||
|
modules={{ toolbar: false }}
|
||||||
|
onChangeSelection={(selection) => {
|
||||||
|
if (!selection) return;
|
||||||
|
// handleEditorSelectionChange(selection.index)
|
||||||
|
// console.log(
|
||||||
|
// editor.getBounds(selection!.index)
|
||||||
|
// )
|
||||||
|
}}
|
||||||
|
onChange={(content, _delta, source) => {
|
||||||
|
// console.log('source', source, _delta)
|
||||||
|
const ops = quill.current!.editor!.getContents().ops
|
||||||
|
let originText = data.text || ''
|
||||||
|
let text = quill.current?.editor?.getText() || '';
|
||||||
|
setData({
|
||||||
|
content,
|
||||||
|
text,
|
||||||
|
ops
|
||||||
|
})
|
||||||
|
// if (source === 'user') {
|
||||||
|
// handleEditorTextChange(text, originText)
|
||||||
|
// }
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
{/* <button onClick={origin}>origin</button>
|
||||||
|
<button onClick={handleProcess}>process</button>
|
||||||
|
<button onClick={testContentEdit}>testContentEdit</button> */}
|
||||||
|
<div style={{ margin: '10px 0' }}>
|
||||||
|
<button onClick={getContent}>test</button>
|
||||||
|
<button onClick={setContent}>setContent</button>
|
||||||
|
<button onClick={setCursor}>setCursor</button>
|
||||||
|
</div>
|
||||||
|
<div className="code-wrapper">
|
||||||
|
<div>{JSON.stringify(data, null, '\t')}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BasicEditor
|
||||||
30
src/views/ResizeDemo.tsx
Normal file
30
src/views/ResizeDemo.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Resizable } from 're-resizable';
|
||||||
|
import './App.css'
|
||||||
|
|
||||||
|
const ResizeDemo: React.FC = () => {
|
||||||
|
const [width, setWidth] = React.useState(320);
|
||||||
|
return <div className="editor-resize-demo">
|
||||||
|
<div className="editor-container">
|
||||||
|
<div className="inner"></div>
|
||||||
|
</div>
|
||||||
|
<Resizable
|
||||||
|
defaultSize={{
|
||||||
|
width: width,
|
||||||
|
height: '100%'
|
||||||
|
|
||||||
|
}}
|
||||||
|
minWidth={320}
|
||||||
|
onResizeStop={(e, direction, ref, d) => {
|
||||||
|
console.log(
|
||||||
|
e, direction, ref, d
|
||||||
|
)
|
||||||
|
setWidth(width + d.width);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="panel"></div>
|
||||||
|
</Resizable>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ResizeDemo;
|
||||||
178
src/views/compare-left.ts
Normal file
178
src/views/compare-left.ts
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
export const compare_left = [
|
||||||
|
{
|
||||||
|
"id": 18088,
|
||||||
|
"uid": 3,
|
||||||
|
"fid": 13,
|
||||||
|
"key": "5aa5de13391f8038c55ab2174f13bb84",
|
||||||
|
"text": "虽然我没有相关的教学经验，但我觉得这是一个不错锻炼自己，并且能钱。",
|
||||||
|
"newText": "虽然我没有相关的教学经验，但我觉得这是一个锻炼自己，并且能赚钱的工作。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "d",
|
||||||
|
"origin": "不错",
|
||||||
|
"text": "",
|
||||||
|
"start": 21,
|
||||||
|
"end": 23
|
||||||
|
},
|
||||||
|
"checkTime": 1697361613,
|
||||||
|
"offset": 35,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1697361613,
|
||||||
|
"utime": 1697361613,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18089,
|
||||||
|
"uid": 3,
|
||||||
|
"fid": 13,
|
||||||
|
"key": "5aa5de13391f8038c55ab2174f13bb84",
|
||||||
|
"text": "虽然我没有相关的教学经验，但我觉得这是一个不错锻炼自己，并且能钱。",
|
||||||
|
"newText": "虽然我没有相关的教学经验，但我觉得这是一个锻炼自己，并且能赚钱的工作。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "i",
|
||||||
|
"origin": "",
|
||||||
|
"text": "赚",
|
||||||
|
"start": 31,
|
||||||
|
"end": 31
|
||||||
|
},
|
||||||
|
"checkTime": 1697361613,
|
||||||
|
"offset": 35,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1697361613,
|
||||||
|
"utime": 1697361613,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18090,
|
||||||
|
"uid": 3,
|
||||||
|
"fid": 13,
|
||||||
|
"key": "5aa5de13391f8038c55ab2174f13bb84",
|
||||||
|
"text": "虽然我没有相关的教学经验，但我觉得这是一个不错锻炼自己，并且能钱。",
|
||||||
|
"newText": "虽然我没有相关的教学经验，但我觉得这是一个锻炼自己，并且能赚钱的工作。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "i",
|
||||||
|
"origin": "",
|
||||||
|
"text": "的工作",
|
||||||
|
"start": 32,
|
||||||
|
"end": 32
|
||||||
|
},
|
||||||
|
"checkTime": 1697361613,
|
||||||
|
"offset": 35,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1697361613,
|
||||||
|
"utime": 1697361613,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18091,
|
||||||
|
"uid": 3,
|
||||||
|
"fid": 13,
|
||||||
|
"key": "dbe3ddd3dae993521b00f39c01744695",
|
||||||
|
"text": "\n然而，有一天晚上，我在酒吧喝了太多酒，失去失去了意识。",
|
||||||
|
"newText": "然而，有一天晚上，我在酒吧喝了太多酒，失去了意识。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "d",
|
||||||
|
"origin": "失去",
|
||||||
|
"text": "",
|
||||||
|
"start": 22,
|
||||||
|
"end": 24
|
||||||
|
},
|
||||||
|
"checkTime": 1697361613,
|
||||||
|
"offset": 68,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1697361613,
|
||||||
|
"utime": 1697361613,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18092,
|
||||||
|
"uid": 3,
|
||||||
|
"fid": 13,
|
||||||
|
"key": "895f18874c0b473558d49409872c78ea",
|
||||||
|
"text": "在酒经的作用下，我变得迷迷糊糊，不知道自己在做什么。",
|
||||||
|
"newText": "在酒精的作用下，我变得迷迷糊糊，不知道自己在做什么。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "r",
|
||||||
|
"origin": "经",
|
||||||
|
"text": "精",
|
||||||
|
"start": 2,
|
||||||
|
"end": 3
|
||||||
|
},
|
||||||
|
"checkTime": 1697361613,
|
||||||
|
"offset": 96,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1697361613,
|
||||||
|
"utime": 1697361613,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18093,
|
||||||
|
"uid": 3,
|
||||||
|
"fid": 13,
|
||||||
|
"key": "187d12e64879f6c2d42cba2982d50e30",
|
||||||
|
"text": "我努力回地忆着昨晚的事情，但是脑海中一片空白。",
|
||||||
|
"newText": "我努力地回忆着昨晚的事情，但是脑海中一片空白。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "i",
|
||||||
|
"origin": "",
|
||||||
|
"text": "地",
|
||||||
|
"start": 3,
|
||||||
|
"end": 3
|
||||||
|
},
|
||||||
|
"checkTime": 1697361613,
|
||||||
|
"offset": 175,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1697361613,
|
||||||
|
"utime": 1697361613,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18094,
|
||||||
|
"uid": 3,
|
||||||
|
"fid": 13,
|
||||||
|
"key": "187d12e64879f6c2d42cba2982d50e30",
|
||||||
|
"text": "我努力回地忆着昨晚的事情，但是脑海中一片空白。",
|
||||||
|
"newText": "我努力地回忆着昨晚的事情，但是脑海中一片空白。",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "d",
|
||||||
|
"origin": "地",
|
||||||
|
"text": "",
|
||||||
|
"start": 4,
|
||||||
|
"end": 5
|
||||||
|
},
|
||||||
|
"checkTime": 1697361613,
|
||||||
|
"offset": 175,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1697361613,
|
||||||
|
"utime": 1697361613,
|
||||||
|
"dtime": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18095,
|
||||||
|
"uid": 3,
|
||||||
|
"fid": 13,
|
||||||
|
"key": "84849fdc3e4e5b81afa9254526551679",
|
||||||
|
"text": "我意识可能做了一些蠢事，但又不敢去想象",
|
||||||
|
"newText": "我意识到可能做了一些蠢事，但又不敢去想象",
|
||||||
|
"correctedContent": {
|
||||||
|
"tag": "i",
|
||||||
|
"origin": "",
|
||||||
|
"text": "到",
|
||||||
|
"start": 3,
|
||||||
|
"end": 3
|
||||||
|
},
|
||||||
|
"checkTime": 1697361613,
|
||||||
|
"offset": 198,
|
||||||
|
"isAccept": 0,
|
||||||
|
"type": 2,
|
||||||
|
"ctime": 1697361613,
|
||||||
|
"utime": 1697361613,
|
||||||
|
"dtime": 0
|
||||||
|
}
|
||||||
|
]
|
||||||
169
src/views/convert.ts
Normal file
169
src/views/convert.ts
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
import { TOPS } from "./types";
|
||||||
|
|
||||||
|
export const test_content_1: TOPS[] = [
|
||||||
|
{
|
||||||
|
attributes: {},
|
||||||
|
insert:
|
||||||
|
"失业在家的日子过得很无聊，为了打发时间，我决定给我妈朋友的儿子当家教。虽然我没有相关的教学经验，但我觉得这是一个锻炼自己，并且能",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
replace: {
|
||||||
|
id: 17010,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "5aa5de13391f8038c55ab2174f13bb84",
|
||||||
|
text: "虽然我没有相关的教学经验，但我觉得这是一个不错锻炼自己，并且能钱。",
|
||||||
|
newText:
|
||||||
|
"虽然我没有相关的教学经验，但我觉得这是一个锻炼自己，并且能赚钱的工作。",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "i",
|
||||||
|
origin: "赚",
|
||||||
|
text: "赚",
|
||||||
|
start: 29,
|
||||||
|
end: 29,
|
||||||
|
},
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 35,
|
||||||
|
isAccept: 0,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
action: "insert",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
insert: "赚",
|
||||||
|
},
|
||||||
|
{ attributes: {}, insert: "钱" },
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
replace: {
|
||||||
|
id: 17011,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "5aa5de13391f8038c55ab2174f13bb84",
|
||||||
|
text: "虽然我没有相关的教学经验，但我觉得这是一个不错锻炼自己，并且能钱。",
|
||||||
|
newText:
|
||||||
|
"虽然我没有相关的教学经验，但我觉得这是一个锻炼自己，并且能赚钱的工作。",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "i",
|
||||||
|
origin: "的工作",
|
||||||
|
text: "的工作",
|
||||||
|
start: 30,
|
||||||
|
end: 30,
|
||||||
|
},
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 35,
|
||||||
|
isAccept: 2,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
action: "insert",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
insert: "的工作",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
insert:'~~~',
|
||||||
|
attributes:{
|
||||||
|
delete:{
|
||||||
|
id: 170,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "5aa5de13391f8038c55ab2174f13bb84",
|
||||||
|
text: "",
|
||||||
|
newText:"",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "d",
|
||||||
|
origin: "~~~",
|
||||||
|
text: "",
|
||||||
|
start: 30,
|
||||||
|
end: 30,
|
||||||
|
},
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 35,
|
||||||
|
isAccept: 2,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
action: "delete",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {},
|
||||||
|
insert: "。\n然而，有一天晚上，我在酒吧喝了太多酒，失去失",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
replace: {
|
||||||
|
id: 17012,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "dbe3ddd3dae993521b00f39c01744695",
|
||||||
|
text: "\\n然而，有一天晚上，我在酒吧喝了太多酒，失去失去了意识。",
|
||||||
|
newText: "然而，有一天晚上，我在酒吧喝了太多酒，失去了意识。",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "d",
|
||||||
|
origin: "失去",
|
||||||
|
text: "",
|
||||||
|
start: 22,
|
||||||
|
end: 24,
|
||||||
|
},
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 69,
|
||||||
|
isAccept: 0,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
action: "delete",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
insert: "失去",
|
||||||
|
},
|
||||||
|
{ attributes: {}, insert: "意识。在酒经" },
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
replace: {
|
||||||
|
id: 17013,
|
||||||
|
uid: 3,
|
||||||
|
fid: 290,
|
||||||
|
key: "895f18874c0b473558d49409872c78ea",
|
||||||
|
text: "在酒经的作用下，我变得迷迷糊糊，不知道自己在做什么。",
|
||||||
|
newText: "在酒精的作用下，我变得迷迷糊糊，不知道自己在做什么。",
|
||||||
|
correctedContent: {
|
||||||
|
tag: "r",
|
||||||
|
origin: "经",
|
||||||
|
text: "精",
|
||||||
|
start: 2,
|
||||||
|
end: 3,
|
||||||
|
},
|
||||||
|
checkTime: 1697186287,
|
||||||
|
offset: 97,
|
||||||
|
isAccept: 0,
|
||||||
|
type: 2,
|
||||||
|
ctime: 1697186287,
|
||||||
|
utime: 1697199789,
|
||||||
|
dtime: 0,
|
||||||
|
action: "replace",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
insert: "经",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {},
|
||||||
|
insert:"作用下，我变得迷迷糊糊，不知道自己在做什么。当我醒来时，我发现自己竟然睡在了他家的客房里。\n",
|
||||||
|
},
|
||||||
|
{insert:"当我醒来时，我发现自己竟然睡在了他家的客房里。\n",},
|
||||||
|
{insert:"当我醒来时，我发现自己竟然睡在了他家的客房里。\n",},
|
||||||
|
{insert:"当我醒来时，我发现自己竟然睡在了他家的客房里。\n",},
|
||||||
|
{insert:"当我醒来时，我发现自己竟然睡在了他家的客房里。\n",},
|
||||||
|
{insert:"当我醒来时，我发现自己竟然睡在了他家的客房里。\n",},
|
||||||
|
{insert:"当我醒来时，我发现自己竟然睡在了他家的客房里。\n",},
|
||||||
|
{insert:"当我醒来时，我发现自己竟然睡在了他家的客房里。\n",},
|
||||||
|
{insert:"当我醒来时，我发现自己竟然睡在了他家的客房里。\n",},
|
||||||
|
];
|
||||||
494
src/views/editor/index.tsx
Normal file
494
src/views/editor/index.tsx
Normal file
@ -0,0 +1,494 @@
|
|||||||
|
import ReactQuill from 'react-quill'
|
||||||
|
import 'react-quill/dist/quill.snow.css'
|
||||||
|
import { useEffect, useRef, useState } from 'react'
|
||||||
|
import { TOPS } from '../types'
|
||||||
|
import { Button, Dropdown, MenuProps, Space } from 'antd'
|
||||||
|
|
||||||
|
type TError = {
|
||||||
|
id: number;
|
||||||
|
offset: number;
|
||||||
|
length: number;
|
||||||
|
}
|
||||||
|
type ErrorPosition = {
|
||||||
|
index: number;
|
||||||
|
error?: TError;
|
||||||
|
left: number;
|
||||||
|
top: number;
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
offset: number;
|
||||||
|
length: number;
|
||||||
|
}
|
||||||
|
const content: {
|
||||||
|
ops: Array<TOPS>
|
||||||
|
} = {
|
||||||
|
ops: [
|
||||||
|
{
|
||||||
|
insert: "hello "
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
bold: true
|
||||||
|
},
|
||||||
|
insert: "world"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
content.ops = [
|
||||||
|
{
|
||||||
|
insert: "该摄"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
insert: {
|
||||||
|
origin: '',
|
||||||
|
text: '像'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insert: '像'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
bold: true,
|
||||||
|
italic: true
|
||||||
|
},
|
||||||
|
insert: "头头"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
insert: "可以在单"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
bold: true,
|
||||||
|
replace: {
|
||||||
|
origin: '次爆',
|
||||||
|
text: '次爆爆'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
insert: "次爆"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
italic: true
|
||||||
|
},
|
||||||
|
insert: "光中以每秒"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"insert": " 480 万帧的速度采集动态的事件\n的图像。\n\n采集快速运动过程（如落下的水滴或分子相互作用）的 青晰 图像，我们需要使用昂贵的超快摄像头（每秒可采集数百万张图像）。据国外媒报道，加拿大国立科学研究院（INRS）宣布开发出新摄像头，能够以极低的成本实现超快速成像，并"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
bold: true
|
||||||
|
},
|
||||||
|
insert: "适合"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
italic: true,
|
||||||
|
bold: true
|
||||||
|
},
|
||||||
|
insert: "多种(many)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
insert: "应用，例如实时监测药物输送或用于自动驾驶的高速激光雷达系统。\n"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 错误列表
|
||||||
|
*/
|
||||||
|
const ResultErrorList = [
|
||||||
|
{ offset: 4, length: 1, id: 1, },
|
||||||
|
{ offset: 10, length: 2, id: 2 },
|
||||||
|
{ offset: 28, length: 1, id: 3 },
|
||||||
|
{ offset: 30, length: 6, id: 4 },
|
||||||
|
{ offset: 124, length: 7, id: 5 },
|
||||||
|
]
|
||||||
|
function Editor() {
|
||||||
|
const quill = useRef<ReactQuill>(null)
|
||||||
|
useEffect(() => {
|
||||||
|
const editor = quill.current?.editor;
|
||||||
|
if (!editor) return;
|
||||||
|
editor.setContents(content as any)
|
||||||
|
}, [quill])
|
||||||
|
const [data, setData] = useState<{
|
||||||
|
content: string;
|
||||||
|
text?: string;
|
||||||
|
ops: any
|
||||||
|
}>({
|
||||||
|
content: '',
|
||||||
|
text: '',
|
||||||
|
ops: []
|
||||||
|
})
|
||||||
|
// const [state, setState] = useState<{
|
||||||
|
// bottom?: number;
|
||||||
|
// height?: number;
|
||||||
|
// left?: number;
|
||||||
|
// right?: number;
|
||||||
|
// top?: number;
|
||||||
|
// width?: number;
|
||||||
|
// }>({})
|
||||||
|
const offset = 10, length = 2
|
||||||
|
const [editor, setEditor] = useState<{
|
||||||
|
div?: HTMLDivElement,
|
||||||
|
info: {
|
||||||
|
height: number;
|
||||||
|
width: number;
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
bottom: number;
|
||||||
|
left: number;
|
||||||
|
right: number;
|
||||||
|
top: number;
|
||||||
|
}
|
||||||
|
}>({
|
||||||
|
info: {
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const getAllChildNodes = (node: ChildNode) => {
|
||||||
|
const childNodes = node.childNodes;
|
||||||
|
if (childNodes.length > 0) {
|
||||||
|
const _: any = [];
|
||||||
|
for (let i = 0; i < childNodes.length; i++) {
|
||||||
|
_.push(getAllChildNodes(childNodes[i]))
|
||||||
|
}
|
||||||
|
return _
|
||||||
|
}
|
||||||
|
return node
|
||||||
|
}
|
||||||
|
// 根据位置获得节点索引
|
||||||
|
const getNodeIndexByOffsetAndLength = (lengthList: number[], offset: number, length: number) => {
|
||||||
|
const posList: number[][] = []
|
||||||
|
// 开始范围位置
|
||||||
|
let startPos = 0
|
||||||
|
// 结束范围位置
|
||||||
|
let endPos = 0;
|
||||||
|
for (let i = 0; i < lengthList.length; i++) {
|
||||||
|
if (lengthList[i] === 0) continue; // 跳过空
|
||||||
|
endPos = startPos + lengthList[i];
|
||||||
|
//1.完全在该长度范围内容
|
||||||
|
if (offset >= startPos && (offset + length) < endPos) {
|
||||||
|
posList.push([i, offset - startPos, length])
|
||||||
|
return posList
|
||||||
|
}
|
||||||
|
//2. 开始在范围内，结束没有在范围内
|
||||||
|
if (offset >= startPos && offset < endPos && (offset + length) >= endPos) {
|
||||||
|
const curLen = endPos - offset
|
||||||
|
posList.push([i, offset - startPos, curLen])
|
||||||
|
// 剩余长度减去已经处理的值
|
||||||
|
length = length - curLen;
|
||||||
|
if (length === 0) return posList;
|
||||||
|
// 开始位置为当前位置结束 + 1
|
||||||
|
offset = endPos;
|
||||||
|
}
|
||||||
|
startPos = endPos;
|
||||||
|
}
|
||||||
|
return posList
|
||||||
|
}
|
||||||
|
|
||||||
|
const calcRectInfo = (rect: DOMRect) => {
|
||||||
|
return {
|
||||||
|
left: rect.left - editor.info.left,
|
||||||
|
top: rect.top - editor.info.top,
|
||||||
|
width: rect.width,
|
||||||
|
height: rect.height,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const getBounds = (textNodes: Node[], pos: number[][], error: TError) => {
|
||||||
|
const bounds: ErrorPosition[] = []
|
||||||
|
for (let i = 0; i < pos.length; i++) {
|
||||||
|
const [index, offset, length] = pos[i]
|
||||||
|
const node = textNodes[index]
|
||||||
|
// start range
|
||||||
|
let rangeStart: Range | null = document.createRange();
|
||||||
|
rangeStart.setStart(node, 0);
|
||||||
|
rangeStart.setEnd(node, 0);
|
||||||
|
// start height
|
||||||
|
const startHeight = rangeStart.getBoundingClientRect().height;
|
||||||
|
rangeStart.detach()
|
||||||
|
rangeStart = null;
|
||||||
|
// content range
|
||||||
|
let range: Range | null = document.createRange()
|
||||||
|
range.setStart(node, offset)
|
||||||
|
range.setEnd(node, offset + length)
|
||||||
|
const rect = calcRectInfo(range.getBoundingClientRect())
|
||||||
|
|
||||||
|
range.detach();
|
||||||
|
range = null;
|
||||||
|
if (Math.floor(rect.height) == Math.floor(startHeight)) { // start equal end so 在一行了啦
|
||||||
|
bounds.push({
|
||||||
|
index,
|
||||||
|
error,
|
||||||
|
offset,
|
||||||
|
length,
|
||||||
|
...rect
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// not in same line, calculate each char in string
|
||||||
|
const highlights: any[] = [];
|
||||||
|
let start = 0, count = 1;
|
||||||
|
while (count <= length) { //
|
||||||
|
let strRange: Range | null = document.createRange()
|
||||||
|
strRange.setStart(node, offset + start)
|
||||||
|
strRange.setEnd(node, offset + count)
|
||||||
|
const rect = calcRectInfo(strRange.getBoundingClientRect());
|
||||||
|
strRange.detach();
|
||||||
|
strRange = null;
|
||||||
|
if (Math.floor(rect.height) == Math.floor(startHeight)) { // in first line
|
||||||
|
if (count !== 1) highlights.pop();
|
||||||
|
count++;
|
||||||
|
} else {
|
||||||
|
if (start == count - 1) {
|
||||||
|
highlights.pop();
|
||||||
|
start = count;
|
||||||
|
count -= 1;
|
||||||
|
} else {
|
||||||
|
start = count - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
highlights.push({
|
||||||
|
index: start,
|
||||||
|
error,
|
||||||
|
offset: offset + start,
|
||||||
|
length: count,
|
||||||
|
...rect
|
||||||
|
})
|
||||||
|
}
|
||||||
|
bounds.push(...highlights)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return bounds
|
||||||
|
}
|
||||||
|
|
||||||
|
const [errPos, setErrPos] = useState<ErrorPosition[]>([])
|
||||||
|
const getAllTextNodes = () => {
|
||||||
|
const qcs = editor.div!.childNodes;
|
||||||
|
const qcList = [];
|
||||||
|
for (let i = 0; i < qcs.length; i++) {
|
||||||
|
qcList.push(getAllChildNodes(qcs[i]))
|
||||||
|
}
|
||||||
|
return qcList.flat(10) as Node[];
|
||||||
|
}
|
||||||
|
const origin = () => {
|
||||||
|
const nodeList = getAllTextNodes();
|
||||||
|
const lenList: number[] = []
|
||||||
|
nodeList.forEach(node => {
|
||||||
|
if (node.nodeName === '#text') {
|
||||||
|
lenList.push((node as Text).length)
|
||||||
|
} else {
|
||||||
|
lenList.push(0)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const bounds: ErrorPosition[][] = [];
|
||||||
|
ResultErrorList.forEach(err => {
|
||||||
|
if (ErrorData.find(s => s.id == err.id)?.processed) return;
|
||||||
|
const posList = getNodeIndexByOffsetAndLength(
|
||||||
|
lenList,
|
||||||
|
err.offset,
|
||||||
|
err.length
|
||||||
|
)
|
||||||
|
// posList.forEach(p => {
|
||||||
|
// const [index, offset, length] = p;
|
||||||
|
// console.log(nodeList[index], p, nodeList[index].textContent?.slice(offset, offset + length))
|
||||||
|
// })
|
||||||
|
bounds.push(getBounds(nodeList, posList, err))
|
||||||
|
})
|
||||||
|
// const bounds = getBounds(nodeList, lenList)
|
||||||
|
setErrPos(bounds.flat(1))
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const div = document.querySelector<HTMLDivElement>('.ql-editor')!
|
||||||
|
setEditor({
|
||||||
|
div,
|
||||||
|
info: div.getBoundingClientRect(),
|
||||||
|
})
|
||||||
|
}, [quill])
|
||||||
|
const [selectId, setSelectId] = useState<number>(-1)
|
||||||
|
const handleEditorSelectionChange = (index: number) => {
|
||||||
|
const editor = quill.current?.editor!;
|
||||||
|
const info = editor.getBounds(index)
|
||||||
|
console.log('editor change info', info)
|
||||||
|
let id = -1;
|
||||||
|
errPos.forEach(err => {
|
||||||
|
// 判断是否在范围内
|
||||||
|
if (
|
||||||
|
info.left >= err.left && info.left <= (err.left + err.width)
|
||||||
|
&& info.top >= err.top && info.top <= (err.top + err.height)
|
||||||
|
) {
|
||||||
|
id = err.error?.id || -1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
setSelectId(id)
|
||||||
|
}
|
||||||
|
const handleEditorTextChange = (newText: string, originText: string) => {
|
||||||
|
const range = window.getSelection()?.getRangeAt(0)
|
||||||
|
if (!range) return;
|
||||||
|
originText = originText.replace(/ /gi, " ");
|
||||||
|
newText = newText.replace(/ /gi, " ");
|
||||||
|
const count = newText.length - originText.length;
|
||||||
|
const nodeList = getAllTextNodes();
|
||||||
|
let startOffset = 0;
|
||||||
|
// 计算偏移量
|
||||||
|
for (let node of nodeList) {
|
||||||
|
if (range.startContainer == node) {
|
||||||
|
// 找到该节点就不计算后续的了
|
||||||
|
startOffset += range.startOffset;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (node.nodeName === '#text') startOffset += (node as Text).length
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(JSON.stringify(ResultErrorList))
|
||||||
|
// 更新位置
|
||||||
|
for (let i = 0; i < ResultErrorList.length; i++) {
|
||||||
|
// 判断要更新的位置是否在修改位置后面
|
||||||
|
if (ResultErrorList[i].offset >= startOffset - count) {
|
||||||
|
ResultErrorList[i].offset += count;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(JSON.stringify(ResultErrorList))
|
||||||
|
origin()
|
||||||
|
}
|
||||||
|
|
||||||
|
const ErrorData = [
|
||||||
|
{ id: 1, tag: 'd', origin: '头', text: '', processed: false },
|
||||||
|
{ id: 2, tag: 'd', origin: '爆光', text: '曝光', processed: false },
|
||||||
|
{ id: 3, tag: 'r', origin: '动', text: '洞', processed: false },
|
||||||
|
{ id: 4, tag: 'd', origin: '动', text: '洞', processed: false },
|
||||||
|
]
|
||||||
|
const handleProcess = () => {
|
||||||
|
console.log('selectId', selectId)
|
||||||
|
const err = ErrorData.find(item => item.id === selectId)
|
||||||
|
if (!err) return;
|
||||||
|
const nodeList = getAllTextNodes();
|
||||||
|
const processList = errPos.filter(s => s.error?.id == selectId)
|
||||||
|
err.processed = true;
|
||||||
|
processList.forEach(it => {
|
||||||
|
const node = nodeList[it.index] as Text;
|
||||||
|
const content = node.textContent!
|
||||||
|
//
|
||||||
|
// console.log(it, nodeList[it.index])
|
||||||
|
if (err.tag == 'd') {
|
||||||
|
// 删除
|
||||||
|
node.textContent = content.slice(0, it.offset) + content.slice(it.offset + it.length)
|
||||||
|
} else if (err.tag == 'r') { // 替换
|
||||||
|
console.log(node.textContent!.slice(0, it.offset), node.textContent!.slice(it.offset + it.length))
|
||||||
|
node.textContent = node.textContent!.slice(0, it.offset) + err.text + node.textContent!.slice(it.offset + it.length)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// origin();
|
||||||
|
}
|
||||||
|
const test = () => {
|
||||||
|
const editor = quill.current?.editor!;
|
||||||
|
// editor.insertText(pos[0], 'hello world')
|
||||||
|
// const bounds = editor.getBounds(pos[0], pos[1])
|
||||||
|
// console.log(bounds)
|
||||||
|
// setState(bounds)
|
||||||
|
// editor.setSelection(pos[0], pos[1])
|
||||||
|
editor.deleteText(offset, length)
|
||||||
|
editor.insertText(offset, '爆光', {
|
||||||
|
replace: {
|
||||||
|
origin: '爆光',
|
||||||
|
text: '曝光'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const testContentEdit = () => {
|
||||||
|
const spans = document.querySelectorAll('.proofread-replace-item')
|
||||||
|
Array.from(spans).forEach((node) => {
|
||||||
|
console.log(node.textContent, node)
|
||||||
|
const replacedText = node.getAttribute('data-text')
|
||||||
|
if (replacedText) {
|
||||||
|
//(node as HTMLElement).innerText = replacedText
|
||||||
|
node.textContent = replacedText
|
||||||
|
}
|
||||||
|
})
|
||||||
|
console.log(quill.current!.editor!.getText())
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log(quill.current!.editor!.getText())
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
const items: MenuProps['items'] = [
|
||||||
|
{
|
||||||
|
label: <a href="https://www.antgroup.com">1st menu item</a>,
|
||||||
|
key: '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: <a href="https://www.aliyun.com">2nd menu item</a>,
|
||||||
|
key: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '3rd menu item',
|
||||||
|
key: '3',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Space>
|
||||||
|
<Button type='primary' onClick={origin}>origin</Button>
|
||||||
|
<Button onClick={handleProcess}>process</Button>
|
||||||
|
<Button onClick={test}>test</Button>
|
||||||
|
<Button onClick={testContentEdit}>testContentEdit</Button>
|
||||||
|
</Space>
|
||||||
|
{/* <p>该摄像<strong><em>头头</em></strong>可以在单<i>次爆</i></p> */}
|
||||||
|
<div className='editor-container' style={{ width: '100%', marginTop: 10 }}>
|
||||||
|
<ReactQuill
|
||||||
|
ref={quill}
|
||||||
|
theme='snow'
|
||||||
|
modules={{ toolbar: false }}
|
||||||
|
onChangeSelection={(selection) => {
|
||||||
|
if (!selection) return;
|
||||||
|
handleEditorSelectionChange(selection.index)
|
||||||
|
// console.log(
|
||||||
|
// editor.getBounds(selection!.index)
|
||||||
|
// )
|
||||||
|
}}
|
||||||
|
onChange={(content, _delta, source) => {
|
||||||
|
// console.log('source', source, _delta)
|
||||||
|
const ops = quill.current!.editor!.getContents().ops
|
||||||
|
let originText = data.text || ''
|
||||||
|
let text = quill.current?.editor?.getText() || '';
|
||||||
|
setData({
|
||||||
|
content,
|
||||||
|
text,
|
||||||
|
ops
|
||||||
|
})
|
||||||
|
if (source === 'user') {
|
||||||
|
handleEditorTextChange(text, originText)
|
||||||
|
}
|
||||||
|
}} />
|
||||||
|
<div className="hilight">
|
||||||
|
{errPos.map((err, errIndex) => <Dropdown open={err.error && err.error?.id == selectId ? true : false} key={errIndex} menu={{ items }}>
|
||||||
|
<div data-error-id={err.error?.id} className={`hilight-item ${err.error?.id == selectId ? 'hilight-item-selected' : ''}`} style={{
|
||||||
|
left: err.left || 0,
|
||||||
|
top: err.top || 0,
|
||||||
|
width: err.width || 0,
|
||||||
|
height: err.height || 0,
|
||||||
|
}}></div>
|
||||||
|
</Dropdown>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <div className="code-wrapper">
|
||||||
|
<pre>{JSON.stringify(data, null, ' ')}</pre>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Editor
|
||||||
13
src/views/glb/index.tsx
Normal file
13
src/views/glb/index.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import GLTFViewer from "./viewer";
|
||||||
|
|
||||||
|
|
||||||
|
const ViewerDemo: React.FC = () => {
|
||||||
|
return (<div>
|
||||||
|
<div><GLTFViewer gltfUrl="/cloud.glb" /></div>
|
||||||
|
{/* <div><GLTFViewer gltfUrl="/gift.glb" /></div>
|
||||||
|
<div><GLTFViewer gltfUrl="/jinzita.glb" /></div> */}
|
||||||
|
|
||||||
|
</div>);
|
||||||
|
|
||||||
|
}
|
||||||
|
export default ViewerDemo;
|
||||||
72
src/views/glb/viewer/index.tsx
Normal file
72
src/views/glb/viewer/index.tsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||||||
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
|
||||||
|
|
||||||
|
export type GLTFViewerProp = {
|
||||||
|
gltfUrl: string;
|
||||||
|
scale?: number;
|
||||||
|
position?: [number, number, number];
|
||||||
|
rotation?: [number, number, number];
|
||||||
|
onLoad?: () => void;
|
||||||
|
onError?: () => void;
|
||||||
|
autoPlay?: boolean;
|
||||||
|
width?: number;
|
||||||
|
height?: number;
|
||||||
|
}
|
||||||
|
const GLTFViewer: React.FC<GLTFViewerProp> = (props) => {
|
||||||
|
const { gltfUrl, scale = 1, position = [0, 0, 0], rotation = [0, 0, 0], width = 500, height = 400, autoPlay = true } = props;
|
||||||
|
const viewer = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const scence = new THREE.Scene();
|
||||||
|
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
|
||||||
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
||||||
|
const controls = new OrbitControls(camera, renderer.domElement);
|
||||||
|
const loader = new GLTFLoader();
|
||||||
|
|
||||||
|
//光源
|
||||||
|
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
|
||||||
|
scence.add(ambient);
|
||||||
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);//光源，color:灯光颜色，intensity:光照强度
|
||||||
|
directionalLight.position.set(400, 200, 300);
|
||||||
|
scence.add(directionalLight);
|
||||||
|
//设置相机位置
|
||||||
|
camera.position.set(-10, 100, 10);
|
||||||
|
//设置相机方向
|
||||||
|
camera.lookAt(0, 0, 0);
|
||||||
|
//辅助坐标轴
|
||||||
|
// const axesHelper = new THREE.AxesHelper(200);//参数200标示坐标系大小，可以根据场景大小去设置
|
||||||
|
// scence.add(axesHelper);
|
||||||
|
scence.background = new THREE.Color(0xeaeaea);
|
||||||
|
//
|
||||||
|
renderer.setPixelRatio(window.devicePixelRatio);
|
||||||
|
renderer.setSize(width, height);
|
||||||
|
|
||||||
|
const render = ()=>{
|
||||||
|
renderer.render(scence, camera);
|
||||||
|
controls.update();
|
||||||
|
requestAnimationFrame(render);
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
if (viewer.current) {
|
||||||
|
viewer.current.appendChild(renderer.domElement);
|
||||||
|
// renderer.render(scence, camera);
|
||||||
|
loader.load(gltfUrl, (gltf) => {
|
||||||
|
// console.log(gltf)
|
||||||
|
gltf.scene.scale.set(5, 5, 5);//设置模型大小
|
||||||
|
scence.add(gltf.scene);
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [viewer])
|
||||||
|
|
||||||
|
|
||||||
|
return (<>
|
||||||
|
<h1>{gltfUrl}</h1>
|
||||||
|
<div ref={viewer} style={{ width, height }}></div>
|
||||||
|
</>)
|
||||||
|
|
||||||
|
}
|
||||||
|
export default GLTFViewer;
|
||||||
|
|
||||||
|
// import { useGLTF } from '@react-three/drei'
|
||||||
50
src/views/tiptap/editor.css
Normal file
50
src/views/tiptap/editor.css
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
.tiptap-container {
|
||||||
|
border: solid 1px #eee;
|
||||||
|
}
|
||||||
|
.tiptap-container .toolbars {
|
||||||
|
height: 50px;
|
||||||
|
border-bottom: solid 1px #eee;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.tiptap-container .toolbars button {
|
||||||
|
border: solid 1px transparent;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: none;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.tiptap-container .toolbars button:hover,
|
||||||
|
.tiptap-container .toolbars button.is-active {
|
||||||
|
background-color: #efefef;
|
||||||
|
}
|
||||||
|
.tiptap-editor .tiptap {
|
||||||
|
outline: none;
|
||||||
|
height: calc(100vh - 200px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.tiptap-editor p {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.tiptap-editor ul,
|
||||||
|
.tiptap-editor ol {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.tiptap-editor blockquote {
|
||||||
|
border-left: solid 4px #999;
|
||||||
|
background-color: #eee;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.tiptap-editor code {
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #999;
|
||||||
|
padding: 15px;
|
||||||
|
display: block;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
52
src/views/tiptap/editor.less
Normal file
52
src/views/tiptap/editor.less
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
.tiptap-container{
|
||||||
|
border: solid 1px #eee;
|
||||||
|
.toolbars{
|
||||||
|
height: 50px;
|
||||||
|
border-bottom: solid 1px #eee;
|
||||||
|
padding: 10px;
|
||||||
|
button{
|
||||||
|
border:solid 1px transparent;
|
||||||
|
border-radius: 5px;
|
||||||
|
background:none;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 10px;
|
||||||
|
&:hover,&.is-active{
|
||||||
|
background-color:#efefef;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tiptap-editor{
|
||||||
|
|
||||||
|
.tiptap{
|
||||||
|
outline: none;
|
||||||
|
height: calc(100vh - 200px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
ul,ol{
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
blockquote{
|
||||||
|
border-left:solid 4px #999;
|
||||||
|
background-color: #eee;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code{
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #999;
|
||||||
|
padding: 15px;
|
||||||
|
display: block;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
88
src/views/tiptap/exts/indents.ts
Normal file
88
src/views/tiptap/exts/indents.ts
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
import { Command, Extension } from '@tiptap/core';
|
||||||
|
import { Transaction } from '@tiptap/pm/state';
|
||||||
|
|
||||||
|
export interface IndentOptions {
|
||||||
|
types: string[];
|
||||||
|
minLevel: number;
|
||||||
|
maxLevel: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '@tiptap/core' {
|
||||||
|
interface Commands {
|
||||||
|
indent: {
|
||||||
|
indent: () => Command;
|
||||||
|
outdent: () => Command;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 设置节点缩进
|
||||||
|
function setNodeIndent(tr: Transaction, delta: number) {
|
||||||
|
if (!tr.doc || !tr.selection) return tr;
|
||||||
|
|
||||||
|
// if(node.type.name === 'paragraph'){
|
||||||
|
// node.attrs.indent = node.attrs.indent + delta;
|
||||||
|
// }
|
||||||
|
return tr;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Indent = Extension.create<IndentOptions>({
|
||||||
|
name: 'indent',
|
||||||
|
|
||||||
|
defaultOptions: {
|
||||||
|
types: ['paragraph'],
|
||||||
|
minLevel: 1,
|
||||||
|
maxLevel: 8,
|
||||||
|
},
|
||||||
|
addGlobalAttributes() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
types: this.options.types,
|
||||||
|
attributes: {
|
||||||
|
indent: {
|
||||||
|
default: 0,
|
||||||
|
parseHTML: element => {
|
||||||
|
const { level } = element.dataset;
|
||||||
|
return level ? Number(level) : 0;
|
||||||
|
},
|
||||||
|
renderHTML: attributes => {
|
||||||
|
return {
|
||||||
|
'data-indent': attributes.indent,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
addCommands() {
|
||||||
|
const applyIndent = (delta: number) => ({ tr, state, dispatch }) => {
|
||||||
|
const { selection } = state;
|
||||||
|
tr = tr.setSelection(selection);
|
||||||
|
tr = setNodeIndent(tr, delta)
|
||||||
|
if (tr.docChanged) {
|
||||||
|
// eslint-disable-next-line no-unused-expressions
|
||||||
|
dispatch && dispatch(tr)
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
indent: () => applyIndent(1),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Outdent a paragraph.
|
||||||
|
*/
|
||||||
|
outdent: () => applyIndent(-1)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addKeyboardShortcuts() {
|
||||||
|
return {
|
||||||
|
Tab: () => {
|
||||||
|
this.editor.commands.indent();
|
||||||
|
},
|
||||||
|
'Shift-Tab': () => {
|
||||||
|
this.editor.commands.outdent();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
47
src/views/tiptap/index.tsx
Normal file
47
src/views/tiptap/index.tsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { useEditor, EditorContent, FloatingMenu, BubbleMenu } from '@tiptap/react'
|
||||||
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
import { TiptapMenuBar } from './toolbar'
|
||||||
|
import './editor.less'
|
||||||
|
|
||||||
|
const extensions = [
|
||||||
|
StarterKit,
|
||||||
|
]
|
||||||
|
const content = `
|
||||||
|
<p>该摄<span class="proodfread-insert-item" data-origin="" data-text="像">像</span><strong><em>头头</em></strong>可以在单<strong><span class="proofread-item proofread-item-undefined proofread--item" data-proofread-id="undefined">次爆</span></strong><em>光中以每秒</em> 480 万帧的速度采集动态的事件</p><p>的图像。</p><p><br></p><p>采集快速运动过程（如落下的水滴或分子相互作用）的 青晰 图像，我们需要使用昂贵的超快摄像头（每秒可采集数百万张图像）。据国外媒报道，加拿大国立科学研究院（INRS）宣布开发出新摄像头，能够以极低的成本实现超快速成像，并<strong>适合<em>多种(many)</em></strong>应用，例如实时监测药物输送或用于自动驾驶的高速激光雷达系统。</p>
|
||||||
|
`
|
||||||
|
function Editor() {
|
||||||
|
const editor = useEditor({
|
||||||
|
extensions,
|
||||||
|
content,
|
||||||
|
})
|
||||||
|
return (<div className='tiptap-container'>
|
||||||
|
<div className="toolbars">
|
||||||
|
<TiptapMenuBar editor={editor} />
|
||||||
|
</div>
|
||||||
|
<EditorContent className='tiptap-editor' editor={editor} />
|
||||||
|
<FloatingMenu>This is the floating menu</FloatingMenu>
|
||||||
|
<BubbleMenu>
|
||||||
|
<button
|
||||||
|
onClick={() => editor?.chain().focus().toggleBold().run()}
|
||||||
|
className={editor?.isActive('bold') ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
Bold
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => editor?.chain().focus().toggleItalic().run()}
|
||||||
|
className={editor?.isActive('italic') ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
Italic
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => editor?.chain().focus().toggleStrike().run()}
|
||||||
|
className={editor?.isActive('strike') ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
Strike
|
||||||
|
</button>
|
||||||
|
</BubbleMenu>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Editor
|
||||||
82
src/views/tiptap/toolbar.tsx
Normal file
82
src/views/tiptap/toolbar.tsx
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
import { createFromIconfontCN } from "@ant-design/icons";
|
||||||
|
import { Editor } from "@tiptap/react"
|
||||||
|
import { Popover } from "antd";
|
||||||
|
import React from "react"
|
||||||
|
|
||||||
|
type TiptapMenuBarProps = {
|
||||||
|
editor: Editor | null
|
||||||
|
}
|
||||||
|
|
||||||
|
const IconFont = createFromIconfontCN({
|
||||||
|
scriptUrl: 'https://at.alicdn.com/t/c/font_4382753_t9zvof0xm5.js',
|
||||||
|
});
|
||||||
|
|
||||||
|
export const TiptapMenuBar: React.FC<TiptapMenuBarProps> = (props) => {
|
||||||
|
const { editor } = props
|
||||||
|
const buttons = [
|
||||||
|
{ click: () => editor?.chain().focus().toggleBold().run(), disabled: false, icon: 'bold', key: 'bold' },
|
||||||
|
{ click: () => editor?.chain().focus().toggleItalic().run(), disabled: false, icon: 'italic', key: 'italic' },
|
||||||
|
{ click: () => editor?.chain().focus().toggleStrike().run(), disabled: false, icon: 'strikethrough', key: 'strike', tips: '删除' },
|
||||||
|
{ click: () => editor?.chain().focus().toggleCode().run(), disabled: false, icon: 'code', key: 'code' },
|
||||||
|
{ click: () => editor?.chain().focus().setParagraph().run(), disabled: false, icon: 'paragraph', key: 'paragraph' },
|
||||||
|
{ click: () => editor?.chain().focus().toggleBulletList().run(), disabled: false, icon: 'unorderedlist', key: 'bulletList' },
|
||||||
|
{ click: () => editor?.chain().focus().toggleOrderedList().run(), disabled: false, icon: 'orderedlist', key: 'orderedList' },
|
||||||
|
{ click: () => editor?.chain().focus().toggleBlockquote().run(), disabled: false, icon: 'quote', key: 'blockquote',tips:'引用' },
|
||||||
|
{ click: () => editor?.chain().focus().toggleBlockquote().run(), disabled: false, icon: 'quote', key: 'blockquote',tips:'引用' },
|
||||||
|
{ click: () => editor?.chain().focus().toggleBlockquote().run(), disabled: false, icon: 'quote', key: 'blockquote',tips:'引用' },
|
||||||
|
]
|
||||||
|
return !editor ? null : (
|
||||||
|
<div className="tiptap-menus">
|
||||||
|
{buttons.map(btn => <button key={btn.key}
|
||||||
|
onClick={btn.click}
|
||||||
|
disabled={btn.disabled}
|
||||||
|
className={editor.isActive(btn.key) ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
<Popover content={btn.tips || btn.key}><IconFont type={`icon-${btn.icon}`} /></Popover>
|
||||||
|
</button>)}
|
||||||
|
|
||||||
|
{[1, 2, 3, 4].map((level: any) => <button
|
||||||
|
onClick={() => editor.chain().focus().toggleHeading({ level }).run()}
|
||||||
|
className={editor.isActive('heading', { level }) ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
<Popover content={`标题${level}`}><IconFont type={`icon-h${level}`} /></Popover>
|
||||||
|
</button>)}
|
||||||
|
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
|
||||||
|
horizontal rule
|
||||||
|
</button>
|
||||||
|
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
|
||||||
|
hard break
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => editor.chain().focus().undo().run()}
|
||||||
|
disabled={
|
||||||
|
!editor.can()
|
||||||
|
.chain()
|
||||||
|
.focus()
|
||||||
|
.undo()
|
||||||
|
.run()
|
||||||
|
}
|
||||||
|
>
|
||||||
|
undo
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => editor.chain().focus().redo().run()}
|
||||||
|
disabled={
|
||||||
|
!editor.can()
|
||||||
|
.chain()
|
||||||
|
.focus()
|
||||||
|
.redo()
|
||||||
|
.run()
|
||||||
|
}
|
||||||
|
>
|
||||||
|
redo
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => editor.chain().focus().setColor('#958DF1').run()}
|
||||||
|
className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
purple
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
135
src/views/types.ts
Normal file
135
src/views/types.ts
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
export type int = number;
|
||||||
|
export type bool = boolean;
|
||||||
|
|
||||||
|
// 0默认 1忽略 2采纳 3未采纳
|
||||||
|
export enum ProofreadStateEnum {
|
||||||
|
Default,
|
||||||
|
Ignore,
|
||||||
|
Accept,
|
||||||
|
NotAdopted,
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//校验内容
|
||||||
|
export type TCorrectedContent = {
|
||||||
|
/**
|
||||||
|
* 'd' | 'i' | 'r'
|
||||||
|
*/
|
||||||
|
tag: 'd' | 'i' | 'r' | string;
|
||||||
|
//原内容
|
||||||
|
origin: string;
|
||||||
|
//替换内容
|
||||||
|
text: string;
|
||||||
|
//开始位置
|
||||||
|
start: int;
|
||||||
|
//结束位置
|
||||||
|
end: int;
|
||||||
|
}
|
||||||
|
export enum ProofreadTypeEnum {
|
||||||
|
unknown,
|
||||||
|
blackWord,
|
||||||
|
/**
|
||||||
|
* 字错
|
||||||
|
*/
|
||||||
|
characterError,
|
||||||
|
/**
|
||||||
|
* 词错
|
||||||
|
*/
|
||||||
|
wordError,
|
||||||
|
/**
|
||||||
|
* 数字错
|
||||||
|
*/
|
||||||
|
numberError,
|
||||||
|
/**
|
||||||
|
* 计量单位错
|
||||||
|
*/
|
||||||
|
unitsError,
|
||||||
|
/**
|
||||||
|
* 标点错
|
||||||
|
*/
|
||||||
|
punctuationError,
|
||||||
|
/**
|
||||||
|
* 语法错
|
||||||
|
*/
|
||||||
|
grammarError,
|
||||||
|
/**
|
||||||
|
* 知识性差错
|
||||||
|
*/
|
||||||
|
knowledgeableError,
|
||||||
|
/**
|
||||||
|
* 倾向性差错
|
||||||
|
*/
|
||||||
|
tendentiousError,
|
||||||
|
/**
|
||||||
|
* 不⼀致
|
||||||
|
*/
|
||||||
|
inconsistentError,
|
||||||
|
/**
|
||||||
|
* 格式错
|
||||||
|
*/
|
||||||
|
formatError,
|
||||||
|
}
|
||||||
|
export type TProofreadItem = {
|
||||||
|
/**
|
||||||
|
* id
|
||||||
|
*/
|
||||||
|
id: int;
|
||||||
|
/**
|
||||||
|
* 用户ID
|
||||||
|
*/
|
||||||
|
uid: string | number;
|
||||||
|
/**
|
||||||
|
* 文稿ID
|
||||||
|
*/
|
||||||
|
fid: int;
|
||||||
|
//md5加密字段(原始内容加密字段)
|
||||||
|
key: string;
|
||||||
|
/**
|
||||||
|
* 原始内容
|
||||||
|
*/
|
||||||
|
text: string;
|
||||||
|
/**
|
||||||
|
* 校验后的文本
|
||||||
|
*/
|
||||||
|
newText: string;
|
||||||
|
correctedContent: TCorrectedContent;
|
||||||
|
/**
|
||||||
|
* 检验时间
|
||||||
|
*/
|
||||||
|
checkTime: int;
|
||||||
|
offset: int;
|
||||||
|
/**
|
||||||
|
* 是否采纳 0默认 1忽略 2采纳 3未采纳
|
||||||
|
*/
|
||||||
|
isAccept: ProofreadStateEnum;
|
||||||
|
/**
|
||||||
|
* 异常类型 0未知 1个人黑名单 2字错 3词错 4数字错 5标点错 6计量单位错 7语法错误 8知识性差错 9倾向性差错 10不一致 11格式错
|
||||||
|
*/
|
||||||
|
type: ProofreadTypeEnum;
|
||||||
|
/**
|
||||||
|
* 创建时间
|
||||||
|
*/
|
||||||
|
ctime: int;
|
||||||
|
utime: int;
|
||||||
|
dtime: int;
|
||||||
|
action?: 'replace' | 'delete' | 'insert'
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TNormalProofreadItem = {
|
||||||
|
origin:string;
|
||||||
|
text:string;
|
||||||
|
}
|
||||||
|
export type TOPS = {
|
||||||
|
attributes?: {
|
||||||
|
bold?: boolean;
|
||||||
|
italic?: boolean;
|
||||||
|
proofread?: {
|
||||||
|
action: 'insert' | 'delete' | 'replace';
|
||||||
|
id: number;
|
||||||
|
},
|
||||||
|
replace?: TProofreadItem;
|
||||||
|
insert?: TNormalProofreadItem;
|
||||||
|
delete?: TProofreadItem;
|
||||||
|
},
|
||||||
|
insert?: string;
|
||||||
|
}
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
25
tsconfig.json
Normal file
25
tsconfig.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
10
vite.config.ts
Normal file
10
vite.config.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
port: 10086
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user