Our blazing fast Grid component built with pure JavaScript


Post by prashil »

Hello bryntum team,

I am using froala richtext editor as a custom cell editor component, But whenever I finish editing, the new value is not getting rendered in a cell.

import React, { Component, Fragment } from "react";
import { Input, Modal } from "antd";
import ReactDOM from "react-dom";
import FroalaEditor from "react-froala-wysiwyg";
import { GlobalEvents } from "@bryntum/grid";

// Require Editor JS files.
import "froala-editor/js/froala_editor.pkgd.min.js";

// Require Editor CSS files.
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";

// Require Font Awesome.
import "font-awesome/css/font-awesome.css";

export default class Richtext extends Component {
  state = { value: "", modal: true };

  getValue() {
    return this.state.value;
  }

  setValue(value) {
    this.setState({ value: value });
  }

  isValid() {
    return true;
  }

  focus() {
    this.setState((prev) => ({
      ...prev,
      modal: true,
    }));
  }

  onChangeHandler(value) {
    console.log("onChange", value);
    this.setState((prev) => ({
      ...prev,
      value: value,
    }));
  }

  handleOk = () => {
    this.setState((prev) => ({
      ...prev,
      modal: false,
    }));
   };

  handleCancel = () => {
    this.setState((prev) => ({
      ...prev,
      modal: false,
    }));
  };

  render() {
    return (
      <Modal
        title="Details"
        open={this.state.modal}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
      >
        <FroalaEditor
          tag="textarea"
          model={this.state.value}
          onModelChange={this.onChangeHandler.bind(this)}
        />
      </Modal>
    );
  }
}



Below is the demo

Attachments
Screen Recording 2022-09-19 at 2.54.14 PM.mov
(12.33 MiB) Downloaded 46 times

Post by marcio »

Hello prashil,

Could you please share how did you configure the cell editor column?? A runnable sample project would be great to check that as well.

Best regards,
Márcio


Post by prashil »

Below attached sample project.

Attachments
Grid_Add_custom_components.zip
(1.73 MiB) Downloaded 47 times

Post by saki »

Froala editor needs a React class as a model: https://github.com/froala/react-froala-wysiwyg#model but in the code you posted it is bound to the string value of the text.

Could that be the root of the problem?


Post by prashil »

I have implemented the code in a similar way as given in the link and you can have a look at the code which i have shared it earlier. But it is not working . So is there a way to fix this problem.
Please guide me to the solution.


Post by alex.l »

We have this bug reported here https://github.com/bryntum/support/issues/5186
There is a race condition problem when using React components rendered outside of cell element.

All the best,
Alex


Post by alex.l »

In case you don't need to render editor inside the cell, subscribe on https://bryntum.com/docs/grid/api/Grid/feature/CellEdit#event-beforeCellEditStart
get record from it, open your popup and return false to prevent default editor show.
On save click in your popup (or any other place which you think good for it), just set new value to the record.

record.set('fieldName', newValue);

All the best,
Alex


Post Reply