@quadrats/react 1.1.8 → 1.1.9

package/src/core/createRenderElements.ts

@@ -1,6 +0,0 @@
-import { createRenderElementsBase } from '@quadrats/react/_internal';
-import { CreateRenderElementOptions, RenderElementProps } from './typings/renderer';
-
-export function createRenderElements<P extends RenderElementProps>(options: CreateRenderElementOptions<P>[]) {
-  return createRenderElementsBase<P, RenderElementProps>(options);
-}

package/src/core/createRenderMark.ts

@@ -1,6 +0,0 @@
-import { createRenderMarkBase } from '@quadrats/react/_internal';
-import { CreateRenderMarkOptions } from './typings/renderer';
-
-export function createRenderMark<M>(options: CreateRenderMarkOptions<M>) {
-  return createRenderMarkBase(options);
-}

package/src/core/index.ts

@@ -1,53 +0,0 @@
-import { QuadratsEditor, QuadratsElement, QuadratsText } from '@quadrats/core';
-import { ReactEditor } from 'slate-react';
-import { PLACEHOLDER_KEY } from './constants';
-
-export {
-  useSlateStatic,
-  useFocused,
-  useReadOnly,
-  useSelected,
-  useSlate as useQuadrats,
-  ReactEditor,
-} from 'slate-react';
-
-export * from './typings/handler';
-export * from './typings/renderer';
-export * from './typings/with';
-export * from './typings/descendant';
-
-export { Editor } from '@quadrats/core';
-export { default as Editable, EditableProps } from './components/Editable';
-export { default as DefaultElement } from './components/DefaultElement';
-export { default as DefaultLeaf } from './components/DefaultLeaf';
-export { default as Quadrats, QuadratsProps } from './components/Quadrats';
-
-export * from './contexts/modal/modal';
-export * from './contexts/modal/ModalProvider';
-
-export * from './contexts/message/message';
-export * from './contexts/message/MessageProvider';
-
-export * from './contexts/composition/composition';
-export * from './contexts/composition/CompositionProvider';
-
-export { composeHandlers } from './composeHandlers';
-export { composeRenderElements } from './composeRenderElements';
-export { composeRenderLeafs } from './composeRenderLeafs';
-export { createReactEditor } from './createReactEditor';
-export { createRenderElement } from './createRenderElement';
-export { createRenderElements } from './createRenderElements';
-export { createRenderMark } from './createRenderMark';
-export { PLACEHOLDER_KEY };
-
-export type QuadratsReactEditor = QuadratsEditor & ReactEditor;
-
-declare module '@quadrats/core' {
-  interface CustomTypes {
-    Editor: QuadratsReactEditor;
-    Element: QuadratsElement;
-    Text: QuadratsText & {
-      [PLACEHOLDER_KEY]?: boolean;
-    };
-  }
-}

package/src/core/typings/descendant.ts

@@ -1,3 +0,0 @@
-import { QuadratsElement, QuadratsText } from '@quadrats/core';
-
-export type Descendant = QuadratsElement | QuadratsText;

package/src/core/typings/handler.ts

@@ -1,32 +0,0 @@
-import { Editor } from 'slate';
-import { DOMAttributes, EventHandler } from 'react';
-
-export type EventHandlerName = {
-  [K in keyof Required<DOMAttributes<HTMLElement>>]: NonNullable<DOMAttributes<HTMLElement>[K]> extends EventHandler<
-  any
-  >
-    ? K
-    : never;
-}[keyof DOMAttributes<HTMLElement>];
-
-export type EventHandlers = Pick<DOMAttributes<HTMLElement>, EventHandlerName>;
-
-export type GetEventHandlerByName<H extends EventHandlerName> = NonNullable<EventHandlers[H]>;
-
-export type GetEventByName<H extends EventHandlerName> = GetEventHandlerByName<H> extends (event: infer E) => void
-  ? E
-  : never;
-
-export type Handler<H extends EventHandlerName> = (
-  event: GetEventByName<H>,
-  editor: Editor,
-  next: VoidFunction
-) => void;
-
-export type Handlers = {
-  [H in EventHandlerName]?: Handler<H>;
-};
-
-export interface WithCreateHandlers<P extends any[] = []> {
-  createHandlers: (...params: P) => Handlers;
-}

