Issue: Dynamically Set Directionality in TinyMCE Editor

[waseemViwell]

Description I'm facing an issue while trying to dynamically set the directionality of the text in the TinyMCE editor based on the input content. I want the directionality to change to RTL (right-to-left) when the input content is in a RTL language, and to LTR (left-to-right) otherwise.

Steps to Reproduce

1. Initialize the TinyMCE editor in a React application.
2. Input text content in the editor.
3. Observe that the directionality of the text does not change dynamically based on the input.

Expected Behavior The directionality of the text in the TinyMCE editor should change to RTL when inputting RTL content, and to LTR for other content.

Actual Behavior The directionality of the text remains static and does not change based on the input content.

// React component using TinyMCE
import { Editor } from "@tinymce/tinymce-react";
import { useState } from "react";
// ... other imports

const CustomTextEditor: React.FunctionComponent<CustomTextEditorProps> = (
  props,
) => {
  const [direction, setDirection] = useState<"ltr" | "rtl">("ltr");

  const handleEditorChange = (value: string, editor: TinyMCEEditor) => {
    // Update the direction based on input content
    const newDirection = getLangDir(value);
    setDirection(newDirection);
  };

  return (
    <div className="text-editor">
      <Editor
        value={field.value}
        onEditorChange={handleEditorChange}
        // ... other props
        init={{
          // ... other settings
          directionality: direction, // Set initial directionality
          setup: (editor: any) => {
            editorRef.current = editor;
          },
        }}
      />
      {/* ... error handling */}
    </div>
  );
};

Additional Information Using TinyMCE in a React application. The getLangDir function is used to determine the directionality based on input content. The direction state is updated in the handleEditorChange function. The directionality setting is initially set in the init configuration of TinyMCE. The editor's directionality does not dynamically change as input content changes.

[TinyITAdmin]

Ref: INT-3216

[waseemViwell]

@TinyITAdmin can you please provide a little bit of information about Ref: INT-3216 can you please paste issue link here

[shanmen-tiny]

Hi @waseemViwell,

This is because the editor does not re-initialize when the init props are changed. You can force a reinit by changing the key of the component. See codesandbox: https://codesandbox.io/s/zealous-lena-sfggp7?file=/src/index.js