studiokit-scaffolding-js 7.0.6 → 7.0.7-alpha.1

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 (3) hide show
  1. package/lib/components/Quill/CustomToolbar.d.ts +35 -27
  2. package/lib/components/Quill/CustomToolbar.js +141 -81
  3. package/package.json +1 -1
package/lib/components/Quill/CustomToolbar.d.ts CHANGED
@@ -1,39 +1,47 @@
1
1
  import { FunctionComponent } from 'react';
2
2
  import ReactQuill from 'react-quill';
3
- export declare enum TOOLBAR_OPTION {
4
- HEADER = "header",
5
- FONT = "font",
6
- SIZE = "size",
7
- BOLD = "bold",
8
- ITALIC = "italic",
9
- UNDERLINE = "underline",
10
- SCRIPT_SUB = "sub",
11
- SCRIPT_SUPER = "super",
12
- STRIKE_THROUGH = "strike",
13
- BLOCKQUOTE = "blockquote",
14
- CODE_BLOCK = "code-block",
15
- ALIGN = "align",
16
- LIST_ORDERED = "ordered",
17
- LIST_BULLET = "bullet",
18
- LIST_ALPHA = "alpha",
19
- INDENT = "indent",
20
- LINK = "link",
21
- IMAGE = "image",
22
- VIDEO = "video",
23
- FORMULA = "formula",
24
- TABLE = "table",
3
+ /** Options for Quill, used for defining options in the CustomToolbar, and for enabling features in Quill */
4
+ export declare enum QUILL_OPTION {
5
+ HEADER = 2,
6
+ FONT = 4,
7
+ SIZE = 8,
8
+ BOLD = 16,
9
+ ITALIC = 32,
10
+ UNDERLINE = 64,
11
+ /** NOTE: there is only a single "script" feature, but there are separate options for the toolbar buttons */
12
+ SCRIPT_SUB = 128,
13
+ /** NOTE: there is only a single "script" feature, but there are separate options for the toolbar buttons */
14
+ SCRIPT_SUPER = 256,
15
+ STRIKE_THROUGH = 512,
16
+ BLOCKQUOTE = 1024,
17
+ CODE_BLOCK = 2048,
18
+ ALIGN = 4096,
19
+ /** NOTE: there is only a single "list" feature, but there are separate options for the toolbar buttons */
20
+ LIST_ORDERED = 8192,
21
+ /** NOTE: there is only a single "list" feature, but there are separate options for the toolbar buttons */
22
+ LIST_BULLET = 16384,
23
+ /** NOTE: there is only a single "list" feature, but there are separate options for the toolbar buttons */
24
+ LIST_ALPHA = 32768,
25
+ INDENT = 65536,
26
+ LINK = 131072,
27
+ IMAGE = 262144,
28
+ VIDEO = 524288,
29
+ FORMULA = 1048576,
30
+ TABLE = 2097152,
25
31
  /** NOTE: variable support is not currently in scaffolding, just the toolbar option */
26
- VARIABLE = "variable",
27
- CLEAN = "clean"
32
+ VARIABLE = 4194304,
33
+ /** NOTE: there is no "clean" feature, this is only used to display the toolbar button */
34
+ CLEAN = 8388608
28
35
  }
29
- export declare const getFormatsForOptions: (sectionOptionsArray: TOOLBAR_OPTION[][]) => string[];
36
+ /** Flatten the nested section options for the toolbar into a flat array of options. */
37
+ export declare const getFormatsForOptions: (sectionOptionsArray: QUILL_OPTION[][]) => string[];
30
38
  export declare type ToolbarSection = (disabled?: boolean) => JSX.Element;
31
39
  export interface CustomToolbarProps {
32
40
  guid: string;
33
41
  /** An array of toolbar option arrays. Each top level array will equate to a toolbar section, with spacing between each section. */
34
- sectionOptions: TOOLBAR_OPTION[][];
42
+ sectionOptions: QUILL_OPTION[][];
35
43
  /** (Optional) An array of toolbar option arrays. When provided, a "more options" button is provided and a secondary toolbar can be expanded and collapsed. */
36
- moreSectionOptions?: TOOLBAR_OPTION[][];
44
+ moreSectionOptions?: QUILL_OPTION[][];
37
45
  className?: string;
38
46
  disabled?: boolean;
39
47
  reactQuillRef: ReactQuill | null;
package/lib/components/Quill/CustomToolbar.js CHANGED
@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
22
22
  return (mod && mod.__esModule) ? mod : { "default": mod };
23
23
  };
24
24
  Object.defineProperty(exports, "__esModule", { value: true });
25
- exports.CustomToolbar = exports.getFormatsForOptions = exports.TOOLBAR_OPTION = void 0;
25
+ exports.CustomToolbar = exports.getFormatsForOptions = exports.QUILL_OPTION = void 0;
26
26
  var AddBox_1 = __importDefault(require("@material-ui/icons/AddBox"));
27
27
  var MoreHoriz_1 = __importDefault(require("@material-ui/icons/MoreHoriz"));
28
28
  var lodash_1 = require("lodash");
@@ -35,67 +35,128 @@ var IconTableInsertCol_1 = require("../Icons/IconTableInsertCol");
35
35
  var IconTableInsertRow_1 = require("../Icons/IconTableInsertRow");
36
36
  var accessibilityFix_1 = require("./accessibilityFix");
37
37
  var constants_1 = require("./TableModule/constants");
38
- var TOOLBAR_OPTION;
39
- (function (TOOLBAR_OPTION) {
40
- TOOLBAR_OPTION["HEADER"] = "header";
41
- TOOLBAR_OPTION["FONT"] = "font";
42
- TOOLBAR_OPTION["SIZE"] = "size";
43
- TOOLBAR_OPTION["BOLD"] = "bold";
44
- TOOLBAR_OPTION["ITALIC"] = "italic";
45
- TOOLBAR_OPTION["UNDERLINE"] = "underline";
46
- TOOLBAR_OPTION["SCRIPT_SUB"] = "sub";
47
- TOOLBAR_OPTION["SCRIPT_SUPER"] = "super";
48
- TOOLBAR_OPTION["STRIKE_THROUGH"] = "strike";
49
- TOOLBAR_OPTION["BLOCKQUOTE"] = "blockquote";
50
- TOOLBAR_OPTION["CODE_BLOCK"] = "code-block";
51
- TOOLBAR_OPTION["ALIGN"] = "align";
52
- TOOLBAR_OPTION["LIST_ORDERED"] = "ordered";
53
- TOOLBAR_OPTION["LIST_BULLET"] = "bullet";
54
- TOOLBAR_OPTION["LIST_ALPHA"] = "alpha";
55
- TOOLBAR_OPTION["INDENT"] = "indent";
56
- TOOLBAR_OPTION["LINK"] = "link";
57
- TOOLBAR_OPTION["IMAGE"] = "image";
58
- TOOLBAR_OPTION["VIDEO"] = "video";
59
- TOOLBAR_OPTION["FORMULA"] = "formula";
60
- TOOLBAR_OPTION["TABLE"] = "table";
38
+ /** Options for Quill, used for defining options in the CustomToolbar, and for enabling features in Quill */
39
+ var QUILL_OPTION;
40
+ (function (QUILL_OPTION) {
41
+ QUILL_OPTION[QUILL_OPTION["HEADER"] = 2] = "HEADER";
42
+ QUILL_OPTION[QUILL_OPTION["FONT"] = 4] = "FONT";
43
+ QUILL_OPTION[QUILL_OPTION["SIZE"] = 8] = "SIZE";
44
+ QUILL_OPTION[QUILL_OPTION["BOLD"] = 16] = "BOLD";
45
+ QUILL_OPTION[QUILL_OPTION["ITALIC"] = 32] = "ITALIC";
46
+ QUILL_OPTION[QUILL_OPTION["UNDERLINE"] = 64] = "UNDERLINE";
47
+ /** NOTE: there is only a single "script" feature, but there are separate options for the toolbar buttons */
48
+ QUILL_OPTION[QUILL_OPTION["SCRIPT_SUB"] = 128] = "SCRIPT_SUB";
49
+ /** NOTE: there is only a single "script" feature, but there are separate options for the toolbar buttons */
50
+ QUILL_OPTION[QUILL_OPTION["SCRIPT_SUPER"] = 256] = "SCRIPT_SUPER";
51
+ QUILL_OPTION[QUILL_OPTION["STRIKE_THROUGH"] = 512] = "STRIKE_THROUGH";
52
+ QUILL_OPTION[QUILL_OPTION["BLOCKQUOTE"] = 1024] = "BLOCKQUOTE";
53
+ QUILL_OPTION[QUILL_OPTION["CODE_BLOCK"] = 2048] = "CODE_BLOCK";
54
+ QUILL_OPTION[QUILL_OPTION["ALIGN"] = 4096] = "ALIGN";
55
+ /** NOTE: there is only a single "list" feature, but there are separate options for the toolbar buttons */
56
+ QUILL_OPTION[QUILL_OPTION["LIST_ORDERED"] = 8192] = "LIST_ORDERED";
57
+ /** NOTE: there is only a single "list" feature, but there are separate options for the toolbar buttons */
58
+ QUILL_OPTION[QUILL_OPTION["LIST_BULLET"] = 16384] = "LIST_BULLET";
59
+ /** NOTE: there is only a single "list" feature, but there are separate options for the toolbar buttons */
60
+ QUILL_OPTION[QUILL_OPTION["LIST_ALPHA"] = 32768] = "LIST_ALPHA";
61
+ QUILL_OPTION[QUILL_OPTION["INDENT"] = 65536] = "INDENT";
62
+ QUILL_OPTION[QUILL_OPTION["LINK"] = 131072] = "LINK";
63
+ QUILL_OPTION[QUILL_OPTION["IMAGE"] = 262144] = "IMAGE";
64
+ QUILL_OPTION[QUILL_OPTION["VIDEO"] = 524288] = "VIDEO";
65
+ QUILL_OPTION[QUILL_OPTION["FORMULA"] = 1048576] = "FORMULA";
66
+ QUILL_OPTION[QUILL_OPTION["TABLE"] = 2097152] = "TABLE";
61
67
  /** NOTE: variable support is not currently in scaffolding, just the toolbar option */
62
- TOOLBAR_OPTION["VARIABLE"] = "variable";
63
- TOOLBAR_OPTION["CLEAN"] = "clean";
64
- })(TOOLBAR_OPTION = exports.TOOLBAR_OPTION || (exports.TOOLBAR_OPTION = {}));
68
+ QUILL_OPTION[QUILL_OPTION["VARIABLE"] = 4194304] = "VARIABLE";
69
+ /** NOTE: there is no "clean" feature, this is only used to display the toolbar button */
70
+ QUILL_OPTION[QUILL_OPTION["CLEAN"] = 8388608] = "CLEAN";
71
+ })(QUILL_OPTION = exports.QUILL_OPTION || (exports.QUILL_OPTION = {}));
72
+ var getNameForOption = function (option) {
73
+ switch (option) {
74
+ case QUILL_OPTION.HEADER:
75
+ return 'header';
76
+ case QUILL_OPTION.FONT:
77
+ return 'font';
78
+ case QUILL_OPTION.SIZE:
79
+ return 'size';
80
+ case QUILL_OPTION.BOLD:
81
+ return 'bold';
82
+ case QUILL_OPTION.ITALIC:
83
+ return 'italic';
84
+ case QUILL_OPTION.UNDERLINE:
85
+ return 'underline';
86
+ case QUILL_OPTION.STRIKE_THROUGH:
87
+ return 'strike';
88
+ case QUILL_OPTION.BLOCKQUOTE:
89
+ return 'blockquote';
90
+ case QUILL_OPTION.CODE_BLOCK:
91
+ return 'code-block';
92
+ case QUILL_OPTION.ALIGN:
93
+ return 'align';
94
+ case QUILL_OPTION.INDENT:
95
+ return 'indent';
96
+ case QUILL_OPTION.LINK:
97
+ return 'link';
98
+ case QUILL_OPTION.IMAGE:
99
+ return 'image';
100
+ case QUILL_OPTION.VIDEO:
101
+ return 'video';
102
+ case QUILL_OPTION.FORMULA:
103
+ return 'formula';
104
+ case QUILL_OPTION.VARIABLE:
105
+ return 'variable';
106
+ case QUILL_OPTION.LIST_ORDERED:
107
+ return 'ordered';
108
+ case QUILL_OPTION.LIST_BULLET:
109
+ return 'bullet';
110
+ case QUILL_OPTION.LIST_ALPHA:
111
+ return 'alpha';
112
+ case QUILL_OPTION.SCRIPT_SUB:
113
+ return 'sub';
114
+ case QUILL_OPTION.SCRIPT_SUPER:
115
+ return 'super';
116
+ case QUILL_OPTION.TABLE:
117
+ return 'table';
118
+ case QUILL_OPTION.CLEAN:
119
+ return 'clean';
120
+ default:
121
+ throw new Error("Unsupported option: " + option);
122
+ }
123
+ };
124
+ /** Returns the Quill format for a given option, which enables that given feature in Quill */
65
125
  var getFormatsForOption = function (option) {
66
126
  switch (option) {
67
- case TOOLBAR_OPTION.HEADER:
68
- case TOOLBAR_OPTION.FONT:
69
- case TOOLBAR_OPTION.SIZE:
70
- case TOOLBAR_OPTION.BOLD:
71
- case TOOLBAR_OPTION.ITALIC:
72
- case TOOLBAR_OPTION.UNDERLINE:
73
- case TOOLBAR_OPTION.STRIKE_THROUGH:
74
- case TOOLBAR_OPTION.BLOCKQUOTE:
75
- case TOOLBAR_OPTION.CODE_BLOCK:
76
- case TOOLBAR_OPTION.ALIGN:
77
- case TOOLBAR_OPTION.INDENT:
78
- case TOOLBAR_OPTION.LINK:
79
- case TOOLBAR_OPTION.IMAGE:
80
- case TOOLBAR_OPTION.VIDEO:
81
- case TOOLBAR_OPTION.FORMULA:
82
- case TOOLBAR_OPTION.VARIABLE:
83
- return [option];
84
- case TOOLBAR_OPTION.LIST_ORDERED:
85
- case TOOLBAR_OPTION.LIST_BULLET:
86
- case TOOLBAR_OPTION.LIST_ALPHA:
127
+ case QUILL_OPTION.HEADER:
128
+ case QUILL_OPTION.FONT:
129
+ case QUILL_OPTION.SIZE:
130
+ case QUILL_OPTION.BOLD:
131
+ case QUILL_OPTION.ITALIC:
132
+ case QUILL_OPTION.UNDERLINE:
133
+ case QUILL_OPTION.STRIKE_THROUGH:
134
+ case QUILL_OPTION.BLOCKQUOTE:
135
+ case QUILL_OPTION.CODE_BLOCK:
136
+ case QUILL_OPTION.ALIGN:
137
+ case QUILL_OPTION.INDENT:
138
+ case QUILL_OPTION.LINK:
139
+ case QUILL_OPTION.IMAGE:
140
+ case QUILL_OPTION.VIDEO:
141
+ case QUILL_OPTION.FORMULA:
142
+ case QUILL_OPTION.VARIABLE:
143
+ return [getNameForOption(option)];
144
+ case QUILL_OPTION.LIST_ORDERED:
145
+ case QUILL_OPTION.LIST_BULLET:
146
+ case QUILL_OPTION.LIST_ALPHA:
87
147
  return ['list'];
88
- case TOOLBAR_OPTION.SCRIPT_SUB:
89
- case TOOLBAR_OPTION.SCRIPT_SUPER:
148
+ case QUILL_OPTION.SCRIPT_SUB:
149
+ case QUILL_OPTION.SCRIPT_SUPER:
90
150
  return ['script'];
91
- case TOOLBAR_OPTION.TABLE:
151
+ case QUILL_OPTION.TABLE:
92
152
  return ['table-container', 'table', 'tbody', 'tr', 'td'];
93
- case TOOLBAR_OPTION.CLEAN:
153
+ case QUILL_OPTION.CLEAN:
94
154
  return [];
95
155
  default:
96
156
  throw new Error("Unsupported option: " + option);
97
157
  }
98
158
  };
159
+ /** Flatten the nested section options for the toolbar into a flat array of options. */
99
160
  var getFormatsForOptions = function (sectionOptionsArray) {
100
161
  // flatten section options to array of options
101
162
  // map options to formats and flatten those formats
@@ -104,43 +165,42 @@ var getFormatsForOptions = function (sectionOptionsArray) {
104
165
  };
105
166
  exports.getFormatsForOptions = getFormatsForOptions;
106
167
  var getToolbarSectionForOption = function (option) {
168
+ var optionName = getNameForOption(option);
107
169
  switch (option) {
108
- case TOOLBAR_OPTION.HEADER:
170
+ case QUILL_OPTION.HEADER:
109
171
  return function (disabled) { return (react_1.default.createElement(react_1.default.Fragment, null,
110
172
  react_1.default.createElement("button", { className: "ql-header", value: "1", disabled: disabled }),
111
173
  react_1.default.createElement("button", { className: "ql-header", value: "2", disabled: disabled }))); };
112
- case TOOLBAR_OPTION.FONT:
113
- case TOOLBAR_OPTION.SIZE:
114
- case TOOLBAR_OPTION.ALIGN:
115
- return function (disabled) { return react_1.default.createElement("select", { className: "ql-" + option, disabled: disabled }); };
116
- case TOOLBAR_OPTION.BOLD:
117
- case TOOLBAR_OPTION.ITALIC:
118
- case TOOLBAR_OPTION.UNDERLINE:
119
- case TOOLBAR_OPTION.STRIKE_THROUGH:
120
- case TOOLBAR_OPTION.BLOCKQUOTE:
121
- case TOOLBAR_OPTION.CODE_BLOCK:
122
- case TOOLBAR_OPTION.LINK:
123
- case TOOLBAR_OPTION.IMAGE:
124
- case TOOLBAR_OPTION.VIDEO:
125
- case TOOLBAR_OPTION.FORMULA:
126
- case TOOLBAR_OPTION.CLEAN:
127
- return function (disabled) { return react_1.default.createElement("button", { className: "ql-" + option, disabled: disabled }); };
128
- case TOOLBAR_OPTION.SCRIPT_SUB:
129
- return function (disabled) { return react_1.default.createElement("button", { className: "ql-script", value: "sub", disabled: disabled }); };
130
- case TOOLBAR_OPTION.SCRIPT_SUPER:
131
- return function (disabled) { return react_1.default.createElement("button", { className: "ql-script", value: "super", disabled: disabled }); };
132
- case TOOLBAR_OPTION.LIST_ORDERED:
133
- return function (disabled) { return react_1.default.createElement("button", { className: "ql-list", value: "ordered", disabled: disabled }); };
134
- case TOOLBAR_OPTION.LIST_BULLET:
135
- return function (disabled) { return react_1.default.createElement("button", { className: "ql-list", value: "bullet", disabled: disabled }); };
136
- case TOOLBAR_OPTION.LIST_ALPHA:
137
- return function (disabled) { return (react_1.default.createElement("button", { className: "ql-list", value: "alpha", disabled: disabled, title: "Toggle alpha list", "aria-label": "Toggle alpha list" },
174
+ case QUILL_OPTION.FONT:
175
+ case QUILL_OPTION.SIZE:
176
+ case QUILL_OPTION.ALIGN:
177
+ return function (disabled) { return react_1.default.createElement("select", { className: "ql-" + optionName, disabled: disabled }); };
178
+ case QUILL_OPTION.BOLD:
179
+ case QUILL_OPTION.ITALIC:
180
+ case QUILL_OPTION.UNDERLINE:
181
+ case QUILL_OPTION.STRIKE_THROUGH:
182
+ case QUILL_OPTION.BLOCKQUOTE:
183
+ case QUILL_OPTION.CODE_BLOCK:
184
+ case QUILL_OPTION.LINK:
185
+ case QUILL_OPTION.IMAGE:
186
+ case QUILL_OPTION.VIDEO:
187
+ case QUILL_OPTION.FORMULA:
188
+ case QUILL_OPTION.CLEAN:
189
+ return function (disabled) { return react_1.default.createElement("button", { className: "ql-" + optionName, disabled: disabled }); };
190
+ case QUILL_OPTION.SCRIPT_SUB:
191
+ case QUILL_OPTION.SCRIPT_SUPER:
192
+ return function (disabled) { return react_1.default.createElement("button", { className: "ql-script", value: optionName, disabled: disabled }); };
193
+ case QUILL_OPTION.LIST_ORDERED:
194
+ case QUILL_OPTION.LIST_BULLET:
195
+ return function (disabled) { return react_1.default.createElement("button", { className: "ql-list", value: optionName, disabled: disabled }); };
196
+ case QUILL_OPTION.LIST_ALPHA:
197
+ return function (disabled) { return (react_1.default.createElement("button", { className: "ql-list", value: optionName, disabled: disabled, title: "Toggle alpha list", "aria-label": "Toggle alpha list" },
138
198
  react_1.default.createElement(IconAlphaList_1.IconAlphaList, { style: { width: 'auto' } }))); };
139
- case TOOLBAR_OPTION.INDENT:
199
+ case QUILL_OPTION.INDENT:
140
200
  return function (disabled) { return (react_1.default.createElement(react_1.default.Fragment, null,
141
201
  react_1.default.createElement("button", { className: "ql-indent", value: "-1", disabled: disabled }),
142
202
  react_1.default.createElement("button", { className: "ql-indent", value: "+1", disabled: disabled }))); };
143
- case TOOLBAR_OPTION.TABLE:
203
+ case QUILL_OPTION.TABLE:
144
204
  return function (disabled) { return (react_1.default.createElement(react_1.default.Fragment, null,
145
205
  react_1.default.createElement("select", { className: "ql-table", disabled: disabled }, Array.from(Array(5).keys()).flatMap(function (row) {
146
206
  return Array.from(Array(5).keys()).map(function (col) {
@@ -155,7 +215,7 @@ var getToolbarSectionForOption = function (option) {
155
215
  react_1.default.createElement(IconTableInsertCol_1.IconTableInsertCol, { style: { width: 'auto' } })),
156
216
  react_1.default.createElement("button", { className: "ql-table", value: "delete-col", disabled: disabled },
157
217
  react_1.default.createElement(IconTableDeleteCol_1.IconTableDeleteCol, { style: { width: 'auto' } })))); };
158
- case TOOLBAR_OPTION.VARIABLE:
218
+ case QUILL_OPTION.VARIABLE:
159
219
  return function (disabled) { return (react_1.default.createElement("button", { className: "ql-createVariable f6 fw5" + (disabled ? '' : ' color-primary'), style: { width: '100%' }, disabled: disabled, type: "button", "aria-label": "Insert variable", title: "Insert variable" },
160
220
  react_1.default.createElement(AddBox_1.default, { className: "ma0" }),
161
221
  "Variable")); };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "studiokit-scaffolding-js",
3
- "version": "7.0.6",
3
+ "version": "7.0.7-alpha.1",
4
4
  "description": "Common scaffolding for Studio apps at Purdue",
5
5
  "repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
6
6
  "license": "MIT",