pages_core 3.12.4 → 3.12.5

data/app/javascript/components/PageTree.tsx

@@ -5,31 +5,36 @@ import { Attributes, PageNode } from "./PageTree/types";
 import Draggable from "./PageTree/Draggable";
 
 interface Page extends Record<string, unknown> {
-  parent_page_id: number | null
+  parent_page_id: number | null;
 }
 
 type CollapsedState = Record<number, boolean>;
 
 interface ParentMap {
-  [index: number]: Page[]
+  [index: number]: Page[];
 }
 
 interface PageTreeProps {
-  dir: string,
-  locale: string,
-  pages: Page[],
-  permissions: string[]
+  dir: string;
+  locale: string;
+  pages: Page[];
+  permissions: string[];
 }
 
 interface PageTreeState {
-  tree: Tree<PageNode>
+  tree: Tree<PageNode>;
 }
 
 function collapsedState(): CollapsedState {
-  if (window && window.localStorage &&
-    typeof(window.localStorage.collapsedPages) != "undefined") {
-      return JSON.parse(window.localStorage.getItem("collapsedPages")) as CollapsedState;
-    }
+  if (
+    window &&
+    window.localStorage &&
+    typeof window.localStorage.collapsedPages != "undefined"
+  ) {
+    return JSON.parse(
+      window.localStorage.getItem("collapsedPages")
+    ) as CollapsedState;
+  }
   return {};
 }
 
@@ -62,15 +67,16 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
         node.collapsed = true;
       }
       if (index.children && index.children.length) {
-        index.children.forEach(c => walk(c));
+        index.children.forEach((c) => walk(c));
       }
     };
     walk(1);
   }
 
   createPage(index: TreeIndex<PageNode>, attributes: Attributes) {
-    void postJson(`/admin/${index.node.locale}/pages.json`, { page: attributes })
-      .then((response: Attributes) => this.updateNode(index, response));
+    void postJson(`/admin/${index.node.locale}/pages.json`, {
+      page: attributes
+    }).then((response: Attributes) => this.updateNode(index, response));
   }
 
   buildTree(pages: Page[]) {
@@ -81,7 +87,9 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
       return m;
     }, {});
 
