planet-editor 0.1.0

package/dist/lib/components/planet-ui/link-popover/link-popover.d.ts

@@ -0,0 +1,57 @@
+import { Editor } from '../../../planet-core/react';
+import { UseLinkPopoverConfig } from '.';
+import { ButtonProps } from '../../planet-ui-primitive/button';
+export interface LinkMainProps {
+    /**
+     * The URL to set for the link.
+     */
+    url: string;
+    /**
+     * Function to update the URL state.
+     */
+    setUrl: React.Dispatch<React.SetStateAction<string | null>>;
+    /**
+     * Function to set the link in the editor.
+     */
+    setLink: () => void;
+    /**
+     * Function to remove the link from the editor.
+     */
+    removeLink: () => void;
+    /**
+     * Function to open the link.
+     */
+    openLink: () => void;
+    /**
+     * Whether the link is currently active in the editor.
+     */
+    isActive: boolean;
+}
+export interface LinkPopoverProps extends Omit<ButtonProps, "type">, UseLinkPopoverConfig {
+    /**
+     * Callback for when the popover opens or closes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether to automatically open the popover when a link is active.
+     * @default true
+     */
+    autoOpenOnLinkActive?: boolean;
+}
+/**
+ * Link button component for triggering the link popover
+ */
+export declare const LinkButton: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Link content component for standalone use
+ */
+export declare const LinkContent: React.FC<{
+    editor?: Editor | null;
+}>;
+/**
+ * Link popover component for Planet editors.
+ *
+ * For custom popover implementations, use the `useLinkPopover` hook instead.
+ */
+export declare const LinkPopover: import('react').ForwardRefExoticComponent<LinkPopoverProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default LinkPopover;

package/dist/lib/components/planet-ui/link-popover/use-link-popover.d.ts

@@ -0,0 +1,117 @@
+import { Editor } from '../../../planet-core/react';
+/**
+ * Configuration for the link popover functionality
+ */
+export interface UseLinkPopoverConfig {
+    /**
+     * The Planet editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether to hide the link popover when not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called when the link is set.
+     */
+    onSetLink?: () => void;
+}
+/**
+ * Configuration for the link handler functionality
+ */
+export interface LinkHandlerProps {
+    /**
+     * The Planet editor instance.
+     */
+    editor: Editor | null;
+    /**
+     * Callback function called when the link is set.
+     */
+    onSetLink?: () => void;
+}
+/**
+ * Checks if a link can be set in the current editor state
+ */
+export declare function canSetLink(editor: Editor | null): boolean;
+/**
+ * Checks if a link is currently active in the editor
+ */
+export declare function isLinkActive(editor: Editor | null): boolean;
+/**
+ * Determines if the link button should be shown
+ */
+export declare function shouldShowLinkButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook for handling link operations in a Planet editor
+ */
+export declare function useLinkHandler(props: LinkHandlerProps): {
+    url: string;
+    setUrl: import('react').Dispatch<import('react').SetStateAction<string | null>>;
+    setLink: () => void;
+    removeLink: () => void;
+    openLink: (target?: string, features?: string) => void;
+};
+/**
+ * Custom hook for link popover state management
+ */
+export declare function useLinkState(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): {
+    isVisible: boolean;
+    canSet: boolean;
+    isActive: boolean;
+};
+/**
+ * Main hook that provides link popover functionality for Planet editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button disabled={!canSet}>Link</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onSetLink: () => console.log('Link set!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       disabled={!canSet}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       <Icon />
+ *       {label}
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useLinkPopover(config?: UseLinkPopoverConfig): {
+    url: string;
+    setUrl: import('react').Dispatch<import('react').SetStateAction<string | null>>;
+    setLink: () => void;
+    removeLink: () => void;
+    openLink: (target?: string, features?: string) => void;
+    isVisible: boolean;
+    canSet: boolean;
+    isActive: boolean;
+    label: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

package/dist/lib/components/planet-ui/list-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './list-button';
+export * from './use-list';

package/dist/lib/components/planet-ui/list-button/list-button.d.ts

@@ -0,0 +1,23 @@
+import { ButtonProps } from '../../planet-ui-primitive/button';
+import { ListType, UseListConfig } from '.';
+export interface ListButtonProps extends Omit<ButtonProps, "type">, UseListConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function ListShortcutBadge({ type, shortcutKeys, }: {
+    type: ListType;
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for toggling lists in a Planet editor.
+ *
+ * For custom button implementations, use the `useList` hook instead.
+ */
+export declare const ListButton: import('react').ForwardRefExoticComponent<ListButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/planet-ui/list-button/use-list.d.ts

