editor.md

Editor

A rich text editor for Angular based on @atlaskit/editor-core.

Installation

Install the package from NPM

npm install @zodiac-ui/editor

Peer Dependencies

Zodiac Editor has a number of peer dependencies depending on which features are needed.

Core Dependencies

npm install
    prosemirror-collab@^1.1.1
    prosemirror-commands@^1.0.7
    prosemirror-history@^1.0.4
    prosemirror-inputrules@^1.0.1
    prosemirror-keymap@^1.0.1
    prosemirror-model@^1.7.0
    prosemirror-schema-basic@^1.0.0
    prosemirror-state@^1.2.2
    prosemirror-tables"@0.7.10
    prosemirror-transform@^1.1.3
    prosemirror-utils@^0.7.7
    prosemirror-view@^1.8.3

LinkModule Dependencies

LinkModule requires LinkifyIt to be installed

npm install linkify-it@^2.1.0

CodeModule Dependencies

CodeModule requires CodeMirror to be installed

npm install codemirror@^5.45.0

For CodeMirror mode support, add the following styles and assets to your project in angular.json

{
    "assets": [
        {
            "input": "node_modules/codemirror",
            "glob": "**/*.js",
            "output": "/assets"
        }
    ],
    "styles": ["node_modules/codemirror/lib/codemirror.css"]
}

CSS

TBA

Basic Usage

Import the editor module

@NgModule({
    imports: [EditorModule],
})
export class BasicEditorModule {}

Add this tag to your component template

<z-editor></z-editor>

Features can be added through additional modules

@NgModule({
    imports: [
        EditorModule,
        LinkModule,
        HeadingModule,
        BlockquoteModule,
        AlignmentModule,
        HardBreakModule,
        BlockTypeModule,
        TextFormattingModule,
        CodeModule,
        HorizontalRuleModule,
    ],
})
export class KitchenSinkEditorModule {}

Documents can be loaded by passing in a serialised ProseMirror state object

<z-editor [state]="state" (stateChange)="save($event)"></z-editor>

@Component({ ... })
export class BasicEditorComponent {
    state = {
        doc: {
            content: [],
            type: "doc"
        },
        selection: {
            type: "text",
            anchor: 1,
            head: 1
        }
    }

    save(event: Editor) {
        console.log(event)
    }
}

Changes to the document or selection can be observed through the stateChange event

Toolbar

For convenience, Zodiac editor exports toolbar components built with Angular Material and FontAwesome. Some additional dependencies and config are required.

npm install @angular/material@~7.2.2 @fortawesome/fontawesome-free@^5.8.1

Add the following project config to angular.json

{
    "styles": [
        "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", // or another theme
        "node_modules/@fortawesome/fontawesome-free/css/all.css"
    ],
    "scripts": ["node_modules/hammerjs/hammer.min.js"]
}

Now you can add the toolbar to your app

@NgModule({
    imports: [
        ...
        EditorModule,
        EditorToolbarModule,
    ]
})

<z-editor-toolbar [editor]="editor"></z-editor-toolbar>
<z-editor #editor></z-editor>

This will render an empty toolbar. Add some tools to it.

@NgModule({
    imports: [
        ...
        EditorModule,
        EditorToolbarModule,
        StrongToolModule,
        AlignmentToolModule,
        EmphasisToolModule,
        UnderlineToolModule,
        SuperscriptToolModule,
        SubscriptToolModule,
        StrikeToolModule,
        LinkToolModule,
        CodeToolModule,
        HeadingToolModule,
    ]
})

<z-editor-toolbar [editor]="editor">
    <z-heading-tool></z-heading-tool>
    <z-strong-tool></z-strong-tool>
    <z-emphasis-tool></z-emphasis-tool>
    <z-underline-tool></z-underline-tool>
    <z-alignment-tool></z-alignment-tool>
    <z-superscript-tool></z-superscript-tool>
    <z-subscript-tool></z-subscript-tool>
    <z-strike-tool></z-strike-tool>
    <z-link-tool></z-link-tool>
</z-editor-toolbar>
<z-editor #editor></z-editor>

To create your own tools, toolbars or floating panels, refer to Advanced Usage.

Advanced Usage

API

CodeModule

Ensure you've installed peer dependencies before using this module

imports: [CodeModule.configure(config)]

config: CodeModuleConfig

Option	Description
modeURL	File pattern to load mode dependencies from
extraModes	Additional metadata to append to modeInfo

Support for Angular language mode is available here. Copy this file to your assets folder (eg. assets/modes/angular/angular.js)