From d899c14bad0e2cc94c2f4447704e32510982ac0c Mon Sep 17 00:00:00 2001 From: callmeyan Date: Sun, 6 Aug 2023 22:27:38 +0800 Subject: [PATCH] update --- src/App.tsx | 2 + src/pages/Test.tsx | 45 +++++++++++++++ src/pages/wang/plugins/proofread.ts | 26 ++++++++- src/pages/wang/style.less | 18 +++++- src/pages/wang/wang-editor.tsx | 90 ++++++++++++++++++++++++----- 5 files changed, 163 insertions(+), 18 deletions(-) create mode 100644 src/pages/Test.tsx diff --git a/src/App.tsx b/src/App.tsx index bb5a03c..0bda367 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,7 @@ import '@/App.less' import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom"; import TextPage from "./pages/quill/text.tsx"; import WangEditor from "./pages/wang/wang-editor.tsx"; +import {Test} from "./pages/Test.tsx"; function App() { @@ -12,6 +13,7 @@ function App() { }/> }/> }/> + }/> ) diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx new file mode 100644 index 0000000..236157f --- /dev/null +++ b/src/pages/Test.tsx @@ -0,0 +1,45 @@ +import React, {useRef} from "react"; +import {Button, message, Space} from "antd"; + +export const Test: React.FC = () => { + const div = useRef(null) + const [messageApi, contextHolder] = message.useMessage(); + + const selectSpan = (selector: string) => { + return () => { + if (!div.current) { + return; + } + const span = div.current.querySelector(selector); + if (!span) return; + const sel = window.getSelection(); + sel?.selectAllChildren(span); + } + } + const showSelection = async () => { + const sel = window.getSelection(); + if (sel) { + const str = sel.toString(); + messageApi.info(str || '没有选区') + } + } + return (
+ {contextHolder} +
+ + + + + +
+
+
+

最近不少江苏的网友反馈网站无法反馈，其中包括主页、论坛、图床、会员商城等均无法访问。

+

经过调查，是由于 江苏 、重庆 两个地区的反诈系统将本站域名拦截。

+

我在访问其他服务器在境外的其他网站时，也看到有江苏用户反馈被拦截，看来江苏反诈最近是拦截了一大批网站，这是要开启白名单的节奏。

