feature: accordion plugin

SenseNet · Jul 25, 2024 · e374340 · e374340
1 parent 506e523
commit e374340
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 40 deletions.
diff --git a/apps/sensenet/index.html b/apps/sensenet/index.html
@@ -4,8 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, height=device-height, minimum-scale=1.0, initial-scale=1.0, user-scalable=0"
-    />
+      content="width=device-width, height=device-height, minimum-scale=1.0, initial-scale=1.0, user-scalable=0" />
     <meta name="description" content="sensenet application" />
     <title>sensenet</title>
     <style>
@@ -38,6 +37,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" />
   </head>
   <body>
-    <div id="root" style="height: inherit;"></div>
+    <div id="root" style="height: inherit"></div>
   </body>
 </html>
diff --git a/packages/sn-editor-react/src/tinymce/Editor.tsx b/packages/sn-editor-react/src/tinymce/Editor.tsx
@@ -5,8 +5,6 @@ import { type Editor as TinyMCEEditor } from 'tinymce'
 import 'tinymce/tinymce'
 // DOM model
 import 'tinymce/models/dom/model'
-// import { HTMLEditorControl } from '../components/controls'
-// import { RegisterPlugins } from './plugins/RegisterPlugins'
 // Theme
 import 'tinymce/themes/silver'
 // Toolbar icons
@@ -47,15 +45,7 @@ import 'tinymce/plugins/visualchars'
 import 'tinymce/plugins/wordcount'
 // importing plugin resources
 import 'tinymce/plugins/emoticons/js/emojis'
