Font-size option not showing up and Blocks type dropdown not showing up

[visvshah]

What is the current behavior? I'm using TinyMCE and I am attempting to get the font-sizes as an option in the toolbar so users can edit the font-size of the their text but the it won't show up in the toolbar. I am using React and here is the Code I have for creating the editor:

import React, { useRef} from "react";
import { Editor } from '@tinymce/tinymce-react';
import "./editor.scss";

export default function () {
    const editorRef = useRef(null);
    const log = () => {
      if (editorRef.current) {
          console.log(editorRef.current.getContent());
      }
    };
    const initialVal = "<pre>                                               </pre>";
  return (
    <div className="holder">
      <Editor
        className = "editor"
        tinymceScriptSrc={process.env.PUBLIC_URL + '/tinymce/tinymce.min.js'}
        onInit={(evt, editor) => {
            editorRef.current = editor
          }
        }
        initialValue= {initialVal}
        init={{
          height: 600,
          width: 1000,
          menubar: false,
          plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount', 'fontsizeselect'
          ],
          toolbar: 'undo redo | fontsizeselect | ' +
            'bold italic forecolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'image link',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
          file_picker_callback: (callback, value, meta) => {
            // Provide file and text for the link dialog
            if (meta.filetype === 'file') {
              callback('mypage.html', { text: 'My text' });
            }

            // Provide image and alt text for the image dialog
            if (meta.filetype === 'image') {
              callback('myimage.jpg', { alt: 'My alt text' });
            }

            // Provide alternative source and posted for the media dialog
            if (meta.filetype === 'media') {
              callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });
            }
          },
          image_uploadtab: false,
          fontsize_formats:
    "8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt 96pt",
        }}
      />
      <button className = 'save' onClick={log}>Save</button>
      </div>

  )
}

**Please provide the steps to reproduce and if possible a minimal demo of the problem via [codesandbox.io] Here is what the code above produces: image Also, when it comes to showing the blocks type dropdown, I added blocks to the toolbar and visualblocks to my plugins. This results in the blocks option showing up in the toolbar, but the dropdown never shows up. I believed it was hidden behind another html element, but doing the following in CSS did nothing:

.tox.tox-silver-sink.tox-tinymce-aux{
    z-index: 100000 !important;
}

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or tinymce-react? I am using TinyMCE for React on MacOS and on Crome

[exalate-issue-sync[bot]]

Ref: INT-3059

[yacodes]

@visvshah Please indicate what TinyMCE version do you use.

Also note that fontsizeselect was renamed in Tiny 6 to fontsizeselect → fontsize as well as fontsize_formats → font_size_formats option. One can find all migration changes here.

[tiny-james]

Based on the image you are using TinyMCE 6. This is the default when loading from the cloud without specifying a cloudChannel in the tinymce-react integration after version 4. If you recently upgraded from 3 to 4 this is likely the cause of your problem as version 3 of the integration loaded TinyMCE 5 by default.

I recreated your sample in codesandbox: https://codesandbox.io/s/fontsize-ehetbf

As yacodes noted the only thing that seemed to be wrong was that fontsizeselect was renamed in TinyMCE 6. Also fontsizeselect is not a plugin name though that was just causing a console warning.

[tiny-james]

Also note that blocks and visualblocks are different features.

The blocks toolbar item is built-in and displays/changes the HTML block element type that the cursor is currently inside.

The visualblocks plugin and toolbar item allows visualizing the block elements on the page.

[tiny-james]

If you are still having problems getting menus to show you might want to check if you are using Bootstrap which can interfere. https://www.tiny.cloud/docs/tinymce/6/react-ref/#using-tinymce-react-integration-in-a-bootstrap-dialog

If that doesn't fix it then open a specific issue with some more detail about the CSS on your page which might be interfering.