open-index/open-npm huggingface dataset:
npm package: @globalpress/lantern
Description: A modern WYSIWYG rich-text editor using tiptap for Vue.js. Built with TypeScript and featuring a beautiful UI powered by shadcn.
Latest version: 0.0.79

# Echo Editor

A modern WYSIWYG rich-text editor base on [tiptap](https://tiptap.dev) uses [shadcn-vue](https://www.shadcn-vue.com/) components.

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
[![](https://img.shields.io/npm/v/echo-editor.svg?label=version)](https://www.npmjs.com/package/echo-editor)
[![](https://img.shields.io/npm/dependency-version/echo-editor/peer/vue?color=vue)](https://www.npmjs.com/package/echo-editor)

English | [中文](./README.zh-CN.md)

![App Screenshot](./screenshot/screenshot.png)

## Demo

[Demo](https://echo-editor.jzcloud.site/)

## Features

- Use [shadcn-vue](https://www.shadcn-vue.com/) components
- Markdown support
- TypeScript support
- I18n support(`en`, `zhHans`)
- Create your own extensions
- Tailwind CSS support

## Installation

```bash
  npm install echo-editor
  pnpm install echo-editor
  yarn add echo-editor
```

## Usage

```
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import EchoEditor from 'echo-editor'
import 'echo-editor/style.css'

const app = createApp(App)

app.use(EchoEditor)

app.mount('#app')

```

```
// App.vue
<script setup>
import {
  BaseKit,
} from 'echo-editor';

const extensions = [
  BaseKit.configure({
    placeholder: {
      placeholder: '请输入...',
    },
})]
</script>

<template>
<echo-editor
    :extensions="extensions"
/>
</template>
```

## Run Locally

Clone the project

```bash
  git clone https://github.com/Seedsa/echo-editor.git
```

Go to the project directory

```bash
  cd echo-editor
```

Install dependencies

```bash
  pnpm install
```

Start the Demo server

```bash
  npm run build:lib
  npm run dev
```

## Related

Here are some related projects

[shadcn-vue](https://www.shadcn-vue.com/)

[tiptap](https://tiptap.dev)

[iconify](https://icon-sets.iconify.design)

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @globalswapx/uikit
Description: Set of UI components for GlobalSwap projects
Latest version: 2.0.1

# GlobalSwap UIkit

[![Version](https://img.shields.io/npm/v/@globalswapx/uikit)](https://www.npmjs.com/package/@globalswapx/uikit) [![Size](https://img.shields.io/bundlephobia/min/@globalswapx/uikit)](https://www.npmjs.com/package/@globalswapx/uikit)

GlobalSwap UIkit is a set of React components and hooks used to build pages on GlobalSwap's apps.

It also contains a theme file for dark and light mode.

## Install

`yarn add @globalswapx/uikit`

## npm

https://www.npmjs.com/package/@globalswapx/uikit

## Setup

### Theme

Before using Globalswap UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@globalswapx/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@globalswapx/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://globalswap.github.io/globalswap-uikit/)