@moldable-ai/editor 0.1.5 → 0.1.6
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/LICENSE +75 -71
- package/dist/components/markdown.d.ts +2 -0
- package/dist/components/markdown.d.ts.map +1 -0
- package/dist/components/markdown.js +2 -0
- package/dist/lib/lexical/editor-theme.js +2 -2
- package/dist/lib/lexical/mention-node.d.ts +28 -0
- package/dist/lib/lexical/mention-node.d.ts.map +1 -0
- package/dist/lib/lexical/mention-node.js +102 -0
- package/dist/lib/lexical/translation.d.ts +53 -0
- package/dist/lib/lexical/translation.d.ts.map +1 -0
- package/dist/lib/lexical/translation.js +267 -0
- package/dist/lib/lexical/translation.test.d.ts +2 -0
- package/dist/lib/lexical/translation.test.d.ts.map +1 -0
- package/dist/lib/lexical/translation.test.js +329 -0
- package/package.json +17 -17
- package/src/styles/index.css +19 -0
package/LICENSE
CHANGED
|
@@ -1,101 +1,105 @@
|
|
|
1
|
-
|
|
1
|
+
# Functional Source License, Version 1.1, ALv2 Future License
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Abbreviation
|
|
4
4
|
|
|
5
|
-
-
|
|
6
|
-
under the original license provided by the owner of the applicable component.
|
|
7
|
-
- All other content is available under the "Elastic License 2.0" license as defined below.
|
|
5
|
+
FSL-1.1-ALv2
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
## Notice
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
Copyright 2026 Desiderata LLC
|
|
12
10
|
|
|
13
|
-
##
|
|
11
|
+
## Terms and Conditions
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
### Licensor ("We")
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
The party offering the Software under these Terms and Conditions.
|
|
18
16
|
|
|
19
|
-
The
|
|
20
|
-
non-sublicensable, non-transferable license to use, copy, distribute, make
|
|
21
|
-
available, and prepare derivative works of the software, in each case subject to
|
|
22
|
-
the limitations and conditions below.
|
|
17
|
+
### The Software
|
|
23
18
|
|
|
24
|
-
|
|
19
|
+
The "Software" is each version of the software that we make available under
|
|
20
|
+
these Terms and Conditions, as indicated by our inclusion of these Terms and
|
|
21
|
+
Conditions with the Software.
|
|
25
22
|
|
|
26
|
-
|
|
27
|
-
service, where the service provides users with access to any substantial set of
|
|
28
|
-
the features or functionality of the software.
|
|
23
|
+
### License Grant
|
|
29
24
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
Subject to your compliance with this License Grant and the Patents,
|
|
26
|
+
Redistribution and Trademark clauses below, we hereby grant you the right to
|
|
27
|
+
use, copy, modify, create derivative works, publicly perform, publicly display
|
|
28
|
+
and redistribute the Software for any Permitted Purpose identified below.
|
|
33
29
|
|
|
34
|
-
|
|
35
|
-
of the licensor in the software. Any use of the licensor's trademarks is subject
|
|
36
|
-
to applicable law.
|
|
30
|
+
### Permitted Purpose
|
|
37
31
|
|
|
38
|
-
|
|
32
|
+
A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
|
|
33
|
+
means making the Software available to others in a commercial product or
|
|
34
|
+
service that:
|
|
39
35
|
|
|
40
|
-
|
|
41
|
-
license, or becomes able to license, to make, have made, use, sell, offer for
|
|
42
|
-
sale, import and have imported the software, in each case subject to the
|
|
43
|
-
limitations and conditions in this license. This license does not cover any
|
|
44
|
-
patent claims that you cause to be infringed by modifications or additions to
|
|
45
|
-
the software. If you or your company make any written claim that the software
|
|
46
|
-
infringes or contributes to infringement of any patent, your patent license for
|
|
47
|
-
the software granted under these terms ends immediately. If your company makes
|
|
48
|
-
such a claim, your patent license ends immediately for work on behalf of your
|
|
49
|
-
company.
|
|
36
|
+
1. substitutes for the Software;
|
|
50
37
|
|
|
51
|
-
|
|
38
|
+
2. substitutes for any other product or service we offer using the Software
|
|
39
|
+
that exists as of the date we make the Software available; or
|
|
52
40
|
|
|
53
|
-
|
|
54
|
-
also gets a copy of these terms.
|
|
41
|
+
3. offers the same or substantially similar functionality as the Software.
|
|
55
42
|
|
|
56
|
-
|
|
57
|
-
software prominent notices stating that you have modified the software.
|
|
43
|
+
Permitted Purposes specifically include using the Software:
|
|
58
44
|
|
|
59
|
-
|
|
45
|
+
1. for your internal use and access;
|
|
60
46
|
|
|
61
|
-
|
|
62
|
-
these terms.
|
|
47
|
+
2. for non-commercial education;
|
|
63
48
|
|
|
64
|
-
|
|
49
|
+
3. for non-commercial research; and
|
|
65
50
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
with a notice of your violation, and you cease all violation of this license no
|
|
69
|
-
later than 30 days after you receive that notice, your licenses will be
|
|
70
|
-
reinstated retroactively. However, if you violate these terms after such
|
|
71
|
-
reinstatement, any additional violation of these terms will cause your licenses
|
|
72
|
-
to terminate automatically and permanently.
|
|
51
|
+
4. in connection with professional services that you provide to a licensee
|
|
52
|
+
using the Software in accordance with these Terms and Conditions.
|
|
73
53
|
|
|
74
|
-
|
|
54
|
+
### Patents
|
|
75
55
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
56
|
+
To the extent your use for a Permitted Purpose would necessarily infringe our
|
|
57
|
+
patents, the license grant above includes a license under our patents. If you
|
|
58
|
+
make a claim against any party that the Software infringes or contributes to
|
|
59
|
+
the infringement of any patent, then your patent license to the Software ends
|
|
60
|
+
immediately.
|
|
80
61
|
|
|
81
|
-
|
|
62
|
+
### Redistribution
|
|
82
63
|
|
|
83
|
-
The
|
|
84
|
-
|
|
85
|
-
of it.
|
|
64
|
+
The Terms and Conditions apply to all copies, modifications and derivatives of
|
|
65
|
+
the Software.
|
|
86
66
|
|
|
87
|
-
|
|
67
|
+
If you redistribute any copies, modifications or derivatives of the Software,
|
|
68
|
+
you must include a copy of or a link to these Terms and Conditions and not
|
|
69
|
+
remove any copyright notices provided in or with the Software.
|
|
88
70
|
|
|
89
|
-
|
|
90
|
-
organization that you work for, plus all organizations that have control over,
|
|
91
|
-
are under the control of, or are under common control with that
|
|
92
|
-
organization. **control** means ownership of substantially all the assets of an
|
|
93
|
-
entity, or the power to direct its management and policies by vote, contract, or
|
|
94
|
-
otherwise. Control can be direct or indirect.
|
|
71
|
+
### Disclaimer
|
|
95
72
|
|
|
96
|
-
|
|
97
|
-
|
|
73
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
|
|
74
|
+
IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
|
|
75
|
+
PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
|
|
98
76
|
|
|
99
|
-
|
|
77
|
+
IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
|
|
78
|
+
SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
|
|
79
|
+
EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
|
|
100
80
|
|
|
101
|
-
|
|
81
|
+
### Trademarks
|
|
82
|
+
|
|
83
|
+
Except for displaying the License Details and identifying us as the origin of
|
|
84
|
+
the Software, you have no right under these Terms and Conditions to use our
|
|
85
|
+
trademarks, trade names, service marks or product names.
|
|
86
|
+
|
|
87
|
+
## Grant of Future License
|
|
88
|
+
|
|
89
|
+
We hereby irrevocably grant you an additional license to use the Software under
|
|
90
|
+
the Apache License, Version 2.0 that is effective on the second anniversary of
|
|
91
|
+
the date we make the Software available. On or after that date, you may use the
|
|
92
|
+
Software under the Apache License, Version 2.0, in which case the following
|
|
93
|
+
will apply:
|
|
94
|
+
|
|
95
|
+
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
96
|
+
this file except in compliance with the License.
|
|
97
|
+
|
|
98
|
+
You may obtain a copy of the License at
|
|
99
|
+
|
|
100
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
101
|
+
|
|
102
|
+
Unless required by applicable law or agreed to in writing, software distributed
|
|
103
|
+
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
|
|
104
|
+
CONDITIONS OF ANY KIND, either express or implied. See the License for the
|
|
105
|
+
specific language governing permissions and limitations under the License.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/components/markdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA"}
|
|
@@ -11,7 +11,7 @@ export const editorTheme = {
|
|
|
11
11
|
underline: 'underline',
|
|
12
12
|
strikethrough: 'line-through',
|
|
13
13
|
underlineStrikethrough: 'underline line-through',
|
|
14
|
-
code: 'bg-muted px-1
|
|
14
|
+
code: 'rounded bg-muted/60 px-1 py-0.5 font-sans text-[0.92em] text-muted-foreground break-words whitespace-normal',
|
|
15
15
|
},
|
|
16
16
|
heading: {
|
|
17
17
|
h1: 'text-2xl font-bold my-3',
|
|
@@ -33,5 +33,5 @@ export const editorTheme = {
|
|
|
33
33
|
},
|
|
34
34
|
link: 'text-primary underline hover:text-primary/80 cursor-pointer',
|
|
35
35
|
quote: 'border-l-4 border-muted px-4 py-2 my-2 text-muted-foreground',
|
|
36
|
-
code: 'bg-muted p-3 my-4 rounded font-mono text-sm',
|
|
36
|
+
code: 'bg-muted p-3 my-4 rounded-md overflow-x-auto font-mono text-sm leading-loose text-muted-foreground',
|
|
37
37
|
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { type DOMConversionMap, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedTextNode, type Spread, TextNode } from 'lexical';
|
|
2
|
+
export type SerializedMentionNode = Spread<{
|
|
3
|
+
username: string;
|
|
4
|
+
}, SerializedTextNode>;
|
|
5
|
+
/**
|
|
6
|
+
* MentionNode - A custom node for @mentions
|
|
7
|
+
* Extends TextNode to inherit text behavior but with custom styling
|
|
8
|
+
*/
|
|
9
|
+
export declare class MentionNode extends TextNode {
|
|
10
|
+
__username: string;
|
|
11
|
+
static getType(): string;
|
|
12
|
+
static clone(node: MentionNode): MentionNode;
|
|
13
|
+
constructor(username: string, key?: NodeKey);
|
|
14
|
+
createDOM(config: EditorConfig): HTMLElement;
|
|
15
|
+
updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
|
|
16
|
+
static importDOM(): DOMConversionMap | null;
|
|
17
|
+
exportDOM(): DOMExportOutput;
|
|
18
|
+
static importJSON(serializedNode: SerializedMentionNode): MentionNode;
|
|
19
|
+
exportJSON(): SerializedMentionNode;
|
|
20
|
+
getUsername(): string;
|
|
21
|
+
getTextContent(): string;
|
|
22
|
+
canInsertTextBefore(): boolean;
|
|
23
|
+
canInsertTextAfter(): boolean;
|
|
24
|
+
isTextEntity(): true;
|
|
25
|
+
}
|
|
26
|
+
export declare function $createMentionNode(username: string): MentionNode;
|
|
27
|
+
export declare function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode;
|
|
28
|
+
//# sourceMappingURL=mention-node.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mention-node.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/mention-node.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EAErB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,kBAAkB,EACvB,KAAK,MAAM,EACX,QAAQ,EACT,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,qBAAqB,GAAG,MAAM,CACxC;IACE,QAAQ,EAAE,MAAM,CAAA;CACjB,EACD,kBAAkB,CACnB,CAAA;AAiBD;;;GAGG;AACH,qBAAa,WAAY,SAAQ,QAAQ;IACvC,UAAU,EAAE,MAAM,CAAA;IAElB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW;gBAIhC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAK3C,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAQ5C,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,OAAO;IAQ1E,MAAM,CAAC,SAAS,IAAI,gBAAgB,GAAG,IAAI;IAc3C,SAAS,IAAI,eAAe;IAQ5B,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,qBAAqB,GAAG,WAAW;IASrE,UAAU,IAAI,qBAAqB;IAQnC,WAAW,IAAI,MAAM;IAIrB,cAAc,IAAI,MAAM;IAIxB,mBAAmB,IAAI,OAAO;IAI9B,kBAAkB,IAAI,OAAO;IAI7B,YAAY,IAAI,IAAI;CAGrB;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAIhE;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,WAAW,CAErB"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import { $applyNodeReplacement, TextNode, } from 'lexical';
|
|
2
|
+
function $convertMentionElement(domNode) {
|
|
3
|
+
const textContent = domNode.textContent;
|
|
4
|
+
if (textContent !== null) {
|
|
5
|
+
// Extract username from @username format
|
|
6
|
+
const username = textContent.startsWith('@')
|
|
7
|
+
? textContent.slice(1)
|
|
8
|
+
: textContent;
|
|
9
|
+
const node = $createMentionNode(username);
|
|
10
|
+
return { node };
|
|
11
|
+
}
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* MentionNode - A custom node for @mentions
|
|
16
|
+
* Extends TextNode to inherit text behavior but with custom styling
|
|
17
|
+
*/
|
|
18
|
+
export class MentionNode extends TextNode {
|
|
19
|
+
__username;
|
|
20
|
+
static getType() {
|
|
21
|
+
return 'mention';
|
|
22
|
+
}
|
|
23
|
+
static clone(node) {
|
|
24
|
+
return new MentionNode(node.__username, node.__key);
|
|
25
|
+
}
|
|
26
|
+
constructor(username, key) {
|
|
27
|
+
super(`@${username}`, key);
|
|
28
|
+
this.__username = username;
|
|
29
|
+
}
|
|
30
|
+
createDOM(config) {
|
|
31
|
+
const dom = super.createDOM(config);
|
|
32
|
+
dom.className = 'mention';
|
|
33
|
+
dom.setAttribute('data-lexical-mention', 'true');
|
|
34
|
+
dom.setAttribute('data-mention-username', this.__username);
|
|
35
|
+
return dom;
|
|
36
|
+
}
|
|
37
|
+
updateDOM(prevNode, dom, config) {
|
|
38
|
+
const isUpdated = super.updateDOM(prevNode, dom, config);
|
|
39
|
+
if (prevNode.__username !== this.__username) {
|
|
40
|
+
dom.setAttribute('data-mention-username', this.__username);
|
|
41
|
+
}
|
|
42
|
+
return isUpdated;
|
|
43
|
+
}
|
|
44
|
+
static importDOM() {
|
|
45
|
+
return {
|
|
46
|
+
span: (domNode) => {
|
|
47
|
+
if (domNode.hasAttribute('data-lexical-mention')) {
|
|
48
|
+
return {
|
|
49
|
+
conversion: $convertMentionElement,
|
|
50
|
+
priority: 1,
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
return null;
|
|
54
|
+
},
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
exportDOM() {
|
|
58
|
+
const element = document.createElement('span');
|
|
59
|
+
element.setAttribute('data-lexical-mention', 'true');
|
|
60
|
+
element.setAttribute('data-mention-username', this.__username);
|
|
61
|
+
element.textContent = this.getTextContent();
|
|
62
|
+
return { element };
|
|
63
|
+
}
|
|
64
|
+
static importJSON(serializedNode) {
|
|
65
|
+
const node = $createMentionNode(serializedNode.username);
|
|
66
|
+
node.setFormat(serializedNode.format);
|
|
67
|
+
node.setDetail(serializedNode.detail);
|
|
68
|
+
node.setMode(serializedNode.mode);
|
|
69
|
+
node.setStyle(serializedNode.style);
|
|
70
|
+
return node;
|
|
71
|
+
}
|
|
72
|
+
exportJSON() {
|
|
73
|
+
return {
|
|
74
|
+
...super.exportJSON(),
|
|
75
|
+
type: 'mention',
|
|
76
|
+
username: this.__username,
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
getUsername() {
|
|
80
|
+
return this.__username;
|
|
81
|
+
}
|
|
82
|
+
getTextContent() {
|
|
83
|
+
return `@${this.__username}`;
|
|
84
|
+
}
|
|
85
|
+
canInsertTextBefore() {
|
|
86
|
+
return false;
|
|
87
|
+
}
|
|
88
|
+
canInsertTextAfter() {
|
|
89
|
+
return false;
|
|
90
|
+
}
|
|
91
|
+
isTextEntity() {
|
|
92
|
+
return true;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
export function $createMentionNode(username) {
|
|
96
|
+
const mentionNode = new MentionNode(username);
|
|
97
|
+
mentionNode.setMode('segmented').toggleDirectionless();
|
|
98
|
+
return $applyNodeReplacement(mentionNode);
|
|
99
|
+
}
|
|
100
|
+
export function $isMentionNode(node) {
|
|
101
|
+
return node instanceof MentionNode;
|
|
102
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { ElementNode, LexicalEditor, LexicalNode } from 'lexical';
|
|
2
|
+
/**
|
|
3
|
+
* A block (paragraph, heading, etc.) ready for translation
|
|
4
|
+
*/
|
|
5
|
+
export interface TranslatableBlock {
|
|
6
|
+
/** The block node's key */
|
|
7
|
+
nodeKey: string;
|
|
8
|
+
/** XML string with text wrapped in <x id="nodeKey"> tags */
|
|
9
|
+
xml: string;
|
|
10
|
+
/** Map of text node keys to their format info */
|
|
11
|
+
formatMap: Map<string, number>;
|
|
12
|
+
/** Original node keys in order (for rebuilding if order changes) */
|
|
13
|
+
nodeOrder: string[];
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Extract translatable blocks from the editor.
|
|
17
|
+
* Each block's text nodes are wrapped in XML tags with their node keys as IDs.
|
|
18
|
+
*/
|
|
19
|
+
export declare function $extractTranslatableBlocks(_editor: LexicalEditor): TranslatableBlock[];
|
|
20
|
+
/**
|
|
21
|
+
* Parse translated XML response, extracting text by node ID.
|
|
22
|
+
* Returns a map of nodeKey -> translated text, plus the new order of nodes.
|
|
23
|
+
*/
|
|
24
|
+
export declare function parseTranslatedXml(xml: string): {
|
|
25
|
+
translations: Map<string, string>;
|
|
26
|
+
newOrder: string[];
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Apply translations to a block node.
|
|
30
|
+
* Rebuilds the text nodes with translated content, preserving original formatting.
|
|
31
|
+
*/
|
|
32
|
+
export declare function $applyBlockTranslation(blockNode: ElementNode, translations: Map<string, string>, formatMap: Map<string, number>, newOrder: string[]): void;
|
|
33
|
+
/**
|
|
34
|
+
* Get a node by its key from the editor
|
|
35
|
+
*/
|
|
36
|
+
export declare function $getNodeByKey(key: string): LexicalNode | null;
|
|
37
|
+
export interface TranslatableSegment {
|
|
38
|
+
nodeKey: string;
|
|
39
|
+
text: string;
|
|
40
|
+
type: string;
|
|
41
|
+
}
|
|
42
|
+
/** @deprecated Use $extractTranslatableBlocks instead */
|
|
43
|
+
export declare function $extractTranslatableSegments(): TranslatableSegment[];
|
|
44
|
+
/** @deprecated */
|
|
45
|
+
export declare function $applyTranslations(translations: Map<string, string>): void;
|
|
46
|
+
/** @deprecated */
|
|
47
|
+
export declare function $getTextSegmentsForTranslation(): {
|
|
48
|
+
texts: string[];
|
|
49
|
+
nodeKeys: string[];
|
|
50
|
+
};
|
|
51
|
+
/** @deprecated Use block-level translation */
|
|
52
|
+
export declare function translateEditorState(editor: LexicalEditor, translateFn: (texts: string[]) => Promise<string[]>): Promise<string>;
|
|
53
|
+
//# sourceMappingURL=translation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"translation.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/translation.ts"],"names":[],"mappings":"AAIA,OAAO,EAOL,WAAW,EACX,aAAa,EACb,WAAW,EACZ,MAAM,SAAS,CAAA;AAEhB;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAA;IACX,iDAAiD;IACjD,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,oEAAoE;IACpE,SAAS,EAAE,MAAM,EAAE,CAAA;CACpB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,aAAa,GACrB,iBAAiB,EAAE,CAkFrB;AAUD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG;IAC/C,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB,CAgBA;AAUD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,WAAW,EACtB,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EACjC,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,QAAQ,EAAE,MAAM,EAAE,GACjB,IAAI,CAeN;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAE7D;AAMD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb;AAED,yDAAyD;AACzD,wBAAgB,4BAA4B,IAAI,mBAAmB,EAAE,CA0BpE;AAED,kBAAkB;AAClB,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAmB1E;AAED,kBAAkB;AAClB,wBAAgB,8BAA8B,IAAI;IAChD,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB,CAqBA;AAED,8CAA8C;AAC9C,wBAAsB,oBAAoB,CACxC,MAAM,EAAE,aAAa,EACrB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,GAClD,OAAO,CAAC,MAAM,CAAC,CA2EjB"}
|
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
import { $isCodeNode } from '@lexical/code';
|
|
2
|
+
import { $isLinkNode } from '@lexical/link';
|
|
3
|
+
import { $isListItemNode } from '@lexical/list';
|
|
4
|
+
import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
|
|
5
|
+
import { $createTextNode, $getRoot, $isElementNode, $isParagraphNode, $isTextNode, $getNodeByKey as $lexicalGetNodeByKey, } from 'lexical';
|
|
6
|
+
/**
|
|
7
|
+
* Extract translatable blocks from the editor.
|
|
8
|
+
* Each block's text nodes are wrapped in XML tags with their node keys as IDs.
|
|
9
|
+
*/
|
|
10
|
+
export function $extractTranslatableBlocks(_editor) {
|
|
11
|
+
const blocks = [];
|
|
12
|
+
const root = $getRoot();
|
|
13
|
+
function processBlockNode(node) {
|
|
14
|
+
const formatMap = new Map();
|
|
15
|
+
const nodeOrder = [];
|
|
16
|
+
let xml = '';
|
|
17
|
+
function processChildren(parent) {
|
|
18
|
+
if ($isTextNode(parent)) {
|
|
19
|
+
const key = parent.getKey();
|
|
20
|
+
const text = parent.getTextContent();
|
|
21
|
+
const format = parent.getFormat();
|
|
22
|
+
formatMap.set(key, format);
|
|
23
|
+
nodeOrder.push(key);
|
|
24
|
+
xml += `<x id="${key}">${escapeXml(text)}</x>`;
|
|
25
|
+
}
|
|
26
|
+
else if ($isLinkNode(parent)) {
|
|
27
|
+
// For links, wrap the whole link content but track inner text nodes
|
|
28
|
+
const href = parent.getURL();
|
|
29
|
+
const linkKey = parent.getKey();
|
|
30
|
+
xml += `<a href="${escapeXml(href)}" id="${linkKey}">`;
|
|
31
|
+
for (const child of parent.getChildren()) {
|
|
32
|
+
processChildren(child);
|
|
33
|
+
}
|
|
34
|
+
xml += '</a>';
|
|
35
|
+
}
|
|
36
|
+
else if ($isElementNode(parent)) {
|
|
37
|
+
for (const child of parent.getChildren()) {
|
|
38
|
+
processChildren(child);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
processChildren(node);
|
|
43
|
+
// Skip empty blocks
|
|
44
|
+
if (!xml.trim() || nodeOrder.length === 0) {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
return {
|
|
48
|
+
nodeKey: node.getKey(),
|
|
49
|
+
xml,
|
|
50
|
+
formatMap,
|
|
51
|
+
nodeOrder,
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
function walkTree(node) {
|
|
55
|
+
// Skip code blocks - don't translate code
|
|
56
|
+
if ($isCodeNode(node)) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
// These are our translatable block types
|
|
60
|
+
if ($isParagraphNode(node) ||
|
|
61
|
+
$isHeadingNode(node) ||
|
|
62
|
+
$isQuoteNode(node) ||
|
|
63
|
+
$isListItemNode(node)) {
|
|
64
|
+
const block = processBlockNode(node);
|
|
65
|
+
if (block) {
|
|
66
|
+
blocks.push(block);
|
|
67
|
+
}
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
// For lists and other containers, recurse into children
|
|
71
|
+
if ($isElementNode(node)) {
|
|
72
|
+
for (const child of node.getChildren()) {
|
|
73
|
+
walkTree(child);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
for (const child of root.getChildren()) {
|
|
78
|
+
walkTree(child);
|
|
79
|
+
}
|
|
80
|
+
return blocks;
|
|
81
|
+
}
|
|
82
|
+
function escapeXml(text) {
|
|
83
|
+
return text
|
|
84
|
+
.replace(/&/g, '&')
|
|
85
|
+
.replace(/</g, '<')
|
|
86
|
+
.replace(/>/g, '>')
|
|
87
|
+
.replace(/"/g, '"');
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Parse translated XML response, extracting text by node ID.
|
|
91
|
+
* Returns a map of nodeKey -> translated text, plus the new order of nodes.
|
|
92
|
+
*/
|
|
93
|
+
export function parseTranslatedXml(xml) {
|
|
94
|
+
const translations = new Map();
|
|
95
|
+
const newOrder = [];
|
|
96
|
+
// Simple regex-based parser for our known XML structure
|
|
97
|
+
// Matches <x id="...">content</x> and <a href="..." id="...">...</a>
|
|
98
|
+
const tagRegex = /<x id="([^"]+)">([^<]*)<\/x>/g;
|
|
99
|
+
let match;
|
|
100
|
+
while ((match = tagRegex.exec(xml)) !== null) {
|
|
101
|
+
const [, id, content] = match;
|
|
102
|
+
translations.set(id, unescapeXml(content));
|
|
103
|
+
newOrder.push(id);
|
|
104
|
+
}
|
|
105
|
+
return { translations, newOrder };
|
|
106
|
+
}
|
|
107
|
+
function unescapeXml(text) {
|
|
108
|
+
return text
|
|
109
|
+
.replace(/"/g, '"')
|
|
110
|
+
.replace(/>/g, '>')
|
|
111
|
+
.replace(/</g, '<')
|
|
112
|
+
.replace(/&/g, '&');
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Apply translations to a block node.
|
|
116
|
+
* Rebuilds the text nodes with translated content, preserving original formatting.
|
|
117
|
+
*/
|
|
118
|
+
export function $applyBlockTranslation(blockNode, translations, formatMap, newOrder) {
|
|
119
|
+
// Clear existing children
|
|
120
|
+
blockNode.clear();
|
|
121
|
+
// Rebuild in the new order with translated text and original formatting
|
|
122
|
+
for (const nodeKey of newOrder) {
|
|
123
|
+
const translatedText = translations.get(nodeKey);
|
|
124
|
+
const format = formatMap.get(nodeKey) ?? 0;
|
|
125
|
+
if (translatedText !== undefined) {
|
|
126
|
+
const textNode = $createTextNode(translatedText);
|
|
127
|
+
textNode.setFormat(format);
|
|
128
|
+
blockNode.append(textNode);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* Get a node by its key from the editor
|
|
134
|
+
*/
|
|
135
|
+
export function $getNodeByKey(key) {
|
|
136
|
+
return $lexicalGetNodeByKey(key);
|
|
137
|
+
}
|
|
138
|
+
/** @deprecated Use $extractTranslatableBlocks instead */
|
|
139
|
+
export function $extractTranslatableSegments() {
|
|
140
|
+
const segments = [];
|
|
141
|
+
const root = $getRoot();
|
|
142
|
+
function extractFromNode(node) {
|
|
143
|
+
if ($isTextNode(node)) {
|
|
144
|
+
const text = node.getTextContent();
|
|
145
|
+
if (text.trim()) {
|
|
146
|
+
segments.push({
|
|
147
|
+
nodeKey: node.getKey(),
|
|
148
|
+
text: text,
|
|
149
|
+
type: 'text',
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
else if ($isElementNode(node)) {
|
|
154
|
+
for (const child of node.getChildren()) {
|
|
155
|
+
extractFromNode(child);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
for (const child of root.getChildren()) {
|
|
160
|
+
extractFromNode(child);
|
|
161
|
+
}
|
|
162
|
+
return segments;
|
|
163
|
+
}
|
|
164
|
+
/** @deprecated */
|
|
165
|
+
export function $applyTranslations(translations) {
|
|
166
|
+
const root = $getRoot();
|
|
167
|
+
function applyToNode(node) {
|
|
168
|
+
if ($isTextNode(node)) {
|
|
169
|
+
const translation = translations.get(node.getKey());
|
|
170
|
+
if (translation !== undefined) {
|
|
171
|
+
node.setTextContent(translation);
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
else if ($isElementNode(node)) {
|
|
175
|
+
for (const child of node.getChildren()) {
|
|
176
|
+
applyToNode(child);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
for (const child of root.getChildren()) {
|
|
181
|
+
applyToNode(child);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
/** @deprecated */
|
|
185
|
+
export function $getTextSegmentsForTranslation() {
|
|
186
|
+
const texts = [];
|
|
187
|
+
const nodeKeys = [];
|
|
188
|
+
const root = $getRoot();
|
|
189
|
+
function processNode(node) {
|
|
190
|
+
if ($isTextNode(node)) {
|
|
191
|
+
texts.push(node.getTextContent());
|
|
192
|
+
nodeKeys.push(node.getKey());
|
|
193
|
+
}
|
|
194
|
+
else if ($isElementNode(node)) {
|
|
195
|
+
for (const child of node.getChildren()) {
|
|
196
|
+
processNode(child);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
for (const child of root.getChildren()) {
|
|
201
|
+
processNode(child);
|
|
202
|
+
}
|
|
203
|
+
return { texts, nodeKeys };
|
|
204
|
+
}
|
|
205
|
+
/** @deprecated Use block-level translation */
|
|
206
|
+
export async function translateEditorState(editor, translateFn) {
|
|
207
|
+
const segments = await new Promise((resolve) => {
|
|
208
|
+
editor.getEditorState().read(() => {
|
|
209
|
+
resolve($extractTranslatableSegments());
|
|
210
|
+
});
|
|
211
|
+
});
|
|
212
|
+
if (segments.length === 0) {
|
|
213
|
+
return '';
|
|
214
|
+
}
|
|
215
|
+
const textsToTranslate = segments.map((s) => s.text);
|
|
216
|
+
const translations = await translateFn(textsToTranslate);
|
|
217
|
+
const translationsByIndex = new Map();
|
|
218
|
+
translations.forEach((translation, index) => {
|
|
219
|
+
translationsByIndex.set(index, translation);
|
|
220
|
+
});
|
|
221
|
+
const { createMoldableHeadlessEditor } = await import('./headless-editor');
|
|
222
|
+
const translatedEditor = createMoldableHeadlessEditor();
|
|
223
|
+
const { $convertToMarkdownString, $convertFromMarkdownString, markdownTransformers, } = await import('./markdown-transformers');
|
|
224
|
+
const originalMarkdown = await new Promise((resolve) => {
|
|
225
|
+
editor.getEditorState().read(() => {
|
|
226
|
+
resolve($convertToMarkdownString({ transformers: markdownTransformers }));
|
|
227
|
+
});
|
|
228
|
+
});
|
|
229
|
+
await new Promise((resolve) => {
|
|
230
|
+
translatedEditor.update(() => {
|
|
231
|
+
$convertFromMarkdownString({
|
|
232
|
+
markdown: originalMarkdown,
|
|
233
|
+
transformers: markdownTransformers,
|
|
234
|
+
});
|
|
235
|
+
resolve();
|
|
236
|
+
});
|
|
237
|
+
});
|
|
238
|
+
await new Promise((resolve) => {
|
|
239
|
+
translatedEditor.update(() => {
|
|
240
|
+
let index = 0;
|
|
241
|
+
const root = $getRoot();
|
|
242
|
+
function applyToNode(node) {
|
|
243
|
+
if ($isTextNode(node)) {
|
|
244
|
+
const translation = translationsByIndex.get(index);
|
|
245
|
+
if (translation !== undefined) {
|
|
246
|
+
node.setTextContent(translation);
|
|
247
|
+
}
|
|
248
|
+
index++;
|
|
249
|
+
}
|
|
250
|
+
else if ($isElementNode(node)) {
|
|
251
|
+
for (const child of node.getChildren()) {
|
|
252
|
+
applyToNode(child);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
for (const child of root.getChildren()) {
|
|
257
|
+
applyToNode(child);
|
|
258
|
+
}
|
|
259
|
+
resolve();
|
|
260
|
+
});
|
|
261
|
+
});
|
|
262
|
+
return new Promise((resolve) => {
|
|
263
|
+
translatedEditor.getEditorState().read(() => {
|
|
264
|
+
resolve($convertToMarkdownString({ transformers: markdownTransformers }));
|
|
265
|
+
});
|
|
266
|
+
});
|
|
267
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"translation.test.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/translation.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
import { describe, expect, it } from 'vitest';
|
|
2
|
+
import { createMoldableHeadlessEditor } from './headless-editor';
|
|
3
|
+
import { $extractTranslatableSegments, $applyTranslations, $getTextSegmentsForTranslation, translateEditorState, } from './translation';
|
|
4
|
+
import { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers } from './markdown-transformers';
|
|
5
|
+
describe('Translation Utilities', () => {
|
|
6
|
+
describe('$extractTranslatableSegments', () => {
|
|
7
|
+
it('extracts text from a simple paragraph', async () => {
|
|
8
|
+
const editor = createMoldableHeadlessEditor();
|
|
9
|
+
await new Promise((resolve) => {
|
|
10
|
+
editor.update(() => {
|
|
11
|
+
$convertFromMarkdownString({ markdown: 'Hello world' });
|
|
12
|
+
resolve();
|
|
13
|
+
});
|
|
14
|
+
});
|
|
15
|
+
const segments = await new Promise((resolve) => {
|
|
16
|
+
editor.getEditorState().read(() => {
|
|
17
|
+
resolve($extractTranslatableSegments());
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
expect(segments).toHaveLength(1);
|
|
21
|
+
expect(segments[0].text).toBe('Hello world');
|
|
22
|
+
});
|
|
23
|
+
it('extracts text from multiple paragraphs', async () => {
|
|
24
|
+
const editor = createMoldableHeadlessEditor();
|
|
25
|
+
await new Promise((resolve) => {
|
|
26
|
+
editor.update(() => {
|
|
27
|
+
$convertFromMarkdownString({ markdown: 'First paragraph\n\nSecond paragraph' });
|
|
28
|
+
resolve();
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
const segments = await new Promise((resolve) => {
|
|
32
|
+
editor.getEditorState().read(() => {
|
|
33
|
+
resolve($extractTranslatableSegments());
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
expect(segments).toHaveLength(2);
|
|
37
|
+
expect(segments[0].text).toBe('First paragraph');
|
|
38
|
+
expect(segments[1].text).toBe('Second paragraph');
|
|
39
|
+
});
|
|
40
|
+
it('extracts text from headings', async () => {
|
|
41
|
+
const editor = createMoldableHeadlessEditor();
|
|
42
|
+
await new Promise((resolve) => {
|
|
43
|
+
editor.update(() => {
|
|
44
|
+
$convertFromMarkdownString({ markdown: '# Title\n\nContent' });
|
|
45
|
+
resolve();
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
const segments = await new Promise((resolve) => {
|
|
49
|
+
editor.getEditorState().read(() => {
|
|
50
|
+
resolve($extractTranslatableSegments());
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
expect(segments).toHaveLength(2);
|
|
54
|
+
expect(segments[0].text).toBe('Title');
|
|
55
|
+
expect(segments[1].text).toBe('Content');
|
|
56
|
+
});
|
|
57
|
+
it('extracts text from list items', async () => {
|
|
58
|
+
const editor = createMoldableHeadlessEditor();
|
|
59
|
+
await new Promise((resolve) => {
|
|
60
|
+
editor.update(() => {
|
|
61
|
+
$convertFromMarkdownString({ markdown: '- Item 1\n- Item 2\n- Item 3' });
|
|
62
|
+
resolve();
|
|
63
|
+
});
|
|
64
|
+
});
|
|
65
|
+
const segments = await new Promise((resolve) => {
|
|
66
|
+
editor.getEditorState().read(() => {
|
|
67
|
+
resolve($extractTranslatableSegments());
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
expect(segments).toHaveLength(3);
|
|
71
|
+
expect(segments[0].text).toBe('Item 1');
|
|
72
|
+
expect(segments[1].text).toBe('Item 2');
|
|
73
|
+
expect(segments[2].text).toBe('Item 3');
|
|
74
|
+
});
|
|
75
|
+
it('handles bold and italic text as separate segments', async () => {
|
|
76
|
+
const editor = createMoldableHeadlessEditor();
|
|
77
|
+
await new Promise((resolve) => {
|
|
78
|
+
editor.update(() => {
|
|
79
|
+
$convertFromMarkdownString({ markdown: 'This is **bold** and *italic* text' });
|
|
80
|
+
resolve();
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
const segments = await new Promise((resolve) => {
|
|
84
|
+
editor.getEditorState().read(() => {
|
|
85
|
+
resolve($extractTranslatableSegments());
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
// Bold and italic are separate text nodes
|
|
89
|
+
expect(segments.length).toBeGreaterThanOrEqual(3);
|
|
90
|
+
const allText = segments.map(s => s.text).join('');
|
|
91
|
+
expect(allText).toContain('bold');
|
|
92
|
+
expect(allText).toContain('italic');
|
|
93
|
+
});
|
|
94
|
+
it('extracts text from blockquotes', async () => {
|
|
95
|
+
const editor = createMoldableHeadlessEditor();
|
|
96
|
+
await new Promise((resolve) => {
|
|
97
|
+
editor.update(() => {
|
|
98
|
+
$convertFromMarkdownString({ markdown: '> This is a quote' });
|
|
99
|
+
resolve();
|
|
100
|
+
});
|
|
101
|
+
});
|
|
102
|
+
const segments = await new Promise((resolve) => {
|
|
103
|
+
editor.getEditorState().read(() => {
|
|
104
|
+
resolve($extractTranslatableSegments());
|
|
105
|
+
});
|
|
106
|
+
});
|
|
107
|
+
expect(segments).toHaveLength(1);
|
|
108
|
+
expect(segments[0].text).toBe('This is a quote');
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
describe('$applyTranslations', () => {
|
|
112
|
+
it('applies translations to text nodes', async () => {
|
|
113
|
+
const editor = createMoldableHeadlessEditor();
|
|
114
|
+
// Set up initial content
|
|
115
|
+
await new Promise((resolve) => {
|
|
116
|
+
editor.update(() => {
|
|
117
|
+
$convertFromMarkdownString({ markdown: 'Hello world' });
|
|
118
|
+
resolve();
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
// Get segments
|
|
122
|
+
const segments = await new Promise((resolve) => {
|
|
123
|
+
editor.getEditorState().read(() => {
|
|
124
|
+
resolve($extractTranslatableSegments());
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
// Apply translations
|
|
128
|
+
const translationMap = new Map();
|
|
129
|
+
translationMap.set(segments[0].nodeKey, 'Hej verden');
|
|
130
|
+
await new Promise((resolve) => {
|
|
131
|
+
editor.update(() => {
|
|
132
|
+
$applyTranslations(translationMap);
|
|
133
|
+
resolve();
|
|
134
|
+
});
|
|
135
|
+
});
|
|
136
|
+
// Verify translation was applied
|
|
137
|
+
const result = await new Promise((resolve) => {
|
|
138
|
+
editor.getEditorState().read(() => {
|
|
139
|
+
resolve($convertToMarkdownString({ transformers: markdownTransformers }));
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
expect(result).toBe('Hej verden');
|
|
143
|
+
});
|
|
144
|
+
it('preserves structure when applying translations', async () => {
|
|
145
|
+
const editor = createMoldableHeadlessEditor();
|
|
146
|
+
await new Promise((resolve) => {
|
|
147
|
+
editor.update(() => {
|
|
148
|
+
$convertFromMarkdownString({ markdown: '# Title\n\n- Item 1\n- Item 2' });
|
|
149
|
+
resolve();
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
const segments = await new Promise((resolve) => {
|
|
153
|
+
editor.getEditorState().read(() => {
|
|
154
|
+
resolve($extractTranslatableSegments());
|
|
155
|
+
});
|
|
156
|
+
});
|
|
157
|
+
// Translate each segment
|
|
158
|
+
const translationMap = new Map();
|
|
159
|
+
segments.forEach((seg) => {
|
|
160
|
+
if (seg.text === 'Title')
|
|
161
|
+
translationMap.set(seg.nodeKey, 'Titel');
|
|
162
|
+
if (seg.text === 'Item 1')
|
|
163
|
+
translationMap.set(seg.nodeKey, 'Element 1');
|
|
164
|
+
if (seg.text === 'Item 2')
|
|
165
|
+
translationMap.set(seg.nodeKey, 'Element 2');
|
|
166
|
+
});
|
|
167
|
+
await new Promise((resolve) => {
|
|
168
|
+
editor.update(() => {
|
|
169
|
+
$applyTranslations(translationMap);
|
|
170
|
+
resolve();
|
|
171
|
+
});
|
|
172
|
+
});
|
|
173
|
+
const result = await new Promise((resolve) => {
|
|
174
|
+
editor.getEditorState().read(() => {
|
|
175
|
+
resolve($convertToMarkdownString({ transformers: markdownTransformers }));
|
|
176
|
+
});
|
|
177
|
+
});
|
|
178
|
+
expect(result).toContain('# Titel');
|
|
179
|
+
expect(result).toContain('- Element 1');
|
|
180
|
+
expect(result).toContain('- Element 2');
|
|
181
|
+
});
|
|
182
|
+
});
|
|
183
|
+
describe('$getTextSegmentsForTranslation', () => {
|
|
184
|
+
it('returns parallel arrays of texts and keys', async () => {
|
|
185
|
+
const editor = createMoldableHeadlessEditor();
|
|
186
|
+
await new Promise((resolve) => {
|
|
187
|
+
editor.update(() => {
|
|
188
|
+
$convertFromMarkdownString({ markdown: 'Hello\n\nWorld' });
|
|
189
|
+
resolve();
|
|
190
|
+
});
|
|
191
|
+
});
|
|
192
|
+
const result = await new Promise((resolve) => {
|
|
193
|
+
editor.getEditorState().read(() => {
|
|
194
|
+
resolve($getTextSegmentsForTranslation());
|
|
195
|
+
});
|
|
196
|
+
});
|
|
197
|
+
expect(result.texts).toHaveLength(2);
|
|
198
|
+
expect(result.nodeKeys).toHaveLength(2);
|
|
199
|
+
expect(result.texts[0]).toBe('Hello');
|
|
200
|
+
expect(result.texts[1]).toBe('World');
|
|
201
|
+
});
|
|
202
|
+
});
|
|
203
|
+
describe('translateEditorState', () => {
|
|
204
|
+
it('translates content and returns markdown', async () => {
|
|
205
|
+
const editor = createMoldableHeadlessEditor();
|
|
206
|
+
await new Promise((resolve) => {
|
|
207
|
+
editor.update(() => {
|
|
208
|
+
$convertFromMarkdownString({ markdown: '# Hello\n\nWorld' });
|
|
209
|
+
resolve();
|
|
210
|
+
});
|
|
211
|
+
});
|
|
212
|
+
// Mock translate function
|
|
213
|
+
const translateFn = async (texts) => {
|
|
214
|
+
return texts.map((t) => {
|
|
215
|
+
if (t === 'Hello')
|
|
216
|
+
return 'Bonjour';
|
|
217
|
+
if (t === 'World')
|
|
218
|
+
return 'Monde';
|
|
219
|
+
return t;
|
|
220
|
+
});
|
|
221
|
+
};
|
|
222
|
+
const result = await translateEditorState(editor, translateFn);
|
|
223
|
+
expect(result).toContain('# Bonjour');
|
|
224
|
+
expect(result).toContain('Monde');
|
|
225
|
+
});
|
|
226
|
+
it('preserves formatting during translation', async () => {
|
|
227
|
+
const editor = createMoldableHeadlessEditor();
|
|
228
|
+
await new Promise((resolve) => {
|
|
229
|
+
editor.update(() => {
|
|
230
|
+
$convertFromMarkdownString({
|
|
231
|
+
markdown: '**Bold text** and *italic text*'
|
|
232
|
+
});
|
|
233
|
+
resolve();
|
|
234
|
+
});
|
|
235
|
+
});
|
|
236
|
+
const translateFn = async (texts) => {
|
|
237
|
+
return texts.map((t) => `[${t}]`); // Just wrap for testing
|
|
238
|
+
};
|
|
239
|
+
const result = await translateEditorState(editor, translateFn);
|
|
240
|
+
// Should preserve bold and italic markers
|
|
241
|
+
expect(result).toContain('**');
|
|
242
|
+
expect(result).toContain('*');
|
|
243
|
+
});
|
|
244
|
+
it('handles complex medical note structure', async () => {
|
|
245
|
+
const editor = createMoldableHeadlessEditor();
|
|
246
|
+
const medicalNote = `# Patient Notes
|
|
247
|
+
|
|
248
|
+
## Chief Complaint
|
|
249
|
+
Patient presents with chest pain.
|
|
250
|
+
|
|
251
|
+
## Assessment
|
|
252
|
+
- Stable condition
|
|
253
|
+
- No immediate concerns
|
|
254
|
+
|
|
255
|
+
> Doctor's note: Follow up in 2 weeks`;
|
|
256
|
+
await new Promise((resolve) => {
|
|
257
|
+
editor.update(() => {
|
|
258
|
+
$convertFromMarkdownString({ markdown: medicalNote });
|
|
259
|
+
resolve();
|
|
260
|
+
});
|
|
261
|
+
});
|
|
262
|
+
// Simple translation that uppercases everything
|
|
263
|
+
const translateFn = async (texts) => {
|
|
264
|
+
return texts.map((t) => t.toUpperCase());
|
|
265
|
+
};
|
|
266
|
+
const result = await translateEditorState(editor, translateFn);
|
|
267
|
+
// Should preserve structure
|
|
268
|
+
expect(result).toContain('# PATIENT NOTES');
|
|
269
|
+
expect(result).toContain('## CHIEF COMPLAINT');
|
|
270
|
+
expect(result).toContain('- STABLE CONDITION');
|
|
271
|
+
expect(result).toContain('>');
|
|
272
|
+
});
|
|
273
|
+
it('handles empty content', async () => {
|
|
274
|
+
const editor = createMoldableHeadlessEditor();
|
|
275
|
+
await new Promise((resolve) => {
|
|
276
|
+
editor.update(() => {
|
|
277
|
+
$convertFromMarkdownString({ markdown: '' });
|
|
278
|
+
resolve();
|
|
279
|
+
});
|
|
280
|
+
});
|
|
281
|
+
const translateFn = async (texts) => texts;
|
|
282
|
+
const result = await translateEditorState(editor, translateFn);
|
|
283
|
+
expect(result).toBe('');
|
|
284
|
+
});
|
|
285
|
+
});
|
|
286
|
+
describe('round-trip translation', () => {
|
|
287
|
+
const testCases = [
|
|
288
|
+
{ name: 'simple paragraph', markdown: 'Hello world' },
|
|
289
|
+
{ name: 'heading', markdown: '# Title' },
|
|
290
|
+
{ name: 'multiple headings', markdown: '# H1\n\n## H2\n\n### H3' },
|
|
291
|
+
{ name: 'bullet list', markdown: '- Item 1\n- Item 2\n- Item 3' },
|
|
292
|
+
{ name: 'numbered list', markdown: '1. First\n2. Second\n3. Third' },
|
|
293
|
+
{ name: 'blockquote', markdown: '> This is a quote' },
|
|
294
|
+
{ name: 'bold text', markdown: '**bold**' },
|
|
295
|
+
{ name: 'italic text', markdown: '*italic*' },
|
|
296
|
+
{ name: 'mixed formatting', markdown: 'Normal **bold** and *italic*' },
|
|
297
|
+
{ name: 'code inline', markdown: 'Use `code` here' },
|
|
298
|
+
{ name: 'horizontal rule', markdown: 'Before\n\n***\n\nAfter' },
|
|
299
|
+
];
|
|
300
|
+
testCases.forEach(({ name, markdown }) => {
|
|
301
|
+
it(`preserves structure for ${name}`, async () => {
|
|
302
|
+
const editor = createMoldableHeadlessEditor();
|
|
303
|
+
await new Promise((resolve) => {
|
|
304
|
+
editor.update(() => {
|
|
305
|
+
$convertFromMarkdownString({ markdown });
|
|
306
|
+
resolve();
|
|
307
|
+
});
|
|
308
|
+
});
|
|
309
|
+
// Identity translation (no change)
|
|
310
|
+
const translateFn = async (texts) => texts;
|
|
311
|
+
const result = await translateEditorState(editor, translateFn);
|
|
312
|
+
// Re-import and re-export to normalize
|
|
313
|
+
const editor2 = createMoldableHeadlessEditor();
|
|
314
|
+
await new Promise((resolve) => {
|
|
315
|
+
editor2.update(() => {
|
|
316
|
+
$convertFromMarkdownString({ markdown });
|
|
317
|
+
resolve();
|
|
318
|
+
});
|
|
319
|
+
});
|
|
320
|
+
const expected = await new Promise((resolve) => {
|
|
321
|
+
editor2.getEditorState().read(() => {
|
|
322
|
+
resolve($convertToMarkdownString({ transformers: markdownTransformers }));
|
|
323
|
+
});
|
|
324
|
+
});
|
|
325
|
+
expect(result).toBe(expected);
|
|
326
|
+
});
|
|
327
|
+
});
|
|
328
|
+
});
|
|
329
|
+
});
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moldable-ai/editor",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "Rich text markdown editor for Moldable applications",
|
|
5
5
|
"author": "Desiderata LLC",
|
|
6
|
-
"license": "
|
|
6
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
9
|
"url": "https://github.com/moldable-ai/moldable.git",
|
|
@@ -32,6 +32,15 @@
|
|
|
32
32
|
"src/styles",
|
|
33
33
|
"LICENSE"
|
|
34
34
|
],
|
|
35
|
+
"scripts": {
|
|
36
|
+
"build": "tsc",
|
|
37
|
+
"dev": "tsc --watch",
|
|
38
|
+
"test": "vitest run",
|
|
39
|
+
"test:watch": "vitest",
|
|
40
|
+
"lint": "eslint . --ext .ts,.tsx --max-warnings 0",
|
|
41
|
+
"format": "prettier --write . --ignore-path ../../.prettierignore",
|
|
42
|
+
"check-types": "tsc --noEmit"
|
|
43
|
+
},
|
|
35
44
|
"dependencies": {
|
|
36
45
|
"@lexical/clipboard": "^0.39.0",
|
|
37
46
|
"@lexical/code": "^0.39.0",
|
|
@@ -52,30 +61,21 @@
|
|
|
52
61
|
"remark-gfm": "^4.0.1"
|
|
53
62
|
},
|
|
54
63
|
"devDependencies": {
|
|
64
|
+
"@moldable-ai/eslint-config": "workspace:*",
|
|
65
|
+
"@moldable-ai/prettier-config": "workspace:*",
|
|
66
|
+
"@moldable-ai/typescript-config": "workspace:*",
|
|
67
|
+
"@moldable-ai/ui": "workspace:^",
|
|
55
68
|
"@types/jsdom": "^27.0.0",
|
|
56
69
|
"@types/node": "^24.0.3",
|
|
57
70
|
"@types/react": "^19.1.6",
|
|
58
71
|
"@types/react-dom": "^19.1.6",
|
|
59
72
|
"jsdom": "^27.4.0",
|
|
60
73
|
"typescript": "^5.8.3",
|
|
61
|
-
"vitest": "^4.0.16"
|
|
62
|
-
"@moldable-ai/eslint-config": "0.1.2",
|
|
63
|
-
"@moldable-ai/prettier-config": "0.1.2",
|
|
64
|
-
"@moldable-ai/typescript-config": "0.1.2",
|
|
65
|
-
"@moldable-ai/ui": "^0.2.5"
|
|
74
|
+
"vitest": "^4.0.16"
|
|
66
75
|
},
|
|
67
76
|
"peerDependencies": {
|
|
68
77
|
"@moldable-ai/ui": ">=0.2.5",
|
|
69
78
|
"react": "^19.0.0",
|
|
70
79
|
"react-dom": "^19.0.0"
|
|
71
|
-
},
|
|
72
|
-
"scripts": {
|
|
73
|
-
"build": "tsc",
|
|
74
|
-
"dev": "tsc --watch",
|
|
75
|
-
"test": "vitest run",
|
|
76
|
-
"test:watch": "vitest",
|
|
77
|
-
"lint": "eslint . --ext .ts,.tsx --max-warnings 0",
|
|
78
|
-
"format": "prettier --write . --ignore-path ../../.prettierignore",
|
|
79
|
-
"check-types": "tsc --noEmit"
|
|
80
80
|
}
|
|
81
|
-
}
|
|
81
|
+
}
|
package/src/styles/index.css
CHANGED
|
@@ -61,6 +61,25 @@
|
|
|
61
61
|
display: none;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
/* Code styles */
|
|
65
|
+
[data-lexical-editor='true'] pre {
|
|
66
|
+
overflow-x: auto;
|
|
67
|
+
overflow-wrap: anywhere;
|
|
68
|
+
white-space: pre-wrap;
|
|
69
|
+
tab-size: 2;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
[data-lexical-editor='true'] pre *,
|
|
73
|
+
[data-lexical-editor='true'] pre [data-lexical-text='true'] {
|
|
74
|
+
line-height: inherit;
|
|
75
|
+
letter-spacing: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[data-lexical-editor='true'] :not(pre) > code {
|
|
79
|
+
white-space: normal;
|
|
80
|
+
word-break: break-word;
|
|
81
|
+
}
|
|
82
|
+
|
|
64
83
|
/* Mention styles */
|
|
65
84
|
.mention {
|
|
66
85
|
color: hsl(var(--primary));
|