-    pages.forEach((p: Page) => { p.children = parentMap[p.id] || []; });
+    pages.forEach((p: Page) => {
+      p.children = parentMap[p.id] || [];
+    });
 
     const tree = new Tree({
       name: "All Pages",
@@ -95,7 +103,11 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
     return tree;
   }
 
-  movePage(index: TreeIndex<PageNode>, parent: TreeIndex<PageNode>, position: number) {
+  movePage(
+    index: TreeIndex<PageNode>,
+    parent: TreeIndex<PageNode>,
+    position: number
+  ) {
     const data = {
       parent_id: parent.node.id,
       position: position
@@ -105,8 +117,9 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
   }
 
   performUpdate(index: TreeIndex, url: string, data: Attributes) {
-    void putJson(url, data)
-      .then((response: Page) => this.updateNode(index, response));
+    void putJson(url, data).then((response: Page) =>
+      this.updateNode(index, response)
+    );
   }
 
   render() {
@@ -116,7 +129,7 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
       this.reorderChildren(id);
       this.setCollapsed(id, false);
       this.createPage(index, attributes);
-      this.setState({tree: tree});
+      this.setState({ tree: tree });
     };
 
     const movedPage = (id: TreeId) => {
@@ -135,7 +148,7 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
       const tree = this.state.tree;
       const node = tree.getIndex(id).node;
       this.setCollapsed(id, !node.collapsed);
-      this.setState({tree: tree});
+      this.setState({ tree: tree });
     };
 
     const updatePage = (id: TreeId, attributes: Attributes) => {
@@ -150,15 +163,17 @@ export default class PageTree extends Component<PageTreeProps, PageTreeState> {
       this.setState({ tree: tree });
     };
 
-    return(
-      <Draggable tree={this.state.tree}
-                 addChild={addChild}
-                 movedPage={movedPage}
-                 toggleCollapsed={toggleCollapsed}
-                 updatePage={updatePage}
-                 updateTree={updateTree}
-                 locale={this.props.locale}
-                 dir={this.props.dir} />
+    return (
+      <Draggable
+        tree={this.state.tree}
+        addChild={addChild}
+        movedPage={movedPage}
+        toggleCollapsed={toggleCollapsed}
+        updatePage={updatePage}
+        updateTree={updateTree}
+        locale={this.props.locale}
+        dir={this.props.dir}
+      />
     );
   }
 

data/app/javascript/components/RichTextArea.jsx

@@ -20,59 +20,60 @@ export default class RichTextArea extends React.Component {
   actions() {
     const simple = [
       {
-        name:      "bold",
+        name: "bold",
         className: "bold",
-        hotkey:    "b",
-        fn:        (str) => ["<b>", str, "</b>"]
+        hotkey: "b",
+        fn: (str) => ["<b>", str, "</b>"]
       },
-      { name:      "italic",
+      {
+        name: "italic",
         className: "italic",
-        hotkey:    "i",
-        fn:        (str) => ["<i>", str, "</i>"]
-      },
+        hotkey: "i",
+        fn: (str) => ["<i>", str, "</i>"]
+      }
     ];
 
     const advanced = [
       {
-        name:      "Heading 2",
+        name: "Heading 2",
         className: "header h2",
-        fn:        (str) => ["h2. ", str, ""]
+        fn: (str) => ["h2. ", str, ""]
       },
       {
-        name:      "Heading 3",
+        name: "Heading 3",
         className: "header h3",
-        fn:        (str) => ["h3. ", str, ""]
+        fn: (str) => ["h3. ", str, ""]
       },
       {
-        name:      "Heading 4",
+        name: "Heading 4",
         className: "header h4",
-        fn:        (str) => ["h4. ", str, ""]
+        fn: (str) => ["h4. ", str, ""]
       },
       {
-        name:      "Blockquote",
+        name: "Blockquote",
         className: "quote-left",
-        fn:        (str) => ["bq. ", str, ""]
+        fn: (str) => ["bq. ", str, ""]
       },
       {
-        name:      "List",
+        name: "List",
         className: "list-ul",
-        fn:        (str) => ["", this.strToList(str, "*"), ""]
+        fn: (str) => ["", this.strToList(str, "*"), ""]
       },
       {
-        name:      "Ordered list",
+        name: "Ordered list",
         className: "list-ol",
-        fn:        (str) => ["", this.strToList(str, "#"), ""]
+        fn: (str) => ["", this.strToList(str, "#"), ""]
       },
       {
-        name:      "Link",
+        name: "Link",
         className: "link",
-        fn:        this.link
+        fn: this.link
       },
       {
-        name:      "Email link",
+        name: "Email link",
         className: "envelope",
-        fn:        this.emailLink
-      },
+        fn: this.emailLink
+      }
     ];
 
     return this.props.simple ? simple : [...simple, ...advanced];
@@ -86,12 +87,12 @@ export default class RichTextArea extends React.Component {
   emailLink(selection) {
     var address = prompt("Enter email address", "");
     let name = selection.length > 0 ? selection : address;
-    return ["\"", name, `":mailto:${address}`];
+    return ['"', name, `":mailto:${address}`];
   }
 
   getSelection() {
     let { selectionStart, selectionEnd, value } = this.inputRef.current;
-    return value.substr(selectionStart, (selectionEnd - selectionStart));
+    return value.substr(selectionStart, selectionEnd - selectionStart);
   }
 
   handleChange(evt) {
@@ -107,13 +108,16 @@ export default class RichTextArea extends React.Component {
     }
 
     let hotkeys = {};
-    this.actions().forEach(a => {
+    this.actions().forEach((a) => {
       if (a.hotkey) {
         hotkeys[a.hotkey] = a.fn;
       }
     });
 
-    if ((evt.metaKey || evt.ctrlKey) && Object.prototype.hasOwnProperty.call(hotkeys, key)) {
+    if (
+      (evt.metaKey || evt.ctrlKey) &&
+      Object.prototype.hasOwnProperty.call(hotkeys, key)
+    ) {
       evt.preventDefault();
       this.applyAction(hotkeys[key]);
     }
@@ -123,7 +127,7 @@ export default class RichTextArea extends React.Component {
     let name = selection.length > 0 ? selection : "Link text";
     var url = prompt("Enter link URL", "");
     if (url) {
-      return ["\"", name, `":${this.relativeUrl(url)}`];
+      return ['"', name, `":${this.relativeUrl(url)}`];
     } else {
       return ["", name, ""];
     }
@@ -156,9 +160,11 @@ export default class RichTextArea extends React.Component {
       console.log("Error parsing URL: ", error);
     }
 
-    if (url &&
-        url.hostname == document.location.hostname &&
-        (document.location.port || "80") == (url.port || "80")) {
+    if (
+      url &&
+      url.hostname == document.location.hostname &&
+      (document.location.port || "80") == (url.port || "80")
+    ) {
       return url.pathname;
     }
     return str;
@@ -176,12 +182,14 @@ export default class RichTextArea extends React.Component {
     return (
       <div className="rich-text-area">
         <div className="rich-text toolbar">
-          {this.actions().map(a =>
+          {this.actions().map((a) => (
             <RichTextToolbarButton
               key={a.name}
               name={a.name}
               className={a.className}
-              onClick={clickHandler(a.fn)} />)}
+              onClick={clickHandler(a.fn)}
+            />
+          ))}
         </div>
         <textarea
           className="rich"
@@ -192,7 +200,8 @@ export default class RichTextArea extends React.Component {
           rows={rows}
           onChange={this.handleChange}
           onKeyDown={this.handleKeyPress}
-          {...this.localeOptions()} />
+          {...this.localeOptions()}
+        />
       </div>
     );
   }
@@ -203,7 +212,9 @@ export default class RichTextArea extends React.Component {
 
     textarea.value =
       value.substr(0, selectionStart) +
-      prefix + replacement + postfix +
+      prefix +
+      replacement +
+      postfix +
       value.substr(selectionEnd, value.length);
 
     textarea.focus({ preventScroll: true });
@@ -215,7 +226,10 @@ export default class RichTextArea extends React.Component {
   }
 
   strToList(str, prefix) {
-    return str.split("\n").map(l => prefix +  " " + l).join("\n");
+    return str
+      .split("\n")
+      .map((l) => prefix + " " + l)
+      .join("\n");
   }
 }
 

data/app/javascript/components/RichTextToolbarButton.tsx

@@ -1,14 +1,17 @@
 import React from "react";
 
 interface RichTextToolbarButtonProps {
-  className: string,
-  name: string,
-  onClick: (evt: Event) => void
+  className: string;
+  name: string;
+  onClick: (evt: Event) => void;
 }
 
-export default function RichTextToolbarButton(props: RichTextToolbarButtonProps) {
+export default function RichTextToolbarButton(
+  props: RichTextToolbarButtonProps
+) {
   return (
-    <a title={props.name}
+    <a
+      title={props.name}
       className={"button " + props.className}
       onClick={props.onClick}>
       <i className={"fa-solid fa-" + props.className} />

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

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useState } from "react";
 
 interface AddTagFormProps {
-  addTag: (string) => void
+  addTag: (string) => void;
 }
 
 export default function AddTagForm(props: AddTagFormProps) {
@@ -25,15 +25,16 @@ export default function AddTagForm(props: AddTagFormProps) {
 
   return (
     <div className="add-tag-form">
-      <input name="add-tag"
-             type="text"
-             className="add-tag"
-             value={tag}
-             onKeyDown={handleKeyDown}
-             onChange={handleChange}
-             placeholder="Add tag..." />
-      <button onClick={submit}
-              disabled={!tag}>
+      <input
+        name="add-tag"
+        type="text"
+        className="add-tag"
+        value={tag}
+        onKeyDown={handleKeyDown}
+        onChange={handleChange}
+        placeholder="Add tag..."
+      />
+      <button onClick={submit} disabled={!tag}>
         Add
       </button>
     </div>

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

@@ -1,9 +1,9 @@
 import React from "react";
 
 interface TagProps {
-  enabled: boolean,
-  tag: string,
-  toggleEnabled: (string) => void
+  enabled: boolean;
+  tag: string;
+  toggleEnabled: (string) => void;
 }
 
 export default function Tag(props: TagProps): JSX.Element {
@@ -19,11 +19,13 @@ export default function Tag(props: TagProps): JSX.Element {
   return (
     <span className={classes.join(" ")}>
       <label className="check-box">
-        <input type="checkbox"
-               name={"tag-" + props.tag}
-               value="1"
-               checked={props.enabled}
-               onChange={handleChange} />
+        <input
+          type="checkbox"
+          name={"tag-" + props.tag}
+          value="1"
+          checked={props.enabled}
+          onChange={handleChange}
+        />
         <span className="name">{props.tag}</span>
       </label>
     </span>

data/app/javascript/components/TagEditor.tsx

@@ -4,9 +4,9 @@ import AddTagForm from "./TagEditor/AddTagForm";
 import Tag from "./TagEditor/Tag";
 
 interface TagEditorProps {
-  name: string,
-  enabled: string[],
-  tags: string[]
+  name: string;
+  enabled: string[];
+  tags: string[];
 }
 
 function onlyUnique(value: string, index: number, self: string[]): number {
@@ -21,12 +21,14 @@ export default function TagEditor(props: TagEditorProps) {
 
   const normalize = (tag: string): string => {
     return (
-      tagList.filter(t => t.toLowerCase() == tag.toLowerCase())[0] || tag
+      tagList.filter((t) => t.toLowerCase() == tag.toLowerCase())[0] || tag
     );
   };
 
   const tagEnabled = (tag: string): boolean => {
-    return enabled.map(t => t.toLowerCase()).indexOf(tag.toLowerCase()) !== -1;
+    return (
+      enabled.map((t) => t.toLowerCase()).indexOf(tag.toLowerCase()) !== -1
+    );
   };
 
   const toggleEnabled = (tag: string) => {
@@ -49,11 +51,14 @@ export default function TagEditor(props: TagEditorProps) {
   return (
     <div className="tag-editor clearfix">
       <input type="hidden" name={props.name} value={JSON.stringify(enabled)} />
-      {tagList.map((t) =>
-        <Tag key={t}
-             tag={t}
-             enabled={tagEnabled(t)}
-             toggleEnabled={toggleEnabled} />)}
+      {tagList.map((t) => (
+        <Tag
+          key={t}
+          tag={t}
+          enabled={tagEnabled(t)}
+          toggleEnabled={toggleEnabled}
+        />
+      ))}
       <AddTagForm addTag={addTag} />
     </div>
   );

data/app/javascript/components/Toast.tsx

@@ -3,8 +3,8 @@ import React, { useEffect, useRef, useState } from "react";
 import useToastStore from "../stores/useToastStore";
 
 interface ToastProps {
-  error: string,
-  notice: string
+  error: string;
+  notice: string;
 }
 
 export default function Toast(props: ToastProps) {
@@ -51,11 +51,7 @@ export default function Toast(props: ToastProps) {
 
   return (
     <div className="toast-wrapper" aria-live="polite">
-      {toast && (
-        <div className={classNames.join(" ")}>
-          {toast.message}
-        </div>
-      )}
+      {toast && <div className={classNames.join(" ")}>{toast.message}</div>}
     </div>
   );
 }

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

@@ -13,12 +13,12 @@ function hovering(
   } else {
     return false;
   }
-  return (x >= rect.left && x <= rect.right &&
-          y >= rect.top && y <= rect.bottom);
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
 }
 
 export function collectionOrder(
-  collection: DragCollection, dragState: DragState
+  collection: DragCollection,
+  dragState: DragState
 ): Draggable[] {
   const { draggables, ref } = collection;
   const { dragging } = dragState;
@@ -27,14 +27,12 @@ export function collectionOrder(
     return draggables;
   }
 
-  let ordered = draggables.filter(d => d.handle !== dragging.handle);
+  let ordered = draggables.filter((d) => d.handle !== dragging.handle);
   if (hovering(dragState, ref)) {
-    const hovered = ordered.filter(d => hovering(dragState, d))[0];
+    const hovered = ordered.filter((d) => hovering(dragState, d))[0];
     if (hovered) {
       const index = ordered.indexOf(hovered);
-      ordered = [...ordered.slice(0, index),
-                 dragging,
-                 ...ordered.slice(index)];
+      ordered = [...ordered.slice(0, index), dragging, ...ordered.slice(index)];
     } else {
       ordered = [...ordered, dragging];
     }
@@ -44,17 +42,20 @@ export function collectionOrder(
 }
 
 export default function draggedOrder(
-  collection: DragCollection, dragState: DragState
+  collection: DragCollection,
+  dragState: DragState
 ): Draggable[] {
   let ordered = collectionOrder(collection, dragState);
 
   if (dragState.dragging && ordered.indexOf(dragState.dragging) === -1) {
-    if (collection.ref.current &&
-      dragState.y < collection.ref.current.getBoundingClientRect().top) {
-        ordered = [dragState.dragging, ...ordered];
-      } else {
-        ordered.push(dragState.dragging);
-      }
+    if (
+      collection.ref.current &&
+      dragState.y < collection.ref.current.getBoundingClientRect().top
+    ) {
+      ordered = [dragState.dragging, ...ordered];
+    } else {
+      ordered.push(dragState.dragging);
+    }
   }
 
   return ordered;

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

@@ -1,28 +1,28 @@
 export type DraggableRecord = Record<string, unknown>;
 
 export interface Draggable {
-  record: DraggableRecord,
-  ref: React.MutableRefObject<HTMLDivElement>,
-  rect: DOMRect | null,
-  handle: string
+  record: DraggableRecord;
+  ref: React.MutableRefObject<HTMLDivElement>;
+  rect: DOMRect | null;
+  handle: string;
 }
 
 export interface DragCollectionAction {
-  type: string,
-  payload?: Draggable[] | Draggable | null
+  type: string;
+  payload?: Draggable[] | Draggable | null;
 }
 
 export interface DragCollection {
-  ref: React.MutableRefObject<HTMLDivElement>,
-  draggables: Draggable[],
-  dispatch: (DragCollectionAction) => void
+  ref: React.MutableRefObject<HTMLDivElement>;
+  draggables: Draggable[];
+  dispatch: (DragCollectionAction) => void;
 }
 
 export interface Position {
-  x: number | null,
-  y: number | null
+  x: number | null;
+  y: number | null;
 }
 
 export interface DragState extends Position {
-  dragging: Draggable | false
+  dragging: Draggable | false;
 }