Default toolbar icons

[KingDarBoja]

Describe the bug This is my first time trying out the library by using Teradata Covalent Text Editor component and so far everything is working fine on a basic setup using Angular 9.

However, there is a possible issue with the library itself, as I had to dig into the options in order to provide the toolbar icons as those doesn't show up if setting toolbar: true. Instead, I had to pass each icon name as array of strings instead of default ones.

The documentation stated:

Below are the built-in toolbar icons (only some of which are enabled by default)

Maybe a bug?

To Reproduce

1. Create Angular 9 App
2. Install the nightly build of @covalent/text-editor.
3. Pass EasyMDE options as below.

import { Component } from '@angular/core';

import { Options } from 'easymde';
import hljs from './highlight.config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'covalent-editor-fu';

  sampleText = 'Hello World!';

  covalentEditorOpts: Options = {
    lineWrapping: true,
    toolbar: true,
    renderingConfig: {
      codeSyntaxHighlighting: true,
      hljs
    }
  };
}

4. Run npm start and navigate to http://localhost:4200/
5. Check the toolbar, it has no icons!

Expected behavior Toolbar icons should be displayed

Screenshots With toolbar: true

With toolbar: ['bold','italic','heading','|', ...]

Version information Version: 1.43.0 (user setup) Commit: 78a4c91400152c0f27ba4d363eb56d2835f9903a Date: 2020-03-09T19:47:57.235Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.18363 EasyMDE: 2.9.0

Additional context

My package.json file:

{
  "name": "covalent-editor-fu",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.5",
    "@angular/common": "~9.0.5",
    "@angular/compiler": "~9.0.5",
    "@angular/core": "~9.0.5",
    "@angular/forms": "~9.0.5",
    "@angular/localize": "^9.0.5",
    "@angular/platform-browser": "~9.0.5",
    "@angular/platform-browser-dynamic": "~9.0.5",
    "@angular/router": "~9.0.5",
    "@covalent/text-editor": "git+https://github.com/Teradata/covalent-text-editor-nightly.git",
    "@fortawesome/angular-fontawesome": "^0.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@highlightjs/highlight.js": "^10.0.0-beta.0",
    "@ng-bootstrap/ng-bootstrap": "^6.0.0",
    "bootstrap": "^4.4.1",
    "easymde": "^2.9.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.5",
    "@angular/cli": "~9.0.5",
    "@angular/compiler-cli": "~9.0.5",
    "@angular/language-service": "~9.0.5",
    "@types/codemirror": "0.0.87",
    "@types/highlightjs": "^9.12.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/marked": "^0.7.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.7.5"
  }
}

[Ionaru]

The toolbar option does not allow the value true, remove the option from your config to get the expected behaviour.

[mxgl]

I wonder if Covalent uses an underlying EasyMDE instance and is disabling the toolbar. If that's the case, there's no easy way to just use the default without recreating it.

It may be helpful to have a toolbarDefaults, this would also help with expanding the toolbar.

If you want to add one icon to the toolbar, you currently need to recreate the whole thing.

[KingDarBoja]

@Ionaru Not sure if this is caused by Covalent component but the removal of the toolbar option disables the toolbar (It doesn't show up). I have opened a similar issue on Covalent repo in case it is caused by some underlying EasyMDE instance as stated by mxgl.

Cheers!

[KingDarBoja]

I was able to get the default behaviour by removing the option as stated by Ionaru. Looks like the Covalent readme needs some updating.

Thanks for the help!