@scottjgilbert/lexical-blog-editor 0.1.4-beta.1 → 0.1.4

package/README.md

@@ -1,108 +1,263 @@
-# lexical-blog-editor
+# @scottjgilbert/lexical-blog-editor
 
-Prebuilt components for editing and rendering rich blog content with Lexical.
+<img alt="NPM version" src="https://img.shields.io/npm/v/@scottjgilbert/lexical-blog-editor.svg?style=for-the-badge&labelColor=000000">
+<img alt="License" src="https://img.shields.io/npm/l/@scottjgilbert/lexical-blog-editor.svg?style=for-the-badge&labelColor=000000">
+
+A feature-rich, production-ready rich text editor for blog content, built on Meta's [Lexical](https://lexical.dev/) framework. This package provides a comprehensive editing experience with extensive plugin support, custom nodes, and a full-featured toolbar.
+
+> ⚠️ **Note**: This package is currently in beta. A rendering component for displaying saved content as DOM is under active development.
 
 ## Installation
 
 ```bash
-npm install lexical-blog-editor
+npm install @scottjgilbert/lexical-blog-editor
+# or
+pnpm add @scottjgilbert/lexical-blog-editor
+# or
+yarn add @scottjgilbert/lexical-blog-editor
 ```
 
-## Peer Dependencies
+## Requirements
 
 This package requires the following peer dependencies:
 
-- `react` >= 18.0.0
-- `react-dom` >= 18.0.0
+- React 18.0.0 or higher
+- React DOM 18.0.0 or higher
+- Lexical 0.39.0 or higher
 
 ## Usage
 
-### Editor Component
-
-The Editor component provides a rich text editor powered by Lexical.
+### Basic Implementation
 
 ```tsx
-import { Editor } from 'lexical-blog-editor/editor';
-import { EditorState } from 'lexical';
+import { Editor } from "@scottjgilbert/lexical-blog-editor";
+import type { EditorState } from "lexical";
 
-function MyEditor() {
+function MyBlogEditor() {
   const handleChange = (editorState: EditorState) => {
-    // Handle editor state changes
+    // Access and serialize the editor state
     editorState.read(() => {
-      // Read the contents of the EditorState here
-      const root = $getRoot();
-      console.log(root);
+      const json = JSON.stringify(editorState.toJSON());
+      console.log("Editor content:", json);
+      // Save to your database, state management, etc.
     });
   };
 
   return (
     <Editor
       onChange={handleChange}
-      placeholder="Start writing..."
+      placeholder="Start writing your blog post..."
     />
   );
 }
 ```
 
-#### Editor Props
-
-- `onChange?: (editorState: EditorState) => void` - Callback fired when editor content changes
-- `initialContent?: string` - Initial editor content as a serialized EditorState
-- `placeholder?: string` - Placeholder text when editor is empty (default: "Enter some text...")
-- `editorState?: string` - Controlled editor state as a serialized EditorState
-
-### Viewer Component
-
-The Viewer component renders read-only rich text content.
+### With Initial Content
 
 ```tsx
-import { Viewer } from 'lexical-blog-editor/viewer';
+import { Editor } from "@scottjgilbert/lexical-blog-editor";
+import type { EditorState } from "lexical";
+
+function MyBlogEditor({ savedContent }: { savedContent?: EditorState }) {
+  const handleChange = (editorState: EditorState) => {
+    // Handle changes
+  };
 
-function MyViewer({ content }: { content: string }) {
-  return <Viewer content={content} />;
+  return (
+    <Editor
+      initialState={savedContent}
+      onChange={handleChange}
+      placeholder="Continue writing..."
+    />
+  );
 }
 ```
 
-#### Viewer Props
+## API Reference
+
+### Editor Component
+
+#### Props
 
