npm package: @gulibs/prosemirror-schema-color-span
Description: Prosemirror插件，增加颜色选择器功能.
Author: HectorGu
Latest version: 1.0.6

# prosemirror-schema-color-span

> Prosemirror插件，增加颜色选择器功能.

[![NPM](https://img.shields.io/npm/v/@gulibs/prosemirror-schema-color-span.svg)](https://www.npmjs.com/package/@gulibs/prosemirror-schema-color-span) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @gulibs/prosemirror-schema-color-span
```

or

```bash
yarn add @gulibs/prosemirror-schema-color-span
```

## Usage

menus.tsx

`EditorToobar.ColorSelector`内置颜色选择器

```tsx
import { setColorMark } from '@gulibs/prosemirror-schema-color-span';
const menus = {
    colorSettings: {
        fontColor: {
            tooltips: {
                title: '字体颜色',
                placement: 'bottom'
            },
            color: Color.create({
                hex: ''
            }),
            storageKey: 'fontColor',
            runColor: (color) => {
                return setColorMark(schema.marks.colorSpan, { fontColor: color });
            },
            colors: createFromColors([
                { hex: "#222222", border: false, reset: true }, "#505050", "#666666", "#999999", "#CACACA", "#D8D8D8", "#E8E8E8", "#F2F2F2", "#F8F8F8", { hex: "#FFFFFF", border: true },
                "#F04142", "#EB28BD", "#8F2BFF", "#1A74FF", "#00ABAB", "#00AA54", "#70B500", "#FFBA12", "#FF7528", "#996D39",
                "#FFD1D1", "#FFBAEF", "#E0C4FF", "#C1E1F7", "#C7F2F2", "#C2EDD8", "#DEF7B5", "#FFEBBA", "#FFD8C2", "#F5D8B6",
                "#FF8585", "#FF87E3", "#C087FF", "#599AFF", "#5ED1D1", "#69CF9C", "#ACDE5B", "#FFD05E", "#FFA775", "#C79254",
                "#FF5E5E", "#F54CCD", "#AE66FF", "#3D89FF", "#39C4C4", "#3BBF7D", "#8ECC29", "#FFC740", "#FF8E4F", "#C0833B",
                "#B83232", "#B31E90", "#641EB3", "#1356BD", "#008585", "#008542", "#508200", "#CC950E", "#B3521C", "#815A2C",
                "#7A2122", "#75145E", "#4B1785", "#0E408C", "#005C5C", "#005E2F", "#314F00", "#856109", "#662F10", "#634119"
            ]),
            menuIconRender: (color) => <FontColorSVG color={color} />
        },
        bgColorSettings: {
            tooltips: {
                title: '背景颜色',
                placement: 'bottom'
            },
            storageKey: 'bgColor',
            color: Color.create({
                hex: ''
            }),
            runColor: (color) => {
                return setColorMark(schema.marks.backgroundColorSpan, { bgColor: color });
            },
            colors: createFromColors([
                "#222222", "#505050", "#666666", "#999999", "#CACACA", "#D8D8D8", "#E8E8E8", "#F2F2F2", "#F8F8F8", { hex: "#FFFFFF", border: true, reset: true },
                "#f04142", "#EB28BD", "#8F2BFF", "#1A74FF", "#00ABAB", "#00AA54", "#70B500", "#FFBA12", "#FF7528", "#996D39",
                "#FFD1D1", "#FFBAEF", "#E0C4FF", "#C1E1F7", "#C7F2F2", "#C2EDD8", "#DEF7B5", "#FFEBBA", "#FFD8C2", "#F5D8B6",
                "#FF8585", "#FF87E3", "#C087FF", "#599AFF", "#5ED1D1", "#69CF9C", "#ACDE5B", "#FFD05E", "#FFA775", "#C79254",
                "#FF5E5E", "#F54CCD", "#AE66FF", "#3D89FF", "#39C4C4", "#3BBF7D", "#8ECC29", "#FFC740", "#FF8E4F", "#C0833B",
                "#B83232", "#B31E90", "#641EB3", "#1356BD", "#008585", "#008542", "#508200", "#CC950E", "#B3521C", "#815A2C",
                "#7A2122", "#75145E", "#4B1785", "#0E408C", "#005C5C", "#005E2F", "#314F00", "#856109", "#662F10", "#634119"
            ]),
            menuIconRender: (color) => <MarkPenSVG color={color} />
        }
    },
}
```

marks.ts

```ts
import { marks } from 'prosemirror-schema-basic';
import { colorSpan, backgroundColorSpan } from '@gulibs/prosemirror-schema-color-span';
export default {
    ...marks,
    colorSpan,
    backgroundColorSpan,
    ...
}
```

## License

MIT © [AnizGu](https://github.com/AnizGu)