From 7771112ac389caca93c3a8e530b699cc714b11c4 Mon Sep 17 00:00:00 2001 From: Kishore <42832651+kishore03109@users.noreply.github.com> Date: Wed, 6 Dec 2023 14:03:16 +0800 Subject: [PATCH] fix p1 accordion issues --- .../components/BlockWrapper/BlockWrapper.tsx | 7 +- .../extensions/Details/IsomerDetailGroup.ts | 51 ++--- .../Details/IsomerDetailGroupView.tsx | 186 ++++++++++-------- .../extensions/Details/IsomerDetails.ts | 23 +++ .../isomer-cms/pages/Editor.module.scss | 3 + 5 files changed, 155 insertions(+), 115 deletions(-) diff --git a/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx b/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx index 95d61bbcca..f68ad268df 100644 --- a/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx +++ b/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx @@ -7,16 +7,19 @@ import "./styles.scss" interface BlockWrapperProps { name: string isSelected: boolean + otherButtons?: JSX.Element } export const BlockWrapper = ({ name, isSelected, + otherButtons, children, }: PropsWithChildren): JSX.Element => { return ( + {isSelected && <>{otherButtons}} - {name} + + {name} + ReturnType + unsetDetailsGroup: () => ReturnType + removeDetail: () => ReturnType } } } @@ -32,7 +33,7 @@ export const IsomerDetailsGroup = Node.create({ atom: true, draggable: true, content: "details+", - defining: true, + definingForContext: true, isolating: true, allowGapCursor: false, @@ -91,7 +92,6 @@ export const IsomerDetailsGroup = Node.create({ ], } ) - .setTextSelection(blockRange.start + 2) .run() }, appendDetail: (startPos: number, endPos: number) => ({ @@ -152,6 +152,19 @@ export const IsomerDetailsGroup = Node.create({ ) .run() }, + removeDetail: () => ({ chain, state }) => { + const { selection } = state + + const currNode = findParentNodeClosestToPos(selection.$anchor, (t) => { + return t.type.name === "details" + }) + + if (currNode === undefined) { + return false + } + + return chain().deleteNode(currNode.node.type).run() + }, changeDetailGroupBackground: ( backgroundColor: AccordionBackgroundType @@ -197,37 +210,13 @@ export const IsomerDetailsGroup = Node.create({ ) .run() }, - unsetDetailsGroup: () => ({ - chain, - state, - }: { - state: EditorState - chain: ChainedCommands - }) => { - const { selection } = state - const currNode = findParentNode((t) => t.type === this.type)(selection) - if (!currNode) return false - const startPos = currNode.pos - const range = { from: startPos, to: startPos + currNode.node.nodeSize } - - // TODO: check type - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - return chain() - .insertContentAt(range, []) - .setTextSelection(startPos + 1) - .run() + unsetDetailsGroup: () => ({ tr, editor }) => { + editor.state.selection.replace(tr) + return true }, } }, - // TODO: add keyboard shortcuts for backspace - // addKeyboardShortcuts() { - // return { - // "Backspace": () => this.editor.commands.detailGroup.setDetailsGroup(), - // } - // } - addAttributes() { return { backgroundColor: { diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx index 87a1c313e7..6d35dbc046 100644 --- a/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx +++ b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx @@ -1,9 +1,11 @@ -import { Box, Icon, IconButton, Text } from "@chakra-ui/react" -import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react" -import { BiPencil, BiPlus } from "react-icons/bi" +import { Box, HStack, Icon, IconButton, Tooltip } from "@chakra-ui/react" +import { NodeViewContent, NodeViewProps } from "@tiptap/react" +import { BiPencil, BiPlus, BiTrash } from "react-icons/bi" import { useEditorDrawerContext } from "contexts/EditorDrawerContext" +import { BlockWrapper } from "../../components/BlockWrapper" + export const IsomerDetailGroupView = ({ node, editor, @@ -13,94 +15,112 @@ export const IsomerDetailGroupView = ({ const endPos = startPos + node.nodeSize const activePos = editor.state.selection.anchor const selected = activePos >= startPos && activePos <= endPos + const { onDrawerOpen } = useEditorDrawerContext() - return ( - - - {selected && ( - - Accordion - - )} - + + - - {selected && ( - <> - + + - } - onClick={() => { - editor.chain().appendDetail(startPos, endPos).run() - }} - position="absolute" - bottom="0" - left="50%" - transform="translateX(-50%)" - zIndex={2} - background="white" + - - + + + { + editor.chain().focus().unsetDetailsGroup().run() + }} + bgColor="transparent" + border="none" h="1.75rem" + w="1.75rem" + minH="1.75rem" minW="1.75rem" - color="base.content.medium" - borderColor="base.content.medium" + p="0.25rem" + aria-label="delete accordion block" > - } - onClick={() => { - onDrawerOpen("accordion")() - }} - right={0} - top={0} - position="absolute" - zIndex={2} - background="white" - minH="1.75rem" - h="1.75rem" - minW="1.75rem" - color="base.content.medium" - borderColor="base.content.medium" + - - - )} - + + + + + + + } + onClick={() => { + editor.chain().appendDetail(startPos, endPos).run() + }} + position="absolute" + bottom="0" + left="50%" + transform="translateX(-50%)" + zIndex={2} + background="white" + /> + + + ) + return ( + + + - + ) } diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts b/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts index 4233762720..8b082d5292 100644 --- a/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts +++ b/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts @@ -68,4 +68,27 @@ export const IsomerDetails = Details.extend({ ) } }, + + addKeyboardShortcuts() { + return { + Backspace: () => { + const { schema, selection } = this.editor.state + const { empty, $anchor } = selection + + if (!empty || $anchor.parent.type !== schema.nodes.detailsSummary) { + return false + } + + if ($anchor.parentOffset !== 0) { + return this.editor.commands.command(({ tr }) => { + const start = $anchor.pos - 1 + const end = $anchor.pos + tr.delete(start, end) + return true + }) + } + return this.editor.commands.removeDetail() + }, + } + }, }) diff --git a/src/styles/isomer-cms/pages/Editor.module.scss b/src/styles/isomer-cms/pages/Editor.module.scss index 44eadfbd5c..f87e2f8370 100644 --- a/src/styles/isomer-cms/pages/Editor.module.scss +++ b/src/styles/isomer-cms/pages/Editor.module.scss @@ -178,6 +178,9 @@ details.isomer-details summary { justify-content: space-between; align-items: center; padding: 1rem; + &:empty { + justify-content: flex-end; + } } details.isomer-details summary::marker {