@ant-design/agentic-ui 2.0.0

package/dist/MarkdownEditor/editor/elements/Table/Table.js

@@ -0,0 +1,221 @@
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/MarkdownEditor/editor/elements/Table/Table.tsx
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext, useEffect, useMemo, useRef } from "react";
+import { Node } from "slate";
+import stringWidth from "string-width";
+import { useEditorStore } from "../../store";
+import { ReadonlyTableComponent } from "./ReadonlyTableComponent";
+import { TablePropsContext } from "./TableContext";
+import { TableRowIndex } from "./TableRowIndex";
+import useScrollShadow from "./useScrollShadow";
+var SlateTable = (_a) => {
+  var _b = _a, {
+    hashId,
+    children
+  } = _b, props = __objRest(_b, [
+    "hashId",
+    "children"
+  ]);
+  var _a2, _b2, _c, _d, _e, _f, _g, _h;
+  const { readonly, markdownContainerRef } = useEditorStore();
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const { tablePath } = useContext(TablePropsContext);
+  const baseCls = getPrefixCls("md-editor-content-table");
+  const tableTargetRef = useRef(null);
+  const [tableRef, scrollState] = useScrollShadow();
+  const colWidths = useMemo(() => {
+    var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    if (readonly) {
+      const otherProps = (_a3 = props.element) == null ? void 0 : _a3.otherProps;
+      if (otherProps == null ? void 0 : otherProps.colWidths) {
+        return otherProps.colWidths;
+      }
+      const columnCount2 = ((_e2 = (_d2 = (_c2 = (_b3 = props.element) == null ? void 0 : _b3.children) == null ? void 0 : _c2[0]) == null ? void 0 : _d2.children) == null ? void 0 : _e2.length) || 0;
+      if (columnCount2 === 0)
+        return [];
+      return Array(columnCount2).fill(120);
+    }
+    if ((_g2 = (_f2 = props.element) == null ? void 0 : _f2.otherProps) == null ? void 0 : _g2.colWidths) {
+      return (_i = (_h2 = props.element) == null ? void 0 : _h2.otherProps) == null ? void 0 : _i.colWidths;
+    }
+    if (typeof window === "undefined" || !((_k = (_j = props.element) == null ? void 0 : _j.children) == null ? void 0 : _k.length))
+      return [];
+    const tableRows = props.element.children;
+    if (!((_m = (_l = tableRows == null ? void 0 : tableRows[0]) == null ? void 0 : _l.children) == null ? void 0 : _m.length))
+      return [];
+    const containerWidth = (((_o = (_n = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _n.querySelector(".ant-md-editor-content")) == null ? void 0 : _o.clientWidth) || 400) - 32 - 12;
+    const maxColumnWidth = containerWidth / 4;
+    const minColumnWidth = 60;
+    const columnCount = ((_q = (_p = tableRows == null ? void 0 : tableRows[0]) == null ? void 0 : _p.children) == null ? void 0 : _q.length) || 0;
+    const rowsToSample = Math.min(5, tableRows.length);
+    const calculatedWidths = Array.from(
+      { length: columnCount },
+      (_, colIndex) => {
+        var _a4, _b4;
+        const cellWidths = [];
+        for (let rowIndex = 0; rowIndex < rowsToSample; rowIndex++) {
+          const cell = (_b4 = (_a4 = tableRows[rowIndex]) == null ? void 0 : _a4.children) == null ? void 0 : _b4[colIndex];
+          if (cell) {
+            const textWidth = stringWidth(Node.string(cell)) * 12;
+            cellWidths.push(textWidth);
+          }
+        }
+        return Math.min(
+          Math.max(minColumnWidth, ...cellWidths),
+          maxColumnWidth
+        );
+      }
+    );
+    if (tableRows.length < 5) {
+      const totalWidth = calculatedWidths.reduce(
+        (sum, width) => sum + width,
+        0
+      );
+      if (totalWidth > containerWidth) {
+        const evenWidth = Math.max(
+          minColumnWidth,
+          Math.floor(containerWidth / columnCount)
+        );
+        return Array(columnCount).fill(evenWidth);
+      }
+    }
+    return calculatedWidths;
+  }, [
+    readonly,
+    (_b2 = (_a2 = props.element) == null ? void 0 : _a2.otherProps) == null ? void 0 : _b2.colWidths,
+    (_d = (_c = props.element) == null ? void 0 : _c.children) == null ? void 0 : _d.length,
+    (_h = (_g = (_f = (_e = props.element) == null ? void 0 : _e.children) == null ? void 0 : _f[0]) == null ? void 0 : _g.children) == null ? void 0 : _h.length,
+    markdownContainerRef
+  ]);
+  useEffect(() => {
+    if (readonly || typeof window === "undefined")
+      return;
+    const resize = () => {
+      var _a3, _b3;
+      if (false)
+        return;
+      let maxWidth = colWidths ? (colWidths == null ? void 0 : colWidths.reduce((a, b) => a + b, 0)) + 8 : 0;
+      const minWidth = (_b3 = (_a3 = markdownContainerRef == null ? void 0 : markdownContainerRef.current) == null ? void 0 : _a3.querySelector(
+        ".ant-md-editor-content"
+      )) == null ? void 0 : _b3.clientWidth;
+      const dom = tableRef.current;
+      if (dom) {
+        setTimeout(() => {
+          dom.style.minWidth = `min(${((minWidth || 200) * 0.95).toFixed(0)}px,${maxWidth || minWidth || "xxx"}px,200px)`;
+        }, 200);
+      }
+    };
+    document.addEventListener("md-resize", resize);
+    window.addEventListener("resize", resize);
+    resize();
+    return () => {
+      document.removeEventListener("md-resize", resize);
+      window.removeEventListener("resize", resize);
+    };
+  }, [colWidths, readonly, markdownContainerRef, tableRef]);
+  useEffect(() => {
+    if (readonly)
+      return;
+    document.dispatchEvent(
+      new CustomEvent("md-resize", {
+        detail: {}
+      })
+    );
+  }, [readonly]);
+  const tableDom = useMemo(
+    () => /* @__PURE__ */ React.createElement(
+      "table",
+      {
+        ref: tableTargetRef,
+        className: classNames(`${baseCls}-editor-table`, hashId),
+        onDragStart: (e) => {
+          e.preventDefault();
+          return false;
+        }
+      },
+      /* @__PURE__ */ React.createElement("colgroup", null, /* @__PURE__ */ React.createElement(
+        "col",
+        {
+          style: {
+            width: 12,
+            minWidth: 12,
+            maxWidth: 12
+          }
+        }
+      ), (colWidths || []).map((colWidth, index) => {
+        return /* @__PURE__ */ React.createElement(
+          "col",
+          {
+            key: index,
+            style: {
+              width: colWidth,
+              minWidth: colWidth,
+              maxWidth: colWidth
+            }
+          }
+        );
+      }) || null),
+      /* @__PURE__ */ React.createElement("tbody", null, readonly ? null : /* @__PURE__ */ React.createElement(TableRowIndex, { colWidths, tablePath }), children)
+    ),
+    [colWidths, children, hashId, baseCls]
+  );
+  const boxShadowStyle = useMemo(
+    () => ({
+      flex: 1,
+      minWidth: 0,
+      boxShadow: readonly ? void 0 : `
+      ${scrollState.vertical.hasScroll && !scrollState.vertical.isAtStart ? "inset 0 8px 8px -8px rgba(0,0,0,0.1)" : ""}
+      ${scrollState.vertical.hasScroll && !scrollState.vertical.isAtEnd ? "inset 0 -8px 8px -8px rgba(0,0,0,0.1)" : ""}
+      ${scrollState.horizontal.hasScroll && !scrollState.horizontal.isAtStart ? "inset 8px 0 8px -8px rgba(0,0,0,0.1)" : ""}
+      ${scrollState.horizontal.hasScroll && !scrollState.horizontal.isAtEnd ? "inset -8px 0 8px -8px rgba(0,0,0,0.1)" : ""}
+    `
+    }),
+    [scrollState, readonly]
+  );
+  if (readonly) {
+    return /* @__PURE__ */ React.createElement(
+      ReadonlyTableComponent,
+      {
+        hashId,
+        element: props.element,
+        baseCls
+      },
+      children
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(baseCls, hashId),
+      ref: tableRef,
+      style: boxShadowStyle,
+      onDragStart: (e) => {
+        e.preventDefault();
+      },
+      onDoubleClick: (e) => {
+        e.preventDefault();
+      }
+    },
+    tableDom
+  );
+};
+export {
+  SlateTable
+};

package/dist/MarkdownEditor/editor/elements/Table/TableCellIndex/index.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+/**
+ * TableCellIndex 组件的属性接口
+ */
+export interface TableCellIndexProps {
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 目标行元素 */
+    targetRow: any;
+    /** 行索引，用于选中整行 */
+    rowIndex?: number;
+    /** 表格路径，用于定位表格元素 */
+    tablePath?: number[];
+}
+/**
+ * TableCellIndex 组件 - 表格行索引单元格组件
+ *
+ * 该组件用于渲染表格行的索引单元格，显示行号或索引信息。
+ * 使用 context 来生成 className，支持样式自定义。
+ *
+ * @component
+ * @description 表格行索引单元格组件，用于显示行索引
+ * @param {TableCellIndexProps} props - 组件属性
+ * @param {React.CSSProperties} [props.style] - 自定义样式
+ * @param {string} [props.className] - 自定义类名
+ * @param {any} props.targetRow - 目标行元素
+ * @param {number} [props.rowIndex] - 行索引，用于选中整行
+ * @param {number[]} [props.tablePath] - 表格路径，用于定位表格元素
+ *
+ * @example
+ * ```tsx
+ * <TableCellIndex
+ *   style={{ backgroundColor: '#f5f5f5' }}
+ *   className="custom-index-cell"
+ *   targetRow={rowElement}
+ *   rowIndex={0}
+ *   tablePath={[0]}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的表格索引单元格组件
+ *
+ * @remarks
+ * - 使用 ConfigProvider context 生成 className
+ * - 支持自定义样式覆盖
+ * - 不可编辑状态
+ * - 固定宽度和垂直对齐
+ * - 支持点击选中整行功能
+ */
+export declare const TableCellIndex: React.FC<TableCellIndexProps>;

package/dist/MarkdownEditor/editor/elements/Table/TableCellIndex/index.js

@@ -0,0 +1,300 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/MarkdownEditor/editor/elements/Table/TableCellIndex/index.tsx
+import {
+  DeleteOutlined,
+  InsertRowAboveOutlined,
+  InsertRowBelowOutlined
+} from "@ant-design/icons";
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext, useRef } from "react";
+import { Editor, Transforms } from "slate";
+import { ReactEditor, useSlate } from "slate-react";
+import { useClickAway } from "../../../../../hooks/useClickAway";
+import { useRefFunction } from "../../../../../hooks/useRefFunction";
+import { NativeTableEditor } from "../../../../utils/native-table";
+import { TablePropsContext } from "../TableContext";
+import { useStyle } from "./style";
+var TableCellIndex = ({
+  style,
+  className,
+  rowIndex,
+  tablePath
+}) => {
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context == null ? void 0 : context.getPrefixCls("md-editor-table-cell-index");
+  const { wrapSSR, hashId } = useStyle(baseClassName);
+  const editor = useSlate();
+  const tableContext = useContext(TablePropsContext);
+  const { deleteIconPosition, setDeleteIconPosition } = tableContext;
+  const clearSelect = useRefFunction((clearIcon = true) => {
+    var _a;
+    if (clearIcon) {
+      setDeleteIconPosition == null ? void 0 : setDeleteIconPosition(null);
+    }
+    if (!tablePath) {
+      return;
+    }
+    try {
+      const tableElement = Editor.node(editor, tablePath)[0];
+      if (!tableElement || tableElement.type !== "table") {
+        return;
+      }
+      const rowCount = ((_a = tableElement.children) == null ? void 0 : _a.length) || 0;
+      if (rowCount === 0) {
+        return;
+      }
+      for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
+        const rowElement = tableElement.children[rowIdx];
+        if (rowElement && rowElement.children) {
+          for (let colIdx = 0; colIdx < rowElement.children.length; colIdx++) {
+            const cellPath = [...tablePath, rowIdx, colIdx];
+            if (Editor.hasPath(editor, cellPath)) {
+              const [cellNode] = Editor.node(editor, cellPath);
+              if (cellNode && cellNode.type === "table-cell") {
+                const domNode = ReactEditor.toDOMNode(editor, cellNode);
+                if (domNode) {
+                  domNode.removeAttribute("data-select");
+                }
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.warn("Failed to clear table selection:", error);
+    }
+  });
+  const handleClick = useRefFunction((e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    if (rowIndex !== void 0) {
+      setDeleteIconPosition == null ? void 0 : setDeleteIconPosition({
+        rowIndex,
+        columnIndex: void 0
+      });
+    }
+    if (rowIndex === void 0 || !tablePath) {
+      return;
+    }
+    try {
+      const tableElement = Editor.node(editor, tablePath)[0];
+      if (!tableElement || tableElement.type !== "table") {
+        return;
+      }
+      const rowCount = ((_a = tableElement.children) == null ? void 0 : _a.length) || 0;
+      if (rowCount === 0) {
+        return;
+      }
+      clearSelect(false);
+      const rowElement = tableElement.children[rowIndex];
+      if (rowElement && rowElement.children) {
+        for (let colIdx = 0; colIdx < rowElement.children.length; colIdx++) {
+          const cellPath = [...tablePath, rowIndex, colIdx];
+          if (Editor.hasPath(editor, cellPath)) {
+            const [cellNode] = Editor.node(editor, cellPath);
+            if (cellNode && cellNode.type === "table-cell") {
+              const domNode = ReactEditor.toDOMNode(editor, cellNode);
+              if (domNode) {
+                domNode.setAttribute("data-select", "true");
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.warn("Failed to select table row:", error);
+    }
+  });
+  const handleDeleteClick = useRefFunction((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      if (!tablePath || rowIndex === void 0) {
+        return;
+      }
+      const tableElement = Editor.node(editor, tablePath)[0];
+      if (!tableElement || tableElement.type !== "table") {
+        return;
+      }
+      const rowCount = tableElement.children.length;
+      const firstRow = tableElement.children[0];
+      const colCount = firstRow.children.length;
+      if (rowCount <= 1 && colCount <= 1) {
+        NativeTableEditor.removeTable(editor, tablePath);
+        return;
+      }
+      if (rowCount <= 1) {
+        NativeTableEditor.removeTable(editor, tablePath);
+        return;
+      }
+      const rowPath = [...tablePath, rowIndex];
+      if (Editor.hasPath(editor, rowPath)) {
+        Transforms.removeNodes(editor, { at: rowPath });
+      }
+      clearSelect();
+    } catch (error) {
+      console.warn("Failed to delete table row:", error);
+    }
+  });
+  const handleInsertRowBefore = useRefFunction((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      if (!tablePath || rowIndex === void 0) {
+        return;
+      }
+      const tableElement = Editor.node(editor, tablePath)[0];
+      if (!tableElement || tableElement.type !== "table") {
+        return;
+      }
+      const firstRow = tableElement.children[0];
+      const colCount = firstRow.children.length;
+      const newRow = {
+        type: "table-row",
+        children: Array.from({ length: colCount }).map(() => ({
+          type: "table-cell",
+          children: [
+            {
+              type: "paragraph",
+              children: [{ text: "" }]
+            }
+          ]
+        }))
+      };
+      const rowPath = [...tablePath, rowIndex];
+      Transforms.insertNodes(editor, newRow, { at: rowPath });
+      clearSelect();
+    } catch (error) {
+      console.warn("Failed to insert row before:", error);
+    }
+  });
+  const handleInsertRowAfter = useRefFunction((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      if (!tablePath || rowIndex === void 0) {
+        return;
+      }
+      const tableElement = Editor.node(editor, tablePath)[0];
+      if (!tableElement || tableElement.type !== "table") {
+        return;
+      }
+      const firstRow = tableElement.children[0];
+      const colCount = firstRow.children.length;
+      const newRow = {
+        type: "table-row",
+        children: Array.from({ length: colCount }).map(() => ({
+          type: "table-cell",
+          children: [
+            {
+              type: "paragraph",
+              children: [{ text: "" }]
+            }
+          ]
+        }))
+      };
+      const rowCount = tableElement.children.length;
+      const insertRowIndex = Math.min(rowIndex + 1, rowCount);
+      const rowPath = [...tablePath, insertRowIndex];
+      Transforms.insertNodes(editor, newRow, { at: rowPath });
+      clearSelect();
+    } catch (error) {
+      console.warn("Failed to insert row after:", error);
+    }
+  });
+  const ref = useRef(null);
+  const shouldShowDeleteIcon = deleteIconPosition && deleteIconPosition.rowIndex === rowIndex && deleteIconPosition.columnIndex === void 0;
+  useClickAway(() => {
+    if (shouldShowDeleteIcon && deleteIconPosition && deleteIconPosition.rowIndex === rowIndex) {
+      clearSelect();
+    }
+  }, ref);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "td",
+      {
+        ref,
+        className: classNames(baseClassName, hashId, className, "config-td"),
+        contentEditable: false,
+        style: __spreadValues({
+          padding: 0,
+          cursor: rowIndex !== void 0 ? "pointer" : "default",
+          position: "relative",
+          backgroundColor: shouldShowDeleteIcon ? "var(--color-primary-control-fill-primary-active)" : void 0
+        }, style),
+        onClick: handleClick,
+        title: rowIndex !== void 0 ? "点击显示操作按钮" : void 0
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            `${baseClassName}-action-buttons`,
+            shouldShowDeleteIcon && `${baseClassName}-action-buttons-visible`,
+            hashId
+          )
+        },
+        shouldShowDeleteIcon && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(
+              `${baseClassName}-action-button`,
+              `${baseClassName}-insert-row-before`,
+              hashId
+            ),
+            onClick: handleInsertRowBefore,
+            title: "在上面增加一行"
+          },
+          /* @__PURE__ */ React.createElement(InsertRowAboveOutlined, null)
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(
+              `${baseClassName}-action-button`,
+              `${baseClassName}-delete-icon`,
+              hashId
+            ),
+            onClick: handleDeleteClick,
+            title: "删除整行"
+          },
+          /* @__PURE__ */ React.createElement(DeleteOutlined, null)
+        ),
+        shouldShowDeleteIcon && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(
+              `${baseClassName}-action-button`,
+              `${baseClassName}-insert-row-after`,
+              hashId
+            ),
+            onClick: handleInsertRowAfter,
+            title: "在下面增加一行"
+          },
+          /* @__PURE__ */ React.createElement(InsertRowBelowOutlined, null)
+        )
+      )
+    )
+  );
+};
+export {
+  TableCellIndex
+};

