<commit_before>#semantic editor

Semantic Editor (SE) is an HTML editor built on `contentEditable` designed expressly
for reliable editing of semantic markup. It is highly customizable but not yet easy
 to use. SE differs from similar editors in that:

* SE is purely semantic. The user edits a document in terms of body, header, blockquotes, etc. Later the document
 can be rendered as whatever non-semantic markup is desired.
* SE keeps an internal semantic  model as the authoritative document. The browser's DOM is 
  used for rendering only (with a few exceptions), not storing the document data.
* SE does not replace or manipulate the browser input system. This ensures native context menus and input editors
  continue to work. For example, on Mac if you press and hold the E key the OS will render a popup menu
  with accented forms of E.  This will continue to work properly in SE, as will pasting content and
  other native input methods (Japanese, Chinese, etc.)
* SE is highly customizable. You can create your own keybindings, insert custom actions, add or remove supported
semantic styles. You can modify the rendering and import/export filters. (see examples) 
* SE does not provide a GUI. It does not have dropdowns or a toolbar, allowing you to implement your own
 with whatever GUI library you prefer (ReactJS, JQuery, Bootstrap, etc.) It modifies only the actual editor div.
 (see examples)


# Screenshot

![screenshot](docs/screenshot1.png?raw=true)


# Using Semantic Editor


Create a DIV in your document then make a new editor attached to it like this:

```
<div id="myeditor" class="semantic-view" contenteditable="true" spellcheck="false"></div>
<script>
var editor = Editor.makeEditor(document.getElementById('myeditor'));
</script>
```

Create a simple document

```
var model = editor.getModel();
var block1 = model.makeBlock();
var text1  = model.makeText("abc");
block1.append(text1);
model.getRoot().append(block1);
editor.syncDom();
```


Default styling is done with the `semantic.css` file.
 
Add a new action with `editor.addAction(name, function)`. ex:

```
editor.addAction('print-as-plain',function(nativeEvent, editor) {
   console.log(editor.getModel().toPlainText());
});<commit_msg>cleanup docs<commit_after>#semantic editor

Semantic Editor (SE) is an HTML editor built on `contentEditable` designed expressly
for reliable editing of semantic markup. It is highly customizable but not yet easy
 to use. SE differs from similar editors in that:

* SE is purely semantic. The user edits a document in terms of body, header, blockquotes, etc. Later the document
 can be rendered as whatever non-semantic markup is desired.
* SE keeps an internal semantic  model as the authoritative document. The browser's DOM is 
  used for rendering only (with a few exceptions), not storing the document data.
* SE does not replace or manipulate the browser input system. This ensures native context menus and input editors
  continue to work. For example, on Mac if you press and hold the E key the OS will render a popup menu
  with accented forms of E.  This will continue to work properly in SE, as will pasting content and
  other native input methods (Japanese, Chinese, etc.)
* SE is highly customizable. You can create your own keybindings, insert custom actions, add or remove supported
semantic styles. You can modify the rendering and import/export filters. (see examples) 
* SE does not provide a GUI. It does not have dropdowns or a toolbar, allowing you to implement your own
 with whatever GUI library you prefer (ReactJS, JQuery, Bootstrap, etc.) It modifies only the actual editor div.
 (see examples)


# Screenshot

![screenshot](docs/screenshot1.png?raw=true)


# Using Semantic Editor


Create a DIV in your document then make a new editor attached to it like this:

```
<div id="myeditor" class="semantic-view" contenteditable="true" spellcheck="false"></div>
<script>
var editor = Editor.makeEditor(document.getElementById('myeditor'));
</script>
```

Create a simple document

```
var model = editor.getModel();
var block1 = model.makeBlock();
var text1  = model.makeText("abc");
block1.append(text1);
model.getRoot().append(block1);
editor.syncDom();
```


Default styling is done with the `semantic.css` file.
 
 
# Add a New Action and Key Binding
 
Add a new action with `editor.addAction(name, function)`. ex:

```
editor.addAction('print-as-plain',function(nativeEvent, editor) {
   console.log(editor.getModel().toPlainText());
});
{'fraction_non_alphanumeric': 0.08303650934995548, 'fraction_numerical': 0.0026714158504007124, 'mean_word_length': 4.687341772151899, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, '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': '6451821', 'n_tokens_mistral': 1259, 'n_tokens_neox': 1185, 'n_words': 590}