refactor(core): implement built-in toggles with renderFrame

packages/core/src/api/blockManipulation/commands/materializeChildren/materializeChildren.ts

@@ -0,0 +1,59 @@
+import { Fragment, type Node } from "prosemirror-model";
+import { TextSelection, type Transaction } from "prosemirror-state";
+import {
+  getBlockInfoAt,
+  getInsertionPos,
+} from "../../../getBlockInfoFromPos.js";
+import { getPmSchema } from "../../../pmUtil.js";
+
+/** Prepends children, creating their group together with its first child.
+ * Returns undefined without changing the transaction if the content cannot fit. */
+export function materializeChildren(
+  tr: Transaction,
+  blockPos: number,
+  nodes: readonly Node[],
+): number | undefined {
+  if (!nodes.length) {
+    return undefined;
+  }
+  const target = getInsertionPos(
+    tr.doc,
+    getBlockInfoAt(tr.doc, blockPos),
+    "first-child",
+    nodes[0].type,
+  );
+  if (!target) {
+    return undefined;
+  }
+  const content = Fragment.from(nodes);
+  if (target.wrapIn && !target.wrapIn.validContent(content)) {
+    return undefined;
+  }
+  const fragment = target.wrapIn
+    ? Fragment.from(target.wrapIn.create(null, content))
+    : content;
+  const $pos = tr.doc.resolve(target.pos);
+  if (!$pos.parent.canReplace($pos.index(), $pos.index(), fragment)) {
+    return undefined;
+  }
+  tr.insert(target.pos, fragment);
+  return target.pos + (target.wrapIn ? 1 : 0);
+}
+
+/** Shared by Enter and the empty-toggle button. */
+export function insertEmptyFirstChild(
+  tr: Transaction,
+  blockPos: number,
+): boolean {
+  const schema = getPmSchema(tr);
+  const child = schema.nodes.blockContainer.create(
+    null,
+    schema.nodes.paragraph.create(),
+  );
+  const pos = materializeChildren(tr, blockPos, [child]);
+  if (pos === undefined) {
+    return false;
+  }
+  tr.setSelection(TextSelection.near(tr.doc.resolve(pos), 1)).scrollIntoView();
+  return true;
+}

packages/core/src/blocks/Heading/block.ts

@@ -7,7 +7,7 @@ import {
   parseDefaultProps,
 } from "../defaultProps.js";
 import { getDetailsContent } from "../getDetailsContent.js";
-import { createToggleWrapper } from "../ToggleWrapper/createToggleWrapper.js";
+import { createToggleFrame } from "../ToggleFrame/createToggleFrame.js";
 
 const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
 
@@ -126,18 +126,15 @@ export const createHeadingBlockSpec = createBlockSpec(
         }
       : {}),
     runsBefore: ["toggleListItem"],
-    render(block, editor) {
+    render(block) {
       const dom = document.createElement(`h${block.props.level}`);
-
-      if (allowToggleHeadings) {
-        const toggleWrapper = createToggleWrapper(block, editor, dom);
-        return { ...toggleWrapper, contentDOM: dom };
+      return { dom, contentDOM: dom };
+    },
+    renderFrame(block, editor) {
+      if (!allowToggleHeadings || !block.props.isToggleable) {
+        return undefined;
       }
-
-      return {
-        dom,
-        contentDOM: dom,
-      };
+      return createToggleFrame(block, editor, this.renderType);
     },
     toExternalHTML(block) {
       const dom = document.createElement(`h${block.props.level}`);

packages/core/src/blocks/ListItem/ToggleListItem/block.ts

@@ -6,7 +6,7 @@ import {
   parseDefaultProps,
 } from "../../defaultProps.js";
 import { getDetailsContent } from "../../getDetailsContent.js";
-import { createToggleWrapper } from "../../ToggleWrapper/createToggleWrapper.js";
+import { createToggleFrame } from "../../ToggleFrame/createToggleFrame.js";
 import { handleEnter } from "../../utils/listItemEnterHandler.js";
 
 export type ToggleListItemBlockConfig = ReturnType<
@@ -71,14 +71,12 @@ export const createToggleListItemBlockSpec = createBlockSpec(
       );
     },
     runsBefore: ["bulletListItem"],
-    render(block, editor) {
-      const paragraphEl = document.createElement("p");
-      const toggleWrapper = createToggleWrapper(
-        block as any,
-        editor,
-        paragraphEl,
-      );
-      return { ...toggleWrapper, contentDOM: paragraphEl };
+    render() {
+      const dom = document.createElement("p");
+      return { dom, contentDOM: dom };
+    },
+    renderFrame(block, editor) {
+      return createToggleFrame(block, editor, this.renderType);
     },
     toExternalHTML(block) {
       const li = document.createElement("li");