@jotforminc/dnd-builder 2.4.3 → 2.4.4

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 (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/cjs/components/TextEditor/textEditorConstants.js +30 -1
  3. package/lib/cjs/components/TextEditor/textEditorConstants.js.map +1 -1
  4. package/lib/cjs/styles/_jfReportsTextEditor.scss +11 -7
  5. package/lib/cjs/styles/_jfReportsViewModes.scss +6 -0
  6. package/lib/esm/components/TextEditor/textEditorConstants.js +30 -1
  7. package/lib/esm/components/TextEditor/textEditorConstants.js.map +1 -1
  8. package/lib/esm/styles/_jfReportsTextEditor.scss +11 -7
  9. package/lib/esm/styles/_jfReportsViewModes.scss +6 -0
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [2.4.4](https://github.com/jotform/dnd-builder/compare/v2.4.3...v2.4.4) (2022-08-09)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * **report-item:** fix report item outline for zoom levels ([4f7fa52](https://github.com/jotform/dnd-builder/commit/4f7fa52ae33e77eb01aff7b09977bea84832c71b))
11
+ * **text-editor:** url input visibility issue fixed ([4a76028](https://github.com/jotform/dnd-builder/commit/4a76028fdb384c7219f701ad677e437c90a4ffbf))
12
+
5
13
  ### [2.4.3](https://github.com/jotform/dnd-builder/compare/v2.4.2...v2.4.3) (2022-08-04)
6
14
 
7
15
 
package/lib/cjs/components/TextEditor/textEditorConstants.js CHANGED
@@ -2,11 +2,40 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var handleKeyDown = function handleKeyDown(e) {
6
+ e.stopPropagation();
7
+ };
8
+
5
9
  var modules = {
6
10
  clipboard: {
7
11
  matchVisual: false
8
12
  },
9
- toolbar: '#toolbar'
13
+ toolbar: {
14
+ container: '#toolbar',
15
+ handlers: {
16
+ link: function customLink(value) {
17
+ var input = document.querySelector('.ql-tooltip [data-link]');
18
+
19
+ if (value) {
20
+ var range = this.quill.getSelection();
21
+
22
+ if (range === null || range.length === 0) {
23
+ return;
24
+ }
25
+
26
+ var tooltip = this.quill.theme.tooltip;
27
+ var toolbar = document.getElementById('toolbar');
28
+ toolbar.appendChild(tooltip.root);
29
+ tooltip.edit('link', this.quill.getText(range));
30
+ input.setAttribute('placeholder', 'Enter a link');
31
+ input.addEventListener('keydown', handleKeyDown);
32
+ } else {
33
+ input.removeEventListener('keydown', handleKeyDown);
34
+ this.quill.format('link', false);
35
+ }
36
+ }
37
+ }
38
+ }
10
39
  };
11
40
  var formats = ['align', 'header', 'font', 'size', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link', 'image', 'color'];
12
41
 
package/lib/cjs/components/TextEditor/textEditorConstants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"textEditorConstants.js","sources":["../../../../src/components/TextEditor/textEditorConstants.js"],"sourcesContent":["export const modules = {\n clipboard: {\n matchVisual: false,\n },\n toolbar: '#toolbar',\n};\n\nexport const formats = [\n 'align',\n 'header',\n 'font',\n 'size',\n 'bold',\n 'italic',\n 'underline',\n 'strike',\n 'blockquote',\n 'list',\n 'bullet',\n 'indent',\n 'link',\n 'image',\n 'color',\n];\n"],"names":["modules","clipboard","matchVisual","toolbar","formats"],"mappings":";;;;IAAaA,OAAO,GAAG;AACrBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,WAAW,EAAE;AADJ,GADU;AAIrBC,EAAAA,OAAO,EAAE;AAJY;IAOVC,OAAO,GAAG,CACrB,OADqB,EAErB,QAFqB,EAGrB,MAHqB,EAIrB,MAJqB,EAKrB,MALqB,EAMrB,QANqB,EAOrB,WAPqB,EAQrB,QARqB,EASrB,YATqB,EAUrB,MAVqB,EAWrB,QAXqB,EAYrB,QAZqB,EAarB,MAbqB,EAcrB,OAdqB,EAerB,OAfqB;;;;;"}
1
+ {"version":3,"file":"textEditorConstants.js","sources":["../../../../src/components/TextEditor/textEditorConstants.js"],"sourcesContent":["const handleKeyDown = e => {\n e.stopPropagation();\n};\n\nexport const modules = {\n clipboard: {\n matchVisual: false,\n },\n toolbar: {\n container: '#toolbar',\n handlers: {\n link: function customLink(value) {\n const input = document.querySelector('.ql-tooltip [data-link]');\n if (value) {\n const range = this.quill.getSelection();\n if (range === null || range.length === 0) {\n return;\n }\n const { tooltip } = this.quill.theme;\n const toolbar = document.getElementById('toolbar');\n toolbar.appendChild(tooltip.root);\n tooltip.edit('link', this.quill.getText(range));\n input.setAttribute('placeholder', 'Enter a link');\n input.addEventListener('keydown', handleKeyDown);\n } else {\n input.removeEventListener('keydown', handleKeyDown);\n this.quill.format('link', false);\n }\n },\n },\n },\n};\n\nexport const formats = [\n 'align',\n 'header',\n 'font',\n 'size',\n 'bold',\n 'italic',\n 'underline',\n 'strike',\n 'blockquote',\n 'list',\n 'bullet',\n 'indent',\n 'link',\n 'image',\n 'color',\n];\n"],"names":["handleKeyDown","e","stopPropagation","modules","clipboard","matchVisual","toolbar","container","handlers","link","customLink","value","input","document","querySelector","range","quill","getSelection","length","tooltip","theme","getElementById","appendChild","root","edit","getText","setAttribute","addEventListener","removeEventListener","format","formats"],"mappings":";;;;AAAA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAAAC,CAAC,EAAI;AACzBA,EAAAA,CAAC,CAACC,eAAF;AACD,CAFD;;IAIaC,OAAO,GAAG;AACrBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,WAAW,EAAE;AADJ,GADU;AAIrBC,EAAAA,OAAO,EAAE;AACPC,IAAAA,SAAS,EAAE,UADJ;AAEPC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAE,SAASC,UAAT,CAAoBC,KAApB,EAA2B;AAC/B,YAAMC,KAAK,GAAGC,QAAQ,CAACC,aAAT,CAAuB,yBAAvB,CAAd;;AACA,YAAIH,KAAJ,EAAW;AACT,cAAMI,KAAK,GAAG,KAAKC,KAAL,CAAWC,YAAX,EAAd;;AACA,cAAIF,KAAK,KAAK,IAAV,IAAkBA,KAAK,CAACG,MAAN,KAAiB,CAAvC,EAA0C;AACxC;AACD;;AACD,cAAQC,OAAR,GAAoB,KAAKH,KAAL,CAAWI,KAA/B,CAAQD,OAAR;AACA,cAAMb,OAAO,GAAGO,QAAQ,CAACQ,cAAT,CAAwB,SAAxB,CAAhB;AACAf,UAAAA,OAAO,CAACgB,WAAR,CAAoBH,OAAO,CAACI,IAA5B;AACAJ,UAAAA,OAAO,CAACK,IAAR,CAAa,MAAb,EAAqB,KAAKR,KAAL,CAAWS,OAAX,CAAmBV,KAAnB,CAArB;AACAH,UAAAA,KAAK,CAACc,YAAN,CAAmB,aAAnB,EAAkC,cAAlC;AACAd,UAAAA,KAAK,CAACe,gBAAN,CAAuB,SAAvB,EAAkC3B,aAAlC;AACD,SAXD,MAWO;AACLY,UAAAA,KAAK,CAACgB,mBAAN,CAA0B,SAA1B,EAAqC5B,aAArC;AACA,eAAKgB,KAAL,CAAWa,MAAX,CAAkB,MAAlB,EAA0B,KAA1B;AACD;AACF;AAlBO;AAFH;AAJY;IA6BVC,OAAO,GAAG,CACrB,OADqB,EAErB,QAFqB,EAGrB,MAHqB,EAIrB,MAJqB,EAKrB,MALqB,EAMrB,QANqB,EAOrB,WAPqB,EAQrB,QARqB,EASrB,YATqB,EAUrB,MAVqB,EAWrB,QAXqB,EAYrB,QAZqB,EAarB,MAbqB,EAcrB,OAdqB,EAerB,OAfqB;;;;;"}
package/lib/cjs/styles/_jfReportsTextEditor.scss CHANGED
@@ -56,6 +56,7 @@
56
56
  font-size: .75rem;
57
57
  margin-top: 10px;
58
58
  width: 100%;
59
+ background-color: transparent;
59
60
 
60
61
  .toolbarWrapper {
61
62
  flex-wrap: nowrap;
@@ -199,23 +200,26 @@
199
200
  }
200
201
 
201
202
  .ql-tooltip {
202
- position: fixed;
203
203
  /* stylelint-disable-next-line declaration-no-important */
204
- top: auto !important;
205
- /* stylelint-disable-next-line declaration-no-important */
206
- left: auto !important;
204
+ position: static !important;
207
205
  align-items: center;
208
206
  height: 30px;
209
- transform: translate(100%, 170%);
207
+ /* stylelint-disable-next-line declaration-no-important */
208
+ margin-top: 38px !important;
209
+ /* stylelint-disable-next-line declaration-no-important */
210
+ transform: none !important;
210
211
  background-color: $inputGray;
211
212
  border: 1px solid $inputGrayBorder;
212
213
  border-radius: 3px;
213
214
  box-shadow: none;
214
215
  font-size: .75rem;
215
216
  font-weight: 500;
216
- margin-left: -207px;
217
217
  padding: 4px 4px 4px 8px;
218
218
  color: #8483A9;
219
+ width: 100%;
220
+ max-width: 394px;
221
+ min-width: 325px;
222
+ margin-left: auto;
219
223
 
220
224
  input[type="text"] {
221
225
  border-radius: 3px;
@@ -225,7 +229,7 @@
225
229
  background-color: #F3F3FE;
226
230
  color: rgba(#6F76A7, 0.6);
227
231
  border: 0;
228
- width: 217px;
232
+ width: 100%;
229
233
  }
230
234
 
231
235
  &:not(.ql-hidden) {
package/lib/cjs/styles/_jfReportsViewModes.scss CHANGED
@@ -55,6 +55,12 @@
55
55
  outline-offset: -1px;
56
56
  }
57
57
 
58
+ [data-zoom="0.5"] .reportItem,
59
+ [data-zoom="0.6"] .reportItem,
60
+ [data-zoom="0.7"] .reportItem {
61
+ outline-width: 2px;
62
+ }
63
+
58
64
  .reportItemWrapper.isSelected:hover .isLocked {
59
65
  pointer-events: none;
60
66
  }
package/lib/esm/components/TextEditor/textEditorConstants.js CHANGED
@@ -1,8 +1,37 @@
1
+ var handleKeyDown = function handleKeyDown(e) {
2
+ e.stopPropagation();
3
+ };
4
+
1
5
  var modules = {
2
6
  clipboard: {
3
7
  matchVisual: false
4
8
  },
5
- toolbar: '#toolbar'
9
+ toolbar: {
10
+ container: '#toolbar',
11
+ handlers: {
12
+ link: function customLink(value) {
13
+ var input = document.querySelector('.ql-tooltip [data-link]');
14
+
15
+ if (value) {
16
+ var range = this.quill.getSelection();
17
+
18
+ if (range === null || range.length === 0) {
19
+ return;
20
+ }
21
+
22
+ var tooltip = this.quill.theme.tooltip;
23
+ var toolbar = document.getElementById('toolbar');
24
+ toolbar.appendChild(tooltip.root);
25
+ tooltip.edit('link', this.quill.getText(range));
26
+ input.setAttribute('placeholder', 'Enter a link');
27
+ input.addEventListener('keydown', handleKeyDown);
28
+ } else {
29
+ input.removeEventListener('keydown', handleKeyDown);
30
+ this.quill.format('link', false);
31
+ }
32
+ }
33
+ }
34
+ }
6
35
  };
7
36
  var formats = ['align', 'header', 'font', 'size', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link', 'image', 'color'];
8
37
 
package/lib/esm/components/TextEditor/textEditorConstants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"textEditorConstants.js","sources":["../../../../src/components/TextEditor/textEditorConstants.js"],"sourcesContent":["export const modules = {\n clipboard: {\n matchVisual: false,\n },\n toolbar: '#toolbar',\n};\n\nexport const formats = [\n 'align',\n 'header',\n 'font',\n 'size',\n 'bold',\n 'italic',\n 'underline',\n 'strike',\n 'blockquote',\n 'list',\n 'bullet',\n 'indent',\n 'link',\n 'image',\n 'color',\n];\n"],"names":["modules","clipboard","matchVisual","toolbar","formats"],"mappings":"IAAaA,OAAO,GAAG;AACrBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,WAAW,EAAE;AADJ,GADU;AAIrBC,EAAAA,OAAO,EAAE;AAJY;IAOVC,OAAO,GAAG,CACrB,OADqB,EAErB,QAFqB,EAGrB,MAHqB,EAIrB,MAJqB,EAKrB,MALqB,EAMrB,QANqB,EAOrB,WAPqB,EAQrB,QARqB,EASrB,YATqB,EAUrB,MAVqB,EAWrB,QAXqB,EAYrB,QAZqB,EAarB,MAbqB,EAcrB,OAdqB,EAerB,OAfqB;;;;"}
1
+ {"version":3,"file":"textEditorConstants.js","sources":["../../../../src/components/TextEditor/textEditorConstants.js"],"sourcesContent":["const handleKeyDown = e => {\n e.stopPropagation();\n};\n\nexport const modules = {\n clipboard: {\n matchVisual: false,\n },\n toolbar: {\n container: '#toolbar',\n handlers: {\n link: function customLink(value) {\n const input = document.querySelector('.ql-tooltip [data-link]');\n if (value) {\n const range = this.quill.getSelection();\n if (range === null || range.length === 0) {\n return;\n }\n const { tooltip } = this.quill.theme;\n const toolbar = document.getElementById('toolbar');\n toolbar.appendChild(tooltip.root);\n tooltip.edit('link', this.quill.getText(range));\n input.setAttribute('placeholder', 'Enter a link');\n input.addEventListener('keydown', handleKeyDown);\n } else {\n input.removeEventListener('keydown', handleKeyDown);\n this.quill.format('link', false);\n }\n },\n },\n },\n};\n\nexport const formats = [\n 'align',\n 'header',\n 'font',\n 'size',\n 'bold',\n 'italic',\n 'underline',\n 'strike',\n 'blockquote',\n 'list',\n 'bullet',\n 'indent',\n 'link',\n 'image',\n 'color',\n];\n"],"names":["handleKeyDown","e","stopPropagation","modules","clipboard","matchVisual","toolbar","container","handlers","link","customLink","value","input","document","querySelector","range","quill","getSelection","length","tooltip","theme","getElementById","appendChild","root","edit","getText","setAttribute","addEventListener","removeEventListener","format","formats"],"mappings":"AAAA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAAAC,CAAC,EAAI;AACzBA,EAAAA,CAAC,CAACC,eAAF;AACD,CAFD;;IAIaC,OAAO,GAAG;AACrBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,WAAW,EAAE;AADJ,GADU;AAIrBC,EAAAA,OAAO,EAAE;AACPC,IAAAA,SAAS,EAAE,UADJ;AAEPC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAE,SAASC,UAAT,CAAoBC,KAApB,EAA2B;AAC/B,YAAMC,KAAK,GAAGC,QAAQ,CAACC,aAAT,CAAuB,yBAAvB,CAAd;;AACA,YAAIH,KAAJ,EAAW;AACT,cAAMI,KAAK,GAAG,KAAKC,KAAL,CAAWC,YAAX,EAAd;;AACA,cAAIF,KAAK,KAAK,IAAV,IAAkBA,KAAK,CAACG,MAAN,KAAiB,CAAvC,EAA0C;AACxC;AACD;;AACD,cAAQC,OAAR,GAAoB,KAAKH,KAAL,CAAWI,KAA/B,CAAQD,OAAR;AACA,cAAMb,OAAO,GAAGO,QAAQ,CAACQ,cAAT,CAAwB,SAAxB,CAAhB;AACAf,UAAAA,OAAO,CAACgB,WAAR,CAAoBH,OAAO,CAACI,IAA5B;AACAJ,UAAAA,OAAO,CAACK,IAAR,CAAa,MAAb,EAAqB,KAAKR,KAAL,CAAWS,OAAX,CAAmBV,KAAnB,CAArB;AACAH,UAAAA,KAAK,CAACc,YAAN,CAAmB,aAAnB,EAAkC,cAAlC;AACAd,UAAAA,KAAK,CAACe,gBAAN,CAAuB,SAAvB,EAAkC3B,aAAlC;AACD,SAXD,MAWO;AACLY,UAAAA,KAAK,CAACgB,mBAAN,CAA0B,SAA1B,EAAqC5B,aAArC;AACA,eAAKgB,KAAL,CAAWa,MAAX,CAAkB,MAAlB,EAA0B,KAA1B;AACD;AACF;AAlBO;AAFH;AAJY;IA6BVC,OAAO,GAAG,CACrB,OADqB,EAErB,QAFqB,EAGrB,MAHqB,EAIrB,MAJqB,EAKrB,MALqB,EAMrB,QANqB,EAOrB,WAPqB,EAQrB,QARqB,EASrB,YATqB,EAUrB,MAVqB,EAWrB,QAXqB,EAYrB,QAZqB,EAarB,MAbqB,EAcrB,OAdqB,EAerB,OAfqB;;;;"}
package/lib/esm/styles/_jfReportsTextEditor.scss CHANGED
@@ -56,6 +56,7 @@
56
56
  font-size: .75rem;
57
57
  margin-top: 10px;
58
58
  width: 100%;
59
+ background-color: transparent;
59
60
 
60
61
  .toolbarWrapper {
61
62
  flex-wrap: nowrap;
@@ -199,23 +200,26 @@
199
200
  }
200
201
 
201
202
  .ql-tooltip {
202
- position: fixed;
203
203
  /* stylelint-disable-next-line declaration-no-important */
204
- top: auto !important;
205
- /* stylelint-disable-next-line declaration-no-important */
206
- left: auto !important;
204
+ position: static !important;
207
205
  align-items: center;
208
206
  height: 30px;
209
- transform: translate(100%, 170%);
207
+ /* stylelint-disable-next-line declaration-no-important */
208
+ margin-top: 38px !important;
209
+ /* stylelint-disable-next-line declaration-no-important */
210
+ transform: none !important;
210
211
  background-color: $inputGray;
211
212
  border: 1px solid $inputGrayBorder;
212
213
  border-radius: 3px;
213
214
  box-shadow: none;
214
215
  font-size: .75rem;
215
216
  font-weight: 500;
216
- margin-left: -207px;
217
217
  padding: 4px 4px 4px 8px;
218
218
  color: #8483A9;
219
+ width: 100%;
220
+ max-width: 394px;
221
+ min-width: 325px;
222
+ margin-left: auto;
219
223
 
220
224
  input[type="text"] {
221
225
  border-radius: 3px;
@@ -225,7 +229,7 @@
225
229
  background-color: #F3F3FE;
226
230
  color: rgba(#6F76A7, 0.6);
227
231
  border: 0;
228
- width: 217px;
232
+ width: 100%;
229
233
  }
230
234
 
231
235
  &:not(.ql-hidden) {
package/lib/esm/styles/_jfReportsViewModes.scss CHANGED
@@ -55,6 +55,12 @@
55
55
  outline-offset: -1px;
56
56
  }
57
57
 
58
+ [data-zoom="0.5"] .reportItem,
59
+ [data-zoom="0.6"] .reportItem,
60
+ [data-zoom="0.7"] .reportItem {
61
+ outline-width: 2px;
62
+ }
63
+
58
64
  .reportItemWrapper.isSelected:hover .isLocked {
59
65
  pointer-events: none;
60
66
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jotforminc/dnd-builder",
3
- "version": "2.4.3",
3
+ "version": "2.4.4",
4
4
  "files": [
5
5
  "lib"
6
6
  ],