pages_core 3.15.3 → 3.15.5

data/app/javascript/components/PageTree.tsx

@@ -1,233 +1,213 @@
-import React, { Component } from "react";
+import { useCallback, useEffect, useState } from "react";
 
-import Tree from "../lib/Tree";
-import { postJson, putJson } from "../lib/request";
-import * as Trees from "../types/Trees";
 import * as Pages from "../types/Pages";
-
-import Draggable from "./PageTree/Draggable";
-
-type CollapsedState = Record<number, boolean>;
-
-interface ParentMap {
-  [index: number]: Pages.TreeNode[];
-}
-
-interface Props {
+import * as Tree from "./PageTree/tree";
+import usePageTree, {
+  State,
+  movePage,
+  visibleChildNodes
+} from "./PageTree/usePageTree";
+import { PageTreeContext } from "./PageTree/usePageTreeContext";
+import Node, { paddingLeft } from "./PageTree/Node";
+
+type DragState = {
+  id: Tree.Id;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  scrollTop: number;
+  scrollLeft: number;
+  startX: number;
+  startY: number;
+  offsetX: number;
+  offsetY: number;
+  tree: State;
+};
+
+type Props = {
   dir: string;
   locale: string;
-  pages: Pages.TreeNode[];
+  pages: Pages.TreeResource[];
   permissions: string[];
-}
-
-interface State {
-  tree: Tree<Pages.TreeNode>;
-}
-
-function collapsedState(): CollapsedState {
-  if (
-    window &&
-    window.localStorage &&
-    typeof window.localStorage.collapsedPages != "undefined"
-  ) {
-    return JSON.parse(
-      window.localStorage.getItem("collapsedPages")
-    ) as CollapsedState;
+};
+
+function prevAddButtonCount(state: State, id: Tree.Id) {
+  let count = 0;
+  const parentNodes = Tree.parents(state, id);
+
+  let pointer = Tree.getNodeByTop(state, state.nodes[id].top - 1);
+  while (pointer) {
+    if (
+      parentNodes.indexOf(pointer.id) == -1 &&
+      !pointer.collapsed &&
+      visibleChildNodes(state, pointer.id).length > 0
+    ) {
+      count += 1;
+    }
+    pointer = Tree.getNodeByTop(state, pointer.top - 1);
   }
-  return {};
+  return count;
 }
 
-export default class PageTree extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
+export default function PageTree({ dir, locale, pages, permissions }: Props) {
+  const [state, dispatch] = usePageTree(pages, locale, dir, permissions);
+
+  const [dragging, setDragging] = useState(false);
+  const [dragState, setDragState] = useState<DragState | null>(null);
+
+  const getDraggingDom = () => {
+    if (dragging) {
+      const dragStateStyles = {
+        top: dragState.y,
+        left: dragState.x,
+        width: dragState.w
+      };
+
+      return (
+        <div className="draggable" style={dragStateStyles}>
+          <Node id={dragState.id} />
+        </div>
+      );
+    }
+  };
 
-    this.state = { tree: this.buildTree(props.pages, props.locale) };
-  }
+  const dragStart = (id: Tree.Id, dom: HTMLDivElement, e: React.MouseEvent) => {
+    // Only drag on left click
+    if (e.button !== 0) {
+      return;
+    }
 
-  applyCollapsed(tree: Tree<Pages.TreeNode>) {
-    const depth = (t: Tree, index: Trees.Index) => {
-      let depth = 0;
-      let pointer = t.getIndex(index.parent);
-      while (pointer) {
-        depth += 1;
-        pointer = t.getIndex(pointer.parent);
+    setDragState({
+      id: id,
+      w: dom.offsetWidth,
+      h: dom.offsetHeight,
+      x: dom.offsetLeft,
+      y: dom.offsetTop,
+      scrollTop: document.body.scrollTop,
+      scrollLeft: document.body.scrollLeft,
+      startX: dom.offsetLeft,
+      startY: dom.offsetTop,
+      offsetX: e.clientX,
+      offsetY: e.clientY,
+      tree: { ...state }
+    });
+  };
+
+  const drag = useCallback(
+    (e: MouseEvent) => {
+      if (!dragState) {
+        return;
+      } else if (!dragging) {
+        const distance =
+          Math.abs(e.clientX - dragState.offsetX) +
+          Math.abs(e.clientY - dragState.offsetY);
+        if (distance >= 15) {
+          setDragging(true);
+        } else {
+          return null;
+        }
       }
-      return depth;
-    };
 
-    const walk = (id: Trees.Id) => {
-      const index = tree.getIndex(id);
-      const node = index.node;
-      if (node.id && node.id in collapsedState()) {
-        node.collapsed = collapsedState()[node.id];
-      } else if (node.news_page) {
-        node.collapsed = true;
-      } else if (depth(tree, index) > 1) {
-        node.collapsed = true;
+      let tree = dragState.tree;
+      let node = tree.nodes[dragState.id];
+
+      const pos = {
+        x:
+          dragState.startX +
+          e.clientX -
+          dragState.offsetX +
+          (document.body.scrollLeft - dragState.scrollLeft),
+        y:
+          dragState.startY +
+          e.clientY -
+          dragState.offsetY +
+          (document.body.scrollTop - dragState.scrollTop)
+      };
+
+      const move = (target: Tree.Id, placement: Tree.MovePlacement) => {
+        tree = {
+          ...tree,
+          ...Tree.indexPositions(
+            Tree.moveRelative(tree, node.id, target, placement)
+          )
+        };
+        node = tree.nodes[dragState.id];
+      };
+
+      const diffX = pos.x - paddingLeft / 2 - (node.left - 2) * paddingLeft;
+      const diffY =
+        pos.y -
+        dragState.h / 2 -
+        (node.top - 2 + prevAddButtonCount(tree, dragState.id)) * dragState.h;
+
+      if (diffX < 0) {
+        // left
+        if (node.parent && !Tree.nextSibling(tree, node.id)) {
+          move(node.parent, "after");
+        }
+      } else if (diffX > paddingLeft) {
+        // right
+        const prev = Tree.prevSibling(tree, node.id);
+        if (prev && !prev.collapsed) {
+          move(prev.id, "append");
+        }
       }
-      if (index.children && index.children.length) {
-        index.children.forEach((c) => walk(c));
-      }
-    };
-    walk(1);
-  }
-
-  createPage(index: Trees.Index<Pages.TreeNode>, attributes: Pages.TreeItem) {
-    void postJson(`/admin/${this.props.locale}/pages.json`, {
-      page: attributes
-    }).then((response: Pages.TreeItem) => this.updateNode(index, response));
-  }
 
-  buildTree(pages: Pages.TreeNode[], locale: string) {
-    // Build tree
-    const parentMap: ParentMap = pages.reduce(
-      (m: ParentMap, page: Pages.TreeNode) => {
-        const id = page.parent_page_id || 0;
-        m[id] = [...(m[id] || []), page];
-        return m;
-      },
-      {}
-    );
-
-    pages.forEach((p) => {
-      p.children = parentMap[p.id] || [];
-    });
-
-    const tree = new Tree<Pages.TreeNode>({
-      blocks: {
-        name: { [locale]: "All Pages" }
-      },
-      permissions: this.props.permissions,
-      root: true,
-      children: parentMap[0],
-      collapsed: false
-    });
-    this.applyCollapsed(tree);
-    tree.updateNodesPosition();
-    return tree;
-  }
-
-  movePage(
-    index: Trees.Index<Pages.TreeNode>,
-    parent: Trees.Index<Pages.TreeNode>,
-    position: number
-  ) {
-    const data = {
-      parent_id: parent.node.id,
-      position: position
-    };
-    const url = `/admin/${this.props.locale}/pages/${index.node.id}/move.json`;
-    this.performUpdate(index, url, data);
-  }
-
-  performUpdate(
-    index: Trees.Index<Pages.TreeNode>,
-    url: string,
-    data: Record<string, unknown>
-  ) {
-    void putJson(url, data).then((response: Pages.TreeItem) =>
-      this.updateNode(index, response)
-    );
-  }
-
-  render() {
-    const addChild = (id: Trees.Id, attributes: Pages.TreeNode) => {
-      const tree = this.state.tree;
-      const index = tree.append(attributes, id);
-      this.reorderChildren(id);
-      this.setCollapsed(id, false);
-      this.createPage(index, attributes);
-      this.setState({ tree: tree });
-    };
-
-    const movedPage = (id: Trees.Id) => {
-      const tree = this.state.tree;
-      const index = tree.getIndex(id);
-      this.reorderChildren(index.parent);
-
-      const parent = tree.getIndex(index.parent);
-      const position = parent.children.indexOf(id) + 1;
-
-      this.movePage(index, parent, position);
-      this.setState({ tree: tree });
-    };
-
-    const toggleCollapsed = (id: Trees.Id) => {
-      const tree = this.state.tree;
-      const node = tree.getIndex(id).node;
-      this.setCollapsed(id, !node.collapsed);
-      this.setState({ tree: tree });
-    };
-
-    const updatePage = (id: Trees.Id, attributes: Pages.TreeItem) => {
-      const tree = this.state.tree;
-      const index = tree.getIndex(id);
-      const url = `/admin/${this.props.locale}/pages/${index.node.id}.json`;
-      this.updateNode(index, attributes);
-
-      const data: Record<string, unknown> = { ...attributes };
-      if ("blocks" in attributes && "name" in attributes.blocks) {
-        data.name = attributes.blocks.name[this.props.locale];
+      if (diffY < 0 - dragState.h * 0.5) {
+        // up
+        move(Tree.getNodeByTop(tree, node.top - 1).id, "before");
+      } else if (diffY > dragState.h * 1.5) {
+        // down
+        const below =
+          Tree.nextSibling(tree, node.id) ||
+          Tree.getNodeByTop(tree, node.id + node.height);
+
+        if (below && below.parent !== node.id) {
+          if (below.childNodes.length > 0 && !below.collapsed) {
+            move(below.id, "prepend");
+          } else {
+            move(below.id, "after");
+          }
+        }
       }
-      this.performUpdate(index, url, { page: data });
-    };
 
-    const updateTree = (tree: Tree<Pages.TreeNode>) => {
-      this.setState({ tree: tree });
-    };
+      setDragState({ ...dragState, ...pos, tree: tree });
+    },
+    [dragging, dragState]
+  );
 
-    return (
-      <Draggable
-        tree={this.state.tree}
-        addChild={addChild}
-        movedPage={movedPage}
-        toggleCollapsed={toggleCollapsed}
-        updatePage={updatePage}
-        updateTree={updateTree}
-        locale={this.props.locale}
-        dir={this.props.dir}
-      />
-    );
-  }
-
-  reorderChildren(id: Trees.Id) {
-    const tree = this.state.tree;
-    const index = this.state.tree.getIndex(id);
-    const node = index.node;
-    if (!node.news_page) {
-      return;
+  const dragEnd = useCallback(() => {
+    if (dragging) {
+      movePage(dragState.tree, dragState.id, dispatch);
+      setDragging(false);
     }
-    index.children = index.children.sort(function (a, b) {
-      const aNode = tree.getIndex(a).node;
-      const bNode = tree.getIndex(b).node;
-      if (aNode.pinned == bNode.pinned) {
-        return (
-          new Date(bNode.published_at).getTime() -
-          new Date(aNode.published_at).getTime()
-        );
-      } else {
-        return aNode.pinned ? -1 : 1;
-      }
-    });
-    tree.updateNodesPosition();
-  }
-
-  setCollapsed(id: Trees.Id, value: boolean) {
-    const node = this.state.tree.getIndex(id).node;
-    node.collapsed = value;
-    this.storeCollapsed(id, node.collapsed);
-    this.state.tree.updateNodesPosition();
-  }
-
-  storeCollapsed(id: Trees.Id, newState: boolean) {
-    const node = this.state.tree.getIndex(id).node;
-    const store = collapsedState();
-    store[node.id] = newState;
-    window.localStorage.collapsedPages = JSON.stringify(store);
-  }
-
-  updateNode(index: Trees.Index<Pages.TreeNode>, attributes: Pages.TreeItem) {
-    index.node = { ...index.node, ...attributes };
-    this.setState({ tree: this.state.tree });
-  }
+    setDragState(null);
+  }, [dragging, dragState, dispatch]);
+
+  useEffect(() => {
+    window.addEventListener("mousemove", drag);
+    window.addEventListener("mouseup", dragEnd);
+    return () => {
+      window.removeEventListener("mousemove", drag);
+      window.removeEventListener("mouseup", dragEnd);
+    };
+  }, [drag, dragEnd]);
+
+  return (
+    <PageTreeContext.Provider
+      value={{
+        state: (dragging && dragState.tree) || state,
+        dispatch: dispatch
+      }}>
+      <div className="page-tree">
+        {getDraggingDom()}
+        <Node
+          id={state.rootId}
+          onDragStart={dragStart}
+          dragging={dragging && dragState.id}
+        />
+      </div>
+    </PageTreeContext.Provider>
+  );
 }

data/app/javascript/components/{RichTextToolbarButton.tsx → RichTextArea/ToolbarButton.tsx}

@@ -1,12 +1,10 @@
-import React, { MouseEvent } from "react";
-
-interface Props {
+type Props = {
   className: string;
   name: string;
   onClick: (evt: React.MouseEvent) => void;
-}
+};
 
-export default function RichTextToolbarButton(props: Props) {
+export default function ToolbarButton(props: Props) {
   return (
     <a
       title={props.name}

data/app/javascript/components/RichTextArea/actions.ts

@@ -0,0 +1,106 @@
+type Replacement = [string, string, string];
+
+export type ActionFn = (str: string) => Replacement;
+
+type Action = {
+  name: string;
+  className: string;
+  fn: ActionFn;
+  hotkey?: string;
+};
+
+function strToList(str: string, prefix: string): string {
+  return str
+    .split("\n")
+    .map((line) => prefix + " " + line)
+    .join("\n");
+}
+
+function 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;
+}
+
+function emailLink(selection: string): Replacement {
+  const address = prompt("Enter email address", "");
+  const name = selection.length > 0 ? selection : address;
+  return ['"', name, `":mailto:${address}`];
+}
+
+function link(selection: string): Replacement {
+  const name = selection.length > 0 ? selection : "Link text";
+  const url = prompt("Enter link URL", "");
+  if (url) {
+    return ['"', name, `":${relativeUrl(url)}`];
+  } else {
+    return ["", name, ""];
+  }
+}
+
+export const simpleActions: 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>"]
+  }
+];
+
+export const advancedActions: 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) => ["", strToList(str, "*"), ""]
+  },
+  {
+    name: "Ordered list",
+    className: "list-ol",
+    fn: (str: string) => ["", strToList(str, "#"), ""]
+  },
+  { name: "Link", className: "link", fn: link },
+  { name: "Email link", className: "envelope", fn: emailLink }
+];

data/app/javascript/components/RichTextArea/useMaybeControlledValue.ts

@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export default function useMaybeControlledValue<T>(
+  initialValue: T,
+  onChange?: (nextValue: T) => void
+): [T, (nextValue: T) => void] {
+  const [value, setValue] = useState(initialValue);
+
+  if (onChange) {
+    return [initialValue, onChange];
+  } else {
+    return [value, setValue];
+  }
+}