open-index/open-npm huggingface dataset:
npm package: @open-dy/tt-miniprogram-plus
Description: 字节小程序组件扩展包
Latest version: 1.0.1

## 字节小程序组件扩展包

组件扩展包是对小程序常用组件的扩展与补充，正在持续补充中。

## 开始使用

```
npm install @open-dy/tt-miniprogram-plus
```

在需要导入组件的页面/组件的json文件中配置`usingComponents`

```
{
    "usingComponents": {
        "row":"ext://@open-dy/tt-miniprogram-plus/row",
        "col":"ext://@open-dy/tt-miniprogram-plus/col"
    }
}
```

在ttml中正常使用组件

```
<row>
    <col></col>
    <col></col>
</row>
```

更多关于扩展组件的介绍： [详情](https%3A%2F%2Fdeveloper.open-douyin.com%2Fdocs%2Fresource%2Fzh-CN%2Fmini-app%2Fdevelop%2Fcomponent%2Foverview)
npm package: @open-e/oe-coordinator
Description: This module is used to detect mouse movement on the border of HTMLElement. Useful usecase is to enable resize event in `div` element when mouse is on the border of it.
Author: Lam Nguyen
Latest version: 1.0.18

# Open Editor - Coordinator

This module is used to detect mouse movement on the border of HTMLElement. Useful usecase is to enable resize event in `div` element when mouse is on the border of it. 

## How to use

```
Step 1: npm install @open-e/oe-coordinator
Step 2: import package
Step 3: Setting border css property to targeted HTMLElement
```

### 1. Detect on border of HTMLElement

__Example__
```javascript
import { Component, ElementRef, OnInit } from "@angular/core";
import { Observable, of } from  "rxjs";
import { PublicAPI } from "@open-e/oe-coordinator";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  title = "border-tester";
  private _coordinateService: PublicAPI.CoordinateComponent;

  constructor(private _ref: ElementRef) {}

  ngOnInit() {
    this._coordinateService = new PublicAPI.CoordinateComponent(
      document.querySelector('.container')
    );
  }

  onBorder($event) {
    console.log("on Border", $event.target, 'onBorder', this._coordinateService.onBorder());
    console.log ("onDragStartTest", this._coordinateService.onDragStart());
  }

  onMouseOver($event) {
    console.log("on Border", $event.target, 'onBorder', this._coordinateService.onBorder());
    console.log ("onDragStartTest", this._coordinateService.onDragStart());
  }
}
```

### 2. Trigger Dragging Menu


__Step 1: Import Module__
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { EngineModule  as EventEffectModule } from "@open-e/oe-coordinator";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    EventEffectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

__Step 2: Using in your component__
```javascript
import { Component} from "@angular/core";

@Component({
  selector: "app-root",
  template: `<div horizonDrag min="-200" max="500" 
             class="container"></div>`,
  styleUrls: ["./app.component.scss"]
})
export class AppComponent{
}

```

### Trigger Zoom Effects 

```javascript
<div zoom-editor maxScale='4' minScale='0.5' accumulativeVal='0.1'></div>
```
npm package: @open-editor/react
Description: Add a _debugSource prop to all Elements
Author: zjxxxxxxxxx
Latest version: 1.0.0-beta.3

# @open-editor/react

Add a \_debugSource prop to all Elements.

- 🌈 Supports `React15+`, `Nextjs`.
- 🪐 Support add to `<Component/>`.
- ✨ JSX support in `.jsx`, `.tsx`.
- 😃 Supports `Vite`, `Webpack`, `create-react-app`, `Rollup`.

> For development only

---

before

```tsx
// src/App.tsx
export default function App() {
  return <div>hello word</div>;
}
```

after

```tsx
// src/App.tsx
export default function App() {
  return <div _debugSource={{ file: 'src/App.tsx', line: 3, column: 9 }}>hello word</div>;
}
```

## Install

```bash
npm i @open-editor/react -D
```

## Plugins