-- `content: string` - Content to display as a serialized EditorState
+| Prop           | Type                                 | Default                | Description                                                                       |
+| -------------- | ------------------------------------ | ---------------------- | --------------------------------------------------------------------------------- |
+| `onChange`     | `(editorState: EditorState) => void` | **Required**           | Callback fired whenever the editor content changes                                |
+| `placeholder`  | `string`                             | `"Enter some text..."` | Placeholder text displayed when the editor is empty                               |
+| `initialState` | `EditorState`                        | `undefined`            | Initial editor content state. If not provided, displays a default welcome message |
 
 ## Features
 
-Both components support:
+### Rich Text Editing
+
+- **Text Formatting**: Bold, italic, underline, strikethrough, subscript, superscript, code
+- **Headings**: H1 through H6
+- **Text Alignment**: Left, center, right, justify
+- **Font Sizes**: Adjustable text size
+- **Text Color & Background**: Custom text and highlight colors
+- **Lists**: Ordered lists, unordered lists, and checklist support
+- **Quotes & Code Blocks**: Block quotes and syntax-highlighted code blocks
+- **Indentation**: Tab indentation with nesting support (up to 7 levels)
+
+### Content Blocks
+
+- **Tables**: Fully-featured tables with cell merging, resizing, and hover actions
+- **Images**: Upload and embed images with captions and resizing
+- **Embeds**: YouTube videos, Twitter/X posts, Figma designs
+- **Equations**: LaTeX/KaTeX mathematical equation support
+- **Horizontal Rules**: Visual section dividers
+- **Page Breaks**: Print-friendly page break markers
+- **Layouts**: Multi-column layouts with customizable containers
+- **Collapsible Sections**: Expandable/collapsible content blocks
+- **Date/Time**: Insert formatted date and time stamps
+
+### Interactive Elements
+
+- **Links**: Auto-detection, manual insertion, and inline editing
+- **Mentions**: @mention support with autocomplete
+- **Hashtags**: Automatic #hashtag detection
+- **Keywords**: Special keyword highlighting
+- **Emojis**: Emoji picker with search and categories
+- **Polls**: Interactive poll creation (visual component)
+
+### Advanced Features
+
+- **Markdown Shortcuts**: Type Markdown syntax for quick formatting
+- **Drag & Drop**: Drag and drop images, reorder blocks
+- **Speech to Text**: Voice input support (browser-dependent)
+- **Component Picker**: Slash commands (`/`) to quickly insert components
+- **Floating Toolbars**: Context-aware formatting toolbars
+- **Auto-linking**: Automatically converts URLs to clickable links
+- **Syntax Highlighting**: Code blocks with Shiki-powered syntax highlighting
+- **Undo/Redo**: Full history support with keyboard shortcuts
+- **Keyboard Shortcuts**: Comprehensive keyboard shortcut system
+- **Copy/Paste**: Smart paste handling with format preservation
+
+### Included Plugins
+
+<details>
+<summary>View all plugins (40+)</summary>
+
+- ActionsPlugin
+- AutoEmbedPlugin
+- AutoFocusPlugin
+- AutoLinkPlugin
+- CheckListPlugin
+- ClearEditorPlugin
+- ClickableLinkPlugin
+- CodeActionMenuPlugin
+- CodeHighlightShikiPlugin
+- CollapsiblePlugin
+- ComponentPickerPlugin
+- DateTimePlugin
+- DragDropPastePlugin
+- DraggableBlockPlugin
+- EmojiPickerPlugin
+- EmojisPlugin
+- EquationsPlugin
+- FigmaPlugin
+- FloatingLinkEditorPlugin
+- FloatingTextFormatToolbarPlugin
+- HashtagPlugin
+- HistoryPlugin
+- HorizontalRulePlugin
+- ImagesPlugin
+- KeywordsPlugin
+- LayoutPlugin
+- LinkPlugin
+- ListPlugin
+- MarkdownShortcutPlugin
+- MentionsPlugin
+- PageBreakPlugin
+- RichTextPlugin
+- ShortcutsPlugin
+- SpeechToTextPlugin
+- TabFocusPlugin
+- TabIndentationPlugin
+- TablePlugin (with cell resizing, merging, and hover actions)
+- ToolbarPlugin
+- TwitterPlugin
+- YouTubePlugin
+
+</details>
+
+### Custom Nodes
+
+The editor includes over 25 custom node types:
+
+- AutoLinkNode, LinkNode
+- CodeNode, CodeHighlightNode
+- CollapsibleContainerNode, CollapsibleContentNode, CollapsibleTitleNode
+- DateTimeNode
+- EmojiNode
+- EquationNode
+- FigmaNode
+- HashtagNode
+- HeadingNode, QuoteNode
+- HorizontalRuleNode
+- ImageNode
+- KeywordNode
+- LayoutContainerNode, LayoutItemNode
+- ListNode, ListItemNode
+- MarkNode
+- MentionNode
+- OverflowNode
+- PageBreakNode
+- PollNode
+- SpecialTextNode
+- TableNode, TableCellNode, TableRowNode
+- TweetNode
+- YouTubeNode
 
