open-index/open-npm huggingface dataset:
npm package: @robsis/angular-editor
Description: Magnolia Angular Editor
Author: Magnolia International Ltd.
Latest version: 1.3.2-logging

# Magnolia Angular Editor

You can find the `@magnolia/angular-editor` documentation on the [website](https://docs.magnolia-cms.com/product-docs/6.2/Developing/SPA-development-and-Magnolia/Magnolia-front-end-helpers-for-SPA/Magnolia-Angular-Editor.html).
npm package: @robsis/angular-renderer
Description: Magnolia Angular Editor
Author: Magnolia International Ltd.
Latest version: 1.0.0-beta2

# Magnolia Angular Editor

Angular library for easy integration with Magnolia CMS.

## Usage

 1. Add `@robsis/angular-renderer` to your dependencies.

 2. Add `MagnoliaModule` into imports of your `app.module.ts`.

 3. Connect to REST endpoint and use `mgnl-page` in your `app.component.ts` (or other host component):
````
@Component({
  template: '<mgnl-page [content]="content"></mgnl-page>'
})
export class AppComponent implements OnInit
  constructor(private http: HttpClient, private rendererContext: RendererContextService) { }

  @Input() content: any;

  ngOnInit(): void {
    this.rendererContext.setComponentMapping({
      'angular-magnolia-int:pages/home': ListOfGroceriesCompnent,
      'angular-magnolia-int:components/textImage': TextImageComponent,
      'angular-magnolia-int:components/paragraph': ParagraphComponent,
    });

    this.http.get(environment.restUrlBase + environment.rootCmsPath).pipe()
        .subscribe(data => {
            this.content = data;
        });
  }
}
````

 4. Because these components are not specified in any template, we need to add them to `entryComponents`. (See [documentation](https://angular.io/guide/entry-components))

 5. Render areas inside your components using `mgnl-area` directive:
````
<h2>{{ content.pageTitle }}</h3>
<ul mgnl-area [content]="content" [name]="'area-name'"></ul>
````

 6. To enable editing mode in Magnolia page editor, you need to obtain also template definitions from separate REST endpoint:
````
this.http.get(environment.restUrlBase + environment.rootCmsPath).pipe()
    .subscribe(data => {
        this.content = data;

        this.http.get(environment.templateDefinitionBase + this.content['mgnl:template']).pipe()
            .subscribe(definitions => {
                this.rendererContext.setTemplateDefinitions(definitions);
            });
    });
````
npm package: @robsis/react-renderer
Description: Magnolia React Editor
Author: Magnolia International Ltd.
Latest version: 1.0.0-beta2

# Magnolia React Editor

This library provides functions to wrap your Single Page Application which support editable in Magnolia's Page Editor


## `enableMgnlRenderer`
Use to wrap a `enableMgnlRenderer` components:

* Provides the context to transfer data to children components
* Generate comment for `page` in html `head`


## `MgnlArea.js`

It helps to generate `MgnlArea` in Single Page Application:

* Create React's components based on component mappings
* In edit mode, it also wraps `area` and `components` with comments
npm package: @robsis/template-annotations
Description: Magnolia Template Annotations
Author: Magnolia International Ltd.
Latest version: 1.3.1-logging

# Magnolia Template Annotations

Magnolia Template Annotations help making front-end projects editable in Magnolia. It does so by injecting annotations (HTML comments) around your components, which Magnolia's Page Editor transforms into controls for content editors.

## Installation

```sh
npm install --save @magnolia/template-annotations
```

## Usage

To use *TemplateAnnotations*, you need to import it:

```javascript
import { TemplateAnnotations } from '@magnolia/template-annotations';
```

*TemplateAnnotations* module provides these functions:

```javascript
function getAreaCommentString(data: object, templateDefinition: object, componentCount?: number): string;
function getComponentCommentString(data: object, templateDefinition: object): string;
function getPageCommentString(data: object, templateDefinition: object): string;
```

## Changelog

See the [CHANGELOG.md](https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/template-annotations/CHANGELOG.md) file.