@kopexa/extension-controlref 1.0.0 → 13.0.0

package/dist/chunk-GYDJVHHG.mjs

@@ -0,0 +1,250 @@
+"use client";
+import {
+  ControlPicker
+} from "./chunk-A7FWOQDN.mjs";
+import {
+  useControl
+} from "./chunk-4C72VBLP.mjs";
+import {
+  messages
+} from "./chunk-D53W4HWR.mjs";
+
+// src/components/control-block-view.tsx
+import { useSafeIntl } from "@kopexa/i18n";
+import { SettingsIcon } from "@kopexa/icons";
+import {
+  Button,
+  Callout,
+  Card,
+  Chip,
+  Dialog,
+  Heading,
+  IconButton,
+  Label,
+  Select,
+  Switch
+} from "@kopexa/sight";
+import {
+  NodeViewContent,
+  NodeViewWrapper
+} from "@tiptap/react";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ControlBlockView = (props) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { node, editor, updateAttributes, getPos } = props;
+  const attrs = node.attrs;
+  const { showStatus, variant } = attrs.options || {};
+  const resolver = props.extension.options.resolver;
+  const intl = useSafeIntl();
+  const { interactive, ind, mapped, isMissing, isOutdated } = useControl({
+    attrs,
+    resolver,
+    editor
+  });
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { "data-id": (_a = attrs.id) != null ? _a : "", children: /* @__PURE__ */ jsxs(Card.Root, { variant, children: [
+    /* @__PURE__ */ jsxs(Card.Header, { children: [
+      /* @__PURE__ */ jsx(Card.Heading, { children: /* @__PURE__ */ jsx(Heading, { level: "h3", contentEditable: false, children: (_b = attrs.title) != null ? _b : "Unmapped Control" }) }),
+      /* @__PURE__ */ jsxs(Card.Toolbar, { children: [
+        showStatus && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            size: "sm",
+            "data-active": open,
+            contentEditable: false,
+            indicator: ind.indicator,
+            indicatorColor: ind.indicatorColor,
+            indicatorVariant: ind.indicatorVariant,
+            ...((_c = attrs.options) == null ? void 0 : _c.showStatus) && (attrs == null ? void 0 : attrs.status) && { status: attrs.status },
+            variant: "bordered",
+            children: (_d = attrs.title) != null ? _d : "Unmapped Control"
+          }
+        ),
+        interactive && /* @__PURE__ */ jsx(
+          SettingsDialog,
+          {
+            resolver,
+            initialSelection: attrs.id ? {
+              id: attrs.id,
+              title: (_e = attrs.title) != null ? _e : "",
+              status: (_f = attrs.status) != null ? _f : null
+            } : null,
+            initialOptions: attrs.options,
+            onSave: async ({ control, options }) => {
+              var _a2, _b2, _c2, _d2;
+              updateAttributes({
+                id: (_a2 = control == null ? void 0 : control.id) != null ? _a2 : null,
+                title: (_b2 = control == null ? void 0 : control.title) != null ? _b2 : null,
+                status: (_c2 = control == null ? void 0 : control.status) != null ? _c2 : null,
+                updatedAt: control == null ? void 0 : control.updatedAt,
+                options
+              });
+              const pos = typeof getPos === "function" ? getPos() : null;
+              if (pos == null) return;
+              const rows = (_d2 = control == null ? void 0 : control.implementations) != null ? _d2 : [];
+              try {
+                editor.commands.setControlImplementationsAt(pos, rows);
+              } catch {
+                editor.commands.setControlImplementationsAt(pos, []);
+              }
+            },
+            onUnlink: () => {
+              updateAttributes({ id: null, title: null, status: null });
+              const pos = typeof getPos === "function" ? getPos() : null;
+              if (pos != null)
+                editor.commands.setControlImplementationsAt(pos, []);
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card.Body, { children: [
+      interactive && /* @__PURE__ */ jsxs(Fragment, { children: [
+        mapped && isMissing && /* @__PURE__ */ jsx(
+          Callout,
+          {
+            print: false,
+            variant: "destructive",
+            contentEditable: false,
+            className: "mb-4",
+            children: intl.formatMessage(messages.missing_callout)
+          }
+        ),
+        !isMissing && isOutdated && /* @__PURE__ */ jsx(
+          Callout,
+          {
+            print: false,
+            variant: "warning",
+            contentEditable: false,
+            className: "mb-4",
+            children: intl.formatMessage(messages.outdated_callout)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx(NodeViewContent, { className: "content is-editable", as: "div" }) })
+    ] })
+  ] }) });
+};
+var SettingsDialog = ({
+  initialSelection,
+  initialOptions,
+  resolver,
+  onSave
+}) => {
+  const intl = useSafeIntl();
+  const [isOpen, onOpenChange] = useState(false);
+  const [selection, setSelection] = useState(
+    initialSelection
+  );
+  const [options, setOptions] = useState({
+    showStatus: false,
+    ...initialOptions
+  });
+  return /* @__PURE__ */ jsxs(Dialog, { size: "2xl", open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      Dialog.Trigger,
+      {
+        render: /* @__PURE__ */ jsx(IconButton, { variant: "outline", color: "default", "aria-label": "Settings", children: /* @__PURE__ */ jsx(SettingsIcon, {}) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+      /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { children: (selection == null ? void 0 : selection.title) ? intl.formatMessage(messages.control_with_title, {
+          title: selection.title
+        }) : intl.formatMessage(messages.map_control) }),
+        /* @__PURE__ */ jsx(Dialog.Description, { children: intl.formatMessage(messages.settings_dialog_description) })
+      ] }),
+      /* @__PURE__ */ jsxs(Dialog.Body, { children: [
+        /* @__PURE__ */ jsx(
+          ControlPicker,
+          {
+            resolver,
+            value: selection,
+            onChange: (next) => {
+              setSelection(next);
+            },
+            debounceMs: 300,
+            timeoutMs: 5e3
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx(Label, { children: intl.formatMessage(messages.display_options) }),
+          /* @__PURE__ */ jsxs(
+            Label,
+            {
+              variant: "secondary",
+              className: "flex items-center justify-between gap-3",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: intl.formatMessage(messages.header_status) }),
+                /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    "aria-label": intl.formatMessage(messages.header_status_aria),
+                    checked: !!options.showStatus,
+                    onCheckedChange: (checked) => setOptions((o) => ({ ...o, showStatus: checked }))
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Callout, { variant: "info", children: intl.formatMessage(messages.header_status_avv_tip) }),
+          /* @__PURE__ */ jsxs(
+            Label,
+            {
+              variant: "secondary",
+              className: "flex items-center justify-between gap-3",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("span", { children: intl.formatMessage(messages.variant) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: intl.formatMessage(messages.variant_hint) })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    value: options.variant || "default",
+                    onValueChange: (value) => setOptions((o) => ({
+                      ...o,
+                      variant: value
+                    })),
+                    children: [
+                      /* @__PURE__ */ jsx(Select.Trigger, { className: "w-[180px]", children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select a variant" }) }),
+                      /* @__PURE__ */ jsxs(Select.Content, { children: [
+                        /* @__PURE__ */ jsx(Select.Item, { value: "default", children: "Default" }),
+                        /* @__PURE__ */ jsx(Select.Item, { value: "muted", children: "Muted" }),
+                        /* @__PURE__ */ jsx(Select.Item, { value: "accent", children: "Accent" })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { className: "sticky bottom-0 bg-background", children: [
+        /* @__PURE__ */ jsx(
+          Dialog.CloseTrigger,
+          {
+            render: /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "default", children: intl.formatMessage(messages.cancel) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            color: "primary",
+            onClick: () => {
+              onSave({ control: selection, options });
+              onOpenChange(false);
+            },
+            disabled: JSON.stringify(selection) === JSON.stringify(initialSelection) && JSON.stringify(options) === JSON.stringify(initialOptions),
+            children: intl.formatMessage(messages.save_settings)
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+export {
+  ControlBlockView
+};

package/dist/chunk-IMHLTRZJ.mjs

@@ -0,0 +1,29 @@
+"use client";
+
+// src/components/control-implementation-view.tsx
+import { NodeViewWrapper } from "@tiptap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ControlImplementationView = (props) => {
+  var _a;
+  const { node } = props;
+  const a = node.attrs;
+  return /* @__PURE__ */ jsx(
+    NodeViewWrapper,
+    {
+      as: "div",
+      role: "listitem",
+      "data-type": "control-implementation",
+      "data-id": a.id,
+      className: "flex items-start justify-between gap-3 py-3",
+      contentEditable: false,
+      children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground truncate", children: (_a = a.title) != null ? _a : a.id }),
+        a.description ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-0.5", children: a.description }) : null
+      ] })
+    }
+  );
+};
+
+export {
+  ControlImplementationView
+};

package/dist/chunk-JM66CQVD.mjs

@@ -0,0 +1,10 @@
+"use client";
+
+// src/defaults.ts
+var DEFAULT_CONTROL_REF_OPTIONS = {
+  showStatus: true
+};
+
+export {
+  DEFAULT_CONTROL_REF_OPTIONS
+};

package/dist/chunk-LMKP3DDN.mjs

@@ -0,0 +1,189 @@
+"use client";
+import {
+  ControlPicker
+} from "./chunk-A7FWOQDN.mjs";
+import {
+  useControl
+} from "./chunk-4C72VBLP.mjs";
+import {
+  messages
+} from "./chunk-D53W4HWR.mjs";
+
+// src/components/control-view.tsx
+import { useSafeIntl } from "@kopexa/i18n";
+import {
+  Button,
+  Callout,
+  Chip,
+  Dialog,
+  Label,
+  Switch,
+  Tooltip
+} from "@kopexa/sight";
+import { NodeViewWrapper } from "@tiptap/react";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ControlView = (props) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { node, editor } = props;
+  const intl = useIntl();
+  const attrs = node.attrs;
+  const resolver = props.extension.options.resolver;
+  const { isEdit, interactive, ind, mapped, isMissing, isOutdated } = useControl({
+    attrs,
+    resolver,
+    editor
+  });
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { as: "span", "data-kpx-control": true, "data-id": (_a = attrs.id) != null ? _a : "", children: [
+    /* @__PURE__ */ jsxs(
+      Chip,
+      {
+        size: "sm",
+        "data-active": open,
+        contentEditable: false,
+        indicator: ind.indicator,
+        indicatorColor: ind.indicatorColor,
+        indicatorVariant: ind.indicatorVariant,
+        ...((_b = attrs.options) == null ? void 0 : _b.showStatus) && (attrs == null ? void 0 : attrs.status) && { status: attrs.status },
+        variant: "bordered",
+        color: !attrs.id ? "warning" : isEdit && (isOutdated || isMissing) ? "destructive" : "default",
+        onClick: () => {
+          setOpen((o) => !o);
+        },
+        "aria-label": interactive ? "Map control" : "Control",
+        tabIndex: interactive ? 0 : -1,
+        onKeyDown: (e) => {
+          if (!interactive) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen((o) => !o);
+          }
+        },
+        children: [
+          (_c = attrs.title) != null ? _c : "Unmapped Control",
+          isEdit && mapped && isOutdated && !isMissing && /* @__PURE__ */ jsx(Tooltip, { content: intl.formatMessage(messages.outdated_badge), children: /* @__PURE__ */ jsx("span", { className: "ml-1 inline-block h-2 w-2 rounded-full bg-warning" }) }),
+          mapped && isMissing && /* @__PURE__ */ jsx(Tooltip, { content: intl.formatMessage(messages.missing_badge), children: /* @__PURE__ */ jsx("span", { className: "ml-1 inline-block h-2 w-2 rounded-full bg-destructive" }) })
+        ]
+      }
+    ),
+    interactive && /* @__PURE__ */ jsx(
+      EditControlDialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        resolver,
+        isMissing,
+        isOutdated,
+        initialSelection: attrs.id ? {
+          id: attrs.id,
+          title: (_d = attrs.title) != null ? _d : "",
+          status: (_e = attrs.status) != null ? _e : null
+        } : null,
+        initialOptions: (_f = attrs.options) != null ? _f : { showStatus: true },
+        onSave: (selection, options) => {
+          var _a2, _b2, _c2;
+          props.editor.commands.updateControl({
+            id: (_a2 = selection == null ? void 0 : selection.id) != null ? _a2 : null,
+            title: (_b2 = selection == null ? void 0 : selection.title) != null ? _b2 : null,
+            status: (_c2 = selection == null ? void 0 : selection.status) != null ? _c2 : null,
+            options: options != null ? options : null,
+            updatedAt: selection == null ? void 0 : selection.updatedAt
+          });
+        }
+      }
+    )
+  ] });
+};
+var EditControlDialog = ({
+  open,
+  onOpenChange,
+  resolver,
+  initialSelection,
+  initialOptions,
+  onSave,
+  isMissing,
+  isOutdated
+}) => {
+  const intl = useSafeIntl();
+  const [selection, setSelection] = useState(
+    initialSelection
+  );
+  const [options, setOptions] = useState(initialOptions);
+  const isDirty = JSON.stringify(selection) !== JSON.stringify(initialSelection) || JSON.stringify(options) !== JSON.stringify(initialOptions);
+  if (!resolver) return null;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, size: "2xl", children: /* @__PURE__ */ jsxs(Dialog.Content, { "aria-label": "Map Control", children: [
+    /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: (selection == null ? void 0 : selection.title) ? intl.formatMessage(messages.control_with_title, {
+        title: selection.title
+      }) : intl.formatMessage(messages.map_control) }),
+      /* @__PURE__ */ jsx(Dialog.Description, { children: intl.formatMessage(messages.settings_dialog_description) })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 pt-2", children: [
+      (selection == null ? void 0 : selection.id) && isMissing && /* @__PURE__ */ jsx(Callout, { variant: "destructive", children: intl.formatMessage(messages.missing_callout) }),
+      !isMissing && isOutdated && /* @__PURE__ */ jsx(Callout, { variant: "warning", children: intl.formatMessage(messages.outdated_callout) }),
+      /* @__PURE__ */ jsx(
+        ControlPicker,
+        {
+          resolver,
+          value: selection,
+          onChange: (next) => setSelection(next),
+          debounceMs: 300,
+          timeoutMs: 5e3
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx(Label, { children: intl.formatMessage(messages.display_options) }),
+        /* @__PURE__ */ jsxs(
+          Label,
+          {
+            variant: "secondary",
+            className: "flex items-center justify-between gap-3",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: intl.formatMessage(messages.show_status_indicator) }),
+              /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  "aria-label": "Show status indicator",
+                  checked: !!options.showStatus,
+                  onCheckedChange: (checked) => setOptions((o) => ({
+                    ...o,
+                    showStatus: checked
+                  }))
+                }
+              )
+            ]
+          }
+        )
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Dialog.Footer, { className: "sticky bottom-0 bg-background", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          color: "default",
+          onClick: () => onOpenChange(false),
+          children: intl.formatMessage(messages.cancel)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "primary",
+          onClick: () => {
+            onSave(selection, options);
+            onOpenChange(false);
+          },
+          disabled: !isDirty,
+          children: intl.formatMessage(messages.save_settings)
+        }
+      )
+    ] })
+  ] }) });
+};
+
+export {
+  ControlView
+};

package/dist/chunk-RTBFRPB3.mjs

@@ -0,0 +1,186 @@
+"use client";
+import {
+  createControlBlock
+} from "./chunk-FTEE5U3H.mjs";
+import {
+  createControlImplementation
+} from "./chunk-XHD2KFKQ.mjs";
+import {
+  getControlNodeTypes
+} from "./chunk-ZUR6XKMG.mjs";
+import {
+  DEFAULT_CONTROL_REF_OPTIONS
+} from "./chunk-JM66CQVD.mjs";
+import {
+  ControlBlockView
+} from "./chunk-GYDJVHHG.mjs";
+
+// src/control-block.ts
+import { mergeAttributes, Node } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+var ControlBlock = Node.create({
+  name: "controlBlock",
+  controlRole: "controlBlock",
+  group: "block",
+  isolating: true,
+  content: "block+ controlImplementation*",
+  addOptions() {
+    return {
+      resolver: void 0
+    };
+  },
+  addAttributes() {
+    return {
+      id: { default: null },
+      title: { default: null },
+      updatedAt: { default: null },
+      status: { default: null },
+      options: { default: DEFAULT_CONTROL_REF_OPTIONS }
+      // JSON Object <- all UI config lives here
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-kpx-control-ref]" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    var _a;
+    return [
+      "span",
+      mergeAttributes(HTMLAttributes, {
+        "data-kpx-control-ref": "",
+        "data-id": node.attrs.id,
+        "data-title": node.attrs.title
+      }),
+      (_a = HTMLAttributes.title) != null ? _a : "Control"
+    ];
+  },
+  addCommands() {
+    return {
+      insertControlBlock: () => ({ editor, tr, dispatch }) => {
+        const node = createControlBlock(editor.schema);
+        if (dispatch) {
+          const offset = tr.selection.from + 1;
+          tr.replaceSelectionWith(node).scrollIntoView().setSelection(TextSelection.near(tr.doc.resolve(offset)));
+        }
+        return true;
+      },
+      updateControlBlock: (payload) => ({ tr, state, dispatch }) => {
+        var _a, _b, _c, _d, _e;
+        const { selection } = state;
+        const pos = selection.from;
+        const node = tr.doc.nodeAt(pos);
+        if (!node || node.type.name !== "controlBlock") return false;
+        const next = {
+          id: (_a = payload.id) != null ? _a : null,
+          title: (_b = payload.title) != null ? _b : null,
+          status: (_c = payload.status) != null ? _c : null,
+          updatedAt: (_d = payload.updatedAt) != null ? _d : null,
+          options: (_e = payload.options) != null ? _e : node.attrs.options
+        };
+        if (dispatch) {
+          tr.setNodeMarkup(pos, void 0, next).scrollIntoView();
+        }
+        return true;
+      },
+      setControlImplementationsAt: (blockPos, rows) => ({ state, tr, dispatch }) => {
+        const implType = state.schema.nodes.controlImplementation;
+        if (!implType) return false;
+        const blockNode = state.doc.nodeAt(blockPos);
+        if (!blockNode || blockNode.type.name !== this.name) return false;
+        const contentStart = blockPos + 1;
+        const contentEnd = blockPos + blockNode.nodeSize - 1;
+        let firstImplOffset = null;
+        let running = 0;
+        blockNode.forEach((child) => {
+          if (firstImplOffset === null && child.type === implType) {
+            firstImplOffset = running;
+          }
+          running += child.nodeSize;
+        });
+        const insertPos = firstImplOffset !== null ? contentStart + firstImplOffset : contentEnd;
+        if (firstImplOffset !== null) {
+          tr.delete(insertPos, contentEnd);
+        }
+        const types = getControlNodeTypes(state.schema);
+        const newNodes = (rows != null ? rows : []).map(
+          (r) => createControlImplementation(types.controlImplementation, r)
+        ).filter(Boolean);
+        if (newNodes.length) {
+          tr.insert(insertPos, newNodes);
+        }
+        if (dispatch) dispatch(tr.scrollIntoView());
+        return true;
+      },
+      setControlImplementations: (rows) => ({ state, tr, dispatch }) => {
+        const { $from } = state.selection;
+        let blockPos = -1, blockNode = null, depthHit = -1;
+        for (let d = $from.depth; d >= 0; d--) {
+          const n = $from.node(d);
+          if (n.type.name === this.name) {
+            blockNode = n;
+            depthHit = d;
+            blockPos = $from.start(d);
+            break;
+          }
+        }
+        if (!blockNode || blockPos < 0) return false;
+        const implType = state.schema.nodes.controlImplementation;
+        if (!implType) return false;
+        let offset = 0;
+        let firstImplOffset = null;
+        for (let i = 0; i < blockNode.childCount; i++) {
+          const child = blockNode.child(i);
+          if (child.type === implType && firstImplOffset === null) {
+            firstImplOffset = offset;
+          }
+          offset += child.nodeSize;
+        }
+        const blockContentStart = blockPos + 1;
+        const blockContentEnd = blockPos + blockNode.nodeSize - 1;
+        const insertPos = firstImplOffset !== null ? blockContentStart + firstImplOffset : blockContentEnd;
+        if (firstImplOffset !== null) {
+          tr.delete(blockContentStart + firstImplOffset, blockContentEnd);
+        }
+        const types = getControlNodeTypes(state.schema);
+        const newNodes = rows.map(
+          (r) => createControlImplementation(types.controlImplementation, r)
+        ).filter(Boolean);
+        if (newNodes.length) {
+          tr.insert(insertPos, newNodes);
+        }
+        if (dispatch) dispatch(tr.scrollIntoView());
+        return true;
+      },
+      appendControlImplementations: (rows) => ({ state, tr, dispatch }) => {
+        const { $from } = state.selection;
+        let blockPos = -1, blockNode = null;
+        for (let d = $from.depth; d >= 0; d--) {
+          const n = $from.node(d);
+          if (n.type.name === this.name) {
+            blockNode = n;
+            blockPos = $from.start(d);
+            break;
+          }
+        }
+        if (!blockNode || blockPos < 0) return false;
+        const blockContentEnd = blockPos + blockNode.nodeSize - 1;
+        const types = getControlNodeTypes(state.schema);
+        const newNodes = rows.map(
+          (r) => createControlImplementation(types.controlImplementation, r)
+        ).filter(Boolean);
+        if (!newNodes.length) return true;
+        tr.insert(blockContentEnd, newNodes);
+        if (dispatch) dispatch(tr.scrollIntoView());
+        return true;
+      }
+    };
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(ControlBlockView, { as: "div" });
+  }
+});
+
+export {
+  ControlBlock
+};