@contentstack/live-preview-utils 4.0.1 → 4.1.0

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 (106) hide show
  1. package/README.md +3 -3
  2. package/dist/legacy/light-sdk.cjs +1 -1
  3. package/dist/legacy/light-sdk.js +1 -1
  4. package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs +24 -8
  5. package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs.map +1 -1
  6. package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js +24 -8
  7. package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js.map +1 -1
  8. package/dist/legacy/preview/contentstack-live-preview-HOC.cjs +1 -1
  9. package/dist/legacy/preview/contentstack-live-preview-HOC.js +1 -1
  10. package/dist/legacy/visualBuilder/components/VariantIndicator.cjs +36 -0
  11. package/dist/legacy/visualBuilder/components/VariantIndicator.cjs.map +1 -0
  12. package/dist/legacy/visualBuilder/components/VariantIndicator.d.cts +3 -0
  13. package/dist/legacy/visualBuilder/components/VariantIndicator.d.ts +3 -0
  14. package/dist/legacy/visualBuilder/components/VariantIndicator.js +13 -0
  15. package/dist/legacy/visualBuilder/components/VariantIndicator.js.map +1 -0
  16. package/dist/legacy/visualBuilder/components/fieldLabelWrapper.cjs +124 -114
  17. package/dist/legacy/visualBuilder/components/fieldLabelWrapper.cjs.map +1 -1
  18. package/dist/legacy/visualBuilder/components/fieldLabelWrapper.js +124 -114
  19. package/dist/legacy/visualBuilder/components/fieldLabelWrapper.js.map +1 -1
  20. package/dist/legacy/visualBuilder/components/icons/variant.cjs +5 -1
  21. package/dist/legacy/visualBuilder/components/icons/variant.cjs.map +1 -1
  22. package/dist/legacy/visualBuilder/components/icons/variant.d.cts +3 -1
  23. package/dist/legacy/visualBuilder/components/icons/variant.d.ts +3 -1
  24. package/dist/legacy/visualBuilder/components/icons/variant.js +5 -1
  25. package/dist/legacy/visualBuilder/components/icons/variant.js.map +1 -1
  26. package/dist/legacy/visualBuilder/generators/generateHoverOutline.cjs +10 -1
  27. package/dist/legacy/visualBuilder/generators/generateHoverOutline.cjs.map +1 -1
  28. package/dist/legacy/visualBuilder/generators/generateHoverOutline.d.cts +1 -1
  29. package/dist/legacy/visualBuilder/generators/generateHoverOutline.d.ts +1 -1
  30. package/dist/legacy/visualBuilder/generators/generateHoverOutline.js +10 -1
  31. package/dist/legacy/visualBuilder/generators/generateHoverOutline.js.map +1 -1
  32. package/dist/legacy/visualBuilder/listeners/mouseHover.cjs +13 -10
  33. package/dist/legacy/visualBuilder/listeners/mouseHover.cjs.map +1 -1
  34. package/dist/legacy/visualBuilder/listeners/mouseHover.js +13 -10
  35. package/dist/legacy/visualBuilder/listeners/mouseHover.js.map +1 -1
  36. package/dist/legacy/visualBuilder/utils/enableInlineEditing.cjs +3 -1
  37. package/dist/legacy/visualBuilder/utils/enableInlineEditing.cjs.map +1 -1
  38. package/dist/legacy/visualBuilder/utils/enableInlineEditing.js +3 -1
  39. package/dist/legacy/visualBuilder/utils/enableInlineEditing.js.map +1 -1
  40. package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.cjs +5 -0
  41. package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.cjs.map +1 -1
  42. package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.js +5 -0
  43. package/dist/legacy/visualBuilder/utils/handleFieldMouseDown.js.map +1 -1
  44. package/dist/legacy/visualBuilder/utils/isFieldDisabled.cjs +1 -1
  45. package/dist/legacy/visualBuilder/utils/isFieldDisabled.cjs.map +1 -1
  46. package/dist/legacy/visualBuilder/utils/isFieldDisabled.js +1 -1
  47. package/dist/legacy/visualBuilder/utils/isFieldDisabled.js.map +1 -1
  48. package/dist/legacy/visualBuilder/visualBuilder.style.cjs +26 -1
  49. package/dist/legacy/visualBuilder/visualBuilder.style.cjs.map +1 -1
  50. package/dist/legacy/visualBuilder/visualBuilder.style.d.cts +3 -0
  51. package/dist/legacy/visualBuilder/visualBuilder.style.d.ts +3 -0
  52. package/dist/legacy/visualBuilder/visualBuilder.style.js +26 -1
  53. package/dist/legacy/visualBuilder/visualBuilder.style.js.map +1 -1
  54. package/dist/modern/light-sdk.cjs +1 -1
  55. package/dist/modern/light-sdk.js +1 -1
  56. package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs +23 -7
  57. package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs.map +1 -1
  58. package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js +23 -7
  59. package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js.map +1 -1
  60. package/dist/modern/preview/contentstack-live-preview-HOC.cjs +1 -1
  61. package/dist/modern/preview/contentstack-live-preview-HOC.js +1 -1
  62. package/dist/modern/visualBuilder/components/VariantIndicator.cjs +36 -0
  63. package/dist/modern/visualBuilder/components/VariantIndicator.cjs.map +1 -0
  64. package/dist/modern/visualBuilder/components/VariantIndicator.d.cts +3 -0
  65. package/dist/modern/visualBuilder/components/VariantIndicator.d.ts +3 -0
  66. package/dist/modern/visualBuilder/components/VariantIndicator.js +13 -0
  67. package/dist/modern/visualBuilder/components/VariantIndicator.js.map +1 -0
  68. package/dist/modern/visualBuilder/components/fieldLabelWrapper.cjs +124 -114
  69. package/dist/modern/visualBuilder/components/fieldLabelWrapper.cjs.map +1 -1
  70. package/dist/modern/visualBuilder/components/fieldLabelWrapper.js +124 -114
  71. package/dist/modern/visualBuilder/components/fieldLabelWrapper.js.map +1 -1
  72. package/dist/modern/visualBuilder/components/icons/variant.cjs +5 -1
  73. package/dist/modern/visualBuilder/components/icons/variant.cjs.map +1 -1
  74. package/dist/modern/visualBuilder/components/icons/variant.d.cts +3 -1
  75. package/dist/modern/visualBuilder/components/icons/variant.d.ts +3 -1
  76. package/dist/modern/visualBuilder/components/icons/variant.js +5 -1
  77. package/dist/modern/visualBuilder/components/icons/variant.js.map +1 -1
  78. package/dist/modern/visualBuilder/generators/generateHoverOutline.cjs +10 -1
  79. package/dist/modern/visualBuilder/generators/generateHoverOutline.cjs.map +1 -1
  80. package/dist/modern/visualBuilder/generators/generateHoverOutline.d.cts +1 -1
  81. package/dist/modern/visualBuilder/generators/generateHoverOutline.d.ts +1 -1
  82. package/dist/modern/visualBuilder/generators/generateHoverOutline.js +10 -1
  83. package/dist/modern/visualBuilder/generators/generateHoverOutline.js.map +1 -1
  84. package/dist/modern/visualBuilder/listeners/mouseHover.cjs +13 -10
  85. package/dist/modern/visualBuilder/listeners/mouseHover.cjs.map +1 -1
  86. package/dist/modern/visualBuilder/listeners/mouseHover.js +13 -10
  87. package/dist/modern/visualBuilder/listeners/mouseHover.js.map +1 -1
  88. package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs +3 -1
  89. package/dist/modern/visualBuilder/utils/enableInlineEditing.cjs.map +1 -1
  90. package/dist/modern/visualBuilder/utils/enableInlineEditing.js +3 -1
  91. package/dist/modern/visualBuilder/utils/enableInlineEditing.js.map +1 -1
  92. package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs +5 -0
  93. package/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs.map +1 -1
  94. package/dist/modern/visualBuilder/utils/handleFieldMouseDown.js +5 -0
  95. package/dist/modern/visualBuilder/utils/handleFieldMouseDown.js.map +1 -1
  96. package/dist/modern/visualBuilder/utils/isFieldDisabled.cjs +1 -1
  97. package/dist/modern/visualBuilder/utils/isFieldDisabled.cjs.map +1 -1
  98. package/dist/modern/visualBuilder/utils/isFieldDisabled.js +1 -1
  99. package/dist/modern/visualBuilder/utils/isFieldDisabled.js.map +1 -1
  100. package/dist/modern/visualBuilder/visualBuilder.style.cjs +26 -1
  101. package/dist/modern/visualBuilder/visualBuilder.style.cjs.map +1 -1
  102. package/dist/modern/visualBuilder/visualBuilder.style.d.cts +3 -0
  103. package/dist/modern/visualBuilder/visualBuilder.style.d.ts +3 -0
  104. package/dist/modern/visualBuilder/visualBuilder.style.js +26 -1
  105. package/dist/modern/visualBuilder/visualBuilder.style.js.map +1 -1
  106. package/package.json +1 -3
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/generators/generateHoverOutline.tsx"],"sourcesContent":["import { visualBuilderStyles } from \"../visualBuilder.style\";\n\n/**\n * Adds a hover outline to the target element.\n * @param targetElement - The element to add the hover outline to.\n * @param isAnchorElement - Boolean to check for anchor elements.\n * @returns void\n */\nexport function addHoverOutline(\n targetElement: Element,\n disabled?: boolean\n): void {\n const targetElementDimension = targetElement.getBoundingClientRect();\n\n const hoverOutline = document.querySelector<HTMLDivElement>(\n \".visual-builder__hover-outline\"\n );\n\n if (hoverOutline) {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n );\n\n if (disabled) {\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n );\n } else {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n );\n }\n\n hoverOutline.style.top = `${\n targetElementDimension.top + window.scrollY\n }px`;\n hoverOutline.style.left = `${targetElementDimension.left}px`;\n hoverOutline.style.width = `${targetElementDimension.width}px`;\n hoverOutline.style.height = `${targetElementDimension.height}px`;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoC;AAQ7B,SAAS,gBACZ,eACA,UACI;AACJ,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,eAAe,SAAS;AAAA,IAC1B;AAAA,EACJ;AAEA,MAAI,cAAc;AACd,iBAAa,UAAU;AAAA,UACnB,0CAAoB,EAAE,uCAAuC;AAAA,IACjE;AAEA,QAAI,UAAU;AACV,mBAAa,UAAU;AAAA,YACnB,0CAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ,OAAO;AACH,mBAAa,UAAU;AAAA,YACnB,0CAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ;AAEA,iBAAa,MAAM,MAAM,GACrB,uBAAuB,MAAM,OAAO,OACxC;AACA,iBAAa,MAAM,OAAO,GAAG,uBAAuB,IAAI;AACxD,iBAAa,MAAM,QAAQ,GAAG,uBAAuB,KAAK;AAC1D,iBAAa,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAAA,EAChE;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/generators/generateHoverOutline.tsx"],"sourcesContent":["import { visualBuilderStyles } from \"../visualBuilder.style\";\n\n/**\n * Adds a hover outline to the target element.\n * @param targetElement - The element to add the hover outline to.\n * @param isAnchorElement - Boolean to check for anchor elements.\n * @returns void\n */\nexport function addHoverOutline(\n targetElement: Element,\n disabled?: boolean,\n isVariant?: boolean\n): void {\n const targetElementDimension = targetElement.getBoundingClientRect();\n\n const hoverOutline = document.querySelector<HTMLDivElement>(\n \".visual-builder__hover-outline\"\n );\n\n if (hoverOutline) {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n );\n\n if (disabled) {\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n );\n } else {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n );\n if (isVariant) {\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--variant\"]\n );\n } else {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--variant\"]\n );\n }\n }\n\n hoverOutline.style.top = `${\n targetElementDimension.top + window.scrollY\n }px`;\n hoverOutline.style.left = `${targetElementDimension.left}px`;\n hoverOutline.style.width = `${targetElementDimension.width}px`;\n hoverOutline.style.height = `${targetElementDimension.height}px`;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoC;AAQ7B,SAAS,gBACZ,eACA,UACA,WACI;AACJ,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,eAAe,SAAS;AAAA,IAC1B;AAAA,EACJ;AAEA,MAAI,cAAc;AACd,iBAAa,UAAU;AAAA,UACnB,0CAAoB,EAAE,uCAAuC;AAAA,IACjE;AAEA,QAAI,UAAU;AACV,mBAAa,UAAU;AAAA,YACnB,0CAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ,OAAO;AACH,mBAAa,UAAU;AAAA,YACnB,0CAAoB,EAAE,yCAAyC;AAAA,MACnE;AACA,UAAI,WAAW;AACX,qBAAa,UAAU;AAAA,cACnB,0CAAoB,EAAE,wCAAwC;AAAA,QAClE;AAAA,MACJ,OAAO;AACH,qBAAa,UAAU;AAAA,cACnB,0CAAoB,EAAE,wCAAwC;AAAA,QAClE;AAAA,MACJ;AAAA,IACJ;AAEA,iBAAa,MAAM,MAAM,GACrB,uBAAuB,MAAM,OAAO,OACxC;AACA,iBAAa,MAAM,OAAO,GAAG,uBAAuB,IAAI;AACxD,iBAAa,MAAM,QAAQ,GAAG,uBAAuB,KAAK;AAC1D,iBAAa,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAAA,EAChE;AACJ;","names":[]}
@@ -4,6 +4,6 @@
4
4
  * @param isAnchorElement - Boolean to check for anchor elements.