package/src/core/typings/renderer.ts

@@ -1,33 +0,0 @@
-import { JSX } from 'react';
-import {
-  RenderElementProps as SlateReactRenderElementProps,
-  RenderLeafProps as SlateRenderLeafProps,
-} from 'slate-react';
-import { QuadratsElement } from '@quadrats/core';
-import {
-  CreateRenderElementOptionsBase,
-  CreateRenderMarkOptionsBase,
-  RenderElementPropsBase,
-  RenderLeafPropsBase,
-  RenderMarkPropsBase,
-} from '@quadrats/react/_internal';
-
-export type RenderLeafProps = RenderLeafPropsBase & Pick<SlateRenderLeafProps, 'attributes'>;
-
-export type RenderMarkProps<M> = RenderMarkPropsBase<M>;
-
-export type RenderElementProps<E extends QuadratsElement = QuadratsElement> = RenderElementPropsBase<E> &
-Pick<SlateReactRenderElementProps, 'attributes'>;
-
-export type CreateRenderMarkOptions<M> = CreateRenderMarkOptionsBase<M, RenderMarkProps<M>>;
-
-export type CreateRenderElementOptions<P extends RenderElementProps<QuadratsElement>>
-  = CreateRenderElementOptionsBase<P>;
-
-export interface WithCreateRenderLeaf<P extends any[] = []> {
-  createRenderLeaf: (...params: P) => (props: RenderLeafProps) => JSX.Element;
-}
-
-export interface WithCreateRenderElement<P extends any[] = []> {
-  createRenderElement: (...params: P) => (props: RenderElementProps) => JSX.Element | null | undefined;
-}

package/src/core/typings/with.ts

@@ -1,5 +0,0 @@
-import { Editor } from 'slate';
-
-export interface ReactWithable<R = undefined> {
-  with: <T extends Editor>(editor: T) => R extends undefined ? T : T & R;
-}

package/strikethrough/jsx-serializer/src/createJsxSerializeStrikethrough.ts

@@ -1,8 +0,0 @@
-import { STRIKETHROUGH_TYPE } from '@quadrats/common/strikethrough';
-import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
-import { defaultRenderStrikethrough } from './defaultRenderStrikethrough';
-
-export const createJsxSerializeStrikethrough = createJsxSerializeToggleMarkCreator({
-  type: STRIKETHROUGH_TYPE,
-  render: defaultRenderStrikethrough,
-});

package/strikethrough/jsx-serializer/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../../../tsconfig.base.json",
-  "exclude": ["**/*.spec.*"],
-  "include": ["./src"]
-}

package/strikethrough/src/constants.ts

@@ -1,6 +0,0 @@
-/**
- * Default hotkey for toggling strikethrough.
- *
- * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
- */
-export const STRIKETHROUGH_HOTKEY = 'mod+opt+s';

package/strikethrough/src/createReactStrikethrough.ts

@@ -1,11 +0,0 @@
-import { createStrikethrough } from '@quadrats/common/strikethrough';
-import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
-import { defaultRenderStrikethrough } from './defaultRenderStrikethrough';
-import { STRIKETHROUGH_HOTKEY } from './constants';
-
-export const createReactStrikethrough = (variant?: string) => createReactToggleMarkCreator(
-  createStrikethrough(variant), {
-    hotkey: STRIKETHROUGH_HOTKEY,
-    render: defaultRenderStrikethrough,
-  },
-)();

