pages_core 3.15.3 → 3.15.5

data/app/javascript/components/RichTextArea.tsx

@@ -1,129 +1,69 @@
-import React, { createRef, ChangeEvent, Component, RefObject } from "react";
-import RichTextToolbarButton from "./RichTextToolbarButton";
+import { useRef, ChangeEvent } from "react";
+import ToolbarButton from "./RichTextArea/ToolbarButton";
+import useMaybeControlledValue from "./RichTextArea/useMaybeControlledValue";
 
-interface Props {
+import {
+  ActionFn,
+  simpleActions,
+  advancedActions
+} from "./RichTextArea/actions";
+
+type Props = {
   id: string;
   name: string;
   value: string;
-  rows: number;
+  rows?: number;
   className?: string;
   simple?: boolean;
   lang?: string;
   dir?: string;
   onChange?: (str: string) => void;
-}
-
-interface State {
-  value: string;
-  rows: number;
-}
-
-type Replacement = [string, string, string];
-type ActionFn = (str: string) => Replacement;
-
-interface Action {
-  name: string;
-  className: string;
-  fn: ActionFn;
-  hotkey?: string;
-}
-
-export default class RichTextArea extends Component<Props, State> {
-  inputRef: RefObject<HTMLTextAreaElement>;
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      value: props.value || "",
-      rows: props.rows || 5
-    };
-    this.inputRef = createRef<HTMLTextAreaElement>();
-  }
-
-  actions = () => {
-    const simple: Action[] = [
-      {
-        name: "bold",
-        className: "bold",
-        hotkey: "b",
-        fn: (str: string) => ["<b>", str, "</b>"]
-      },
-      {
-        name: "italic",
-        className: "italic",
-        hotkey: "i",
-        fn: (str: string) => ["<i>", str, "</i>"]
-      }
-    ];
-
-    const advanced: Action[] = [
-      {
-        name: "Heading 2",
-        className: "header h2",
-        fn: (str: string) => ["h2. ", str, ""]
-      },
-      {
-        name: "Heading 3",
-        className: "header h3",
-        fn: (str: string) => ["h3. ", str, ""]
-      },
-      {
-        name: "Heading 4",
-        className: "header h4",
-        fn: (str: string) => ["h4. ", str, ""]
-      },
-      {
-        name: "Blockquote",
-        className: "quote-left",
-        fn: (str: string) => ["bq. ", str, ""]
-      },
-      {
-        name: "List",
-        className: "list-ul",
-        fn: (str: string) => ["", this.strToList(str, "*"), ""]
-      },
-      {
-        name: "Ordered list",
-        className: "list-ol",
-        fn: (str: string) => ["", this.strToList(str, "#"), ""]
-      },
-      { name: "Link", className: "link", fn: this.link },
-      { name: "Email link", className: "envelope", fn: this.emailLink }
-    ];
-
-    return this.props.simple ? simple : [...simple, ...advanced];
-  };
-
-  applyAction(fn: ActionFn) {
-    const [prefix, replacement, postfix] = fn(this.getSelection());
-    this.replaceSelection(prefix, replacement, postfix);
-  }
-
-  emailLink = (selection: string): Replacement => {
-    const address = prompt("Enter email address", "");
-    const name = selection.length > 0 ? selection : address;
-    return ['"', name, `":mailto:${address}`];
+};
+
+export default function RichTextArea({
+  id,
+  name,
+  value: initialValue,
+  rows,
+  className,
+  simple,
+  lang,
+  dir,
+  onChange
+}: Props) {
+  const [value, setValue] = useMaybeControlledValue(initialValue, onChange);
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const actions = simple
+    ? simpleActions
+    : [...simpleActions, ...advancedActions];
+
+  const applyAction = (fn: ActionFn) => {
+    const [prefix, replacement, postfix] = fn(getSelection());
+    replaceSelection(prefix, replacement, postfix);
   };
 
-  getSelection = (): string => {
-    const { selectionStart, selectionEnd, value } = this.inputRef.current;
-    return value.substr(selectionStart, selectionEnd - selectionStart);
+  const getSelection = (): string => {
+    const textarea = inputRef.current;
+    const { selectionStart, selectionEnd, value } = textarea;
+    return value.substring(selectionStart, selectionEnd);
   };
 
-  handleChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
-    this.updateValue(evt.target.value);
+  const handleChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(evt.target.value);
   };
 
-  handleKeyPress = (evt: React.KeyboardEvent) => {
+  const handleKeyPress = (evt: React.KeyboardEvent) => {
     let key: string;
-    if (evt.which >= 65 && evt.which <= 90) {
-      key = String.fromCharCode(evt.keyCode).toLowerCase();
-    } else if (evt.keyCode === 13) {
+    if (evt.key >= "A" && evt.key <= "Z") {
+      key = evt.key.toLowerCase();
+    } else if (evt.key === "Enter") {
       key = "enter";
     }
 
     const hotkeys: Record<string, ActionFn> = {};
-    this.actions().forEach((a) => {
+    actions.forEach((a) => {
       if (a.hotkey) {
         hotkeys[a.hotkey] = a.fn;
       }
@@ -131,133 +71,75 @@ export default class RichTextArea extends Component<Props, State> {
 
     if ((evt.metaKey || evt.ctrlKey) && key in hotkeys) {
       evt.preventDefault();
-      this.applyAction(hotkeys[key]);
+      applyAction(hotkeys[key]);
     }
   };
 
-  link = (selection: string): Replacement => {
-    const name = selection.length > 0 ? selection : "Link text";
-    const url = prompt("Enter link URL", "");
-    if (url) {
-      return ['"', name, `":${this.relativeUrl(url)}`];
-    } else {
-      return ["", name, ""];
-    }
-  };
-
-  localeOptions() {
+  const localeOptions = () => {
     const opts: React.HTMLProps<HTMLTextAreaElement> = {};
 
-    if (this.props.lang) {
-      opts.lang = this.props.lang;
+    if (lang) {
+      opts.lang = lang;
     }
 
-    if (this.props.dir) {
-      opts.dir = this.props.dir;
+    if (dir) {
+      opts.dir = dir;
     }
 
     return opts;
-  }
-
-  relativeUrl(str: string): string {
-    let url: URL = null;
-
-    if (!str.match(/^https:\/\//) || !document || !document.location) {
-      return str;
-    }
-
-    try {
-      url = new URL(str);
-    } catch (error) {
-      console.log("Error parsing URL: ", error);
-    }
-
-    if (
-      url &&
-      url.hostname == document.location.hostname &&
-      (document.location.port || "80") == (url.port || "80")
-    ) {
-      return url.pathname;
-    }
-    return str;
-  }
-
-  render() {
-    const { rows } = this.state;
-    const { id, name } = this.props;
-    const value = this.getValue();
-
-    const clickHandler = (fn: ActionFn) => (evt: React.MouseEvent) => {
-      evt.preventDefault();
-      this.applyAction(fn);
-    };
-
-    return (
-      <div className="rich-text-area">
-        <div className="rich-text toolbar">
-          {this.actions().map((a) => (
-            <RichTextToolbarButton
-              key={a.name}
-              name={a.name}
-              className={a.className}
-              onClick={clickHandler(a.fn)}
-            />
-          ))}
-        </div>
-        <textarea
-          className={this.props.className || "rich"}
-          ref={this.inputRef}
-          id={id}
-          name={name}
-          value={value}
-          rows={rows}
-          onChange={this.handleChange}
-          onKeyDown={this.handleKeyPress}
-          {...this.localeOptions()}
-        />
-      </div>
-    );
-  }
+  };
 
-  replaceSelection = (prefix: string, replacement: string, postfix: string) => {
-    const textarea = this.inputRef.current;
+  const replaceSelection = (
+    prefix: string,
+    replacement: string,
+    postfix: string
+  ) => {
+    const textarea = inputRef.current;
     const { selectionStart, selectionEnd, value } = textarea;
 
     textarea.value =
-      value.substr(0, selectionStart) +
+      value.substring(0, selectionStart) +
       prefix +
       replacement +
       postfix +
-      value.substr(selectionEnd, value.length);
+      value.substring(selectionEnd);
 
     textarea.focus({ preventScroll: true });
     textarea.setSelectionRange(
       selectionStart + prefix.length,
       selectionStart + prefix.length + replacement.length
     );
-    this.updateValue(textarea.value);
+    setValue(textarea.value);
   };
 
-  strToList(str: string, prefix: string) {
-    return str
-      .split("\n")
-      .map((l) => prefix + " " + l)
-      .join("\n");
-  }
-
-  getValue() {
-    if (this.props.onChange) {
-      return this.props.value;
-    } else {
-      return this.state.value;
-    }
-  }
+  const clickHandler = (fn: ActionFn) => (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    applyAction(fn);
+  };
 
-  updateValue(str: string) {
-    if (this.props.onChange) {
-      this.props.onChange(str);
-    } else {
-      this.setState({ value: str });
-    }
-  }
+  return (
+    <div className="rich-text-area">
+      <div className="rich-text toolbar">
+        {actions.map((action) => (
+          <ToolbarButton
+            key={action.name}
+            name={action.name}
+            className={action.className}
+            onClick={clickHandler(action.fn)}
+          />
+        ))}
+      </div>
+      <textarea
+        className={className || "rich"}
+        ref={inputRef}
+        id={id}
+        name={name}
+        value={value || ""}
+        rows={rows || 5}
+        onChange={handleChange}
+        onKeyDown={handleKeyPress}
+        {...localeOptions()}
+      />
+    </div>
+  );
 }

data/app/javascript/components/TagEditor/AddTagForm.tsx

@@ -1,8 +1,8 @@
-import React, { ChangeEvent, MouseEvent, KeyboardEvent, useState } from "react";
+import { ChangeEvent, MouseEvent, KeyboardEvent, useState } from "react";
 
 import * as Tags from "../../types/Tags";
 
-interface Props {
+type Props = {
   dispatch: (action: Tags.Action) => void;
 }
 

data/app/javascript/components/TagEditor/Editor.tsx

@@ -1,16 +1,14 @@
-import React from "react";
-
 import { allTags, isEnabled } from "./useTags";
 
 import AddTagForm from "./AddTagForm";
 import Tag from "./Tag";
 import * as Tags from "../../types/Tags";
 
-interface Props {
+type Props = {
   name: string;
   state: Tags.State;
-  dispatch: (action: Tags.Action) => void;
-}
+  dispatch: React.Dispatch<Tags.Action>;
+};
 
 export default function Editor(props: Props) {
   const { name, state, dispatch } = props;

data/app/javascript/components/TagEditor/Tag.tsx

@@ -1,12 +1,10 @@
-import React from "react";
-
 import * as Tags from "../../types/Tags";
 
-interface Props {
+type Props = {
   enabled: boolean;
   tag: string;
-  dispatch: (action: Tags.Action) => void;
-}
+  dispatch: React.Dispatch<Tags.Action>;
+};
 
 export default function Tag(props: Props) {
   const handleChange = () => {

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

@@ -32,15 +32,18 @@ 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":
+    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;
   }
@@ -49,7 +52,7 @@ function reducer(state: Tags.State, action: Tags.Action) {
 export default function useTags(
   initTags: string[],
   initEnabled: string[]
-): [Tags.State, (action: Tags.Action) => void] {
+): [Tags.State, React.Dispatch<Tags.Action>] {
   const [state, dispatch] = useReducer(reducer, {
     tags: initTags,
     enabled: initEnabled

data/app/javascript/components/TagEditor.tsx

@@ -1,12 +1,10 @@
-import React from "react";
-
 import useTags from "./TagEditor/useTags";
 import Editor from "./TagEditor/Editor";
 import * as Tags from "../types/Tags";
 
-interface Props extends Tags.State {
+type Props = Tags.State & {
   name: string;
-}
+};
 
 export default function TagEditor(props: Props) {
   const [state, dispatch] = useTags(props.tags, props.enabled);

data/app/javascript/components/Toast.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import useToastStore from "../stores/useToastStore";
 
-interface Props {
+type Props = {
   error: string;
   notice: string;
-}
+};
 
 export default function Toast(props: Props) {
   const [fadeout, setFadeout] = useState(false);
@@ -21,7 +21,7 @@ export default function Toast(props: Props) {
     if (props.notice) {
       notice(props.notice);
     }
-  }, [props.error, props.notice]);
+  }, [props.error, props.notice, error, notice]);
 
   useEffect(() => {
     setFadeout(false);
@@ -38,7 +38,7 @@ export default function Toast(props: Props) {
     return () => {
       clearTimeout(timerRef.current);
     };
-  }, [toast]);
+  }, [toast, next]);
 
   const classNames = ["toast"];
 

data/app/javascript/components/drag/draggedOrder.ts

@@ -2,7 +2,7 @@ import * as Drag from "../../types/Drag";
 
 function hovering<T>(
   dragState: Drag.State<T>,
-  target: Drag.Item<T> | React.MutableRefObject<HTMLDivElement>
+  target: Drag.DraggableOrFiles<T> | React.MutableRefObject<HTMLDivElement>
 ) {
   const { x, y } = dragState;
   let rect: DOMRect;
@@ -22,7 +22,7 @@ function hovering<T>(
 export function collectionOrder<T>(
   collection: Drag.Collection<T>,
   dragState: Drag.State<T>
-): Array<Drag.Item<T>> {
+): Array<Drag.DraggableOrFiles<T>> {
   const { draggables, ref } = collection;
   const { dragging } = dragState;
 
@@ -30,11 +30,11 @@ export function collectionOrder<T>(
     return draggables;
   }
 
-  let ordered: Drag.Item<T>[] = draggables;
-  if (typeof dragging !== "string") {
+  let ordered = draggables;
+  if (dragging !== "Files") {
     ordered = draggables
-      .filter((d) => typeof d !== "string")
-      .filter((d: Drag.Draggable<T>) => d.handle !== dragging.handle);
+      .filter((d) => d !== "Files")
+      .filter((d) => d.handle !== dragging.handle);
   }
   if (hovering(dragState, ref)) {
     const hovered = ordered.filter((d) => hovering(dragState, d))[0];

data/app/javascript/components/drag/useDragCollection.ts

@@ -11,20 +11,20 @@ function getPosition<T>(draggable: Drag.Draggable<T>) {
   }
 }
 
-function hideDraggable<T>(
-  draggable: Drag.Item<T> | null,
-  callback: () => Drag.Item<T>[]
+function hideDragging<T>(
+  dragging: Drag.DraggableOrFiles<T> | null,
+  callback: () => Drag.DraggableOrFiles<T>[]
 ) {
   if (
-    draggable &&
-    draggable !== "Files" &&
-    "ref" in draggable &&
-    draggable.ref.current
+    dragging &&
+    dragging !== "Files" &&
+    "ref" in dragging &&
+    dragging.ref.current
   ) {
-    const prevDisplay = draggable.ref.current.style.display;
-    draggable.ref.current.style.display = "none";
+    const prevDisplay = dragging.ref.current.style.display;
+    dragging.ref.current.style.display = "none";
     const result = callback();
-    draggable.ref.current.style.display = prevDisplay;
+    dragging.ref.current.style.display = prevDisplay;
     return result;
   } else {
     return callback();
@@ -32,9 +32,9 @@ function hideDraggable<T>(
 }
 
 function insertFiles<T>(
-  state: Drag.Item<T>[],
-  files: Drag.Item<T>[]
-): Drag.Item<T>[] {
+  state: Drag.DraggableOrFiles<T>[],
+  files: Drag.DraggableOrFiles<T>[]
+): Drag.DraggableOrFiles<T>[] {
   const index = state.indexOf("Files");
   if (index === -1 || !files) {
     return state;
@@ -43,10 +43,10 @@ function insertFiles<T>(
   }
 }
 
-function dragCollectionReducer<T = Drag.DraggableRecord>(
-  state: Drag.Item<T>[],
+function reducer<T>(
+  state: Drag.DraggableOrFiles<T>[],
   action: Drag.CollectionAction<T>
-): Drag.Item<T>[] {
+): Drag.DraggableOrFiles<T>[] {
   switch (action.type) {
     case "append":
       return [...state, ...action.payload];
@@ -56,12 +56,10 @@ function dragCollectionReducer<T = Drag.DraggableRecord>(
       return insertFiles(state, action.payload);
     case "update":
       return state.map((d: Drag.Draggable<T>) => {
-        return d.handle === (action.payload as Drag.Draggable<T>).handle
-          ? action.payload
-          : d;
+        return d.handle === action.payload.handle ? action.payload : d;
       });
     case "updatePositions":
-      return hideDraggable(action.payload, () => {
+      return hideDragging(action.payload, () => {
         return state.map((d: Drag.Draggable<T>) => {
           return { ...d, rect: getPosition(d) };
         });
@@ -81,9 +79,7 @@ function dragCollectionReducer<T = Drag.DraggableRecord>(
   }
 }
 
-export function createDraggable<T = Drag.DraggableRecord>(
-  record: T
-): Drag.Draggable<T> {
+export function createDraggable<T>(record: T): Drag.Draggable<T> {
   return {
     record: record,
     rect: null,
@@ -92,11 +88,11 @@ export function createDraggable<T = Drag.DraggableRecord>(
   };
 }
 
-export default function useDragCollection<T = Drag.DraggableRecord>(
+export default function useDragCollection<T>(
   records: Array<T>
 ): Drag.Collection<T> {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [draggables, dispatch] = useReducer(dragCollectionReducer<T>, [], () =>
+  const [draggables, dispatch] = useReducer(reducer<T>, [], () =>
     records.map((r) => createDraggable(r))
   );
 

data/app/javascript/components/drag/useDragUploader.ts

@@ -8,6 +8,16 @@ type AnyTouchEvent =
   | React.MouseEvent
   | React.TouchEvent;
 
+type StartDrag<T> = (
+  evt: AnyTouchEvent,
+  draggable: Drag.DraggableOrFiles<T>
+) => void;
+
+type Listeners = {
+  onDragOver: (evt: AnyTouchEvent) => void;
+  onDrop: (evt: AnyTouchEvent) => void;
+};
+
 function containsFiles(evt: AnyTouchEvent) {
   if ("dataTransfer" in evt) {
     const dataTransfer = evt.dataTransfer as DataTransfer;
@@ -52,29 +62,23 @@ function mousePosition(evt: AnyTouchEvent): Drag.Position {
 export default function useDragUploader<T>(
   collections: Drag.Collection<T>[],
   onDragEnd: (dragState: Drag.State<T>, files: File[]) => void
-): [
-  Drag.State<T>,
-  (evt: AnyTouchEvent, draggable: Drag.Item<T>) => void,
-  {
-    onDragOver: (evt: AnyTouchEvent) => void;
-    onDrop: (evt: AnyTouchEvent) => void;
-  }
-] {
-  const initialState: Drag.State<T> = {
+): [Drag.State<T>, StartDrag<T>, Listeners] {
+  const [dragState, setDragState] = useState<Drag.State<T>>({
     dragging: false,
     x: null,
     y: null
-  };
-
-  const [dragState, setDragState] = useState(initialState);
+  });
 
-  const updatePositions = (dragging?: Drag.Draggable<T> | string) => {
+  const updatePositions = (dragging?: Drag.DraggableOrFiles<T>) => {
     collections.forEach((c) => {
       c.dispatch({ type: "updatePositions", payload: dragging });
     });
   };
 
-  const startDrag = (evt: AnyTouchEvent, draggable: Drag.Item<T>) => {
+  const startDrag = (
+    evt: AnyTouchEvent,
+    draggable: Drag.DraggableOrFiles<T>
+  ) => {
     updatePositions(draggable);
     setDragState({ dragging: draggable, ...mousePosition(evt) });
   };
@@ -84,10 +88,8 @@ export default function useDragUploader<T>(
       evt.stopPropagation();
       evt.preventDefault();
       setDragState({ ...dragState, ...mousePosition(evt) });
-    } else {
-      if (containsFiles(evt)) {
-        startDrag(evt, "Files");
-      }
+    } else if (containsFiles(evt)) {
+      startDrag(evt, "Files");
     }
   };