open-index/open-npm huggingface dataset:
npm package: @inkio/advanced
Description: Advanced notion-like and integration-aware extensions for Inkio
Latest version: 0.0.6

# @inkio/advanced

Notion-like and integration-heavy extensions for Inkio. Includes `@inkio/essential`.

## Includes

- slash command
- block handle
- mention
- hashtag
- wiki link
- bookmark
- comment mark and comment UI

## Exports

- `getDefaultExtensions(options?)`
- `Comment`
- `CommentPanel`
- `CommentComposer`
- `CommentThreadPopover`
- `extractMentions`
- `extractHashtags`
- `@inkio/advanced/style.css`

## Install

```bash
npm install @inkio/advanced react react-dom
```

Install this directly only if you are composing with `@inkio/core` or importing advanced exports such as `CommentPanel`. `@inkio/editor` already depends on `@inkio/advanced`.

## Usage

```tsx
import { Editor } from '@inkio/core';
import { CommentPanel, getDefaultExtensions } from '@inkio/advanced';
import '@inkio/core/minimal.css';
import '@inkio/advanced/style.css';

export function AdvancedEditor() {
  const extensions = getDefaultExtensions({
    hashtagItems: ({ query }) => [{ id: query || 'inkio', label: `#${query || 'inkio'}` }],
  });

  return (
    <>
      <Editor initialContent="<p>Hello Inkio</p>" extensions={extensions} />
      <CommentPanel editor={null} threads={[]} currentUser="You" onReply={() => {}} onResolve={() => {}} onDelete={() => {}} />
    </>
  );
}
```
npm package: @inkio/core
Description: Inkio editor foundation primitives
Latest version: 0.0.6

# @inkio/core

Low-level Inkio foundation package.

Most app developers should start with `@inkio/simple` or `@inkio/editor` instead.

## Exports

- `Editor`
- `Viewer`
- `Toolbar`
- `BubbleMenu`
- `FloatingMenu`
- `TableMenu`
- `getExtensions(options?)`
- `ImageBlock`
- `@inkio/core/icons`
- `@inkio/core/markdown`

## Install

```bash
npm install @inkio/core react react-dom
```

## Usage

```tsx
import { Editor, Viewer, getExtensions } from '@inkio/core';
import '@inkio/core/minimal.css';

export function CoreEditor() {
  return (
    <Editor
      initialContent="<p>Hello Inkio</p>"
      extensions={getExtensions({ placeholder: 'Start typing...' })}
      showToolbar
    />
  );
}
```

`Editor`는 CSR 앱에서 그대로 사용할 수 있고, Next App Router 같은 SSR 환경에서는 hard refresh 시 static 문서 HTML을 먼저 렌더한 뒤 hydration 후 interactive editor로 전환됩니다.

## Viewer ToC

```tsx
<Viewer
  content={content}
  tableOfContents={{ position: 'right', maxLevel: 3 }}
/>
```

Use `onHeadingsReady` if you want to render your own table of contents UI outside the built-in viewer layout.

`Viewer`는 static HTML 기반이라 SSR/CSR 모두에서 같은 마크업 계약으로 동작합니다.

## Markdown

```tsx
import { parseMarkdown, stringifyMarkdown } from '@inkio/core/markdown';
```

Round-trip support is guaranteed for `core + essential` nodes only.
The markdown adapter uses `remark/unified` and maps markdown directly to Inkio `JSONContent`.
npm package: @inkio/editor
Description: Opinionated notion-like entry point for Inkio
Latest version: 0.0.6

# @inkio/editor

Opinionated notion-like Inkio entry point.

## Defaults

- based on `@inkio/advanced`
- bubble menu on
- floating menu on
- toolbar off
- block handle on
- slash command on

## Install

```bash
npm install @inkio/editor react react-dom
```

Optional:

```bash
npm install @inkio/image-editor
```

Install `@inkio/advanced` separately only if app code imports advanced exports such as `CommentPanel`.

## Usage

```tsx
import { Editor, Viewer } from '@inkio/editor';
import '@inkio/editor/minimal.css';