5
5
  * @returns void
6
6
  */
7
- declare function addHoverOutline(targetElement: Element, disabled?: boolean): void;
7
+ declare function addHoverOutline(targetElement: Element, disabled?: boolean, isVariant?: boolean): void;
8
8
 
9
9
  export { addHoverOutline };
@@ -4,6 +4,6 @@
4
4
  * @param isAnchorElement - Boolean to check for anchor elements.
5
5
  * @returns void
6
6
  */
7
- declare function addHoverOutline(targetElement: Element, disabled?: boolean): void;
7
+ declare function addHoverOutline(targetElement: Element, disabled?: boolean, isVariant?: boolean): void;
8
8
 
9
9
  export { addHoverOutline };
@@ -2,7 +2,7 @@ import "../../chunk-5WRI5ZAA.js";
2
2
 
3
3
  // src/visualBuilder/generators/generateHoverOutline.tsx
4
4
  import { visualBuilderStyles } from "../visualBuilder.style.js";
5
- function addHoverOutline(targetElement, disabled) {
5
+ function addHoverOutline(targetElement, disabled, isVariant) {
6
6
  const targetElementDimension = targetElement.getBoundingClientRect();
7
7
  const hoverOutline = document.querySelector(
8
8
  ".visual-builder__hover-outline"
@@ -19,6 +19,15 @@ function addHoverOutline(targetElement, disabled) {
19
19
  hoverOutline.classList.remove(
20
20
  visualBuilderStyles()["visual-builder__hover-outline--disabled"]
21
21
  );
22
+ if (isVariant) {
23
+ hoverOutline.classList.add(
24
+ visualBuilderStyles()["visual-builder__hover-outline--variant"]
25
+ );
26
+ } else {
27
+ hoverOutline.classList.remove(
28
+ visualBuilderStyles()["visual-builder__hover-outline--variant"]
29
+ );
30
+ }
22
31
  }
23
32
  hoverOutline.style.top = `${targetElementDimension.top + window.scrollY}px`;
24
33
  hoverOutline.style.left = `${targetElementDimension.left}px`;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/generators/generateHoverOutline.tsx"],"sourcesContent":["import { visualBuilderStyles } from \"../visualBuilder.style\";\n\n/**\n * Adds a hover outline to the target element.\n * @param targetElement - The element to add the hover outline to.\n * @param isAnchorElement - Boolean to check for anchor elements.\n * @returns void\n */\nexport function addHoverOutline(\n targetElement: Element,\n disabled?: boolean\n): void {\n const targetElementDimension = targetElement.getBoundingClientRect();\n\n const hoverOutline = document.querySelector<HTMLDivElement>(\n \".visual-builder__hover-outline\"\n );\n\n if (hoverOutline) {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n );\n\n if (disabled) {\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n );\n } else {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n );\n }\n\n hoverOutline.style.top = `${\n targetElementDimension.top + window.scrollY\n }px`;\n hoverOutline.style.left = `${targetElementDimension.left}px`;\n hoverOutline.style.width = `${targetElementDimension.width}px`;\n hoverOutline.style.height = `${targetElementDimension.height}px`;\n }\n}\n"],"mappings":";;;AAAA,SAAS,2BAA2B;AAQ7B,SAAS,gBACZ,eACA,UACI;AACJ,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,eAAe,SAAS;AAAA,IAC1B;AAAA,EACJ;AAEA,MAAI,cAAc;AACd,iBAAa,UAAU;AAAA,MACnB,oBAAoB,EAAE,uCAAuC;AAAA,IACjE;AAEA,QAAI,UAAU;AACV,mBAAa,UAAU;AAAA,QACnB,oBAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ,OAAO;AACH,mBAAa,UAAU;AAAA,QACnB,oBAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ;AAEA,iBAAa,MAAM,MAAM,GACrB,uBAAuB,MAAM,OAAO,OACxC;AACA,iBAAa,MAAM,OAAO,GAAG,uBAAuB,IAAI;AACxD,iBAAa,MAAM,QAAQ,GAAG,uBAAuB,KAAK;AAC1D,iBAAa,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAAA,EAChE;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/generators/generateHoverOutline.tsx"],"sourcesContent":["import { visualBuilderStyles } from \"../visualBuilder.style\";\n\n/**\n * Adds a hover outline to the target element.\n * @param targetElement - The element to add the hover outline to.\n * @param isAnchorElement - Boolean to check for anchor elements.\n * @returns void\n */\nexport function addHoverOutline(\n targetElement: Element,\n disabled?: boolean,\n isVariant?: boolean\n): void {\n const targetElementDimension = targetElement.getBoundingClientRect();\n\n const hoverOutline = document.querySelector<HTMLDivElement>(\n \".visual-builder__hover-outline\"\n );\n\n if (hoverOutline) {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n );\n\n if (disabled) {\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n );\n } else {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n );\n if (isVariant) {\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--variant\"]\n );\n } else {\n hoverOutline.classList.remove(\n visualBuilderStyles()[\"visual-builder__hover-outline--variant\"]\n );\n }\n }\n\n hoverOutline.style.top = `${\n targetElementDimension.top + window.scrollY\n }px`;\n hoverOutline.style.left = `${targetElementDimension.left}px`;\n hoverOutline.style.width = `${targetElementDimension.width}px`;\n hoverOutline.style.height = `${targetElementDimension.height}px`;\n }\n}\n"],"mappings":";;;AAAA,SAAS,2BAA2B;AAQ7B,SAAS,gBACZ,eACA,UACA,WACI;AACJ,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,eAAe,SAAS;AAAA,IAC1B;AAAA,EACJ;AAEA,MAAI,cAAc;AACd,iBAAa,UAAU;AAAA,MACnB,oBAAoB,EAAE,uCAAuC;AAAA,IACjE;AAEA,QAAI,UAAU;AACV,mBAAa,UAAU;AAAA,QACnB,oBAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ,OAAO;AACH,mBAAa,UAAU;AAAA,QACnB,oBAAoB,EAAE,yCAAyC;AAAA,MACnE;AACA,UAAI,WAAW;AACX,qBAAa,UAAU;AAAA,UACnB,oBAAoB,EAAE,wCAAwC;AAAA,QAClE;AAAA,MACJ,OAAO;AACH,qBAAa,UAAU;AAAA,UACnB,oBAAoB,EAAE,wCAAwC;AAAA,QAClE;AAAA,MACJ;AAAA,IACJ;AAEA,iBAAa,MAAM,MAAM,GACrB,uBAAuB,MAAM,OAAO,OACxC;AACA,iBAAa,MAAM,OAAO,GAAG,uBAAuB,IAAI;AACxD,iBAAa,MAAM,QAAQ,GAAG,uBAAuB,KAAK;AAC1D,iBAAa,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAAA,EAChE;AACJ;","names":[]}
