feat: add blockquote

demo/src/app/plugins/index.ts

@@ -57,7 +57,7 @@ const getPlugins = (): Plugin[] => {
     menu({
       toolbar: [
         ['bold', 'italic'],
-        ['code'],
+        ['code', 'blockquote'],
         ['ordered_list', 'bullet_list'],
         [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
         [codemirrorMenu]
@@ -68,7 +68,8 @@ const getPlugins = (): Plugin[] => {
         code: 'Code',
         ordered_list: 'Ordered List',
         bullet_list: 'Bullet List',
-        heading: 'Header'
+        heading: 'Header',
+        blockquote: 'Quote'
       }
     }),
     placeholder('Type Something here...')

src/lib/ngx-editor.component.scss

@@ -25,16 +25,6 @@ $menubar-text-padding: 0 $menu-item-spacing;
   border: 2px solid rgba(0, 0, 0, 0.2);
 }
 
-.NgxEditor__Content {
-  padding: 0.5rem;
-  white-space: pre-wrap;
-
-  p {
-    margin: 0;
-    margin-bottom: 0.7rem;
-  }
-}
-
 .NgxEditor__MenuBar {
   display: flex;
   padding: $menubar-padding;
@@ -164,6 +154,23 @@ $menubar-text-padding: 0 $menu-item-spacing;
   opacity: 1;
 }
 
+.NgxEditor__Content {
+  padding: 0.5rem;
+  white-space: pre-wrap;
+
+  p {
+    margin: 0;
+    margin-bottom: 0.7rem;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 3px solid #ddd;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 // prosemirror
 .ProseMirror {
   outline: none;

src/lib/prosemirror/commands/index.ts

@@ -1,2 +1,3 @@
 export * from './toggleBlockType';
 export * from './toggleList';
+export * from './toggleWrap';

src/lib/prosemirror/commands/toggleWrap.ts

@@ -0,0 +1,17 @@
+import { EditorState, Transaction } from 'prosemirror-state';
+import { NodeType } from 'prosemirror-model';
+import { wrapIn, lift } from 'prosemirror-commands';
+
+import isNodeActive from '../helpers/isNodeActive';
+
+export const toggleWrap = (type: NodeType) => {
+  return (state: EditorState, dispatch: (tr: Transaction) => void) => {
+    const isActive = isNodeActive(state, type);
+
+    if (isActive) {
+      return lift(state, dispatch);
+    }
+
+    return wrapIn(type)(state, dispatch);
+  };
+};

src/lib/prosemirror/plugins/menu/index.ts

@@ -6,7 +6,7 @@ import MenuBarView from './MenuBarView';
 
 const DEFAULT_TOOLBAR: Toolbar = [
   ['bold', 'italic'],
-  ['code'],
+  ['code', 'blockquote'],
   ['ordered_list', 'bullet_list'],
   [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }]
 ];
@@ -17,7 +17,8 @@ const DEFAULT_LABELS: MenuLabels = {
   code: 'Code',
   ordered_list: 'Ordered List',
   bullet_list: 'Bullet List',
-  heading: 'Heading'
+  heading: 'Heading',
+  blockquote: 'Quote'
 };
 
 const DEFAULT_OPTIONS: MenuOptions = {

src/lib/prosemirror/plugins/menu/menu.ts

@@ -1,7 +1,7 @@
-import { toggleMark } from 'prosemirror-commands';
+import { toggleMark, wrapIn } from 'prosemirror-commands';
 import { EditorView } from 'prosemirror-view';
 import { EditorState } from 'prosemirror-state';
-import { MarkType, NodeType, Schema } from 'prosemirror-model';
+import { MarkType, NodeType } from 'prosemirror-model';
 
 import {
   MenuItemViewSpec,
@@ -13,7 +13,7 @@ import {
 } from '../../../types';
 
 import { isNodeActive, isMarkActive, isListItem } from '../../helpers';
-import { toggleList, toggleBlockType } from '../../commands';
+import { toggleList, toggleBlockType, toggleWrap } from '../../commands';
 
 import { getIconSvg } from '../../../utils/icons';
 import flatDeep from '../../../utils/flatDeep';
@@ -265,6 +265,10 @@ class MenuItemView {
       if (type === schema.nodes.heading) {
         command = toggleBlockType(type, schema.nodes.paragraph, { level: this.menuItem.attrs.level });
       }
+
+      if (type === schema.nodes.blockquote) {
+        command = toggleWrap(type);
+      }
     }
 
     this.dom.addEventListener('mousedown', (e: MouseEvent) => {

src/lib/prosemirror/plugins/menu/meta.ts

@@ -86,6 +86,12 @@ const menuItemsMeta: { [key: string]: MenuItemMeta } = {
       level: 6,
     },
     type: 'node'
+  },
+  blockquote: {
+    key: 'blockquote',
+    i18nKey: 'blockquote',
+    icon: 'quote',
+    type: 'node'
   }
 };
 

src/lib/utils/icons/index.ts

@@ -5,6 +5,7 @@ import italic from './italic';
 import code from './code';
 import orderedList from './ordered_list';
 import bulletList from './bullet_list';
+import quote from './quote';
 
 const DEFAULT_ICON_HEIGHT = 20;
 const DEFAULT_ICON_WIDTH = 20;
@@ -14,7 +15,8 @@ const icons = {
   italic,
   code,
   ordered_list: orderedList,
-  bullet_list: bulletList
+  bullet_list: bulletList,
+  quote
 };
 
 // Helper function to create menu icons

src/lib/utils/icons/quote.ts

@@ -0,0 +1,3 @@
+export default `
+<path d="M0 0h24v24H0z" fill="none"/><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
+`;