Postedin Editor

Welcome to the Postedin Editor project!

Table of Contents

• Overview
• Features
• Getting Started
• Contributing

Overview

Postedin Editor is an opinionated editor for the Postedin ecosystem. It is designed to provide a seamless editing experience and ensure consistency across all our different apps. The PostedinEditor system provides a flexible, configurable editor architecture with multiple specialized variants for different use cases.

Features

• Multiple editing modes: Full-featured blog editor, medium-featured section editor, minimal comment editor, and display-only mode.
• Configurable architecture: Single base component with specialized variants for different use cases.
• TypeScript support: Comprehensive type definitions for all configurations and features.
• Modular features: Enable/disable specific formatting, blocks, media, and UI elements.
• Easy integration into any project.

Getting Started

To use Postedin Editor in your project:

1. Install the package:

   npm install @postedin/postedin-editor
   # or
   yarn add @postedin/postedin-editor

2. Import and use in your project:

   // Use specialized editors for different contexts
   import { BlogEditor, SectionEditor, CommentEditor, DisplayEditor } from 'postedin-editor';
   
   // Blog posts and articles
   <BlogEditor
   	content={blogContent}
   	onChange={setBlogContent}
   	placeholder="Write your blog post..."
   />
   
   // Page sections and content blocks
   <SectionEditor
   	content={sectionContent}
   	onChange={setSectionContent}
   	placeholder="Add section content..."
   />
   
   // Comments and short text
   <CommentEditor
   	content={commentContent}
   	onChange={setCommentContent}
   	placeholder="Add a comment..."
   />
   
   // Display published content
   <DisplayEditor content={publishedContent} />
   
   // Or use the configurable base editor
   import { PostedinEditor } from 'postedin-editor';
   
   <PostedinEditor config={{
   	features: {
   		formatting: { bold: true, italic: true },
   		blocks: { headings: [1, 2, 3] }
   	},
   	placeholder: "Custom editor..."
   }} />

Contributing

Contributions to this project are limited to the Postedin team.

1. Clone the repository:

   git clone https://github.com/postedin/postedin-editor.git
   cd postedin-editor

2. Install dependencies:

   npm install

3. Start storybook:

   npm run storybook