@@ -89,7 +89,8 @@ async function addOutline(params) {
89
89
  fieldDisabled
90
90
  } = params;
91
91
  if (!editableElement) return;
92
- (0, import_generateHoverOutline.addHoverOutline)(editableElement, fieldDisabled);
92
+ const isVariant = !!fieldMetadata.variant;
93
+ (0, import_generateHoverOutline.addHoverOutline)(editableElement, fieldDisabled, isVariant);
93
94
  const fieldSchema = await import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
94
95
  content_type_uid,
95
96
  fieldPath
@@ -107,7 +108,7 @@ async function addOutline(params) {
107
108
  entryAcl,
108
109
  entryWorkflowStageDetails
109
110
  );
110
- (0, import_generateHoverOutline.addHoverOutline)(editableElement, fieldDisabled || isDisabled);
111
+ (0, import_generateHoverOutline.addHoverOutline)(editableElement, fieldDisabled || isDisabled, isVariant);
111
112
  }
112
113
  var debouncedAddOutline = (0, import_lodash_es.debounce)(addOutline, 50, { trailing: true });
113
114
  var showOutline = (params) => debouncedAddOutline(params);
@@ -275,14 +276,16 @@ var throttledMouseHover = (0, import_lodash_es.throttle)(async (params) => {
275
276
  });
276
277
  const isFocussed = import__.VisualBuilder.VisualBuilderGlobalState.value.isFocussed;
277
278
  if (!isFocussed) {
278
- showHoverToolbar({
279
- event: params.event,
280
- overlayWrapper: params.overlayWrapper,
281
- visualBuilderContainer: params.visualBuilderContainer,
282
- previousSelectedEditableDOM: import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM,
283
- focusedToolbar: params.focusedToolbar,
284
- resizeObserver: params.resizeObserver
285
- });
279
+ showHoverToolbar(
280
+ {
281
+ event: params.event,
282
+ overlayWrapper: params.overlayWrapper,
283
+ visualBuilderContainer: params.visualBuilderContainer,
284
+ previousSelectedEditableDOM: import__.VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM,
285
+ focusedToolbar: params.focusedToolbar,
286
+ resizeObserver: params.resizeObserver
287
+ }
288
+ );
286
289
  }
287
290
  }
