@frontlit/text-editor 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 FrontLit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# @frontlit/text-editor
+
+A TipTap-based rich text editor and static renderer for React. Framework-agnostic: it depends only on `react` / `react-dom`. No Next.js, no backend, and no media-upload service.
+
+Uploaded images are embedded as data URLs by default. Hosts can replace that with their own picker via `ImagePickerContextProvider`.
+
+## Installation
+
+```sh
+npm i @frontlit/text-editor
+# or
+pnpm add @frontlit/text-editor
+```
+
+Peer dependencies: `react` and `react-dom` (^18 or ^19).
+
+### CSS
+
+Import the compiled stylesheet. It includes Tailwind utilities, fallback
+tokens for the editor chrome, ProseMirror/renderer rules, and a small
+highlight.js theme. Tailwind is **not** required in the host:
+
+```ts
+import "@frontlit/text-editor/styles.css";
+```
+
+If you already run Tailwind CSS v4 and want to generate the utilities yourself,
+skip `styles.css`, scan the package, and import the prose rules (lists,
+blockquotes, code blocks — these are not utilities):
+
+```css
+@import "@frontlit/text-editor/tokens.css";
+@import "@frontlit/text-editor/prose.css";
+@source "./node_modules/@frontlit/text-editor";
+```
+
+## Usage
+
+```tsx
+import { Editor, TextRenderer, emptyDoc } from "@frontlit/text-editor";
+import "@frontlit/text-editor/styles.css";
+
+<Editor initialContent={emptyDoc} onChange={(json) => save(json)} />;
+<TextRenderer json={savedJson} />;
+```
+
+## What's inside
+
+- `Editor` — the WYSIWYG editing surface (toolbar, bubble menu, tables, code blocks with syntax highlighting, images, links).
+- `TextRenderer` — renders saved `TextEditorContent` (TipTap JSON) as static React elements. Accepts an optional, loosely-typed `theme` prop (see `TextRendererTheme`) to theme headings/paragraphs/links; without one it falls back to plain semantic HTML tags.
+- `TextEditorContent` — the TipTap doc-JSON type both of the above operate on.
+- `normalizeTextEditorContent`, `extractTextFromTextEditorContent`, `truncateTextEditorContent` — content utilities (e.g. for building excerpts).
+- `emptyDoc`, `createExtensions`, `createId`, `extractHeadings`, `extractTextFromNode` — lower-level building blocks, exported for advanced use.
+- `ImagePickerContextProvider` — optional hook so a host can supply its own image-upload UI.
+
+`TextRenderer` is structurally typed against a small `TextRendererTheme` instead of importing `@frontlit/page-builder`, so this package stays usable on its own.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import React__default, { FC, PropsWithChildren, ReactNode } from 'react';
+import { JSONContent, Extensions } from '@tiptap/core';
+
+interface ReactEditorProps {
+    initialContent?: JSONContent | string | null;
+    editable?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+}
+
+interface EditorProps {
+    onChange: (json: JSONContent) => void;
+    showToolbar?: boolean;
+    editable?: boolean;
+    refresh?: number;
+    url?: string;
+    initialContent?: ReactEditorProps["initialContent"];
+    placeholder?: string;
+    autoFocus?: boolean;
+    imageSizeLimit?: number;
+    onError?: (...args: any[]) => void;
+    className?: string;
+    editorClassName?: string;
+    contentClassName?: string;
+    beforeContent?: React__default.ReactNode;
+}
+interface EditorType extends FC<PropsWithChildren<EditorProps>> {
+    getPlainText: (doc: JSONContent) => string;
+    emptyDoc: JSONContent;
+}
+declare const Editor: EditorType;
+
+type PickedImage = {
+    src: string;
+    alt?: string;
+};
+declare function ImagePickerContextProvider({ pickImage, children, }: {
+    pickImage: () => Promise<PickedImage | null>;
+    children: ReactNode;
+}): React.JSX.Element;
+declare function useImagePicker(): () => Promise<PickedImage | null>;
+
+declare const emptyDoc: JSONContent;
+
+interface Heading {
+    level: number;
+    text: string;
+    id: string;
+}
+declare function extractHeadings(json: JSONContent | null | undefined): Heading[];
+
+interface ExtensionOptions {
+    placeholder?: string;
+}
+declare const createExtensions: ({ placeholder, }?: ExtensionOptions) => Extensions;
+
+declare function createId(textContent: string): string;
+
+declare function extractTextFromNode(node: any): string;
+
+interface TextEditorContent {
+    type: "doc";
+    content: Record<string, unknown>[];
+}
+
+/**
+ * A loose, structural subset of a design system's theme — just enough for
+ * `TextRenderer` to apply theme-aware typography to rendered headings,
+ * paragraphs and links.
+ *
+ * This package intentionally has no dependency on `@frontlit/page-builder`
+ * (that would create a circular dependency, since page-builder depends on
+ * this package for editing/rendering). Any object shaped like this —
+ * including page-builder's full `ThemeStyle` — is structurally assignable
+ * here without either package needing to import the other's types.
+ */
+interface RendererTypography {
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+    textTransform?: string;
+    textDecoration?: string;
+    textOverflow?: string;
+}
+interface RendererLinkInteractiveStyle {
+    padding?: {
+        x?: string;
+        y?: string;
+    };
+    border?: {
+        width?: string;
+        radius?: string;
+        style?: string;
+    };
+    textShadow?: string;
+    custom?: string;
+}
+interface TextRendererTheme {
+    typography?: {
+        header1?: RendererTypography;
+        header2?: RendererTypography;
+        header3?: RendererTypography;
+        text1?: RendererTypography;
+        link?: RendererTypography;
+    };
+    interactives?: {
+        link?: RendererLinkInteractiveStyle;
+    };
+}
+
+interface TextRendererProps {
+    json: TextEditorContent;
+    className?: string;
+    theme?: TextRendererTheme;
+}
+/**
+ * Renders TipTap `TextEditorContent` JSON as static React elements — used to
+ * display rich text saved by the `Editor` (e.g. inside a block's body). When
+ * a `theme` is provided, headings/paragraphs/links pick up its typography;
+ * otherwise plain semantic HTML tags are used.
+ */
+declare function TextRenderer({ json, className, theme }: TextRendererProps): React__default.JSX.Element;
+
+/** Normalizes a plain string or an already-valid TipTap doc into `TextEditorContent`. */
+declare function normalizeTextEditorContent(json: TextEditorContent | string): TextEditorContent;
+
+/** Recursively concatenates all plain text out of a TipTap JSON content tree. */
+declare function extractTextFromTextEditorContent(content: unknown): string;
+
+declare function truncateTextEditorContent(json: TextEditorContent, characterLimit?: number): TextEditorContent;
+
+export { Editor, type EditorProps, ImagePickerContextProvider, type PickedImage, type RendererLinkInteractiveStyle, type RendererTypography, type TextEditorContent, TextRenderer, type TextRendererTheme, createExtensions, createId, emptyDoc, extractHeadings, extractTextFromNode, extractTextFromTextEditorContent, normalizeTextEditorContent, truncateTextEditorContent, useImagePicker };