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..319de7a1c
--- /dev/null
+++ b/packages/sn-editor-react/src/components/controls/accordion-control.tsx
@@ -0,0 +1,269 @@
+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',
+      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: {
+      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}>
+          <div className="icon-container">
+            <ArrowDropDown className="down-arrow" />
+            <DragHandle />
+          </div>
+          <div className="icon-container">
+            <ArrowDropDown className="down-arrow" />
+            <DragHandle />
+          </div>
+        </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..c68201de2 100644
--- a/packages/sn-editor-react/src/components/editor.tsx
+++ b/packages/sn-editor-react/src/components/editor.tsx
@@ -23,6 +23,54 @@ const useStyles = makeStyles((theme) => {
       borderRadius: commonStyles.editorBorderRadius,
       border: theme.palette.type === 'dark' ? commonStyles.editorBorder : 'unset',
 
+      '& .panel-group': {
+        paddingBlock: '10px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'strech',
+        rowGap: '20px',
+        '& .panel': {
+          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..422b6b164 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)
@@ -163,6 +170,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 } }}
@@ -201,6 +212,7 @@ export const MenuBar: FC<MenuBarProps> = ({ editor }) => {
           <RedoIcon />
         </IconButton>
       </Tooltip>
+
       <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..bef42927a 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>
@@ -37,16 +49,33 @@ 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(),
   Link.configure({
     openOnClick: false,
   }),
+  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),
   SensenetImage.configure(),
   Table.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..3c891402c
--- /dev/null
+++ b/packages/sn-editor-react/src/extensions/PanelGroup.ts
@@ -0,0 +1,54 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export const PanelGroup = Node.create({
+  name: 'panelGroup',
+
+  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]
+  },
+})