288
291
  if (import__.VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM === editableElement) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseHover.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { getCsDataOfElement } from \"../utils/getCsDataOfElement\";\nimport { removeAddInstanceButtons } from \"../utils/multipleElementAddButton\";\nimport { generateCustomCursor } from \"../generators/generateCustomCursor\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { getFieldType } from \"../utils/getFieldType\";\n\nimport EventListenerHandlerParams from \"./types\";\nimport { VisualBuilder } from \"..\";\nimport { addHoverOutline } from \"../generators/generateHoverOutline\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport Config from \"../../configManager/configManager\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { HandleBuilderInteractionParams } from \"./mouseClick\";\nimport { appendFieldPathDropdown } from \"../generators/generateToolbar\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\n\nconst config = Config.get();\nexport interface HandleMouseHoverParams\n extends Pick<\n EventListenerHandlerParams,\n \"event\" | \"overlayWrapper\" | \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n > {\n customCursor: HTMLDivElement | null;\n}\n\ninterface AddOutlineParams {\n editableElement: Element;\n eventDetails: VisualBuilderCslpEventDetails;\n content_type_uid: string;\n fieldPath: string;\n fieldDisabled?: boolean;\n fieldMetadata: CslpData;\n}\n\nfunction resetCustomCursor(customCursor: HTMLDivElement | null): void {\n if (customCursor) {\n generateCustomCursor({\n fieldType: \"empty\",\n customCursor: customCursor,\n });\n }\n}\n\nfunction collabCustomCursor(customCursor: HTMLDivElement | null): void {\n if (!customCursor) return;\n\n generateCustomCursor({\n fieldType: \"discussion\",\n customCursor: customCursor,\n });\n}\n\nfunction handleCursorPosition(\n event: MouseEvent,\n customCursor: HTMLDivElement | null\n): void {\n if (customCursor) {\n const mouseY = event.clientY;\n const mouseX = event.clientX;\n\n customCursor.style.left = `${mouseX}px`;\n customCursor.style.top = `${mouseY}px`;\n }\n}\n\nasync function addOutline(params?: AddOutlineParams): Promise<void> {\n if (!params) {\n return;\n }\n const {\n editableElement,\n eventDetails,\n content_type_uid,\n fieldPath,\n fieldMetadata,\n fieldDisabled,\n } = params;\n if (!editableElement) return;\n addHoverOutline(editableElement as HTMLElement, fieldDisabled);\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n content_type_uid,\n fieldPath\n );\n if (!fieldSchema) return;\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: fieldMetadata.entry_uid,\n contentTypeUid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n variantUid: fieldMetadata.variant,\n });\n const { isDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryAcl,\n entryWorkflowStageDetails\n );\n addHoverOutline(editableElement, fieldDisabled || isDisabled);\n}\n\nconst debouncedAddOutline = debounce(addOutline, 50, { trailing: true });\nconst showOutline = (params?: AddOutlineParams): Promise<void> | undefined => debouncedAddOutline(params);\n\nfunction hideDefaultCursor(): void {\n if (\n document?.body &&\n !document.body.classList.contains(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n )\n )\n document.body.classList.add(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n );\n}\n\nfunction showDefaultCursor(): void {\n if (\n document?.body &&\n document.body.classList.contains(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n )\n )\n document.body.classList.remove(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n );\n}\n\nexport function hideHoverOutline(\n visualBuilderContainer: HTMLDivElement | null\n): void {\n if (!visualBuilderContainer) {\n return;\n }\n const hoverOutline = visualBuilderContainer.querySelector(\n \".visual-builder__hover-outline\"\n );\n if (!hoverOutline) {\n return;\n }\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n );\n}\n\nexport function hideCustomCursor(customCursor: HTMLDivElement | null): void {\n showDefaultCursor();\n customCursor?.classList.remove(\"visible\");\n}\n\nexport function showCustomCursor(customCursor: HTMLDivElement | null): void {\n hideDefaultCursor();\n if (\n config.collab.enable &&\n (!config.collab.isFeedbackMode || config.collab.pauseFeedback)\n )\n return;\n customCursor?.classList.add(\"visible\");\n}\n\nconst debouncedRenderHoverToolbar = debounce(async (params: HandleBuilderInteractionParams) => {\n const eventDetails = getCsDataOfElement(params.event);\n if (\n !eventDetails ||\n !params.overlayWrapper ||\n !params.visualBuilderContainer ||\n !params.focusedToolbar\n ) {\n return;\n }\n\n appendFieldPathDropdown(eventDetails, params.focusedToolbar, {\n isHover: true\n });\n}, 50, { trailing: true });\n\nexport const showHoverToolbar = async (params: HandleBuilderInteractionParams) => await debouncedRenderHoverToolbar(params);\n\nfunction isOverlay(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__overlay\");\n}\n\nfunction isContentEditable(target: HTMLElement): boolean {\n if (target.hasAttribute(\"contenteditable\"))\n return target.getAttribute(\"contenteditable\") === \"true\";\n return false;\n}\n\nfunction isFieldPathDropdown(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper\") || target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper__current-field\");\n}\n\nfunction isFieldPathParent(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper__parent-field\");\n}\n\nconst throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {\n const eventDetails = getCsDataOfElement(params.event);\n const eventTarget = params.event.target as HTMLElement | null;\n\n if (config?.collab.enable && config?.collab.pauseFeedback) {\n hideCustomCursor(params.customCursor);\n return;\n }\n if (!eventDetails) {\n if (\n eventTarget &&\n (isOverlay(eventTarget) ||\n isContentEditable(eventTarget) ||\n isCollabThread(eventTarget))\n ) {\n handleCursorPosition(params.event, params.customCursor);\n hideCustomCursor(params.customCursor);\n return;\n }\n if (\n eventTarget &&\n (isFieldPathDropdown(eventTarget) || isFieldPathParent(eventTarget))\n ) {\n params.customCursor && hideCustomCursor(params.customCursor);\n showOutline();\n showHoverToolbar({\n event: params.event,\n overlayWrapper: params.overlayWrapper,\n visualBuilderContainer: params.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n if (!config?.collab.enable) {\n resetCustomCursor(params.customCursor);\n }\n removeAddInstanceButtons({\n eventTarget: params.event.target,\n visualBuilderContainer: params.visualBuilderContainer,\n overlayWrapper: params.overlayWrapper,\n });\n handleCursorPosition(params.event, params.customCursor);\n if (config?.collab.enable && config?.collab.isFeedbackMode) {\n showCustomCursor(params.customCursor);\n collabCustomCursor(params.customCursor);\n }\n return;\n }\n\n const { editableElement, fieldMetadata } = eventDetails;\n const { content_type_uid, fieldPath } = fieldMetadata;\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM &&\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.isSameNode(\n editableElement\n )\n ) {\n hideCustomCursor(params.customCursor);\n return;\n }\n\n if (params.customCursor) {\n const elementUnderCursor = document.elementFromPoint(\n params.event.clientX,\n params.event.clientY\n );\n if (elementUnderCursor) {\n if (\n elementUnderCursor.nodeName === \"A\" ||\n elementUnderCursor.nodeName === \"BUTTON\"\n ) {\n elementUnderCursor.classList.add(\n visualBuilderStyles()[\"visual-builder__no-cursor-style\"]\n );\n }\n }\n\n if (config?.collab.enable && config?.collab.isFeedbackMode) {\n collabCustomCursor(params.customCursor);\n handleCursorPosition(params.event, params.customCursor);\n showCustomCursor(params.customCursor);\n return;\n } else if (config?.collab.enable && !config?.collab.isFeedbackMode) {\n hideCustomCursor(params.customCursor);\n return;\n }\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousHoveredTargetDOM !== editableElement\n ) {\n resetCustomCursor(params.customCursor);\n removeAddInstanceButtons({\n eventTarget: params.event.target,\n visualBuilderContainer: params.visualBuilderContainer,\n overlayWrapper: params.overlayWrapper,\n });\n }\n\n if (!FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {\n generateCustomCursor({\n fieldType: \"loading\",\n customCursor: params.customCursor,\n });\n }\n\n // we can generate the cursor asynchronously\n generateCursor({\n eventDetails,\n customCursor: params.customCursor,\n });\n\n handleCursorPosition(params.event, params.customCursor);\n showCustomCursor(params.customCursor);\n }\n\n if (\n !editableElement.classList.contains(VB_EmptyBlockParentClass) &&\n !editableElement.classList.contains(\"visual-builder__empty-block\")\n ) {\n showOutline({\n editableElement,\n eventDetails,\n content_type_uid,\n fieldPath,\n fieldMetadata,\n });\n const isFocussed= VisualBuilder.VisualBuilderGlobalState.value.isFocussed;\n if(!isFocussed) {\n showHoverToolbar({\n event: params.event,\n overlayWrapper: params.overlayWrapper,\n visualBuilderContainer: params.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n }\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousHoveredTargetDOM === editableElement\n ) {\n return;\n }\n\n VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM =\n editableElement;\n}, 10);\n\nasync function generateCursor({\n eventDetails,\n customCursor,\n}: {\n eventDetails: VisualBuilderCslpEventDetails;\n customCursor: HTMLDivElement | null;\n}) {\n if (!customCursor) return;\n const { fieldMetadata } = eventDetails;\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n fieldMetadata.content_type_uid,\n fieldMetadata.fieldPath\n );\n if (!fieldSchema) {\n return;\n }\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: fieldMetadata.entry_uid,\n contentTypeUid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n variantUid: fieldMetadata.variant,\n });\n const { isDisabled: fieldDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryAcl,\n entryWorkflowStageDetails\n );\n const fieldType = getFieldType(fieldSchema);\n generateCustomCursor({\n fieldType,\n customCursor,\n fieldDisabled,\n });\n}\n\nconst handleMouseHover = async (\n params: HandleMouseHoverParams\n): Promise<void> => await throttledMouseHover(params);\n\nexport default handleMouseHover;\n"],"mappings":"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","names":["import__","Config"]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseHover.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { getCsDataOfElement } from \"../utils/getCsDataOfElement\";\nimport { removeAddInstanceButtons } from \"../utils/multipleElementAddButton\";\nimport { generateCustomCursor } from \"../generators/generateCustomCursor\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { getFieldType } from \"../utils/getFieldType\";\n\nimport EventListenerHandlerParams from \"./types\";\nimport { VisualBuilder } from \"..\";\nimport { addHoverOutline } from \"../generators/generateHoverOutline\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport Config from \"../../configManager/configManager\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { HandleBuilderInteractionParams } from \"./mouseClick\";\nimport { appendFieldPathDropdown } from \"../generators/generateToolbar\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\n\nconst config = Config.get();\nexport interface HandleMouseHoverParams\n extends Pick<\n EventListenerHandlerParams,\n \"event\" | \"overlayWrapper\" | \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n > {\n customCursor: HTMLDivElement | null;\n}\n\ninterface AddOutlineParams {\n editableElement: Element;\n eventDetails: VisualBuilderCslpEventDetails;\n content_type_uid: string;\n fieldPath: string;\n fieldDisabled?: boolean;\n fieldMetadata: CslpData;\n}\n\nfunction resetCustomCursor(customCursor: HTMLDivElement | null): void {\n if (customCursor) {\n generateCustomCursor({\n fieldType: \"empty\",\n customCursor: customCursor,\n });\n }\n}\n\nfunction collabCustomCursor(customCursor: HTMLDivElement | null): void {\n if (!customCursor) return;\n\n generateCustomCursor({\n fieldType: \"discussion\",\n customCursor: customCursor,\n });\n}\n\nfunction handleCursorPosition(\n event: MouseEvent,\n customCursor: HTMLDivElement | null\n): void {\n if (customCursor) {\n const mouseY = event.clientY;\n const mouseX = event.clientX;\n\n customCursor.style.left = `${mouseX}px`;\n customCursor.style.top = `${mouseY}px`;\n }\n}\n\nasync function addOutline(params?: AddOutlineParams): Promise<void> {\n if (!params) {\n return;\n }\n const {\n editableElement,\n eventDetails,\n content_type_uid,\n fieldPath,\n fieldMetadata,\n fieldDisabled,\n } = params;\n if (!editableElement) return;\n const isVariant = !!fieldMetadata.variant;\n addHoverOutline(editableElement as HTMLElement, fieldDisabled, isVariant);\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n content_type_uid,\n fieldPath\n );\n if (!fieldSchema) return;\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: fieldMetadata.entry_uid,\n contentTypeUid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n variantUid: fieldMetadata.variant,\n });\n const { isDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryAcl,\n entryWorkflowStageDetails\n );\n addHoverOutline(editableElement, fieldDisabled || isDisabled, isVariant);\n}\n\nconst debouncedAddOutline = debounce(addOutline, 50, { trailing: true });\nconst showOutline = (params?: AddOutlineParams): Promise<void> | undefined => debouncedAddOutline(params);\n\nfunction hideDefaultCursor(): void {\n if (\n document?.body &&\n !document.body.classList.contains(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n )\n )\n document.body.classList.add(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n );\n}\n\nfunction showDefaultCursor(): void {\n if (\n document?.body &&\n document.body.classList.contains(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n )\n )\n document.body.classList.remove(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n );\n}\n\nexport function hideHoverOutline(\n visualBuilderContainer: HTMLDivElement | null\n): void {\n if (!visualBuilderContainer) {\n return;\n }\n const hoverOutline = visualBuilderContainer.querySelector(\n \".visual-builder__hover-outline\"\n );\n if (!hoverOutline) {\n return;\n }\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n );\n}\n\nexport function hideCustomCursor(customCursor: HTMLDivElement | null): void {\n showDefaultCursor();\n customCursor?.classList.remove(\"visible\");\n}\n\nexport function showCustomCursor(customCursor: HTMLDivElement | null): void {\n hideDefaultCursor();\n if (\n config.collab.enable &&\n (!config.collab.isFeedbackMode || config.collab.pauseFeedback)\n )\n return;\n customCursor?.classList.add(\"visible\");\n}\n\nconst debouncedRenderHoverToolbar = debounce(async (params: HandleBuilderInteractionParams) => {\n const eventDetails = getCsDataOfElement(params.event);\n if (\n !eventDetails ||\n !params.overlayWrapper ||\n !params.visualBuilderContainer ||\n !params.focusedToolbar\n ) {\n return;\n }\n\n appendFieldPathDropdown(eventDetails, params.focusedToolbar, {\n isHover: true\n });\n}, 50, { trailing: true });\n\nexport const showHoverToolbar = async (params: HandleBuilderInteractionParams) => await debouncedRenderHoverToolbar(params);\n\nfunction isOverlay(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__overlay\");\n}\n\nfunction isContentEditable(target: HTMLElement): boolean {\n if (target.hasAttribute(\"contenteditable\"))\n return target.getAttribute(\"contenteditable\") === \"true\";\n return false;\n}\n\nfunction isFieldPathDropdown(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper\") || target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper__current-field\");\n}\n\nfunction isFieldPathParent(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper__parent-field\");\n}\n\nconst throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {\n const eventDetails = getCsDataOfElement(params.event);\n const eventTarget = params.event.target as HTMLElement | null;\n\n if (config?.collab.enable && config?.collab.pauseFeedback) {\n hideCustomCursor(params.customCursor);\n return;\n }\n if (!eventDetails) {\n if (\n eventTarget &&\n (isOverlay(eventTarget) ||\n isContentEditable(eventTarget) ||\n isCollabThread(eventTarget))\n ) {\n handleCursorPosition(params.event, params.customCursor);\n hideCustomCursor(params.customCursor);\n return;\n }\n if (\n eventTarget &&\n (isFieldPathDropdown(eventTarget) || isFieldPathParent(eventTarget))\n ) {\n params.customCursor && hideCustomCursor(params.customCursor);\n showOutline();\n showHoverToolbar({\n event: params.event,\n overlayWrapper: params.overlayWrapper,\n visualBuilderContainer: params.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n if (!config?.collab.enable) {\n resetCustomCursor(params.customCursor);\n }\n removeAddInstanceButtons({\n eventTarget: params.event.target,\n visualBuilderContainer: params.visualBuilderContainer,\n overlayWrapper: params.overlayWrapper,\n });\n handleCursorPosition(params.event, params.customCursor);\n if (config?.collab.enable && config?.collab.isFeedbackMode) {\n showCustomCursor(params.customCursor);\n collabCustomCursor(params.customCursor);\n }\n return;\n }\n\n const { editableElement, fieldMetadata } = eventDetails;\n const { content_type_uid, fieldPath } = fieldMetadata;\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM &&\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.isSameNode(\n editableElement\n )\n ) {\n hideCustomCursor(params.customCursor);\n return;\n }\n\n if (params.customCursor) {\n const elementUnderCursor = document.elementFromPoint(\n params.event.clientX,\n params.event.clientY\n );\n if (elementUnderCursor) {\n if (\n elementUnderCursor.nodeName === \"A\" ||\n elementUnderCursor.nodeName === \"BUTTON\"\n ) {\n elementUnderCursor.classList.add(\n visualBuilderStyles()[\"visual-builder__no-cursor-style\"]\n );\n }\n }\n\n if (config?.collab.enable && config?.collab.isFeedbackMode) {\n collabCustomCursor(params.customCursor);\n handleCursorPosition(params.event, params.customCursor);\n showCustomCursor(params.customCursor);\n return;\n } else if (config?.collab.enable && !config?.collab.isFeedbackMode) {\n hideCustomCursor(params.customCursor);\n return;\n }\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousHoveredTargetDOM !== editableElement\n ) {\n resetCustomCursor(params.customCursor);\n removeAddInstanceButtons({\n eventTarget: params.event.target,\n visualBuilderContainer: params.visualBuilderContainer,\n overlayWrapper: params.overlayWrapper,\n });\n }\n\n if (!FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {\n generateCustomCursor({\n fieldType: \"loading\",\n customCursor: params.customCursor,\n });\n }\n\n // we can generate the cursor asynchronously\n generateCursor({\n eventDetails,\n customCursor: params.customCursor,\n });\n\n handleCursorPosition(params.event, params.customCursor);\n showCustomCursor(params.customCursor);\n }\n\n if (\n !editableElement.classList.contains(VB_EmptyBlockParentClass) &&\n !editableElement.classList.contains(\"visual-builder__empty-block\")\n ) {\n showOutline({\n editableElement,\n eventDetails,\n content_type_uid,\n fieldPath,\n fieldMetadata,\n });\n const isFocussed= VisualBuilder.VisualBuilderGlobalState.value.isFocussed;\n if(!isFocussed) {\n showHoverToolbar({\n event: params.event,\n overlayWrapper: params.overlayWrapper,\n visualBuilderContainer: params.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n }\n );\n }\n }\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousHoveredTargetDOM === editableElement\n ) {\n return;\n }\n\n VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM =\n editableElement;\n}, 10);\n\nasync function generateCursor({\n eventDetails,\n customCursor,\n}: {\n eventDetails: VisualBuilderCslpEventDetails;\n customCursor: HTMLDivElement | null;\n}) {\n if (!customCursor) return;\n const { fieldMetadata } = eventDetails;\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n fieldMetadata.content_type_uid,\n fieldMetadata.fieldPath\n );\n if (!fieldSchema) {\n return;\n }\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: fieldMetadata.entry_uid,\n contentTypeUid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n variantUid: fieldMetadata.variant,\n });\n const { isDisabled: fieldDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryAcl,\n entryWorkflowStageDetails\n );\n const fieldType = getFieldType(fieldSchema);\n generateCustomCursor({\n fieldType,\n customCursor,\n fieldDisabled,\n });\n}\n\nconst handleMouseHover = async (\n params: HandleMouseHoverParams\n): Promise<void> => await throttledMouseHover(params);\n\nexport default handleMouseHover;\n"],"mappings":"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","names":["import__","Config"]}