You need to make sure that `openEditorReact` is executed before jsx compiles the plugin for execution.

<details>
<summary>Vite</summary><br>

```ts
// vite.config.ts
import openEditorReact from '@open-editor/react/vite';

export default defineConfig({
  plugins: [
    openEditorReact({
      /* options */
    }),
    // other plugins
  ],
});
```

<br></details>

<details>
<summary>Rollup</summary><br>

```ts
// rollup.config.js
import openEditorReact from '@open-editor/react/rollup';

export default {
  plugins: [
    openEditorReact({
      /* options */
    }),
    // other plugins
  ],
};
```

<br></details>

<details>
<summary>Webpack</summary><br>

```ts
// webpack.config.js
module.exports = {
  plugins: [
    require('@open-editor/react/webpack')({
      /* options */
    }),
    // other plugins
  ],
};
```

<br></details>

<details>
<summary>Nextjs</summary><br>

```ts
// next.config.js
module.exports = {
  webpack(config, { isServer }) {
    if (!isServer) {
      config.plugins.push(
        require('@open-editor/react/webpack')({
          /* options */
        }),
      );
    }
    return config;
  },
};
```

<br></details>

## Configuration

The following show the default values of the configuration

```ts
export interface Options {
  /**
   * 源码根路径 | Source root path
   * @default process.cwd()
   */
  rootDir?: string;
  /**
   * 是否生成 sourceMap | Generate sourceMap
   * @default false
   */
  sourceMap?: boolean;
  /**
   * 包含的文件 | Files to include
   * @default /\.(jsx|tsx)$/
   */
  include?: string | RegExp | (string | RegExp)[];
  /**
   * 排除的文件 | Files to exclude
   * @default /\/node_modules\//
   */
  exclude?: string | RegExp | (string | RegExp)[];
}
```
npm package: @open-editor/vue
Description: Add a _debugSource prop to all Elements
Author: zjxxxxxxxxx
Latest version: 1.0.0-beta.3

# @open-editor/vue

Add a \_debugSource prop to all Elements.

- 🌈 Supports `Vue2`, `Vue3`, `Nuxt`.
- 🪐 Support add to `<Component/>`.
- ✨ JSX support in `.vue`, `.jsx`, `.tsx`.
- 😃 Supports `Vite`, `Webpack`, `Vue CLI`, `Rollup`.

> For development only

---

## SFC

before

```html
<!-- src/App.vue -->
<template>
  <div>hello word</div>
</template>
```

after

```html
<!-- src/App.vue -->
<template>
  <div :_debugSource='{ "file": "src/App.vue", "line": 3, "column": 3 }'>hello word</div>
</template>
```

---

## JSX

before

```tsx
// src/App.tsx
export default function App() {
  return <div>hello word</div>;
}
```

after

```tsx
// src/App.tsx
export default function App() {
  return <div _debugSource={{ file: 'src/App.tsx', line: 3, column: 9 }}>hello word</div>;
}
```

## Install

```bash
npm i @open-editor/vue -D
```

## Plugins

You need to make sure that `openEditorVue` is executed before vue compiles the plugin for execution.

<details>
<summary>Vite</summary><br>

```ts
// vite.config.ts
import openEditorVue from '@open-editor/vue/vite';

export default defineConfig({
  plugins: [
    openEditorVue({
      /* options */
    }),
    // other plugins
  ],
});
```

<br></details>

<details>
<summary>Rollup</summary><br>

```ts
// rollup.config.js
import openEditorVue from '@open-editor/vue/rollup';

export default {
  plugins: [
    openEditorVue({
      /* options */
    }),
    // other plugins
  ],
};
```

<br></details>

<details>
<summary>Webpack</summary><br>

```ts
// webpack.config.js
module.exports = {
  plugins: [
    require('@open-editor/vue/webpack')({
      /* options */
    }),
    // other plugins
  ],
};
```

<br></details>

<details>
<summary>Nuxt</summary><br>

