Adding a custom JavaFX control to Scenebuilder

Question

Currently, i'm building a project within FXML and would like to make use of a custom RichTextFX Java class within SceneBuilder 2.0. I know that it will involve the use of custom controls however I'm currently confused on what steps I'll need to actually complete the implementation.

package view;

public class LeftTextArea extends TextArea {

private CodeArea leftCode = new CodeArea();

//CodeArea -  defining the areas for coloured text:
 private static final String[] KEYWORDS = new String[] {
            "Given", "Then", "And", "But", "Feature", "Scenario", "When", "Background"
 };

 private static final String KEYWORD_PATTERNS = "\\b(" + String.join("|", KEYWORDS) + ")\\b";

 private static final String SEMICOLON = "\\;";

 private static final String STRING = "\"([^\"\\\\]|\\\\.)*\"";

 private static final String BRACKET =  "\\[|\\]";

 private static final String PARENTHESIS = "\\(|\\)";


 //CodeArea - Defining the pattern used for the Keywords using Regex commands:

 //CodeArea - Compiling the pattern using the Java Regex Pattern class:
 private static final Pattern PATTERN = Pattern.compile(
           "(?<KEYWORD>" + KEYWORD_PATTERNS + ")"
         + "|(?<SEMICOLON>" + SEMICOLON + ")"
         + "|(?<STRING>" + STRING + ")"
         + "|(?<BRACKET>" + BRACKET + ")"
         + "|(?<PARENTHESIS>" + PARENTHESIS + ")"
         );

public void start(Stage primaryStage) throws Exception {
    leftCode.setParagraphGraphicFactory(LineNumberFactory.get(leftCode));
    leftCode.richChanges().filter(ch -> !ch.getInserted().equals(ch.getRemoved())).subscribe(change -> {
    leftCode.setStyleSpans(0, computeHighlighting(leftCode.getText()));
    });

    Scene scene = new Scene(leftCode, 500, 400);
    scene.getStylesheets().add(LeftTextArea.class.getResource("GherkinView.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();
}

private static StyleSpans<Collection<String>> computeHighlighting(String text) {
    Matcher patternmatcher = PATTERN.matcher(text);
    StyleSpansBuilder<Collection<String>> spansBuilder = new StyleSpansBuilder<>();

    int keywordend = 0;

    while(patternmatcher.find()) {
        String styleClass = 
        patternmatcher.group("KEYWORD") != null ? "keyword" :
        patternmatcher.group("SEMICOLON") != null ? "semicolon" : 
        patternmatcher.group("STRING") != null ? "string" : 
        patternmatcher.group("BRACKET")!= null ? "bracket" : 
        patternmatcher.group("PARENTHESIS")!= null ? "parenthesis" :
        null;
        assert styleClass != null;
        spansBuilder.add(Collections.emptyList(), patternmatcher.start() - keywordend);
        spansBuilder.add(Collections.singleton(styleClass), patternmatcher.end() - patternmatcher.start());
        keywordend = patternmatcher.end();
    }
    spansBuilder.add(Collections.emptyList(), text.length() - keywordend);
    return spansBuilder.create();
}
}

I've tried to export it as a JAR file and import it into SceneBuilder, however, it's un-editable and does not function as intended. This is how it looks on the final productJavaFX GUI.

Any help would be appreciated and I'd be more than happy to clarify further.

Thanks,

Charandeep