@@ -53,7 +53,8 @@ async function addOutline(params) {
53
53
  fieldDisabled
54
54
  } = params;
55
55
  if (!editableElement) return;
56
- addHoverOutline(editableElement, fieldDisabled);
56
+ const isVariant = !!fieldMetadata.variant;
57
+ addHoverOutline(editableElement, fieldDisabled, isVariant);
57
58
  const fieldSchema = await FieldSchemaMap.getFieldSchema(
58
59
  content_type_uid,
59
60
  fieldPath
@@ -71,7 +72,7 @@ async function addOutline(params) {
71
72
  entryAcl,
72
73
  entryWorkflowStageDetails
73
74
  );
74
- addHoverOutline(editableElement, fieldDisabled || isDisabled);
75
+ addHoverOutline(editableElement, fieldDisabled || isDisabled, isVariant);
75
76
  }
76
77
  var debouncedAddOutline = debounce(addOutline, 50, { trailing: true });
77
78
  var showOutline = (params) => debouncedAddOutline(params);
@@ -239,14 +240,16 @@ var throttledMouseHover = throttle(async (params) => {
239
240
  });
240
241
  const isFocussed = VisualBuilder.VisualBuilderGlobalState.value.isFocussed;
241
242
  if (!isFocussed) {
242
- showHoverToolbar({
243
- event: params.event,
244
- overlayWrapper: params.overlayWrapper,
245
- visualBuilderContainer: params.visualBuilderContainer,
246
- previousSelectedEditableDOM: VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM,
247
- focusedToolbar: params.focusedToolbar,
248
- resizeObserver: params.resizeObserver
249
- });
243
+ showHoverToolbar(
244
+ {
245
+ event: params.event,
246
+ overlayWrapper: params.overlayWrapper,
247
+ visualBuilderContainer: params.visualBuilderContainer,
248
+ previousSelectedEditableDOM: VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM,
249
+ focusedToolbar: params.focusedToolbar,
250
+ resizeObserver: params.resizeObserver
251
+ }
252
+ );
250
253
  }
251
254
  }
