Skip to content

Commit

Permalink
docs: update configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
sibiraj-s committed Jan 18, 2021
1 parent fe5303a commit fbcbf0f
Show file tree
Hide file tree
Showing 11 changed files with 135 additions and 241 deletions.
8 changes: 6 additions & 2 deletions docs/_sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,12 @@
- [Schema](schema.md)
- [Commands](commands.md)
- [Convert JSON doc to HTML](doc-html-doc.md)
- [Migration v5 - v6](migration-5-6.md)
- [Migration v4 or from other editors to v5/v6 ](migration.md)

- Migration

- [v6 to v7](migration-6-7.md)
- [v5 to v6](migration-5-6.md)
- [v4 or from other editors to v5/v6 ](migration.md)

- Examples

Expand Down
9 changes: 9 additions & 0 deletions docs/collab.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
redo,
} from 'y-prosemirror';
import { Editor } from 'ngx-editor';
import { history } from 'ngx-editor/history';
import { keymap } from 'ngx-editor/keymap';

const ydoc = new Y.Doc();
const provider = new WebsocketProvider(
Expand All @@ -27,10 +29,17 @@ const provider = new WebsocketProvider(
const type = ydoc.getXmlFragment('prosemirror');

new Editor({
history: false, // include the history plugin manually
plugins: [
history(),
ySyncPlugin(type),
yCursorPlugin(provider.awareness),
yUndoPlugin(),
keymap({
'Mod-z': undo,
'Mod-y': redo,
'Mod-Shift-z': redo,
}),
],
});
```
Expand Down
6 changes: 6 additions & 0 deletions docs/commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,9 @@ this.editor.commands
You must invoke `exec` method at the end to apply the changes to the editor.

**Note:** `exec` method is not chainable.

Some commands are exported. Can be accessed via

```ts
import { toggleMark } from 'ngx-editor/commands';
```
3 changes: 3 additions & 0 deletions docs/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ editor = new Editor({
nodeViews: {},
placeholder: 'Type here',
enabled: true,
history: true,
keyboardShortcuts: true,
inputRules: true,
});
```

Expand Down
8 changes: 7 additions & 1 deletion docs/editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@ const editor = new Editor({
content: '',
placeholder: 'Type here',
enabled: true,
history: true,
keyboardShortcuts: true,
inputRules: true,
plugins: [], //https://prosemirror.net/docs/guide/#state
schema, //https://prosemirror.net/examples/schema/
nodeViews: {}, //https://prosemirror.net/docs/guide/#state
nodeViews: {}, //https://prosemirror.net/docs/guide/#state,
});
```

Expand All @@ -25,6 +28,9 @@ Some options may be overwritten by the component props
- **plugins** - (`Optional`) - prosemirror plugins
- **schema** - (`Optional`) - prosemirror plugins
- **nodeViews** - (`Optional`) - prosemirror nodeViews
- **history** - (`Optional`) - enables history support in editor
- **keyboardShortcuts** - (`Optional`) - enables keyboard shortcuts for the inbuilt schema
- **inputRules** - (`Optional`) - enables inputrules for the inbuilt schema

## Editor Instance

Expand Down
99 changes: 8 additions & 91 deletions docs/full-featured-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,74 +7,17 @@ Use the following config to created a full featured editor
### plugin.ts

```ts
import { undo, redo, history } from 'prosemirror-history';
import {
splitListItem,
liftListItem,
sinkListItem,
} from 'prosemirror-schema-list';
import { keymap } from 'prosemirror-keymap';
import { toggleMark, baseKeymap } from 'prosemirror-commands';
import { Plugin } from 'prosemirror-state';

import { image } from 'ngx-editor/plugins';

import { buildInputRules } from './input-rules';
import schema from '../schema';

const isMacOs = /Mac/.test(navigator.platform);

export type KeyMap = Record<string, any>;

const getHistoryKeyMap = (): KeyMap => {
const historyMap: Record<string, any> = {};

historyMap['Mod-z'] = undo;

if (isMacOs) {
historyMap['Shift-Mod-z'] = redo;
} else {
historyMap['Mod-y'] = redo;
}

return historyMap;
};

const getListKeyMap = (): Record<string, any> => {
const listMap: Record<string, any> = {};

listMap.Enter = splitListItem(schema.nodes.list_item);
listMap['Mod-['] = liftListItem(schema.nodes.list_item);
listMap['Mod-]'] = sinkListItem(schema.nodes.list_item);
listMap.Tab = sinkListItem(schema.nodes.list_item);

return listMap;
};

const getPlugins = (): Plugin[] => {
const historyKeyMap = getHistoryKeyMap();
const listKeyMap = getListKeyMap();

const plugins = [
history(),
keymap({
'Mod-b': toggleMark(schema.marks.strong),
'Mod-i': toggleMark(schema.marks.em),
'Mod-`': toggleMark(schema.marks.code),
}),
keymap(historyKeyMap),
keymap(listKeyMap),
keymap(baseKeymap),
buildInputRules(schema),
image({
resize: true,
}),
];

return plugins;
};
const plugins: Plugin[] = [
image({
// enables image resizing
resize: true,
}),
];

export default getPlugins();
export default plugins;
```

### app.module.ts
Expand Down Expand Up @@ -135,12 +78,9 @@ export class AppModule {}
```ts
import { Component, OnInit, OnDestory, ViewEncapsulation } from '@angular/core';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';

import { Validators, Editor, Toolbar } from 'ngx-editor';

import schema from './schema';
import plugins from './plugins';
import nodeViews from './nodeviews';

@Component({
selector: 'app-root',
Expand All @@ -167,9 +107,7 @@ export class AppComponent implements OnInit, OnDestory {

ngOnInit(): void {
this.editor = new Editor({
schema,
plugins,
nodeViews,
});
}

Expand All @@ -183,30 +121,9 @@ export class AppComponent implements OnInit, OnDestory {

```html
<form [formGroup]="form">
<div class="editor">
<div class="NgxEditor__Wrapper">
<ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
<ngx-editor [editor]="editor" formControlName="editorContent"> </ngx-editor>
</div>
</form>
```

#### app.component.scss

```scss
.editor {
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;

.NgxEditor__MenuBar {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.NgxEditor {
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
}
}
```
25 changes: 9 additions & 16 deletions docs/history.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
# Enable history support in the editor

Reference

- https://prosemirror.net/docs/ref/#history
- https://prosemirror.net/docs/ref/#keymap
# Enable/Disable editor history support

```ts
import { undo, redo, history } from 'prosemirror-history';
import { keymap } from 'prosemirror-keymap';
import { Editor } from 'ngx-editor';

new Editor({
plugins: [
history(), // enable history support
keymap({
// configure shortcuts
'Mod-z': undo,
'Shift-Mod-z': redo,
}),
],
history: true,
});
```

_**Note**: You may need to disable history if you are using collaborative editing_

Related links

- https://prosemirror.net/docs/ref/#history
- https://prosemirror.net/docs/ref/#keymap
94 changes: 8 additions & 86 deletions docs/input-rules.md
Original file line number Diff line number Diff line change
@@ -1,96 +1,18 @@
# Input rules

This module defines a plugin for attaching input rules to an editor, which can react to or transform text typed by the user.

Doc: https://prosemirror.net/docs/ref/#inputrules

Source: https://github.com/ProseMirror/prosemirror-example-setup/

### Rules

````ts
import {
inputRules,
wrappingInputRule,
textblockTypeInputRule,
smartQuotes,
emDash,
ellipsis,
InputRule,
} from 'prosemirror-inputrules';
import { NodeType, Schema } from 'prosemirror-model';

// : (NodeType) → InputRule
// Given a blockquote node type, returns an input rule that turns `"> "`
// at the start of a textblock into a blockquote.
export function blockQuoteRule(nodeType: NodeType): InputRule {
return wrappingInputRule(/^\s*>\s$/, nodeType);
}

// : (NodeType) → InputRule
// Given a list node type, returns an input rule that turns a number
// followed by a dot at the start of a textblock into an ordered list.
export function orderedListRule(nodeType: NodeType): InputRule {
return wrappingInputRule(
/^(\d+)\.\s$/,
nodeType,
(match) => ({ order: +match[1] }),
(match, node) => node.childCount + node.attrs.order === +match[1]
);
}

// : (NodeType) → InputRule
// Given a list node type, returns an input rule that turns a bullet
// (dash, plush, or asterisk) at the start of a textblock into a
// bullet list.
export function bulletListRule(nodeType: NodeType): InputRule {
return wrappingInputRule(/^\s*([-+*])\s$/, nodeType);
}

// : (NodeType) → InputRule
// Given a code block node type, returns an input rule that turns a
// textblock starting with three backticks into a code block.
export function codeBlockRule(nodeType: NodeType): InputRule {
return textblockTypeInputRule(/^```$/, nodeType);
}

// : (NodeType, number) → InputRule
// Given a node type and a maximum level, creates an input rule that
// turns up to that number of `#` characters followed by a space at
// the start of a textblock into a heading whose level corresponds to
// the number of `#` signs.
export function headingRule(nodeType: NodeType, maxLevel: number): InputRule {
return textblockTypeInputRule(
new RegExp('^(#{1,' + maxLevel + '})\\s$'),
nodeType,
(match) => ({
level: match[1].length,
})
);
}

// : (Schema) → Plugin
// A set of input rules for creating the basic block quotes, lists,
// code blocks, and heading.
export function buildInputRules(schema: Schema) {
const rules = smartQuotes.concat(ellipsis, emDash);

rules.push(blockQuoteRule(schema.nodes.blockquote));
rules.push(orderedListRule(schema.nodes.ordered_list));
rules.push(bulletListRule(schema.nodes.bullet_list));
rules.push(codeBlockRule(schema.nodes.code_block));
rules.push(headingRule(schema.nodes.heading, 6));

return inputRules({ rules });
}
````
Some default input rules based on schema is enabled by defualt

### Config

```ts
import { Editor, schema } from 'ngx-editor';
import { Editor } from 'ngx-editor';

new Editor({
plugins: [buildInputRules(schema)],
inputRules: true,
});
```

Related Links:

- https://prosemirror.net/docs/ref/#inputrules
- https://github.com/ProseMirror/prosemirror-example-setup/
Loading

0 comments on commit fbcbf0f

Please sign in to comment.