package/strikethrough/src/defaultRenderStrikethrough.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { STRIKETHROUGH_TYPE } from '@quadrats/common/strikethrough';
-import { RenderMarkPropsBase } from '@quadrats/react/_internal';
-import { StrikethroughLeaf } from './typings';
-
-export const defaultRenderStrikethrough = ({ children, leaf }: RenderMarkPropsBase<boolean>) => (
-  <del className={(leaf as StrikethroughLeaf).strikethroughVariant
-    ? `${STRIKETHROUGH_TYPE}.${(leaf as StrikethroughLeaf).strikethroughVariant}` : `${STRIKETHROUGH_TYPE}`}
-  >
-    {children}
-  </del>
-);

package/strikethrough/src/typings.ts

@@ -1,6 +0,0 @@
-import { Text } from 'slate';
-
-export interface StrikethroughLeaf extends Text {
-  strikethrough: boolean;
-  strikethroughVariant?: string;
-}

package/strikethrough/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "exclude": ["**/*.spec.*"],
-  "include": ["./src"]
-}

package/table/jsx-serializer/src/components/Table.tsx

@@ -1,6 +0,0 @@
-import React from 'react';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export const TableJsxSerializeElement = ({ children }: JsxSerializeElementProps) => {
-  return <div className="qdr-table">{children}</div>;
-};

package/table/jsx-serializer/src/components/TableBody.tsx

@@ -1,6 +0,0 @@
-import React from 'react';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export const TableBodyJsxSerializeElement = ({ children }: JsxSerializeElementProps) => {
-  return <tbody className="qdr-table__body">{children}</tbody>;
-};

package/table/jsx-serializer/src/components/TableCell.tsx

@@ -1,51 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { TableHeaderContext } from '../contexts/TableHeaderContext';
-import { JsxSerializeTableElementProps } from '../typings';
-import { TableScrollContext } from '../contexts/TableScrollContext';
-
-export const TableCellJsxSerializeElement = ({
-  children,
-  element,
-  isColumnPinned,
-}: JsxSerializeTableElementProps & { isColumnPinned?: boolean }) => {
-  const isHeader = useContext(TableHeaderContext);
-  // calculate the left position of the cell when it is stuck
-  const cellRef = useRef<HTMLTableCellElement>(null);
-  const { scrollRef } = useContext(TableScrollContext);
-  const [cellStuckAtLeft, setCellStuckAtLeft] = useState<number>(0);
-
-  useEffect(() => {
-    const { current: cell } = cellRef;
-    const { current: scrollContainer } = scrollRef;
-
-    if (scrollContainer && cell) {
-      const cellRect = cell.getBoundingClientRect();
-      const containerRect = scrollContainer.getBoundingClientRect();
-
-      setCellStuckAtLeft(Math.max(Math.round(cellRect.left - containerRect.left), 0));
-    }
-  }, [scrollRef]);
-
-  const CellTag = isHeader ? 'th' : 'td';
-  const shouldPinned = element.pinned && isColumnPinned && element.treatAsTitle;
-
-  return (
-    <CellTag
-      ref={cellRef}
-      className={clsx('qdr-table__cell', {
-        'qdr-table__cell--header': isHeader || element.treatAsTitle,
-        'qdr-table__cell--pinned': shouldPinned,
-      })}
-      style={
-        shouldPinned
-          ? {
-              left: cellStuckAtLeft,
-            }
-          : undefined
-      }
-    >
-      {children}
-    </CellTag>
-  );
-};

package/table/jsx-serializer/src/components/TableHeader.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-import { TableHeaderContext } from '../contexts/TableHeaderContext';
-import { QuadratsElement } from '@quadrats/core';
-
-export const TableHeaderJsxSerializeElement = ({ children, element }: JsxSerializeElementProps) => {
-  const hasAnyRowPinned = element.children.some((child) =>
-    (child as QuadratsElement).children.every((cell) => (cell as QuadratsElement & { pinned: boolean }).pinned),
-  );
-
-  return (
-    <TableHeaderContext.Provider value={true}>
-      <thead className={`qdr-table__header ${hasAnyRowPinned ? 'qdr-table__header--pinned' : ''}`}>{children}</thead>
-    </TableHeaderContext.Provider>
-  );
-};

