https://github.com/mangoweb/plate-content-editor

https://github.com/mangoweb/plate-content-editor

Last synced: 14 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/mangoweb/plate-content-editor
• Owner: manGoweb
• Created: 2024-07-24T11:53:41.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-08-29T22:16:47.000Z (3 months ago)
• Last Synced: 2024-08-30T12:51:49.508Z (3 months ago)
• Language: TypeScript
• Homepage: https://mangoweb.github.io/plate-content-editor/
• Size: 266 KB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# App



## Requirements

- React 19 (When using npm package)

- Node.js

- pnpm

```sh

brew install pnpm

```

## Setup

### Install dependencies

```sh

pnpm i

```

## Development

### Demo

```sh

pnpm dev

```

## Usage

### Install

```npmrc

@mangoweb:registry=https://npm.pkg.github.com

//npm.pkg.github.com/:_authToken=ghp_YOUR_TOKEN

```

[Generate a new token](https://github.com/settings/tokens/new)

read:packages

```sh

pnpm i @mangoweb/plate-content-editor

```

### Contember

#### Dynamic

```tsx

import "@mangoweb/plate-content-editor/plate.css";

const PlateEditorForContember = lazy(

  () => import("@mangoweb/plate-content-editor/contember")

);

  

    

  

  Loading...}>

    

  

;

```

#### Static

```tsx

import "@mangoweb/plate-content-editor/plate.css";

import PlateEditorForContember from "@mangoweb/plate-content-editor/contember";

  

;

```

### Next

#### RSC

(Text and images would be rendered during static generation)

```tsx

"use client";

import type { PlateEditorValue } from "@mangoweb/plate-content-editor";

import "@mangoweb/plate-content-editor/plate.css";

import Plate from "@mangoweb/plate-content-editor/readonly";

type BlogContentRenderProps = {

  content: unknown;

};

export const BlogContentRender = (props: BlogContentRenderProps) => {

  const { content } = props;

  const parsed = content as PlateEditorValue;

  return ;

};

```

#### Dynamic

```tsx

"use client";

import "@mangoweb/plate-content-editor/plate.css";

const Plate = dynamic(() => import("@mangoweb/plate-content-editor/readonly"), {

  loading: () => 
Loading...
,

});


type BlogContentRenderProps = {

  content: unknown;

};

export const BlogContentRender = (props: BlogContentRenderProps) => {

  const { content } = props;

  const parsed = content as PlateEditorValue;

  return ;

};

```

### Monorepo

```sh

git clone --depth 1 https://github.com/manGoweb/plate-content-editor.git

rm -rf plate-content-editor/.git

```

Replace `@mangoweb/plate-content-editor` with your monorepo name and add package to workspace