+
+
+
+ ) +} diff --git a/src/pages/wang/plugins/proofread.ts b/src/pages/wang/plugins/proofread.ts index 5cce54b..7bc0c73 100644 --- a/src/pages/wang/plugins/proofread.ts +++ b/src/pages/wang/plugins/proofread.ts @@ -24,7 +24,7 @@ export function withProofread(editor: T) { * @param children 元素子节点，void 元素可忽略 @param _editor 编辑器实例 * @returns 节点(通过 snabbdom.js 的 h 函数生成) */ -export function renderProofread(data: SlateElement, children: VNode[] | null) { // , _editor: IDomEditor +export function renderProofread(data: SlateElement, children: VNode[] | null, _editor: IDomEditor) { // , _editor: IDomEditor const {proofread} = data as WangEditorProofreadElement; return h( 'span', @@ -33,14 +33,34 @@ export function renderProofread(data: SlateElement, children: VNode[] | null) { dataSlateId: '123123' }, // HTML 属性，驼峰式写法 attrs: { - 'data-proofread-id': String(proofread.id) + 'data-proofread-id': String(proofread.id), + 'data-proofread-text': proofread.origin }, attachData: { proofread }, - className: `data-proofread-item data-proofread-item-${proofread.id}`, + className: `data-proofread-item data-proofread-item-${proofread.id} data-proofread-type-${proofread.type}`, style: { /* 其他... */}, // style ，驼峰式写法 display: 'inline-block', margin: '0 2px', on: { + process() { + // const path = DomEditor.getSelectedElems(_editor) + // DomEditor.findPath(_editor,span) + const path = DomEditor.findPath(_editor, data); + _editor.select(path) + _editor.insertText(proofread.text) + const span = this.elm as HTMLSpanElement; + span.classList.add('proofread-processed') + // if(proofread.type == 'delete'){ + // + // return; + // } + //console.log('proofread process', data, this); + //Transforms.select(_editor, this.elm) + //window.getSelection()?.selectAllChildren(span); + + // + // SlateTransforms. + }, click(e) { e.stopPropagation() e.preventDefault() diff --git a/src/pages/wang/style.less b/src/pages/wang/style.less index 9c13d75..b6ff84c 100644 --- a/src/pages/wang/style.less +++ b/src/pages/wang/style.less @@ -21,12 +21,24 @@ .data-proofread-item { border-bottom: solid 3px #f00; display: inline; - margin: 0 5px; + //margin: 0 5px; cursor: pointer; + + &.data-proofread-type-delete { + &::after { + content: attr(data-proofread-text); + text-decoration: line-through; + display: none; + } + &.proofread-processed::after{ + display: inherit; + } + } } .data-proofread-item-selected { background-color: #fbbbbb; + //outline: solid 1px #fbbbbb; } .editor-container { @@ -75,6 +87,10 @@ color: #ff0000; } + .insert-text { + margin-left: 3px; + } + .icon { margin: 0 6px; position: relative; diff --git a/src/pages/wang/wang-editor.tsx b/src/pages/wang/wang-editor.tsx index ec3892a..92d58d2 100644 --- a/src/pages/wang/wang-editor.tsx +++ b/src/pages/wang/wang-editor.tsx @@ -7,7 +7,7 @@ import '@wangeditor/editor/dist/css/style.css' import './style.less' import {PROOFREAD_TYPE_DESC, WangEditorContent, WangEditorProofreadElement} from "../../types/editor.ts"; import {useMount} from "ahooks"; -import {Button} from "antd"; +import {Button, Space} from "antd"; import * as classNames from "classnames"; import IconArrowRight from "../../components/icons/IconArrowRight.tsx"; import IconCheckFill from "../../components/icons/IconCheckFill.tsx"; @@ -66,14 +66,26 @@ const defaultData: WangEditorContent[] = [ type: 'proofread', proofread: { origin: '安徒声', - text: '安徒生', - type: 'words', + text: '汉斯·克里斯汀·安徒生', + type: 'words', // (汉斯·克里斯汀·安徒生，通称安徒生，丹麦作家暨诗人。) }, children: [ {"text": "安徒声"}, ] }, - {"text": "的作品。", "fontFamily": "宋体"} + {"text": "的作品", "fontFamily": "宋体"}, + { + type: 'proofread', + proofread: { + origin: '作品', + text: '', + type: 'delete' + }, + children: [ + {"text": "作品"}, + ] + }, + {"text": "。", "fontFamily": "宋体"}, ] }, { @@ -83,7 +95,18 @@ const defaultData: WangEditorContent[] = [ "text": "故事里有一个愚蠢的笨国王。他罕少关心国家，一昧追求的就是衣着入时。", }, { - "text": "有一天，王国里来了俩个骗子。", + type: 'proofread', + proofread: { + origin: '有天', + text: '有一天', + type: 'words' + }, + children: [ + {"text": "有一天"}, + ] + }, + { + "text": "，王国里来了俩个骗子。", "fontFamily": "宋体" } ] @@ -117,6 +140,12 @@ const WangEditor: React.FC = () => { if (divRef.current) { const target = e.target as HTMLElement; if (target.classList.contains('data-proofread-item')) { + const originNode = divRef.current.querySelector('.data-proofread-item-selected') + if(originNode && originNode == target) return; + originNode?.classList.remove('data-proofread-item-selected') + if(target.classList.contains('proofread-processed')){ + return; + } target.classList.add('data-proofread-item-selected') return; } @@ -157,6 +186,20 @@ const WangEditor: React.FC = () => { if (span.classList.contains('data-proofread-item-selected')) return; document.querySelector(`.data-proofread-item-selected`)?.classList.remove('data-proofread-item-selected') span.classList.add('data-proofread-item-selected') + + // const sel = window.getSelection(); + // window.getSelection()?.selectAllChildren(span); + } + } + const proofreadProcess = (type: 'confirm' | 'cancel', index: number) => { + return () => { + const span = document.querySelector(`.data-proofread-item-${index}`) + if (span && span.classList.contains('data-proofread-item-selected')) { + const e = new Event('process'); + console.log(type) + span.dispatchEvent(e) + } + } } @@ -189,10 +232,18 @@ const WangEditor: React.FC = () => {
- + + + +
{ops.map((op, key) => (
{ >
- {op.proofread.origin} - - {op.proofread.text} + { + op.proofread.type == 'delete' ? <> + {op.proofread.origin} + : (op.proofread.type == 'insert' ? <> + {op.proofread.text} + (新增) + : <> + {op.proofread.origin} + + {op.proofread.text} + ) + }
{op.proofread.description}
选用}> - + 忽略}> - +
))}