<commit_before># Table of Contents

- [Overview](#overview)
- [Component BOM](#bom)
- [App](#app)
- [TemplateCollection](#template_collection)
- [Ribbon](#template_ribbon)
- [RibbonItem](#template_ribbon_item)
- [TemplateEditor](#template_editor)
-- [Handling Bookmarks](#bookmarks)
- [TemplateHeader](#template_header)
- [HeaderPanel](#header_panel)
- [Directives](#directives)


<a name="overview"/>
# Overview

This document presents the main components in the application
and also documents the individual components.

<a name="bom"/>
# Component BOM
```
App(d)
  TemplateCollection(d)
  Ribbon(d)
   RibbonItem(d)
    TemplateEditor(d)
     TemplateHeader
       Actions[Add,Remove,Save]
       HeaderPanel
         Edit[name, description, output]
         SelectList[directives]
         Configure[button]
         
       >>>> OR <<<
       
       Directives
         LHSList (available all directives, DnD source)
         RHSList (configured directives, DnD target)
          [<li>DirectivesEditorTrigger</li> ...]
          DirectivesEditorTrigger
           Actions [edit, remove]
          DirectiveEditors (modal)
           RequireTags
           ReplaceValue
           InsertSubTemplatesFromTagData
           ...
           ..
           
     TemplateBody
       ContentEditable
       InsertBookmarkTrigger
         InsertBookmark (modal)

     >>>> OR <<<
     
     [App, ...]
     
```

<a name="app"/>
## App

The App component encapsulates the top top-level state, and all
interactions with the server. It is also the primary source of
render trigger due to state changes. The component is meant to
be embedded inside other components in a nested fashion.

The important top-level states are

```
- selected collection
- selected ribbon item
- global directives
- templates for selected collection
- current template in view
```

The important server interaction methods are

```

- loadDirectives
- loadCollections
- loadTemplates
- loadTemplate
- addTemplate
- removeTemplate
- saveTemplate

```

<a name="template_collection"/>
## TemplateCollection

The class encapsulates the selection behavior of top-level templates.
Note that this component is never utilized when the `App` component
is nested. This logic is implemented in the `App:header` method.


<a name="template_ribbon"/>
## TemplateRibbon

The ribbon component acts as a container for a group of templates in
a selected collection. The behavior is like a cover-flow showing a
single template at a time. Provisions for left/right navigation are
provided.

For each concrete template in the collection a `TemplateRibbonItem`
is embedded. The template itself is lazily loaded when the item
is in view.

When the left/right buttons are clicked the `App:collectionSelected`
is called.


<a name="template_ribbon_item"/>
## TemplateRibbonItem

The class encapsulates ribbon related behavior and embeds the
`TemplateEditor` component for a particular template.

<a name="template_editor"/>
## TemplateEditor

The class acts as container for multiple components as stated
in the BOM. The class also acts as a narrow channel for template
save actions.


<a name="bookmarks"/>
### Handling Of Bookmarks

When it is time to render this component the following
action takes place.

- The `TemplateHeader` is instantiated and rendered.

- Next `template.content` is chunked into `body_items`. The chunking happens
at the boundries of detected bookmarks `<tkBookmark/>` tags.

- Each item in the collection can either be of type `text` or of
type `bookmark` with associated data attribute (i.e. text or tag with
attributes)

- Finally the `body_items` are traversed and based on the type of
the item either a `TemplateBody` is instantiated or an `App` is
instantiated.


### Handling Of Save Action

When a save action happens either due to user pressing the `Save` button
or when a bookmark is inserted the `TemplateEditor:handleSave` method is
called. The following sequence of action happens.

- The header values are collected

- The configured directives are collected

- The `template.content` text is re-constructed using newly introduced
text content and/or any newly inserted bookmark.

- Finally the `App:saveTemplate` method is invoked.


<a name="template_header"/>
## TemplateHeader

The header component provides for the following.

- Embed template level behavior components like add, remove, and save

- Accordion like behavior that encapsulates either the strictly
header level components `HeaderPanel` (to edit name, description,
and action) or the `Directives` panel to configure the directives<commit_msg>design doc<commit_after># Table of Contents

- [Overview](#overview)
- [Component BOM](#bom)
- [App](#app)
- [TemplateCollection](#template_collection)
- [Ribbon](#template_ribbon)
- [RibbonItem](#template_ribbon_item)
- [TemplateEditor](#template_editor)
  - [Handling Bookmarks](#bookmarks)
  - [Handling Save](#handle_save_action)
- [TemplateHeader](#template_header)
- [HeaderPanel](#header_panel)
- [Directives](#directives)


<a name="overview"/>
# Overview

This document presents the main components in the application
and also documents the individual components.

<a name="bom"/>
# Component BOM
```
App(d)
  TemplateCollection(d)
  Ribbon(d)
   RibbonItem(d)
    TemplateEditor(d)
     TemplateHeader
       Actions[Add,Remove,Save]
       HeaderPanel
         Edit[name, description, output]
         SelectList[directives]
         Configure[button]
         
       >>>> OR <<<
       
       Directives
         LHSList (available all directives, DnD source)
         RHSList (configured directives, DnD target)
          [<li>DirectivesEditorTrigger</li> ...]
          DirectivesEditorTrigger
           Actions [edit, remove]
          DirectiveEditors (modal)
           RequireTags
           ReplaceValue
           InsertSubTemplatesFromTagData
           ...
           ..
           
     TemplateBody
       ContentEditable
       InsertBookmarkTrigger
         InsertBookmark (modal)

     >>>> OR <<<
     
     [App, ...]
     
```

<a name="app"/>
## App

The App component encapsulates the top top-level state, and all
interactions with the server. It is also the primary source of
render trigger due to state changes. The component is meant to
be embedded inside other components in a nested fashion.

The important top-level states are

```
- selected collection
- selected ribbon item
- global directives
- templates for selected collection
- current template in view
```

The important server interaction methods are

```

- loadDirectives
- loadCollections
- loadTemplates
- loadTemplate
- addTemplate
- removeTemplate
- saveTemplate

```

<a name="template_collection"/>
## TemplateCollection

The class encapsulates the selection behavior of top-level templates.
Note that this component is never utilized when the `App` component
is nested. This logic is implemented in the `App:header` method.


<a name="template_ribbon"/>
## TemplateRibbon

The ribbon component acts as a container for a group of templates in
a selected collection. The behavior is like a cover-flow showing a
single template at a time. Provisions for left/right navigation are
provided.

For each concrete template in the collection a `TemplateRibbonItem`
is embedded. The template itself is lazily loaded when the item
is in view.

When the left/right buttons are clicked the `App:collectionSelected`
is called.


<a name="template_ribbon_item"/>
## TemplateRibbonItem

The class encapsulates ribbon related behavior and embeds the
`TemplateEditor` component for a particular template.

<a name="template_editor"/>
## TemplateEditor

The class acts as container for multiple components as stated
in the BOM. The class also acts as a narrow channel for template
save actions.


<a name="bookmarks"/>
### Handling Of Bookmarks

When it is time to render this component the following
action takes place.

- The `TemplateHeader` is instantiated and rendered.

- Next `template.content` is chunked into `body_items`. The chunking happens
at the boundries of detected bookmarks `<tkBookmark/>` tags.

- Each item in the collection can either be of type `text` or of
type `bookmark` with associated data attribute (i.e. text or tag with
attributes)

- Finally the `body_items` are traversed and based on the type of
the item either a `TemplateBody` is instantiated or an `App` is
instantiated.


<a name="handle_save_action"/>
### Handling Of Save Action

When a save action happens either due to user pressing the `Save` button
or when a bookmark is inserted the `TemplateEditor:handleSave` method is
called. The following sequence of action happens.

- The header values are collected

- The configured directives are collected

- The `template.content` text is re-constructed using newly introduced
text content and/or any newly inserted bookmark.

- Finally the `App:saveTemplate` method is invoked.


<a name="template_header"/>
## TemplateHeader

The header component provides for the following.

- Embed template level behavior components like add, remove, and save

- Accordion like behavior that encapsulates either the strictly
header level components `HeaderPanel` (to edit name, description,
and action) or the `Directives` panel to configure the directives
{'fraction_non_alphanumeric': 0.07645029113651068, 'fraction_numerical': 0.0, 'mean_word_length': 3.7564102564102564, 'pattern_counts': {'":': 0, '<': 40, '<?xml version=': 0, '>': 44, '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': '1062627', 'n_tokens_mistral': 2505, 'n_tokens_neox': 2399, 'n_words': 1022}