@@ -0,0 +1,97 @@
+import { Editor } from '../../../planet-core/react';
+export type ListType = "bulletList" | "orderedList" | "taskList";
+/**
+ * Configuration for the list functionality
+ */
+export interface UseListConfig {
+    /**
+     * The Planet editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The type of list to toggle.
+     */
+    type: ListType;
+    /**
+     * Whether the button should hide when list is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful toggle.
+     */
+    onToggled?: () => void;
+}
+export declare const listIcons: {
+    bulletList: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    orderedList: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    taskList: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};
+export declare const listLabels: Record<ListType, string>;
+export declare const LIST_SHORTCUT_KEYS: Record<ListType, string>;
+/**
+ * Checks if a list can be toggled in the current editor state
+ */
+export declare function canToggleList(editor: Editor | null, type: ListType, turnInto?: boolean): boolean;
+/**
+ * Checks if list is currently active
+ */
+export declare function isListActive(editor: Editor | null, type: ListType): boolean;
+/**
+ * Toggles list in the editor
+ */
+export declare function toggleList(editor: Editor | null, type: ListType): boolean;
+/**
+ * Determines if the list button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    type: ListType;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides list functionality for Planet editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleListButton() {
+ *   const { isVisible, handleToggle, isActive } = useList({ type: "bulletList" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Bullet List</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedListButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useList({
+ *     type: "orderedList",
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('List toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle List
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useList(config: UseListConfig): {
+    isVisible: boolean;
+    isActive: boolean;
+    handleToggle: () => boolean;
+    canToggle: boolean;
+    label: string;
+    shortcutKeys: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

package/dist/lib/components/planet-ui/list-dropdown-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './list-dropdown-menu';

package/dist/lib/components/planet-ui/list-dropdown-menu/list-dropdown-menu.d.ts

@@ -0,0 +1,28 @@
+import { Editor } from '../../../planet-core/react';
+import { ListType } from '../list-button';
+import { ButtonProps } from '../../planet-ui-primitive/button';
+export interface ListDropdownMenuProps extends Omit<ButtonProps, "type"> {
+    /**
+     * The Planet editor instance.
+     */
+    editor?: Editor;
+    /**
+     * The list types to display in the dropdown.
+     */
+    types?: ListType[];
+    /**
+     * Whether the dropdown should be hidden when no list types are available
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback for when the dropdown opens or closes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether the dropdown should use a modal
+     */
+    modal?: boolean;
+}
+export declare const ListDropdownMenu: import('react').ForwardRefExoticComponent<ListDropdownMenuProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default ListDropdownMenu;

package/dist/lib/components/planet-ui/list-dropdown-menu/use-list-dropdown-menu.d.ts

