From a33c5d9215512f739e08bd8fb81d27e2de8caf1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassanad94@gmail.com>
Date: Wed, 5 Jun 2024 15:57:15 +0200
Subject: [PATCH 1/4] feature: accordion

---
 .../components/controls/accordion-control.tsx | 250 ++++++++++++++++++
 .../controls/html-editor-control.tsx          |  14 +-
 .../src/components/controls/index.ts          |   1 +
 .../sn-editor-react/src/components/editor.tsx |  49 ++++
 .../src/components/menu-bar.tsx               |  23 +-
 .../src/context/localization-context.tsx      |   7 +
 .../sn-editor-react/src/extension-list.ts     |  25 +-
 .../src/extensions/PanelGroup.ts              |  56 ++++
 .../src/extensions/ParagraphExtend.ts         |  26 ++
 .../sn-editor-react/src/extensions/div.ts     |  56 ++++
 .../sn-editor-react/src/extensions/index.ts   |  10 +
 .../src/extensions/linkExtend.ts              |  20 ++
 .../src/extensions/panel-body.ts              |  33 +++
 .../src/extensions/panel-collapse.ts          |  41 +++
 .../src/extensions/panel-heading.ts           |  33 +++
 .../src/extensions/panel-icon.ts              |  43 +++
 .../src/extensions/panel-link.ts              |  55 ++++
 .../src/extensions/panel-title.ts             |  54 ++++
 .../sn-editor-react/src/extensions/panel.ts   |  31 +++
 19 files changed, 819 insertions(+), 8 deletions(-)
 create mode 100644 packages/sn-editor-react/src/components/controls/accordion-control.tsx
 create mode 100644 packages/sn-editor-react/src/extensions/PanelGroup.ts
 create mode 100644 packages/sn-editor-react/src/extensions/ParagraphExtend.ts
 create mode 100644 packages/sn-editor-react/src/extensions/div.ts
 create mode 100644 packages/sn-editor-react/src/extensions/linkExtend.ts
 create mode 100644 packages/sn-editor-react/src/extensions/panel-body.ts
 create mode 100644 packages/sn-editor-react/src/extensions/panel-collapse.ts
 create mode 100644 packages/sn-editor-react/src/extensions/panel-heading.ts
 create mode 100644 packages/sn-editor-react/src/extensions/panel-icon.ts
 create mode 100644 packages/sn-editor-react/src/extensions/panel-link.ts
 create mode 100644 packages/sn-editor-react/src/extensions/panel-title.ts
 create mode 100644 packages/sn-editor-react/src/extensions/panel.ts