package/table/jsx-serializer/src/components/TableMain.tsx

@@ -1,36 +0,0 @@
-import React, { useMemo, useRef } from 'react';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-import { TableScrollContext } from '../contexts/TableScrollContext';
-import { calculateTableMinWidth, ColumnWidth, columnWidthToCSS } from '@quadrats/common/table';
-
-export const TableMainJsxSerializeElement = ({
-  children,
-  columnWidths,
-}: JsxSerializeElementProps & { columnWidths?: ColumnWidth[] }) => {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollContextValue = useMemo(() => ({ scrollRef }), [scrollRef]);
-
-  const tableMinWidth = useMemo(() => (columnWidths ? calculateTableMinWidth(columnWidths) : '100%'), [columnWidths]);
-
-  return (
-    <div ref={scrollRef} className="qdr-table__scrollContainer">
-      <TableScrollContext.Provider value={scrollContextValue}>
-        <table
-          className="qdr-table__main"
-          style={{
-            minWidth: tableMinWidth,
-          }}
-        >
-          {columnWidths?.length ? (
-            <colgroup>
-              {columnWidths.map((width, index) => (
-                <col key={index} style={{ width: columnWidthToCSS(width), minWidth: columnWidthToCSS(width) }} />
-              ))}
-            </colgroup>
-          ) : null}
-          {children}
-        </table>
-      </TableScrollContext.Provider>
-    </div>
-  );
-};

package/table/jsx-serializer/src/components/TableRow.tsx

@@ -1,6 +0,0 @@
-import React from 'react';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export const TableRowJsxSerializeElement = ({ children }: JsxSerializeElementProps) => {
-  return <tr className="qdr-table__row">{children}</tr>;
-};

package/table/jsx-serializer/src/components/TableTitle.tsx

@@ -1,6 +0,0 @@
-import React from 'react';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export const TableTitleJsxSerializeElement = ({ children }: JsxSerializeElementProps) => {
-  return <span className="qdr-table__title">{children}</span>;
-};

package/table/jsx-serializer/src/contexts/TableHeaderContext.ts

@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const TableHeaderContext = createContext<boolean>(false);

package/table/jsx-serializer/src/contexts/TableScrollContext.ts

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-import { TableScrollContextType } from '../typings';
-
-export const TableScrollContext = createContext<TableScrollContextType>({
-  scrollRef: { current: null },
-});

package/table/jsx-serializer/src/createJsxSerializeTable.tsx

