<commit_before>Droplet Editor
=================

Droplet seeks to re-envision "block programming" as "text editing". It is useful as a transitional tool for beginners using languages like Scratch, and is a go-to text editor for everyone on mobile devices (where keyboards are sucky).

How to Embed
------------
To embed, call new droplet.Editor() on a div.

```html
<html>
<head>
<style>
#editor {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
</style>
</head>
<div id="editor">
</div>
</html>
```

```coffeescript
require ['droplet'], (droplet) ->
  editor = new droplet.Editor document.getElementById('editor'), {
    mode: 'coffeescript'
    palette: [
     {
        name: 'Palette category'
        color: 'blue'
        blocks: [
          {
            block: "for [1..3]\n  ``"
            title: "Repeat some code"
          }
        ]
      }
    ]
  }

  editor.setValue '''
  for i in [1..10]
    document.write 'hello world'
  '''
```

Contributing
============

Droplet uses Grunt and npm to build. Run:

```shell
git pull https://github.com/dabbler0/droplet.git
cd droplet
npm install
grunt all
```

When developing, run:
```shell
grunt testserver
```

This will run the development server and watch the `src/` and `example/` directories for recompilation. Visit `localhost:8000/example/example.html` for a simple running environment. A view debugger is available at `localhost:8000/example/test.html`.

Run `grunt all` to run the tests.

Adding a Language
-----------------
Make a CoffeeScript (or JavaScript) file that looks like this:

```coffeescript
define ['droplet-helper', 'droplet-parser'], (helper, parser) ->
  class MyParser extends parser.Parser
    markRoot: ->

  parser.makeParser MyParser

  return MyParser
```

Put it in `src/myparser.coffee`. Add it to the build system in `requirejs-paths.json`:

```javascript
{
  // etc...
  "droplet-myparser": "myparser" // meaning "myparser.coffee" -- or whatever you named your file
  // etc...
}
```

Require it from the controller:

```
define ['droplet-helper',
    'droplet-coffee',
    'droplet-javascript',
    'droplet-myparser', # This is us!
    'droplet-draw' # etc, etc..
    # ...
  ], (helper,
  coffee,
  javascript,
  myparser, # Us again!
  draw, # etc, etc..
  # ...
  ) ->
```

Add a mode option:

```
  # etc...
    @mode = javascript
  else if mode is 'myparser'
    @mode = myparser
```

Then grunt. Your mode is integrated!

To have your parser actually put blocks in, you will need to do some things in the `markRoot` function. Fields and methods you need to know about:
```coffeescript
# Get the raw text passed into the parser:
@text

# Add a Block
@addBlock({
  # Configure the location of the block (all required)
  bounds: {
    start: {line: Number, column: Number} # Lines and columns are zero-indexed<commit_msg>Syntax highlighting<commit_after>Droplet Editor
=================

Droplet seeks to re-envision "block programming" as "text editing". It is useful as a transitional tool for beginners using languages like Scratch, and is a go-to text editor for everyone on mobile devices (where keyboards are sucky).

How to Embed
------------
To embed, call new droplet.Editor() on a div.

```html
<html>
<head>
<style>
#editor {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
</style>
</head>
<div id="editor">
</div>
</html>
```

```coffeescript
require ['droplet'], (droplet) ->
  editor = new droplet.Editor document.getElementById('editor'), {
    mode: 'coffeescript'
    palette: [
     {
        name: 'Palette category'
        color: 'blue'
        blocks: [
          {
            block: "for [1..3]\n  ``"
            title: "Repeat some code"
          }
        ]
      }
    ]
  }

  editor.setValue '''
  for i in [1..10]
    document.write 'hello world'
  '''
```

Contributing
============

Droplet uses Grunt and npm to build. Run:

```shell
git pull https://github.com/dabbler0/droplet.git
cd droplet
npm install
grunt all
```

When developing, run:
```shell
grunt testserver
```

This will run the development server and watch the `src/` and `example/` directories for recompilation. Visit `localhost:8000/example/example.html` for a simple running environment. A view debugger is available at `localhost:8000/example/test.html`.

Run `grunt all` to run the tests.

Adding a Language
-----------------
Make a CoffeeScript (or JavaScript) file that looks like this:

```coffeescript
define ['droplet-helper', 'droplet-parser'], (helper, parser) ->
  class MyParser extends parser.Parser
    markRoot: ->

  parser.makeParser MyParser

  return MyParser
```

Put it in `src/myparser.coffee`. Add it to the build system in `requirejs-paths.json`:

```javascript
{
  // etc...
  "droplet-myparser": "myparser" // meaning "myparser.coffee" -- or whatever you named your file
  // etc...
}
```

Require it from the controller:

```coffeescript
define ['droplet-helper',
    'droplet-coffee',
    'droplet-javascript',
    'droplet-myparser', # This is us!
    'droplet-draw' # etc, etc..
    # ...
  ], (helper,
  coffee,
  javascript,
  myparser, # Us again!
  draw, # etc, etc..
  # ...
  ) ->
```

Add a mode option:

```coffeescript
  if mode is 'coffeescript'
    @mode = coffeescript
  else if mode is 'javascript'
    @mode = javascript
  else if mode is 'myparser'
    @mode = myparser
```

Then grunt. Your mode is integrated!

To have your parser actually put blocks in, you will need to do some things in the `markRoot` function. Fields and methods you need to know about:
```coffeescript
# Get the raw text passed into the parser:
@text

# Add a Block
@addBlock({
  # Configure the location of the block (all required)
  bounds: {
    start: {line: Number, column: Number} # Lines and columns are zero-indexed
{'fraction_non_alphanumeric': 0.14298078587502164, 'fraction_numerical': 0.006231608101090531, 'mean_word_length': 3.0377358490566038, 'pattern_counts': {'":': 2, '<': 19, '<?xml version=': 0, '>': 27, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5138414', 'n_tokens_mistral': 1900, 'n_tokens_neox': 1801, 'n_words': 656}