@zuilib/text-editor 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog — @zuilib/text-editor
 
+## 0.7.1
+
+- Fix: free `text` shapes could not be typed into. The text tool's editor
+  opened on pointerdown and was blurred by the same click; it now opens on
+  pointerup like the card editors
+- Fix: selecting a shape no longer shifts the drawing. The properties row
+  is always rendered (showing the defaults for the next shape when nothing
+  is selected) with a fixed minimum height, so click-to-edit lands where
+  the pointer is
+- Fix: keyboard shortcuts keep working after committing text (the canvas
+  regains focus); `Home`/`End` work inside the inline text editor
+
 ## 0.7.0
 
 **Themed drawing canvas.** The canvas chrome now follows the host theme

package/dist/index.js

@@ -2234,6 +2234,14 @@ function TextEditOverlay({
     el.select();
     const onKeyDown = (e) => {
       e.stopPropagation();
+      if ((e.key === "Home" || e.key === "End") && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        const text = el.value;
+        const caret = e.key === "Home" ? el.selectionStart : el.selectionEnd;
+        const pos = e.key === "Home" ? text.lastIndexOf("\n", caret - 1) + 1 : (text.indexOf("\n", caret) + 1 || text.length + 1) - 1;
+        el.setSelectionRange(pos, pos);
+        return;
+      }
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
         onCommit(shape.id, field, valueRef.current);
@@ -2265,7 +2273,9 @@ function TextEditOverlay({
       fontSize: FONT_SIZE,
       width: Math.max(80, size.w + 20),
       height: size.h + 2,
-      whiteSpace: "pre"
+      // `pre` would keep the lines, but Chrome ignores Home/End in a
+      // `white-space: pre` textarea; the width tracks the content anyway
+      whiteSpace: "pre-wrap"
     });
   } else if (isConnectorType(shape.type)) {
     const lines = wrapText(value, CONNECTOR_LABEL_MAX_WIDTH, CONNECTOR_FONT_SIZE);
@@ -2537,6 +2547,7 @@ function DrawingCanvas({ nodeKey, data }) {
   const rootRef = useRef4(null);
   const svgRef = useRef4(null);
   const dragRef = useRef4(null);
+  const pendingTextEditRef = useRef4(null);
   const pendingPointRef = useRef4(null);
   const frameRef = useRef4(null);
   const lastCommittedRef = useRef4(serializeDrawingData(data));
@@ -2663,7 +2674,8 @@ function DrawingCanvas({ nodeKey, data }) {
           }
         ]);
         setTool("select");
-        startTextEditing(id2, "text");
+        setSelectedIds(/* @__PURE__ */ new Set([id2]));
+        pendingTextEditRef.current = id2;
         return;
       }
       const id = createShapeId();
@@ -2767,6 +2779,12 @@ function DrawingCanvas({ nodeKey, data }) {
       }
       pendingPointRef.current = null;
       setHoverBoxId(null);
+      if (pendingTextEditRef.current) {
+        const id = pendingTextEditRef.current;
+        pendingTextEditRef.current = null;
+        startTextEditing(id, "text");
+        return;
+      }
       if (!drag) return;
       const point = getPoint(e);
       if (drag.mode === "marquee") {
@@ -2950,6 +2968,7 @@ function DrawingCanvas({ nodeKey, data }) {
   const commitText = useCallback(
     (id, field, value) => {
       setEditingText(null);
+      rootRef.current?.focus({ preventScroll: true });
       updateShapes(
         (prev) => prev.flatMap((s) => {
           if (s.id !== id) return [s];
@@ -2974,7 +2993,6 @@ function DrawingCanvas({ nodeKey, data }) {
   }, []);
   const editingShape = shapes.find((s) => s.id === editingText?.id) ?? null;
   const hoverBox = hoverBoxId ? shapes.find((s) => s.id === hoverBoxId) : null;
-  const showProps = isEditable && !editingText && (selection.length > 0 || tool !== "select");
   const propStroke = single?.stroke ?? selection[0]?.stroke ?? stroke;
   const propFill = single?.fill ?? selection.find((s) => isBoxType(s.type))?.fill ?? fill;
   const canvasCursor = tool === "select" ? "default" : tool === "text" ? "text" : "crosshair";
@@ -3004,7 +3022,7 @@ function DrawingCanvas({ nodeKey, data }) {
               onCopyMermaid: copyMermaid
             }
           ),
-          /* @__PURE__ */ jsx9("div", { className: `zui-drawing-props-host ${showProps ? "is-visible" : ""}`, children: /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx9("div", { className: "zui-drawing-props-host", children: /* @__PURE__ */ jsx9(
             PropertyBar,
             {
               selection,

package/dist/styles.css

@@ -653,23 +653,15 @@
   background: color-mix(in srgb, var(--zui-drawing-accent) 14%, transparent);
 }
 
-/* Contextual properties: a second row that expands under the tools */
+/*
+ * Properties row: colors for the selection (or for the next shape when
+ * nothing is selected) plus contextual connector options. Always rendered
+ * with a fixed minimum height so the drawing never shifts under the
+ * pointer when the selection changes.
+ */
 .zui-drawing-props-host {
   flex-basis: 100%;
   display: flex;
-  max-height: 0;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    max-height 0.18s ease,
-    opacity 0.18s ease;
-}
-
-.zui-drawing-props-host.is-visible {
-  max-height: 6rem;
-  opacity: 1;
-  pointer-events: auto;
 }
 
 .zui-drawing-props {
@@ -677,7 +669,8 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.25rem;
-  padding: 0.25rem 0 0.125rem;
+  min-height: 1.75rem;
+  padding: 0.125rem 0 0;
 }
 
 .zui-drawing-props-group {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuilib/text-editor",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "ZUI — A markdown editor component wrapping Lexical",
   "type": "module",
   "main": "./dist/index.js",