```ts
// nuxt.config.js
import openEditorVue from '@open-editor/vue/vite';

export default defineNuxtConfig({
  vite: {
    plugins: [
      openEditorVue({
        /* options */
      }),
      // other plugins
    ],
  },
});
```

<br></details>

## Configuration

The following show the default values of the configuration

```ts
export interface Options {
  /**
   * 源码根路径 | Source root path
   * @default process.cwd()
   */
  rootDir?: string;
  /**
   * 是否生成 sourceMap | Generate sourceMap
   * @default false
   */
  sourceMap?: boolean;
  /**
   * 包含的文件 | Files to include
   * @default /\.(vue|jsx|tsx)$/
   */
  include?: string | RegExp | (string | RegExp)[];
  /**
   * 排除的文件 | Files to exclude
   * @default /\/node_modules\//
   */
  exclude?: string | RegExp | (string | RegExp)[];
}
```
npm package: @open-egretta/lexical-export-docx
Description: Export Lexical editor content to .docx format
Latest version: 0.0.6

# @open-egretta/lexical-export-docx

Export [Lexical](https://lexical.dev/) editor content to `.docx` format.

## Installation

```bash
npm install @open-egretta/lexical-export-docx
```

Requires `lexical >= 0.41.0` as a peer dependency.

## Usage

### Inside a React component

```ts
import { exportDocx } from "@open-egretta/lexical-export-docx";

// editor is a LexicalEditor instance
const blob = await exportDocx(editor);

const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "document.docx";
a.click();
URL.revokeObjectURL(url);
```

### From JSON (SSR / Node.js)

```ts
import { exportDocxFromJSON } from "@open-egretta/lexical-export-docx";
import type { SerializedEditorState } from "lexical";

const json: SerializedEditorState = {
  /* ... */
};
const blob = await exportDocxFromJSON(json);
```

## API

### `exportDocx(editor: LexicalEditor): Promise<Blob>`

Reads the current editor state and returns a `.docx` `Blob`. Use this inside a React component where you have access to the `LexicalEditor` instance.

### `exportDocxFromJSON(json: SerializedEditorState): Promise<Blob>`

Converts a serialized editor state directly to a `.docx` `Blob`. Has zero dependency on the Lexical runtime — suitable for SSR, testing, and Node.js environments.

## Roadmap

### Nodes

- [x] Paragraph
- [x] Heading (h1–h6)
- [x] Text (bold, italic, underline, strikethrough, subscript, superscript, highlight)
- [x] List (bullet, numbered)
- [x] Link (hyperlink)
- [x] Table (header rows, col/row span)
- [x] Horizontal rule
- [x] Page break
- [ ] Image
- [ ] Code block

### Styling

- [x] Text formatting (bitmask: bold, italic, underline, strikethrough, subscript, superscript, highlight)
- [x] Block alignment (left, center, right, justify)
- [x] Block indent
- [ ] Inline style (font color, font size, font family, background color)
- [ ] Table styling (cell background, borders, padding)
- [ ] Document defaults (default font, page margins)

## License

MIT
npm package: @open-egretta/lexical-text-editor
Description: Ready-to-use React rich text editor powered by Lexical
Latest version: 0.0.1

# Lexical Text Editor

一個基於 Lexical 的輕量級 React 富文本編輯器套件。

> ⚠️ **開發中警告**
> 此專案目前仍在積極開發中，API 可能會有變動，不建議用於正式環境。

## 安裝

```bash
npm install @open-egretta/lexical-text-editor
```

## 使用方式

### 基本使用

```tsx
import { LexicalEditor } from "@open-egretta/lexical-text-editor";
import type { LexicalEditorRef } from "@open-egretta/lexical-text-editor";
import { useRef } from "react";

function App() {
  const editorRef = useRef<LexicalEditorRef>(null);

  const handleSave = () => {
    if (editorRef.current) {
      const json = editorRef.current.getJSON();
      const text = editorRef.current.getText();
      console.log("JSON 格式:", json);
      console.log("純文字:", text);
    }
  };

  return (
    <div>
      <LexicalEditor ref={editorRef} placeholder="開始輸入..." />
      <button onClick={handleSave}>儲存內容</button>
    </div>
  );
}
```

### 載入已儲存的內容

```tsx
import { LexicalEditor } from "@open-egretta/lexical-text-editor";

function App() {
  const savedContent = '{"root":{"children":[...]}}'; // 之前儲存的 JSON

  return <LexicalEditor initialContent={savedContent} />;
}
```

## Props

| 參數             | 類型       | 預設值          | 說明                          |
| ---------------- | ---------- | --------------- | ----------------------------- |
| `placeholder`    | `string`   | `'開始輸入...'` | 編輯器佔位文字                |
| `initialContent` | `string`   | -               | 初始內容 (JSON 格式)          |
| `customIcons`    | `IconSet`  | -               | 自訂工具列圖示                |
| `ref`            | `React.Ref`| -               | 用於存取編輯器方法的 ref 物件 |

## Ref 方法

透過 `ref` 可以存取以下方法:

| 方法                      | 回傳值   | 說明                         |
| ------------------------- | -------- | ---------------------------- |
| `getJSON()`               | `string` | 取得編輯器內容的 JSON 字串   |
| `getText()`               | `string` | 取得編輯器的純文字內容       |
| `setContent(json: string)`| `void`   | 設定編輯器內容 (JSON 格式)   |

## 開發

```bash
# 安裝依賴
npm install

# 打包套件
npm run build

# 執行範例
npm run dev:example
```

## License

MIT
npm package: @open-email/editor
Description: Open-source visual email editor built on React Email — shadcn-style customizable components
Author: Meer Tarbani
Latest version: 0.1.51

# @open-email/editor

The open-source visual email editor for modern React applications.

## Features

- 🎨 **Visual Builder**: Drag-and-drop interface
- ⚛️ **React Email**: Built on top of React Email components
- 📱 **Responsive**: Mobile-friendly email templates
- 🔧 **Customizable**: Extensible component registry
- 📤 **Export**: HTML, JSON, and React code export
- **Variables**: Insert `{{variableName}}` in content with unique keys and fallbacks; resolve at render time

## Installation

```bash
npm install @open-email/editor
# or
yarn add @open-email/editor
# or
pnpm add @open-email/editor
```

## Usage

```tsx
import { EmailEditor, EditorProvider } from "@open-email/editor";
import "@open-email/editor/styles.css";

export default function MyEditor() {
  return (
    <EditorProvider>
      <EmailEditor />
    </EditorProvider>
  );
}
```

## Variables

Templates can use **variables** so content is filled at render time. Each variable has a unique key and a **fallback**; if no value is provided when rendering, the fallback is used.

- **Syntax**: `{{variableName}}` in text, heading, link, or button content.
- **Document**: Define variables on the document with fallbacks:
  ```ts
  document.variables = {
    userName: { fallback: "there" },
    companyName: { fallback: "Open Email" },
  };
  ```
- **Rendering**: Pass values when generating HTML so variables are replaced; missing keys use the fallback.
  ```ts
  import { renderToHTML } from "@open-email/editor";

  const html = await renderToHTML(document, {
    userName: "Alex",
    companyName: "Acme Inc",
  });
  ```
- **Editor**: When editing text/heading/link/button components, use the "Insert variable" combobox to search existing variables or create new ones inline. Variables are inserted as `{{name}}` in your content.
- **Hook**: Access variables programmatically:
  ```ts
  import { useVariables } from "@open-email/editor";
  
  function MyComponent() {
    const variables = useVariables(); // Record<string, { fallback: string }>
    // Use variables to build UI, validate, etc.
  }
  ```

## Documentation

For full documentation, visit [our docs](https://open-email.mintlify.app) (or your hosted docs URL).

## License

MIT