feat: include placeholder plugin by default

README.md

@@ -86,13 +86,11 @@ const jsonDoc = toDoc(html);
 
 ```ts
 import { schema } from 'ngx-editor';
-import { placeholder } from 'ngx-editor/plugins';
 
 NgxEditorModule.forRoot({
   schema, // optional scheama, see https://sibiraj-s.github.io/ngx-editor/#/schema
   plugins: [
     // include other prosemirror plugins
-    placholder('Type something here...'), // default
   ],
   menu: [
     // default options (Optional)

demo/src/app/plugins/index.ts

@@ -4,7 +4,7 @@ import { keymap } from 'prosemirror-keymap';
 import { toggleMark, baseKeymap } from 'prosemirror-commands';
 import { Plugin } from 'prosemirror-state';
 
-import { placeholder, image } from 'ngx-editor/plugins';
+import { image } from 'ngx-editor/plugins';
 
 import { buildInputRules } from './input-rules';
 import schema from '../schema';
@@ -51,7 +51,6 @@ const getPlugins = (): Plugin[] => {
     keymap(listKeyMap),
     keymap(baseKeymap),
     buildInputRules(schema),
-    placeholder('Type Something here...'),
     image({
       resize: true,
     })

docs/README.md

@@ -85,11 +85,12 @@ const jsonDoc = toDoc(html);
 
 ```ts
 import { schema } from 'ngx-editor';
-import { placeholder } from 'ngx-editor/plugins';
 
 NgxEditorModule.forRoot({
   schema, // optional scheama, see https://sibiraj-s.github.io/ngx-editor/#/schema
-  plugins: [placholder('Type something here...')],
+  plugins: [
+    // include prosemirror plugins
+  ],
   menu: [
     ['bold', 'italic'],
     ['underline', 'strike'],

docs/configuration.md

@@ -2,7 +2,6 @@
 
 ```ts
 import { schema } from 'ngx-editor';
-import { placeholder } from 'ngx-editor/plugins';
 
 NgxEditorModule.forRoot({
   schema, // optional scheama, see https://sibiraj-s.github.io/ngx-editor/#/schema
@@ -58,4 +57,5 @@ NgxEditorModule.forRoot({
 
 ## Component Props
 
-- placeholder [`string`] - (Optional) - A placeholder for the editor. If you are using custom set of plugins, you must also include `placeholder` plugin from `ngx-editor/plugins` plugins for this to work
+- placeholder [`string`] - (Optional) - A placeholder for the editor
+- editable [`boolean`] - (Optional) - 

docs/full-featured-editor.md

@@ -15,7 +15,7 @@ import { keymap } from 'prosemirror-keymap';
 import { toggleMark, baseKeymap } from 'prosemirror-commands';
 import { Plugin } from 'prosemirror-state';
 
-import { placeholder, image } from 'ngx-editor/plugins';
+import { image } from 'ngx-editor/plugins';
 
 import { buildInputRules } from './input-rules';
 import schema from '../schema';
@@ -64,7 +64,6 @@ const getPlugins = (): Plugin[] => {
     keymap(listKeyMap),
     keymap(baseKeymap),
     buildInputRules(schema),
-    placeholder('Type Something here...'),
     image({
       resize: true,
     }),

docs/plugins.md

@@ -2,11 +2,9 @@
 
 List of available plugins
 
-- placeholder
-  - enables placeholder support inside the editor. This has to be provided for the placeholder in component to work
 - image
   - allows images to be resized.
 
 ```js
-import { placeholder, image } from 'ngx-editor/plugins';
+import { image } from 'ngx-editor/plugins';
 ```

src/lib/editor.component.ts

@@ -13,7 +13,7 @@ import { Node as ProsemirrorNode } from 'prosemirror-model';
 import { NgxEditorService, NgxEditorServiceConfig } from './editor.service';
 import { SharedService } from './services/shared/shared.service';
 import { Toolbar } from './types';
-import { editable } from 'ngx-editor/plugins';
+import { editable as editablePlugin, placeholder as placeholderPlugin } from 'ngx-editor/plugins';
 
 @Component({
   selector: 'ngx-editor',
@@ -37,7 +37,7 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
   private config: NgxEditorServiceConfig;
 
   @Input() customMenuRef: TemplateRef<any>;
-  @Input() placeholder: string;
+  @Input() placeholder = 'Type here...';
   @Input() editable = true;
   @Output() init = new EventEmitter<EditorView>();
   @Output() focusOut = new EventEmitter<void>();
@@ -126,7 +126,7 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
 
   private filterBuiltIns(plugin: Plugin): boolean {
     const pluginKey: string = (plugin as any).key;
-    if (/^editable\$/.test(pluginKey)) {
+    if (/^(editable|placeholder)\$/.test(pluginKey)) {
       return false;
     }
 
@@ -143,7 +143,8 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestr
         plugins: [
           ...plugins.filter((plugin) => this.filterBuiltIns(plugin)),
           this.createUpdateWatcherPlugin(),
-          editable(this.editable)
+          placeholderPlugin(this.placeholder),
+          editablePlugin(this.editable)
         ]
       }),
       nodeViews,

src/lib/editor.service.ts

@@ -2,8 +2,6 @@ import { Injectable, Optional } from '@angular/core';
 import { Schema } from 'prosemirror-model';
 import { Plugin } from 'prosemirror-state';
 
-import { placeholder } from 'ngx-editor/plugins';
-
 import { Menu, NgxEditorConfig, NodeViews, Toolbar } from './types';
 import Locals from './Locals';
 
@@ -46,7 +44,6 @@ const DEFAULT_MENU: Menu = {
 
 const DEFAULT_SCHEMA = schema;
 const DEFAULT_PLUGINS: Plugin[] = [
-  placeholder()
 ];
 
 @Injectable({

src/plugins/placeholder.ts

@@ -22,6 +22,10 @@ const placeholderPlugin = (text: string = DEFAULT_PLACEHOLDER): Plugin => {
 
         const placeholder = this.getState(state);
 
+        if (!placeholder) {
+          return DecorationSet.empty;
+        }
+
         if (doc.childCount === 1 && doc?.firstChild?.isTextblock && doc.firstChild.content.size === 0) {
           const placeHolderEl = document.createElement('span');
           placeHolderEl.classList.add(PLACEHOLDER_CLASSNAME);