wip: toggle / folding heading

src/components/icons.tsx

@@ -181,6 +181,7 @@ export const Icons = {
   borderTop,
   bug: Bug,
   check: Check,
+  chevronDown: ChevronDown,
   chevronRight: ChevronRight,
   chevronsUpDown: ChevronsUpDown,
   clear: X,

src/views/edit/editor/elements/ToggleElement.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { withRef } from "@udecode/cn";
+import { PlateElement, useElement } from "@udecode/plate-common";
+import { useToggleButton, useToggleButtonState } from "@udecode/plate-toggle";
+
+import { Icons } from "../../../../components/icons";
+
+export const ToggleElement = withRef<typeof PlateElement>(
+  ({ children, ...props }, ref) => {
+    const element = useElement();
+    const state = useToggleButtonState(element.id as string);
+    const { buttonProps, open } = useToggleButton(state);
+
+    return (
+      <PlateElement asChild ref={ref} {...props}>
+        <div className="relative pl-6">
+          <span
+            className="absolute -left-0.5 -top-0.5 flex cursor-pointer select-none items-center justify-center rounded-sm p-px transition-colors hover:bg-slate-200"
+            contentEditable={false}
+            {...buttonProps}
+          >
+            {open ? <Icons.chevronDown /> : <Icons.chevronRight />}
+          </span>
+          {children}
+        </div>
+      </PlateElement>
+    );
+  },
+);

src/views/edit/editor/index.tsx

@@ -52,6 +52,10 @@ import {
   MARK_SUPERSCRIPT,
   MARK_UNDERLINE,
 
+  // Toggles
+  createTogglePlugin,
+  ELEMENT_TOGGLE,
+
   // images
   // https://platejs.org/docs/media
   createSelectOnBackspacePlugin,
@@ -151,6 +155,8 @@ export default observer(
           },
         }),
 
+        createTogglePlugin(),
+
         // Plate's media handler turns youtube links, twitter links, etc, into embeds.
         // I'm unsure how to trigger the logic, probably via toolbar or shortcut.
         // createMediaEmbedPlugin(),
@@ -267,11 +273,13 @@ export default observer(
                 ELEMENT_H6,
                 ELEMENT_BLOCKQUOTE,
                 ELEMENT_CODE_BLOCK,
+                ELEMENT_TOGGLE,
               ],
             },
           },
         }),
 
+        // todo: I think I need to configure validTypes, similar to createIndentPlugin
         createIndentListPlugin(),
         createTrailingBlockPlugin({ type: ELEMENT_PARAGRAPH }),
       ],
@@ -317,6 +325,8 @@ export default observer(
           [MARK_SUPERSCRIPT]: withProps(PlateLeaf, { as: "sup" }),
           [MARK_UNDERLINE]: withProps(PlateLeaf, { as: "u" }),
           // [MARK_COMMENT]: CommentLeaf,
+
+          [ELEMENT_TOGGLE]: withProps(PlateElement, { as: "details" }),
         },
       },
     );

src/views/edit/editor/toolbar/EditorToolbar.tsx

@@ -21,6 +21,7 @@ import InsertBlockDropdown from "./components/InsertBlockDropdown";
 import ChangeBlockDropdown from "./components/ChangeBlockDropdown";
 import DebugDropdown from "./components/DebugDropdown";
 import { EditorMode } from "../../EditorMode";
+import { ToggleToolbarButton } from "./components/ToggleToolbarButton";
 
 interface Props {
   selectedEditorMode: EditorMode;
@@ -85,6 +86,7 @@ export function EditorToolbar({
                   <MarkToolbarButton tooltip="Code (⌘+E)" nodeType={MARK_CODE}>
                     <Icons.code />
                   </MarkToolbarButton>
+                  <ToggleToolbarButton />
                 </>
 
                 {/* NOTE: id prop was removed, probably was for Playground to support multiple editors */}

src/views/edit/editor/toolbar/components/ToggleToolbarButton.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { withRef } from "@udecode/cn";
+import {
+  useToggleToolbarButton,
+  useToggleToolbarButtonState,
+} from "@udecode/plate-toggle";
+
+import { Icons } from "../../../../../../src/components/icons";
+import { ToolbarButton } from "../../components/Toolbar";
+
+export const ToggleToolbarButton = withRef<typeof ToolbarButton>(
+  (rest, ref) => {
+    const state = useToggleToolbarButtonState();
+    const { props } = useToggleToolbarButton(state);
+
+    return (
+      <ToolbarButton ref={ref} tooltip="Toggle" {...props} {...rest}>
+        <Icons.chevronsUpDown />
+      </ToolbarButton>
+    );
+  },
+);