import { TextEditor, TextEditorReadOnly } from 'mui-tiptap-editor';
import { useState } from "react";

function App() {
  const [value, setValue] = useState<string>("");

  const handleChange = (newValue: string) => setValue(newValue);

  return (
    <div>
      <TextEditor value={value} onChange={handleChange} />
      {value && <TextEditorReadOnly value={value} />}
    </div>
  );
}

import { TextEditor, ITextEditorOption } from 'mui-tiptap-editor';

const mentions: ITextEditorOption[] = [
  { label: "Lea Thompson", value: "id1" },
  { label: "Cyndi Lauper", value: "id2" },
  { label: "Tom Cruise", value: "id3" },
];

const currentUser: ITextEditorOption = mentions[0];

function App() {
  return (
    <TextEditor mentions={mentions} user={currentUser} userPathname="/profile" />
  );
}

// example of API using axios
// note that the response should be directly the image url
// so it can be displayed in the editor
function uploadImage(file) {
  const data = new FormData();
  data.append('file', file);
  const response = axios.post('/documents/image/upload', data);
  return response.data;
};

function App() {
  return (
    <TextEditor
      uploadImageOptions={{
        uploadImage: uploadImage, // the image is stored and used as base64 string if not specified
        maxSize: 5, // max size to 10MB if not specified
        maxFilesNumber: 2,  // max 5 files if not specified
        allowedMimeTypes: ['image/jpeg', 'image/png', 'image/jpg'], // all image types if not specified
      }}
    />
  );
}

import { TextEditorReadOnly } from 'mui-tiptap-editor';

<TextEditorReadOnly value="<h1>Hello word!</h1>" />

<TiptapParser content={`<h1>Hello world</h1>`} />

  <TextEditor toolbar={['bold', 'italic', 'underline']} />

  <TextEditor
    labels={{
      editor: {
        editor: "Editeur",
        preview: "Aperçu"
      },
      toolbar: {
        bold: "Gras",
        italic: "Italique",
        strike: "Barré",
        underline: "Souligné",
        link: "Lien",
        bulletList: "Liste à puces",
        orderedList: "Liste ordonnée",
        alignLeft: "Aligner à gauche",
        alignCenter: "Aligner au centre",
        alignRight: "Aligner à droite",
        alignJustify: "Justifier",
        blockquote: "Citation",
        codeBlock: "Code",
        table: "Table",
        youtube: "Youtube",
        undo: "Annuler",
        redo: "Refaire",
        mention: "Mention"
      },
      headings: {
        normalText: "Text normal",
        h1: "En-tête 1",
        h2: "En-tête 2",
        h3: "En-tête 3",
        h4: "En-tête 4",
        h5: "En-tête 5",
        h6: "En-tête 6"
      },
      table: {
        table: "Tableau",
        addColumnBefore: "Ajouter une colonne avant",
        addColumnAfter: "Ajouter une colonne après",
        deleteColumn: "Supprimer la colonne",
        addRowBefore: "Ajouter une ligne avant",
        addRowAfter: "Ajouter une ligne après",
        deleteRow: "Supprimer la ligne",
        mergeCells: "Fusionner les cellules",
        splitCell: "Diviser la cellule",
        deleteTable: "Supprimer le tableau",
        insertTable: "Insérer un tableau",
        toggleHeaderCell: "Basculer la cellule d'en-tête",
        toggleHeaderColumn: "Basculer la colonne d'en-tête",
        toggleHeaderRow: "Basculer la ligne d'en-tête",
        mergeOrSplit: "Fusionner ou diviser",
        setCellAttribute: "Définir l'attribut de cellule"
      },
      link: {
        link: "Lien",
        insert: "Insérer le lien",
        invalid: "Lien invalide",
      },
      youtube: {
        link: "Lien",
        insert: "Insérer la vidéo Youtube",
        title: "Insérer une vidéo Youtube",
        invalid: "Lien invalide",
        enter: "Entrer le lien",
        height: "Hauteur",
        width: "Largeur"
      },
      imageUpload: {
        fileTooLarge: "Fichier trop volumineux",
        maximumNumberOfFiles: "Nombre maximum de fichiers atteint",
        enterValidAltText: "Entrez un texte alternatif valide",
        addAltText: "Ajouter un texte alternatif",
        invalidMimeType: "Type de fichier invalide",
      },
    }}
  />

import './index.css';

<TextEditor
  value="<p>Hello word!</p>"
  rootClassName="root"
/>

<TextEditor
  value="<p>Hello word!</p>"
  label="Content"
  tabClassName="bg-black"
  labelClassName="text-sm"
  inputClassName="border border-gray-200"
  toolbarClassName="bg-gray-500"
/>
}