playbook_ui 18.1.0.pre.rc.4 → 18.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 81d76f51de9e88ac32f50756b803e8a063264b582bc8e9797ef49e2dfba04867
-  data.tar.gz: 5a214970102ba6d3a2abe9a4e2342aaf4e79b2e1e55b8ad6acdd597580e678ce
+  metadata.gz: 4989243cbc32bb750918ef297467d634a7db628b51bbf211895e293f3d14feeb
+  data.tar.gz: ee6a1cad85e386cd21a8d584c8715b97070f7a69b9ccb5cdb388f031cc1b7e81
 SHA512:
-  metadata.gz: 7ca0873a34437139622dca8b4848cde6f266bfb059caa97af140a2226e327772bea439c0b90140e9dba01f32082ee6cf8ea066ad1c626a77ea5de7e9efcf88a5
-  data.tar.gz: af0f9628b3defe688b29dacf8beffb13e37235c30e92e1eb6b6cf4af96708ed1c4d0a072704ecb990ae74bd8759b0cbb1dae5a81d2ddea2322cad39a90ebfca3
+  metadata.gz: 9823736cae61fe883d0210734d6c12163fae9a4d5e5b1f17ed8da990b5dbad5e816fc49374b672fe04bb3f1e6fc9b7c5704faf39f7119c170cad30954a6393f3
+  data.tar.gz: c72caccadf7ab6a8f10fd9ee1197b06c1fba46a684f893b4f5d16525b91e6a69358aa51e1301fd7b9465127b34ac00c678263ed20258b2f90cc603443ea41243

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx

