React Gherkin Editor

A Gherkin language editor for React.

Introduction

React Gherkin Editor is a wrapper arround React Ace Editor specially designed for Gherkin.

Features:

• Gherkin syntax highlighting
• Gherkin keyword snippets
• Easy to provide step autocompletions (Promise based)
• Gherkin I18n support
• Special themes for Jira and Cucumber

Installation

Using npm:

npm install --save @smartbear/react-gherkin-editor

Using yarn:

yarn add @smartbear/react-gherkin-editor

Basic Usage

import React from 'react'
import { render } from 'react-dom'
import ReactGherkinEditor from '@smartbear/react-gherkin-editor'

const root = document.createElement('div')
document.body.appendChild(root)

const initialValue = `Feature: Serve coffee
  As a coffee lover
  I can get coffee from the machine
  So I can enjoy the rest of the day

  Scenario: Simple use
    # Well, sometimes, you just get a coffee.
    Given the coffee machine is started
    When I take a coffee
    Then coffee should be served
    And message "Please take your coffee" should be printed`

const steps = [
  'I start the coffee machine using language "lang"',
  'I shutdown the coffee machine',
  'message "message" should be displayed'
]

const onValueChange = console.log

const autoCompleteFunction = async (_keyword, text) => {
  const matches = steps.filter(step => step.startsWith(text))

  const completions = matches.map(match => ({
    caption: match,
    value: match,
    score: Math.floor(Math.random() * Math.floor(100)),
    meta: 'Step'
  }))

  return completions
}

render(
  <ReactGherkinEditor
    initialValue={initialValue}
    onChange={onValueChange}
    autoCompleteFunction={autoCompleteFunction}
    language='en'
    theme='cucumber'
  />,
  root
)

Ace Documentation

React Ace Editor