fix(hide): fix bug
This commit is contained in:
@@ -1,18 +1,18 @@
|
||||
"use client"
|
||||
|
||||
import { Box } from "@mantine/core"
|
||||
import { RichTextEditor } from "@mantine/tiptap"
|
||||
import "@mantine/tiptap/styles.css"
|
||||
import { IconPhoto } from "@tabler/icons-react"
|
||||
import Image from "@tiptap/extension-image"
|
||||
import Link from "@tiptap/extension-link"
|
||||
import Placeholder from "@tiptap/extension-placeholder"
|
||||
import Underline from "@tiptap/extension-underline"
|
||||
import { useEditor } from "@tiptap/react"
|
||||
import StarterKit from "@tiptap/starter-kit"
|
||||
import Underline from "@tiptap/extension-underline"
|
||||
import Link from "@tiptap/extension-link"
|
||||
import Image from "@tiptap/extension-image"
|
||||
import Placeholder from "@tiptap/extension-placeholder"
|
||||
import { RichTextEditor } from "@mantine/tiptap"
|
||||
import { useTopToolsStore } from "../useTopToolsStore"
|
||||
import { useKeyEventStore } from "../store"
|
||||
import { useEffect, useRef, type ChangeEvent } from "react"
|
||||
import { Box } from "@mantine/core"
|
||||
import { IconPhoto } from "@tabler/icons-react"
|
||||
import "@mantine/tiptap/styles.css"
|
||||
import { useKeyEventStore } from "../store"
|
||||
import { useTopToolsStore } from "../useTopToolsStore"
|
||||
|
||||
export const splitWord = "@1024-"
|
||||
|
||||
@@ -22,6 +22,30 @@ const getEditorHtml = (rawValue?: string) => {
|
||||
return html ?? rawValue
|
||||
}
|
||||
|
||||
const editorLabels = {
|
||||
boldControlLabel: "加粗",
|
||||
italicControlLabel: "斜体",
|
||||
underlineControlLabel: "下划线",
|
||||
strikeControlLabel: "删除线",
|
||||
clearFormattingControlLabel: "清除格式",
|
||||
codeControlLabel: "行内代码",
|
||||
h1ControlLabel: "一级标题",
|
||||
h2ControlLabel: "二级标题",
|
||||
h3ControlLabel: "三级标题",
|
||||
h4ControlLabel: "四级标题",
|
||||
bulletListControlLabel: "无序列表",
|
||||
orderedListControlLabel: "有序列表",
|
||||
blockquoteControlLabel: "引用",
|
||||
hrControlLabel: "分割线",
|
||||
linkControlLabel: "插入链接",
|
||||
unlinkControlLabel: "移除链接",
|
||||
linkEditorInputLabel: "输入链接地址",
|
||||
linkEditorInputPlaceholder: "请输入链接,例如:https://example.com",
|
||||
linkEditorExternalLink: "在新标签页打开",
|
||||
linkEditorInternalLink: "在当前标签页打开",
|
||||
linkEditorSave: "保存",
|
||||
}
|
||||
|
||||
interface EditorContainerProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
@@ -96,7 +120,10 @@ const EditorContainer = ({
|
||||
borderRadius: "8px",
|
||||
padding: "4px",
|
||||
}}>
|
||||
<RichTextEditor editor={editor} style={{ border: 0 }}>
|
||||
<RichTextEditor
|
||||
editor={editor}
|
||||
labels={editorLabels}
|
||||
style={{ border: 0 }}>
|
||||
<RichTextEditor.Toolbar>
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Bold />
|
||||
@@ -129,8 +156,8 @@ const EditorContainer = ({
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Control
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
aria-label="Upload image"
|
||||
title="Upload image">
|
||||
aria-label="上传图片"
|
||||
title="上传图片">
|
||||
<IconPhoto stroke={1.5} size="1rem" />
|
||||
</RichTextEditor.Control>
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
@@ -379,6 +379,33 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
|
||||
})
|
||||
}
|
||||
|
||||
const getTagVisibility = (tagCategory?: string) => {
|
||||
const { showTags, showTagsConfigs } = useTopToolsStore.getState()
|
||||
if (!showTags) return false
|
||||
if (tagCategory === "mask") return showTagsConfigs.includes("外框")
|
||||
if (tagCategory === "point_text") return showTagsConfigs.includes("点ID")
|
||||
return true
|
||||
}
|
||||
|
||||
const syncObjectItemsVisibility = useCallback(
|
||||
(objectId: number, hide: boolean) => {
|
||||
const sameIdItems = getItemsById(objectId)
|
||||
if (!sameIdItems?.length) return
|
||||
sameIdItems.forEach((item) => {
|
||||
if (hide) {
|
||||
item.visible = false
|
||||
return
|
||||
}
|
||||
if (item.data?.type === "tag") {
|
||||
item.visible = getTagVisibility(item.data?.tag_category)
|
||||
return
|
||||
}
|
||||
item.visible = true
|
||||
})
|
||||
},
|
||||
[getItemsById]
|
||||
)
|
||||
|
||||
const operationHide = useCallback(
|
||||
(operationId: string, hide: boolean) => {
|
||||
updateOperationStatus(activeImage + operationId, "HIDE", hide)
|
||||
@@ -388,19 +415,15 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
|
||||
?.get(operationId)
|
||||
?.map((child) => {
|
||||
updatePathStatus(activeImage + child[0], "HIDE", hide)
|
||||
if (getItemsById(child[0]) && getItemsById(child[0]).length) {
|
||||
getItemsById(child[0]).forEach((item) => {
|
||||
item.visible = !hide
|
||||
})
|
||||
// 隐藏时清空选中状态
|
||||
if (hide) setSelectedItemFalse(child[0])
|
||||
}
|
||||
syncObjectItemsVisibility(child[0], hide)
|
||||
// 隐藏时清空选中状态
|
||||
if (hide) setSelectedItemFalse(child[0])
|
||||
})
|
||||
},
|
||||
[
|
||||
activeImage,
|
||||
getItemsById,
|
||||
storeLabel,
|
||||
syncObjectItemsVisibility,
|
||||
updateOperationStatus,
|
||||
updatePathStatus,
|
||||
]
|
||||
@@ -410,11 +433,9 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
|
||||
(operationId: string, objectId: number, hide: boolean) => {
|
||||
if (hide) {
|
||||
updatePathStatus(activeImage + objectId, "HIDE", hide)
|
||||
if (getItemsById(objectId) && getItemsById(objectId).length) {
|
||||
getItemsById(objectId).forEach((item) => (item.visible = !hide))
|
||||
// 隐藏时清空选中状态
|
||||
setSelectedItemFalse(objectId)
|
||||
}
|
||||
syncObjectItemsVisibility(objectId, hide)
|
||||
// 隐藏时清空选中状态
|
||||
setSelectedItemFalse(objectId)
|
||||
let childrenHideStatus = storeLabel
|
||||
.get(activeImage)
|
||||
?.get(operationId)
|
||||
@@ -427,28 +448,14 @@ const RightObjectTools: React.FC<RightObjectToolsComponentProps> = (props) => {
|
||||
} else {
|
||||
updateOperationStatus(activeImage + operationId, "HIDE", hide)
|
||||
updatePathStatus(activeImage + objectId, "HIDE", hide)
|
||||
const configs = useTopToolsStore.getState().showTagsConfigs
|
||||
if (getItemsById(objectId) && getItemsById(objectId).length)
|
||||
getItemsById(objectId).forEach((item) => {
|
||||
let visible = !hide
|
||||
if (item.data.type === "tag") {
|
||||
if (item.data.tag_category === "mask") {
|
||||
visible = configs.includes("外框")
|
||||
} else if (item.data.tag_category === "point_text") {
|
||||
visible = configs.includes("点ID")
|
||||
} else {
|
||||
visible = true
|
||||
}
|
||||
}
|
||||
item.visible = visible
|
||||
})
|
||||
syncObjectItemsVisibility(objectId, hide)
|
||||
}
|
||||
},
|
||||
[
|
||||
activeImage,
|
||||
getItemById,
|
||||
getItemsById,
|
||||
storeLabel,
|
||||
syncObjectItemsVisibility,
|
||||
updateOperationStatus,
|
||||
updatePathStatus,
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user