npm package: @halloverden/ngx-directus-content-handler
Description: This package simplifies handling the content delivered from the [Flexible Editor Extension](https://github.com/formfcw/directus-extension-flexible-editor) for Directus. It supports some of the most common content and mark types, and allows you to provide 
Latest version: 1.0.0-rc.5

# @halloverden/ngx-directus-content-handler

This package simplifies handling the content delivered from the [Flexible Editor Extension](https://github.com/formfcw/directus-extension-flexible-editor) for Directus.
It supports some of the most common content and mark types, and allows you to provide your own implementations of both content handlers and mark handlers for any content type you like.

## The flexible editor content service
This service is used when handling content from the [Flexible Editor Extension](https://github.com/formfcw/directus-extension-flexible-editor). It has the following public methods:

| Signature                                                                                                                                                           | Description                                                                                                                                                                         |
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| static prioritySorterFunction(a: ContentHandlerInterface &#124; MarkHandlerInterface, b: ContentHandlerInterface &#124; MarkHandlerInterface): 0 &#124; 1 &#124; -1 | An array sorter function used for sorting by the `priority` property.                                                                                                               |
| static getTypeName(content: any): string                                                                                                                            | Returns the type name of any given content.                                                                                                                                         |
| getSupportedContentHandler(type: string, contentHandlers: ContentHandlerInterface[]): ContentHandlerInterface                                                       | Returns the first content handler, by priority, that supports the given type. Throws an error if no content handler was found for the given type.                                   |
| getSupportedMarkHandler(type: string, markHandlers: MarkHandlerInterface[]): MarkHandlerInterface                                                                   | Returns the first mark handler, by priority, that supports the given type. Throws an error if no mark handler was found for the given type.                                         |
| static getCommentPlaceholder(comment: string, sanitizer: DomSanitizer): DynamicContentInterface                                                                     | Returns an instance of `DynamicContentInterface` with a safeHtml comment instance. Used internally when handlers are missing.                                                       |
| addContentHandler(contentHandler: ContentHandlerInterface): void                                                                                                    | Adds a content handler to the service. Use this if you want to add a content handler without providing it through the config.                                                       |
| removeContentHandler(contentHandler: ContentHandlerInterface): void                                                                                                 | Removes a content handler from the service.                                                                                                                                         |
| getContentHandlers(): ContentHandlerInterface[]                                                                                                                     | Returns all content handlers.                                                                                                                                                       |
| addMarkHandler(markHandler: MarkHandlerInterface): void                                                                                                             | Adds a mark handler to the service. Use this if you want to add a mark handler without providing it through the config.                                                             |
| removeMarkHandler(markHandler: MarkHandlerInterface): void                                                                                                          | Removes a mark handler from the service.                                                                                                                                            |
| getMarkHandlers(): MarkHandlerInterface[]                                                                                                                           | Returns all mark handlers.                                                                                                                                                          |
| handleFlexibleEditorDoc(doc: any, editorNodes?: EditorNode[]): DynamicContentInterface[]                                                                            | Takes the doc and editor nodes from the Flexible Editor, and returns an array of `DynamicContentInterface`. This array can be provided directly to the dynamic container component. |


## The dynamic container component
This component has a single input, `content`, that is an array of `DynamicContentInterface`. The interface looks like this:
```ts
interface DynamicContentInterface {
  component?: {
    type: Type<any>,
    inputs?: { [key: string]: any }
  };
  htmlElement?: HTMLElement;
  safeHtml?: SafeHtml;
  text?: string;
}
```
The component will output to the DOM, an instance of whatever component or `SafeHtml` the interface contains. It can even handle instances of the interface that contain a component reference to itself:
```ts
const content = {
  component: {
    type: DynamicContainerComponent,
    inputs: {
      content: somethingSomethingContent,
    },
  },
};
```

```html
<hv-ngx-directus-dynamic-content-container [content]="content" />
```

## Content Handlers
Provided by using the `NGX_DIRECTUS_CONTENT_HANDLER_CONTENT_HANDLERS_INJECTION_TOKEN` injection token:
```ts
export function provideContentHandlers(): EnvironmentProviders {
  return makeEnvironmentProviders([
    {
      provide: NGX_DIRECTUS_CONTENT_HANDLER_CONTENT_HANDLERS_INJECTION_TOKEN,
      multi: true,
      useClass: ImageWithAltTextContentHandler
    },
    {
      provide: NGX_DIRECTUS_CONTENT_HANDLER_CONTENT_HANDLERS_INJECTION_TOKEN,
      multi: true,
      useClass: SalaryTableReferenceContentHandler
    }
  ]);
}
```

If you've got a lot of custom content types, you can provide a single content handler that has support for all your custom content types, that delegates to whatever classes or functions you might want to use.

## Mark Handlers
Provided by using the `NGX_DIRECTUS_CONTENT_HANDLER_MARK_HANDLERS_INJECTION_TOKEN` injection token:
```ts
export function provideContentHandlers(): EnvironmentProviders {
  return makeEnvironmentProviders([
    {
      provide: NGX_DIRECTUS_CONTENT_HANDLER_MARK_HANDLERS_INJECTION_TOKEN,
      multi: true,
      useClass: MyMarkHandler
    },
  ]);
}
```

If you've got a lot of custom mark types, you can provide a single mark handler that has support for all your custom mark types, that delegates to whatever classes or functions you might want to use.