@@ -1,163 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { getFirstAncestor, WithElementParent } from '@quadrats/core/serializers';
-import {
-  TableElement,
-  TableTypeKey,
-  TableTitleTypeKey,
-  TableMainTypeKey,
-  TableHeaderTypeKey,
-  TableBodyTypeKey,
-  TableRowTypeKey,
-  TableCellTypeKey,
-  TABLE_TYPES,
-  ColumnWidth,
-} from '@quadrats/common/table';
-import {
-  CreateJsxSerializeElementOptions,
-  createJsxSerializeElements,
-  JsxSerializeElementProps,
-} from '@quadrats/react/jsx-serializer';
-import { defaultRenderTableElements } from './defaultRenderTableElements';
-import { JsxSerializeTableElementProps } from './typings';
-import { Element, QuadratsElement } from '@quadrats/core';
-
-export type CreateJsxSerializeTableOptions = Partial<
-  Record<TableTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeTableElementProps>>> &
-    Record<TableTitleTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
-    Record<TableMainTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
-    Record<TableHeaderTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
-    Record<TableBodyTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
-    Record<TableRowTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
-    Record<TableCellTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>>
->;
-
-export function createJsxSerializeTable(options: CreateJsxSerializeTableOptions = {}) {
-  const {
-    table = {},
-    table_title = {},
-    table_main = {},
-    table_header = {},
-    table_body = {},
-    table_row = {},
-    table_cell = {},
-  } = options;
-
-  const tableType = table.type || TABLE_TYPES.table;
-  const tableTitleType = table_title.type || TABLE_TYPES.table_title;
-  const tableMainType = table_main.type || TABLE_TYPES.table_main;
-  const tableHeaderType = table_header.type || TABLE_TYPES.table_header;
-  const tableBodyType = table_body.type || TABLE_TYPES.table_body;
-  const tableRowType = table_row.type || TABLE_TYPES.table_row;
-  const tableCellType = table_cell.type || TABLE_TYPES.table_cell;
-
-  const renderTable = table.render || defaultRenderTableElements.table;
-  const renderTableTitle = table_title.render || defaultRenderTableElements.table_title;
-  const renderTableMain = table_main.render || defaultRenderTableElements.table_main;
-  const renderTableHeader = table_header.render || defaultRenderTableElements.table_header;
-  const renderTableBody = table_body.render || defaultRenderTableElements.table_body;
-  const renderTableRow = table_row.render || defaultRenderTableElements.table_row;
-  const renderTableCell = table_cell.render || defaultRenderTableElements.table_cell;
-
-  return createJsxSerializeElements([
-    {
-      type: tableType,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as TableElement & WithElementParent;
-
-        return renderTable({
-          children,
-          element,
-        });
-      },
-    },
-    {
-      type: tableTitleType,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as TableElement & WithElementParent;
-
-        return renderTableTitle({
-          children,
-          element,
-        });
-      },
-    },
-    {
-      type: tableMainType,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as TableElement & WithElementParent;
-        const firstAncestor = getFirstAncestor<TableElement>(
-          element,
-          (node) => (node as QuadratsElement).type === tableType,
-        );
-
-        const columnWidths = firstAncestor?.columnWidths || ([] as ColumnWidth[]);
-
-        return renderTableMain({
-          children,
-          element,
-          columnWidths,
-        });
-      },
-    },
-    {
-      type: tableHeaderType,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as TableElement & WithElementParent;
-
-        return renderTableHeader({
-          children,
-          element,
-        });
-      },
-    },
-    {
-      type: tableBodyType,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as TableElement & WithElementParent;
-
-        return renderTableBody({
-          children,
-          element,
-        });
-      },
-    },
-    {
-      type: tableRowType,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as TableElement & WithElementParent;
-
-        return renderTableRow({
-          children,
-          element,
-        });
-      },
-    },
-    {
-      type: tableCellType,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as TableElement & WithElementParent;
-        const firstAncestor = getFirstAncestor<TableElement>(
-          element,
-          (node) => (node as QuadratsElement).type === tableMainType,
-        );
-
-        const body = firstAncestor?.children.find((child) => child.type === tableBodyType);
-        const firstRow = body?.children[0];
-        const firstCell = Element.isElement(firstRow) ? firstRow.children[0] : null;
-
-        return renderTableCell({
-          children,
-          element,
-          isColumnPinned: Element.isElement(firstCell) ? firstCell.pinned : false,
-        });
-      },
-    },
-  ]);
-}

package/table/jsx-serializer/src/defaultRenderTableElements.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { TableJsxSerializeElements } from './typings';
-import { TableJsxSerializeElement } from './components/Table';
-import { TableTitleJsxSerializeElement } from './components/TableTitle';
-import { TableMainJsxSerializeElement } from './components/TableMain';
-import { TableHeaderJsxSerializeElement } from './components/TableHeader';
-import { TableBodyJsxSerializeElement } from './components/TableBody';
-import { TableRowJsxSerializeElement } from './components/TableRow';
-import { TableCellJsxSerializeElement } from './components/TableCell';
-
-export const defaultRenderTableElements: TableJsxSerializeElements = {
-  table: (props) => <TableJsxSerializeElement key={Math.random()} {...props} />,
-  table_title: (props) => <TableTitleJsxSerializeElement {...props} />,
-  table_main: (props) => <TableMainJsxSerializeElement {...props} />,
-  table_header: (props) => <TableHeaderJsxSerializeElement {...props} />,
-  table_body: (props) => <TableBodyJsxSerializeElement {...props} />,
-  table_row: (props) => <TableRowJsxSerializeElement {...props} />,
-  table_cell: (props) => <TableCellJsxSerializeElement {...props} />,
-};

