add new picker to tineyMCE editor

Author: NoelKova

apps/sensenet/src/components/field-controls/reference-grid.tsx

@@ -2,7 +2,6 @@ import { ReactClientFieldSetting, ReferenceGrid as SnReferenceGrid } from '@sens
 import { clsx } from 'clsx'
 import React from 'react'
 import { useGlobalStyles } from '../../globalStyles'
-import { DialogTitle } from '../dialogs/dialog-title'
 import { Icon } from '../Icon'
 
 export const ReferenceGrid: React.FC<ReactClientFieldSetting> = (props) => {
@@ -11,7 +10,6 @@ export const ReferenceGrid: React.FC<ReactClientFieldSetting> = (props) => {
     <SnReferenceGrid
       {...props}
       dialogProps={{ classes: { paper: clsx(globalClasses.dialog, globalClasses.pickerDialog) } }}
-      dialogTitleComponent={DialogTitle}
       renderPickerIcon={(item) => <Icon item={item} />}
       pickerClasses={{ cancelButton: globalClasses.cancelButton }}
     />

apps/sensenet/src/globalStyles.ts

@@ -126,9 +126,6 @@ export const useGlobalStyles = makeStyles((theme: Theme) => {
       border: theme.palette.type === 'light' ? clsx(globals.light.borderColor, '1px') : 'none',
       maxWidth: '700px',
     },
-    pickerDialog: {
-      maxHeight: 750,
-    },
     cancelButton: {
       //border: theme.palette.type === 'light' ? '2px solid #212121DE' : '2px solid #505050',
       backgroundColor: theme.palette.type === 'light' ? '#cecece' : 'rgba(255, 255, 255, 0.05)',
@@ -145,6 +142,12 @@ export const useGlobalStyles = makeStyles((theme: Theme) => {
         marginBottom: '12px',
       },
     },
+    pickerDialog: {
+      width: '950px',
+      maxWidth: '80%',
+      height: '900px',
+      maxHeight: '80%',
+    },
   })
 })
 

packages/sn-controls-react/src/fieldcontrols/reference-grid/index.ts

@@ -1,4 +1,3 @@
 export * from './default-item-template'
 export * from './reference-grid'
 export * from './reference-picker'
-export * from './picker-advanced'

packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx

@@ -4,24 +4,21 @@ import {
   createStyles,
   Dialog,
   DialogProps,
-  DialogTitle,
   FormControl,
   FormHelperText,
   makeStyles,
   TextField,
   Typography,
   useTheme,
 } from '@material-ui/core'
-import { deepMerge, PathHelper } from '@sensenet/client-utils'
+import { PathHelper } from '@sensenet/client-utils'
 import { GenericContent, ReferenceFieldSetting, User } from '@sensenet/default-content-types'
-import { GenericContentWithIsParent, PickerClassKey } from '@sensenet/pickers-react'
+import { GenericContentWithIsParent, PickerAdvanced, PickerClassKey } from '@sensenet/pickers-react'
 import { ColDef } from 'ag-grid-community'
 import { AgGridReact } from 'ag-grid-react'
-import React, { ElementType, useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { ReactClientFieldSetting } from '../client-field-setting'
 import { renderIconDefault } from '../icon'
-import { defaultLocalization } from '../localization'
-import { PickerAdvanced } from './picker-advanced'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -51,6 +48,14 @@ const useStyles = makeStyles(() =>
       minWidth: '0',
       padding: '0 12px',
     },
+    pickerDialog: {
+      width: '950px',
+      maxWidth: '80%',
+      height: '900px',
+      maxHeight: '80%',
+      padding: '8px 8px 0',
+      border: '2px solid grey',
+    },
   }),
 )
 
