Why isn't the full text editor displaying in my Remix App?

Shopify Apps

Topic summary

A developer encountered an issue where TinyMCE editor only displays as a plain textarea instead of the full rich text editor in their Shopify Remix app, despite the code running without errors.

Technical Details:

  • Using @tinymce/tinymce-react package
  • Code includes proper initialization with plugins (advlist, link, image, table, paste, etc.) and toolbar configuration
  • No console errors reported

Resolution:

  • The original poster found an alternative solution using a different editor
  • Switched to ProseMirror implementation (referenced via CodeSandbox template)
  • The TinyMCE issue itself remains unresolved

Status: Another user reported facing the same problem, but no root cause or TinyMCE-specific fix was identified in the discussion.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I use Tinymce for show Text-editor in my Shopify remix app but when i run, app run successfully and no error show, but in front side only text-area show not full text-editor show.

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class RichText extends React.Component {
  constructor(props) {
    super(props);
    this.handleEditorChange = this.handleEditorChange.bind(this);
  }
  handleEditorChange = (e) => {
    console.log(
      'Content was updated:',
      e.target.getContent()
    );
  }

  render() {
    return (
      <>
      <Editor
        initialValue="<p>Wow ! ... It Works !!!</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            'advlist autolink lists link image',
            'charmap print preview anchor help',
            'searchreplace visualblocks code',
            'insertdatetime media table paste wordcount'
          ],
          toolbar:
            'undo redo | formatselect | bold italic | \
            alignleft aligncenter alignright | \
            bullist numlist outdent indent | help'
        }}
        onEditorChange={this.handleEditorChange}
      />
      </>
    );
  }
}

export default RichText;
2

Did you find a solution for this? I face the same here.

3

No, but i found new that’s working.
i use this editor:- https://codesandbox.io/s/prosemirror-template-ruwq5u?file=/src/editor/index.jsx

1 Like