Paragraph configuration not work as expected and shows more options than configration defined in the config file

[fahry-mohammed]

Jodit Version: 4.0.25 / 1.3.20

Browser: Chrome
Is React App: True

Code

// config.ts

export const joditEditorConfig = {
  readonly: false,
  // ... configrations
  style: {
    // ... styles
  },
  defaultActionOnPaste: 'insert_only_text',
  buttons: [
    // ... other buttons
    'fontsize'
    'paragraph',
  ],
  toolbarAdaptive: false,
  controls: {
    // ... other controls
    fontsize: {
      default: '16',
      list: { '16': '16', '18': '18', '20': '20', '22': '22' },
    },
    paragraph: {
      list: {
        p: 'Pharagraph',
        h1: 'Heading 1',
        h2: 'Heading 2',
        h3: 'Heading 3',
      },
    },
  },
};

// Usage in the component
const config = useMemo(() => joditEditorConfig, []);

return (
   // ... Other components
      <JoditEditor
        value={content}
        config={config as any}
      />
   // ... Other components
)

Expected behavior:
The fontsize listed down as expected with 16, 18, 20 and 22. Same as fontsize, I have configured paragraph and expected to show only listed types such as p: 'Pharagraph', h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3'

Actual behavior:
Even tough the paragraph configuration limited to p: 'Pharagraph', h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3', in the editor it shows additionally 'Heading 4', 'Quote', 'Code'.

Screenshot of the behaviour:

[topdev0215]

Same issue.
Any updates?

[topdev0215]

Jodit.make('#editor', { controls: { paragraph: { list: Jodit.atom({ p: 'Pharagraph', h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3', h4: 'Heading 4', h5: 'Heading 5', h6: 'Heading 6', blockquote: 'Quote', div: 'Div', pre: 'Source code' }) } } });

How to use Jodit.atom in Jodit-react?

[xdan]

@fahry-mohammed @topdev0215 Hi, second example https://xdsoft.net/jodit/docs/modules/plugins_format_block.html#root

[xdan]

Jodit.make('#editor', { controls: { paragraph: { list: Jodit.atom({ p: 'Pharagraph', h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3', h4: 'Heading 4', h5: 'Heading 5', h6: 'Heading 6', blockquote: 'Quote', div: 'Div', pre: 'Source code' }) } } });

How to use Jodit.atom in Jodit-react?

import JoditEditor, { Jodit } from 'jodit-react';

[topdev0215]

@xdan Solved!!!
Thanks so much👍

[topdev0215]

I've got another issue.
I am using NextJS in in my project.
This error occurred during import { Jodit }
ReferenceError: self is not defined
This is my code.

import React, { useState, useEffect, useRef, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { Jodit } from 'jodit-react'; // The problem is here

// Using dynamic import of Jodit component as it can't render server-side
const JoditEditor = dynamic(() => import('jodit-react'), { ssr: false });

const Editor = ({ editorContent, setChangedContent, section, setSection }) => {
  const editor = useRef(null);
  // Check if the content is loaded perfectly
  const [isBrowser, setIsBrowser] = useState(false);
  // Value of the Editor
  const [model, setModel] = useState('');

  useEffect(() => {
    setIsBrowser(true);
  }, []);

  useEffect(() => {
    setModel(editorContent ? editorContent.outerHTML : '');
    setChangedContent(editorContent ? editorContent.outerHTML : '');
    try {
      const sectionTitleElement = editorContent.parentNode.getElementsByTagName('h2')[0];
      if (sectionTitleElement?.id !== 'title') {
        setSection(sectionTitleElement.textContent);
      }
    } catch (e) {
      console.log('Please select the correct section');
    }
  }, [editorContent]);

  const handleModelChange = (value) => {
    setChangedContent(value);
    setModel(value);
  };

  const options = useMemo(
    () => [
      'paragraph', '|',
      'bold',
      'underline',
      'italic', '|',
      'brush',
      'image',
      'table',
      'link', '|',
      'undo', 'redo', '|',
      'eraser',
    ],
    []
  );

  const config = useMemo(
    () => ({
      readonly: false,
      placeholder: 'Edite aquí su contenido!',
      defaultActionOnPaste: 'insert_as_html',
      defaultLineHeight: 1.5,
      enter: 'p',
      buttons: options,
      buttonsMD: options,
      buttonsSM: options,
      buttonsXS: options,
      statusbar: false,
      sizeLG: 900,
      sizeMD: 700,
      sizeSM: 400,
      language: 'es', // Changed to ISO language code 'es' for Spanish
      colors: ['#159957', '#f2f2f2', '#fcf9e7'],
      uploader: {
        insertImageAsBase64URI: true,
        imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'svg', 'webp']
      },
      allowTabNavigation: true, // Boolean values should not be commented out
      controls: {
        paragraph: {
          list: Jodit.atom({
            h2: 'Título 1',
            h3: 'Título 2',
            h4: 'Título 3',
            h5: 'Cuerpo',
            h6: 'Texto recuadro',
            blockquote: 'Título de Tabla/Figura',
            div: 'Nota de Tabla/Figura',
          })
        }
      }
    }),
    [options, Jodit]
  );

  return (
    <div className="w-full h-full p-1">
      <div className="flex justify-between">
        <span className="font-semibold text-[30px]">{section}</span>
      </div>
      <form className="w-full h-full mt-5">
        {isBrowser && (
          <JoditEditor
            ref={editor}
            value={model}
            config={config}
            onChange={handleModelChange}
            tabIndex={1}
            className="w-full"
          />
        )}
      </form>
    </div>
  );
};

export default Editor;

[topdev0215]

Above code worked well without Jodit.atom method in NextJS.

[topdev0215]

I found solution after much effort.
If you have same issue you can solve this problem like this.

useEffect(() => {
    setIsBrowser(true);
    import('jodit-react').then((module) => {
      module.Jodit.defaultOptions.controls.addWord = {
        tooltip: 'Enter text and insert',
        icon: 'pencil',
        popup: (editor, current, self, close) => {
          const form = editor.create.fromHTML(
            `<form>
            <input type="text"/>
            <button type="submit">Insert</button>
          </form>`
          );

          editor.e.on(form, 'submit', (e) => {
            e.preventDefault();
            editor.s.insertHTML(form.querySelector('input').value);
            close();
          });

          return form;
        }
      };
    })
  }, []);