@@ -41,8 +41,9 @@ const EditorButton = ({
             className="toolbar_button_icon"
             justify="center"
         >
-          <Icon icon={icon}
-              size="lg"
+          <Icon
+              icon={icon}
+              size="1x"
           />
         </Flex>
       </button>
@@ -50,4 +51,4 @@ const EditorButton = ({
   );
 };
 
-export default EditorButton
+export default EditorButton

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx

@@ -30,8 +30,9 @@ const popoverReference = (
         className="toolbar_button_icon"
         justify="center"
     >
-      <Icon icon="ellipsis"
-          size="lg"
+      <Icon
+          icon="ellipsis"
+          size="1x"
       />
     </Flex>
   </button>
@@ -40,6 +41,7 @@ const popoverReference = (
 
   return (
       <PbReactPopover
+          className='pb_tiptap_toolbar_dropdown_popover'
           closeOnClick='outside'
           padding='none'
           placement="bottom"

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -1,37 +1,112 @@
-import React from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import Background from "../../pb_background/_background";
 import Flex from "../../pb_flex/_flex";
-import FlexItem from "../../pb_flex/_flex_item";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
 
 import EditorButton  from "./EditorButton";
 import ToolbarDropdown from "./ToolbarDropdown";
+import ToolbarFormatItems from "./ToolbarFormatItems";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
+const STACK_HYSTERESIS_PX = 32;
+const STACK_FIT_BUFFER_PX = 8;
+
+const ToolbarSeparator = (): React.ReactElement => (
+  <div className="toolbar_separator">
+    <SectionSeparator orientation="vertical" />
+  </div>
+);
+
+const childrenWidth = (element: HTMLElement): number =>
+  Array.from(element.children).reduce(
+    (sum, child) => sum + (child as HTMLElement).offsetWidth,
+    0
+  );
+
+// Stack when format + tools (+ more) no longer fit beside undo/redo.
+const toolsNeedStack = (root: HTMLElement | null): boolean => {
+  if (!root) return false;
+
+  const format = root.querySelector<HTMLElement>(".toolbar_group_format");
+  const tools = root.querySelector<HTMLElement>(".toolbar_group_tools");
+  if (!format || !tools) return false;
+
+  const more = root.querySelector<HTMLElement>(".toolbar_group_more");
+  const history = root.querySelector<HTMLElement>(".toolbar_history");
+  const { paddingLeft, paddingRight } = window.getComputedStyle(root);
+  const rightReserve = Math.max(history?.offsetWidth ?? 0, parseFloat(paddingRight) || 0);
+  const available = root.clientWidth - (parseFloat(paddingLeft) || 0) - rightReserve;
+  const needed =
+    childrenWidth(format) +
+    childrenWidth(tools) +
+    (more ? childrenWidth(more) : 0) +
+    STACK_FIT_BUFFER_PX;
+
+  return needed > available;
+};
+
+const nextStacked = (
+  stacked: boolean,
+  stackedAtWidth: number,
+  needsStack: boolean,
+  width: number
+): { stacked: boolean, stackedAtWidth: number } => {
+  if (needsStack) {
+    return {
+      stacked: true,
+      stackedAtWidth: stacked ? Math.min(stackedAtWidth, width) : width,
+    };
+  }
+
+  if (stacked && width > stackedAtWidth + STACK_HYSTERESIS_PX) {
+    return { stacked: false, stackedAtWidth };
+  }
+
+  return { stacked, stackedAtWidth };
+};
+
 const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.ReactElement => {
-  const toolbaritems = [
-    {
-        icon: "bold",
-        text: "Bold",
-        classname:`toolbar_button ${editor.isActive('bold') ? 'is-active' : ''}`,
-        onclick:()=>editor.chain().focus().toggleBold().run(),
-    },
-    {
-        icon: "italic",
-        text: "Italic",
-        classname:`toolbar_button ${editor.isActive('italic') ? 'is-active' : ''}`,
-        onclick:() => editor.chain().focus().toggleItalic().run(),
-    },
-    {
-        icon: "strikethrough",
-        text: "Strikethrough",
-        classname:`toolbar_button ${editor.isActive('strike') ? 'is-active' : ''}`,
-        onclick:() => editor.chain().focus().toggleStrike().run(),
-    },
-  ]
+  const toolbarInnerRef = useRef<HTMLDivElement>(null);
+  const stackedAtWidthRef = useRef(0);
+  const [toolsStacked, setToolsStacked] = useState(false);
+
+  useLayoutEffect(() => {
+    if (simple) return;
+
+    const root = toolbarInnerRef.current;
+    if (!root) return;
+
+    const toolbar = root.closest(".toolbar");
+
+    const sync = () => {
+      const width = toolbar?.clientWidth ?? root.clientWidth;
+      const needsStack = toolsNeedStack(root);
+
+      setToolsStacked((stacked) => {
+        const next = nextStacked(stacked, stackedAtWidthRef.current, needsStack, width);
+        stackedAtWidthRef.current = next.stackedAtWidth;
+        return next.stacked;
+      });
+    };
+
+    sync();
+    const rafId = requestAnimationFrame(sync);
+
+    if (typeof ResizeObserver === "undefined") {
+      return () => cancelAnimationFrame(rafId);
+    }
+
+    const observer = new ResizeObserver(sync);
+    observer.observe(toolbar || root);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
+  }, [extensions, simple]);
 
   const simpleToolbaritems = [
     {
@@ -48,69 +123,77 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
     },
   ]
 
+  const toolbarClassName = [
+    "toolbar",
+    toolsStacked && "toolbar_tools_stacked",
+    sticky && "pb_rich_text_editor_tiptap_toolbar_sticky",
+  ].filter(Boolean).join(" ");
+
   return (
-    <Background backgroundColor="white"
-        className={`toolbar ${sticky ? 'pb_rich_text_editor_tiptap_toolbar_sticky' : ''}`}
-        
+    <Background
+        backgroundColor="white"
+        className={toolbarClassName}
     >
-      <Flex flex="0"
-          justify="between"
-          paddingX="sm"
-          paddingY="xxs"
-      >
-        {
-          simple ? (
-            <>
-              <Flex className="toolbar_block">
-                {simpleToolbaritems && simpleToolbaritems.map(
-                  ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
-                    <EditorButton
-                        classname={classname}
-                        icon={icon}
-                        key={index}
-                        onclick={onclick}
-                        text={text}
-                    />
-                  )
-                )}
-              </Flex>
-            </>
-          ) : (
-            <>
-        <FlexItem className="toolbar_block"
-            displayFlex
-        >
-          <ToolbarDropdown editor={editor}/>
-          <SectionSeparator orientation="vertical" />
-            {toolbaritems && toolbaritems.map(
-              ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
-                <EditorButton
-                    classname={classname}
-                    icon={icon}
-                    key={index}
-                    onclick={onclick}
-                    text={text}
-                />
-              )
-            )}
-            <SectionSeparator orientation="vertical" />
-            <ToolbarNodes editor={editor} />
-            {
-              extensions && (
-                <>
-                  <MoreExtensionsDropdown extensions={extensions}/>
-                </>
-              )
-            }
-        </FlexItem>
-        <ToolbarHistoryItems editor={editor} />
-        </>
-          )
-        }
-       
-      </Flex>
+      {
+        simple ? (
+          <div className="toolbar_inner">
+            <Flex
+                align="center"
+                className="toolbar_controls"
+                wrap
+            >
+              {simpleToolbaritems && simpleToolbaritems.map(
+                ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
+                  <EditorButton
+                      classname={classname}
+                      icon={icon}
+                      key={index}
+                      onclick={onclick}
+                      text={text}
+                  />
+                )
+              )}
+            </Flex>
+            <div className="toolbar_history">
+              <ToolbarHistoryItems editor={editor} />
+            </div>
+          </div>
+        ) : (
+          <div
+              className="toolbar_inner"
+              ref={toolbarInnerRef}
+          >
+            <Flex
+                align="center"
+                className="toolbar_controls"
+                wrap
+            >
+              <div className="toolbar_group toolbar_group_format">
+                <ToolbarDropdown editor={editor}/>
+              </div>
+              <div className="toolbar_group toolbar_group_tools">
+                <ToolbarSeparator />
+                <ToolbarFormatItems editor={editor} />
+                <ToolbarSeparator />
+                <ToolbarNodes editor={editor} />
+              </div>
+              {
+                extensions && (
+                  <div className="toolbar_group toolbar_group_more">
+                    <ToolbarSeparator />
+                    <MoreExtensionsDropdown extensions={extensions}/>
+                  </div>
+                )
+              }
+            </Flex>
+            <div className="toolbar_history">
+              <ToolbarHistoryItems editor={editor} />
+            </div>
+          </div>
+        )
+      }
     </Background>
   );
 };
 
-export default EditorToolbar
+export default EditorToolbar

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -60,8 +60,7 @@ const toolbarDropdownItems = [
         onclick: () => {
           normalizeListSelection(editor)
           editor.chain().focus().toggleOrderedList().run()
-        }
-        ,
+        },
     },
     {
         node: "blockquote",
@@ -70,6 +69,13 @@ const toolbarDropdownItems = [
         text: "Block Quote",
         onclick: () => editor.chain().focus().toggleBlockquote().run(),
     },
+    {
+        node: "codeBlock",
+        icon: "code",
+        isActive: editor.isActive("codeBlock"),
+        text: "Code Block",
+        onclick: () => editor.chain().focus().toggleCodeBlock().run(),
+    },
 ]
 
   const handleTogglePopover = () => {
@@ -81,61 +87,36 @@ const toolbarDropdownItems = [
   }
 
 let activeCount = 0;
-const activeItems = [];
+const activeLabels = [];
 
-for (const { text, isActive, icon } of toolbarDropdownItems) {
+for (const { text, isActive } of toolbarDropdownItems) {
   if (isActive) {
-    activeCount ++
-    activeItems.push(
-      <Flex align="center"
-          gap="xs"
-          key={icon}
-      >
-        <Icon icon={icon}
-            size="lg"
-        />
-        <div>{text}</div>
-        <Icon
-            fixedWidth
-            flip={showPopover ? "vertical" : "none"}
-            icon="angle-down"
-            margin-left="xs"
-        />
-      </Flex>
-    );
+    activeCount++
+    activeLabels.push(text);
   }
 }
 
+const triggerLabel =
+  activeCount === 2 ? activeLabels[1] :
+  activeCount === 1 ? activeLabels[0] :
+  "Paragraph";
+
 const popoverReference = (
   <Button className="editor-dropdown-button"
       onClick={handleTogglePopover}
       variant="secondary"
   >
-    {
-       activeCount === 2 ? (
-        activeItems[1]
-       ) : (
-        activeCount === 1 ? (
-        activeItems[0] || null
-        ) : (
-          <Flex align="center"
-              gap="xs"
-              key="paragraph"
-          >
-            <Icon icon="paragraph"
-                size="lg"
-            />
-            <div>Paragraph</div>
-            <Icon
-                fixedWidth
-                flip={showPopover ? "vertical" : "none"}
-                icon="angle-down"
-                margin-left="xs"
-            />
-          </Flex>
-        )
-       )
-    }
+    <Flex
+        align="center"
+        gap="xs"
+    >
+      <div>{triggerLabel}</div>
+      <Icon
+          fixedWidth
+          flip={showPopover ? "vertical" : "none"}
+          icon="angle-down"
+      />
+    </Flex>
   </Button>
 );
 
@@ -154,11 +135,10 @@ const popoverReference = (
             paddingTop="xs" 
             variant="subtle"
         >
-          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}: ToolbarTypes, index: number) => (
+          {toolbarDropdownItems.map(({ text, onclick, isActive}: ToolbarTypes, index: number) => (
             <NavItem
                 className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
                 cursor="pointer"
-                iconLeft={icon}
                 key={`${text}_${index}`}
                 margin='none'
                 onClick={()=> {onclick(); setShowPopover(false)}}

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarFormatItems.tsx

@@ -0,0 +1,68 @@
+import React, {useCallback} from "react";
+import EditorButton from "./EditorButton";
+import { ToolbarTypes } from "./EditorTypes";
+
+const ToolbarFormatItems = ({editor}: any): React.ReactElement => {
+  const setLink = useCallback(() => {
+    const previousUrl = editor.getAttributes("link").href;
+    const url = window.prompt("URL", previousUrl);
+
+    // cancelled
+    if (url === null) {
+      return;
+    }
+
+    // empty
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+
+      return;
+    }
+
+    // update link
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  }, [editor]);
+
+  const toolbarFormatItems = [
+    {
+      icon: "bold",
+      text: "Bold",
+      classname: `toolbar_button ${editor.isActive("bold") ? "is-active" : ""}`,
+      onclick: () => editor.chain().focus().toggleBold().run(),
+    },
+    {
+      icon: "italic",
+      text: "Italic",
+      classname: `toolbar_button ${editor.isActive("italic") ? "is-active" : ""}`,
+      onclick: () => editor.chain().focus().toggleItalic().run(),
+    },
+    {
+      icon: "strikethrough",
+      text: "Strikethrough",
+      classname: `toolbar_button ${editor.isActive("strike") ? "is-active" : ""}`,
+      onclick: () => editor.chain().focus().toggleStrike().run(),
+    },
+    {
+      icon: "link",
+      text: "Link",
+      classname: `toolbar_button ${editor.isActive("link") ? "is-active" : ""}`,
+      onclick: setLink,
+    },
+  ];
+
+  return (
+    <>
+      {toolbarFormatItems.map(({ icon, text, classname, onclick }: ToolbarTypes, index: number) => (
+        <EditorButton
+            classname={classname}
+            icon={icon}
+            key={index}
+            onclick={onclick}
+            text={text}
+        />
+      ))}
+    </>
+  );
+};
+
+export default ToolbarFormatItems;

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import FlexItem from "../../pb_flex/_flex_item";
 import EditorButton from "./EditorButton";
 import { ToolbarTypes } from "./EditorTypes";
 
@@ -24,7 +23,6 @@ const toolbarHistoryItems = [
 
     return (
     <>
-    <FlexItem displayFlex>
           {toolbarHistoryItems.map(
             ({ onclick, classname, disable, icon, text }: ToolbarTypes, index: number) => (
               <EditorButton
@@ -37,9 +35,8 @@ const toolbarHistoryItems = [
               />
             )
           )}
-        </FlexItem>
     </>
     )
 }
 
-export default ToolbarHistoryItems
+export default ToolbarHistoryItems

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx

@@ -1,50 +1,49 @@
-import React, {useCallback} from "react";
+import React from "react";
 import EditorButton from "./EditorButton";
-import { ToolbarTypes } from "./EditorTypes";
+import { normalizeListSelection } from "./listSelection";
 
 const ToolbarNodes = ({editor}: any): React.ReactElement => {
-
-// eslint-disable-next-line react-hooks/rules-of-hooks
-const setLink = useCallback(() => {
-  const previousUrl = editor.getAttributes("link").href;
-  const url = window.prompt("URL", previousUrl);
-
-  // cancelled
-  if (url === null) {
-    return;
-  }
-
-  // empty
-  if (url === "") {
-    editor.chain().focus().extendMarkRange("link").unsetLink().run();
-
-    return;
-  }
-
-  // update link
-  editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-}, [editor]);
-
-const toolbarNodesItems = [
+  const toolbarNodesItems = [
+        {
+          onclick: () => {
+            normalizeListSelection(editor)
+            editor.chain().focus().toggleOrderedList().run()
+          },
+          icon: "list-ol",
+          isActive: editor.isActive("orderedList"),
+          text: "Ordered List",
+        },
+        {
+          onclick: () => {
+            normalizeListSelection(editor)
+            editor.chain().focus().toggleBulletList().run()
+          },
+          icon: "list",
+          isActive: editor.isActive("bulletList"),
+          text: "Bullet List",
+        },
         {
-          onclick: () => editor.chain().focus().toggleCodeBlock().run(),
-          icon: "code",
-          isActive: editor.isActive("codeBlock"),
-          text: "Codeblock",
+          onclick: () => editor.chain().focus().liftListItem("listItem").run(),
+          icon: "dedent",
+          isActive: false,
+          text: "Dedent",
+          disable: !editor.can().chain().focus().liftListItem("listItem").run(),
         },
         {
-          onclick: setLink,
-          icon: "link",
-          isActive: editor.isActive("link"),
-          text: "Link",
+          onclick: () => editor.chain().focus().sinkListItem("listItem").run(),
+          icon: "indent",
+          isActive: false,
+          text: "Indent",
+          disable: !editor.can().chain().focus().sinkListItem("listItem").run(),
         },
       ];
 
 return (
     <>
-        {toolbarNodesItems.map(({ onclick, icon, text, isActive }: ToolbarTypes, index: number) => (
+        {toolbarNodesItems.map(({ onclick, icon, text, isActive, disable }, index) => (
             <EditorButton
                 classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
+                disable={disable}
                 icon={icon}
                 key={index}
                 onclick={onclick}
@@ -56,4 +55,4 @@ return (
 }
 
 
-export default ToolbarNodes
+export default ToolbarNodes