ZipifyWysiwyg


Zipify modification of TipTap text editor

Vue Support

- For vue 2.x use wysiwyg v3.x
- For vue 3.x use wysiwyg v4.x

Usage

1. Install library & dependencies
``shell

if npm

npm install @zipify/wysiwyg

if yarn

yarn add @zipify/wysiwyg
`
2. Use editor

For more details see available options and example app
`vue


`

Options

$3

| Name | Required? | Default Value | Note |
|:--------------------:|:---------:|:-------------:|----------------------------------------------------------------|
| value | true | - | |
| presets | true | - | Array of Style-Presets |
| default-preset-id | true | - | Id of any preset |
| base-preset-class | true | - | Base class of preset |
| make-preset-variable | true | - | Generates name of preset variable |
| fonts | true | - | Array of fonts |
| device | false | 'desktop' | Active device type. can be 'mobile', 'tablet' or 'desktop' |
| favorite-colors | false | [] | List of favorite colors in color picker |
| toolbar-offsets | false | [0, 8] | Offset between toolbar and content |
| base-list-class | false | 'zw-list--' | Base list class |

$3

Represents available font family. Required interface

`typescript
interface StylePreset {
id: string | number;
name: string;
hidden: boolean;
node?: PresetNode;
fallbackClass?: string;
common: CommonSettings;
desktop: DeviceSettings;
tablet: DeviceSettings;
mobile: DeviceSettings;
}

interface PresetNode {
type: 'heading';
level: 1 | 2 | 3 | 4;
}

interface CommonSettings {
font_family: string;
font_weight: string;
color: string;
font_style: 'italic' | 'normal';
text_decoration: 'none' | 'underline';
}

interface DeviceSettings {
alignment: 'left' | 'center' | 'right' | 'justify';
line_height: string;
font_size: string;
}

const example: StylePreset = {
id: 'h1',
name: 'H1',
node: {
type: 'heading',
level: 1
},
desktop: {
alignment: 'left',
line_height: '1.2',
font_size: '40px'
},
common: {
font_family: 'Lato',
font_weight: '700',
color: '#262626',
font_style: 'normal',
text_decoration: 'none'
},
tablet: {
alignment: 'left',
line_height: '1.2',
font_size: '40px'
},
mobile: {
alignment: 'left',
line_height: '1.2',
font_size: '28px'
}
}
`

$3


Variable name generator uses follow iterface
`typescript
const Device = 'common' | 'mobile' | 'tablet' | 'desktop'

interface VariableGeneratorOptions {
preset: StylePreset;
device: Device;
property: string;
}

type GeneratePresetVariable = (options: VariableGeneratorOptions) => string;
`

$3


Represents available font family. Required interface
`typescript
interface Font {
name: string;
category: string;
styles: string[];
}

const exmaple: Font = {
name: 'Roboto',
styles: ['300', '300i', '400', '400i', '700', '700i'],
category: 'Regular'
}
`




Contribute


1. Clone repository
`shell
git clone git@github.com:ZipifyApps/ZipifyWysiwyg.git
`
2. Install dependencies
`shell
npm install
`
3. Open example project
`shell
npm run example:start

Will be available on http://localhost:7777

``
4. Create new branch
5. Add changes & tests
6. Open pull request