diff --git a/packages/sn-editor-react/src/components/controls/accordion-control.tsx b/packages/sn-editor-react/src/components/controls/accordion-control.tsx
new file mode 100644
index 000000000..bf0d885e6
--- /dev/null
+++ b/packages/sn-editor-react/src/components/controls/accordion-control.tsx
@@ -0,0 +1,250 @@
+import {
+  Button,
+  createStyles,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  IconButtonProps,
+  makeStyles,
+  TextField,
+  Theme,
+  Tooltip,
+  useTheme,
+} from '@material-ui/core'
+import { ArrowDropDown, Close, DragHandle } from '@material-ui/icons'
+
+import { Editor } from '@tiptap/react'
+import React, { FC, useCallback, useRef, useState } from 'react'
+import { renderToString } from 'react-dom/server'
+import { useLocalization } from '../../hooks'
+
+const useStyles = makeStyles((theme: Theme) => {
+  return createStyles({
+    ListIcon: {
+      paddingLeft: '0px',
+      '& .down-arrow': {
+        position: 'absolute',
+        right: '0',
+        marginRight: '-6px',
+        top: '0',
+        marginTop: '3px',
+      },
+    },
+    accordion: {
+      display: 'flex',
+      flexDirection: 'column',
+      rowGap: '15px',
+      border: '2px solid',
+      borderColor: theme.palette.primary.main,
+      position: 'relative',
+      padding: '10px',
+      borderRadius: '10px',
+      '& .panel-close-button': {
+        position: 'absolute',
+        right: '0',
+        top: '0',
+      },
+    },
+    accordionContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      rowGap: '20px',
+    },
+    actionPanel: {
+      display: 'flex',
+      flex: 1,
+      justifyContent: 'space-between',
+    },
+    dialog: {
+      '& .MuiDialogContent-root': {
+        padding: '8px 15px',
+      },
+    },
+  })
+})
+
+interface AccordionControlProps {
+  editor: Editor
+  buttonProps?: Partial<IconButtonProps>
+}
+
+type TAccordions = {
+  title: string
+  body: string
+}
+
+type PanelPros = {
+  title: string
+  body: string
+}
+
+const Panel = ({ title, body }: PanelPros) => {
+  return (
+    <div className="panel panel-default">
+      <div className="panel-heading">
+        <h3 className="panel-title">
+          <a href="#collapse1716279617835-0" className="collapsed">
+            <i className="svg" />
+            {title}
+          </a>
+        </h3>
+      </div>
+      <div className="panel-collapse collapse">
+        <div className="panel-body">{body}</div>
+      </div>
+    </div>
+  )
+}
+
+const initialAccordion = { title: '', body: '' }
+
+export const AccordionControl: FC<AccordionControlProps> = ({ buttonProps, editor }) => {
+  const [open, setOpen] = useState(false)
+
+  const [accordions, setAccordions] = useState<TAccordions[]>([initialAccordion])
+  const form = useRef<HTMLFormElement>(null)
+
+  const theme = useTheme()
+
+  const classes = useStyles(theme)
+  const localization = useLocalization()
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = useCallback(() => {
+    setAccordions([initialAccordion])
+
+    setOpen(false)
+  }, [])
+
+  const handleSubmit = () => {
+    if (accordions.length === 0) {
+      handleClose()
+      return
+    }
+
+    if (!form.current?.reportValidity()) {
+      return
+    }
+
+    const panelGroup = renderToString(
+      <>
+        <div className="panel-group">
+          {accordions.map((item, index) => {
+            return <Panel key={index} title={item.title} body={item.body} />
+          })}
+        </div>
+        {/* eslint-disable-next-line react/self-closing-comp*/}
+        <p></p>
+      </>,
+    )
+
+    editor.chain().focus().insertContent(panelGroup).run()
+
+    handleClose()
+  }
+
+  const handleClosePanel = (index: number) => {
+    setAccordions((prev) => {
+      return prev.filter((_, i) => i !== index)
+    })
+  }
+
+  return (
+    <>
+      <Tooltip title={localization.accordionControl.title}>
+        <IconButton className={classes.ListIcon} onClick={handleClickOpen} {...buttonProps}>
+          <ArrowDropDown className="down-arrow" />
+          <DragHandle />
+        </IconButton>
+      </Tooltip>
+      <Dialog
+        open={open}
+        className={classes.dialog}
+        onClose={handleSubmit}
+        aria-labelledby="form-dialog-title"
+        maxWidth="md"
+        fullWidth>
+        <DialogTitle id="form-dialog-title">{localization.accordionControl.title}</DialogTitle>
+        <DialogContent>
+          <form ref={form} className={classes.accordionContainer}>
+            {accordions.map((accordion, index) => {
+              return (
+                <div key={index} className={classes.accordion}>
+                  <Tooltip title={localization.accordionControl.closePanel}>
+                    <IconButton className="panel-close-button" onClick={() => handleClosePanel(index)} {...buttonProps}>
+                      <Close color="error" />
+                    </IconButton>
+                  </Tooltip>
+
+                  <TextField
+                    autoFocus
+                    margin="dense"
+                    label={localization.accordionControl.title}
+                    type="text"
+                    required
+                    fullWidth
+                    value={accordion.title}
+                    onChange={(e) => {
+                      const newAccordions = [...accordions]
+
+                      newAccordions[index] = { ...accordions[index], title: e.target.value }
+
+                      setAccordions(newAccordions)
+                    }}
+                  />
+
+                  <TextField
+                    multiline
+                    autoFocus
+                    margin="dense"
+                    label={localization.accordionControl.body}
+                    type="text"
+                    required
+                    fullWidth
+                    value={accordion.body}
+                    onChange={(e) => {
+                      const newAccordions = [...accordions]
+
+                      newAccordions[index] = { ...accordions[index], body: e.target.value }
+
+                      setAccordions(newAccordions)
+                    }}
+                  />
+                </div>
+              )
+            })}
+          </form>
+        </DialogContent>
+        <DialogActions>
+          <div className={classes.actionPanel}>
+            <Button
+              onClick={() =>
+                setAccordions((prev) => {
+                  return [...prev, initialAccordion]
+                })
+              }
+              title={localization.accordionControl.addPanel}>
+              {localization.accordionControl.addPanel}
+            </Button>
+
+            <div className="close-actions">
+              <Button onClick={handleClose}>{localization.common.cancel}</Button>
+              <Button
+                onClick={() => {
+                  handleSubmit()
+                }}
+                color="primary">
+                {localization.imageControl.submit}
+              </Button>
+            </div>
+          </div>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
diff --git a/packages/sn-editor-react/src/components/controls/html-editor-control.tsx b/packages/sn-editor-react/src/components/controls/html-editor-control.tsx
index a410f737a..be14c8d11 100644
--- a/packages/sn-editor-react/src/components/controls/html-editor-control.tsx
+++ b/packages/sn-editor-react/src/components/controls/html-editor-control.tsx
@@ -28,6 +28,11 @@ export const HTMLEditorControl: FC<HTMLEditorControlProps> = ({ editor, buttonPr
     setOpen(true)
   }
 
+  const saveHTMLContent = () => {
+    editor.chain().focus().setContent(html, true).run()
+    setOpen(false)
+  }
+
   const handleClose = () => {
     if (editor.getHTML() === html) {
       setOpen(false)
@@ -38,9 +43,7 @@ export const HTMLEditorControl: FC<HTMLEditorControlProps> = ({ editor, buttonPr
     if (!confirmResult) {
       return
     }
-    editor.commands.setContent(html)
-
-    setOpen(false)
+    saveHTMLContent()
   }
 
   return (
@@ -60,7 +63,7 @@ export const HTMLEditorControl: FC<HTMLEditorControlProps> = ({ editor, buttonPr
         aria-labelledby="html-editor-control-title"
         fullWidth
         maxWidth="lg"
-        onExited={() => { }}>
+        onExited={() => {}}>
         <DialogTitle id="html-editor-control-title">{localization.HTMLEditorControl.title}</DialogTitle>
         <DialogContent>
           <HtmlEditor initialState={editor.getHTML()} fieldOnChange={setHtml} />
@@ -74,8 +77,7 @@ export const HTMLEditorControl: FC<HTMLEditorControlProps> = ({ editor, buttonPr
           </Button>
           <Button
             onClick={() => {
-              editor.commands.setContent(html)
-              setOpen(false)
+              saveHTMLContent()
             }}
             color="primary">
             {localization.linkControl.submit}
diff --git a/packages/sn-editor-react/src/components/controls/index.ts b/packages/sn-editor-react/src/components/controls/index.ts
index 77af3fb13..792769dab 100644
--- a/packages/sn-editor-react/src/components/controls/index.ts
+++ b/packages/sn-editor-react/src/components/controls/index.ts
@@ -3,3 +3,4 @@ export * from './link-control'
 export * from './table-control'
 export * from './typography-control'
 export * from './html-editor-control'
+export * from './accordion-control'
diff --git a/packages/sn-editor-react/src/components/editor.tsx b/packages/sn-editor-react/src/components/editor.tsx
index 5c612f406..c76fae3f8 100644
--- a/packages/sn-editor-react/src/components/editor.tsx
+++ b/packages/sn-editor-react/src/components/editor.tsx
@@ -23,6 +23,55 @@ const useStyles = makeStyles((theme) => {
       borderRadius: commonStyles.editorBorderRadius,
       border: theme.palette.type === 'dark' ? commonStyles.editorBorder : 'unset',
 
+      '& .panel-group': {
+        paddingBlock: '10px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        rowGap: '20px',
+        '& .panel': {
+          display: 'inline-block',
+          border: '2px solid',
+          borderColor: theme.palette.primary.main,
+          borderRadius: '8px',
+          position: 'relative',
+          maxWidth: '100%',
+          paddingBlock: '5px',
+          '& .panel-heading': {
+            borderBottom: '1px solid',
+            borderBottomColor: theme.palette.primary.main,
+            '& h3': {
+              margin: '0px',
+              padding: '0px 30px 5px 10px',
+              display: 'block',
+              '& a ': {
+                textDecoration: 'none',
+                color: 'currentColor',
+                letterSpacing: '1px',
+                fontWeight: '500',
+              },
+            },
+          },
+          '& .panel-body': {
+            paddingInline: '10px',
+            paddingTop: '10px',
+            '& .panel-collapse': {
+              paddingRight: '10px',
+            },
+          },
+          '&:after': {
+            content: '"➧"',
+            position: 'absolute',
+            top: '0',
+            right: '0',
+            transform: 'rotate(90deg)',
+            marginTop: '-1px',
+            fontSize: '26px',
+            marginRight: '5px',
+          },
+        },
+      },
+
       '& .ProseMirror': {
         outline: 0,
 
diff --git a/packages/sn-editor-react/src/components/menu-bar.tsx b/packages/sn-editor-react/src/components/menu-bar.tsx
index af6c52d68..00161a577 100644
--- a/packages/sn-editor-react/src/components/menu-bar.tsx
+++ b/packages/sn-editor-react/src/components/menu-bar.tsx
@@ -15,7 +15,14 @@ import { Editor } from '@tiptap/react'
 import React, { FC } from 'react'
 import { useLocalization } from '../hooks'
 import { getCommonStyles } from '../styles'
-import { HTMLEditorControl, ImageControl, LinkControl, TableControl, TypographyControl } from './controls'
+import {
+  AccordionControl,
+  HTMLEditorControl,
+  ImageControl,
+  LinkControl,
+  TableControl,
+  TypographyControl,
+} from './controls'
 
 const useStyles = makeStyles((theme) => {
   const commonStyles = getCommonStyles(theme)
@@ -70,6 +77,16 @@ export const MenuBar: FC<MenuBarProps> = ({ editor }) => {
     <div className={classes.root}>
       <TypographyControl editor={editor} />
       <div className={classes.divider} />
+      {/* <Tooltip title={`${localization.menubar.bold}`}>
+        <IconButton
+          onClick={() =>
+            editor.chain().focus().setYoutubeVideo({ src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' }).run()
+          }
+          color={editor.isActive('bold') ? 'primary' : 'default'}
+          classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
+          <strong>B</strong>
+        </IconButton>
+      </Tooltip> */}
       <Tooltip title={`${localization.menubar.bold} (Ctrl + B)`}>
         <IconButton
           onClick={() => editor.chain().focus().toggleBold().run()}
@@ -201,6 +218,10 @@ export const MenuBar: FC<MenuBarProps> = ({ editor }) => {
           <RedoIcon />
         </IconButton>
       </Tooltip>
+      <AccordionControl
+        editor={editor}
+        buttonProps={{ classes: { root: classes.button, colorPrimary: classes.buttonPrimary } }}
+      />
       <HTMLEditorControl
         editor={editor}
         buttonProps={{ classes: { root: classes.button, colorPrimary: classes.buttonPrimary } }}
diff --git a/packages/sn-editor-react/src/context/localization-context.tsx b/packages/sn-editor-react/src/context/localization-context.tsx
index 4222d985c..c602c3eb0 100644
--- a/packages/sn-editor-react/src/context/localization-context.tsx
+++ b/packages/sn-editor-react/src/context/localization-context.tsx
@@ -42,6 +42,13 @@ export const defaultLocalization = {
     mergeCells: 'Merge cells',
     splitCell: 'Split cell',
   },
+  accordionControl: {
+    title: 'Accordions',
+    body: 'Accordion Body',
+    addPanel: 'Add Panel',
+    submit: 'Insert',
+    closePanel: 'Close Panel',
+  },
   imageControl: {
     title: 'Insert image',
     submit: 'Insert',
diff --git a/packages/sn-editor-react/src/extension-list.ts b/packages/sn-editor-react/src/extension-list.ts
index 8e8d55bf0..9db08d34c 100644
--- a/packages/sn-editor-react/src/extension-list.ts
+++ b/packages/sn-editor-react/src/extension-list.ts
@@ -22,7 +22,19 @@ import { TableRow } from '@tiptap/extension-table-row'
 import { Text } from '@tiptap/extension-text'
 import { TextAlign } from '@tiptap/extension-text-align'
 import { Underline } from '@tiptap/extension-underline'
-import { SensenetImage } from './extensions'
+import {
+  LinkExtend,
+  Panel,
+  PanelBody,
+  PanelColapse,
+  PanelGroup,
+  PanelHeading,
+  PanelTitle,
+  ParagraphExtend,
+  SensenetImage,
+} from './extensions'
+import { PanelIcon } from './extensions/panel-icon'
+import { PanelLink } from './extensions/panel-link'
 
 interface ExtensionOptions {
   placeholder: Partial<PlaceholderOptions>
@@ -35,6 +47,14 @@ export const createExtensions = (options?: ExtensionOptions) => [
   Code.configure(),
   CodeBlock.configure(),
   Document.configure(),
+  Panel.configure(),
+  PanelGroup.configure(),
+  PanelColapse.configure(),
+  PanelHeading.configure(),
+  PanelBody.configure(),
+  PanelIcon.configure(),
+  PanelLink.configure(),
+  PanelTitle.configure(),
   Dropcursor.configure(),
   Gapcursor.configure(),
   HardBreak.configure(),
@@ -44,10 +64,13 @@ export const createExtensions = (options?: ExtensionOptions) => [
   Link.configure({
     openOnClick: false,
   }),
+  LinkExtend.configure(),
   ListItem.configure(),
   OrderedList.configure(),
   Paragraph.configure(),
+  ParagraphExtend.configure(),
   Placeholder.configure(options?.placeholder),
+  PanelColapse.configure(),
   SensenetImage.configure(),
   Table.configure(),
   TableCell.configure(),
diff --git a/packages/sn-editor-react/src/extensions/PanelGroup.ts b/packages/sn-editor-react/src/extensions/PanelGroup.ts
new file mode 100644
index 000000000..630c5eae9
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/PanelGroup.ts
@@ -0,0 +1,56 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export const PanelGroup = Node.create({
+  name: 'panelGroup',
+
+  priority: 1100,
+
+  draggable: true,
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            class: element.getAttribute('class'),
+          }
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.class) {
+            return {}
+          }
+          return {
+            class: attributes.class,
+          }
+        },
+      },
+      style: {
+        renderHTML: (attributes) => {
+          if (!attributes.style) {
+            return {}
+          }
+          return {
+            style: attributes.style,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.panel-group',
+      },
+    ]
+  },
+
+  group: 'block',
+
+  content: 'panel*',
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes((this.options as any).HTMLAttributes, HTMLAttributes), 0]
+  },
+})
diff --git a/packages/sn-editor-react/src/extensions/ParagraphExtend.ts b/packages/sn-editor-react/src/extensions/ParagraphExtend.ts
new file mode 100644
index 000000000..febe8aad4
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/ParagraphExtend.ts
@@ -0,0 +1,26 @@
+import { Paragraph } from '@tiptap/extension-paragraph'
+
+export const ParagraphExtend = Paragraph.extend({
+  addAttributes() {
+    return {
+      style: {
+        renderHTML: (attributes) => {
+          if (!attributes.style) {
+            return {}
+          }
+          return {
+            style: attributes.style,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'p' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['p', HTMLAttributes, 0]
+  },
+})
diff --git a/packages/sn-editor-react/src/extensions/div.ts b/packages/sn-editor-react/src/extensions/div.ts
new file mode 100644
index 000000000..00484d634
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/div.ts
@@ -0,0 +1,56 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export const DivNode = Node.create({
+  name: 'div',
+
+  priority: 1100,
+
+  draggable: true,
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            class: element.getAttribute('class'),
+          }
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.class) {
+            return {}
+          }
+          return {
+            class: attributes.class,
+          }
+        },
+      },
+      style: {
+        renderHTML: (attributes) => {
+          if (!attributes.style) {
+            return {}
+          }
+          return {
+            style: attributes.style,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div',
+      },
+    ]
+  },
+
+  group: 'block',
+
+  content: 'block*',
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes((this.options as any).HTMLAttributes, HTMLAttributes), 0]
+  },
+})
diff --git a/packages/sn-editor-react/src/extensions/index.ts b/packages/sn-editor-react/src/extensions/index.ts
index 556dbfdf8..d3c7b0787 100644
--- a/packages/sn-editor-react/src/extensions/index.ts
+++ b/packages/sn-editor-react/src/extensions/index.ts
@@ -1 +1,11 @@
 export * from './image'
+export * from './div'
+export * from './ParagraphExtend'
+export * from './panel-body'
+export * from './linkExtend'
+export * from './panel-icon'
+export * from './PanelGroup'
+export * from './panel-collapse'
+export * from './panel'
+export * from './panel-heading'
+export * from './panel-title'
diff --git a/packages/sn-editor-react/src/extensions/linkExtend.ts b/packages/sn-editor-react/src/extensions/linkExtend.ts
new file mode 100644
index 000000000..10b09c8cb
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/linkExtend.ts
@@ -0,0 +1,20 @@
+import { Link } from '@tiptap/extension-link'
+
+export const LinkExtend = Link.extend({
+  addAttributes() {
+    return {
+      style: {
+        renderHTML: (attributes) => {
+          if (!attributes.style) {
+            return {}
+          }
+          return {
+            style: attributes.style,
+          }
+        },
+      },
+    }
+  },
+
+  content: 'block',
+})
diff --git a/packages/sn-editor-react/src/extensions/panel-body.ts b/packages/sn-editor-react/src/extensions/panel-body.ts
new file mode 100644
index 000000000..6236088aa
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/panel-body.ts
@@ -0,0 +1,33 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export const PanelBody = Node.create({
+  name: 'panelBody', // It's recommended to give your nodes a unique name
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.panel-body',
+      },
+    ]
+  },
+
+  group: 'panel',
+
+  content: 'inline*',
+
+  draggable: true,
+
+  priority: 1100,
+
+  addAttributes() {
+    return {
+      class: {
+        default: 'panel-body',
+      },
+    }
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes((this.options as any).HTMLAttributes, HTMLAttributes), 0]
+  },
+})
diff --git a/packages/sn-editor-react/src/extensions/panel-collapse.ts b/packages/sn-editor-react/src/extensions/panel-collapse.ts
new file mode 100644
index 000000000..2ec22d27c
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/panel-collapse.ts
@@ -0,0 +1,41 @@
+import { Node } from '@tiptap/core'
+
+export const PanelColapse = Node.create({
+  name: 'panelCollapse', // It's recommended to give your nodes a unique name
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.panel-collapse',
+      },
+    ]
+  },
+
+  group: 'panel',
+
+  content: 'panelBody',
+
+  draggable: true,
+
+  priority: 1100,
+
+  addAttributes() {
+    return {
+      style: {
+        renderHTML: (attributes) => {
+          if (!attributes.style) {
+            return {}
+          }
+          return {
+            style: attributes.style,
+          }
+        },
+      },
+    }
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    HTMLAttributes.class = 'panel-collapse collapse'
+    return ['div', HTMLAttributes, 0]
+  },
+})
diff --git a/packages/sn-editor-react/src/extensions/panel-heading.ts b/packages/sn-editor-react/src/extensions/panel-heading.ts
new file mode 100644
index 000000000..3db5f2ae8
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/panel-heading.ts
@@ -0,0 +1,33 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export const PanelHeading = Node.create({
+  name: 'panelHeading', // It's recommended to give your nodes a unique name
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.panel-heading',
+      },
+    ]
+  },
+
+  group: 'panel',
+
+  content: 'panelTitle',
+
+  draggable: true,
+
+  priority: 1100,
+
+  addAttributes() {
+    return {
+      class: {
+        default: 'panel-heading',
+      },
+    }
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes((this.options as any).HTMLAttributes, HTMLAttributes), 0]
+  },
+})
diff --git a/packages/sn-editor-react/src/extensions/panel-icon.ts b/packages/sn-editor-react/src/extensions/panel-icon.ts
new file mode 100644
index 000000000..8a0a758ab
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/panel-icon.ts
@@ -0,0 +1,43 @@
+import { Mark, mergeAttributes } from '@tiptap/core'
+
+export const PanelIcon = Mark.create({
+  name: 'panelIcon',
+
+  draggable: true,
+
+  priority: 1200,
+
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+      },
+      target: {
+        default: (this.options as any).HTMLAttributes?.target,
+      },
+      rel: {
+        default: (this.options as any).HTMLAttributes?.rel,
+      },
+      class: {
+        default: (this.options as any).HTMLAttributes?.class,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a.collapsed',
+        getAttrs: (dom) => {
+          const href = (dom as HTMLElement).getAttribute('href')
+
+          return { href }
+        },
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['a', mergeAttributes((this.options as any).HTMLAttributes, HTMLAttributes), ['i', { class: 'svg' }]]
+  },
+})
diff --git a/packages/sn-editor-react/src/extensions/panel-link.ts b/packages/sn-editor-react/src/extensions/panel-link.ts
new file mode 100644
index 000000000..786f073bd
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/panel-link.ts
@@ -0,0 +1,55 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export const PanelLink = Node.create({
+  name: 'panelLink',
+
+  draggable: true,
+
+  priority: 1200,
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            class: element.getAttribute('class'),
+          }
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.class) {
+            return {}
+          }
+          return {
+            class: attributes.class,
+          }
+        },
+      },
+      style: {
+        renderHTML: (attributes) => {
+          if (!attributes.style) {
+            return {}
+          }
+          return {
+            style: attributes.style,
+          }
+        },
+      },
+    }
+  },
+
+  content: 'inline',
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a.collapsed',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    HTMLAttributes.class = 'panel-link'
+    return ['a', mergeAttributes((this.options as any).HTMLAttributes, HTMLAttributes), 0]
+  },
+})
diff --git a/packages/sn-editor-react/src/extensions/panel-title.ts b/packages/sn-editor-react/src/extensions/panel-title.ts
new file mode 100644
index 000000000..9411c2315
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/panel-title.ts
@@ -0,0 +1,54 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export const PanelTitle = Node.create({
+  name: 'panelTitle',
+
+  draggable: true,
+
+  priority: 1200,
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            class: element.getAttribute('class'),
+          }
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.class) {
+            return {}
+          }
+          return {
+            class: attributes.class,
+          }
+        },
+      },
+      style: {
+        renderHTML: (attributes) => {
+          if (!attributes.style) {
+            return {}
+          }
+          return {
+            style: attributes.style,
+          }
+        },
+      },
+    }
+  },
+
+  content: 'inline*',
+
+  parseHTML() {
+    return [
+      {
+        tag: 'h3',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['h3', mergeAttributes((this.options as any).HTMLAttributes, HTMLAttributes), 0]
+  },
+})
diff --git a/packages/sn-editor-react/src/extensions/panel.ts b/packages/sn-editor-react/src/extensions/panel.ts
new file mode 100644
index 000000000..90579db6f
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/panel.ts
@@ -0,0 +1,31 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export const Panel = Node.create({
+  name: 'panel', // It's recommended to give your nodes a unique name
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.panel',
+      },
+    ]
+  },
+
+  group: 'block',
+
+  content: '(panelHeading | panelCollapse)*', // Define the content of the node
+
+  draggable: true,
+
+  addAttributes() {
+    return {
+      class: {
+        default: 'panel',
+      },
+    }
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes((this.options as any).HTMLAttributes, HTMLAttributes), 0]
+  },
+})

