@seljs/editor-react 1.0.0 → 1.0.1-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs ADDED
@@ -0,0 +1,5 @@
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
+ const require_use_sel_editor = require("./use-sel-editor.cjs");
3
+ const require_sel_editor = require("./sel-editor.cjs");
4
+ exports.SELEditor = require_sel_editor.SELEditor;
5
+ exports.useSELEditor = require_use_sel_editor.useSELEditor;
@@ -0,0 +1,3 @@
1
+ import { useSELEditor } from "./use-sel-editor.cjs";
2
+ import { SELEditor, SELEditorProps } from "./sel-editor.cjs";
3
+ export { SELEditor, type SELEditorProps, useSELEditor };
@@ -0,0 +1,3 @@
1
+ import { useSELEditor } from "./use-sel-editor.mjs";
2
+ import { SELEditor, SELEditorProps } from "./sel-editor.mjs";
3
+ export { SELEditor, type SELEditorProps, useSELEditor };
package/dist/index.mjs ADDED
@@ -0,0 +1,3 @@
1
+ import { useSELEditor } from "./use-sel-editor.mjs";
2
+ import { SELEditor } from "./sel-editor.mjs";
3
+ export { SELEditor, useSELEditor };
@@ -0,0 +1,12 @@
1
+ const require_use_sel_editor = require("./use-sel-editor.cjs");
2
+ let react_jsx_runtime = require("react/jsx-runtime");
3
+ //#region src/sel-editor.tsx
4
+ function SELEditor({ className, ...config }) {
5
+ const { ref } = require_use_sel_editor.useSELEditor(config);
6
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
7
+ ref,
8
+ className
9
+ });
10
+ }
11
+ //#endregion
12
+ exports.SELEditor = SELEditor;
@@ -0,0 +1,13 @@
1
+ import { SELEditorConfig } from "@seljs/editor";
2
+ import * as react_jsx_runtime0 from "react/jsx-runtime";
3
+
4
+ //#region src/sel-editor.d.ts
5
+ interface SELEditorProps extends Omit<SELEditorConfig, "parent"> {
6
+ className?: string;
7
+ }
8
+ declare function SELEditor({
9
+ className,
10
+ ...config
11
+ }: SELEditorProps): react_jsx_runtime0.JSX.Element;
12
+ //#endregion
13
+ export { SELEditor, SELEditorProps };
@@ -0,0 +1,13 @@
1
+ import { SELEditorConfig } from "@seljs/editor";
2
+ import * as react_jsx_runtime0 from "react/jsx-runtime";
3
+
4
+ //#region src/sel-editor.d.ts
5
+ interface SELEditorProps extends Omit<SELEditorConfig, "parent"> {
6
+ className?: string;
7
+ }
8
+ declare function SELEditor({
9
+ className,
10
+ ...config
11
+ }: SELEditorProps): react_jsx_runtime0.JSX.Element;
12
+ //#endregion
13
+ export { SELEditor, SELEditorProps };
@@ -0,0 +1,12 @@
1
+ import { useSELEditor } from "./use-sel-editor.mjs";
2
+ import { jsx } from "react/jsx-runtime";
3
+ //#region src/sel-editor.tsx
4
+ function SELEditor({ className, ...config }) {
5
+ const { ref } = useSELEditor(config);
6
+ return /* @__PURE__ */ jsx("div", {
7
+ ref,
8
+ className
9
+ });
10
+ }
11
+ //#endregion
12
+ export { SELEditor };
@@ -0,0 +1,42 @@
1
+ let _seljs_editor = require("@seljs/editor");
2
+ let react = require("react");
3
+ //#region src/use-sel-editor.ts
4
+ function useSELEditor(config) {
5
+ const viewRef = (0, react.useRef)(null);
6
+ const [view, setView] = (0, react.useState)(null);
7
+ const [value, setValue] = (0, react.useState)(config.value ?? "");
8
+ const configRef = (0, react.useRef)(config);
9
+ configRef.current = config;
10
+ const ref = (0, react.useCallback)((node) => {
11
+ if (viewRef.current) {
12
+ viewRef.current.destroy();
13
+ viewRef.current = null;
14
+ setView(null);
15
+ }
16
+ if (!node) return;
17
+ const currentConfig = configRef.current;
18
+ const editor = (0, _seljs_editor.createSELEditor)({
19
+ ...currentConfig,
20
+ parent: node,
21
+ onChange: (newValue) => {
22
+ setValue(newValue);
23
+ currentConfig.onChange?.(newValue);
24
+ }
25
+ });
26
+ viewRef.current = editor;
27
+ setView(editor);
28
+ }, [config.schema]);
29
+ (0, react.useEffect)(() => {
30
+ return () => {
31
+ viewRef.current?.destroy();
32
+ viewRef.current = null;
33
+ };
34
+ }, []);
35
+ return {
36
+ ref,
37
+ view,
38
+ value
39
+ };
40
+ }
41
+ //#endregion
42
+ exports.useSELEditor = useSELEditor;
@@ -0,0 +1,11 @@
1
+ import { EditorView, SELEditorConfig } from "@seljs/editor";
2
+
3
+ //#region src/use-sel-editor.d.ts
4
+ interface UseSELEditorResult {
5
+ ref: (node: HTMLElement | null) => void;
6
+ view: EditorView | null;
7
+ value: string;
8
+ }
9
+ declare function useSELEditor(config: Omit<SELEditorConfig, "parent">): UseSELEditorResult;
10
+ //#endregion
11
+ export { useSELEditor };
@@ -0,0 +1,11 @@
1
+ import { EditorView, SELEditorConfig } from "@seljs/editor";
2
+
3
+ //#region src/use-sel-editor.d.ts
4
+ interface UseSELEditorResult {
5
+ ref: (node: HTMLElement | null) => void;
6
+ view: EditorView | null;
7
+ value: string;
8
+ }
9
+ declare function useSELEditor(config: Omit<SELEditorConfig, "parent">): UseSELEditorResult;
10
+ //#endregion
11
+ export { useSELEditor };
@@ -0,0 +1,42 @@
1
+ import { createSELEditor } from "@seljs/editor";
2
+ import { useCallback, useEffect, useRef, useState } from "react";
3
+ //#region src/use-sel-editor.ts
4
+ function useSELEditor(config) {
5
+ const viewRef = useRef(null);
6
+ const [view, setView] = useState(null);
7
+ const [value, setValue] = useState(config.value ?? "");
8
+ const configRef = useRef(config);
9
+ configRef.current = config;
10
+ const ref = useCallback((node) => {
11
+ if (viewRef.current) {
12
+ viewRef.current.destroy();
13
+ viewRef.current = null;
14
+ setView(null);
15
+ }
16
+ if (!node) return;
17
+ const currentConfig = configRef.current;
18
+ const editor = createSELEditor({
19
+ ...currentConfig,
20
+ parent: node,
21
+ onChange: (newValue) => {
22
+ setValue(newValue);
23
+ currentConfig.onChange?.(newValue);
24
+ }
25
+ });
26
+ viewRef.current = editor;
27
+ setView(editor);
28
+ }, [config.schema]);
29
+ useEffect(() => {
30
+ return () => {
31
+ viewRef.current?.destroy();
32
+ viewRef.current = null;
33
+ };
34
+ }, []);
35
+ return {
36
+ ref,
37
+ view,
38
+ value
39
+ };
40
+ }
41
+ //#endregion
42
+ export { useSELEditor };
package/package.json CHANGED
@@ -1,30 +1,36 @@
1
1
  {
2
2
  "name": "@seljs/editor-react",
3
- "version": "1.0.0",
3
+ "version": "1.0.1-beta.9",
4
+ "repository": {
5
+ "url": "https://github.com/abinnovision/seljs"
6
+ },
4
7
  "license": "Apache-2.0",
5
8
  "author": {
6
9
  "name": "abi group GmbH",
7
10
  "email": "info@abigroup.io",
8
11
  "url": "https://abigroup.io/"
9
12
  },
10
- "repository": {
11
- "url": "https://github.com/abinnovision/seljs"
12
- },
13
13
  "type": "module",
14
14
  "exports": {
15
15
  ".": {
16
- "import": "./dist/index.js",
17
- "types": "./dist/index.d.ts"
16
+ "import": {
17
+ "types": "./dist/index.d.mts",
18
+ "default": "./dist/index.mjs"
19
+ },
20
+ "require": {
21
+ "types": "./dist/index.d.cts",
22
+ "default": "./dist/index.cjs"
23
+ }
18
24
  }
19
25
  },
20
- "main": "./dist/index.js",
21
- "types": "./dist/index.d.ts",
26
+ "main": "./dist/index.cjs",
27
+ "types": "./dist/index.d.cts",
22
28
  "files": [
23
29
  "dist",
24
30
  "LICENSE.md"
25
31
  ],
26
32
  "scripts": {
27
- "build": "tsc -p tsconfig.build.json",
33
+ "build": "tsdown",
28
34
  "format:check": "prettier --check '{{src,test}/**/*,*}.{{t,j}s{,x},json{,5},md,y{,a}ml}'",
29
35
  "format:fix": "prettier --write '{{src,test}/**/*,*}.{{t,j}s{,x},json{,5},md,y{,a}ml}'",
30
36
  "lint:check": "eslint '{{src,test}/**/*,*}.{t,j}s{,x}'",
@@ -36,14 +42,6 @@
36
42
  "test-unit:watch": "vitest watch",
37
43
  "typecheck": "tsc --noEmit"
38
44
  },
39
- "dependencies": {
40
- "@seljs/editor": "1.0.0",
41
- "@seljs/schema": "1.0.0"
42
- },
43
- "peerDependencies": {
44
- "react": ">= 18",
45
- "react-dom": ">= 18"
46
- },
47
45
  "lint-staged": {
48
46
  "{{src,test}/**/*,*}.{{t,j}s{,x},json{,5},md,y{,a}ml}": [
49
47
  "prettier --write"
@@ -52,16 +50,20 @@
52
50
  "eslint --fix"
53
51
  ]
54
52
  },
53
+ "dependencies": {
54
+ "@seljs/editor": "1.0.1-beta.9",
55
+ "@seljs/schema": "1.0.0"
56
+ },
55
57
  "devDependencies": {
56
58
  "@abinnovision/eslint-config-base": "^3.2.0",
57
59
  "@abinnovision/prettier-config": "^2.1.5",
58
60
  "@seljs-internal/tsconfig": "^0.0.0",
59
- "@seljs/checker": "1.0.0",
60
- "@seljs/env": "^1.0.0",
61
- "@seljs/runtime": "^1.0.0",
61
+ "@seljs/checker": "1.0.1-beta.9",
62
+ "@seljs/env": "^1.0.1-beta.9",
63
+ "@seljs/runtime": "^1.0.1-beta.9",
62
64
  "@shazow/whatsabi": "^0.26.0",
63
- "@storybook/react": "^10.2.16",
64
- "@storybook/react-vite": "^10.2.16",
65
+ "@storybook/react": "^10.2.19",
66
+ "@storybook/react-vite": "^10.2.19",
65
67
  "@testing-library/dom": "^10.0.0",
66
68
  "@testing-library/react": "^16.0.0",
67
69
  "@types/react": "^19.0.0",
@@ -70,13 +72,18 @@
70
72
  "prettier": "^3.8.1",
71
73
  "react": "^19.0.0",
72
74
  "react-dom": "^19.0.0",
73
- "storybook": "^10.2.16",
75
+ "storybook": "^10.2.19",
76
+ "tsdown": "^0.21.3",
74
77
  "typescript": "^5.9.3",
75
78
  "viem": "^2.47.2",
76
79
  "vite": "^7.3.1",
77
80
  "vitest": "^4.0.18",
78
81
  "zod": "^4.3.6"
79
82
  },
83
+ "peerDependencies": {
84
+ "react": ">= 18",
85
+ "react-dom": ">= 18"
86
+ },
80
87
  "publishConfig": {
81
88
  "npm": true,
82
89
  "npmAccess": "public"
package/dist/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export { useSELEditor } from "./use-sel-editor";
2
- export { SELEditor, type SELEditorProps } from "./sel-editor";
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC"}
package/dist/index.js DELETED
@@ -1,2 +0,0 @@
1
- export { useSELEditor } from "./use-sel-editor";
2
- export { SELEditor } from "./sel-editor";
@@ -1,6 +0,0 @@
1
- import type { SELEditorConfig } from "@seljs/editor";
2
- export interface SELEditorProps extends Omit<SELEditorConfig, "parent"> {
3
- className?: string;
4
- }
5
- export declare function SELEditor({ className, ...config }: SELEditorProps): import("react/jsx-runtime").JSX.Element;
6
- //# sourceMappingURL=sel-editor.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"sel-editor.d.ts","sourceRoot":"","sources":["../src/sel-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,MAAM,EAAE,EAAE,cAAc,2CAIjE"}
@@ -1,6 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useSELEditor } from "./use-sel-editor";
3
- export function SELEditor({ className, ...config }) {
4
- const { ref } = useSELEditor(config);
5
- return _jsx("div", { ref: ref, className: className });
6
- }
@@ -1,8 +0,0 @@
1
- import { type EditorView, type SELEditorConfig } from "@seljs/editor";
2
- export interface UseSELEditorResult {
3
- ref: (node: HTMLElement | null) => void;
4
- view: EditorView | null;
5
- value: string;
6
- }
7
- export declare function useSELEditor(config: Omit<SELEditorConfig, "parent">): UseSELEditorResult;
8
- //# sourceMappingURL=use-sel-editor.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-sel-editor.d.ts","sourceRoot":"","sources":["../src/use-sel-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,MAAM,eAAe,CAAC;AAKvB,MAAM,WAAW,kBAAkB;IAClC,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,YAAY,CAC3B,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,GACrC,kBAAkB,CA0CpB"}
@@ -1,37 +0,0 @@
1
- import { createSELEditor, } from "@seljs/editor";
2
- import { useCallback, useEffect, useRef, useState } from "react";
3
- export function useSELEditor(config) {
4
- const viewRef = useRef(null);
5
- const [view, setView] = useState(null);
6
- const [value, setValue] = useState(config.value ?? "");
7
- const configRef = useRef(config);
8
- configRef.current = config;
9
- const ref = useCallback((node) => {
10
- if (viewRef.current) {
11
- viewRef.current.destroy();
12
- viewRef.current = null;
13
- setView(null);
14
- }
15
- if (!node) {
16
- return;
17
- }
18
- const currentConfig = configRef.current;
19
- const editor = createSELEditor({
20
- ...currentConfig,
21
- parent: node,
22
- onChange: (newValue) => {
23
- setValue(newValue);
24
- currentConfig.onChange?.(newValue);
25
- },
26
- });
27
- viewRef.current = editor;
28
- setView(editor);
29
- }, [config.schema]);
30
- useEffect(() => {
31
- return () => {
32
- viewRef.current?.destroy();
33
- viewRef.current = null;
34
- };
35
- }, []);
36
- return { ref, view, value };
37
- }