@php-script/editor-react 0.0.0-stage → 0.1.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/index.d.ts +71 -0
- package/dist/index.js +101 -0
- package/dist/index.js.map +1 -0
- package/package.json +50 -3
- package/README.md +0 -3
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { type CSSProperties } from 'react';
|
|
2
|
+
import type { LintDiagnostic, PhpScriptConfig, PhpScriptEditor as PhpScriptEditorElement, PhpScriptTheme, SaveMethod, SaveResult, SaveStatus, ThemeMode } from '@php-script/editor';
|
|
3
|
+
export type { LintDiagnostic, PhpScriptConfig, PhpScriptTheme, SaveResult, SaveStatus };
|
|
4
|
+
export type { PhpScriptEditorElement };
|
|
5
|
+
type MonacoEditor = NonNullable<PhpScriptEditorElement['editor']>;
|
|
6
|
+
export interface PhpScriptEditorProps {
|
|
7
|
+
/** Controlled value. Leave undefined and use `defaultValue` for uncontrolled use. */
|
|
8
|
+
value?: string;
|
|
9
|
+
defaultValue?: string;
|
|
10
|
+
config?: PhpScriptConfig | string | null;
|
|
11
|
+
configUrl?: string;
|
|
12
|
+
saveUrl?: string;
|
|
13
|
+
saveMethod?: SaveMethod;
|
|
14
|
+
saveField?: string;
|
|
15
|
+
saveHeaders?: Record<string, string>;
|
|
16
|
+
savePayload?: Record<string, unknown>;
|
|
17
|
+
persisted?: boolean;
|
|
18
|
+
csrfToken?: string;
|
|
19
|
+
lintUrl?: string;
|
|
20
|
+
lintDelay?: number;
|
|
21
|
+
theme?: ThemeMode | PhpScriptTheme;
|
|
22
|
+
readOnly?: boolean;
|
|
23
|
+
name?: string;
|
|
24
|
+
options?: Record<string, unknown>;
|
|
25
|
+
labels?: Partial<PhpScriptEditorElement['labels']>;
|
|
26
|
+
noToolbar?: boolean;
|
|
27
|
+
noSaveShortcut?: boolean;
|
|
28
|
+
/** CSS height, e.g. `24rem`. Sets `--php-script-editor-height`. */
|
|
29
|
+
height?: string;
|
|
30
|
+
className?: string;
|
|
31
|
+
style?: CSSProperties;
|
|
32
|
+
id?: string;
|
|
33
|
+
onChange?: (value: string) => void;
|
|
34
|
+
onReady?: (editor: MonacoEditor, element: PhpScriptEditorElement) => void;
|
|
35
|
+
onSaveStart?: (event: CustomEvent<{
|
|
36
|
+
url: string;
|
|
37
|
+
method: SaveMethod;
|
|
38
|
+
body: Record<string, unknown>;
|
|
39
|
+
}>) => void;
|
|
40
|
+
onSave?: (result: SaveResult & {
|
|
41
|
+
value: string;
|
|
42
|
+
}) => void;
|
|
43
|
+
onSaveError?: (error: Error) => void;
|
|
44
|
+
onDiagnostics?: (diagnostics: LintDiagnostic[]) => void;
|
|
45
|
+
onBlurChange?: (value: string) => void;
|
|
46
|
+
}
|
|
47
|
+
/** Imperative handle: `ref.current.save()`, `.element`, `.editor`. */
|
|
48
|
+
export interface PhpScriptEditorHandle {
|
|
49
|
+
readonly element: PhpScriptEditorElement | null;
|
|
50
|
+
readonly editor: MonacoEditor | null;
|
|
51
|
+
save(): Promise<SaveResult>;
|
|
52
|
+
lint(): Promise<LintDiagnostic[]>;
|
|
53
|
+
focus(): void;
|
|
54
|
+
}
|
|
55
|
+
/** Loads and registers the custom element on the client only (SSR-safe). */
|
|
56
|
+
export declare const loadPhpScriptEditor: () => Promise<unknown>;
|
|
57
|
+
export declare const PhpScriptEditor: import("react").ForwardRefExoticComponent<PhpScriptEditorProps & import("react").RefAttributes<PhpScriptEditorHandle>>;
|
|
58
|
+
declare module 'react' {
|
|
59
|
+
namespace JSX {
|
|
60
|
+
interface IntrinsicElements {
|
|
61
|
+
'php-script-editor': {
|
|
62
|
+
ref?: React.Ref<PhpScriptEditorElement>;
|
|
63
|
+
class?: string | undefined;
|
|
64
|
+
style?: React.CSSProperties | undefined;
|
|
65
|
+
id?: string | undefined;
|
|
66
|
+
children?: React.ReactNode;
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
export default PhpScriptEditor;
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
|
|
4
|
+
import { applyChangedProps } from '@php-script/editor/core';
|
|
5
|
+
// Properties set on the element (not attributes), so objects pass without JSON.
|
|
6
|
+
const PROPS = [
|
|
7
|
+
'config',
|
|
8
|
+
'configUrl',
|
|
9
|
+
'saveUrl',
|
|
10
|
+
'saveMethod',
|
|
11
|
+
'saveField',
|
|
12
|
+
'saveHeaders',
|
|
13
|
+
'savePayload',
|
|
14
|
+
'persisted',
|
|
15
|
+
'csrfToken',
|
|
16
|
+
'lintUrl',
|
|
17
|
+
'lintDelay',
|
|
18
|
+
'theme',
|
|
19
|
+
'name',
|
|
20
|
+
'options',
|
|
21
|
+
'labels',
|
|
22
|
+
'noToolbar',
|
|
23
|
+
'noSaveShortcut',
|
|
24
|
+
];
|
|
25
|
+
const useIsoLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
|
|
26
|
+
let loader = null;
|
|
27
|
+
/** Loads and registers the custom element on the client only (SSR-safe). */
|
|
28
|
+
export const loadPhpScriptEditor = () => (loader ??= import('@php-script/editor'));
|
|
29
|
+
export const PhpScriptEditor = forwardRef(function PhpScriptEditor(props, ref) {
|
|
30
|
+
const elementRef = useRef(null);
|
|
31
|
+
const callbacks = useRef(props);
|
|
32
|
+
callbacks.current = props;
|
|
33
|
+
const [, setLoaded] = useState(false);
|
|
34
|
+
const synced = useRef(new Map());
|
|
35
|
+
useImperativeHandle(ref, () => ({
|
|
36
|
+
get element() {
|
|
37
|
+
return elementRef.current;
|
|
38
|
+
},
|
|
39
|
+
get editor() {
|
|
40
|
+
return elementRef.current?.editor ?? null;
|
|
41
|
+
},
|
|
42
|
+
save: () => elementRef.current.save(),
|
|
43
|
+
lint: () => elementRef.current?.lint() ?? Promise.resolve([]),
|
|
44
|
+
focus: () => elementRef.current?.focus(),
|
|
45
|
+
}), []);
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
let active = true;
|
|
48
|
+
void loadPhpScriptEditor().then(() => active && setLoaded(true));
|
|
49
|
+
return () => {
|
|
50
|
+
active = false;
|
|
51
|
+
};
|
|
52
|
+
}, []);
|
|
53
|
+
// Sync props to element properties.
|
|
54
|
+
useIsoLayoutEffect(() => {
|
|
55
|
+
const el = elementRef.current;
|
|
56
|
+
if (!el)
|
|
57
|
+
return;
|
|
58
|
+
const next = { readonly: Boolean(props.readOnly) };
|
|
59
|
+
for (const key of PROPS)
|
|
60
|
+
next[key] = props[key];
|
|
61
|
+
applyChangedProps(el, next, synced.current);
|
|
62
|
+
});
|
|
63
|
+
// Controlled value.
|
|
64
|
+
useIsoLayoutEffect(() => {
|
|
65
|
+
const el = elementRef.current;
|
|
66
|
+
if (el && props.value !== undefined && el.value !== props.value)
|
|
67
|
+
el.value = props.value;
|
|
68
|
+
}, [props.value]);
|
|
69
|
+
// Initial value (uncontrolled), before the element mounts Monaco.
|
|
70
|
+
useIsoLayoutEffect(() => {
|
|
71
|
+
const el = elementRef.current;
|
|
72
|
+
if (el && props.value === undefined && props.defaultValue !== undefined)
|
|
73
|
+
el.value = props.defaultValue;
|
|
74
|
+
}, []);
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
const el = elementRef.current;
|
|
77
|
+
if (!el)
|
|
78
|
+
return;
|
|
79
|
+
const on = (type, handler) => {
|
|
80
|
+
const listener = (event) => handler(event);
|
|
81
|
+
el.addEventListener(type, listener);
|
|
82
|
+
return () => el.removeEventListener(type, listener);
|
|
83
|
+
};
|
|
84
|
+
const off = [
|
|
85
|
+
on('ps-change', (e) => callbacks.current.onChange?.(e.detail.value)),
|
|
86
|
+
on('ps-ready', (e) => callbacks.current.onReady?.(e.detail.editor, el)),
|
|
87
|
+
on('ps-save-start', (e) => callbacks.current.onSaveStart?.(e)),
|
|
88
|
+
on('ps-saved', (e) => callbacks.current.onSave?.(e.detail)),
|
|
89
|
+
on('ps-save-error', (e) => callbacks.current.onSaveError?.(e.detail.error)),
|
|
90
|
+
on('ps-diagnostics', (e) => callbacks.current.onDiagnostics?.(e.detail.diagnostics)),
|
|
91
|
+
on('change', () => callbacks.current.onBlurChange?.(el.value)),
|
|
92
|
+
];
|
|
93
|
+
return () => off.forEach((fn) => fn());
|
|
94
|
+
}, []);
|
|
95
|
+
const style = props.height
|
|
96
|
+
? { ...props.style, '--php-script-editor-height': props.height }
|
|
97
|
+
: props.style;
|
|
98
|
+
return (_jsx("php-script-editor", { ref: elementRef, class: props.className, style: style, id: props.id }));
|
|
99
|
+
});
|
|
100
|
+
export default PhpScriptEditor;
|
|
101
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,53 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@php-script/editor-react",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "React wrapper for the <php-script-editor> web component.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"sideEffects": false,
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js"
|
|
12
|
+
},
|
|
13
|
+
"./package.json": "./package.json"
|
|
14
|
+
},
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"@php-script/editor": "^0.1.0"
|
|
21
|
+
},
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"monaco-editor": ">=0.55.0 <1.0.0",
|
|
24
|
+
"react": "^18.0.0 || ^19.0.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@testing-library/react": "^16.3.3",
|
|
28
|
+
"@types/react": "^19.3.0",
|
|
29
|
+
"@vitejs/plugin-react": "^6.1.2",
|
|
30
|
+
"@vitest/browser-playwright": "^5.0.5",
|
|
31
|
+
"monaco-editor": "^0.57.0",
|
|
32
|
+
"react": "^19.3.1",
|
|
33
|
+
"react-dom": "^19.3.1",
|
|
34
|
+
"@types/react-dom": "^19.3.0",
|
|
35
|
+
"typescript": "~6.0.3",
|
|
36
|
+
"vite": "^8.3.5",
|
|
37
|
+
"vitest": "^5.0.5"
|
|
38
|
+
},
|
|
39
|
+
"repository": {
|
|
40
|
+
"type": "git",
|
|
41
|
+
"url": "git+https://github.com/php-script/php-script-editor.git",
|
|
42
|
+
"directory": "packages/react"
|
|
43
|
+
},
|
|
44
|
+
"publishConfig": {
|
|
45
|
+
"access": "public",
|
|
46
|
+
"provenance": true
|
|
47
|
+
},
|
|
48
|
+
"scripts": {
|
|
49
|
+
"build": "tsc -p tsconfig.build.json",
|
|
50
|
+
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
51
|
+
"test": "vitest run"
|
|
52
|
+
}
|
|
6
53
|
}
|
package/README.md
DELETED