@hwp-editor/react 1.0.0 → 1.2.0

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   forwardRef,
   useCallback,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useImperativeHandle,
   useMemo as useMemo3,
   useRef,
@@ -832,7 +832,7 @@ function FieldsPanel() {
 }
 
 // src/ComposePanel.tsx
-import { useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/errors.ts
 import { isHwpEngineError, isHwpErrorCode } from "@hwp-editor/core";
@@ -1018,6 +1018,17 @@ function ComposePanel(props) {
   const [body, setBody] = useState4("");
   const [busy, setBusy] = useState4(false);
   const [error, setError] = useState4(null);
+  const { onClose } = props;
+  useEffect3(() => {
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.isComposing || event.defaultPrevented) return;
+      if (busy) return;
+      event.preventDefault();
+      onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [busy, onClose]);
   const compose = async () => {
     setBusy(true);
     setError(null);
@@ -1367,17 +1378,17 @@ var HwpEditor = forwardRef(
       style
     } = props;
     const cbRef = useRef({ onReady, onError, onChange, onDirtyChange });
-    useEffect3(() => {
+    useEffect4(() => {
       cbRef.current = { onReady, onError, onChange, onDirtyChange };
     });
-    const emitReady = useCallback((document) => {
-      cbRef.current.onReady?.(document);
+    const emitReady = useCallback((document2) => {
+      cbRef.current.onReady?.(document2);
     }, []);
     const emitError = useCallback((error) => {
       cbRef.current.onError?.(error);
     }, []);
-    const emitChange = useCallback((document) => {
-      cbRef.current.onChange?.(document);
+    const emitChange = useCallback((document2) => {
+      cbRef.current.onChange?.(document2);
     }, []);
     const emitDirty = useCallback((dirty2) => {
       cbRef.current.onDirtyChange?.(dirty2);
@@ -1391,7 +1402,7 @@ var HwpEditor = forwardRef(
     const [loadError, setLoadError] = useState5(null);
     const [tab, setTab] = useState5("para");
     const [composing, setComposing] = useState5(false);
-    useEffect3(() => {
+    useEffect4(() => {
       let cancelled = false;
       if (file === null) {
         setEnvelope(null);
@@ -1425,7 +1436,7 @@ var HwpEditor = forwardRef(
       };
     }, [engine, file, store]);
     const editable = !readOnly && (capabilities?.editable ?? true);
-    useEffect3(() => {
+    useEffect4(() => {
       if (envelope === null || state.selection === null) return;
       const segment = segmentAtRef4(envelope, state.selection);
       if (segment === void 0) return;
@@ -1434,7 +1445,7 @@ var HwpEditor = forwardRef(
       );
     }, [envelope, state.selection]);
     const dirty = state.pendingOps.length > 0;
-    useEffect3(() => {
+    useEffect4(() => {
       emitDirty(dirty);
     }, [dirty]);
     const applyPendingOps = useCallback(() => {
@@ -1545,6 +1556,7 @@ var HwpEditor = forwardRef(
     );
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
+        if (composing) return;
         store.dispatch({ type: "select", selection: null });
       } else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
         e.preventDefault();
@@ -1684,17 +1696,17 @@ var HwpEditor = forwardRef(
             ComposePanel,
             {
               onClose: () => setComposing(false),
-              onComposed: (document) => {
+              onComposed: (document2) => {
                 setComposing(false);
-                emitChange(document);
+                emitChange(document2);
                 void (async () => {
                   try {
                     const [nextEnvelope, pages] = await Promise.all([
-                      engine.read(document),
-                      engine.render(document, RENDER_SVG)
+                      engine.read(document2),
+                      engine.render(document2, RENDER_SVG)
                     ]);
                     setEnvelope(nextEnvelope);
-                    store.dispatch({ type: "load", document, pages });
+                    store.dispatch({ type: "load", document: document2, pages });
                   } catch (e) {
                     setLoadError(toEditorError(e));
                     emitError(e);