@creopse/react 0.0.6 → 0.0.8

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.
package/dist/index.cjs CHANGED
@@ -12147,6 +12147,23 @@ hooks.defineLocale("fr", {
12147
12147
  // The week that contains Jan 4th is the first week of the year.
12148
12148
  }
12149
12149
  });
12150
+ var ItemCreatorType;
12151
+ (function(ItemCreatorType2) {
12152
+ ItemCreatorType2["USER"] = "user";
12153
+ ItemCreatorType2["ADMIN"] = "admin";
12154
+ ItemCreatorType2["SYSTEM"] = "system";
12155
+ })(ItemCreatorType || (ItemCreatorType = {}));
12156
+ var AccessScope;
12157
+ (function(AccessScope2) {
12158
+ AccessScope2["INTERNAL"] = "internal";
12159
+ AccessScope2["USER_EDITABLE"] = "user-editable";
12160
+ })(AccessScope || (AccessScope = {}));
12161
+ var Intent;
12162
+ (function(Intent2) {
12163
+ Intent2["EDITORIAL_CONTENT"] = "editorial-content";
12164
+ Intent2["USER_DATA"] = "user-data";
12165
+ Intent2["SYSTEM_DATA"] = "system-data";
12166
+ })(Intent || (Intent = {}));
12150
12167
  var AccountStatus;
12151
12168
  (function(AccountStatus2) {
12152
12169
  AccountStatus2[AccountStatus2["DISABLED"] = 0] = "DISABLED";
@@ -12178,6 +12195,15 @@ var ContentType;
12178
12195
  ContentType2["NEWS_ARTICLE"] = "news-article";
12179
12196
  ContentType2["CONTENT_MODEL"] = "content-model";
12180
12197
  })(ContentType || (ContentType = {}));
12198
+ var EditorMessageType;
12199
+ (function(EditorMessageType2) {
12200
+ EditorMessageType2["RELOAD"] = "reload";
12201
+ EditorMessageType2["RELOAD_COMPLETE"] = "reload-complete";
12202
+ EditorMessageType2["ENABLE_EDITION_MODE"] = "enable-edition-mode";
12203
+ EditorMessageType2["DESELECT_ALL_SECTIONS"] = "deselect-all-sections";
12204
+ EditorMessageType2["SELECT_PREVIEW_SECTION"] = "select-preview-section";
12205
+ EditorMessageType2["SELECT_SIDEBAR_SECTION"] = "select-sidebar-section";
12206
+ })(EditorMessageType || (EditorMessageType = {}));
12181
12207
  var MenuItemTargetType;
12182
12208
  (function(MenuItemTargetType2) {
12183
12209
  MenuItemTargetType2["EXTERNAL_LINK"] = "external-link";
@@ -12245,6 +12271,94 @@ const RootContainer = ({
12245
12271
  }, 1e3);
12246
12272
  return () => clearTimeout(timeout);
12247
12273
  }, [page, sections]);
