@hwp-editor/react 1.0.0 → 1.2.0

package/README.md

@@ -1,10 +1,23 @@
 # @hwp-editor/react
 
 Embeddable React UI for Korean HWP/HWPX documents, built on
-[`@hwp-editor/core`](../core). All document work (read/render/edit/compose/
+[`@hwp-editor/core`](https://www.npmjs.com/package/@hwp-editor/core). All document work (read/render/edit/compose/
 validate) goes through the `HwpEngine` interface — this package contains UI
 only.
 
+## Install
+
+```sh
+pnpm add @hwp-editor/react
+```
+
+`@hwp-editor/core` arrives as a peer, deduped to a single copy; you do not name
+it unless your own source imports from it. React 18 or 19 is a peer too.
+
+The stylesheet is **not** auto-injected. An install that skips the import below
+produces an editor that loads and renders unstyled, which no import check
+notices.
+
 ## Usage
 
 ```tsx
@@ -28,7 +41,9 @@ so referring to them by a fixed label goes stale the moment the copy or the
 locale changes. Protected/distribution documents open read-only with a notice
 (engine `capabilities().editable === false`).
 
-Keyboard: `Escape` clears the selection; `Cmd/Ctrl+Enter` applies pending ops.
+Keyboard: `Escape` clears the selection, or closes the new-document dialog
+when it is open (without touching the selection); `Cmd/Ctrl+Enter` applies
+pending ops.
 
 ## Props
 

package/dist/index.cjs

@@ -1058,6 +1058,17 @@ function ComposePanel(props) {
   const [body, setBody] = (0, import_react6.useState)("");
   const [busy, setBusy] = (0, import_react6.useState)(false);
   const [error, setError] = (0, import_react6.useState)(null);
+  const { onClose } = props;
+  (0, import_react6.useEffect)(() => {
+    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);
@@ -1410,14 +1421,14 @@ var HwpEditor = (0, import_react7.forwardRef)(
     (0, import_react7.useEffect)(() => {
       cbRef.current = { onReady, onError, onChange, onDirtyChange };
     });
-    const emitReady = (0, import_react7.useCallback)((document) => {
-      cbRef.current.onReady?.(document);
+    const emitReady = (0, import_react7.useCallback)((document2) => {
+      cbRef.current.onReady?.(document2);
     }, []);
     const emitError = (0, import_react7.useCallback)((error) => {
       cbRef.current.onError?.(error);
     }, []);
-    const emitChange = (0, import_react7.useCallback)((document) => {
-      cbRef.current.onChange?.(document);
+    const emitChange = (0, import_react7.useCallback)((document2) => {
+      cbRef.current.onChange?.(document2);
     }, []);
     const emitDirty = (0, import_react7.useCallback)((dirty2) => {
       cbRef.current.onDirtyChange?.(dirty2);
@@ -1585,6 +1596,7 @@ var HwpEditor = (0, import_react7.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();
@@ -1724,17 +1736,17 @@ var HwpEditor = (0, import_react7.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);