@jbpark/live-editor 1.9.0 → 1.10.0

package/dist/index.d.mts

@@ -133,17 +133,26 @@ declare const Core: ({
 }: Props$2) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/editor/editor.d.ts
+interface EditorRenderData {
+  value: string;
+  onChange: (value: string) => void;
+  formatCode: (code: string) => Promise<string>;
+}
 interface Props$1 extends Omit<Props$2, 'onSave' | 'onError'> {
   defaultValue?: string;
   debounce?: number;
+  renderEditor?: (data: EditorRenderData) => React.ReactNode;
 }
 declare const Editor$1: ({
   defaultValue,
   value: _value,
   debounce,
   onChange: _onChange,
+  renderEditor,
+  fragment,
+  prettierOptions,
   ...props
-}: Props$1) => react_jsx_runtime0.JSX.Element;
+}: Props$1) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 //#endregion
 //#region src/components/editor/index.d.ts
 type EditorComponent = typeof Editor$1 & {
@@ -252,8 +261,11 @@ declare const App: {
     value: _value,
     debounce,
     onChange: _onChange,
+    renderEditor,
+    fragment,
+    prettierOptions,
     ...props
-  }: Props$1) => react_jsx_runtime0.JSX.Element) & {
+  }: Props$1) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined) & {
     Core: ({
       value,
       theme,

package/dist/index.mjs

@@ -11351,8 +11351,8 @@ GutterMarker.prototype.startSide = GutterMarker.prototype.endSide = -1;
 GutterMarker.prototype.point = true;
 
 //#endregion
-//#region src/components/editor/core.tsx
-const prettierInitialOptions = {
+//#region src/components/editor/use-format-code.ts
+const DEFAULT_PRETTIER_OPTIONS = {
 	tabWidth: 2,
 	singleQuote: true,
 	trailingComma: "all",
@@ -11360,13 +11360,12 @@ const prettierInitialOptions = {
 	arrowParens: "avoid",
 	printWidth: 60
 };
-const Core = ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave: _onSave, onError, ...props }) => {
-	const editorRef = useRef(null);
+const useFormatCode = ({ fragment, prettierOptions } = {}) => {
 	const prettierConfig = useMemo(() => ({
-		...prettierInitialOptions,
+		...DEFAULT_PRETTIER_OPTIONS,
 		...prettierOptions
 	}), [prettierOptions]);
-	const formatCode = useCallback(async (code) => {
+	return useCallback(async (code) => {
 		const isTypeScript = detectTypeScript(code);
 		const source = fragment ? `<>${code}</>` : code;
 		const formatted = await prettier.format(source, {
@@ -11381,6 +11380,16 @@ const Core = ({ value, theme, height, className, prettierOptions, fragment, raw,
 		if (fragment) return formatted.replace(/^<>\n?/, "").replace(/\n?<\/>;?\s*$/, "").replace(/^ {2}/gm, "").trim();
 		return formatted;
 	}, [prettierConfig, fragment]);
+};
+
+//#endregion
+//#region src/components/editor/core.tsx
+const Core = ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave: _onSave, onError, ...props }) => {
+	const editorRef = useRef(null);
+	const formatCode = useFormatCode({
+		fragment,
+		prettierOptions
+	});
 	const onSave = useCallback(async (val) => {
 		try {
 			const currentView = editorRef.current?.view;
@@ -12857,7 +12866,7 @@ Dnd.DraggableItem = DraggableItem;
 
 //#endregion
 //#region src/components/editor/editor.tsx
-const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onChange, ...props }) => {
+const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onChange, renderEditor, fragment, prettierOptions, ...props }) => {
 	const { setCode } = usePreview();
 	const { setError } = useError();
 	const value = _value.trim() === "" ? defaultValue || DEFAULT_TEMPLATE : _value;
@@ -12870,15 +12879,26 @@ const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onCh
 	const onError = useCallback((error) => {
 		setError(error);
 	}, [setError]);
+	const formatCode = useFormatCode({
+		fragment,
+		prettierOptions
+	});
 	const debouncedValue = useDebouncedValue(value, debounce);
 	useEffect(() => {
 		setCode(debouncedValue);
 	}, [debouncedValue, setCode]);
+	if (renderEditor) return renderEditor({
+		value,
+		onChange,
+		formatCode
+	});
 	return /* @__PURE__ */ jsx(Core, {
 		value,
 		onChange,
 		onSave,
 		onError,
+		fragment,
+		prettierOptions,
 		...props
 	});
 };