export function EditorPage() {
  return (
    <Editor
      initialContent="<p>Hello Inkio</p>"
      defaultExtensionsOptions={{
        hashtagItems: ({ query }) => [
          { id: query || 'inkio', label: `#${query || 'inkio'}` },
        ],
      }}
      showBubbleMenu
      showFloatingMenu
    />
  );
}
```

```tsx
<Viewer
  content={content}
  tableOfContents={{ position: 'left', maxLevel: 4 }}
/>
```

Next App Router에서는 `Editor`를 client component 안에서 사용하되, hard refresh 시에도 초기 문서 HTML은 서버에서 먼저 렌더됩니다. `@inkio/image-editor` 같은 무거운 확장은 lazy component로 넘기는 구성을 권장합니다.

## Markdown

```tsx
import { parseMarkdown, stringifyMarkdown } from '@inkio/editor/markdown';
```

Markdown round-trip is guaranteed for `core + essential` nodes only.
`@inkio/editor` CSS already includes the advanced preset styles it depends on.
npm package: @inkio/image-editor
Description: Image editor UI for Inkio image blocks
Latest version: 0.0.6

# @inkio/image-editor

Optional image editing UI for Inkio `ImageBlock`.

## Install

```bash
npm install @inkio/image-editor react react-dom
```

Use this only when you wire `imageBlock.imageEditor` to `ImageEditorModal`.

## Usage

With `@inkio/editor`:

```tsx
import { Editor } from '@inkio/editor';
import { ImageEditorModal } from '@inkio/image-editor';
import '@inkio/image-editor/style.css';

export function EditorWithImages() {
  return (
    <Editor
      defaultExtensionsOptions={{
        imageBlock: {
          onUpload: async (file) => URL.createObjectURL(file),
          imageEditor: ImageEditorModal,
        },
      }}
    />
  );
}
```

With `@inkio/simple`:

```tsx
import { Editor } from '@inkio/simple';
import { ImageEditorModal } from '@inkio/image-editor';
import '@inkio/image-editor/style.css';

export function SimpleWithImages() {
  return (
    <Editor
      defaultExtensionsOptions={{
        imageBlock: {
          onUpload: async (file) => URL.createObjectURL(file),
          imageEditor: ImageEditorModal,
        },
      }}
    />
  );
}
```
npm package: @inkio/simple
Description: Classic WYSIWYG entry point for Inkio
Latest version: 0.0.6

# @inkio/simple

Classic WYSIWYG Inkio entry point.

## Defaults

- based on `@inkio/core`
- toolbar on
- bubble menu off
- floating menu off

## Install

```bash
npm install @inkio/simple react react-dom
```

## Usage

```tsx
import { Editor, Viewer } from '@inkio/simple';
import '@inkio/simple/minimal.css';

export function SimplePage() {
  return <Editor initialContent="<p>Hello Inkio</p>" />;
}
```

## Viewer ToC

```tsx
<Viewer
  content={content}
  tableOfContents
/>
```

`@inkio/simple`도 SSR 환경에서 초기 문서 HTML을 먼저 렌더하고, hydration 이후에 toolbar-first interactive editor로 이어지는 계약을 사용합니다.

## Markdown

```tsx
import { parseMarkdown, stringifyMarkdown } from '@inkio/simple/markdown';
```

The adapter is implemented in `@inkio/core/markdown` with `remark/unified` and re-exported here.
npm package: @inkkit/ink-divider
Description: A divider component for Ink
Author: Dawid Harat
Latest version: 1.0.1

# ink-divider

Divider component for [Ink 4](https://github.com/vadimdemedes/ink)

Refactored version of [Jure's ink-divider](https://github.com/JureSotosek/ink-divider)

## Install

```
$ npm install @inkkit/ink-divider
```

## Usage

```jsx
import React from "react";
import { render } from "ink";
import Divider from "@inkkit/ink-divider";

const Demo = () => {
  return <Divider title="Title" />;
};