From 0b052466bed43e4a00e225897d1d499b50c8acf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassanad94@gmail.com>
Date: Wed, 5 Jun 2024 16:33:25 +0200
Subject: [PATCH 2/4] chore: refactor panel extensions in extension-list

---
 packages/sn-editor-react/src/extension-list.ts | 18 +++++++++---------
 .../src/extensions/PanelGroup.ts               |  2 --
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/sn-editor-react/src/extension-list.ts b/packages/sn-editor-react/src/extension-list.ts
index 9db08d34c..34db67610 100644
--- a/packages/sn-editor-react/src/extension-list.ts
+++ b/packages/sn-editor-react/src/extension-list.ts
@@ -47,14 +47,6 @@ export const createExtensions = (options?: ExtensionOptions) => [
   Code.configure(),
   CodeBlock.configure(),
   Document.configure(),
-  Panel.configure(),
-  PanelGroup.configure(),
-  PanelColapse.configure(),
-  PanelHeading.configure(),
-  PanelBody.configure(),
-  PanelIcon.configure(),
-  PanelLink.configure(),
-  PanelTitle.configure(),
   Dropcursor.configure(),
   Gapcursor.configure(),
   HardBreak.configure(),
@@ -67,10 +59,18 @@ export const createExtensions = (options?: ExtensionOptions) => [
   LinkExtend.configure(),
   ListItem.configure(),
   OrderedList.configure(),
+  Panel.configure(),
+  PanelGroup.configure(),
+  PanelColapse.configure(),
+  PanelHeading.configure(),
+  PanelBody.configure(),
+  PanelIcon.configure(),
+  PanelLink.configure(),
+  PanelTitle.configure(),
+  PanelColapse.configure(),
   Paragraph.configure(),
   ParagraphExtend.configure(),
   Placeholder.configure(options?.placeholder),
-  PanelColapse.configure(),
   SensenetImage.configure(),
   Table.configure(),
   TableCell.configure(),
diff --git a/packages/sn-editor-react/src/extensions/PanelGroup.ts b/packages/sn-editor-react/src/extensions/PanelGroup.ts
index 630c5eae9..3c891402c 100644
--- a/packages/sn-editor-react/src/extensions/PanelGroup.ts
+++ b/packages/sn-editor-react/src/extensions/PanelGroup.ts
@@ -3,8 +3,6 @@ import { mergeAttributes, Node } from '@tiptap/core'
 export const PanelGroup = Node.create({
   name: 'panelGroup',
 
-  priority: 1100,
-
   draggable: true,
 
   addAttributes() {

From 18a75138559779fa96bbbe64f4ef0f65b88c5def Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassanad94@gmail.com>
Date: Thu, 6 Jun 2024 11:12:47 +0200
Subject: [PATCH 3/4] refactor: styling and enters

---
 packages/sn-editor-react/src/components/editor.tsx   | 3 +--
 packages/sn-editor-react/src/components/menu-bar.tsx | 9 +++++----
 packages/sn-editor-react/src/extension-list.ts       | 8 +++++++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/sn-editor-react/src/components/editor.tsx b/packages/sn-editor-react/src/components/editor.tsx
index c76fae3f8..c68201de2 100644
--- a/packages/sn-editor-react/src/components/editor.tsx
+++ b/packages/sn-editor-react/src/components/editor.tsx
@@ -27,10 +27,9 @@ const useStyles = makeStyles((theme) => {
         paddingBlock: '10px',
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'flex-start',
+        alignItems: 'strech',
         rowGap: '20px',
         '& .panel': {
-          display: 'inline-block',
           border: '2px solid',
           borderColor: theme.palette.primary.main,
           borderRadius: '8px',
diff --git a/packages/sn-editor-react/src/components/menu-bar.tsx b/packages/sn-editor-react/src/components/menu-bar.tsx
index 00161a577..d9330640c 100644
--- a/packages/sn-editor-react/src/components/menu-bar.tsx
+++ b/packages/sn-editor-react/src/components/menu-bar.tsx
@@ -180,6 +180,10 @@ export const MenuBar: FC<MenuBarProps> = ({ editor }) => {
           <FormatListNumberedIcon />
         </IconButton>
       </Tooltip>
+      <AccordionControl
+        editor={editor}
+        buttonProps={{ classes: { root: classes.button, colorPrimary: classes.buttonPrimary } }}
+      />
       <LinkControl
         editor={editor}
         buttonProps={{ classes: { root: classes.button, colorPrimary: classes.buttonPrimary } }}
@@ -218,10 +222,7 @@ export const MenuBar: FC<MenuBarProps> = ({ editor }) => {
           <RedoIcon />
         </IconButton>
       </Tooltip>
-      <AccordionControl
-        editor={editor}
-        buttonProps={{ classes: { root: classes.button, colorPrimary: classes.buttonPrimary } }}
-      />
+
       <HTMLEditorControl
         editor={editor}
         buttonProps={{ classes: { root: classes.button, colorPrimary: classes.buttonPrimary } }}
diff --git a/packages/sn-editor-react/src/extension-list.ts b/packages/sn-editor-react/src/extension-list.ts
index 34db67610..bef42927a 100644
--- a/packages/sn-editor-react/src/extension-list.ts
+++ b/packages/sn-editor-react/src/extension-list.ts
@@ -49,7 +49,13 @@ export const createExtensions = (options?: ExtensionOptions) => [
   Document.configure(),
   Dropcursor.configure(),
   Gapcursor.configure(),
-  HardBreak.configure(),
+  HardBreak.configure().extend({
+    addKeyboardShortcuts() {
+      return {
+        Enter: () => this.editor.commands.setHardBreak(),
+      }
+    },
+  }),
   Heading.configure(),
   History.configure(),
   Italic.configure(),

From e2e92dfd5d6b22b5ce6173c2eff9d258e5c49c1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassanad94@gmail.com>
Date: Thu, 6 Jun 2024 14:39:13 +0200
Subject: [PATCH 4/4] refactor: icon

---
 .../components/controls/accordion-control.tsx | 35 ++++++++++++++-----
 .../src/components/menu-bar.tsx               | 10 ------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/sn-editor-react/src/components/controls/accordion-control.tsx b/packages/sn-editor-react/src/components/controls/accordion-control.tsx
index bf0d885e6..319de7a1c 100644
--- a/packages/sn-editor-react/src/components/controls/accordion-control.tsx
+++ b/packages/sn-editor-react/src/components/controls/accordion-control.tsx
@@ -24,12 +24,25 @@ const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     ListIcon: {
       paddingLeft: '0px',
-      '& .down-arrow': {
-        position: 'absolute',
-        right: '0',
-        marginRight: '-6px',
-        top: '0',
-        marginTop: '3px',
+      height: '32px',
+      '& .MuiIconButton-label': {
+        flexDirection: 'column',
+        height: 'inherit',
+        justifyContent: 'center',
+        '& .icon-container': {
+          '&:first-of-type': {
+            marginBottom: '-14px',
+          },
+          height: '23px',
+          position: 'relative',
+          '& .down-arrow': {
+            top: '0',
+            right: '0',
+            position: 'absolute',
+            marginTop: '0px',
+            marginRight: '-13px',
+          },
+        },
       },
     },
     accordion: {
@@ -158,8 +171,14 @@ export const AccordionControl: FC<AccordionControlProps> = ({ buttonProps, edito
     <>
       <Tooltip title={localization.accordionControl.title}>
         <IconButton className={classes.ListIcon} onClick={handleClickOpen} {...buttonProps}>
-          <ArrowDropDown className="down-arrow" />
-          <DragHandle />
+          <div className="icon-container">
+            <ArrowDropDown className="down-arrow" />
+            <DragHandle />
+          </div>
+          <div className="icon-container">
+            <ArrowDropDown className="down-arrow" />
+            <DragHandle />
+          </div>
         </IconButton>
       </Tooltip>
       <Dialog
diff --git a/packages/sn-editor-react/src/components/menu-bar.tsx b/packages/sn-editor-react/src/components/menu-bar.tsx
index d9330640c..422b6b164 100644
--- a/packages/sn-editor-react/src/components/menu-bar.tsx
+++ b/packages/sn-editor-react/src/components/menu-bar.tsx
@@ -77,16 +77,6 @@ export const MenuBar: FC<MenuBarProps> = ({ editor }) => {
     <div className={classes.root}>
       <TypographyControl editor={editor} />
       <div className={classes.divider} />
-      {/* <Tooltip title={`${localization.menubar.bold}`}>
-        <IconButton
-          onClick={() =>
-            editor.chain().focus().setYoutubeVideo({ src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' }).run()
-          }
-          color={editor.isActive('bold') ? 'primary' : 'default'}
-          classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
-          <strong>B</strong>
-        </IconButton>
-      </Tooltip> */}
       <Tooltip title={`${localization.menubar.bold} (Ctrl + B)`}>
         <IconButton
           onClick={() => editor.chain().focus().toggleBold().run()}