@tinynodes/ngx-editorjs-plugins
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

Ngx-EditorJS Plugins

npm version

This module provides the core Plugin service for @tinynodes/ngx-editorjs, and also provides a default set of EditorJS plugins for using Angular modules and Injection Tokens.

Plugin Service

The NgxEditorJSPluginService takes all the Plugin provides and creates a single map of the configurations and instances. These are used within NgxEditorJS to set the plugins available within the editor. The plugin service is provided separably to avoid circular dependencies within the libraries and is required by @tinynodes/ngx-editorjs

Creating a Plugin.

Creating a plugin is very simple, the module provides some Injection Tokens for use with the module.

The plugin you want to import should conform to the Block or Inline format of EditorJS, alongside a configuration object that provides details about the plugin.

Both these providers must be set to multi: true - when the plugin service is initialised it will be provided a map of these.

Here is an example of the PluginParagraph:

import { NgModule } from '@angular/core';
import { EDITOR_JS_TOOL_INJECTOR, PLUGIN_CONFIG, PluginTypes from '@tinynodes/ngx-editorjs-plugins';
import Paragraph from '@editorjs/paragraph';

@NgModule({
  providers: [{
    provide: EDITOR_JS_TOOL_INJECTOR,
    useValue: Paragraph,
    multi: true // IMPORTANT!
  }, {
    provide: PLUGIN_CONFIG,
    useValue: {
      key: 'paragraph',
      type: PluginTypes.Block,
      pluginName: 'EditorJS Paragraph',
    },
    multi: true // IMPORTANT!
  }]
})
export class PluginParagraphModule {}

The full configuration object parameters are listed below, please note some are not yet implemented in the application but will be used in future releases.

Param Name Type Optional Description
key string No The default key of the plugin (e.g. paragraph)
type string No The type of plugin, currently block and inline are supported
pluginName string No The descriptive name of the plugin
config object Yes Optional configuration to pass to the plugin
shortcut string Yes An optional keyboard shortcut for the plugin
description string Yes A description of the plugin
blockData string Yes Optional default block data to use for the plugin

Once imported into an application or module the plugin is available in the app with several methods to get plugins on the service.

  • getPlugins - Get a map of all plugins
  • getPlugin(key: string) - Get a specific plugin by map key
  • getPluginsWithExclude(excludeList: string[]) - Get a map of plugins but exclude ones in the passed list
  • getPluginsWithInclude(includeList: string[]) - Get a map of plugins but only the ones in the include list

Peer Dependencies

All EditorJS plugins are listed as peerDependencies of the project - this is because Angular requires these modules to be in the root. You must manually install these are the root of your Angular application.

> npm install @editorjs/paragraph @editorjs/header ....

Plugin List

Plugin Name Description Links
PluginCodeModule Provides a <code> block editor README GitHub
PluginHeaderModule Provides a <h1> - <h6> block editor README GitHub
PluginImageModule Provides an <img> block editor + file upload support README GitHub
PluginLinkModule Provides an <a> block editor README GitHub
PluginIListModule Provides an <ol>/<li> block editor README GitHub
PluginMarkerModule Provides inline text marking README GitHub
PluginParagraphModule Provides an <p> block editor README GitHub
PluginSimpleImageModule Provides an <img> block editor with paste support README GitHub

Package Sidebar

Install

npm i @tinynodes/ngx-editorjs-plugins

Weekly Downloads

26

Version

3.0.0

License

MIT

Unpacked Size

397 kB

Total Files

69

Last publish

Collaborators

  • tanepiper