@@ -0,0 +1,90 @@
+import { Editor } from '../../../planet-core/react';
+import { ListType } from '../list-button';
+/**
+ * Configuration for the list dropdown menu functionality
+ */
+export interface UseListDropdownMenuConfig {
+    /**
+     * The Planet editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The list types to display in the dropdown.
+     * @default ["bulletList", "orderedList", "taskList"]
+     */
+    types?: ListType[];
+    /**
+     * Whether the dropdown should be hidden when no list types are available
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+}
+export interface ListOption {
+    label: string;
+    type: ListType;
+    icon: React.ElementType;
+}
+export declare const listOptions: ListOption[];
+export declare function canToggleAnyList(editor: Editor | null, listTypes: ListType[]): boolean;
+export declare function isAnyListActive(editor: Editor | null, listTypes: ListType[]): boolean;
+export declare function getFilteredListOptions(availableTypes: ListType[]): typeof listOptions;
+export declare function shouldShowListDropdown(params: {
+    editor: Editor | null;
+    listTypes: ListType[];
+    hideWhenUnavailable: boolean;
+    listInSchema: boolean;
+    canToggleAny: boolean;
+}): boolean;
+/**
+ * Gets the currently active list type from the available types
+ */
+export declare function getActiveListType(editor: Editor | null, availableTypes: ListType[]): ListType | undefined;
+/**
+ * Custom hook that provides list dropdown menu functionality for Planet editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *     isAnyActive,
+ *     canToggleAny,
+ *     filteredLists,
+ *   } = useListDropdownMenu()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu>
+ *       // dropdown content
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *   } = useListDropdownMenu({
+ *     editor: myEditor,
+ *     types: ["bulletList", "orderedList"],
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export declare function useListDropdownMenu(config?: UseListDropdownMenuConfig): {
+    isVisible: boolean;
+    activeType: ListType | undefined;
+    isActive: boolean;
+    canToggle: boolean;
+    types: ListType[];
+    filteredLists: ListOption[];
+    label: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

package/dist/lib/components/planet-ui/mark-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mark-button';
+export * from './use-mark';

package/dist/lib/components/planet-ui/mark-button/mark-button.d.ts

@@ -0,0 +1,23 @@
+import { Mark, UseMarkConfig } from '.';
+import { ButtonProps } from '../../planet-ui-primitive/button';
+export interface MarkButtonProps extends Omit<ButtonProps, "type">, UseMarkConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+}
+export declare function MarkShortcutBadge({ type, shortcutKeys, }: {
+    type: Mark;
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for toggling marks in a Planet editor.
+ *
+ * For custom button implementations, use the `useMark` hook instead.
+ */
+export declare const MarkButton: import('react').ForwardRefExoticComponent<MarkButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/lib/components/planet-ui/mark-button/use-mark.d.ts

@@ -0,0 +1,104 @@
+import { Editor } from '../../../planet-core/react';
+export type Mark = "bold" | "italic" | "strike" | "code" | "underline" | "superscript" | "subscript";
+/**
+ * Configuration for the mark functionality
+ */
+export interface UseMarkConfig {
+    /**
+     * The Planet editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * The type of mark to toggle
+     */
+    type: Mark;
+    /**
+     * Whether the button should hide when mark is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful mark toggle.
+     */
+    onToggled?: () => void;
+}
+export declare const markIcons: {
+    bold: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    italic: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    underline: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    strike: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    code: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    superscript: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+    subscript: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};
+export declare const MARK_SHORTCUT_KEYS: Record<Mark, string>;
+/**
+ * Checks if a mark can be toggled in the current editor state
+ */
+export declare function canToggleMark(editor: Editor | null, type: Mark): boolean;
+/**
+ * Checks if a mark is currently active
+ */
+export declare function isMarkActive(editor: Editor | null, type: Mark): boolean;
+/**
+ * Toggles a mark in the editor
+ */
+export declare function toggleMark(editor: Editor | null, type: Mark): boolean;
+/**
+ * Determines if the mark button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    type: Mark;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Gets the formatted mark name
+ */
+export declare function getFormattedMarkName(type: Mark): string;
+/**
+ * Custom hook that provides mark functionality for Planet editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleBoldButton() {
+ *   const { isVisible, handleMark } = useMark({ type: "bold" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleMark}>Bold</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedItalicButton() {
+ *   const { isVisible, handleMark, label, isActive } = useMark({
+ *     editor: myEditor,
+ *     type: "italic",
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Mark toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleMark}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Italic
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useMark(config: UseMarkConfig): {
+    isVisible: boolean;
+    isActive: boolean;
+    handleMark: () => boolean;
+    canToggle: boolean;
+    label: string;
+    shortcutKeys: string;
+    Icon: import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element> | import('react').MemoExoticComponent<({ className, ...props }: Omit<import('react').SVGProps<SVGSVGElement>, "ref">) => import("react").JSX.Element>;
+};

package/dist/lib/components/planet-ui/search-bar/index.d.ts

@@ -0,0 +1 @@
+export { SearchBar, type SearchBarProps } from './search-bar';

package/dist/lib/components/planet-ui/search-bar/search-bar.d.ts

@@ -0,0 +1,11 @@
+import { Editor } from '../../../planet-core/core';
+export interface SearchBarProps {
+    editor: Editor;
+    onClose: () => void;
+}
+/**
+ * Find-in-document bar. Drives the Planet Search extension and reflects its
+ * live match count / current position. Enter = next, Shift+Enter = previous,
+ * Escape = close.
+ */
+export declare function SearchBar({ editor, onClose }: SearchBarProps): import("react").JSX.Element;

package/dist/lib/components/planet-ui/table-dropdown-menu/index.d.ts

@@ -0,0 +1 @@
+export { TableDropdownMenu } from './table-dropdown-menu';

package/dist/lib/components/planet-ui/table-dropdown-menu/table-dropdown-menu.d.ts

@@ -0,0 +1,11 @@
+import { Editor } from '../../../planet-core/react';
+export interface TableDropdownMenuProps {
+    editor?: Editor;
+}
+/**
+ * Toolbar dropdown that inserts a table and exposes all table-related
+ * actions (rows, columns, cells, header toggles, delete) once the cursor is
+ * inside a table. Actions are disabled when not applicable.
+ */
+export declare function TableDropdownMenu({ editor: providedEditor, }: TableDropdownMenuProps): import("react").JSX.Element | null;
+export default TableDropdownMenu;

package/dist/lib/components/planet-ui/text-align-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './text-align-button';
+export * from './use-text-align';

package/dist/lib/components/planet-ui/text-align-button/text-align-button.d.ts

@@ -0,0 +1,30 @@
+import { TextAlign, UseTextAlignConfig } from '.';
+import { ButtonProps } from '../../planet-ui-primitive/button';
+type IconProps = React.SVGProps<SVGSVGElement>;
+type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement;
+export interface TextAlignButtonProps extends Omit<ButtonProps, "type">, UseTextAlignConfig {
+    /**
+     * Optional text to display alongside the icon.
+     */
+    text?: string;
+    /**
+     * Optional show shortcut keys in the button.
+     * @default false
+     */
+    showShortcut?: boolean;
+    /**
+     * Optional custom icon component to render instead of the default.
+     */
+    icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>;
+}
+export declare function TextAlignShortcutBadge({ align, shortcutKeys, }: {
+    align: TextAlign;
+    shortcutKeys?: string;
+}): import("react").JSX.Element;
+/**
+ * Button component for setting text alignment in a Planet editor.
+ *
+ * For custom button implementations, use the `useTextAlign` hook instead.
+ */
+export declare const TextAlignButton: import('react').ForwardRefExoticComponent<TextAlignButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};