MonthlyNews.tsx

import { Editor } from '@tinymce/tinymce-react'
import React from 'react'
import { ContentItems } from '../Editing/Editing'

interface MonthlyNewsProps {
  onSave: () => Promise<void>
  onCancel: () => void
  header: string
  quote: string
  handleChange: (
    value: string,
    type: 'header' | 'quote' | 'question' | 'link'
  ) => void
  onDelete: (target: ContentItems) => void
}
const MonthlyNews: React.FC<MonthlyNewsProps> = ({
  onSave,
  onCancel,
  header,
  quote,
  handleChange,
  onDelete,
}: MonthlyNewsProps) => {
  return (
    <>
      <div className="subtitle">
        <p className="title">Informations du mois</p>
      </div>
      <div>
        <Editor
          init={{
            menubar: false,
            toolbar:
              'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
          }}
          value={header}
          onEditorChange={(newHeader: string) =>
            handleChange(newHeader, 'header')
          }
        />
        <div className="subtitle">
          <p className="title">Citation du mois</p>
        </div>

        <Editor
          init={{
            menubar: false,
            toolbar:
              'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
            setup: function (editor) {
              editor.ui.registry.addMenuButton('ecolyoLink', {
                text: 'Lien Ecolyo',
                fetch: function (callback) {
                  var items: any = [
                    {
                      type: 'menuitem',
                      text: 'consumption',
                      onAction: function () {
                        editor.insertContent(
                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/consumption">Page de consommation</a>'
                        )
                      },
                    },
                    {
                      type: 'menuitem',
                      text: 'challenges',
                      onAction: function () {
                        editor.insertContent(
                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/challenges">Page challenges</a>'
                        )
                      },
                    },
                    {
                      type: 'menuitem',
                      text: 'ecogestures',
                      onAction: function () {
                        editor.insertContent(
                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/ecogestures">Page ecogestures</a>'
                        )
                      },
                    },
                    {
                      type: 'menuitem',
                      text: 'analysis',
                      onAction: function () {
                        editor.insertContent(
                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/analysis">Page analyse</a>'
                        )
                      },
                    },
                    {
                      type: 'menuitem',
                      text: 'options',
                      onAction: function () {
                        editor.insertContent(
                          '&nbsp;<a href="https://ecolyo.{cozyUrl}/options">Page options</a>'
                        )
                      },
                    },
                  ]
                  callback(items)
                },
              })
            },
          }}
          value={quote}
          onEditorChange={(newQuote: string) => handleChange(newQuote, 'quote')}
        />
        <div className="buttons">
          <button className="btnCancel" onClick={onCancel}>
            Annuler
          </button>
          <button className="btnValid" onClick={onSave}>
            Sauvegarder
          </button>
          <button className="btnDelete" onClick={() => onDelete('monthlyNews')}>
            Supprimer
          </button>
        </div>
      </div>
    </>
  )
}

export default MonthlyNews