Skip to content

Commit ab97d10

Browse files
fredeveryfredevery
committed
#24 - Full integration of new Config module + new Commands module
1 parent fa15931 commit ab97d10

File tree

13 files changed

+169
-58
lines changed

13 files changed

+169
-58
lines changed

‎src/scripts/containers/AppContainer.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,6 @@ const AppContainer = Container({
7979
* @protected
8080
*/
8181
setup: function () {
82-
const { mediator } = this;
83-
formatterContainer = formatterContainer || new FormatterContainer({ mediator });
84-
uiContainer = uiContainer || new UIContainer({ mediator });
85-
canvasContainer = canvasContainer || new CanvasContainer({ mediator });
8682
},
8783

8884
/**
@@ -92,6 +88,10 @@ const AppContainer = Container({
9288
*/
9389
init () {
9490
// Current nothing to init for this container. Method left here for ref.
91+
const { mediator } = this;
92+
formatterContainer = formatterContainer || new FormatterContainer({ mediator });
93+
uiContainer = uiContainer || new UIContainer({ mediator });
94+
canvasContainer = canvasContainer || new CanvasContainer({ mediator });
9595
},
9696

9797
/**

‎src/scripts/containers/FormatterContainer.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import BlockFormatter from '../modules/BlockFormatter';
2424
import TextFormatter from '../modules/TextFormatter';
2525
import ListFormatter from '../modules/ListFormatter';
2626
import LinkFormatter from '../modules/LinkFormatter';
27+
import Commands from '../modules/Commands';
2728
import Paste from '../modules/Paste';
2829

2930
/**
@@ -42,6 +43,9 @@ const FormatterContainer = Container({
4243
* @enum {Array<{class:Module}>} modules
4344
*/
4445
modules: [
46+
{
47+
class: Commands
48+
},
4549
{
4650
class: BaseFormatter
4751
},

‎src/scripts/modules/BaseFormatter.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,10 @@
2323
* mediator.exec('format:clean', elem); // Clean the HTML inside elem
2424
*/
2525
import Module from '../core/Module';
26-
import commands from '../utils/commands';
2726
import DOM from '../utils/DOM';
2827
import zeroWidthSpace from '../utils/zeroWidthSpace';
2928

30-
import toolbarConfig from '../config/toolbar';
31-
32-
let validTags = toolbarConfig.getValidTags();
33-
let blockTags = toolbarConfig.getBlockTags();
34-
let listTags = toolbarConfig.getListTags();
29+
let validTags, blockTags, listTags;
3530

3631
const BaseFormatter = Module({
3732
name: 'BaseFormatter',
@@ -49,7 +44,12 @@ const BaseFormatter = Module({
4944
}
5045
},
5146
methods: {
52-
init () {},
47+
init () {
48+
const { mediator } = this;
49+
validTags = mediator.get('config:toolbar:validTags');
50+
blockTags = mediator.get('config:toolbar:blockTags');
51+
listTags = mediator.get('config:toolbar:listTags');
52+
},
5353

5454
/**
5555
* @func exportToCanvas
@@ -106,7 +106,7 @@ const BaseFormatter = Module({
106106
formatDefault () {
107107
const { mediator } = this;
108108
const rootElem = mediator.get('selection:rootelement');
109-
commands.defaultBlockFormat();
109+
mediator.exec('commands:format:default');
110110
this.removeStyledSpans(rootElem);
111111
},
112112

@@ -154,18 +154,21 @@ const BaseFormatter = Module({
154154
formatEmptyNewLine () {
155155
const { mediator } = this;
156156
const anchorNode = mediator.get('selection:anchornode');
157-
const canDefaultNewline = !(anchorNode.innerText && anchorNode.innerText.trim().length) && !DOM.isIn(anchorNode, toolbarConfig.preventNewlineDefault);
157+
const preventNewlineDefault = mediator.get('config:toolbar:preventNewlineDefault');
158+
const canDefaultNewline = !(anchorNode.innerText && anchorNode.innerText.trim().length) && !DOM.isIn(anchorNode, preventNewlineDefault);
158159
const anchorIsContentEditable = anchorNode.hasAttribute && anchorNode.hasAttribute('contenteditable');
159160

160161
if (canDefaultNewline || anchorIsContentEditable) {
161162
this.formatDefault();
162163
}
163164
},
164165

165-
formateBlockquoteNewLine () {
166+
formatBlockquoteNewLine () {
166167
const { mediator } = this;
167168

168-
commands.exec('outdent');
169+
mediator.exec('commands:exec', {
170+
command: 'outdent'
171+
});
169172
this.formatDefault();
170173

171174
const currentRangeClone = mediator.get('selection:range').cloneRange();
@@ -196,7 +199,7 @@ const BaseFormatter = Module({
196199
const isContentEditable = startContainer.nodeType === Node.ELEMENT_NODE && startContainer.hasAttribute('contenteditable');
197200

198201
if (containerIsBlockquote) {
199-
this.formateBlockquoteNewLine();
202+
this.formatBlockquoteNewLine();
200203
} else if (containerIsEmpty || isContentEditable) {
201204
this.formatEmptyNewLine();
202205
}

‎src/scripts/modules/BlockFormatter.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
*/
2626

2727
import Module from '../core/Module';
28-
import commands from '../utils/commands';
2928
import DOM from '../utils/DOM';
3029

3130
/**
@@ -62,11 +61,19 @@ const BlockFormatter = Module({
6261

6362
if (opts.toggle) {
6463
if (opts.style === 'BLOCKQUOTE') {
65-
commands.exec('outdent', null, canvasDoc);
64+
mediator.exec('commands:exec', {
65+
command: 'outdent',
66+
contextDocument: canvasDoc
67+
});
6668
}
67-
commands.defaultBlockFormat(canvasDoc);
69+
mediator.exec('commands:format:default', {
70+
contextDocument: canvasDoc
71+
});
6872
} else {
69-
commands.formatBlock(opts.style, canvasDoc);
73+
mediator.exec('commands:format:block', {
74+
style: opts.style,
75+
contextDocument: canvasDoc
76+
});
7077
}
7178
},
7279

‎src/scripts/modules/Commands.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Module from '../core/Module';
2+
import browser from '../utils/browser';
3+
4+
const Commands = Module({
5+
name: 'Commands',
6+
props: {},
7+
8+
handlers: {
9+
commands: {
10+
'commands:exec' : 'exec',
11+
'commands:format:default' : 'defaultBlockFormat',
12+
'commands:format:block' : 'formatBlock'
13+
}
14+
},
15+
16+
methods: {
17+
setup () {},
18+
init () {},
19+
20+
exec ({command, value = null, contextDocument = document}) {
21+
if (command === 'formatBlock') {
22+
value = this.prepBlockValue(value);
23+
}
24+
contextDocument.execCommand(command, false, value);
25+
},
26+
27+
formatBlock ({ style, contextDocument=document }) {
28+
this.exec({
29+
command: 'formatBlock',
30+
value: style,
31+
contextDocument
32+
});
33+
},
34+
35+
defaultBlockFormat ({ contextDocument=document }) {
36+
const { mediator } = this;
37+
const defaultBlock = mediator.get('config:defaultBlock');
38+
this.formatBlock({
39+
style: defaultBlock,
40+
contextDocument
41+
});
42+
},
43+
44+
prepBlockValue (value) {
45+
const ieVersion = browser.ieVersion();
46+
value = value.toUpperCase();
47+
return ieVersion && ieVersion < 12 ? `<${value}>` : value;
48+
}
49+
}
50+
});
51+
52+
export default Commands;

‎src/scripts/modules/Config.js‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import Module from '../core/Module';
22
import toolbarConfig from '../config/toolbar';
3+
import config from '../config/config';
34

45
const Config = Module({
56
name: 'Config',
67
props: {},
78
acceptsConfigs: ['toolbar'],
89

9-
1010
handlers: {
1111
requests: {
1212
'config:toolbar:buttons' : 'getToolbarButtons',
13-
'config:toolbar:buttonConfig' : 'getToolbarButtonConfig'
13+
'config:toolbar:buttonConfig' : 'getToolbarButtonConfig',
14+
'config:toolbar:validTags' : 'getToolbarValidTags',
15+
'config:toolbar:blockTags' : 'getToolbarBlockTags',
16+
'config:toolbar:listTags' : 'getToolbarListTags',
17+
'config:toolbar:preventNewlineDefault' : 'getToolbarPreventNewlineDefault',
18+
'config:blockElementNames' : 'getConfigBlockElementNames',
19+
'config:defaultBlock' : 'getDefaultBlock'
1420
}
1521
},
1622

@@ -40,6 +46,30 @@ const Config = Module({
4046

4147
getToolbarButtonConfig (buttonConfigKey) {
4248
return toolbarConfig.buttonConfigs[buttonConfigKey];
49+
},
50+
51+
getToolbarValidTags () {
52+
return toolbarConfig.getValidTags();
53+
},
54+
55+
getToolbarBlockTags () {
56+
return toolbarConfig.getBlockTags();
57+
},
58+
59+
getToolbarListTags () {
60+
return toolbarConfig.getListTags();
61+
},
62+
63+
getToolbarPreventNewlineDefault () {
64+
return toolbarConfig.preventNewlineDefault;
65+
},
66+
67+
getConfigBlockElementNames () {
68+
return config.blockElementNames;
69+
},
70+
71+
getDefaultBlock () {
72+
return config.defaultBlock;
4373
}
4474
}
4575
});

‎src/scripts/modules/LinkFormatter.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
*/
1414

1515
import Module from '../core/Module';
16-
import commands from '../utils/commands';
1716
import DOM from '../utils/DOM';
1817

1918
import inputFormTemplate from '../../templates/inputForm.html';
@@ -357,8 +356,13 @@ const LinkFormatter = Module({
357356
if (formJSON['user-input']) {
358357
const linkURL = this.processLinkInput(formJSON['user-input']);
359358
mediator.exec('selection:select:pseudo');
360-
commands.exec('unlink');
361-
commands.exec('createLink', linkURL);
359+
mediator.exec('commands:exec', {
360+
command: 'unlink'
361+
});
362+
mediator.exec('commands:exec', {
363+
command: 'createLink',
364+
value: linkURL
365+
});
362366
}
363367

364368
this.destroy();
@@ -375,7 +379,9 @@ const LinkFormatter = Module({
375379
mediator.exec('selection:wrap:element', anchor);
376380
}
377381

378-
commands.exec('unlink');
382+
mediator.exec('commands:exec', {
383+
command: 'unlink'
384+
});
379385
this.destroy();
380386
},
381387

‎src/scripts/modules/ListFormatter.js‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
* mediator.exec('format:list:cleanup', domElement); // Find all lists and clean them up
1414
*/
1515
import Module from '../core/Module';
16-
import commands from '../utils/commands';
1716
import DOM from '../utils/DOM';
1817

1918
const ListFormatter = Module({
@@ -53,38 +52,41 @@ const ListFormatter = Module({
5352
switch (opts.style) {
5453
case 'ordered':
5554
toggle = mediator.get('selection:in:or:contains', ['OL']);
56-
if (toggle) {
57-
// this.prepListItemsForToggle();
58-
// while (mediator.get('canvas:selection:in:or:contains', ['OL'])) {
59-
// commands.exec('outdent', null, canvasDoc);
60-
// }
61-
// commands.exec('insertOrderedList', null, canvasDoc);
62-
// return;
63-
} else if (mediator.get('selection:in:or:contains', ['UL'])) {
64-
commands.exec('insertUnorderedList', null, canvasDoc);
55+
if (mediator.get('selection:in:or:contains', ['UL'])) {
56+
mediator.exec('commands:exec', {
57+
command: 'insertUnorderedList',
58+
contextDocument: canvasDoc
59+
});
6560
}
66-
commands.exec('insertOrderedList', null, canvasDoc);
61+
mediator.exec('commands:exec', {
62+
command: 'insertOrderedList',
63+
contextDocument: canvasDoc
64+
});
6765
break;
6866
case 'unordered':
6967
toggle = mediator.get('selection:in:or:contains', ['UL']);
70-
if (toggle) {
71-
// this.prepListItemsForToggle();
72-
// while (mediator.get('canvas:selection:in:or:contains', ['UL'])) {
73-
// commands.exec('outdent', null, canvasDoc);
74-
// }
75-
// commands.exec('insertUnorderedList', null, canvasDoc);
76-
// return;
77-
}
7868
if (mediator.get('selection:in:or:contains', ['OL'])) {
79-
commands.exec('insertOrderedList', null, canvasDoc);
69+
mediator.exec('commands:exec', {
70+
command: 'insertOrderedList',
71+
contextDocument: canvasDoc
72+
});
8073
}
81-
commands.exec('insertUnorderedList', null, canvasDoc);
74+
mediator.exec('commands:exec', {
75+
command: 'insertUnorderedList',
76+
contextDocument: canvasDoc
77+
});
8278
break;
8379
case 'outdent':
84-
commands.exec('outdent', null, canvasDoc);
80+
mediator.exec('commands:exec', {
81+
command: 'outdent',
82+
contextDocument: canvasDoc
83+
});
8584
break;
8685
case 'indent':
87-
commands.exec('indent', null, canvasDoc);
86+
mediator.exec('commands:exec', {
87+
command: 'indent',
88+
contextDocument: canvasDoc
89+
});
8890
break;
8991
}
9092

0 commit comments

Comments
 (0)