render(<Demo />);
```

## Props

### title

Type: `string`<br>
Default: `""`

Title shown in the middle of the divider.

### width

Type: `number`<br>
Default: `50`

Width of the divider.

### padding

Type: `number`<br>
Default: `1`

Padding at the start and the end of the divider.

### titlePadding

Type: `number`<br>
Default: `1`

Padding besides the title in the middle.

### titleColor

Type: `string`<br>
Default: `"white"`

Color of the title.

Takes the same values as `<Text>` color property.

### dividerChar

Type: `string`<br>
Default: `"-"`

Char used as a divider.

### dividerColor

Type: `string`<br>
Default: `"gray"`

Color of the divider chars.

Takes the same values as `<Text>` color property.
npm package: @inkkit/ink-image
Description: Image component for Ink
Author: Dawid Harat
Latest version: 1.0.0

# ink-image

Image component for [Ink 4](https://github.com/vadimdemedes/ink)

## Install

```
$ npm install @inkkit/ink-image
```

## Usage

```jsx
import React from 'react';
import { render } from 'ink';
import Image from '@inkkit/ink-image';

const Demo = () => {
  return <Image src="image.jpg" />;
};

render(<Demo />);
```

## Props

### src

Type: `string`

Path to the image. Can be either a local path or a URL.

### width

Type: `number`

Width of the image in characters.
Leave empty to automatically detect width based on terminal size. If the value is greater than terminal width, the image will be scaled down.

### height

Type: `number`

Height of the image in characters.
Leave empty to automatically detect height based on terminal size. If the value is greater than terminal height, the image will be scaled down.

### onError

Type: `function`

Callback function called when an error occurs while loading the image.

### onLoad

Type: `function`

Callback function called when the image is loaded.
npm package: @inkkit/ink-markdown
Description: Render markdown text using Ink
Author: Cameron Hunter
Latest version: 1.0.0

# ink-markdown

This is an ESM version of [Cameron's ink-markdown](https://github.com/cameronhunter/ink-markdown)

> Render markdown text using [Ink](https://github.com/vadimdemedes/ink)

![Screenshot of ink-markdown](screenshot.png)

## Install

```
$ npm install @inkkit/ink-markdown
```

```
$ yarn add @inkkit/ink-markdown
```

## Usage

```js
import React from 'react';
import { render } from 'ink';
import Markdown from '@inkkit/ink-markdown';
import dedent from 'dedent';

const text = dedent`
  # Hello

  This is **markdown** printed in the \`terminal\`
`;

render(<Markdown>{text}</Markdown>);
```

## API

### `<Markdown>`

Props are passed as options to
[`marked-terminal`](https://github.com/mikaelbr/marked-terminal#options).

## License

MIT © [Cameron Hunter](https://cameronhunter.co.uk)
npm package: @inkkit/ink-multi-select
Description: Multi-select component for Ink
Author: Dawid Harat
Latest version: 1.0.0

# ink-multi-select

Multi-Select input component for [Ink 4](https://github.com/vadimdemedes/ink)

Refactored version of [George's ink-multi-select](https://github.com/karaggeorge/ink-multi-select)

## Install

```
$ npm install @inkkit/ink-multi-select
```

## Usage

```jsx
import React from "react";
import { render } from "ink";
import MultiSelect from "@inkkit/ink-multi-select";

const Demo = () => {
  const handleSubmit = (items) => {
    // `items` = [{ label: 'First', value: 'first' }, { label: 'Third', value: 'third' }]
  };

  const items = [
    {
      label: "First",
      value: "first",
    },
    {
      label: "Second",
      value: "second",
    },
    {
      label: "Third",
      value: "third",
    },
  ];

  return <MultiSelect items={items} onSubmit={handleSubmit} />;
};