252
255
  if (VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM === editableElement) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseHover.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { getCsDataOfElement } from \"../utils/getCsDataOfElement\";\nimport { removeAddInstanceButtons } from \"../utils/multipleElementAddButton\";\nimport { generateCustomCursor } from \"../generators/generateCustomCursor\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { getFieldType } from \"../utils/getFieldType\";\n\nimport EventListenerHandlerParams from \"./types\";\nimport { VisualBuilder } from \"..\";\nimport { addHoverOutline } from \"../generators/generateHoverOutline\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport Config from \"../../configManager/configManager\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { HandleBuilderInteractionParams } from \"./mouseClick\";\nimport { appendFieldPathDropdown } from \"../generators/generateToolbar\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\n\nconst config = Config.get();\nexport interface HandleMouseHoverParams\n extends Pick<\n EventListenerHandlerParams,\n \"event\" | \"overlayWrapper\" | \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n > {\n customCursor: HTMLDivElement | null;\n}\n\ninterface AddOutlineParams {\n editableElement: Element;\n eventDetails: VisualBuilderCslpEventDetails;\n content_type_uid: string;\n fieldPath: string;\n fieldDisabled?: boolean;\n fieldMetadata: CslpData;\n}\n\nfunction resetCustomCursor(customCursor: HTMLDivElement | null): void {\n if (customCursor) {\n generateCustomCursor({\n fieldType: \"empty\",\n customCursor: customCursor,\n });\n }\n}\n\nfunction collabCustomCursor(customCursor: HTMLDivElement | null): void {\n if (!customCursor) return;\n\n generateCustomCursor({\n fieldType: \"discussion\",\n customCursor: customCursor,\n });\n}\n\nfunction handleCursorPosition(\n event: MouseEvent,\n customCursor: HTMLDivElement | null\n): void {\n if (customCursor) {\n const mouseY = event.clientY;\n const mouseX = event.clientX;\n\n customCursor.style.left = `${mouseX}px`;\n customCursor.style.top = `${mouseY}px`;\n }\n}\n\nasync function addOutline(params?: AddOutlineParams): Promise<void> {\n if (!params) {\n return;\n }\n const {\n editableElement,\n eventDetails,\n content_type_uid,\n fieldPath,\n fieldMetadata,\n fieldDisabled,\n } = params;\n if (!editableElement) return;\n addHoverOutline(editableElement as HTMLElement, fieldDisabled);\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n content_type_uid,\n fieldPath\n );\n if (!fieldSchema) return;\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: fieldMetadata.entry_uid,\n contentTypeUid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n variantUid: fieldMetadata.variant,\n });\n const { isDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryAcl,\n entryWorkflowStageDetails\n );\n addHoverOutline(editableElement, fieldDisabled || isDisabled);\n}\n\nconst debouncedAddOutline = debounce(addOutline, 50, { trailing: true });\nconst showOutline = (params?: AddOutlineParams): Promise<void> | undefined => debouncedAddOutline(params);\n\nfunction hideDefaultCursor(): void {\n if (\n document?.body &&\n !document.body.classList.contains(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n )\n )\n document.body.classList.add(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n );\n}\n\nfunction showDefaultCursor(): void {\n if (\n document?.body &&\n document.body.classList.contains(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n )\n )\n document.body.classList.remove(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n );\n}\n\nexport function hideHoverOutline(\n visualBuilderContainer: HTMLDivElement | null\n): void {\n if (!visualBuilderContainer) {\n return;\n }\n const hoverOutline = visualBuilderContainer.querySelector(\n \".visual-builder__hover-outline\"\n );\n if (!hoverOutline) {\n return;\n }\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n );\n}\n\nexport function hideCustomCursor(customCursor: HTMLDivElement | null): void {\n showDefaultCursor();\n customCursor?.classList.remove(\"visible\");\n}\n\nexport function showCustomCursor(customCursor: HTMLDivElement | null): void {\n hideDefaultCursor();\n if (\n config.collab.enable &&\n (!config.collab.isFeedbackMode || config.collab.pauseFeedback)\n )\n return;\n customCursor?.classList.add(\"visible\");\n}\n\nconst debouncedRenderHoverToolbar = debounce(async (params: HandleBuilderInteractionParams) => {\n const eventDetails = getCsDataOfElement(params.event);\n if (\n !eventDetails ||\n !params.overlayWrapper ||\n !params.visualBuilderContainer ||\n !params.focusedToolbar\n ) {\n return;\n }\n\n appendFieldPathDropdown(eventDetails, params.focusedToolbar, {\n isHover: true\n });\n}, 50, { trailing: true });\n\nexport const showHoverToolbar = async (params: HandleBuilderInteractionParams) => await debouncedRenderHoverToolbar(params);\n\nfunction isOverlay(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__overlay\");\n}\n\nfunction isContentEditable(target: HTMLElement): boolean {\n if (target.hasAttribute(\"contenteditable\"))\n return target.getAttribute(\"contenteditable\") === \"true\";\n return false;\n}\n\nfunction isFieldPathDropdown(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper\") || target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper__current-field\");\n}\n\nfunction isFieldPathParent(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper__parent-field\");\n}\n\nconst throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {\n const eventDetails = getCsDataOfElement(params.event);\n const eventTarget = params.event.target as HTMLElement | null;\n\n if (config?.collab.enable && config?.collab.pauseFeedback) {\n hideCustomCursor(params.customCursor);\n return;\n }\n if (!eventDetails) {\n if (\n eventTarget &&\n (isOverlay(eventTarget) ||\n isContentEditable(eventTarget) ||\n isCollabThread(eventTarget))\n ) {\n handleCursorPosition(params.event, params.customCursor);\n hideCustomCursor(params.customCursor);\n return;\n }\n if (\n eventTarget &&\n (isFieldPathDropdown(eventTarget) || isFieldPathParent(eventTarget))\n ) {\n params.customCursor && hideCustomCursor(params.customCursor);\n showOutline();\n showHoverToolbar({\n event: params.event,\n overlayWrapper: params.overlayWrapper,\n visualBuilderContainer: params.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n if (!config?.collab.enable) {\n resetCustomCursor(params.customCursor);\n }\n removeAddInstanceButtons({\n eventTarget: params.event.target,\n visualBuilderContainer: params.visualBuilderContainer,\n overlayWrapper: params.overlayWrapper,\n });\n handleCursorPosition(params.event, params.customCursor);\n if (config?.collab.enable && config?.collab.isFeedbackMode) {\n showCustomCursor(params.customCursor);\n collabCustomCursor(params.customCursor);\n }\n return;\n }\n\n const { editableElement, fieldMetadata } = eventDetails;\n const { content_type_uid, fieldPath } = fieldMetadata;\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM &&\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.isSameNode(\n editableElement\n )\n ) {\n hideCustomCursor(params.customCursor);\n return;\n }\n\n if (params.customCursor) {\n const elementUnderCursor = document.elementFromPoint(\n params.event.clientX,\n params.event.clientY\n );\n if (elementUnderCursor) {\n if (\n elementUnderCursor.nodeName === \"A\" ||\n elementUnderCursor.nodeName === \"BUTTON\"\n ) {\n elementUnderCursor.classList.add(\n visualBuilderStyles()[\"visual-builder__no-cursor-style\"]\n );\n }\n }\n\n if (config?.collab.enable && config?.collab.isFeedbackMode) {\n collabCustomCursor(params.customCursor);\n handleCursorPosition(params.event, params.customCursor);\n showCustomCursor(params.customCursor);\n return;\n } else if (config?.collab.enable && !config?.collab.isFeedbackMode) {\n hideCustomCursor(params.customCursor);\n return;\n }\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousHoveredTargetDOM !== editableElement\n ) {\n resetCustomCursor(params.customCursor);\n removeAddInstanceButtons({\n eventTarget: params.event.target,\n visualBuilderContainer: params.visualBuilderContainer,\n overlayWrapper: params.overlayWrapper,\n });\n }\n\n if (!FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {\n generateCustomCursor({\n fieldType: \"loading\",\n customCursor: params.customCursor,\n });\n }\n\n // we can generate the cursor asynchronously\n generateCursor({\n eventDetails,\n customCursor: params.customCursor,\n });\n\n handleCursorPosition(params.event, params.customCursor);\n showCustomCursor(params.customCursor);\n }\n\n if (\n !editableElement.classList.contains(VB_EmptyBlockParentClass) &&\n !editableElement.classList.contains(\"visual-builder__empty-block\")\n ) {\n showOutline({\n editableElement,\n eventDetails,\n content_type_uid,\n fieldPath,\n fieldMetadata,\n });\n const isFocussed= VisualBuilder.VisualBuilderGlobalState.value.isFocussed;\n if(!isFocussed) {\n showHoverToolbar({\n event: params.event,\n overlayWrapper: params.overlayWrapper,\n visualBuilderContainer: params.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n }\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousHoveredTargetDOM === editableElement\n ) {\n return;\n }\n\n VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM =\n editableElement;\n}, 10);\n\nasync function generateCursor({\n eventDetails,\n customCursor,\n}: {\n eventDetails: VisualBuilderCslpEventDetails;\n customCursor: HTMLDivElement | null;\n}) {\n if (!customCursor) return;\n const { fieldMetadata } = eventDetails;\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n fieldMetadata.content_type_uid,\n fieldMetadata.fieldPath\n );\n if (!fieldSchema) {\n return;\n }\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: fieldMetadata.entry_uid,\n contentTypeUid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n variantUid: fieldMetadata.variant,\n });\n const { isDisabled: fieldDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryAcl,\n entryWorkflowStageDetails\n );\n const fieldType = getFieldType(fieldSchema);\n generateCustomCursor({\n fieldType,\n customCursor,\n fieldDisabled,\n });\n}\n\nconst handleMouseHover = async (\n params: HandleMouseHoverParams\n): Promise<void> => await throttledMouseHover(params);\n\nexport default handleMouseHover;\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseHover.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { getCsDataOfElement } from \"../utils/getCsDataOfElement\";\nimport { removeAddInstanceButtons } from \"../utils/multipleElementAddButton\";\nimport { generateCustomCursor } from \"../generators/generateCustomCursor\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { getFieldType } from \"../utils/getFieldType\";\n\nimport EventListenerHandlerParams from \"./types\";\nimport { VisualBuilder } from \"..\";\nimport { addHoverOutline } from \"../generators/generateHoverOutline\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\nimport Config from \"../../configManager/configManager\";\nimport { isCollabThread } from \"../generators/generateThread\";\nimport { HandleBuilderInteractionParams } from \"./mouseClick\";\nimport { appendFieldPathDropdown } from \"../generators/generateToolbar\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { fetchEntryPermissionsAndStageDetails } from \"../utils/fetchEntryPermissionsAndStageDetails\";\n\nconst config = Config.get();\nexport interface HandleMouseHoverParams\n extends Pick<\n EventListenerHandlerParams,\n \"event\" | \"overlayWrapper\" | \"visualBuilderContainer\" | \"focusedToolbar\" | \"resizeObserver\"\n > {\n customCursor: HTMLDivElement | null;\n}\n\ninterface AddOutlineParams {\n editableElement: Element;\n eventDetails: VisualBuilderCslpEventDetails;\n content_type_uid: string;\n fieldPath: string;\n fieldDisabled?: boolean;\n fieldMetadata: CslpData;\n}\n\nfunction resetCustomCursor(customCursor: HTMLDivElement | null): void {\n if (customCursor) {\n generateCustomCursor({\n fieldType: \"empty\",\n customCursor: customCursor,\n });\n }\n}\n\nfunction collabCustomCursor(customCursor: HTMLDivElement | null): void {\n if (!customCursor) return;\n\n generateCustomCursor({\n fieldType: \"discussion\",\n customCursor: customCursor,\n });\n}\n\nfunction handleCursorPosition(\n event: MouseEvent,\n customCursor: HTMLDivElement | null\n): void {\n if (customCursor) {\n const mouseY = event.clientY;\n const mouseX = event.clientX;\n\n customCursor.style.left = `${mouseX}px`;\n customCursor.style.top = `${mouseY}px`;\n }\n}\n\nasync function addOutline(params?: AddOutlineParams): Promise<void> {\n if (!params) {\n return;\n }\n const {\n editableElement,\n eventDetails,\n content_type_uid,\n fieldPath,\n fieldMetadata,\n fieldDisabled,\n } = params;\n if (!editableElement) return;\n const isVariant = !!fieldMetadata.variant;\n addHoverOutline(editableElement as HTMLElement, fieldDisabled, isVariant);\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n content_type_uid,\n fieldPath\n );\n if (!fieldSchema) return;\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: fieldMetadata.entry_uid,\n contentTypeUid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n variantUid: fieldMetadata.variant,\n });\n const { isDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryAcl,\n entryWorkflowStageDetails\n );\n addHoverOutline(editableElement, fieldDisabled || isDisabled, isVariant);\n}\n\nconst debouncedAddOutline = debounce(addOutline, 50, { trailing: true });\nconst showOutline = (params?: AddOutlineParams): Promise<void> | undefined => debouncedAddOutline(params);\n\nfunction hideDefaultCursor(): void {\n if (\n document?.body &&\n !document.body.classList.contains(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n )\n )\n document.body.classList.add(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n );\n}\n\nfunction showDefaultCursor(): void {\n if (\n document?.body &&\n document.body.classList.contains(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n )\n )\n document.body.classList.remove(\n visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n );\n}\n\nexport function hideHoverOutline(\n visualBuilderContainer: HTMLDivElement | null\n): void {\n if (!visualBuilderContainer) {\n return;\n }\n const hoverOutline = visualBuilderContainer.querySelector(\n \".visual-builder__hover-outline\"\n );\n if (!hoverOutline) {\n return;\n }\n hoverOutline.classList.add(\n visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n );\n}\n\nexport function hideCustomCursor(customCursor: HTMLDivElement | null): void {\n showDefaultCursor();\n customCursor?.classList.remove(\"visible\");\n}\n\nexport function showCustomCursor(customCursor: HTMLDivElement | null): void {\n hideDefaultCursor();\n if (\n config.collab.enable &&\n (!config.collab.isFeedbackMode || config.collab.pauseFeedback)\n )\n return;\n customCursor?.classList.add(\"visible\");\n}\n\nconst debouncedRenderHoverToolbar = debounce(async (params: HandleBuilderInteractionParams) => {\n const eventDetails = getCsDataOfElement(params.event);\n if (\n !eventDetails ||\n !params.overlayWrapper ||\n !params.visualBuilderContainer ||\n !params.focusedToolbar\n ) {\n return;\n }\n\n appendFieldPathDropdown(eventDetails, params.focusedToolbar, {\n isHover: true\n });\n}, 50, { trailing: true });\n\nexport const showHoverToolbar = async (params: HandleBuilderInteractionParams) => await debouncedRenderHoverToolbar(params);\n\nfunction isOverlay(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__overlay\");\n}\n\nfunction isContentEditable(target: HTMLElement): boolean {\n if (target.hasAttribute(\"contenteditable\"))\n return target.getAttribute(\"contenteditable\") === \"true\";\n return false;\n}\n\nfunction isFieldPathDropdown(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper\") || target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper__current-field\");\n}\n\nfunction isFieldPathParent(target: HTMLElement): boolean {\n return target.classList.contains(\"visual-builder__focused-toolbar__field-label-wrapper__parent-field\");\n}\n\nconst throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {\n const eventDetails = getCsDataOfElement(params.event);\n const eventTarget = params.event.target as HTMLElement | null;\n\n if (config?.collab.enable && config?.collab.pauseFeedback) {\n hideCustomCursor(params.customCursor);\n return;\n }\n if (!eventDetails) {\n if (\n eventTarget &&\n (isOverlay(eventTarget) ||\n isContentEditable(eventTarget) ||\n isCollabThread(eventTarget))\n ) {\n handleCursorPosition(params.event, params.customCursor);\n hideCustomCursor(params.customCursor);\n return;\n }\n if (\n eventTarget &&\n (isFieldPathDropdown(eventTarget) || isFieldPathParent(eventTarget))\n ) {\n params.customCursor && hideCustomCursor(params.customCursor);\n showOutline();\n showHoverToolbar({\n event: params.event,\n overlayWrapper: params.overlayWrapper,\n visualBuilderContainer: params.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n });\n }\n if (!config?.collab.enable) {\n resetCustomCursor(params.customCursor);\n }\n removeAddInstanceButtons({\n eventTarget: params.event.target,\n visualBuilderContainer: params.visualBuilderContainer,\n overlayWrapper: params.overlayWrapper,\n });\n handleCursorPosition(params.event, params.customCursor);\n if (config?.collab.enable && config?.collab.isFeedbackMode) {\n showCustomCursor(params.customCursor);\n collabCustomCursor(params.customCursor);\n }\n return;\n }\n\n const { editableElement, fieldMetadata } = eventDetails;\n const { content_type_uid, fieldPath } = fieldMetadata;\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM &&\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.isSameNode(\n editableElement\n )\n ) {\n hideCustomCursor(params.customCursor);\n return;\n }\n\n if (params.customCursor) {\n const elementUnderCursor = document.elementFromPoint(\n params.event.clientX,\n params.event.clientY\n );\n if (elementUnderCursor) {\n if (\n elementUnderCursor.nodeName === \"A\" ||\n elementUnderCursor.nodeName === \"BUTTON\"\n ) {\n elementUnderCursor.classList.add(\n visualBuilderStyles()[\"visual-builder__no-cursor-style\"]\n );\n }\n }\n\n if (config?.collab.enable && config?.collab.isFeedbackMode) {\n collabCustomCursor(params.customCursor);\n handleCursorPosition(params.event, params.customCursor);\n showCustomCursor(params.customCursor);\n return;\n } else if (config?.collab.enable && !config?.collab.isFeedbackMode) {\n hideCustomCursor(params.customCursor);\n return;\n }\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousHoveredTargetDOM !== editableElement\n ) {\n resetCustomCursor(params.customCursor);\n removeAddInstanceButtons({\n eventTarget: params.event.target,\n visualBuilderContainer: params.visualBuilderContainer,\n overlayWrapper: params.overlayWrapper,\n });\n }\n\n if (!FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {\n generateCustomCursor({\n fieldType: \"loading\",\n customCursor: params.customCursor,\n });\n }\n\n // we can generate the cursor asynchronously\n generateCursor({\n eventDetails,\n customCursor: params.customCursor,\n });\n\n handleCursorPosition(params.event, params.customCursor);\n showCustomCursor(params.customCursor);\n }\n\n if (\n !editableElement.classList.contains(VB_EmptyBlockParentClass) &&\n !editableElement.classList.contains(\"visual-builder__empty-block\")\n ) {\n showOutline({\n editableElement,\n eventDetails,\n content_type_uid,\n fieldPath,\n fieldMetadata,\n });\n const isFocussed= VisualBuilder.VisualBuilderGlobalState.value.isFocussed;\n if(!isFocussed) {\n showHoverToolbar({\n event: params.event,\n overlayWrapper: params.overlayWrapper,\n visualBuilderContainer: params.visualBuilderContainer,\n previousSelectedEditableDOM:\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM,\n focusedToolbar: params.focusedToolbar,\n resizeObserver: params.resizeObserver,\n }\n );\n }\n }\n\n if (\n VisualBuilder.VisualBuilderGlobalState.value\n .previousHoveredTargetDOM === editableElement\n ) {\n return;\n }\n\n VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM =\n editableElement;\n}, 10);\n\nasync function generateCursor({\n eventDetails,\n customCursor,\n}: {\n eventDetails: VisualBuilderCslpEventDetails;\n customCursor: HTMLDivElement | null;\n}) {\n if (!customCursor) return;\n const { fieldMetadata } = eventDetails;\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n fieldMetadata.content_type_uid,\n fieldMetadata.fieldPath\n );\n if (!fieldSchema) {\n return;\n }\n const { acl: entryAcl, workflowStage: entryWorkflowStageDetails } =\n await fetchEntryPermissionsAndStageDetails({\n entryUid: fieldMetadata.entry_uid,\n contentTypeUid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n variantUid: fieldMetadata.variant,\n });\n const { isDisabled: fieldDisabled } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryAcl,\n entryWorkflowStageDetails\n );\n const fieldType = getFieldType(fieldSchema);\n generateCustomCursor({\n fieldType,\n customCursor,\n fieldDisabled,\n });\n}\n\nconst handleMouseHover = async (\n params: HandleMouseHoverParams\n): Promise<void> => await throttledMouseHover(params);\n\nexport default handleMouseHover;\n"],"mappings":"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","names":[]}