@@ -88,14 +93,11 @@ const referemceGridColumns: ColDef[] = [
 
 interface ReferenceGridProps extends ReactClientFieldSetting<ReferenceFieldSetting> {
   dialogProps?: Partial<DialogProps>
-  dialogTitleComponent?: ElementType
   renderPickerIcon?: (item: any) => JSX.Element
   pickerClasses?: PickerClassKey
 }
 
 export const ReferenceGrid: React.FC<ReferenceGridProps> = (props) => {
-  const localization = deepMerge(defaultLocalization.referenceGrid, props.localization?.referenceGrid)
-  const DialogTitleComponent = props.dialogTitleComponent ?? DialogTitle
   const theme = useTheme()
   const classes = useStyles()
 
@@ -283,7 +285,7 @@ export const ReferenceGrid: React.FC<ReferenceGridProps> = (props) => {
             {`${props.settings.DisplayName} (${props.settings.Name})`}
           </label>
 
-          <div style={{ height: `${35 + (fieldValue?.length || 0) * 28}px`, width: '100%' }}>
+          <div style={{ height: `${34 + (fieldValue?.length || 0) * 27}px`, width: '100%' }}>
             <AgGridReact
               rowData={fieldValue}
               columnDefs={[iconCol, ...referemceGridColumns, removeCol]}
@@ -298,18 +300,17 @@ export const ReferenceGrid: React.FC<ReferenceGridProps> = (props) => {
 
           <Dialog
             fullWidth
-            PaperProps={{ style: { maxWidth: '950px', height: '900px' } }}
+            PaperProps={{ className: classes.pickerDialog }}
             maxWidth={false}
             onClose={handleDialogClose}
             open={isPickerOpen}
             {...props.dialogProps}>
-            <DialogTitleComponent style={{ width: '100%' }}>{localization.referencePickerTitle}</DialogTitleComponent>
             <PickerAdvanced
               defaultValue={fieldValue}
               repository={props.repository!}
               path={currentParent}
               renderIcon={renderIconLocal}
-              fieldSettings={props.settings}
+              allowMultiple={props.settings.AllowMultiple}
               onCancel={handleCancelClick}
               onSubmit={handleOkClick}
             />

packages/sn-editor-react/src/tinymce/controls/repo-file-plugin.tsx

@@ -1,4 +1,4 @@
-import { createStyles, DialogActions, DialogContent, makeStyles } from '@material-ui/core'
+import { createStyles, makeStyles } from '@material-ui/core'
 import {
   AddAlert,
   AllInboxOutlined,
@@ -43,39 +43,21 @@ import {
   VisibilityOff,
   Widgets,
 } from '@material-ui/icons'
-import { ODataParams, Repository } from '@sensenet/client-core'
+import { Repository } from '@sensenet/client-core'
 import { File } from '@sensenet/default-content-types'
-import { Picker } from '@sensenet/pickers-react'
+import { PickerAdvanced } from '@sensenet/pickers-react'
 import React, { useEffect, useRef } from 'react'
 
 const useStyles = makeStyles(() => {
   return createStyles({
-    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',
-      },
+    pickerDialog: {
+      width: '950px',
+      maxWidth: '80%',
+      height: '900px',
+      maxHeight: '80%',
+      border: '2px solid grey',
+      borderRadius: '8px',
+      padding: '8px 8px 0',
     },
   })
 })
@@ -113,14 +95,6 @@ export const RepoFilePluginControl: React.FC<RepoFilePluginControlProps> = ({
     dialogRef.current?.close()
     closeDialog()
   }
-  const queryObject: ODataParams<any> = {
-    expand: ['Children'],
-    filter: "isOf('GenericContent')",
-    metadata: 'no',
-    orderby: 'DisplayName',
-    select: ['DisplayName', 'Path', 'Id', 'Children/IsFolder', 'IsFolder', 'Avatar', 'Icon', 'Size'],
-  }
-
   useEffect(() => {
     dialogRef.current?.showModal()
 
@@ -243,23 +217,14 @@ export const RepoFilePluginControl: React.FC<RepoFilePluginControlProps> = ({
   if (!repository) return <></>
 
   return (
-    <dialog ref={dialogRef} className={classes.dialog}>
-      <Picker
+    <dialog ref={dialogRef} className={classes.pickerDialog}>
+      <PickerAdvanced
         repository={repository}
-        defaultValue={undefined}
-        currentPath={'/Root'}
-        selectionRoots={['/Root']}
-        itemsODataOptions={queryObject}
-        pickerContainer={DialogContent}
-        actionsContainer={DialogActions}
-        renderIcon={renderIcon}
-        required={1}
+        path={path ?? '/Root'}
         allowMultiple={true}
-        contextPath={path}
-        handleSubmit={handleInsert}
-        handleCancel={closeDialog}
-        localization={{}}
-        classes={{}}
+        renderIcon={renderIcon}
+        onCancel={closeDialog}
+        onSubmit={handleInsert}
       />
     </dialog>
   )