render(<Demo />);
```

## Props

### items

Type: `array`<br>
Default: `[]`

Items to display in a list. Each item must be an object and have `label` and `value` props, it may also optionally have a `key` prop.
If no `key` prop is provided, `label` will be used as the item key.

### defaultSelected

Type: `array`<br>
Default: `[]`

List of initial selected items (this works only when `selected` is `undefined`).

### focus

Type: `boolean`<br>
Default: `true`

Listen to user's input. Useful in case there are multiple input components at the same time and input must be "routed" to a specific component.

### initialIndex

Type: `number`
Default: `0`

Index of initially-selected item in `items` array.

### onSelect

Type: `function`

Function to call when user selects an item. Item object is passed to that function as an argument.

### onUnselect

Type: `function`

Function to call when user unselects an item. Item object is passed to that function as an argument.

### onHighlight

Type: `function`

Function to call when user highlights an item. Item object is passed to that function as an argument.

### onSubmit

Type: `function`

Function to call when user submits the selected list. Array of Item objects is passed to that function as an argument.

### indicatorComponent

Type: `Component`

Custom component to override the default indicator component.

### checkboxComponent

Type: `Component`

Custom component to override the default check-box component.

### itemComponent

Type: `Component`

Custom component to override the default item component.

### limit

Type: `number`

Number of items to display."
npm package: @inkkit/ink-select-input
Description: Select input component for Ink
Author: Vadim Demedes
Latest version: 5.0.1

# ink-select-input [![test](https://github.com/vadimdemedes/ink-select-input/workflows/test/badge.svg)](https://github.com/vadimdemedes/ink-select-input/actions)

This is a modified version of [ink-select-input](https://github.com/vadimdemedes/ink-select-input)

> Select input component for [Ink](https://github.com/vadimdemedes/ink)

Looking for a version compatible with Ink 2.x? Check out [this release](https://github.com/vadimdemedes/ink-select-input/tree/v3.1.2).

## Install

```
$ npm install @inkkit/ink-select-input
```

## Usage

```jsx
import React from 'react';
import {render} from 'ink';
import SelectInput from '@inkkit/ink-select-input';

const Demo = () => {
	const handleSelect = item => {
		// `item` = { label: 'First', value: 'first' }
	};

	const items = [
		{
			label: 'First',
			value: 'first'
		},
		{
			label: 'Second',
			value: 'second'
		},
		{
			label: 'Third',
			value: 'third'
		}
	];

	return <SelectInput items={items} onSelect={handleSelect} />;
};

render(<Demo />);
```

<img src="media/demo.gif" width="508">

## Props

### items

Type: `array`<br>
Default: `[]`

Items to display in a list. Each item must be an object and have `label` and `value` props, it may also optionally have a `key` prop.
If no `key` prop is provided, `value` will be used as the item key.

### isFocused

Type: `boolean`<br>
Default: `true`

Listen to user's input. Useful in case there are multiple input components at the same time and input must be "routed" to a specific component.

### initialIndex

Type: `number`
Default: `0`

Index of initially-selected item in `items` array.

### limit

Type: `number`

Number of items to display.

### indicatorComponent

Type: `Component`

Custom component to override the default indicator component.

### itemComponent

Type: `Component`

Custom component to override the default item component.

### onSelect

Type: `function`

Function to call when user selects an item. Item object is passed to that function as an argument.

### onHighlight

Type: `function`

Function to call when user highlights an item. Item object is passed to that function as an argument.

### wrapperProps

Type: `function`

Function that should return props for wrapper of the indicator and item. Useful for spacing select components.
npm package: @inkkit/ink-table
Description: A table component for Ink.
Author: Matic Zavadlal
Latest version: 1.0.0

# ink-table

[![npm version](https://badge.fury.io/js/ink-table.svg)](https://badge.fury.io/js/ink-table)

> A table component for [Ink](https://github.com/vadimdemedes/ink).

## Install

```bash
npm install @inkkit/ink-table
```

## Usage

```jsx
import Table from '@inkkit/ink-table'

