jodit / jodit/jodit-react

Example from doc not working (TypeError value must be string)

Open
#93 6 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
406
Forks
131
Avg merge
2h 32m
Merged PRs (30d)
2

Description

I've tried jodit-react with the most basic example I could find but it breaks after typing a few words in the editor.

Steps to reproduce:

  1. Go to: https://codesandbox.io/s/sleepy-colden-1twnp
  2. Type a few things in the editor
  3. Wait for a bit
  4. Watch it break with TypeError value must be string

jodit-react-issue

Code to reproduce locally:

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

App.js

import React from "react";
import "./styles.css";
import Editor from "./Editor";

export default function App() {
  return <Editor />;
}

Editor.js

import React, { useState, useRef } from "react";
import JoditEditor from "jodit-react";

const Example = ({}) => {
  const editor = useRef(null);
  const [content, setContent] = useState("");

  const config = {
    readonly: false // all options from https://xdsoft.net/jodit/doc/
  };

  return (
    <JoditEditor
      ref={editor}
      value={content}
      config={config}
      tabIndex={1} // tabIndex of textarea
      onBlur={(newContent) => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
      onChange={(newContent) => {}}
    />
  );
};

export default Example;

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox and the example files index.js, App.js, and Editor.js; reproduce the delayed TypeError and inspect the JoditEditor value, onBlur, and onChange usage. Done means the documented example continues accepting typed content without the reported TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.