@tatamicks/select

A select box plugin for Document Editor.

Features

• Select values from dropdown options
• Suitable for form inputs, category selection, etc.
• Customizable options
• Background color customization support
• Supports font styles, alignment, and validation

Installation

npm install @tatamicks/select @tatamicks/core

Usage

import { SelectPlugin } from '@tatamicks/select';

// Register plugin to DocumentEditor
editor.registerPlugin(SelectPlugin);

Note: Styles are automatically injected when you import the plugin. No need to manually import CSS files.

Properties

Select-specific Properties

• options (SelectOption[]): Array of selectable options
  • label: Display name
  • value: Internal value
• defaultOption (string | undefined): Value of the default selected option
• backgroundColor (string | undefined): Background color of the select box (overrides block background color)

Inherited Properties

• placeholder (string): Placeholder text
• fontSize (Dimension): Font size
• color (string): Font color
• fontWeight (boolean): Bold text
• italic (boolean): Italic text
• justifyContent (HorizontalAlign): Horizontal alignment
• alignItems (VerticalAlign): Vertical alignment
• padding: Padding settings
• required (boolean): Required field
• pattern (string): Validation pattern

Value Type

type SelectValue = string | null;

Example

const selectBlock = {
  id: "select-1",
  kind: "select",
  props: {
    options: [
      { label: "Option 1", value: "opt1" },
      { label: "Option 2", value: "opt2" },
      { label: "Option 3", value: "opt3" },
    ],
    placeholder: "Please select",
    backgroundColor: "#f0f0f0",
    required: true,
  },
  value: null,
  // ... other block properties
};

License

MIT © 2025 yonpachi (株式会社torchi) – yatch

Links

• GitHub Repository
• Documentation
• Issues
• 株式会社torchi