const data = [
  {
    name: 'Sosa Saunders',
    gender: 'male',
    age: 17,
    email: 'sosa.saunders@mail.com',
    phone: '+1 (809) 435-2786',
  },
  {
    name: 'Angelina Kirk',
    gender: 'female',
    age: 3,
    email: 'angelina@kirk.io',
    phone: '+1 (870) 567-3516',
  },
  {
    name: 'Bradford Rosales',
    gender: 'male',
    age: 20,
    email: 'bradfordrosales@fast.com',
    phone: '+1 (918) 573-3240',
  },
  {
    name: 'Gwen Schroeder',
    gender: 'female',
    age: 17,
    email: 'gwen@corp.xyz',
    phone: '+1 (987) 417-2062',
  },
  {
    name: 'Ellison Mann',
    gender: 'male',
    age: 5,
    email: 'ellisonmann@katakana.com',
    phone: '+1 (889) 411-2186',
  },
]

const Basic = () => <Table data={data} />

render(<Basic />)
```

<img src="media/demo.png" width="720">

## Documentation

```ts
type ScalarDict = {
  [key: string]: string | number | boolean | null | undefined
}

export type TableProps<T extends ScalarDict> = {
  /**
   * List of values (rows).
   */
  data: T[]
  /**
   * Columns that we should display in the table.
   */
  columns: (keyof T)[]
  /**
   * Cell padding.
   */
  padding: number
  /**
   * Header component.
   */
  header: (props: React.PropsWithChildren<{}>) => JSX.Element
  /**
   * Component used to render a cell in the table.
   */
  cell: (props: React.PropsWithChildren<{}>) => JSX.Element
  /**
   * Component used to render the skeleton of the table.
   */
  skeleton: (props: React.PropsWithChildren<{}>) => JSX.Element
}
```

## License

MIT © [Matic Zavadlal](http://github.com/maticzav)
npm package: @inkkit/ink-text-input
Description: Text input component for Ink
Author: Vadim Demedes
Latest version: 5.0.2

# ink-text-input

This is a modified version of [ink-text-input](https://github.com/vadimdemedes/ink-text-input)

> Text input component for [Ink](https://github.com/vadimdemedes/ink).

Looking for a version compatible with Ink 2.x? Check out [this release](https://github.com/vadimdemedes/ink-text-input/tree/v3.3.0).

## Install

```
$ npm install @inkkit/ink-text-input
```

## Usage

```jsx
import React, {useState} from 'react';
import {render, Box, Text} from 'ink';
import TextInput from '@inkkit/ink-text-input';

const SearchQuery = () => {
	const [query, setQuery] = useState('');

	return (
		<Box>
			<Box marginRight={1}>
				<Text>Enter your query:</Text>
			</Box>

			<TextInput value={query} onChange={setQuery} />
		</Box>
	);
};

render(<SearchQuery />);
```

<img src="media/demo.gif" width="556">

## Props

### value

Type: `string`

Value to display in a text input.

### placeholder

Type: `string`

Text to display when `value` is empty.

### focus

Type: `boolean` \
Default: `true`

Listen to user's input. Useful in case there are multiple input components at the same time and input must be "routed" to a specific component.

### showCursor

Type: `boolean`\
Default: `true`

Whether to show cursor and allow navigation inside text input with arrow keys.

### highlightPastedText

Type: `boolean`\
Default: `false`

Highlight pasted text.

### mask

Type: `string`

Replace all chars and mask the value. Useful for password inputs.

```jsx
<TextInput value="Hello" mask="*" />
//=> "*****"
```

### onChange

Type: `Function`

Function to call when value updates.

### onSubmit

Type: `Function`

Function to call when `Enter` is pressed, where first argument is a value of the input.

## Uncontrolled usage

This component also exposes an [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html) version, which handles `value` changes for you. To receive the final input value, use `onSubmit` prop.
Initial value can be specified via `initialValue` prop, which is supported only in `UncontrolledTextInput` component.

```jsx
import React from 'react';
import {render, Box, Text} from 'ink';
import {UncontrolledTextInput} from '@inkkit/ink-text-input';

const SearchQuery = () => {
	const handleSubmit = query => {
		// Do something with query
	};

	return (
		<Box>
			<Box marginRight={1}>
				<Text>Enter your query:</Text>
			</Box>

			<UncontrolledTextInput onSubmit={handleSubmit} />
		</Box>
	);
};

render(<SearchQuery />);
```