[Editor Core] Assistance on 'onChange' Event

Forge
1

Hi there,

I am currently venturing deeper into Editor Core (Jira Forge). However, I’m facing an issue where I couldn’t figure out a way to extract the edited content.

Below is my code:

const [content, setContent] = useState(null);

<Editor
    contentTransformerProvider={
    (schema) => new JIRATransformer(schema)
    }
    placeholder="Please type your comment here..."
    onChange={
        (editorView, meta) => setContent(editorView.state.doc)
    }
    allowCodeBlocks
    allowLists
    allowJiraIssue
    allowStatus
    allowTextAlignment
    allowTextColor
    allowDate
    allowIndentation
    shouldFocus
/>

Issue faced:
content returns nothing once the event onChange gets triggered.

Expected behaviour:
I want it to return the HTML definition of the text / elements within the Editor.

I would highly appreciate if you could shed some light over here.

Cheers

2

Hi @InspectorGadget, thank you for reaching out!

I followed documentation for Atlaskit editor component available here. In labs section, there is a working example of the similar use case:

 import {
    Editor,
    WithEditorActions,
    EditorContext,
  } from '@atlaskit/editor-core';

  handleSave = actions => () => {
    actions.getValue().then(value => console.log(value));
  };

  render(
    <EditorContext>
      <WithEditorActions
        render={actions => <Editor onSave={this.handleSave(actions)} />}
      />
    </EditorContext>,
  );

it works similarly for onChange callback. In my case, it logged:

image

I hope it helps. Best regards,
Łukasz

3

Dear @ljarzabek ,

Thank you so much for the example. It works as expected now. Just a quick question, can editor-core return the values in HTML? Provided that I have a Content Transformer within <Editor>?

Cheers

4

Hi @InspectorGadget,

I can see bunch of available transformers that can be used (described in Using a non-'Atlassian Document Format' storage format section here), e.g.

However, I’m afraid there is no transformer for plain HTML. There is a confluence transformer that produces cxhtml - maybe it will work for you?

Best regards,

5

Dear @ljarzabek ,

Thank you for your prompt response. I achieved the behavior that I was expecting successfully.

Cheers

1 Like