package/dist/MarkdownEditor/editor/elements/Table/TableCellIndex/style.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * TableCellIndex 样式 hook
+ * @param prefixCls 组件前缀类名
+ * @returns 样式相关的对象
+ */
+export declare function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/dist/MarkdownEditor/editor/elements/Table/TableCellIndex/style.js

@@ -0,0 +1,106 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/MarkdownEditor/editor/elements/Table/TableCellIndex/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../../../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      width: "12px",
+      maxWidth: 12,
+      padding: 0,
+      position: "relative",
+      verticalAlign: "middle",
+      contentEditable: false,
+      backgroundColor: "var(--color-gray-control-fill-secondary)",
+      "&:hover": {
+        backgroundColor: "var(--color-gray-control-fill-secondary-hover)"
+      }
+    },
+    [`${token.componentCls}-action-buttons`]: {
+      position: "absolute",
+      top: "4px",
+      left: "-24px",
+      zIndex: 1e3,
+      alignItems: "center",
+      flexDirection: "column",
+      gap: "2px",
+      opacity: 0,
+      display: "none",
+      transition: "opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)"
+    },
+    [`${token.componentCls}-action-buttons-visible`]: {
+      opacity: 1,
+      display: "flex"
+    },
+    [`${token.componentCls}-action-button`]: {
+      padding: "2px",
+      display: "flex",
+      alignItems: "center",
+      zIndex: 1e3,
+      justifyContent: "center",
+      fontSize: 12,
+      border: "1px solid var(--table-border-color)",
+      width: "20px",
+      height: "20px",
+      cursor: "pointer",
+      backgroundPosition: "50%",
+      backgroundRepeat: "no-repeat",
+      transition: "color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
+      borderRadius: "4px",
+      background: "var(--color-gray-bg-card-white)",
+      boxShadow: "var(--shadow-border-base)",
+      color: "var(--color-gray-text-secondary)",
+      "&:hover": {
+        backgroundColor: "#FFF",
+        boxShadow: "var(--shadow-control-lg)"
+      }
+    },
+    [`${token.componentCls}-delete-icon`]: {
+      "&:hover": {
+        color: "#ff4d4f"
+      }
+    },
+    [`${token.componentCls}-insert-row-before`]: {
+      "&:hover": {
+        color: "#52c41a"
+      }
+    },
+    [`${token.componentCls}-insert-row-after`]: {
+      "&:hover": {
+        color: "#52c41a"
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("md-editor-table-cell-index", (token) => {
+    const editorToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(editorToken), genStyle(editorToken)];
+  });
+}
+export {
+  useStyle
+};