planet-editor 0.1.0

package/dist/lib/components/planet-node/image-upload-node/image-upload-node.d.ts

@@ -0,0 +1,68 @@
+import { NodeViewProps } from '../../../planet-core/react';
+export interface FileItem {
+    /**
+     * Unique identifier for the file item
+     */
+    id: string;
+    /**
+     * The actual File object being uploaded
+     */
+    file: File;
+    /**
+     * Current upload progress as a percentage (0-100)
+     */
+    progress: number;
+    /**
+     * Current status of the file upload process
+     * @default "uploading"
+     */
+    status: "uploading" | "success" | "error";
+    /**
+     * URL to the uploaded file, available after successful upload
+     * @optional
+     */
+    url?: string;
+    /**
+     * Controller that can be used to abort the upload process
+     * @optional
+     */
+    abortController?: AbortController;
+}
+export interface UploadOptions {
+    /**
+     * Maximum allowed file size in bytes
+     */
+    maxSize: number;
+    /**
+     * Maximum number of files that can be uploaded
+     */
+    limit: number;
+    /**
+     * String specifying acceptable file types (MIME types or extensions)
+     * @example ".jpg,.png,image/jpeg" or "image/*"
+     */
+    accept: string;
+    /**
+     * Function that handles the actual file upload process
+     * @param {File} file - The file to be uploaded
+     * @param {Function} onProgress - Callback function to report upload progress
+     * @param {AbortSignal} signal - Signal that can be used to abort the upload
+     * @returns {Promise<string>} Promise resolving to the URL of the uploaded file
+     */
+    upload: (file: File, onProgress: (event: {
+        progress: number;
+    }) => void, signal: AbortSignal) => Promise<string>;
+    /**
+     * Callback triggered when a file is uploaded successfully
+     * @param {string} url - URL of the successfully uploaded file
+     * @optional
+     */
+    onSuccess?: (url: string) => void;
+    /**
+     * Callback triggered when an error occurs during upload
+     * @param {Error} error - The error that occurred
+     * @optional
+     */
+    onError?: (error: Error) => void;
+}
+export declare const ImageUploadNode: React.FC<NodeViewProps>;

package/dist/lib/components/planet-node/image-upload-node/index.d.ts

@@ -0,0 +1 @@
+export * from './image-upload-node-extension';

package/dist/lib/components/planet-templates/simple/data/content.json.d.ts

