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.
- package/dist/cjs/{ContentEditor/contentRender.cjs → client/ContentEditionLayout.cjs} +9 -14
- package/dist/cjs/client/ContentEditionLayout.cjs.map +1 -0
- package/dist/cjs/client/ContentEditionLayout.d.ts +6 -0
- package/dist/cjs/client/IntlayerClientProvider.cjs +10 -1
- package/dist/cjs/client/IntlayerClientProvider.cjs.map +1 -1
- package/dist/cjs/client/useContent.d.ts +1 -2
- package/dist/cjs/getEnumeration.cjs +0 -4
- package/dist/cjs/getEnumeration.cjs.map +1 -1
- package/dist/cjs/getTranslation.cjs +0 -4
- package/dist/cjs/getTranslation.cjs.map +1 -1
- package/dist/cjs/processDictionary/{contentDictionary.d.cjs → contentDictionary.cjs} +3 -3
- package/dist/cjs/processDictionary/contentDictionary.cjs.map +1 -0
- package/dist/cjs/processDictionary/contentDictionary.d.ts +16 -0
- package/dist/cjs/processDictionary/index.cjs +88 -23
- package/dist/cjs/processDictionary/index.cjs.map +1 -1
- package/dist/cjs/processDictionary/index.d.ts +5 -4
- package/dist/cjs/useIntlayerBase.cjs +3 -0
- package/dist/cjs/useIntlayerBase.cjs.map +1 -1
- package/dist/cjs/vite/intlayerPlugin.cjs +1 -1
- package/dist/cjs/vite/intlayerPlugin.cjs.map +1 -1
- package/dist/esm/client/ContentEditionLayout.d.mts +6 -0
- package/dist/esm/client/ContentEditionLayout.mjs +11 -0
- package/dist/esm/client/ContentEditionLayout.mjs.map +1 -0
- package/dist/esm/client/IntlayerClientProvider.mjs +10 -1
- package/dist/esm/client/IntlayerClientProvider.mjs.map +1 -1
- package/dist/esm/client/useContent.d.mts +1 -2
- package/dist/esm/getEnumeration.mjs +0 -4
- package/dist/esm/getEnumeration.mjs.map +1 -1
- package/dist/esm/getTranslation.mjs +0 -4
- package/dist/esm/getTranslation.mjs.map +1 -1
- package/dist/esm/processDictionary/contentDictionary.d.mts +16 -0
- package/dist/esm/processDictionary/contentDictionary.mjs +1 -0
- package/dist/esm/processDictionary/index.d.mts +5 -4
- package/dist/esm/processDictionary/index.mjs +90 -24
- package/dist/esm/processDictionary/index.mjs.map +1 -1
- package/dist/esm/useIntlayerBase.mjs +3 -0
- package/dist/esm/useIntlayerBase.mjs.map +1 -1
- package/dist/esm/vite/intlayerPlugin.mjs +1 -1
- package/dist/esm/vite/intlayerPlugin.mjs.map +1 -1
- package/package.json +14 -8
- package/src/client/ContentEditionLayout.tsx +15 -0
- package/src/client/IntlayerClientProvider.tsx +8 -1
- package/src/getEnumeration.ts +0 -5
- package/src/getTranslation.ts +0 -5
- package/src/processDictionary/{contentDictionary.d.ts → contentDictionary.ts} +6 -5
- package/src/processDictionary/index.ts +111 -24
- package/src/useIntlayerBase.ts +3 -0
- package/src/vite/intlayerPlugin.ts +1 -1
- package/dist/cjs/ContentEditor/ContentEditor.cjs +0 -110
- package/dist/cjs/ContentEditor/ContentEditor.cjs.map +0 -1
- package/dist/cjs/ContentEditor/ContentEditor.d.ts +0 -8
- package/dist/cjs/ContentEditor/contentRender.cjs.map +0 -1
- package/dist/cjs/ContentEditor/contentRender.d.ts +0 -3
- package/dist/cjs/ContentEditor/index.cjs +0 -25
- package/dist/cjs/ContentEditor/index.cjs.map +0 -1
- package/dist/cjs/ContentEditor/index.d.ts +0 -3
- package/dist/cjs/processDictionary/contentDictionary.d.cjs.map +0 -1
- package/dist/cjs/processDictionary/contentDictionary.d.d.ts +0 -29
- package/dist/esm/ContentEditor/ContentEditor.d.mts +0 -8
- package/dist/esm/ContentEditor/ContentEditor.mjs +0 -92
- package/dist/esm/ContentEditor/ContentEditor.mjs.map +0 -1
- package/dist/esm/ContentEditor/contentRender.d.mts +0 -3
- package/dist/esm/ContentEditor/contentRender.mjs +0 -14
- package/dist/esm/ContentEditor/contentRender.mjs.map +0 -1
- package/dist/esm/ContentEditor/index.d.mts +0 -3
- package/dist/esm/ContentEditor/index.mjs +0 -3
- package/dist/esm/ContentEditor/index.mjs.map +0 -1
- package/dist/esm/processDictionary/contentDictionary.d.d.mts +0 -29
- package/dist/esm/processDictionary/contentDictionary.d.mjs +0 -1
- package/src/ContentEditor/ContentEditor.tsx +0 -116
- package/src/ContentEditor/contentRender.tsx +0 -11
- package/src/ContentEditor/index.tsx +0 -2
- /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 +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,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 +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,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,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 +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
|
-
};
|
/package/dist/esm/processDictionary/{contentDictionary.d.mjs.map → contentDictionary.mjs.map}
RENAMED
|
File without changes
|