react-intlayer 1.2.1 → 2.0.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 (73) hide show
  1. package/dist/cjs/{ContentEditor/contentRender.cjs → client/ContentEditionLayout.cjs} +9 -14
  2. package/dist/cjs/client/ContentEditionLayout.cjs.map +1 -0
  3. package/dist/cjs/client/ContentEditionLayout.d.ts +6 -0
  4. package/dist/cjs/client/IntlayerClientProvider.cjs +10 -1
  5. package/dist/cjs/client/IntlayerClientProvider.cjs.map +1 -1
  6. package/dist/cjs/client/useContent.d.ts +1 -2
  7. package/dist/cjs/getEnumeration.cjs +0 -4
  8. package/dist/cjs/getEnumeration.cjs.map +1 -1
  9. package/dist/cjs/getTranslation.cjs +0 -4
  10. package/dist/cjs/getTranslation.cjs.map +1 -1
  11. package/dist/cjs/processDictionary/{contentDictionary.d.cjs → contentDictionary.cjs} +3 -3
  12. package/dist/cjs/processDictionary/contentDictionary.cjs.map +1 -0
  13. package/dist/cjs/processDictionary/contentDictionary.d.ts +16 -0
  14. package/dist/cjs/processDictionary/index.cjs +88 -23
  15. package/dist/cjs/processDictionary/index.cjs.map +1 -1
  16. package/dist/cjs/processDictionary/index.d.ts +5 -4
  17. package/dist/cjs/useIntlayerBase.cjs +3 -0
  18. package/dist/cjs/useIntlayerBase.cjs.map +1 -1
  19. package/dist/cjs/vite/intlayerPlugin.cjs +1 -1
  20. package/dist/cjs/vite/intlayerPlugin.cjs.map +1 -1
  21. package/dist/esm/client/ContentEditionLayout.d.mts +6 -0
  22. package/dist/esm/client/ContentEditionLayout.mjs +11 -0
  23. package/dist/esm/client/ContentEditionLayout.mjs.map +1 -0
  24. package/dist/esm/client/IntlayerClientProvider.mjs +10 -1
  25. package/dist/esm/client/IntlayerClientProvider.mjs.map +1 -1
  26. package/dist/esm/client/useContent.d.mts +1 -2
  27. package/dist/esm/getEnumeration.mjs +0 -4
  28. package/dist/esm/getEnumeration.mjs.map +1 -1
  29. package/dist/esm/getTranslation.mjs +0 -4
  30. package/dist/esm/getTranslation.mjs.map +1 -1
  31. package/dist/esm/processDictionary/contentDictionary.d.mts +16 -0
  32. package/dist/esm/processDictionary/contentDictionary.mjs +1 -0
  33. package/dist/esm/processDictionary/index.d.mts +5 -4
  34. package/dist/esm/processDictionary/index.mjs +90 -24
  35. package/dist/esm/processDictionary/index.mjs.map +1 -1
  36. package/dist/esm/useIntlayerBase.mjs +3 -0
  37. package/dist/esm/useIntlayerBase.mjs.map +1 -1
  38. package/dist/esm/vite/intlayerPlugin.mjs +1 -1
  39. package/dist/esm/vite/intlayerPlugin.mjs.map +1 -1
  40. package/package.json +14 -8
  41. package/src/client/ContentEditionLayout.tsx +15 -0
  42. package/src/client/IntlayerClientProvider.tsx +8 -1
  43. package/src/getEnumeration.ts +0 -5
  44. package/src/getTranslation.ts +0 -5
  45. package/src/processDictionary/{contentDictionary.d.ts → contentDictionary.ts} +6 -5
  46. package/src/processDictionary/index.ts +111 -24
  47. package/src/useIntlayerBase.ts +3 -0
  48. package/src/vite/intlayerPlugin.ts +1 -1
  49. package/dist/cjs/ContentEditor/ContentEditor.cjs +0 -110
  50. package/dist/cjs/ContentEditor/ContentEditor.cjs.map +0 -1
  51. package/dist/cjs/ContentEditor/ContentEditor.d.ts +0 -8
  52. package/dist/cjs/ContentEditor/contentRender.cjs.map +0 -1
  53. package/dist/cjs/ContentEditor/contentRender.d.ts +0 -3
  54. package/dist/cjs/ContentEditor/index.cjs +0 -25
  55. package/dist/cjs/ContentEditor/index.cjs.map +0 -1
  56. package/dist/cjs/ContentEditor/index.d.ts +0 -3
  57. package/dist/cjs/processDictionary/contentDictionary.d.cjs.map +0 -1
  58. package/dist/cjs/processDictionary/contentDictionary.d.d.ts +0 -29
  59. package/dist/esm/ContentEditor/ContentEditor.d.mts +0 -8
  60. package/dist/esm/ContentEditor/ContentEditor.mjs +0 -92
  61. package/dist/esm/ContentEditor/ContentEditor.mjs.map +0 -1
  62. package/dist/esm/ContentEditor/contentRender.d.mts +0 -3
  63. package/dist/esm/ContentEditor/contentRender.mjs +0 -14
  64. package/dist/esm/ContentEditor/contentRender.mjs.map +0 -1
  65. package/dist/esm/ContentEditor/index.d.mts +0 -3
  66. package/dist/esm/ContentEditor/index.mjs +0 -3
  67. package/dist/esm/ContentEditor/index.mjs.map +0 -1
  68. package/dist/esm/processDictionary/contentDictionary.d.d.mts +0 -29
  69. package/dist/esm/processDictionary/contentDictionary.d.mjs +0 -1
  70. package/src/ContentEditor/ContentEditor.tsx +0 -116
  71. package/src/ContentEditor/contentRender.tsx +0 -11
  72. package/src/ContentEditor/index.tsx +0 -2
  73. /package/dist/esm/processDictionary/{contentDictionary.d.mjs.map → contentDictionary.mjs.map} +0 -0
