Atlaskit / Editor-core and Wiki/Markup Encode NOT supported yet?

Jira Development Jira Cloud
, ,
1

I’m trying to use the Atlaskit/editor-core react modules to support editing the Jira Description field and oddly it seems the only well supported transformers within the react/atlaskit bundles are those that transform to and from HTML and not the markup which Jira is already using. Both the Markdown and Wiki transformers show an error message of something like “Uncaught (in promise) Error: This is not implemented yet
at MarkdownTransformer.encode (index.js:138)
at eval (index.js:82)”

Neither actually ENCODE the editor output… so how in the world are we supposed to use the editor to save into a description field. I feel like i’m missing something horribly obvious. Thanks!

2

Did you figured it out? or any updates as to the status of this?

As a side note I used the following for my implementation which worked pretty well for me. I got really excited when i ran into atlaskit only to be disappointed. The one problem I have with the current implementation I have is I want to be able to use text color which is supported by Atlassian but not markdown.

3

Further followup for anyone else looking at this. The WikiMarkupTransformer seems to work. The main problem is that it doesn’t understand Jira’s description data out of the box which is problematic but it’s really simple to get it to work after seeing what it was doing.

.replace(/\r/gi,'').replace(/\n /gi, '\n')

Basically Jira stores \r\n for every new line (in particular with bullet regarding the space) the Wiki transformer gets confused on that. Once I removed the extra space at the end of the line it worked. I think that was the important piece more so than the \r i just needed to be sure in case \n\r came around. Next i need to try actually saving this edited description to Jira for the final test.

4

and final post here as this serves anyone else who runs into this. Important piece to enable saving is to use the transformer to turn the doc back into wiki markup text. Full example below for anyone looking. May not work as i tried to simplify it as much as possible from my use case.

import * as React from "react";
import { Editor, EditorContext } from '@atlaskit/editor-core';
import { WikiMarkupTransformer } from '@atlaskit/editor-wikimarkup-transformer';
import { ReactRenderer, ADFEncoder } from '@atlaskit/renderer';


export default class EditableMarkDown extends React.Component {
  

  constructor(props) {
    super(props);
    this.state = {
      draftText: "",
      transformer: new WikiMarkupTransformer(),
      editing: false
    }
    this.handleChange = this.handleChange.bind(this);
    this.triggerSubmit = this.triggerSubmit.bind(this);
  }

  handleChange(editorView) {
    var text = this.state.transformer.encode(editorView.state.doc);
    this.setState({draftText: text});
  };

  toggleEditing() {
    this.setState({editing: !this.state.editing});
  }

  triggerSubmit() {
    //Do something with this.state.draftText
  }

  render() {
  
    if (this.state.editing) {
      textOrInput =   <div >
                        <Editor
                          defaultValue={this.state.draftText}
                          appearance="comment"
                          allowLists
                          allowTextColor
                          onChange={this.handleChange}
                          contentTransformerProvider={schema => new WikiMarkupTransformer(schema)}/>
                        <button  onClick={ () => {  this.triggerSubmit();
                                                    this.toggleEditing(); }} >Save</button>
                        <button  onClick={ () => {
                                                    this.toggleEditing(); }} >cancel</button>
                      </div>
    } else {
      const adfEncoder = new ADFEncoder(() => this.state.transformer);
      const document = adfEncoder.encode(this.state.draftText);
      textOrInput = <div className={className} onClick={this.toggleEditing}> <ReactRenderer document={document} /> </div>
    }

    return (
      <div>
        {textOrInput}
      </div>
    );
  }
}
2 Likes
5

This solution worked for me however still I have problem with mention data not coming back properly in ReactRenderer… I try different option but no success.

ADFEncoder generating proper mention object with text attribute blank. so it looks when we transform editor data to wiki it generate mention data in this format [~13]… but at time of render back adfEncoder not able to generate properly.

const adfEncoder = new ADFEncoder(
        schema => new WikiMarkupTransformer(schema)
      );
      const doc = adfEncoder.encode(document);

<ReactRenderer
                  document={this.state.document}
                  truncated={this.state.truncated}
                  dataProviders={ProviderFactory.create({
                    mentionProvider: this.props.mentionProvider ? Promise.resolve(this.props.mentionProvider) : null
                  })}
                  schema={defaultSchema}
                />