@pie-lib/editable-html-tip-tap 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/lib/components/CharacterPicker.js +221 -0
  2. package/lib/components/EditableHtml.js +323 -0
  3. package/lib/components/MenuBar.js +693 -0
  4. package/lib/components/TiptapContainer.js +90 -0
  5. package/lib/components/buttons/done-button.js +53 -0
  6. package/lib/components/characters/characterUtils.js +112 -0
  7. package/lib/components/characters/custom-popper.js +73 -0
  8. package/lib/components/common/done-button.js +53 -0
  9. package/lib/components/icons/CssIcon.js +37 -0
  10. package/lib/components/icons/RespArea.js +95 -0
  11. package/lib/components/icons/TableIcons.js +69 -0
  12. package/lib/components/icons/TextAlign.js +194 -0
  13. package/lib/components/icons/index.js +194 -0
  14. package/lib/components/image/ImageToolbar.js +16 -0
  15. package/lib/components/image/InsertImageHandler.js +16 -0
  16. package/lib/components/media/MediaDialog.js +16 -0
  17. package/lib/components/media/MediaToolbar.js +16 -0
  18. package/lib/components/respArea/DragInTheBlank/DragInTheBlank.js +94 -0
  19. package/lib/components/respArea/DragInTheBlank/choice.js +289 -0
  20. package/lib/components/respArea/DragInTheBlank.js +94 -0
  21. package/lib/components/respArea/ExplicitConstructedResponse.js +120 -0
  22. package/lib/components/respArea/InlineDropdown.js +126 -0
  23. package/lib/components/respArea/ToolbarIcon.js +105 -0
  24. package/lib/components/respArea/choice.js +2 -0
  25. package/lib/extensions/component.js +5 -5
  26. package/lib/extensions/custom-toolbar-wrapper.js +2 -4
  27. package/lib/extensions/extended-table.js +30 -0
  28. package/lib/extensions/index.js +52 -0
  29. package/lib/extensions/media.js +5 -5
  30. package/lib/extensions/responseArea.js +7 -7
  31. package/lib/index.js +16 -1481
  32. package/lib/plugins/index.js +8 -80
  33. package/lib/styles/editorContainerStyles.js +200 -0
  34. package/lib/utils/size.js +34 -0
  35. package/package.json +1 -1
  36. package/src/components/CharacterPicker.jsx +185 -0
  37. package/src/components/EditableHtml.jsx +306 -0
  38. package/src/components/MenuBar.jsx +630 -0
  39. package/src/components/TiptapContainer.jsx +96 -0
  40. package/src/components/characters/characterUtils.js +127 -0
  41. package/src/components/image/ImageToolbar.jsx +1 -0
  42. package/src/components/image/InsertImageHandler.js +1 -0
  43. package/src/components/media/MediaDialog.js +1 -0
  44. package/src/components/media/MediaToolbar.jsx +1 -0
  45. package/src/{plugins/respArea/drag-in-the-blank → components/respArea/DragInTheBlank}/choice.jsx +1 -1
  46. package/src/{plugins/respArea/inline-dropdown/index.jsx → components/respArea/InlineDropdown.jsx} +1 -1
  47. package/src/components/respArea/ToolbarIcon.jsx +68 -0
  48. package/src/extensions/component.jsx +2 -2
  49. package/src/extensions/custom-toolbar-wrapper.jsx +6 -7
  50. package/src/extensions/extended-table.js +27 -0
  51. package/src/extensions/index.js +76 -0
  52. package/src/extensions/media.js +10 -4
  53. package/src/extensions/responseArea.js +7 -7
  54. package/src/index.jsx +3 -1440
  55. package/src/styles/editorContainerStyles.js +203 -0
  56. package/src/utils/size.js +32 -0
  57. package/src/__tests__/editor.test.jsx +0 -363
  58. package/src/__tests__/serialization.test.js +0 -291
  59. package/src/block-tags.js +0 -17
  60. package/src/editor.jsx +0 -1197
  61. package/src/extensions/characters.js +0 -46
  62. package/src/old-index.jsx +0 -162
  63. package/src/parse-html.js +0 -8
  64. package/src/plugins/README.md +0 -27
  65. package/src/plugins/characters/index.jsx +0 -284
  66. package/src/plugins/characters/utils.js +0 -447
  67. package/src/plugins/css/index.jsx +0 -340
  68. package/src/plugins/customPlugin/index.jsx +0 -85
  69. package/src/plugins/html/icons/index.jsx +0 -19
  70. package/src/plugins/html/index.jsx +0 -72
  71. package/src/plugins/image/__tests__/__snapshots__/component.test.jsx.snap +0 -51
  72. package/src/plugins/image/__tests__/__snapshots__/image-toolbar-logic.test.jsx.snap +0 -27
  73. package/src/plugins/image/__tests__/__snapshots__/image-toolbar.test.jsx.snap +0 -44
  74. package/src/plugins/image/__tests__/component.test.jsx +0 -41
  75. package/src/plugins/image/__tests__/image-toolbar-logic.test.jsx +0 -42
  76. package/src/plugins/image/__tests__/image-toolbar.test.jsx +0 -11
  77. package/src/plugins/image/__tests__/index.test.js +0 -95
  78. package/src/plugins/image/__tests__/insert-image-handler.test.js +0 -113
  79. package/src/plugins/image/__tests__/mock-change.js +0 -15
  80. package/src/plugins/image/alt-dialog.jsx +0 -82
  81. package/src/plugins/image/component.jsx +0 -343
  82. package/src/plugins/image/image-toolbar.jsx +0 -100
  83. package/src/plugins/image/index.jsx +0 -227
  84. package/src/plugins/image/insert-image-handler.js +0 -79
  85. package/src/plugins/index.jsx +0 -377
  86. package/src/plugins/list/__tests__/index.test.js +0 -54
  87. package/src/plugins/list/index.jsx +0 -305
  88. package/src/plugins/math/__tests__/__snapshots__/index.test.jsx.snap +0 -48
  89. package/src/plugins/math/__tests__/index.test.jsx +0 -245
  90. package/src/plugins/math/index.jsx +0 -379
  91. package/src/plugins/media/__tests__/index.test.js +0 -75
  92. package/src/plugins/media/index.jsx +0 -325
  93. package/src/plugins/media/media-dialog.js +0 -624
  94. package/src/plugins/media/media-toolbar.jsx +0 -56
  95. package/src/plugins/media/media-wrapper.jsx +0 -43
  96. package/src/plugins/rendering/index.js +0 -31
  97. package/src/plugins/respArea/index.jsx +0 -299
  98. package/src/plugins/respArea/math-templated/index.jsx +0 -104
  99. package/src/plugins/respArea/utils.jsx +0 -90
  100. package/src/plugins/table/CustomTablePlugin.js +0 -113
  101. package/src/plugins/table/__tests__/__snapshots__/table-toolbar.test.jsx.snap +0 -44
  102. package/src/plugins/table/__tests__/index.test.jsx +0 -401
  103. package/src/plugins/table/__tests__/table-toolbar.test.jsx +0 -42
  104. package/src/plugins/table/index.jsx +0 -427
  105. package/src/plugins/table/table-toolbar.jsx +0 -136
  106. package/src/plugins/textAlign/index.jsx +0 -23
  107. package/src/plugins/toolbar/__tests__/__snapshots__/default-toolbar.test.jsx.snap +0 -923
  108. package/src/plugins/toolbar/__tests__/__snapshots__/editor-and-toolbar.test.jsx.snap +0 -20
  109. package/src/plugins/toolbar/__tests__/__snapshots__/toolbar-buttons.test.jsx.snap +0 -36
  110. package/src/plugins/toolbar/__tests__/__snapshots__/toolbar.test.jsx.snap +0 -46
  111. package/src/plugins/toolbar/__tests__/default-toolbar.test.jsx +0 -94
  112. package/src/plugins/toolbar/__tests__/editor-and-toolbar.test.jsx +0 -37
  113. package/src/plugins/toolbar/__tests__/toolbar-buttons.test.jsx +0 -51
  114. package/src/plugins/toolbar/__tests__/toolbar.test.jsx +0 -106
  115. package/src/plugins/toolbar/default-toolbar.jsx +0 -206
  116. package/src/plugins/toolbar/editor-and-toolbar.jsx +0 -257
  117. package/src/plugins/toolbar/index.jsx +0 -23
  118. package/src/plugins/toolbar/toolbar-buttons.jsx +0 -138
  119. package/src/plugins/toolbar/toolbar.jsx +0 -338
  120. package/src/plugins/utils.js +0 -31
  121. package/src/serialization.jsx +0 -621
  122. /package/src/{plugins → components}/characters/custom-popper.js +0 -0
  123. /package/src/{plugins/toolbar → components/common}/done-button.jsx +0 -0
  124. /package/src/{plugins/css/icons/index.jsx → components/icons/CssIcon.jsx} +0 -0
  125. /package/src/{plugins/respArea/icons/index.jsx → components/icons/RespArea.jsx} +0 -0
  126. /package/src/{plugins/table/icons/index.jsx → components/icons/TableIcons.jsx} +0 -0
  127. /package/src/{plugins/textAlign/icons/index.jsx → components/icons/TextAlign.jsx} +0 -0
  128. /package/src/{plugins/respArea/drag-in-the-blank/index.jsx → components/respArea/DragInTheBlank/DragInTheBlank.jsx} +0 -0
  129. /package/src/{plugins/respArea/explicit-constructed-response/index.jsx → components/respArea/ExplicitConstructedResponse.jsx} +0 -0
