how to remove onFocus border from editorcontainer? already tried with getEditorContainerArea()

[mukul-sharma085]

`/* eslint-disable */
// @ts-nocheck
'use client';
import { useRef, useState } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import { Editor as TinyMCEEditorType } from 'tinymce';
import { useTheme } from 'next-themes';

interface CustomEditorProps {
content: string;
onContentChange: (content: string) => void;
height?: number;
isPost?: boolean;
}

export const CustomEditor: React.FC = ({
content,
onContentChange,
height = 300,
}) => {
const editorRef = useRef<TinyMCEEditorType | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [charCount, setCharCount] = useState(0);
const { theme } = useTheme();

const MAX_CHAR_LIMIT = 500;

const handleInit = (_evt: any, editor: TinyMCEEditorType) => {
editorRef.current = editor;
const initialLength = editor.getContent({ format: 'text' }).length;
setCharCount(initialLength);
if (initialLength > MAX_CHAR_LIMIT) {
const allowedText = editor
.getContent({ format: 'text' })
.slice(0, MAX_CHAR_LIMIT);
editor.setContent(allowedText);
onContentChange(allowedText);
setCharCount(MAX_CHAR_LIMIT);
}
setIsLoading(false);
};

const handleEditorChange = (
newContent: string,
editor: TinyMCEEditorType
) => {
const textContent = editor.getContent({ format: 'text' });
const length = textContent.trimStart().length;
if (length <= MAX_CHAR_LIMIT) {
onContentChange(newContent);
setCharCount(length);
} else {
const allowedText = textContent.slice(0, MAX_CHAR_LIMIT);
editor.setContent(allowedText);
onContentChange(allowedText);
setCharCount(MAX_CHAR_LIMIT);
}
};

const handleBeforeAddUndo = (evt: any, editor: TinyMCEEditorType) => {
const length = editor.getContent({ format: 'text' }).length;
if (length > MAX_CHAR_LIMIT) {
evt.preventDefault();
}
};

const getEditorTheme = () => {
return theme === 'dark'
? { skin: 'oxide-dark', content_css: 'dark' }
: { skin: 'bootstrap', content_css: 'tinymce-5' };
};

return (

{isLoading && (

)}

  <Editor
    apiKey="ttwrb3nwdnfj6gqox0wdp916a0bcffd37y3dsoe6538k8hzq"
    onInit={handleInit}
    onBeforeAddUndo={handleBeforeAddUndo}
    value={content}
    init={{
      ...getEditorTheme(),
      height: height,
      placeholder: 'Drop your thoughts here...',
      statusbar: true,
      menubar: false,
      paste_as_text: true,
      invalid_elements: 'audio,video,img,iframe,embed,object',
      plugins: [
        'advlist',
        'autolink',
        'lists',
        'link',
        'charmap',
        'preview',
        'anchor',
        'visualblocks',
        'wordcount',
      ],
      toolbar: 'undo redo | bold italic underline strikethrough',

      content_style: `
        body {
          font-family: Inter, system-ui, sans-serif;
          font-size: 16px;
          line-height: 1.5;
          
        }
      `,
      branding: false,
      promotion: false,
      resize: false,
      toolbar_mode: 'sliding',
    }}
    onEditorChange={handleEditorChange}
  />

  {/* Display remaining characters */}
  <p
    className={`font-medium ml-auto ${
      charCount === MAX_CHAR_LIMIT
        ? 'text-red-500'
        : charCount > MAX_CHAR_LIMIT * 0.8
          ? 'text-amber-500'
          : 'text-gray-400'
    }`}
  >
    Remaining characters: {MAX_CHAR_LIMIT - charCount}
  </p>
</div>

);
};
` can anyone answer please. skin used > const getEditorTheme = () => {
return theme === 'dark'
? { skin: 'oxide-dark', content_css: 'dark' }
: { skin: 'bootstrap', content_css: 'tinymce-5' };
};

[ELHart05]

You can remove the onFocus border by overriding the default style used by tinyMCE on this exact class:

• Original :

.tox .tox-edit-area::before {
	border: 2px solid #006ce7; #this is the border style made on the onfocus!
}

• Updated:

.tox .tox-edit-area::before {
	border-color: transparent !important;
}