@@ -0,0 +1,479 @@
+declare const _default: {
+  "type": "doc",
+  "content": [
+    {
+      "type": "heading",
+      "attrs": {
+        "textAlign": null,
+        "level": 1
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Getting started"
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": null
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Welcome to the "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "italic"
+            },
+            {
+              "type": "highlight",
+              "attrs": {
+                "color": "var(--tt-color-highlight-yellow)"
+              }
+            }
+          ],
+          "text": "Simple Editor"
+        },
+        {
+          "type": "text",
+          "text": " template! This template integrates "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "bold"
+            }
+          ],
+          "text": "open source"
+        },
+        {
+          "type": "text",
+          "text": " UI components and Planet extensions licensed under "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "bold"
+            }
+          ],
+          "text": "MIT"
+        },
+        {
+          "type": "text",
+          "text": "."
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": null
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Integrate it by following the "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "link",
+              "attrs": {
+                "href": "https://planet.dev/docs/ui-components/templates/simple-editor",
+                "target": "_blank",
+                "rel": "noopener noreferrer nofollow",
+                "class": null
+              }
+            }
+          ],
+          "text": "Planet UI Components docs"
+        },
+        {
+          "type": "text",
+          "text": " or using our CLI tool."
+        }
+      ]
+    },
+    {
+      "type": "codeBlock",
+      "attrs": {
+        "language": null
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "npm install planet-editor"
+        }
+      ]
+    },
+    {
+      "type": "heading",
+      "attrs": {
+        "textAlign": null,
+        "level": 2
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Features"
+        }
+      ]
+    },
+    {
+      "type": "blockquote",
+      "content": [
+        {
+          "type": "paragraph",
+          "attrs": {
+            "textAlign": null
+          },
+          "content": [
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "italic"
+                }
+              ],
+              "text": "A fully responsive rich text editor with built-in support for common formatting and layout tools. Type markdown "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ],
+              "text": "**"
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "italic"
+                }
+              ],
+              "text": " or use keyboard shortcuts "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ],
+              "text": "⌘+B"
+            },
+            {
+              "type": "text",
+              "text": " for "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "strike"
+                }
+              ],
+              "text": "most"
+            },
+            {
+              "type": "text",
+              "text": " all common markdown marks. 🪄"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": "left"
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Add images, customize alignment, and apply "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "highlight",
+              "attrs": {
+                "color": "var(--tt-color-highlight-blue)"
+              }
+            }
+          ],
+          "text": "advanced formatting"
+        },
+        {
+          "type": "text",
+          "text": " to make your writing more engaging and professional."
+        }
+      ]
+    },
+    {
+      "type": "image",
+      "attrs": {
+        "src": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNDIwIiB2aWV3Qm94PSIwIDAgOTAwIDQyMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJQbGFjZWhvbGRlciBpbWFnZSI+CiAgPHJlY3Qgd2lkdGg9IjkwMCIgaGVpZ2h0PSI0MjAiIGZpbGw9IiNmNGY0ZjUiLz4KICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9Ijg5OSIgaGVpZ2h0PSI0MTkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2U0ZTRlNyIvPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M0YzRjYyIgc3Ryb2tlLXdpZHRoPSI0Ij4KICAgIDxyZWN0IHg9IjMzMCIgeT0iMTUwIiB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE1MCIgcng9IjgiLz4KICAgIDxjaXJjbGUgY3g9IjM5MiIgY3k9IjIwMCIgcj0iMjAiLz4KICAgIDxwYXRoIGQ9Ik0zMzggMjkybDcwLTY0IDUwIDQ0IDYwLTU0IDc2IDc0Ii8+CiAgPC9nPgogIDx0ZXh0IHg9IjQ1MCIgeT0iMzQ2IiBmb250LWZhbWlseT0iSW50ZXIsIHN5c3RlbS11aSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyMiIgZmlsbD0iI2ExYTFhYSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGxhY2Vob2xkZXIgaW1hZ2U8L3RleHQ+Cjwvc3ZnPgo=",
+        "alt": "placeholder-image",
+        "title": "placeholder-image"
+      }
+    },
+    {
+      "type": "bulletList",
+      "content": [
+        {
+          "type": "listItem",
+          "content": [
+            {
+              "type": "paragraph",
+              "attrs": {
+                "textAlign": "left"
+              },
+              "content": [
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "bold"
+                    }
+                  ],
+                  "text": "Superscript"
+                },
+                {
+                  "type": "text",
+                  "text": " (x"
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "superscript"
+                    }
+                  ],
+                  "text": "2"
+                },
+                {
+                  "type": "text",
+                  "text": ") and "
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "bold"
+                    }
+                  ],
+                  "text": "Subscript"
+                },
+                {
+                  "type": "text",
+                  "text": " (H"
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "subscript"
+                    }
+                  ],
+                  "text": "2"
+                },
+                {
+                  "type": "text",
+                  "text": "O) for precision."
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "listItem",
+          "content": [
+            {
+              "type": "paragraph",
+              "attrs": {
+                "textAlign": "left"
+              },
+              "content": [
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "bold"
+                    }
+                  ],
+                  "text": "Typographic conversion"
+                },
+                {
+                  "type": "text",
+                  "text": ": automatically convert to "
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "code"
+                    }
+                  ],
+                  "text": "->"
+                },
+                {
+                  "type": "text",
+                  "text": " an arrow "
+                },
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "bold"
+                    }
+                  ],
+                  "text": "→"
+                },
+                {
+                  "type": "text",
+                  "text": "."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": "left"
+      },
+      "content": [
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "italic"
+            }
+          ],
+          "text": "→ "
+        },
+        {
+          "type": "text",
+          "marks": [
+            {
+              "type": "link",
+              "attrs": {
+                "href": "https://planet.dev/docs/ui-components/templates/simple-editor#features",
+                "target": "_blank",
+                "rel": "noopener noreferrer nofollow",
+                "class": null
+              }
+            }
+          ],
+          "text": "Learn more"
+        }
+      ]
+    },
+    {
+      "type": "horizontalRule"
+    },
+    {
+      "type": "heading",
+      "attrs": {
+        "textAlign": "left",
+        "level": 2
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Make it your own"
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": "left"
+      },
+      "content": [
+        {
+          "type": "text",
+          "text": "Switch between light and dark modes, and tailor the editor's appearance with customizable CSS to match your style."
+        }
+      ]
+    },
+    {
+      "type": "taskList",
+      "content": [
+        {
+          "type": "taskItem",
+          "attrs": {
+            "checked": true
+          },
+          "content": [
+            {
+              "type": "paragraph",
+              "attrs": {
+                "textAlign": "left"
+              },
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Test template"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "taskItem",
+          "attrs": {
+            "checked": false
+          },
+          "content": [
+            {
+              "type": "paragraph",
+              "attrs": {
+                "textAlign": "left"
+              },
+              "content": [
+                {
+                  "type": "text",
+                  "marks": [
+                    {
+                      "type": "link",
+                      "attrs": {
+                        "href": "https://planet.dev/docs/ui-components/templates/simple-editor",
+                        "target": "_blank",
+                        "rel": "noopener noreferrer nofollow",
+                        "class": null
+                      }
+                    }
+                  ],
+                  "text": "Integrate the free template"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph",
+      "attrs": {
+        "textAlign": "left"
+      }
+    }
+  ]
+};
+
+export default _default;

package/dist/lib/components/planet-templates/simple/simple-editor.d.ts

@@ -0,0 +1,31 @@
+export interface SimpleEditorProps {
+    /** Initial content as HTML string or Planet JSON. Defaults to demo content. */
+    content?: string | Record<string, unknown>;
+    /** Whether the editor is editable. @default true */
+    editable?: boolean;
+    /** Called on every change with both HTML and JSON representations. */
+    onChange?: (value: {
+        html: string;
+        json: Record<string, unknown>;
+    }) => void;
+    /**
+     * Image upload handler. Receives the picked File and resolves to a URL/src.
+     * Defaults to an offline base64 (data URL) handler. Pass your own to upload
+     * to a backend when online.
+     */
+    uploadImage?: (file: File, onProgress?: (event: {
+        progress: number;
+    }) => void, abortSignal?: AbortSignal) => Promise<string>;
+    /**
+     * Show a line-number gutter down the left of the document, numbering each
+     * top-level block. Off by default. @default false
+     */
+    lineNumbers?: boolean;
+}
+/**
+ * Public editor component. SSR-safe: on the server (and the first client render
+ * during hydration) it emits a stable empty wrapper, then mounts the real
+ * editor on the client. This keeps every Planet hook off the server, so it
+ * works in Next.js App Router without prerender/hydration errors.
+ */
+export declare function SimpleEditor(props?: SimpleEditorProps): import("react").JSX.Element;

package/dist/lib/components/planet-templates/simple/theme-toggle.d.ts

@@ -0,0 +1 @@
+export declare function ThemeToggle(): import("react").JSX.Element;

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

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

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

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

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

@@ -0,0 +1,80 @@
+import { Editor } from '../../../planet-core/react';
+export declare const BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
+/**
+ * Configuration for the blockquote functionality
+ */
+export interface UseBlockquoteConfig {
+    /**
+     * The Planet editor instance.
+     */
+    editor?: Editor | null;
+    /**
+     * Whether the button should hide when blockquote is not available.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after a successful toggle.
+     */
+    onToggled?: () => void;
+}
+/**
+ * Checks if blockquote can be toggled in the current editor state
+ */
+export declare function canToggleBlockquote(editor: Editor | null, turnInto?: boolean): boolean;
+/**
+ * Toggles blockquote formatting for a specific node or the current selection
+ */
+export declare function toggleBlockquote(editor: Editor | null): boolean;
+/**
+ * Determines if the blockquote button should be shown
+ */
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+/**
+ * Custom hook that provides blockquote functionality for Planet editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleBlockquoteButton() {
+ *   const { isVisible, handleToggle, isActive } = useBlockquote()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Blockquote</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedBlockquoteButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useBlockquote({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Blockquote toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle Blockquote
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export declare function useBlockquote(config?: UseBlockquoteConfig): {
+    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>;
+};