RichTextEditor value and onChange props

[vitalbone]

Hi, I've been trying to understand if it's possible to add an initial value and change the value of the RichTextEditor field.

There doesn't seem to be any documentation so I'm not sure how it's supposed to function. Pardon my naiveté but I was hoping it would be as simple as the following however this doesn't work.

const INITIAL_DOCUMENT = {
  nodeType: BLOCKS.DOCUMENT,
  data: {},
  content: [
    {
      nodeType: BLOCKS.PARAGRAPH,
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Initial value',
          marks: [],
          data: {},
        },
      ],
    },
  ],
}

const Field = () => {
  const sdk = useSDK<FieldExtensionSDK>()
  const [value, setValue] = React.useState(INITIAL_DOCUMENT)
  
  useAutoResizer()

  function handleTextChange(doc: any) {
    doc.content[0].content[0].value = 'Updated value'
    setValue(doc)
  }

  return (
    <RichTextEditor
      sdk={sdk}
      isInitiallyDisabled={false}
      value={value}
      onChange={handleTextChange}
    />
  )
}

export default Field

Could you please provide an example of the correct way to add an initial value in the text in the editor, as well as the mechanism to update the text in the editor. Thank you.

[github-actions[bot]]

Marking issue as stale since there was no activity for 30 days

[JoelWakefield]

I've also been looking into this - I wanted to add a character counter below to allow my team to keep track of character count without being strictly limited by a max or min.

It's not a big feature, but it's a small quality of life improvement that would allow them to avoid jumping from character-counting tool to contentful.

[JoelWakefield]

@vitalbone, I found something which I hope is helpful - at least concerning the onChange prop; I don't know about setting initial values.

While I couldn't get the RichTextEditor's onChange function to fire, there is a ConnectedRichTextEditor exported from '@contentful/field-editor-rich-text' as well - it also uses the same props (minus the isInitiallyDisabled prop)!

The onChange function for this component will fire properly; here's a small example of what I used it for:

import { useEffect, useState } from 'react';
import { sum } from 'lodash/fp';

import { Box, Paragraph } from '@contentful/f36-components';
import { FieldExtensionSDK } from '@contentful/app-sdk';
import { useSDK } from '@contentful/react-apps-toolkit';
import { } from '@contentful/field-editor-reference';
import { 
  ConnectedRichTextEditor 
} from '@contentful/field-editor-rich-text';
import * as Contentful from '@contentful/rich-text-types';

const Field = () => {
  //  resize the field wrapper to fit the content
  const sdk = useSDK<FieldExtensionSDK>();
  useEffect(() => {
    sdk.window.startAutoResizer();
  });

  //  update the character count from the rich text values
  const [charCount, setCharCount] = useState(0);
  const handleChange = (doc: Contentful.Document) => {
    const values = doc.content.map((content: any) => 
      content.content[0].value.length
    )
    setCharCount(sum(values));
  }

  return (
    <>
      <ConnectedRichTextEditor 
        sdk={sdk}
        onChange={handleChange} 
      />

      <Box paddingTop='spacingS'>
        <Paragraph>{charCount} characters</Paragraph>
      </Box>
    </>
  ) 
};

export default Field;

I hope this helps! :)

[github-actions[bot]]

Marking issue as stale since there was no activity for 30 days

[rodikh]

Hi, I'm running into this issue as well with the RichTextEditor component. It doesn't fire the onChange event when content is written into the text-editor.

I also tried to dig into the internals and found that useOnValueChanged inside SyncEditorChanges which should handle the binding of the callback does not work properly inside its useEffect environment.

Anecdotally, when removed the wrapping useEffect, it started firing properly.

I would appreciate some guidance on the issue.

[rodikh]

Update: I tested various older versions of @contentful/field-editor-rich-text and found that onChange and sdk.field.onValueChanged triggers properly in version 3.9.0 but stops working in 3.9.1 and onwards.

[github-actions[bot]]

Marking issue as stale since there was no activity for 30 days

[skoch]

Would be nice to get this operational, any update here?

export const RichTextEditorField = ({ sdk }: { sdk: FieldAppSDK }) => {
  const handleOnChange = (doc: Contentful.Document) => {
    console.log('doc', doc)
  }
  return (
    <RichTextEditor onChange={handleOnChange} sdk={sdk} isInitiallyDisabled />
  )
}

[github-actions[bot]]

Marking issue as stale since there was no activity for 30 days