Correct usage of jira-editor-core from Atlaskit (Richt-Text-Editor) in p2 environment

Hi @M.Abdel-Mola

Yes we’ve had the same problem. I believe the issue is that the editor uses an editable div rather than a text area so Jira doesn’t recognise it as a field.

A solution we use is to wrap usages of the editor in another component that disables the shortcuts for its children. Something along the lines of this:

import React, { PureComponent } from "react";

class ShortcutBoundary extends PureComponent {
    constructor(props) {
        super(props);
        this.wrapperNode = React.createRef();
    }

    componentDidMount() {
        const { current } = this.wrapperNode;
        if (current && typeof AJS !== "undefined") {
            AJS.$(current).on("aui:keypress", this.preventKeyboardShortcut);
        }
    }

    componentWillUnmount() {
        const { current } = this.wrapperNode;
        if (current && typeof AJS !== "undefined") {
            AJS.$(current).off("aui:keypress", this.preventKeyboardShortcut);
        }
    }

    render() {
        return (
            <div ref={this.wrapperNode}>
                {this.props.children}
            </div>
        );
    }

    private preventKeyboardShortcut = e => e.stopPropagation();
}

export default ShortcutBoundary;

Cheers,
Jared

3 Likes