pages_core 3.15.3 → 3.15.4

data/app/javascript/components/ImageCropper.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useState } from "react";
 
 import * as Crop from "../types/Crop";
 
@@ -24,28 +24,28 @@ function focalPoint(state: Crop.State): Crop.Position {
   }
 }
 
-export default function ImageCropper(props: Props) {
-  const containerRef = useRef<HTMLDivElement>();
+function useContainerSize(): [(node?: HTMLDivElement) => void, Crop.Size] {
   const [containerSize, setContainerSize] = useState<Crop.Size>();
 
-  const handleResize = () => {
-    const elem = containerRef.current;
-    if (elem) {
+  const ref = useCallback((node?: HTMLDivElement) => {
+    const measure = () => {
       setContainerSize({
-        width: elem.offsetWidth - 2,
-        height: elem.offsetHeight - 2
+        width: node.offsetWidth - 2,
+        height: node.offsetHeight - 2
       });
+    };
+    if (node !== null) {
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(node);
     }
-  };
+  }, []);
 
-  useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    return function cleanup() {
-      window.removeEventListener("resize", handleResize);
-    };
-  });
+  return [ref, containerSize];
+}
 
-  useEffect(handleResize, []);
+export default function ImageCropper(props: Props) {
+  const [containerRef, containerSize] = useContainerSize();
 
   const setAspect = (aspect: number) => {
     props.dispatch({ type: "setAspect", payload: aspect });

data/app/javascript/components/PageForm.tsx

@@ -107,6 +107,13 @@ export default function PageForm(props: Props) {
         } else {
           filesState.update(response.page_files);
           imagesState.update(response.page_images);
+          tagsDispatch({
+            type: "update",
+            payload: {
+              tags: response.tags_and_suggestions,
+              enabled: response.enabled_tags
+            }
+          });
           noticeToast("Your changes were saved");
         }
       })

data/app/javascript/components/TagEditor/useTags.ts

@@ -32,15 +32,17 @@ function toggle(tag: string, state: Tags.State) {
 
 function reducer(state: Tags.State, action: Tags.Action) {
   const { type, payload } = action;
-  const normalized = normalize(payload, state);
   switch (type) {
     case "addTag":
+      const normalized = normalize(payload, state);
       return {
         tags: [...state.tags, normalized].filter(onlyUnique),
         enabled: [...state.enabled, normalized].filter(onlyUnique)
       };
     case "toggleTag":
-      return toggle(normalized, state);
+      return toggle(normalize(payload, state), state);
+    case "update":
+      return payload;
     default:
       return state;
   }

data/app/javascript/types/Tags.ts

@@ -1,7 +1,6 @@
-export interface Action {
-  type: "addTag" | "toggleTag";
-  payload: string;
-}
+export type Action =
+  | { type: "addTag" | "toggleTag"; payload: string }
+  | { type: "update"; payload: State };
 
 export interface State {
   enabled: string[];

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pages_core
 version: !ruby/object:Gem::Version
-  version: 3.15.3
+  version: 3.15.4
 platform: ruby
 authors:
 - Inge Jørgensen
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-12 00:00:00.000000000 Z
+date: 2024-06-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails