@prismicio/editor-fields 0.4.73 → 0.4.74

package/dist/fields/RichTextField/extensions/Table/TableCell/plugins/TableHandles/events.d.ts

@@ -0,0 +1,19 @@
+import type { Editor } from "@tiptap/core";
+export type TableHandleEventDetail = {
+    type: "row" | "column";
+    referenceElement: HTMLElement;
+};
+export type TableHandleEventType = {
+    name: "handleClick";
+    detail: TableHandleEventDetail;
+};
+export declare class TableHandleEvent extends CustomEvent<TableHandleEventType["detail"]> {
+    constructor({ name, detail }: TableHandleEventType);
+    static dispatch<TEvent extends TableHandleEventType>(name: TEvent["name"], args: {
+        editor: Editor;
+    } & TEvent["detail"]): void;
+    static listen<TEvent extends TableHandleEventType>(name: TEvent["name"], args: {
+        editor: Editor;
+        callback: (detail: TEvent["detail"]) => void;
+    }): () => void;
+}

package/dist/fields/RichTextField/extensions/Table/TableCell/plugins/TableHandles/index.d.ts

@@ -0,0 +1 @@
+export { TableHandlesPlugin } from "./TableHandlesPlugin";

package/dist/fields/RichTextField/extensions/Table/TableCell/plugins/TableHandles/utils.d.ts

@@ -0,0 +1,23 @@
+import { type Editor } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { Selection } from "@tiptap/pm/state";
+interface NodePos {
+    pos: number;
+    start: number;
+    node: ProseMirrorNode | null | undefined;
+}
+export declare function getCellsInColumn(columnIndex: number | number[]): (selection: Selection) => NodePos[] | null;
+export declare function getCellsInRow(rowIndex: number | number[]): (selection: Selection) => NodePos[] | null;
+/** Finds the table handle element for the given type and element. */
+export declare function findTableHandleElement(args: {
+    type: "row" | "column";
+    element: Element;
+}): Element;
+/** Creates a table handle element for the given type. */
+export declare function createTableHandleElement(args: {
+    type: "row" | "column";
+    editor: Editor;
+    rowIndex: number;
+    columnIndex: number;
+}): HTMLButtonElement;
+export {};

package/dist/fields/RichTextField/extensions/Table/TableCell/plugins/index.d.ts

@@ -0,0 +1 @@
+export { TableHandlesPlugin } from "./TableHandles";

package/dist/fields/RichTextField/extensions/Table/TableCell/utils.d.ts

@@ -5,6 +5,7 @@ interface CreateButtonElementArgs {
     title: string;
     className: string;
     tabIndex?: number;
+    contentEditable?: boolean;
     onMouseDown?: (event: MouseEvent, currentTarget: HTMLButtonElement) => void;
     onClick: (event: MouseEvent, currentTarget: HTMLButtonElement) => void;
     [key: `data-${string}`]: string | number | boolean;

package/dist/fields/RichTextField/extensions/Table/TableControlsWrapper.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type NodeViewProps } from "@tiptap/react";
+export declare function TableControlsWrapper({ editor }: NodeViewProps): JSX.Element;

package/dist/fields/RichTextField/extensions/Table/TableView.d.ts

@@ -1,8 +1,7 @@
 import type { TableOptions as TTTableOptions } from "@tiptap/extension-table";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { TableView as TTTableView } from "@tiptap/pm/tables";
-import type { NodeView, ViewMutationRecord } from "@tiptap/pm/view";
-import { Editor } from "@tiptap/react";
+import type { ViewMutationRecord } from "@tiptap/pm/view";
+import { type NodeViewRendererProps } from "@tiptap/react";
 export interface TableOptions extends TTTableOptions {
     defaultCellMinWidth: number;
 }
