feautre: html edit button

apps/sensenet/src/components/react-control-mapper.ts

@@ -39,6 +39,8 @@ export const reactControlMapper = (repository: Repository) => {
           return FieldControls.WebhookPayload
         case 'sn:HtmlEditor':
           return FieldControls.HtmlEditor
+        case 'sn:RichText':
+          return FieldControls.RichTextEditor
         default:
       }
 

packages/sn-controls-react/src/fieldcontrols/rich-text-editor.tsx

@@ -57,6 +57,8 @@ export const RichTextEditor: React.FC<
     ''
   const classes = useStyles(props)
 
+  console.log(props.settings.ControlHint)
+
   switch (props.actionName) {
     case 'edit':
     case 'new':
@@ -80,6 +82,11 @@ export const RichTextEditor: React.FC<
               readOnly={props.settings.ReadOnly}
               localization={props.localization?.richTextEditor}
               onChange={({ editor }) => {
+                if (props.settings.ControlHint === 'sn:RichText') {
+                  props.fieldOnChange?.(props.settings.Name, editor.getHTML())
+                  return
+                }
+
                 props.fieldOnChange?.(props.settings.Name, {
                   text: editor.getHTML(),
                   editor: JSON.stringify(editor.getJSON()),

packages/sn-editor-react/src/components/controls/html-editor-control.tsx

@@ -0,0 +1,155 @@
+import {
+  Button,
+  CircularProgress,
+  createStyles,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  IconButtonProps,
+  makeStyles,
+  Tooltip,
+} from '@material-ui/core'
+import CodeIcon from '@material-ui/icons/Code'
+import { Editor } from '@tiptap/react'
+import React, { FC, useRef, useState } from 'react'
+import { useLocalization } from '../../hooks'
+
+const useStyles = makeStyles(() => {
+  return createStyles({
+    image: {
+      maxWidth: '100%',
+      height: 'auto',
+    },
+    fileName: {
+      marginTop: '0.5rem',
+      textAlign: 'center',
+    },
+  })
+})
+
+interface ImageControlProps {
+  editor: Editor
+  buttonProps?: Partial<IconButtonProps>
+}
+
+type ImageFile = File & { src?: string }
+
+export const HtmlEditorControl: FC<ImageControlProps> = ({ buttonProps, editor }) => {
+  const [open, setOpen] = useState(false)
+  const [uploadedFile, setUploadedFile] = useState<ImageFile>()
+  const [isUploadInProgress, setIsUploadInProgress] = useState(false)
+  const fileInput = useRef<HTMLInputElement>(null)
+
+  const classes = useStyles()
+  const localization = useLocalization()
+
+  const handleClickOpen = () => {
+    if (isUploadInProgress) {
+      return
+    }
+    fileInput.current && fileInput.current.click()
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const addImage = () => {
+    if (uploadedFile?.src) {
+      editor.chain().focus().setImage({ src: uploadedFile.src }).run()
+    }
+  }
+
+  const imageToBase64 = (image: File) => {
+    return new Promise<string>((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        if (e.target?.result) {
+          resolve(e.target.result as string)
+        } else {
+          reject(e)
+        }
+      }
+      reader.readAsDataURL(image)
+    })
+  }
+
+  const upload = async (fileToUpload: File) => {
+    if (!fileToUpload) {
+      return
+    }
+
+    setIsUploadInProgress(true)
+
+    const imageSrc = await imageToBase64(fileToUpload)
+    const image: ImageFile = new File([fileToUpload], fileToUpload.name, { type: fileToUpload.type })
+    image.src = imageSrc
+
+    setIsUploadInProgress(false)
+    setUploadedFile(image)
+  }
+
+  return (
+    <>
+      <Tooltip title={`${localization.menubar.EditHtml}`}>
+        <IconButton
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          color={editor.isActive('code') ? 'primary' : 'default'}
+          {...buttonProps}>
+          <CodeIcon style={{ marginTop: '-7px' }} />
+          <span style={{ position: 'absolute', fontSize: '12px', top: '13px', fontWeight: 'bold' }}>html</span>
+        </IconButton>
+      </Tooltip>
+      <input
+        onChange={(ev) => {
+          setOpen(true)
+
+          ev.target.files && upload(ev.target.files[0])
+        }}
+        style={{ display: 'none' }}
+        ref={fileInput}
+        type="file"
+        accept="image/*"
+        multiple={false}
+      />
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="form-dialog-title"
+        onExited={() => {
+          setUploadedFile(undefined)
+
+          if (fileInput.current) {
+            fileInput.current.value = ''
+          }
+        }}>
+        <DialogTitle id="form-dialog-title">{localization.imageControl.title}</DialogTitle>
+        <DialogContent>
+          {uploadedFile ? (
+            <>
+              <img src={uploadedFile.src} alt="" className={classes.image} />
+              <div className={classes.fileName}>{uploadedFile.name}</div>
+            </>
+          ) : (
+            <div style={{ textAlign: 'center' }}>
+              <CircularProgress />
+            </div>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>{localization.common.cancel}</Button>
+          <Button
+            onClick={() => {
+              handleClose()
+              addImage()
+            }}
+            color="primary">
+            {localization.imageControl.submit}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

packages/sn-editor-react/src/components/controls/index.ts

@@ -2,3 +2,4 @@ export * from './image-control'
 export * from './link-control'
 export * from './table-control'
 export * from './typography-control'
+export * from './html-editor-control'

packages/sn-editor-react/src/components/menu-bar.tsx

@@ -15,7 +15,7 @@ import { Editor } from '@tiptap/react'
 import React, { FC } from 'react'
 import { useLocalization } from '../hooks'
 import { getCommonStyles } from '../styles'
-import { ImageControl, LinkControl, TableControl, TypographyControl } from './controls'
+import { HtmlEditorControl, ImageControl, LinkControl, TableControl, TypographyControl } from './controls'
 
 const useStyles = makeStyles((theme) => {
   const commonStyles = getCommonStyles(theme)
@@ -201,6 +201,10 @@ export const MenuBar: FC<MenuBarProps> = ({ editor }) => {
           <RedoIcon />
         </IconButton>
       </Tooltip>
+      <HtmlEditorControl
+        editor={editor}
+        buttonProps={{ classes: { root: classes.button, colorPrimary: classes.buttonPrimary } }}
+      />
     </div>
   )
 }

packages/sn-editor-react/src/context/localization-context.tsx

@@ -23,6 +23,7 @@ export const defaultLocalization = {
     clearFormat: 'Clear format',
     undo: 'Undo',
     redo: 'Redo',
+    EditHtml: 'Edit HTML',
   },
   bubbleMenu: {
     removeImage: 'remove image',