react-code-canvas
Version:
A browser-based canvas for rendering React components at runtime
49 lines (48 loc) • 1.69 kB
TypeScript
import React from "react";
export interface EditableTextProps {
textContent?: string;
elementType?: keyof React.JSX.IntrinsicElements;
placeholder?: string;
tailwindStyles?: string;
onChange?: (newText: string) => void;
multiline?: boolean;
children?: React.ReactNode;
nodeId?: string;
__applyEditableTextPatch?: (id: string, text: string) => void;
}
/**
* Node model for preserving structure:
* - text nodes become { type: "text", value }
* - element nodes become { type: "element", element, key }
*/
type RichNode = {
type: "text";
value: string;
} | {
type: "element";
element: React.ReactElement<any>;
key: string;
};
/**
* Concatenates text nodes into a single string.
* (Note: This only gets text from immediate text nodes, not inside nested elements) TODO ?
*/
export declare function concatTextNodes(nodes: RichNode[]): string;
/**
* Redistributes edited text back into the original text segments.
*
* Adds the new edited text to the matching segment, while keeping
* other segment texts unchanged.
*
* @param newText - The user-edited combined text.
* @param originalSegments - The original text segments.
* @returns A new array of text segments with newText added to correspnding segments.
*/
export declare function distributeTextToSegments(newText: string, originalSegments: string[]): any[];
/**
* EditableText Component.
*
* Note: Currently works for two nested nodes, not more than 2.
*/
export default function EditableText({ textContent, elementType, placeholder, tailwindStyles, onChange, multiline, children, nodeId, __applyEditableTextPatch, }: EditableTextProps): React.JSX.Element;
export {};