@@ -1,110 +0,0 @@
1
- "use strict";
2
- "use client";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
- var ContentEditor_exports = {};
21
- __export(ContentEditor_exports, {
22
- ContentEditor: () => ContentEditor
23
- });
24
- module.exports = __toCommonJS(ContentEditor_exports);
25
- var import_jsx_runtime = require("react/jsx-runtime");
26
- var import_react = require("react");
27
- const PRESS_DETECT_DURATION = 500;
28
- const ContentEditor = ({ children }) => {
29
- const divRef = (0, import_react.useRef)(null);
30
- const [isEditing, setIsEditing] = (0, import_react.useState)(false);
31
- const pressTimerRef = (0, import_react.useRef)(null);
32
- const handleOnLongPress = () => {
33
- setIsEditing(true);
34
- };
35
- const startPressTimer = () => {
36
- pressTimerRef.current = setTimeout(() => {
37
- handleOnLongPress();
38
- }, PRESS_DETECT_DURATION);
39
- };
40
- const clearPressTimer = () => {
41
- if (pressTimerRef.current) {
42
- clearTimeout(pressTimerRef.current);
43
- pressTimerRef.current = null;
44
- }
45
- };
46
- const handleMouseDown = () => {
47
- clearPressTimer();
48
- startPressTimer();
49
- };
50
- const handleMouseUp = () => {
51
- clearPressTimer();
52
- };
53
- const handleClickOutside = (0, import_react.useCallback)(
54
- (event) => {
55
- if (divRef.current && !divRef.current.contains(event.target)) {
56
- setIsEditing(false);
57
- }
58
- },
59
- [divRef]
60
- );
61
- (0, import_react.useEffect)(() => {
62
- document.addEventListener("mousedown", handleClickOutside);
63
- return () => {
64
- document.removeEventListener("mousedown", handleClickOutside);
65
- clearPressTimer();
66
- };
67
- }, [handleClickOutside]);
68
- const handleOnClick = (e) => {
69
- if (isEditing) {
70
- e.preventDefault();
71
- e.stopPropagation();
72
- }
73
- };
74
- const handleOnBlur = () => {
75
- setIsEditing(false);
76
- };
77
- const onContentChange = (_e) => {
78
- };
79
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
80
- "div",
81
- {
82
- role: "textbox",
83
- tabIndex: 0,
84
- onKeyUp: () => null,
85
- contentEditable: isEditing,
86
- onInput: onContentChange,
87
- onClick: handleOnClick,
88
- onMouseDown: handleMouseDown,
89
- onMouseUp: handleMouseUp,
90
- onMouseLeave: handleMouseUp,
91
- onTouchStart: handleMouseDown,
92
- onTouchEnd: handleMouseUp,
93
- onTouchCancel: handleMouseUp,
94
- onBlur: handleOnBlur,
95
- suppressContentEditableWarning: true,
96
- style: isEditing ? {
97
- backgroundColor: "transparent",
98
- cursor: "text",
99
- display: "inline"
100
- } : { cursor: "pointer", display: "inline" },
101
- ref: divRef,
102
- children
103
- }
104
- );
105
- };
106
- // Annotate the CommonJS export names for ESM import in node:
107
- 0 && (module.exports = {
108
- ContentEditor
109
- });
110
- //# sourceMappingURL=ContentEditor.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport {\n useEffect,\n useState,\n useRef,\n useCallback,\n type FC,\n type MouseEventHandler,\n} from 'react';\n\ntype ContentEditorProps = {\n children?: string;\n};\n\nconst PRESS_DETECT_DURATION = 500;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({ children }) => {\n const divRef = useRef<HTMLDivElement>(null);\n const [isEditing, setIsEditing] = useState(false);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleOnLongPress = () => {\n setIsEditing(true);\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, PRESS_DETECT_DURATION);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseUp = () => {\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n setIsEditing(false);\n }\n },\n [divRef]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isEditing) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsEditing(false);\n };\n\n const onContentChange = (_e: React.FormEvent<HTMLDivElement>) => {\n // console.log(e.currentTarget.textContent);\n };\n\n return (\n <div\n role=\"textbox\"\n tabIndex={0}\n onKeyUp={() => null}\n contentEditable={isEditing}\n onInput={onContentChange}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n suppressContentEditableWarning={true} // To suppress the warning for controlled components\n style={\n isEditing\n ? {\n backgroundColor: 'transparent',\n cursor: 'text',\n display: 'inline',\n }\n : { cursor: 'pointer', display: 'inline' }\n }\n ref={divRef}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsFI;AApFJ,mBAOO;AAMP,MAAM,wBAAwB;AAEvB,MAAM,gBAAwC,CAAC,EAAE,SAAS,MAAM;AACrE,QAAM,aAAS,qBAAuB,IAAI;AAC1C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,oBAAgB,qBAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,kBAAc,UAAU,WAAW,MAAM;AACvC,wBAAkB;AAAA,IACpB,GAAG,qBAAqB;AAAA,EAC1B;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,oBAAgB;AAChB,oBAAgB;AAAA,EAClB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,oBAAgB;AAAA,EAClB;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAsB;AACrB,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,8BAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEX,eAAS,oBAAoB,aAAa,kBAAkB;AAC5D,sBAAgB;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAmD,CAAC,MAAM;AAC9D,QAAI,WAAW;AACb,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAEzB,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,kBAAkB,CAAC,OAAwC;AAAA,EAEjE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,gCAAgC;AAAA,MAChC,OACE,YACI;AAAA,QACE,iBAAiB;AAAA,QACjB,QAAQ;AAAA,QACR,SAAS;AAAA,MACX,IACA,EAAE,QAAQ,WAAW,SAAS,SAAS;AAAA,MAE7C,KAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;","names":[]}
@@ -1,8 +0,0 @@
1
- import { FC } from 'react';
2
-
3
- type ContentEditorProps = {
4
- children?: string;
5
- };
6
- declare const ContentEditor: FC<ContentEditorProps>;
7
-
8
- export { ContentEditor };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/ContentEditor/contentRender.tsx"],"sourcesContent":["import { ContentEditor } from './ContentEditor';\n\nexport const contentRender = (content: string) => {\n const isEditable = process.env.NODE_ENV === 'development';\n\n if (isEditable && ContentEditor) {\n return (<ContentEditor>{content}</ContentEditor>) as unknown as string;\n }\n\n return content;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMY;AANZ,2BAA8B;AAEvB,MAAM,gBAAgB,CAAC,YAAoB;AAChD,QAAM,aAAa,QAAQ,IAAI,aAAa;AAE5C,MAAI,cAAc,oCAAe;AAC/B,WAAQ,4CAAC,sCAAe,mBAAQ;AAAA,EAClC;AAEA,SAAO;AACT;","names":[]}
@@ -1,3 +0,0 @@
1
- declare const contentRender: (content: string) => string;
2
-
3
- export { contentRender };
@@ -1,25 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __copyProps = (to, from, except, desc) => {
7
- if (from && typeof from === "object" || typeof from === "function") {
8
- for (let key of __getOwnPropNames(from))
9
- if (!__hasOwnProp.call(to, key) && key !== except)
10
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
- }
12
- return to;
13
- };
14
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
15
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
16
- var ContentEditor_exports = {};
17
- module.exports = __toCommonJS(ContentEditor_exports);
18
- __reExport(ContentEditor_exports, require('./ContentEditor.cjs'), module.exports);
19
- __reExport(ContentEditor_exports, require('./contentRender.cjs'), module.exports);
20
- // Annotate the CommonJS export names for ESM import in node:
21
- 0 && (module.exports = {
22
- ...require('./ContentEditor.cjs'),
23
- ...require('./contentRender.cjs')
24
- });
25
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/ContentEditor/index.tsx"],"sourcesContent":["export * from './ContentEditor';\nexport * from './contentRender';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kCAAc,4BAAd;AACA,kCAAc,4BADd;","names":[]}
@@ -1,3 +0,0 @@
1
- export { ContentEditor } from './ContentEditor.js';
2
- export { contentRender } from './contentRender.js';
3
- import 'react';
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/processDictionary/contentDictionary.d.ts"],"sourcesContent":["import { type TranslationContent } from '@intlayer/core';\n\nexport type ContentValue =\n | string\n | {\n [key: string]: ContentValue;\n }\n | TranslationContent<unknown>;\n\nexport type Content = Record<string, ContentValue | undefined>;\n\nexport type TransformedContentValue =\n | string\n | {\n [key: string]: TransformedContentValue;\n }\n | undefined\n | ((quantity: number) => TransformedContentValue);\n\nexport type TransformedContent = Record<\n string,\n TransformedContentValue | undefined\n>;\n\nexport type ContentDictionary = Content & {\n id: string;\n};\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
@@ -1,29 +0,0 @@
1
- import { TranslationContent } from '@intlayer/core';
2
-
3
- type ContentValue =
4
- | string
5
- | {
6
- [key: string]: ContentValue;
7
- }
8
- | TranslationContent<unknown>;
9
-
10
- type Content = Record<string, ContentValue | undefined>;
11
-
12
- type TransformedContentValue =
13
- | string
14
- | {
15
- [key: string]: TransformedContentValue;
16
- }
17
- | undefined
18
- | ((quantity: number) => TransformedContentValue);
19
-
20
- type TransformedContent = Record<
21
- string,
22
- TransformedContentValue | undefined
23
- >;
24
-
25
- type ContentDictionary = Content & {
26
- id: string;
27
- };
28
-
29
- export type { Content, ContentDictionary, ContentValue, TransformedContent, TransformedContentValue };
@@ -1,8 +0,0 @@
1
- import { FC } from 'react';
2
-
3
- type ContentEditorProps = {
4
- children?: string;
5
- };
6
- declare const ContentEditor: FC<ContentEditorProps>;
7
-
8
- export { ContentEditor };
@@ -1,92 +0,0 @@
1
- "use client";
2
- import "../chunk-ZNCO4QRF.mjs";
3
- import { jsx } from "react/jsx-runtime";
4
- import {
5
- useEffect,
6
- useState,
7
- useRef,
8
- useCallback
9
- } from "react";
10
- const PRESS_DETECT_DURATION = 500;
11
- const ContentEditor = ({ children }) => {
12
- const divRef = useRef(null);
13
- const [isEditing, setIsEditing] = useState(false);
14
- const pressTimerRef = useRef(null);
15
- const handleOnLongPress = () => {
16
- setIsEditing(true);
17
- };
18
- const startPressTimer = () => {
19
- pressTimerRef.current = setTimeout(() => {
20
- handleOnLongPress();
21
- }, PRESS_DETECT_DURATION);
22
- };
23
- const clearPressTimer = () => {
24
- if (pressTimerRef.current) {
25
- clearTimeout(pressTimerRef.current);
26
- pressTimerRef.current = null;
27
- }
28
- };
29
- const handleMouseDown = () => {
30
- clearPressTimer();
31
- startPressTimer();
32
- };
33
- const handleMouseUp = () => {
34
- clearPressTimer();
35
- };
36
- const handleClickOutside = useCallback(
37
- (event) => {
38
- if (divRef.current && !divRef.current.contains(event.target)) {
39
- setIsEditing(false);
40
- }
41
- },
42
- [divRef]
43
- );
44
- useEffect(() => {
45
- document.addEventListener("mousedown", handleClickOutside);
46
- return () => {
47
- document.removeEventListener("mousedown", handleClickOutside);
48
- clearPressTimer();
49
- };
50
- }, [handleClickOutside]);
51
- const handleOnClick = (e) => {
52
- if (isEditing) {
53
- e.preventDefault();
54
- e.stopPropagation();
55
- }
56
- };
57
- const handleOnBlur = () => {
58
- setIsEditing(false);
59
- };
60
- const onContentChange = (_e) => {
61
- };
62
- return /* @__PURE__ */ jsx(
63
- "div",
64
- {
65
- role: "textbox",
66
- tabIndex: 0,
67
- onKeyUp: () => null,
68
- contentEditable: isEditing,
69
- onInput: onContentChange,
70
- onClick: handleOnClick,
71
- onMouseDown: handleMouseDown,
72
- onMouseUp: handleMouseUp,
73
- onMouseLeave: handleMouseUp,
74
- onTouchStart: handleMouseDown,
75
- onTouchEnd: handleMouseUp,
76
- onTouchCancel: handleMouseUp,
77
- onBlur: handleOnBlur,
78
- suppressContentEditableWarning: true,
79
- style: isEditing ? {
80
- backgroundColor: "transparent",
81
- cursor: "text",
82
- display: "inline"
83
- } : { cursor: "pointer", display: "inline" },
84
- ref: divRef,
85
- children
86
- }
87
- );
88
- };
89
- export {
90
- ContentEditor
91
- };
92
- //# sourceMappingURL=ContentEditor.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport {\n useEffect,\n useState,\n useRef,\n useCallback,\n type FC,\n type MouseEventHandler,\n} from 'react';\n\ntype ContentEditorProps = {\n children?: string;\n};\n\nconst PRESS_DETECT_DURATION = 500;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({ children }) => {\n const divRef = useRef<HTMLDivElement>(null);\n const [isEditing, setIsEditing] = useState(false);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleOnLongPress = () => {\n setIsEditing(true);\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, PRESS_DETECT_DURATION);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseUp = () => {\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n setIsEditing(false);\n }\n },\n [divRef]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isEditing) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsEditing(false);\n };\n\n const onContentChange = (_e: React.FormEvent<HTMLDivElement>) => {\n // console.log(e.currentTarget.textContent);\n };\n\n return (\n <div\n role=\"textbox\"\n tabIndex={0}\n onKeyUp={() => null}\n contentEditable={isEditing}\n onInput={onContentChange}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n suppressContentEditableWarning={true} // To suppress the warning for controlled components\n style={\n isEditing\n ? {\n backgroundColor: 'transparent',\n cursor: 'text',\n display: 'inline',\n }\n : { cursor: 'pointer', display: 'inline' }\n }\n ref={divRef}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;AAsFI;AApFJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAMP,MAAM,wBAAwB;AAEvB,MAAM,gBAAwC,CAAC,EAAE,SAAS,MAAM;AACrE,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,gBAAgB,OAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,kBAAc,UAAU,WAAW,MAAM;AACvC,wBAAkB;AAAA,IACpB,GAAG,qBAAqB;AAAA,EAC1B;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,oBAAgB;AAChB,oBAAgB;AAAA,EAClB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,oBAAgB;AAAA,EAClB;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AACrB,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEX,eAAS,oBAAoB,aAAa,kBAAkB;AAC5D,sBAAgB;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAmD,CAAC,MAAM;AAC9D,QAAI,WAAW;AACb,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAEzB,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,kBAAkB,CAAC,OAAwC;AAAA,EAEjE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,gCAAgC;AAAA,MAChC,OACE,YACI;AAAA,QACE,iBAAiB;AAAA,QACjB,QAAQ;AAAA,QACR,SAAS;AAAA,MACX,IACA,EAAE,QAAQ,WAAW,SAAS,SAAS;AAAA,MAE7C,KAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;","names":[]}
@@ -1,3 +0,0 @@
1
- declare const contentRender: (content: string) => string;
2
-
3
- export { contentRender };
@@ -1,14 +0,0 @@
1
- import "../chunk-ZNCO4QRF.mjs";
2
- import { jsx } from "react/jsx-runtime";
3
- import { ContentEditor } from './ContentEditor.mjs';
4
- const contentRender = (content) => {
5
- const isEditable = process.env.NODE_ENV === "development";
6
- if (isEditable && ContentEditor) {
7
- return /* @__PURE__ */ jsx(ContentEditor, { children: content });
8
- }
9
- return content;
10
- };
11
- export {
12
- contentRender
13
- };
14
- //# sourceMappingURL=contentRender.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/ContentEditor/contentRender.tsx"],"sourcesContent":["import { ContentEditor } from './ContentEditor';\n\nexport const contentRender = (content: string) => {\n const isEditable = process.env.NODE_ENV === 'development';\n\n if (isEditable && ContentEditor) {\n return (<ContentEditor>{content}</ContentEditor>) as unknown as string;\n }\n\n return content;\n};\n"],"mappings":";AAMY;AANZ,SAAS,qBAAqB;AAEvB,MAAM,gBAAgB,CAAC,YAAoB;AAChD,QAAM,aAAa,QAAQ,IAAI,aAAa;AAE5C,MAAI,cAAc,eAAe;AAC/B,WAAQ,oBAAC,iBAAe,mBAAQ;AAAA,EAClC;AAEA,SAAO;AACT;","names":[]}
@@ -1,3 +0,0 @@
1
- export { ContentEditor } from './ContentEditor.mjs';
2
- export { contentRender } from './contentRender.mjs';
3
- import 'react';
@@ -1,3 +0,0 @@
1
- export * from './ContentEditor.mjs';
2
- export * from './contentRender.mjs';
3
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/ContentEditor/index.tsx"],"sourcesContent":["export * from './ContentEditor';\nexport * from './contentRender';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}
@@ -1,29 +0,0 @@
1
- import { TranslationContent } from '@intlayer/core';
2
-
3
- type ContentValue =
4
- | string
5
- | {
6
- [key: string]: ContentValue;
7
- }
8
- | TranslationContent<unknown>;
9
-
10
- type Content = Record<string, ContentValue | undefined>;
11
-
12
- type TransformedContentValue =
13
- | string
14
- | {
15
- [key: string]: TransformedContentValue;
16
- }
17
- | undefined
18
- | ((quantity: number) => TransformedContentValue);
19
-
20
- type TransformedContent = Record<
21
- string,
22
- TransformedContentValue | undefined
23
- >;
24
-
25
- type ContentDictionary = Content & {
26
- id: string;
27
- };
28
-
29
- export type { Content, ContentDictionary, ContentValue, TransformedContent, TransformedContentValue };
@@ -1 +0,0 @@
1
- //# sourceMappingURL=contentDictionary.d.mjs.map
@@ -1,116 +0,0 @@
1
- 'use client';
2
-
3
- import {
4
- useEffect,
5
- useState,
6
- useRef,
7
- useCallback,
8
- type FC,
9
- type MouseEventHandler,
10
- } from 'react';
11
-
12
- type ContentEditorProps = {
13
- children?: string;
14
- };
15
-
16
- const PRESS_DETECT_DURATION = 500;
17
-
18
- export const ContentEditor: FC<ContentEditorProps> = ({ children }) => {
19
- const divRef = useRef<HTMLDivElement>(null);
20
- const [isEditing, setIsEditing] = useState(false);
21
- const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
22
-
23
- const handleOnLongPress = () => {
24
- setIsEditing(true);
25
- };
26
-
27
- const startPressTimer = () => {
28
- pressTimerRef.current = setTimeout(() => {
29
- handleOnLongPress();
30
- }, PRESS_DETECT_DURATION);
31
- };
32
-
33
- const clearPressTimer = () => {
34
- if (pressTimerRef.current) {
35
- clearTimeout(pressTimerRef.current);
36
- pressTimerRef.current = null;
37
- }
38
- };
39
-
40
- const handleMouseDown = () => {
41
- clearPressTimer(); // Ensure any previous timer is cleared
42
- startPressTimer();
43
- };
44
-
45
- const handleMouseUp = () => {
46
- clearPressTimer();
47
- };
48
-
49
- // Use useCallback to ensure the function identity remains stable
50
- const handleClickOutside = useCallback(
51
- (event: MouseEvent) => {
52
- if (divRef.current && !divRef.current.contains(event.target as Node)) {
53
- setIsEditing(false);
54
- }
55
- },
56
- [divRef]
57
- );
58
-
59
- useEffect(() => {
60
- // Attach click outside listener
61
- document.addEventListener('mousedown', handleClickOutside);
62
-
63
- return () => {
64
- // Cleanup
65
- document.removeEventListener('mousedown', handleClickOutside);
66
- clearPressTimer(); // Ensure to clear the timer when component unmounts
67
- };
68
- }, [handleClickOutside]);
69
-
70
- const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {
71
- if (isEditing) {
72
- e.preventDefault();
73
- e.stopPropagation();
74
- }
75
- };
76
-
77
- const handleOnBlur = () => {
78
- // Stop editing when the element loses focus
79
- setIsEditing(false);
80
- };
81
-
82
- const onContentChange = (_e: React.FormEvent<HTMLDivElement>) => {
83
- // console.log(e.currentTarget.textContent);
84
- };
85
-
86
- return (
87
- <div
88
- role="textbox"
89
- tabIndex={0}
90
- onKeyUp={() => null}
91
- contentEditable={isEditing}
92
- onInput={onContentChange}
93
- onClick={handleOnClick}
94
- onMouseDown={handleMouseDown}
95
- onMouseUp={handleMouseUp}
96
- onMouseLeave={handleMouseUp}
97
- onTouchStart={handleMouseDown}
98
- onTouchEnd={handleMouseUp}
99
- onTouchCancel={handleMouseUp}
100
- onBlur={handleOnBlur}
101
- suppressContentEditableWarning={true} // To suppress the warning for controlled components
102
- style={
103
- isEditing
104
- ? {
105
- backgroundColor: 'transparent',
106
- cursor: 'text',
107
- display: 'inline',
108
- }
109
- : { cursor: 'pointer', display: 'inline' }
110
- }
111
- ref={divRef}
112
- >
113
- {children}
114
- </div>
115
- );
116
- };
@@ -1,11 +0,0 @@
1
- import { ContentEditor } from './ContentEditor';
2
-
3
- export const contentRender = (content: string) => {
4
- const isEditable = process.env.NODE_ENV === 'development';
5
-
6
- if (isEditable && ContentEditor) {
7
- return (<ContentEditor>{content}</ContentEditor>) as unknown as string;
8
- }
9
-
10
- return content;
11
- };
@@ -1,2 +0,0 @@
1
- export * from './ContentEditor';
2
- export * from './contentRender';