@@ -1,44 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`table-toolbar snapshot renders 1`] = `
4
- <div
5
- className="table-toolbar"
6
- >
7
- <div>
8
- <WithStyles(RawButton)
9
- onClick={[MockFunction]}
10
- >
11
- <WithStyles(Component) />
12
- </WithStyles(RawButton)>
13
- <WithStyles(RawButton)
14
- onClick={[MockFunction]}
15
- >
16
- <WithStyles(Component) />
17
- </WithStyles(RawButton)>
18
- <WithStyles(RawButton)
19
- onClick={[MockFunction]}
20
- >
21
- <WithStyles(Component) />
22
- </WithStyles(RawButton)>
23
- <WithStyles(RawButton)
24
- onClick={[MockFunction]}
25
- >
26
- <WithStyles(Component) />
27
- </WithStyles(RawButton)>
28
- <WithStyles(RawButton)
29
- onClick={[MockFunction]}
30
- >
31
- <WithStyles(Component) />
32
- </WithStyles(RawButton)>
33
- <WithStyles(RawButton)
34
- active={true}
35
- onClick={[MockFunction]}
36
- >
37
- <pure(BorderAllIcon) />
38
- </WithStyles(RawButton)>
39
- </div>
40
- <WithStyles(RawDoneButton)
41
- onClick={[Function]}
42
- />
43
- </div>
44
- `;
@@ -1,401 +0,0 @@
1
- import EditTable from 'slate-edit-table';
2
- import TablePlugin, { serialization, parseStyleString, reactAttributes } from '../index';
3
- import { Data, Block, PathUtils } from 'slate';
4
- import React from 'react';
5
-
6
- jest.mock('slate-edit-table', () => {
7
- const mock = {
8
- default: jest.fn().mockReturnThis(),
9
- utils: {
10
- isSelectionInTable: jest.fn().mockReturnValue(true),
11
- createTable: jest.fn(function(c) {
12
- return {
13
- toJSON: jest.fn().mockReturnValue({ object: 'block', type: 'table' }),
14
- };
15
- }),
16
- },
17
- changes: {
18
- insertTable: jest.fn(function(c) {
19
- return c;
20
- }),
21
- },
22
- };
23
-
24
- return jest.fn().mockReturnValue(mock);
25
- });
26
-
27
- describe('table', () => {
28
- describe('toolbar', () => {
29
- describe('onClick', () => {
30
- let plugin;
31
- let onChange;
32
- let findDescendant;
33
- let insertBlock;
34
- let changeMock;
35
-
36
- beforeEach(() => {
37
- plugin = TablePlugin();
38
- onChange = jest.fn();
39
- insertBlock = jest.fn();
40
- findDescendant = jest.fn();
41
- changeMock = jest.fn().mockReturnValue({
42
- insertBlock,
43
- value: {
44
- document: {
45
- findDescendant,
46
- },
47
- },
48
- });
49
- });
50
-
51
- it('calls utils.createTable', () => {
52
- plugin.toolbar.onClick({ change: changeMock }, onChange);
53
-
54
- expect(EditTable().utils.createTable).toHaveBeenCalledWith(2, 2);
55
- });
56
-
57
- it('creates table with border: 1 as default', () => {
58
- plugin.toolbar.onClick({ change: changeMock }, onChange);
59
-
60
- expect(insertBlock).toHaveBeenCalledWith(
61
- Block.create({ key: '2', type: 'table', data: { border: '1', newTable: true } }),
62
- );
63
- });
64
-
65
- it('moves cursor to first cell of the table and removes the newTable property', () => {
66
- const dataRemoveFn = jest.fn().mockReturnValue({ border: '1' });
67
- const setNodeByKey = jest.fn();
68
- const newTableBlock = {
69
- key: '2',
70
- data: {
71
- remove: dataRemoveFn,
72
- },
73
- };
74
- const collapseToStartOf = jest.fn();
75
-
76
- changeMock = jest.fn().mockReturnValue({
77
- insertBlock,
78
- collapseToStartOf,
79
- setNodeByKey,
80
- value: {
81
- document: {
82
- findDescendant: jest.fn().mockReturnValue(newTableBlock),
83
- },
84
- },
85
- });
86
- plugin.toolbar.onClick({ change: changeMock }, onChange);
87
-
88
- expect(collapseToStartOf).toHaveBeenCalledWith(newTableBlock);
89
- expect(dataRemoveFn).toHaveBeenCalledWith('newTable');
90
- expect(setNodeByKey).toHaveBeenCalledWith('2', { data: { border: '1' } });
91
- });
92
- });
93
-
94
- describe('supports', () => {
95
- const assertSupports = (inTable, object, expected) => {
96
- it(`inTable: ${inTable}, type: ${object} => ${expected}`, () => {
97
- EditTable().utils.isSelectionInTable.mockReturnValue(inTable);
98
- const plugin = TablePlugin();
99
- const supports = plugin.toolbar.supports({ object });
100
- expect(supports).toEqual(expected);
101
- });
102
- };
103
-
104
- assertSupports(true, 'block', true);
105
- assertSupports(false, 'block', false);
106
- assertSupports(true, 'inline', false);
107
- assertSupports(false, 'inline', false);
108
- });
109
-
110
- describe('customToolbar', () => {
111
- describe('toggleBorder', () => {
112
- const assertToggle = (border, expectedBorder) => {
113
- describe(`with initial border of ${border}`, () => {
114
- let change;
115
- let done;
116
-
117
- beforeEach(() => {
118
- const plugin = TablePlugin();
119
- change = {
120
- setNodeByKey: jest.fn().mockReturnThis(),
121
- };
122
- plugin.utils.getTableBlock = jest.fn().mockReturnValue({
123
- key: 'tableKey',
124
- data: Data.create({ border }),
125
- });
126
- const node = { key: 'nodeKey' };
127
- const value = {
128
- change: jest.fn().mockReturnValue(change),
129
- };
130
- done = jest.fn();
131
- const Comp = plugin.toolbar.customToolbar(node, value, done);
132
- const c = Comp();
133
- c.props.onToggleBorder();
134
- });
135
-
136
- it(`calls setNodeByKey with ${expectedBorder}`, () => {
137
- expect(change.setNodeByKey).toHaveBeenCalledWith('tableKey', {
138
- data: Data.create({ border: expectedBorder }),
139
- });
140
- });
141
-
142
- it('calls onToolbarDone', () => {
143
- expect(done).toHaveBeenCalledWith(change, false);
144
- });
145
- });
146
- };
147
-
148
- assertToggle(null, '1');
149
- assertToggle(undefined, '1');
150
- assertToggle('0', '1');
151
- assertToggle('1', '0');
152
- assertToggle('2', '0');
153
- });
154
- });
155
-
156
- describe('normalizeNode', () => {
157
- it('should exit the function if the node is not of type document', () => {
158
- const tablePlugin = TablePlugin();
159
- const returnValue = tablePlugin.normalizeNode({ object: 'table' });
160
-
161
- expect(returnValue).toEqual(undefined);
162
- });
163
-
164
- it('should exit there are no changes needed', () => {
165
- const tablePlugin = TablePlugin();
166
- const nodes = {
167
- size: 3,
168
- findLastIndex: jest.fn().mockReturnValue(1),
169
- };
170
- const returnValue = tablePlugin.normalizeNode({
171
- object: 'document',
172
- nodes,
173
- findDescendant: jest.fn().mockReturnValue({ object: 'block', type: 'table' }),
174
- getParent: jest.fn().mockReturnValue(undefined),
175
- });
176
- expect(returnValue).toEqual(undefined);
177
- });
178
-
179
- it('should return a function if a table does not have a node before or after it', () => {
180
- const tablePlugin = TablePlugin();
181
- const nodes = [
182
- {
183
- object: 'block',
184
- type: 'table',
185
- key: '99',
186
- data: Data.create({
187
- newTable: true,
188
- }),
189
- },
190
- ];
191
- const findDescendant = jest.fn((callback) => {
192
- nodes.forEach((n) => callback(n));
193
- });
194
- const change = {
195
- insertNodeByPath: jest.fn(),
196
- value: {
197
- document: {
198
- getPath: jest.fn().mockReturnValue(PathUtils.create([0, 0])),
199
- },
200
- },
201
- };
202
-
203
- const returnValue = tablePlugin.normalizeNode({
204
- object: 'document',
205
- findDescendant,
206
- getPath: jest.fn().mockReturnValue(PathUtils.create([0, 0])),
207
- getPreviousNode: jest.fn().mockReturnValue(undefined),
208
- getNextNode: jest.fn().mockReturnValue(undefined),
209
- });
210
-
211
- expect(returnValue).toEqual(expect.any(Function));
212
-
213
- returnValue(change);
214
-
215
- expect(change.insertNodeByPath).toHaveBeenCalledWith([0], 0, {
216
- object: 'block',
217
- type: 'div',
218
- });
219
- });
220
- });
221
- });
222
- });
223
-
224
- describe('parseStyleString', () => {
225
- const parses = (s, expected) => {
226
- it(`parses ${s} -> ${JSON.stringify(expected)}`, () => {
227
- const result = parseStyleString(s);
228
- expect(result).toEqual(expected);
229
- });
230
- };
231
- parses(' width: 10px ', { width: '10px' });
232
- parses(' width: 10px; ', { width: '10px' });
233
- parses(' border-width: 10px; ', { 'border-width': '10px' });
234
- parses(' border: solid 1px red; height: 1px', {
235
- border: 'solid 1px red',
236
- height: '1px',
237
- });
238
- });
239
-
240
- describe('toStyleString', () => {
241
- const styleString = (o, expected) => {
242
- it(`${JSON.stringify(s)} -> ${expected}`, () => {
243
- const result = toStyleString(o);
244
- expect(result).toEqual(expected);
245
- });
246
- };
247
- });
248
-
249
- describe('reactAttributes', () => {
250
- const attributes = (o, expected) => {
251
- it(`${JSON.stringify(o)} -> ${JSON.stringify(expected)}`, () => {
252
- const result = reactAttributes(o);
253
- expect(result).toEqual(expected);
254
- });
255
- };
256
- attributes({ 'border-width': '10px', 'line-height': 1.56 }, { borderWidth: '10px', lineHeight: '1.56' });
257
- });
258
-
259
- describe('serialization', () => {
260
- describe('deserialize', () => {
261
- let next;
262
-
263
- beforeEach(() => {
264
- next = jest.fn().mockReturnValue([]);
265
- });
266
-
267
- describe('table', () => {
268
- let el;
269
- let out;
270
- beforeEach(() => {
271
- el = {
272
- tagName: 'table',
273
- children: [],
274
- getAttribute: jest.fn((name) => {
275
- switch (name) {
276
- case 'border':
277
- return '1';
278
- case 'cellspacing':
279
- return '2';
280
- case 'cellpadding':
281
- return '3';
282
- case 'class':
283
- return 'table-class';
284
- case 'style':
285
- return 'width: 10px';
286
- }
287
- }),
288
- };
289
- out = serialization.deserialize(el, next);
290
- });
291
-
292
- const assertData = (name, value) => {
293
- it(`data.${name} should eql ${value}`, () => {
294
- expect(out.data[name]).toEqual(value);
295
- });
296
- };
297
-
298
- assertData('border', '1');
299
- assertData('cellspacing', '2');
300
- assertData('cellpadding', '3');
301
- assertData('class', 'table-class');
302
- assertData('style', { width: '10px' });
303
- it('returns a table block', () => {
304
- expect(out).toMatchObject({
305
- object: 'block',
306
- type: 'table',
307
- nodes: [],
308
- });
309
- });
310
- });
311
-
312
- it('deserializes tr', () => {
313
- const el = {
314
- tagName: 'tr',
315
- children: [],
316
- };
317
-
318
- const out = serialization.deserialize(el, next);
319
-
320
- expect(out).toEqual({
321
- object: 'block',
322
- type: 'table_row',
323
- nodes: [],
324
- });
325
- });
326
-
327
- it('deserializes td', () => {
328
- const el = {
329
- tagName: 'td',
330
- childNodes: [],
331
- getAttribute: jest.fn(function(name) {
332
- const o = {
333
- class: 'class name',
334
- colspan: '1',
335
- rowspan: '1',
336
- };
337
- return o[name];
338
- }),
339
- };
340
-
341
- const out = serialization.deserialize(el, next);
342
-
343
- expect(out).toEqual({
344
- object: 'block',
345
- type: 'table_cell',
346
- nodes: [],
347
- data: {
348
- colspan: '1',
349
- rowspan: '1',
350
- class: 'class name',
351
- header: false,
352
- },
353
- });
354
- });
355
- });
356
-
357
- describe('serialize', () => {
358
- it('serializes table', () => {
359
- const el = serialization.serialize({
360
- object: 'block',
361
- type: 'table',
362
- nodes: [],
363
- data: Data.create({
364
- border: '1',
365
- cellpadding: '2',
366
- cellspacing: '3',
367
- }),
368
- });
369
-
370
- expect(el).toEqual(
371
- <table border="1" cellPadding="2" cellSpacing="3">
372
- <tbody />
373
- </table>,
374
- );
375
- });
376
-
377
- it('serializes table_row', () => {
378
- const el = serialization.serialize({
379
- object: 'block',
380
- type: 'table_row',
381
- nodes: [],
382
- });
383
-
384
- expect(el).toEqual(<tr />);
385
- });
386
- it('serializes table_cell', () => {
387
- const el = serialization.serialize({
388
- object: 'block',
389
- type: 'table_cell',
390
- nodes: [],
391
- data: Data.create({
392
- header: false,
393
- style: { width: '10px' },
394
- class: 'foo',
395
- }),
396
- });
397
-
398
- expect(el).toEqual(<td style={{ width: '10px' }} className={'foo'} />);
399
- });
400
- });
401
- });
@@ -1,42 +0,0 @@
1
- import { shallow } from 'enzyme';
2
- import React from 'react';
3
- import { TableToolbar } from '../table-toolbar';
4
- describe('table-toolbar', () => {
5
- let onDone, onAddColumn, onAddRow, onRemoveColumn, onRemoveRow, onRemoveTable, onToggleBorder;
6
-
7
- beforeEach(() => {
8
- onAddColumn = jest.fn();
9
- onAddRow = jest.fn();
10
- onRemoveColumn = jest.fn();
11
- onRemoveRow = jest.fn();
12
- onRemoveTable = jest.fn();
13
- onDone = jest.fn();
14
- onToggleBorder = jest.fn();
15
- });
16
-
17
- const mkWrapper = (extras) => {
18
- const props = {
19
- onDone,
20
- onAddRow,
21
- onRemoveRow,
22
- onAddColumn,
23
- onRemoveColumn,
24
- onRemoveTable,
25
- hasBorder: true,
26
- onToggleBorder,
27
- classes: {
28
- tableToolbar: 'table-toolbar',
29
- },
30
- ...extras,
31
- };
32
-
33
- return shallow(<TableToolbar {...props} />);
34
- };
35
-
36
- describe('snapshot', () => {
37
- it('renders', () => {
38
- const w = mkWrapper();
39
- expect(w).toMatchSnapshot();
40
- });
41
- });
42
- });