-// Content styles, including inline UI like fake cursors
-import 'tinymce/skins/content/default/content'
-import 'tinymce/skins/content/default/content.min.css'
-import 'tinymce/skins/ui/oxide/content'
-import 'tinymce/skins/ui/oxide-dark/content'
-import 'tinymce/skins/ui/oxide-dark/content.min.css'
-import 'tinymce/skins/ui/oxide/content.min.css'
-import 'tinymce/skins/ui/oxide-dark/skin.min.css'
-import 'tinymce/skins/ui/oxide/skin.min.css'
+
 import { RegisterPlugins } from './plugins'
 
 export interface TinymceEditorProps {
@@ -75,8 +65,6 @@ export const TinymceEditor: FC<TinymceEditorProps> = (props) => {
         }}
         initialValue={props.initvalue}
         init={{
-          skin: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'oxide-dark' : 'oxide-dark',
-          content_css: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'dark',
           file_picker_types: 'image',
           /* and here's our custom image picker*/
           file_picker_callback: (cb, _value, _meta) => {
@@ -93,10 +81,10 @@ export const TinymceEditor: FC<TinymceEditorProps> = (props) => {
               const reader = new FileReader()
               reader.addEventListener('load', () => {
                 /*
-          Note: Now we need to register the blob in TinyMCEs image blob
-          registry. In the next release this part hopefully won't be
-          necessary, as we are looking to handle it internally.
-        */
+                  Note: Now we need to register the blob in TinyMCEs image blob
+                  registry. In the next release this part hopefully won't be
+                  necessary, as we are looking to handle it internally.
+                */
                 const id = `blobid${new Date().getTime()}`
                 const { blobCache } = editorRef.current?.editorUpload || {}
                 const base64 = (reader.result as any).split(',')[1]

diff --git a/packages/sn-editor-react/src/tinymce/controls/accordion-plugin.tsx b/packages/sn-editor-react/src/tinymce/controls/accordion-plugin.tsx
@@ -1,26 +1,23 @@
 import {
   Button,
   createStyles,
-  Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
   IconButtonProps,
   makeStyles,
   TextField,
-  Theme,
   Tooltip,
-  useTheme,
 } from '@material-ui/core'
 import { Close } from '@material-ui/icons'
 
-import React, { FC, useCallback, useRef, useState } from 'react'
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { renderToString } from 'react-dom/server'
 import { Editor } from 'tinymce'
 import { useLocalization } from '../../hooks'
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles(() => {
   return createStyles({
     ListIcon: {
       paddingLeft: '0px',
@@ -45,12 +42,39 @@ const useStyles = makeStyles((theme: Theme) => {
         },
       },
     },
+    dialog: {
+      border: 'none !important',
+      borderRadius: 12,
+      boxShadow: '0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      padding: '1.6rem',
+      maxWidth: '600px',
+      width: '100%',
+      '&::backdrop': {
+        backgroundColor: 'rgba(255, 255, 255, .75)',
+      },
+
+      '& .MuiDialogContent-root': {
+        padding: 0,
+      },
+      '& .MuiDialogTitle-root': {
+        paddingLeft: 0,
+      },
+      '& .tox-icon': {
+        position: 'absolute',
+        top: '0',
+        right: '0',
+        marginRight: '25px',
+        marginTop: '20px',
+        cursor: 'pointer',
+        padding: '10px',
+      },
+    },
     accordion: {
       display: 'flex',
       flexDirection: 'column',
       rowGap: '15px',
       border: '2px solid',
-      borderColor: theme.palette.primary.main,
+      borderColor: '#006ce7',
       position: 'relative',
       padding: '10px',
       borderRadius: '10px',
@@ -70,7 +94,7 @@ const useStyles = makeStyles((theme: Theme) => {
       flex: 1,
       justifyContent: 'space-between',
     },
-    dialog: {
+    modal: {
       '& .MuiDialogContent-root': {
         padding: '8px 15px',
       },
@@ -118,9 +142,7 @@ export const AccordionPluginControl: FC<AccordionPluginControlProps> = ({ editor
   const [accordions, setAccordions] = useState<TAccordions[]>([initialAccordion])
   const form = useRef<HTMLFormElement>(null)
 
-  const theme = useTheme()
-
-  const classes = useStyles(theme)
+  const classes = useStyles()
   const localization = useLocalization()
 
   const handleClose = useCallback(() => {
@@ -161,16 +183,34 @@ export const AccordionPluginControl: FC<AccordionPluginControlProps> = ({ editor
       return prev.filter((_, i) => i !== index)
     })
   }
+
+  const dialogRef = useRef<HTMLDialogElement>(null)
+
+  useEffect(() => {
+    dialogRef.current?.showModal()
+
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      dialogRef.current?.close()
+    }
+  }, [])
+
   return (
     <>
-      <Dialog
-        open={true}
-        className={classes.dialog}
-        onClose={handleSubmit}
-        aria-labelledby="form-dialog-title"
-        maxWidth="md"
-        fullWidth>
-        <DialogTitle id="form-dialog-title">{localization.accordionControl.title}</DialogTitle>
+      <dialog ref={dialogRef} className={classes.dialog}>
+        <DialogTitle id="form-dialog-title">{localization.accordionControl.title}</DialogTitle>{' '}
+        <span
+          className="tox-icon"
+          onClick={() => {
+            dialogRef.current?.close()
+          }}>
+          <svg width="24" height="24" focusable="false">
+            <path
+              d="M17.3 8.2 13.4 12l3.9 3.8a1 1 0 0 1-1.5 1.5L12 13.4l-3.8 3.9a1 1 0 0 1-1.5-1.5l3.9-3.8-3.9-3.8a1 1 0 0 1 1.5-1.5l3.8 3.9 3.8-3.9a1 1 0 0 1 1.5 1.5Z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
         <DialogContent>
           <form ref={form} className={classes.accordionContainer}>
             {accordions.map((accordion, index) => {
@@ -245,7 +285,7 @@ export const AccordionPluginControl: FC<AccordionPluginControlProps> = ({ editor
             </div>
           </div>
         </DialogActions>
-      </Dialog>
+      </dialog>
     </>
   )
 }
diff --git a/packages/sn-editor-react/src/tinymce/plugins/AccordionPlugin.tsx b/packages/sn-editor-react/src/tinymce/plugins/AccordionPlugin.tsx
@@ -5,7 +5,7 @@ import { PluginRegistrationProps } from '.'
 
 export const AccordionPlugin = ({ editor }: PluginRegistrationProps) => {
   editor.ui.registry.addMenuItem('InsertAccordion' /*name of the plugin*/, {
-    text: 'Insert Accordion',
+    text: 'Accordion',
     icon: 'accordion',
     onAction() {
       const dialogContainer = document.createElement('div')