@@ -11,12 +10,10 @@ export interface TableOptions extends TTTableOptions {
  * row/column buttons, while keeping the default table view for the
  * table content.
  */
-export declare class TableView extends TTTableView implements NodeView {
+export declare class TableView extends TTTableView {
+    private tableWrapper;
     private selectionOverlay;
-    constructor(args: {
-        node: ProseMirrorNode;
-        editor: Editor;
-    }, options: TableOptions);
+    constructor(props: NodeViewRendererProps, options: TableOptions);
     destroy(): void;
     ignoreMutation(mutation: ViewMutationRecord): boolean;
 }

package/dist/fields/RichTextField/extensions/Table/menus/PassthroughTrigger.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes, type MutableRefObject } from "react";
+interface TriggerProps extends HTMLAttributes<HTMLDivElement> {
+    targetTriggerElementRef: MutableRefObject<HTMLElement | undefined>;
+}
+/**
+ * This component serves as a dummy trigger for radix dialog to be able to open
+ * and to position the floating menu relative to the real trigger. The trigger
+ * rendered here won't be visible, and the props that would be passed to it are
+ * passed to the real trigger via the targetTriggerElementRef prop.
+ */
+export declare const PassthroughTrigger: (props: TriggerProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export {};

package/dist/fields/RichTextField/extensions/Table/menus/TableColumnMenu.d.ts

@@ -1,11 +1,13 @@
 import type { Editor } from "@tiptap/core";
-import { type CSSProperties } from "react";
+import type { CSSProperties, MutableRefObject } from "react";
 interface TableColumnMenuProps {
     editor: Editor;
     style?: CSSProperties;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    triggerElement: HTMLElement | undefined;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    floatingStyle: CSSProperties;
+    triggerRef: (node: HTMLElement | null) => void;
+    targetTriggerElementRef: MutableRefObject<HTMLElement | undefined>;
 }
 export declare function TableColumnMenu(props: TableColumnMenuProps): JSX.Element;
 export {};

package/dist/fields/RichTextField/extensions/Table/menus/TableRowMenu.d.ts

@@ -1,10 +1,12 @@
-/// <reference types="react" />
 import type { Editor } from "@tiptap/core";
+import type { CSSProperties, MutableRefObject } from "react";
 interface TableRowMenuProps {
     editor: Editor;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    triggerElement: HTMLElement | undefined;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    floatingStyle: CSSProperties;
+    triggerRef: (node: HTMLElement | null) => void;
+    targetTriggerElementRef: MutableRefObject<HTMLElement | undefined>;
 }
 export declare function TableRowMenu(props: TableRowMenuProps): JSX.Element;
 export {};

package/dist/fields/RichTextField/extensions/Table/plugins/TableHandles/TableHandlesPluginDef.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
+import { DecorationSet } from "@tiptap/pm/view";
+/** Plugin responsible for showing and hiding the row and column handles. */
+export declare function tableHandlesPlugin(args: {
+    editor: Editor;
+    name: string;
+}): Plugin<DecorationSet>;

package/dist/fields/RichTextField/extensions/Table/plugins/TableHandles/TableHandlesPluginView.d.ts

@@ -0,0 +1,34 @@
+import { type PluginView } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+/**
+ * This plugin centralizes the logic for showing and hiding the row and column
+ * handle buttons (the ones that on click open a floating menu).
+ *
+ * Ideally, hiding and showing the handles would be handled using only CSS,
+ * but identifying the topmost cell in a column is not trivial, as the grouping
+ * of cells in a column is not clearly defined in the DOM (only by colgroup),
+ * and CSS cannot dynamically select it depending on the hovered cell.
+ *
+ * Another option was to dynamically generate hardcoded selectors, given that
+ * we know the number of rows and cells, but inline styles can only contain
+ * property declarations, not pseudo-classes like :hover.
+ *
+ * That leaves us with handling it solely in JavaScript, which is what this
+ * plugin does.
+ */
+export declare class TableHandlesPluginView implements PluginView {
+    private readonly view;
+    private abortController;
+    private currentRowHandle;
+    private currentColumnHandle;
+    constructor(view: EditorView);
+    update(view: EditorView): void;
+    destroy(): void;
+    private attachEventListeners;
+    private showCurrentHandles;
+    private hidePreviousHandles;
+    private getRowHandle;
+    private getColumnHandle;
+    private displayHandle;
+    private hideHandle;
+}

package/dist/fields/RichTextField/extensions/Table/plugins/TableHandles/TableHandlesPluginViewClass.d.ts

@@ -0,0 +1,34 @@
+import { type PluginView } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+/**
+ * This plugin centralizes the logic for showing and hiding the row and column
+ * handle buttons (the ones that on click open a floating menu).
+ *
+ * Ideally, hiding and showing the handles would be handled using only CSS,
+ * but identifying the topmost cell in a column is not trivial, as the grouping
+ * of cells in a column is not clearly defined in the DOM (only by colgroup),
+ * and CSS cannot dynamically select it depending on the hovered cell.
+ *
+ * Another option was to dynamically generate hardcoded selectors, given that
+ * we know the number of rows and cells, but inline styles can only contain
+ * property declarations, not pseudo-classes like :hover.
+ *
+ * That leaves us with handling it solely in JavaScript, which is what this
+ * plugin does.
+ */
+export declare class TableHandlesPluginView implements PluginView {
+    private readonly view;
+    private abortController;
+    private currentRowHandle;
+    private currentColumnHandle;
+    constructor(view: EditorView);
+    update(view: EditorView): void;
+    destroy(): void;
+    private attachEventListeners;
+    private showCurrentHandles;
+    private hidePreviousHandles;
+    private getRowHandle;
+    private getColumnHandle;
+    private displayHandle;
+    private hideHandle;
+}