@@ -48,7 +48,8 @@ function enableInlineEditing({
48
48
  actualEditableField.addEventListener("paste", import_pasteAsPlainText.pasteAsPlainText);
49
49
  }
50
50
  const expectedTextContent = expectedFieldData;
51
- if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement)) {
51
+ const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
52
+ if (expectedTextContent && textContent !== expectedTextContent || (0, import_generatePseudoEditableField.isEllipsisActive)(editableElement) || isFieldLastEdited) {
52
53
  const pseudoEditableField = (0, import_generatePseudoEditableField.generatePseudoEditableElement)(
53
54
  { editableElement },
54
55
  { textContent: expectedFieldData }
@@ -84,6 +85,7 @@ function enableInlineEditing({
84
85
  actualEditableField.setAttribute("contenteditable", "true");
85
86
  actualEditableField.addEventListener("input", import_handleFieldMouseDown.handleFieldInput);
86
87
  actualEditableField.addEventListener("keydown", import_handleFieldMouseDown.handleFieldKeyDown);
88
+ editableElement.setAttribute("data-cs-last-edited", "true");
87
89
  actualEditableField.focus();
88
90
  return;
89
91
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData }\n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,GACjD;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n \n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n \n const isFieldLastEdited = document.querySelector(\"[data-cs-last-edited]\") === editableElement;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement) ||\n isFieldLastEdited\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData } \n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n\n editableElement.setAttribute(\"data-cs-last-edited\", \"true\");\n\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAGjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAE5B,QAAM,oBAAoB,SAAS,cAAc,uBAAuB,MAAM;AAC9E,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,KAC/C,mBACF;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,kBAAgB,aAAa,uBAAuB,MAAM;AAG1D,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
@@ -29,7 +29,8 @@ function enableInlineEditing({
29
29
  actualEditableField.addEventListener("paste", pasteAsPlainText);
30
30
  }
31
31
  const expectedTextContent = expectedFieldData;
32
- if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement)) {
32
+ const isFieldLastEdited = document.querySelector("[data-cs-last-edited]") === editableElement;
33
+ if (expectedTextContent && textContent !== expectedTextContent || isEllipsisActive(editableElement) || isFieldLastEdited) {
33
34
  const pseudoEditableField = generatePseudoEditableElement(
34
35
  { editableElement },
35
36
  { textContent: expectedFieldData }
@@ -65,6 +66,7 @@ function enableInlineEditing({
65
66
  actualEditableField.setAttribute("contenteditable", "true");
66
67
  actualEditableField.addEventListener("input", handleFieldInput);
67
68
  actualEditableField.addEventListener("keydown", handleFieldKeyDown);
69
+ editableElement.setAttribute("data-cs-last-edited", "true");
68
70
  actualEditableField.focus();
69
71
  return;
70
72
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement)\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData }\n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,+CAA+C;AACxD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,qBAA+C;AACxD,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,gBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,cAAc,WAAW;AACvC,kBAAc,sBAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,gBAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,GACjD;AAEE,UAAM,sBAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,cAAc;AAC5B,0BAAoB,iBAAiB,SAAS,gBAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,uBAAuB,SAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0BAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,kBAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n isEllipsisActive,\n generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n expectedFieldData,\n editableElement,\n fieldType,\n elements,\n}: {\n expectedFieldData: any;\n editableElement: HTMLElement;\n fieldType: FieldDataType;\n elements: VisualBuilderEditContext;\n}) {\n const { visualBuilderContainer, resizeObserver } = elements;\n let actualEditableField = editableElement as HTMLElement;\n\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n actualEditableField?.innerText;\n\n const elementComputedDisplay =\n window.getComputedStyle(actualEditableField).display;\n\n \n let textContent =\n (editableElement as HTMLElement).innerText ||\n editableElement.textContent ||\n \"\";\n\n if (fieldType === FieldDataType.MULTILINE) {\n textContent = getMultilinePlaintext(actualEditableField);\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n }\n const expectedTextContent = expectedFieldData;\n \n const isFieldLastEdited = document.querySelector(\"[data-cs-last-edited]\") === editableElement;\n if (\n (expectedTextContent && textContent !== expectedTextContent) ||\n isEllipsisActive(editableElement as HTMLElement) ||\n isFieldLastEdited\n ) {\n // TODO: Testing will be done in the E2E.\n const pseudoEditableField = generatePseudoEditableElement(\n { editableElement: editableElement as HTMLElement },\n { textContent: expectedFieldData } \n );\n\n (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n // set field type attribute to the pseudo editable field\n // ensures proper keydown handling similar to the actual editable field\n pseudoEditableField.setAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n fieldType\n );\n visualBuilderContainer.appendChild(pseudoEditableField);\n actualEditableField = pseudoEditableField;\n\n if (fieldType === FieldDataType.MULTILINE)\n actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n // we will unobserve this in hideOverlay\n elements.resizeObserver.observe(pseudoEditableField);\n } else if (elementComputedDisplay === \"inline\") {\n // if the editable field is inline\n const onInlineElementInput = throttle(() => {\n const overlayWrapper = visualBuilderContainer.querySelector(\n \".visual-builder__overlay__wrapper\"\n ) as HTMLDivElement;\n const focusedToolbar = visualBuilderContainer.querySelector(\n \".visual-builder__focused-toolbar\"\n ) as HTMLDivElement;\n updateFocussedState({\n editableElement: actualEditableField,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n });\n }, 200);\n actualEditableField.addEventListener(\"input\", onInlineElementInput);\n }\n\n actualEditableField.setAttribute(\"contenteditable\", \"true\");\n actualEditableField.addEventListener(\"input\", handleFieldInput);\n actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n\n editableElement.setAttribute(\"data-cs-last-edited\", \"true\");\n\n // focus on the contenteditable element to start accepting input\n actualEditableField.focus();\n\n return;\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,+CAA+C;AACxD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,qBAA+C;AACxD,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,gBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAGjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,cAAc,WAAW;AACvC,kBAAc,sBAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,gBAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAE5B,QAAM,oBAAoB,SAAS,cAAc,uBAAuB,MAAM;AAC9E,MACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,KAC/C,mBACF;AAEE,UAAM,sBAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,cAAc;AAC5B,0BAAoB,iBAAiB,SAAS,gBAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,uBAAuB,SAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0BAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,kBAAkB;AAElE,kBAAgB,aAAa,uBAAuB,MAAM;AAG1D,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}
@@ -37,6 +37,11 @@ function handleFieldInput(e) {
37
37
  const fieldType = targetElement.getAttribute(
38
38
  import_constants.VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
39
39
  );
40
+ const previousLastEditedElement = document.querySelector("[data-cs-last-edited]");
41
+ if (previousLastEditedElement !== targetElement) {
42
+ previousLastEditedElement?.removeAttribute("data-cs-last-edited");
43
+ targetElement.setAttribute("data-cs-last-edited", "true");
44
+ }
40
45
  if (event.type === "input" && import_constants.ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
41
46
  if (!import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput) {
42
47
  import__.VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput = true;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,6BAA+B;AAC/B,uBAIO;AACP,mBAA8B;AAC9B,yBAA+C;AAC/C,iCAAoC;AACpC,eAA8B;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,+CAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,uBAAc,yBAAyB,MACnC,yBACP;AACE,6BAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,yBAAqB,2BAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,+CAAe;AAAA,MACX;AAAA,MACA,WAAW,kDAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,2BAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,2BAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wDAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,mCAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n const previousLastEditedElement = document.querySelector(\"[data-cs-last-edited]\");\n if (previousLastEditedElement !== targetElement) {\n previousLastEditedElement?.removeAttribute(\"data-cs-last-edited\");\n targetElement.setAttribute(\"data-cs-last-edited\", \"true\");\n }\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":"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","names":[]}
@@ -18,6 +18,11 @@ function handleFieldInput(e) {
18
18
  const fieldType = targetElement.getAttribute(
19
19
  VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY
20
20
  );
21
+ const previousLastEditedElement = document.querySelector("[data-cs-last-edited]");
22
+ if (previousLastEditedElement !== targetElement) {
23
+ previousLastEditedElement?.removeAttribute("data-cs-last-edited");
24
+ targetElement.setAttribute("data-cs-last-edited", "true");
25
+ }
21
26
  if (event.type === "input" && ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) {
22
27
  if (!VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput) {
23
28
  VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput = true;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,qBAAqB;AAC9B,SAAS,sCAAsC;AAC/C,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAEvB,SAAS,iBAAiB,GAAgB;AAC7C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AACA,MACI,MAAM,SAAS,WACf,8BAA8B,SAAS,SAA0B,GACnE;AACE,QACI,CAAC,cAAc,yBAAyB,MACnC,yBACP;AACE,oBAAc,yBAAyB,MAAM,0BACzC;AAAA,IACR;AACA,uBAAmB;AAAA,EACvB;AACJ;AACA,IAAM,qBAAqB,SAAS,MAAM;AACtC,MAAI;AACA,UAAM,yBAAyB,SAAS;AAAA,MACpC;AAAA,IACJ;AACA,QAAI,CAAC,uBAAwB;AAC7B,mBAAe;AAAA,MACX;AAAA,MACA,WAAW,+BAA+B;AAAA,IAC9C,CAAC;AAAA,EACL,SAAS,OAAO;AACZ,YAAQ,MAAM,+BAA+B,KAAK;AAAA,EACtD;AACJ,GAAG,GAAG;AAEC,SAAS,mBAAmB,GAAgB;AAC/C,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC5B,QAAM,YAAY,cAAc;AAAA,IAC5B;AAAA,EACJ;AAEA,MACI,MACK,aAAa,EACb;AAAA,IACG,CAAC,YACG,mBAAmB,WAAW,QAAQ,YAAY;AAAA,EAC1D,GACN;AAEE,0BAAsB,KAAK;AAAA,EAC/B;AACA,MAAI,cAAc,cAAc,QAAQ;AACpC,8BAA0B,KAAK;AAAA,EACnC,WAAW,cAAc,cAAc,YAAY;AAC/C,iCAA6B,KAAK;AAAA,EACtC;AACJ;AAKA,SAAS,sBAAsB,GAAkB;AAC7C,MAAI,EAAE,SAAS,WAAW,EAAE,QAAQ;AAChC,MAAE,eAAe;AACjB,wBAAoB,EAAE,MAAqB;AAC3C,uBAAmB;AAAA,EACvB;AACJ;AAEA,SAAS,6BAA6B,GAAkB;AACpD,MAAI,EAAE,SAAS,SAAS;AACpB,MAAE,eAAe;AAAA,EACrB;AACJ;AAEA,SAAS,0BAA0B,OAA4B;AAC3D,QAAM,gBAAgB,MAAM;AAE5B,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AAEA,MACI,MAAM,WACN,MAAM,WACN,MAAM,UACN,YAAY,SAAS,MAAM,IAAI,GACjC;AAEE;AAAA,EACJ;AAEA,MAAI,MAAM,KAAK,SAAS,OAAO,GAAG;AAC9B;AAAA,EACJ;AAEA,QAAM,8BAA8B,CAAC,KAAK,KAAK,KAAK,GAAG;AAEvD,MAAI,CAAC,4BAA4B,SAAS,MAAM,GAAG,GAAG;AAClD,UAAM,eAAe;AACrB;AAAA,EACJ;AAEA,QAAM,YAAY;AAAA,IACd,aAAa,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,eAAe;AAAA,IACjE,WAAW,OAAO,aAAa,GAAG,WAAW,CAAC,EAAE,aAAa;AAAA,EACjE;AAEA,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,mBAAmB,cAAc,MAAM,EAAE;AAC/C,mBAAiB;AAAA,IACb,UAAU;AAAA,IACV,UAAU,YAAY,UAAU;AAAA,IAChC,MAAM;AAAA,EACV;AACA,QAAM,eAAe,iBAAiB,KAAK,EAAE;AAE7C,MAAI,CAAC,kBAAkB,KAAK,YAAY,GAAG;AACvC,UAAM,eAAe;AAAA,EACzB;AACJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n ALLOWED_INLINE_EDITABLE_FIELD,\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n const event = e as InputEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n const previousLastEditedElement = document.querySelector(\"[data-cs-last-edited]\");\n if (previousLastEditedElement !== targetElement) {\n previousLastEditedElement?.removeAttribute(\"data-cs-last-edited\");\n targetElement.setAttribute(\"data-cs-last-edited\", \"true\");\n }\n if (\n event.type === \"input\" &&\n ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n ) {\n if (\n !VisualBuilder.VisualBuilderGlobalState.value\n .focusFieldReceivedInput\n ) {\n VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n true;\n }\n throttledFieldSync();\n }\n}\nconst throttledFieldSync = throttle(() => {\n try {\n const visualBuilderContainer = document.querySelector(\n \".visual-builder__container\"\n ) as HTMLElement;\n if (!visualBuilderContainer) return;\n sendFieldEvent({\n visualBuilderContainer,\n eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n });\n } catch (error) {\n console.error(\"Error in throttledFieldSync\", error);\n }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n const event = e as KeyboardEvent;\n const targetElement = event.target as HTMLElement;\n const fieldType = targetElement.getAttribute(\n VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n ) as FieldDataType | null;\n\n if (\n event\n .composedPath()\n .some(\n (element) =>\n element instanceof Element && element.tagName === \"BUTTON\"\n )\n ) {\n // custom space handling when a button is involved\n handleKeyDownOnButton(event);\n }\n if (fieldType === FieldDataType.NUMBER) {\n handleNumericFieldKeyDown(event);\n } else if (fieldType === FieldDataType.SINGLELINE) {\n handleSingleLineFieldKeyDown(event);\n }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n if (e.code === \"Space\" && e.target) {\n e.preventDefault();\n insertSpaceAtCursor(e.target as HTMLElement);\n throttledFieldSync();\n }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n if (e.code === \"Enter\") {\n e.preventDefault();\n }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n const targetElement = event.target as HTMLElement;\n\n const allowedKeys = [\n \"Backspace\",\n \"Tab\",\n \"Enter\",\n \"End\",\n \"Home\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Delete\",\n ];\n\n if (\n event.ctrlKey ||\n event.metaKey ||\n event.altKey ||\n allowedKeys.includes(event.code)\n ) {\n // Allow Ctrl, Cmd, Alt, and special keys\n return;\n }\n\n if (event.code.includes(\"Digit\")) {\n return;\n }\n\n const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n if (!nonNumericAllowedCharacters.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n const selection = {\n startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n };\n\n const existingInput = targetElement.textContent || \"\";\n const currentOutputArr = existingInput.split(\"\");\n currentOutputArr.splice(\n selection.startOffset,\n selection.endOffset - selection.startOffset,\n event.key\n );\n const currentInput = currentOutputArr.join(\"\");\n\n if (!numericInputRegex.test(currentInput)) {\n event.preventDefault();\n }\n}\n"],"mappings":"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","names":[]}
@@ -39,7 +39,7 @@ var DisableReason = {
39
39
  ReadOnly: "You have only read access to this field",
40
40
  LocalizedEntry: "Editing this field is restricted in localized entries",
41
41
  UnlinkedVariant: "This field is not editable as it is not linked to the selected variant",
42
- AudienceMode: "Open an Experience from Audience widget to start editing",
42
+ AudienceMode: "To edit an experience, open the Audience widget and click the Edit icon.",
43
43
  DisabledVariant: "This field is not editable as it doesn't match the selected variant",
44
44
  UnlocalizedVariant: "This field is not editable as it is not localized",
45
45
  None: "",