@lexion-rte/react 0.1.3 → 0.1.5
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/CHANGELOG.md +26 -0
- package/README.md +7 -1
- package/dist/LexionEditorView.d.ts.map +1 -1
- package/dist/LexionEditorView.js +20 -15
- package/dist/LexionEditorView.js.map +1 -1
- package/package.json +4 -4
- package/src/LexionEditorView.tsx +60 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @lexion-rte/react
|
|
2
2
|
|
|
3
|
+
## 0.1.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 1d74f2e: Introduce the open-core package split for Lexion.
|
|
8
|
+
|
|
9
|
+
Community editing features now ship in `@lexion-rte/starter-kit`, while commercial-only capabilities move behind private package boundaries. Public documentation and package metadata now describe the dual-license/open-core model consistently.
|
|
10
|
+
|
|
11
|
+
Migration note:
|
|
12
|
+
|
|
13
|
+
- replace imports from `@lexion-rte/extensions` with `@lexion-rte/starter-kit` for starter-kit commands and extensions
|
|
14
|
+
- use the new package/docs structure for community versus commercial features going forward
|
|
15
|
+
|
|
16
|
+
- Updated dependencies [1d74f2e]
|
|
17
|
+
- @lexion-rte/starter-kit@0.2.0
|
|
18
|
+
- @lexion-rte/core@0.1.5
|
|
19
|
+
|
|
20
|
+
## 0.1.4
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- Add a shared Lexion framework overview and logo at the top of each package README.
|
|
25
|
+
- Updated dependencies
|
|
26
|
+
- @lexion-rte/core@0.1.4
|
|
27
|
+
- @lexion-rte/extensions@0.1.4
|
|
28
|
+
|
|
3
29
|
## 0.1.3
|
|
4
30
|
|
|
5
31
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
This package is part of the Lexion framework-agnostic rich text editor.
|
|
4
|
+
|
|
5
|
+
Lexion is a framework-agnostic, headless rich text editor platform built on ProseMirror, designed to provide a shared core, reusable extensions, and framework-specific adapters.
|
|
6
|
+
|
|
1
7
|
# @lexion-rte/react
|
|
2
8
|
|
|
3
9
|
React adapter for Lexion.
|
|
@@ -67,7 +73,7 @@ export function ControlledEditor({ initial }: { initial: JSONDocument }) {
|
|
|
67
73
|
```tsx
|
|
68
74
|
import { useMemo } from "react";
|
|
69
75
|
import { LexionEditor } from "@lexion-rte/core";
|
|
70
|
-
import { starterKitExtension } from "@lexion-rte/
|
|
76
|
+
import { starterKitExtension } from "@lexion-rte/starter-kit";
|
|
71
77
|
import { LexionEditorView } from "@lexion-rte/react";
|
|
72
78
|
|
|
73
79
|
export function SharedEditor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LexionEditorView.d.ts","sourceRoot":"","sources":["../src/LexionEditorView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,
|
|
1
|
+
{"version":3,"file":"LexionEditorView.d.ts","sourceRoot":"","sources":["../src/LexionEditorView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EACL,YAAY,EAEZ,KAAK,YAAY,EAElB,MAAM,kBAAkB,CAAC;AAG1B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAYD,eAAO,MAAM,gBAAgB,GAAI,gFAS9B,qBAAqB,4CA2JvB,CAAC"}
|
package/dist/LexionEditorView.js
CHANGED
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useMemo, useRef } from "react";
|
|
2
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { EditorView } from "prosemirror-view";
|
|
4
|
-
import { LexionEditor } from "@lexion-rte/core";
|
|
5
|
-
import { starterKitExtension } from "@lexion-rte/
|
|
4
|
+
import { LexionEditor, lexionStatusBarAppearance } from "@lexion-rte/core";
|
|
5
|
+
import { starterKitExtension } from "@lexion-rte/starter-kit";
|
|
6
6
|
const serializeJSON = (document) => JSON.stringify(document);
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
lineHeight: 1.3,
|
|
15
|
-
textAlign: "center",
|
|
16
|
-
fontFamily: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial"
|
|
17
|
-
};
|
|
7
|
+
const STATUS_BAR_STYLE = lexionStatusBarAppearance.style;
|
|
8
|
+
const STATUS_BAR_START_STYLE = lexionStatusBarAppearance.groupStyles.start;
|
|
9
|
+
const STATUS_BAR_END_STYLE = lexionStatusBarAppearance.groupStyles.end;
|
|
10
|
+
const splitStatusBarItems = (items) => ({
|
|
11
|
+
start: items.filter((item) => (item.align ?? "start") === "start"),
|
|
12
|
+
end: items.filter((item) => (item.align ?? "start") === "end")
|
|
13
|
+
});
|
|
18
14
|
export const LexionEditorView = ({ editor, value, defaultValue, onChange, onReady, readOnly = false, className, style }) => {
|
|
19
15
|
const containerRef = useRef(null);
|
|
20
16
|
const viewRef = useRef(null);
|
|
@@ -36,6 +32,8 @@ export const LexionEditorView = ({ editor, value, defaultValue, onChange, onRead
|
|
|
36
32
|
}, []);
|
|
37
33
|
const activeEditor = editor ?? internalEditor;
|
|
38
34
|
const isControlled = value !== undefined;
|
|
35
|
+
const [statusBarItems, setStatusBarItems] = useState(() => activeEditor.getStatusBarItems());
|
|
36
|
+
const statusBar = splitStatusBarItems(statusBarItems);
|
|
39
37
|
latestOnChange.current = onChange;
|
|
40
38
|
latestOnReady.current = onReady;
|
|
41
39
|
latestReadOnly.current = readOnly;
|
|
@@ -53,12 +51,14 @@ export const LexionEditorView = ({ editor, value, defaultValue, onChange, onRead
|
|
|
53
51
|
dispatchTransaction: (transaction) => {
|
|
54
52
|
activeEditor.dispatchTransaction(transaction);
|
|
55
53
|
view.updateState(activeEditor.state);
|
|
54
|
+
setStatusBarItems(activeEditor.getStatusBarItems());
|
|
56
55
|
const nextValue = activeEditor.getJSON();
|
|
57
56
|
lastAppliedValueRef.current = serializeJSON(nextValue);
|
|
58
57
|
latestOnChange.current?.(nextValue, activeEditor);
|
|
59
58
|
}
|
|
60
59
|
});
|
|
61
60
|
viewRef.current = view;
|
|
61
|
+
setStatusBarItems(activeEditor.getStatusBarItems());
|
|
62
62
|
latestOnReady.current?.(activeEditor);
|
|
63
63
|
return () => {
|
|
64
64
|
view.destroy();
|
|
@@ -85,6 +85,7 @@ export const LexionEditorView = ({ editor, value, defaultValue, onChange, onRead
|
|
|
85
85
|
activeEditor.setJSON(value);
|
|
86
86
|
lastAppliedValueRef.current = nextValue;
|
|
87
87
|
viewRef.current?.updateState(activeEditor.state);
|
|
88
|
+
setStatusBarItems(activeEditor.getStatusBarItems());
|
|
88
89
|
}, [activeEditor, isControlled, value]);
|
|
89
90
|
useEffect(() => () => {
|
|
90
91
|
if (!editor) {
|
|
@@ -95,6 +96,10 @@ export const LexionEditorView = ({ editor, value, defaultValue, onChange, onRead
|
|
|
95
96
|
...(style ?? {}),
|
|
96
97
|
display: "flex",
|
|
97
98
|
flexDirection: "column"
|
|
98
|
-
}, children: [_jsx("div", { ref: containerRef }),
|
|
99
|
+
}, children: [_jsx("div", { ref: containerRef }), _jsxs("div", { className: lexionStatusBarAppearance.className, style: STATUS_BAR_STYLE, children: [_jsx("div", { className: `${lexionStatusBarAppearance.groupClassName} ${lexionStatusBarAppearance.groupClassName}--start`, style: STATUS_BAR_START_STYLE, children: statusBar.start.map((item) => (_jsx("div", { className: item.className
|
|
100
|
+
? `${lexionStatusBarAppearance.itemClassName} ${item.className}`
|
|
101
|
+
: lexionStatusBarAppearance.itemClassName, style: item.style, children: item.text }, item.key))) }), _jsx("div", { className: `${lexionStatusBarAppearance.groupClassName} ${lexionStatusBarAppearance.groupClassName}--end`, style: STATUS_BAR_END_STYLE, children: statusBar.end.map((item) => (_jsx("div", { className: item.className
|
|
102
|
+
? `${lexionStatusBarAppearance.itemClassName} ${item.className}`
|
|
103
|
+
: lexionStatusBarAppearance.itemClassName, style: item.style, children: item.text }, item.key))) })] })] }));
|
|
99
104
|
};
|
|
100
105
|
//# sourceMappingURL=LexionEditorView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LexionEditorView.js","sourceRoot":"","sources":["../src/LexionEditorView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"LexionEditorView.js","sourceRoot":"","sources":["../src/LexionEditorView.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lexion-rte/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "React adapter for the Lexion editor platform.",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"import": "./dist/index.js"
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
|
-
"license": "GPL-3.0-
|
|
15
|
+
"license": "GPL-3.0-or-later",
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
18
18
|
"url": "https://github.com/dariusve/lexion.git",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"prosemirror-view": "^1.37.2",
|
|
38
|
-
"@lexion-rte/core": "0.1.
|
|
39
|
-
"@lexion-rte/
|
|
38
|
+
"@lexion-rte/core": "0.1.5",
|
|
39
|
+
"@lexion-rte/starter-kit": "0.2.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": "^18.2.0 || ^19.0.0",
|
package/src/LexionEditorView.tsx
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
import { useEffect, useMemo, useRef } from "react";
|
|
1
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
2
2
|
import type { CSSProperties } from "react";
|
|
3
3
|
import { EditorView } from "prosemirror-view";
|
|
4
|
-
import {
|
|
5
|
-
|
|
4
|
+
import {
|
|
5
|
+
LexionEditor,
|
|
6
|
+
lexionStatusBarAppearance,
|
|
7
|
+
type JSONDocument,
|
|
8
|
+
type LexionStatusBarItem
|
|
9
|
+
} from "@lexion-rte/core";
|
|
10
|
+
import { starterKitExtension } from "@lexion-rte/starter-kit";
|
|
6
11
|
|
|
7
12
|
export interface LexionEditorViewProps {
|
|
8
13
|
readonly editor?: LexionEditor;
|
|
@@ -16,18 +21,14 @@ export interface LexionEditorViewProps {
|
|
|
16
21
|
}
|
|
17
22
|
|
|
18
23
|
const serializeJSON = (document: JSONDocument): string => JSON.stringify(document);
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
lineHeight: 1.3,
|
|
28
|
-
textAlign: "center",
|
|
29
|
-
fontFamily: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial"
|
|
30
|
-
};
|
|
24
|
+
const STATUS_BAR_STYLE = lexionStatusBarAppearance.style as CSSProperties;
|
|
25
|
+
const STATUS_BAR_START_STYLE = lexionStatusBarAppearance.groupStyles.start as CSSProperties;
|
|
26
|
+
const STATUS_BAR_END_STYLE = lexionStatusBarAppearance.groupStyles.end as CSSProperties;
|
|
27
|
+
|
|
28
|
+
const splitStatusBarItems = (items: readonly LexionStatusBarItem[]) => ({
|
|
29
|
+
start: items.filter((item) => (item.align ?? "start") === "start"),
|
|
30
|
+
end: items.filter((item) => (item.align ?? "start") === "end")
|
|
31
|
+
});
|
|
31
32
|
|
|
32
33
|
export const LexionEditorView = ({
|
|
33
34
|
editor,
|
|
@@ -65,6 +66,10 @@ export const LexionEditorView = ({
|
|
|
65
66
|
|
|
66
67
|
const activeEditor = editor ?? internalEditor;
|
|
67
68
|
const isControlled = value !== undefined;
|
|
69
|
+
const [statusBarItems, setStatusBarItems] = useState<readonly LexionStatusBarItem[]>(
|
|
70
|
+
() => activeEditor.getStatusBarItems()
|
|
71
|
+
);
|
|
72
|
+
const statusBar = splitStatusBarItems(statusBarItems);
|
|
68
73
|
|
|
69
74
|
latestOnChange.current = onChange;
|
|
70
75
|
latestOnReady.current = onReady;
|
|
@@ -86,6 +91,7 @@ export const LexionEditorView = ({
|
|
|
86
91
|
dispatchTransaction: (transaction) => {
|
|
87
92
|
activeEditor.dispatchTransaction(transaction);
|
|
88
93
|
view.updateState(activeEditor.state);
|
|
94
|
+
setStatusBarItems(activeEditor.getStatusBarItems());
|
|
89
95
|
|
|
90
96
|
const nextValue = activeEditor.getJSON();
|
|
91
97
|
lastAppliedValueRef.current = serializeJSON(nextValue);
|
|
@@ -94,6 +100,7 @@ export const LexionEditorView = ({
|
|
|
94
100
|
});
|
|
95
101
|
|
|
96
102
|
viewRef.current = view;
|
|
103
|
+
setStatusBarItems(activeEditor.getStatusBarItems());
|
|
97
104
|
latestOnReady.current?.(activeEditor);
|
|
98
105
|
|
|
99
106
|
return () => {
|
|
@@ -125,6 +132,7 @@ export const LexionEditorView = ({
|
|
|
125
132
|
activeEditor.setJSON(value);
|
|
126
133
|
lastAppliedValueRef.current = nextValue;
|
|
127
134
|
viewRef.current?.updateState(activeEditor.state);
|
|
135
|
+
setStatusBarItems(activeEditor.getStatusBarItems());
|
|
128
136
|
}, [activeEditor, isControlled, value]);
|
|
129
137
|
|
|
130
138
|
useEffect(
|
|
@@ -146,8 +154,43 @@ export const LexionEditorView = ({
|
|
|
146
154
|
}}
|
|
147
155
|
>
|
|
148
156
|
<div ref={containerRef} />
|
|
149
|
-
<div className=
|
|
150
|
-
|
|
157
|
+
<div className={lexionStatusBarAppearance.className} style={STATUS_BAR_STYLE}>
|
|
158
|
+
<div
|
|
159
|
+
className={`${lexionStatusBarAppearance.groupClassName} ${lexionStatusBarAppearance.groupClassName}--start`}
|
|
160
|
+
style={STATUS_BAR_START_STYLE}
|
|
161
|
+
>
|
|
162
|
+
{statusBar.start.map((item) => (
|
|
163
|
+
<div
|
|
164
|
+
key={item.key}
|
|
165
|
+
className={
|
|
166
|
+
item.className
|
|
167
|
+
? `${lexionStatusBarAppearance.itemClassName} ${item.className}`
|
|
168
|
+
: lexionStatusBarAppearance.itemClassName
|
|
169
|
+
}
|
|
170
|
+
style={item.style as CSSProperties | undefined}
|
|
171
|
+
>
|
|
172
|
+
{item.text}
|
|
173
|
+
</div>
|
|
174
|
+
))}
|
|
175
|
+
</div>
|
|
176
|
+
<div
|
|
177
|
+
className={`${lexionStatusBarAppearance.groupClassName} ${lexionStatusBarAppearance.groupClassName}--end`}
|
|
178
|
+
style={STATUS_BAR_END_STYLE}
|
|
179
|
+
>
|
|
180
|
+
{statusBar.end.map((item) => (
|
|
181
|
+
<div
|
|
182
|
+
key={item.key}
|
|
183
|
+
className={
|
|
184
|
+
item.className
|
|
185
|
+
? `${lexionStatusBarAppearance.itemClassName} ${item.className}`
|
|
186
|
+
: lexionStatusBarAppearance.itemClassName
|
|
187
|
+
}
|
|
188
|
+
style={item.style as CSSProperties | undefined}
|
|
189
|
+
>
|
|
190
|
+
{item.text}
|
|
191
|
+
</div>
|
|
192
|
+
))}
|
|
193
|
+
</div>
|
|
151
194
|
</div>
|
|
152
195
|
</div>
|
|
153
196
|
);
|