-- Rich text formatting (bold, italic, underline, strikethrough, code)
-- Headings (h1-h6)
-- Lists (ordered and unordered)
-- Quotes
-- Links
-- Code blocks
+## Styling
+
+The package includes built-in CSS that will be automatically imported. The editor uses CSS classes that can be customized:
+
+```tsx
+// The editor includes its own styles
+import { Editor } from "@scottjgilbert/lexical-blog-editor";
+// Styles are automatically applied
+```
+
+### Key CSS Classes
+
+- `.full-blog-editor-wrapper` - Outermost wrapper
+- `.editor-container` - Main editor container
+- `.editor-scroller` - Scrollable editor area
+- `.editor` - ContentEditable wrapper
+- Various node-specific classes for custom styling
+
+You can override these classes in your own CSS to customize the appearance.
 
 ## TypeScript Support
 
-This package includes TypeScript type definitions out of the box. Import types from the respective component paths:
+This package is written in TypeScript and includes full type definitions. All exports are typed:
 
 ```tsx
-import type { EditorProps } from 'lexical-blog-editor/editor';
-import type { ViewerProps } from 'lexical-blog-editor/viewer';
+import type { EditorProps } from "@scottjgilbert/lexical-blog-editor";
+import type { EditorState } from "@scottjgilbert/lexical-blog-editor";
 ```
 
-## Styling
+## Roadmap
 
-The components include basic CSS class names that you can style:
+- [ ] **Viewer Component**: Dedicated component for rendering saved EditorState as read-only DOM content
+- [ ] **Server-Side Rendering**: Enhanced SSR support
 
-### Editor Classes
-- `.editor-container` - Main editor container
-- `.editor-input` - ContentEditable element
-- `.editor-placeholder` - Placeholder text
-- `.editor-paragraph`, `.editor-heading-h1`, etc. - Text styling classes
+## Browser Support
 
-### Viewer Classes
-- `.viewer-container` - Main viewer container
-- `.viewer-content` - Content display element
-- `.viewer-paragraph`, `.viewer-heading-h1`, etc. - Text styling classes
+The editor supports all modern browsers:
 
-## License
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+
+## Contributing
 
-ISC
+This is an open-source project. Contributions, issues, and feature requests are welcome!
+
+## Acknowledgments
+
+Built on top of Meta's [Lexical](https://lexical.dev/) framework. This package is a wrapper of a modified version of the Lexical Playground editor, tailored specifically for blog content creation.
+
+## License
 
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scottjgilbert/lexical-blog-editor",
-  "version": "0.1.4-beta.1",
+  "version": "0.1.4",
   "description": "Prebuilt components for editing and rendering rich blog content with Lexical. Modified wrapper of the Lexical Playground editor.",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",