editor: move cell properties button outside of table settings

this fixes #1410

packages/editor/src/toolbar/components/more-tools.tsx

@@ -32,9 +32,10 @@ type MoreToolsProps = ToolProps & {
   tools: ToolId[];
   autoCloseOnUnmount?: boolean;
   autoOpen?: boolean;
+  group?: string;
 };
 export function MoreTools(props: MoreToolsProps) {
-  const { popupId, editor, tools, autoCloseOnUnmount, autoOpen } = props;
+  const { popupId, editor, tools, autoCloseOnUnmount, autoOpen, group } = props;
   const toolbarLocation = useToolbarLocation();
   const isBottom = toolbarLocation === "bottom";
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -51,7 +52,7 @@ export function MoreTools(props: MoreToolsProps) {
       />
       <PopupWrapper
         isOpen={isOpen}
-        group={"toolbarGroup"}
+        group={group || "toolbarGroup"}
         id={popupId}
         onClosed={onClosed}
         position={{

packages/editor/src/toolbar/icons.ts

@@ -87,7 +87,6 @@ import {
   mdiChevronLeft,
   mdiTableCog,
   mdiTableOff,
-  mdiRectangle,
   mdiImageEditOutline,
   mdiArrowLeft,
   mdiMovieCogOutline,
@@ -113,7 +112,8 @@ import {
   mdiFullscreen,
   mdiWeb,
   mdiPageNextOutline,
-  mdiSortBoolAscendingVariant
+  mdiSortBoolAscendingVariant,
+  mdiApplicationCogOutline
 } from "@mdi/js";
 
 export const Icons = {
@@ -184,7 +184,7 @@ export const Icons = {
   moveColumnRight: mdiArrowExpandRight,
   moveColumnLeft: mdiArrowExpandLeft,
   deleteColumn: mdiTableColumnRemove,
-  cellProperties: mdiRectangle,
+  cellProperties: mdiApplicationCogOutline,
   cellBorderColor:
     "M4 24q-.825 0-1.412-.587Q2 22.825 2 22q0-.825.588-1.413Q3.175 20 4 20h16q.825 0 1.413.587Q22 21.175 22 22q0 .825-.587 1.413Q20.825 24 20 24Zm1-6q-.425 0-.713-.288Q4 17.425 4 17v-2.325q0-.2.075-.388q.075-.187.225-.337l8.75-8.75l3.75 3.75l-8.75 8.75q-.15.15-.337.225q-.188.075-.388.075Zm1-2h.9L14 8.95L13.05 8L6 15.1Zm11.925-8.15l-3.75-3.75l1.8-1.8q.275-.3.7-.288q.425.013.7.288l2.35 2.35q.275.275.275.688q0 .412-.275.712ZM6 16Z",
   backgroundColor: mdiFormatColorFill,

packages/editor/src/toolbar/tool-definitions.ts

@@ -351,6 +351,7 @@ export const STATIC_TOOLBAR_GROUPS: ToolbarDefinition = [
   [
     "insertBlock",
     "tableSettings",
+    "cellProperties",
     "imageSettings",
     "embedSettings",
     "attachmentSettings",

packages/editor/src/toolbar/tools/table.tsx

@@ -21,7 +21,6 @@ import { ToolProps } from "../types";
 import { Editor } from "../../types";
 import { ToolButton } from "../components/tool-button";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { Flex, Text } from "@theme-ui/components";
 import { ResponsivePresenter } from "../../components/responsive";
 import { MenuButton, MenuItem } from "../../components/menu/types";
 import {
@@ -38,11 +37,13 @@ import { ColorTool } from "./colors";
 import { Counter } from "../components/counter";
 import { useToolbarLocation } from "../stores/toolbar-store";
 import { showPopup } from "../../components/popup-presenter";
+import { useRefValue } from "../../hooks/use-ref-value";
 
 export function TableSettings(props: ToolProps) {
   const { editor } = props;
   const isBottom = useToolbarLocation() === "bottom";
   if (!editor.isActive("table") || !isBottom) return null;
+
   return (
     <MoreTools
       {...props}
@@ -53,7 +54,6 @@ export function TableSettings(props: ToolProps) {
         "insertColumnRight",
         "insertRowAbove",
         "insertRowBelow",
-        "cellProperties",
         "columnProperties",
         "rowProperties",
         "deleteRow",
@@ -199,6 +199,10 @@ export function TableProperties(props: ToolProps) {
 }
 
 export function CellProperties(props: ToolProps) {
+  const { editor } = props;
+  const isBottom = useToolbarLocation() === "bottom";
+  if (!editor.isActive("table") || !isBottom) return null;
+
   return (
     <>
       <MoreTools
@@ -272,41 +276,41 @@ export function CellBorderColor(props: ToolProps) {
 export function CellBorderWidth(props: ToolProps) {
   const { editor } = props;
   const { borderWidth: _borderWidth } = editor.getAttributes("tableCell");
-  const borderWidth: number = _borderWidth ? _borderWidth : 1;
+  const borderWidth: number = _borderWidth
+    ? typeof _borderWidth === "string"
+      ? parseInt(_borderWidth)
+      : _borderWidth
+    : 1;
+  const borderWidthAsNumber = useRefValue(borderWidth);
 
   const decreaseBorderWidth = useCallback(() => {
-    return Math.max(1, borderWidth - 1);
-  }, [borderWidth]);
+    return Math.max(1, borderWidthAsNumber.current - 1);
+  }, [borderWidthAsNumber]);
 
   const increaseBorderWidth = useCallback(() => {
-    return Math.min(10, borderWidth + 1);
-  }, [borderWidth]);
+    return Math.min(10, borderWidthAsNumber.current + 1);
+  }, [borderWidthAsNumber]);
 
   return (
-    <Flex sx={{ justifyContent: "center", alignItems: "center" }}>
-      <Text variant={"subBody"} sx={{ mx: 1 }}>
-        Border width:
-      </Text>
-      <Counter
-        title="cell border width"
-        onDecrease={() =>
-          editor.current?.commands.setCellAttribute(
-            "borderWidth",
-            decreaseBorderWidth()
-          )
-        }
-        onIncrease={() =>
-          editor.current?.commands.setCellAttribute(
-            "borderWidth",
-            increaseBorderWidth()
-          )
-        }
-        onReset={() =>
-          editor.current?.commands.setCellAttribute("borderWidth", 1)
-        }
-        value={borderWidth + "px"}
-      />
-    </Flex>
+    <Counter
+      title="cell border width"
+      onDecrease={() =>
+        editor.current?.commands.setCellAttribute(
+          "borderWidth",
+          decreaseBorderWidth()
+        )
+      }
+      onIncrease={() =>
+        editor.current?.commands.setCellAttribute(
+          "borderWidth",
+          increaseBorderWidth()
+        )
+      }
+      onReset={() =>
+        editor.current?.commands.setCellAttribute("borderWidth", 1)
+      }
+      value={borderWidth + "px"}
+    />
   );
 }