fix p1 accordion issues

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<BlockWrapperProps>): JSX.Element => {
   return (
     <Box as={NodeViewWrapper}>
       <Box position="relative" maxW="36.5rem" data-group>
+        {isSelected && <>{otherButtons}</>}
         <Box
           _groupHover={{
             display: "block",
@@ -29,7 +32,9 @@ export const BlockWrapper = ({
           textColor="white"
           p="0.25rem"
         >
-          <Text textStyle="caption-1">{name}</Text>
+          <Text textStyle="caption-1" contentEditable="false">
+            {name}
+          </Text>
         </Box>
         <Box
           className="drag-handle"

src/layouts/components/Editor/extensions/Details/IsomerDetailGroup.ts

@@ -1,6 +1,5 @@
-import { ChainedCommands, findParentNode, Node } from "@tiptap/core"
+import { findParentNode, findParentNodeClosestToPos, Node } from "@tiptap/core"
 import { NodeRange, Slice } from "@tiptap/pm/model"
-import { EditorState } from "@tiptap/pm/state"
 import { mergeAttributes, ReactNodeViewRenderer } from "@tiptap/react"
 
 import { AccordionBackgroundType } from "types/editPage"
@@ -22,6 +21,8 @@ declare module "@tiptap/core" {
       changeDetailGroupBackground: (
         backgroundColor: AccordionBackgroundType
       ) => ReturnType
+      unsetDetailsGroup: () => ReturnType
+      removeDetail: () => ReturnType
     }
   }
 }
@@ -32,7 +33,7 @@ export const IsomerDetailsGroup = Node.create<IsomerDetailGroupOptions>({
   atom: true,
   draggable: true,
   content: "details+",
-  defining: true,
+  definingForContext: true,
   isolating: true,
   allowGapCursor: false,
 
@@ -91,7 +92,6 @@ export const IsomerDetailsGroup = Node.create<IsomerDetailGroupOptions>({
               ],
             }
           )
-          .setTextSelection(blockRange.start + 2)
           .run()
       },
       appendDetail: (startPos: number, endPos: number) => ({
@@ -152,6 +152,19 @@ export const IsomerDetailsGroup = Node.create<IsomerDetailGroupOptions>({
           )
           .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<IsomerDetailGroupOptions>({
           )
           .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: {

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 (
-    <NodeViewWrapper data-drag-handle>
-      <Box position="relative">
-        {selected && (
-          <Box
-            position="absolute"
-            top="calc(-1.5rem - 2px)"
-            left="-2px"
-            zIndex="1"
-            backgroundColor="#055AFF"
-            textColor="white"
-            p="0.25rem"
-          >
-            <Text textStyle="caption-1">Accordion</Text>
-          </Box>
-        )}
-        <Box
-          outline={selected ? "2px solid #055AFF" : undefined}
-          py="0.75rem"
-          w="calc(100% - 20px)"
+  const otherButtons = (
+    <>
+      <Box
+        display={selected ? "block" : "none"}
+        position="absolute"
+        width="100%"
+      >
+        <HStack
+          borderColor="base.divider.medium"
+          display="flex"
+          justifyContent="flex-end"
         >
-          <NodeViewContent />
-          {selected && (
-            <>
-              <Box
-                position="absolute"
-                bottom="0"
-                left="50%"
-                transform="translateX(-50%)"
-                mb="-1.5rem"
-                zIndex={1}
-                background="white"
-                h="2.75rem"
-                w="2.75rem"
+          <Box backgroundColor={selected ? "white" : "transparent"}>
+            <Tooltip label="Edit accordion grid" hasArrow placement="top">
+              <IconButton
+                _hover={{ bg: "gray.100" }}
+                _active={{ bg: "gray.200" }}
+                onClick={onDrawerOpen("accordion")}
+                bgColor="transparent"
+                border="none"
+                h="1.75rem"
+                w="1.75rem"
+                minH="1.75rem"
+                minW="1.75rem"
+                p="0.25rem"
+                aria-label="edit accordion block"
               >
-                <IconButton
-                  variant="outline"
-                  aria-label="Add accordion"
-                  icon={<Icon as={BiPlus} w="1.5rem" h="1.5rem" />}
-                  onClick={() => {
-                    editor.chain().appendDetail(startPos, endPos).run()
-                  }}
-                  position="absolute"
-                  bottom="0"
-                  left="50%"
-                  transform="translateX(-50%)"
-                  zIndex={2}
-                  background="white"
+                <Icon
+                  as={BiPencil}
+                  fontSize="1.25rem"
+                  color="base.content.medium"
                 />
-              </Box>
-              <Box
-                background="white"
-                zIndex={1}
-                right={0}
-                top={0}
-                mt="-1rem"
-                mr="0.5rem"
-                position="absolute"
-                minH="1.75rem"
+              </IconButton>
+            </Tooltip>
+            <Tooltip label="Delete accordion " hasArrow placement="top">
+              <IconButton
+                _hover={{ bg: "gray.100" }}
+                _active={{ bg: "gray.200" }}
+                onClick={() => {
+                  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"
               >
-                <IconButton
-                  variant="outline"
-                  aria-label="Edit accordion"
-                  icon={<Icon as={BiPencil} w="1.25rem" h="1.25rem" />}
-                  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"
+                <Icon
+                  as={BiTrash}
+                  fontSize="1.25rem"
+                  color="interaction.critical.default"
                 />
-              </Box>
-            </>
-          )}
-        </Box>
+              </IconButton>
+            </Tooltip>
+          </Box>
+        </HStack>
+      </Box>
+      <Box
+        position="absolute"
+        bottom="0"
+        left="50%"
+        transform="translateX(-50%)"
+        mb="-1.5rem"
+        zIndex={1}
+        background="white"
+        h="2.75rem"
+        w="2.75rem"
+      >
+        <IconButton
+          variant="outline"
+          aria-label="Add accordion"
+          icon={<Icon as={BiPlus} w="1.5rem" h="1.5rem" />}
+          onClick={() => {
+            editor.chain().appendDetail(startPos, endPos).run()
+          }}
+          position="absolute"
+          bottom="0"
+          left="50%"
+          transform="translateX(-50%)"
+          zIndex={2}
+          background="white"
+        />
+      </Box>
+    </>
+  )
+  return (
+    <BlockWrapper
+      name="Accordion grid"
+      isSelected={selected}
+      otherButtons={otherButtons}
+      padding-top="0.5rem"
+      padding-bottom="0.5rem"
+    >
+      <Box
+        borderColor="base.divider.strong"
+        borderWidth="1px"
+        h="100%"
+        w="100%"
+      >
+        <NodeViewContent />
       </Box>
-    </NodeViewWrapper>
+    </BlockWrapper>
   )
 }

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()
+      },
+    }
+  },
 })

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 {