12274
+ const sectionsStateRef = React.useRef({});
12275
+ const sectionsRef = React.useRef(sections);
12276
+ React.useEffect(() => {
12277
+ const deselectAllSections = () => {
12278
+ Object.keys(sectionsStateRef.current).forEach((key) => {
12279
+ sectionsStateRef.current[key].isActive = false;
12280
+ const element = document.getElementById(key);
12281
+ if (element) {
12282
+ element.style.border = "none";
12283
+ element.style.boxShadow = "none";
12284
+ }
12285
+ });
12286
+ };
12287
+ const handleMessage = (event) => {
12288
+ if (event.data?.type === EditorMessageType.RELOAD) {
12289
+ sessionStorage.setItem("shouldNotifyReload", "1");
12290
+ sessionStorage.setItem("replyOrigin", event.origin);
12291
+ window.location.reload();
12292
+ } else if (event.data?.type === EditorMessageType.ENABLE_EDITION_MODE) {
12293
+ const primaryColor = event.data?.primaryColor ?? "blue";
12294
+ sessionStorage.setItem("replyOrigin", event.origin);
12295
+ sessionStorage.setItem("primaryColor", primaryColor);
12296
+ sectionsRef.current?.forEach((section) => {
12297
+ if (section.slug && section.pivot?.linkId) {
12298
+ const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
12299
+ const sectionElement = document.getElementById(sectionElementId);
12300
+ if (sectionElement) {
12301
+ sectionsStateRef.current[sectionElementId] = {
12302
+ element: sectionElement,
12303
+ clickCount: 0,
12304
+ isActive: false
12305
+ };
12306
+ const handleClick = function() {
12307
+ deselectAllSections();
12308
+ sectionsStateRef.current[this.id].clickCount++;
12309
+ sectionsStateRef.current[this.id].isActive = true;
12310
+ this.style.border = `5px solid ${primaryColor}`;
12311
+ this.style.boxShadow = `0 0 10px ${primaryColor}`;
12312
+ window.parent.postMessage(
12313
+ {
12314
+ type: EditorMessageType.SELECT_PREVIEW_SECTION,
12315
+ slug: section.slug,
12316
+ linkId: section.pivot?.linkId
12317
+ },
12318
+ event.origin
12319
+ );
12320
+ };
12321
+ sectionElement.addEventListener("click", handleClick);
12322
+ sectionElement.style.cursor = "pointer";
12323
+ sectionElement.style.transition = "all 0.3s ease";
12324
+ }
12325
+ }
12326
+ });
12327
+ } else if (event.data?.type === EditorMessageType.DESELECT_ALL_SECTIONS) {
12328
+ deselectAllSections();
12329
+ } else if (event.data?.type === EditorMessageType.SELECT_SIDEBAR_SECTION) {
12330
+ setTimeout(() => {
12331
+ if (sectionsRef.current?.find(
12332
+ (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
12333
+ )) {
12334
+ slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
12335
+ }
12336
+ }, 1e3);
12337
+ const elementId = `${event.data?.slug}__${event.data?.linkId}-container`;
12338
+ const element = document.getElementById(elementId);
12339
+ if (element) {
12340
+ deselectAllSections();
12341
+ sectionsStateRef.current[elementId].clickCount++;
12342
+ sectionsStateRef.current[elementId].isActive = true;
12343
+ element.style.border = `5px solid ${sessionStorage.getItem("primaryColor")}`;
12344
+ element.style.boxShadow = `0 0 10px ${sessionStorage.getItem("primaryColor")}`;
12345
+ }
12346
+ }
12347
+ };
12348
+ window.addEventListener("message", handleMessage);
12349
+ if (sessionStorage.getItem("shouldNotifyReload") === "1") {
12350
+ const origin = sessionStorage.getItem("replyOrigin") || "*";
12351
+ window.parent.postMessage(
12352
+ { type: EditorMessageType.RELOAD_COMPLETE },
12353
+ origin
12354
+ );
12355
+ sessionStorage.removeItem("shouldNotifyReload");
12356
+ sessionStorage.removeItem("replyOrigin");
12357
+ }
12358
+ return () => {
12359
+ window.removeEventListener("message", handleMessage);
12360
+ };
12361
+ }, []);
12248
12362
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sections.map((section, i) => {
12249
12363
  const Component = components[section.name];
12250
12364
  if (!Component) return null;
package/dist/index.js CHANGED
@@ -12145,6 +12145,23 @@ var CreopseReactToolkit = function(exports, React2, reactDom) {
12145
12145
  // The week that contains Jan 4th is the first week of the year.
12146
12146
  }
12147
12147
  });
12148
+ var ItemCreatorType;
12149
+ (function(ItemCreatorType2) {
12150
+ ItemCreatorType2["USER"] = "user";
12151
+ ItemCreatorType2["ADMIN"] = "admin";
12152
+ ItemCreatorType2["SYSTEM"] = "system";
12153
+ })(ItemCreatorType || (ItemCreatorType = {}));
12154
+ var AccessScope;
12155
+ (function(AccessScope2) {
12156
+ AccessScope2["INTERNAL"] = "internal";
12157
+ AccessScope2["USER_EDITABLE"] = "user-editable";
12158
+ })(AccessScope || (AccessScope = {}));
12159
+ var Intent;
12160
+ (function(Intent2) {
12161
+ Intent2["EDITORIAL_CONTENT"] = "editorial-content";
12162
+ Intent2["USER_DATA"] = "user-data";
12163
+ Intent2["SYSTEM_DATA"] = "system-data";
12164
+ })(Intent || (Intent = {}));
12148
12165
  var AccountStatus;
12149
12166
  (function(AccountStatus2) {
12150
12167
  AccountStatus2[AccountStatus2["DISABLED"] = 0] = "DISABLED";
@@ -12176,6 +12193,15 @@ var CreopseReactToolkit = function(exports, React2, reactDom) {
12176
12193
  ContentType2["NEWS_ARTICLE"] = "news-article";
12177
12194
  ContentType2["CONTENT_MODEL"] = "content-model";
12178
12195
  })(ContentType || (ContentType = {}));
12196
+ var EditorMessageType;
12197
+ (function(EditorMessageType2) {
12198
+ EditorMessageType2["RELOAD"] = "reload";
12199
+ EditorMessageType2["RELOAD_COMPLETE"] = "reload-complete";
12200
+ EditorMessageType2["ENABLE_EDITION_MODE"] = "enable-edition-mode";
12201
+ EditorMessageType2["DESELECT_ALL_SECTIONS"] = "deselect-all-sections";
12202
+ EditorMessageType2["SELECT_PREVIEW_SECTION"] = "select-preview-section";
12203
+ EditorMessageType2["SELECT_SIDEBAR_SECTION"] = "select-sidebar-section";
12204
+ })(EditorMessageType || (EditorMessageType = {}));
12179
12205
  var MenuItemTargetType;
12180
12206
  (function(MenuItemTargetType2) {
12181
12207
  MenuItemTargetType2["EXTERNAL_LINK"] = "external-link";
@@ -12243,6 +12269,94 @@ var CreopseReactToolkit = function(exports, React2, reactDom) {
12243
12269
  }, 1e3);
12244
12270
  return () => clearTimeout(timeout);
12245
12271
  }, [page, sections]);
12272
+ const sectionsStateRef = React2.useRef({});
12273
+ const sectionsRef = React2.useRef(sections);
12274
+ React2.useEffect(() => {
12275
+ const deselectAllSections = () => {
12276
+ Object.keys(sectionsStateRef.current).forEach((key) => {
12277
+ sectionsStateRef.current[key].isActive = false;
12278
+ const element = document.getElementById(key);
12279
+ if (element) {
12280
+ element.style.border = "none";
12281
+ element.style.boxShadow = "none";
12282
+ }
12283
+ });
12284
+ };
12285
+ const handleMessage = (event) => {
12286
+ if (event.data?.type === EditorMessageType.RELOAD) {
12287
+ sessionStorage.setItem("shouldNotifyReload", "1");
12288
+ sessionStorage.setItem("replyOrigin", event.origin);
12289
+ window.location.reload();
12290
+ } else if (event.data?.type === EditorMessageType.ENABLE_EDITION_MODE) {
12291
+ const primaryColor = event.data?.primaryColor ?? "blue";
12292
+ sessionStorage.setItem("replyOrigin", event.origin);
12293
+ sessionStorage.setItem("primaryColor", primaryColor);
12294
+ sectionsRef.current?.forEach((section) => {
12295
+ if (section.slug && section.pivot?.linkId) {
12296
+ const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
12297
+ const sectionElement = document.getElementById(sectionElementId);
12298
+ if (sectionElement) {
12299
+ sectionsStateRef.current[sectionElementId] = {
12300
+ element: sectionElement,
12301
+ clickCount: 0,
12302
+ isActive: false
12303
+ };
12304
+ const handleClick = function() {
12305
+ deselectAllSections();
12306
+ sectionsStateRef.current[this.id].clickCount++;
12307
+ sectionsStateRef.current[this.id].isActive = true;
12308
+ this.style.border = `5px solid ${primaryColor}`;
12309
+ this.style.boxShadow = `0 0 10px ${primaryColor}`;
12310
+ window.parent.postMessage(
12311
+ {
12312
+ type: EditorMessageType.SELECT_PREVIEW_SECTION,
12313
+ slug: section.slug,
12314
+ linkId: section.pivot?.linkId
12315
+ },
12316
+ event.origin
12317
+ );
12318
+ };
12319
+ sectionElement.addEventListener("click", handleClick);
12320
+ sectionElement.style.cursor = "pointer";
12321
+ sectionElement.style.transition = "all 0.3s ease";
12322
+ }
12323
+ }
12324
+ });
12325
+ } else if (event.data?.type === EditorMessageType.DESELECT_ALL_SECTIONS) {
12326
+ deselectAllSections();
12327
+ } else if (event.data?.type === EditorMessageType.SELECT_SIDEBAR_SECTION) {
12328
+ setTimeout(() => {
12329
+ if (sectionsRef.current?.find(
12330
+ (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
12331
+ )) {
12332
+ slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
12333
+ }
12334
+ }, 1e3);
12335
+ const elementId = `${event.data?.slug}__${event.data?.linkId}-container`;
12336
+ const element = document.getElementById(elementId);
12337
+ if (element) {
12338
+ deselectAllSections();
12339
+ sectionsStateRef.current[elementId].clickCount++;
12340
+ sectionsStateRef.current[elementId].isActive = true;
12341
+ element.style.border = `5px solid ${sessionStorage.getItem("primaryColor")}`;
12342
+ element.style.boxShadow = `0 0 10px ${sessionStorage.getItem("primaryColor")}`;
12343
+ }
12344
+ }
12345
+ };
12346
+ window.addEventListener("message", handleMessage);
12347
+ if (sessionStorage.getItem("shouldNotifyReload") === "1") {
12348
+ const origin = sessionStorage.getItem("replyOrigin") || "*";
12349
+ window.parent.postMessage(
12350
+ { type: EditorMessageType.RELOAD_COMPLETE },
12351
+ origin
12352
+ );
12353
+ sessionStorage.removeItem("shouldNotifyReload");
12354
+ sessionStorage.removeItem("replyOrigin");
12355
+ }
12356
+ return () => {
12357
+ window.removeEventListener("message", handleMessage);
12358
+ };
12359
+ }, []);
12246
12360
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sections.map((section, i) => {
12247
12361
  const Component = components[section.name];
12248
12362
  if (!Component) return null;
package/dist/index.mjs CHANGED
@@ -12129,6 +12129,23 @@ hooks.defineLocale("fr", {
12129
12129
  // The week that contains Jan 4th is the first week of the year.
12130
12130
  }
12131
12131
  });
12132
+ var ItemCreatorType;
12133
+ (function(ItemCreatorType2) {
12134
+ ItemCreatorType2["USER"] = "user";
12135
+ ItemCreatorType2["ADMIN"] = "admin";
12136
+ ItemCreatorType2["SYSTEM"] = "system";
12137
+ })(ItemCreatorType || (ItemCreatorType = {}));
12138
+ var AccessScope;
12139
+ (function(AccessScope2) {
12140
+ AccessScope2["INTERNAL"] = "internal";
12141
+ AccessScope2["USER_EDITABLE"] = "user-editable";
12142
+ })(AccessScope || (AccessScope = {}));
12143
+ var Intent;
12144
+ (function(Intent2) {
12145
+ Intent2["EDITORIAL_CONTENT"] = "editorial-content";
12146
+ Intent2["USER_DATA"] = "user-data";
12147
+ Intent2["SYSTEM_DATA"] = "system-data";
12148
+ })(Intent || (Intent = {}));
12132
12149
  var AccountStatus;
12133
12150
  (function(AccountStatus2) {
12134
12151
  AccountStatus2[AccountStatus2["DISABLED"] = 0] = "DISABLED";
@@ -12160,6 +12177,15 @@ var ContentType;
12160
12177
  ContentType2["NEWS_ARTICLE"] = "news-article";
12161
12178
  ContentType2["CONTENT_MODEL"] = "content-model";
12162
12179
  })(ContentType || (ContentType = {}));
12180
+ var EditorMessageType;
12181
+ (function(EditorMessageType2) {
12182
+ EditorMessageType2["RELOAD"] = "reload";
12183
+ EditorMessageType2["RELOAD_COMPLETE"] = "reload-complete";
12184
+ EditorMessageType2["ENABLE_EDITION_MODE"] = "enable-edition-mode";
12185
+ EditorMessageType2["DESELECT_ALL_SECTIONS"] = "deselect-all-sections";
12186
+ EditorMessageType2["SELECT_PREVIEW_SECTION"] = "select-preview-section";
12187
+ EditorMessageType2["SELECT_SIDEBAR_SECTION"] = "select-sidebar-section";
12188
+ })(EditorMessageType || (EditorMessageType = {}));
12163
12189
  var MenuItemTargetType;
12164
12190
  (function(MenuItemTargetType2) {
12165
12191
  MenuItemTargetType2["EXTERNAL_LINK"] = "external-link";
@@ -12227,6 +12253,94 @@ const RootContainer = ({
12227
12253
  }, 1e3);
12228
12254
  return () => clearTimeout(timeout);
12229
12255
  }, [page, sections]);
12256
+ const sectionsStateRef = useRef({});
12257
+ const sectionsRef = useRef(sections);
12258
+ useEffect(() => {
12259
+ const deselectAllSections = () => {
12260
+ Object.keys(sectionsStateRef.current).forEach((key) => {
12261
+ sectionsStateRef.current[key].isActive = false;
12262
+ const element = document.getElementById(key);
12263
+ if (element) {
12264
+ element.style.border = "none";
12265
+ element.style.boxShadow = "none";
12266
+ }
12267
+ });
12268
+ };
12269
+ const handleMessage = (event) => {
12270
+ if (event.data?.type === EditorMessageType.RELOAD) {
12271
+ sessionStorage.setItem("shouldNotifyReload", "1");
12272
+ sessionStorage.setItem("replyOrigin", event.origin);
12273
+ window.location.reload();
12274
+ } else if (event.data?.type === EditorMessageType.ENABLE_EDITION_MODE) {
12275
+ const primaryColor = event.data?.primaryColor ?? "blue";
12276
+ sessionStorage.setItem("replyOrigin", event.origin);
12277
+ sessionStorage.setItem("primaryColor", primaryColor);
12278
+ sectionsRef.current?.forEach((section) => {
12279
+ if (section.slug && section.pivot?.linkId) {
12280
+ const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
12281
+ const sectionElement = document.getElementById(sectionElementId);
12282
+ if (sectionElement) {
12283
+ sectionsStateRef.current[sectionElementId] = {
12284
+ element: sectionElement,
12285
+ clickCount: 0,
12286
+ isActive: false
12287
+ };
12288
+ const handleClick = function() {
12289
+ deselectAllSections();
12290
+ sectionsStateRef.current[this.id].clickCount++;
12291
+ sectionsStateRef.current[this.id].isActive = true;
12292
+ this.style.border = `5px solid ${primaryColor}`;
12293
+ this.style.boxShadow = `0 0 10px ${primaryColor}`;
12294
+ window.parent.postMessage(
12295
+ {
12296
+ type: EditorMessageType.SELECT_PREVIEW_SECTION,
12297
+ slug: section.slug,
12298
+ linkId: section.pivot?.linkId
12299
+ },
12300
+ event.origin
12301
+ );
12302
+ };
12303
+ sectionElement.addEventListener("click", handleClick);
12304
+ sectionElement.style.cursor = "pointer";
12305
+ sectionElement.style.transition = "all 0.3s ease";
12306
+ }
12307
+ }
12308
+ });
12309
+ } else if (event.data?.type === EditorMessageType.DESELECT_ALL_SECTIONS) {
12310
+ deselectAllSections();
12311
+ } else if (event.data?.type === EditorMessageType.SELECT_SIDEBAR_SECTION) {
12312
+ setTimeout(() => {
12313
+ if (sectionsRef.current?.find(
12314
+ (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
12315
+ )) {
12316
+ slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
12317
+ }
12318
+ }, 1e3);
12319
+ const elementId = `${event.data?.slug}__${event.data?.linkId}-container`;
12320
+ const element = document.getElementById(elementId);
12321
+ if (element) {
12322
+ deselectAllSections();
12323
+ sectionsStateRef.current[elementId].clickCount++;
12324
+ sectionsStateRef.current[elementId].isActive = true;
12325
+ element.style.border = `5px solid ${sessionStorage.getItem("primaryColor")}`;
12326
+ element.style.boxShadow = `0 0 10px ${sessionStorage.getItem("primaryColor")}`;
12327
+ }
12328
+ }
12329
+ };
12330
+ window.addEventListener("message", handleMessage);
12331
+ if (sessionStorage.getItem("shouldNotifyReload") === "1") {
12332
+ const origin = sessionStorage.getItem("replyOrigin") || "*";
12333
+ window.parent.postMessage(
12334
+ { type: EditorMessageType.RELOAD_COMPLETE },
12335
+ origin
12336
+ );
12337
+ sessionStorage.removeItem("shouldNotifyReload");
12338
+ sessionStorage.removeItem("replyOrigin");
12339
+ }
12340
+ return () => {
12341
+ window.removeEventListener("message", handleMessage);
12342
+ };
12343
+ }, []);
12230
12344
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sections.map((section, i) => {
12231
12345
  const Component2 = components[section.name];
12232
12346
  if (!Component2) return null;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@creopse/react",
3
3
  "description": "Creopse React Toolkit",
4
- "version": "0.0.6",
4
+ "version": "0.0.8",
5
5
  "private": false,
6
6
  "author": "Noé Gnanih <noegnanih@gmail.com>",
7
7
  "license": "MIT",
@@ -36,7 +36,7 @@
36
36
  "react-dom": "^19.1.0"
37
37
  },
38
38
  "dependencies": {
39
- "@creopse/utils": "^0.0.7",
39
+ "@creopse/utils": "^0.0.10",
40
40
  "framer-motion": "^12.23.9"
41
41
  },
42
42
  "devDependencies": {