package/table/jsx-serializer/src/typings.ts

@@ -1,36 +0,0 @@
-import {
-  TableElement,
-  TableTypeKey,
-  TableTitleTypeKey,
-  TableMainTypeKey,
-  TableHeaderTypeKey,
-  TableBodyTypeKey,
-  TableRowTypeKey,
-  TableCellTypeKey,
-  ColumnWidth,
-} from '@quadrats/common/table';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-import { RefObject } from 'react';
-
-export type JsxSerializeTableElementProps = JsxSerializeElementProps<TableElement>;
-
-export type TableJsxSerializeElements = Record<
-  TableTypeKey,
-  (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined
-> &
-  Record<TableTitleTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> &
-  Record<
-    TableMainTypeKey,
-    (props: JsxSerializeTableElementProps & { columnWidths?: ColumnWidth[] }) => JSX.Element | null | undefined
-  > &
-  Record<TableHeaderTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> &
-  Record<TableBodyTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> &
-  Record<TableRowTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> &
-  Record<
-    TableCellTypeKey,
-    (props: JsxSerializeTableElementProps & { isColumnPinned?: boolean }) => JSX.Element | null | undefined
-  >;
-
-export type TableScrollContextType = {
-  scrollRef: RefObject<HTMLDivElement | null>;
-};

package/table/jsx-serializer/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../../../tsconfig.base.json",
-  "exclude": ["**/*.spec.*"],
-  "include": ["./src"]
-}

package/table/src/components/ColumnDragButton.tsx

@@ -1,72 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { useDrag } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import clsx from 'clsx';
-import { Icon } from '@quadrats/react/components';
-import { Drag } from '@quadrats/icons';
-import { useTableDragContext } from '../contexts/TableDragContext';
-
-interface ColumnDragButtonProps {
-  columnIndex: number;
-  style?: React.CSSProperties;
-  onClick: (e: React.MouseEvent) => void;
-  checkIsTitleColumn: (columnIndex: number) => boolean;
-}
-
-export const COLUMN_DRAG_TYPE = 'TABLE_COLUMN';
-
-export const ColumnDragButton: React.FC<ColumnDragButtonProps> = ({
-  columnIndex,
-  style,
-  onClick,
-  checkIsTitleColumn,
-}) => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const { setDragState, setDropTargetIndex, setDragDirection } = useTableDragContext();
-  const isTitle = checkIsTitleColumn(columnIndex);
-
-  const [{ isDragging }, drag, preview] = useDrag(
-    () => ({
-      type: COLUMN_DRAG_TYPE,
-      item: () => {
-        const dragItem = { columnIndex, isTitle };
-
-        setDragState({ type: 'column', columnIndex, isTitle });
-
-        return dragItem;
-      },
-      collect: (monitor) => ({
-        isDragging: monitor.isDragging(),
-      }),
-      end: () => {
-        setDragState(null);
-        setDropTargetIndex(null);
-        setDragDirection(null);
-      },
-    }),
-    [columnIndex, isTitle, setDragState, setDropTargetIndex, setDragDirection],
-  );
-
-  // 使用空白圖片作為 drag preview，避免顯示預設的拖曳圖像
-  useEffect(() => {
-    preview(getEmptyImage(), { captureDraggingState: true });
-  }, [preview]);
-
-  drag(buttonRef);
-
-  return (
-    <button
-      ref={buttonRef}
-      type="button"
-      contentEditable={false}
-      style={style}
-      onClick={onClick}
-      title="點擊開啟選單，拖曳以移動"
-      className={clsx('qdr-table__cell-column-action', {
-        'qdr-table__cell-column-action--dragging': isDragging,
-      })}
-    >
-      <Icon icon={Drag} width={20} height={20} />
-    </button>
-  );
-};