@zipify/wysiwyg

ZipifyWysiwyg

Zipify modification of TipTap text editor

Usage

1. Install library & dependencies

# if npm npm install @zipify/wysiwyg # if yarn yarn add @zipify/wysiwyg

1. Use editor

For more details see available options and example app

<template> <Wysiwyg v-model="content" :fonts="fonts" :presets="presets" :make-preset-variable="$options.makePresetVariable" default-preset-id="regular-1" /> </template> <script> import { Wysiwyg } from '@zipify/wysiwyg'; export default { components: { Wysiwyg }, makePresetVariable: ({ preset, device, property }) => { return `--${preset.id}-${device}-${property}`; }, data: () => ({ content: { type: 'doc', content: [...] }, presets: [...], fonts: [...] }) } </script>

Options

Props

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

Style Preset

Represents available font family. Required interface

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' } }

Generate Preset Variable

Variable name generator uses follow iterface

const Device = 'common' | 'mobile' | 'tablet' | 'desktop' interface VariableGeneratorOptions { preset: StylePreset; device: Device; property: string; } type GeneratePresetVariable = (options: VariableGeneratorOptions) => string;

Font

Represents available font family. Required interface

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

git clone git@github.com:ZipifyApps/ZipifyWysiwyg.git

1. Install dependencies

npm install

1. Open example project

npm run example:start # Will be available on http://localhost:7777

1. Create new branch
2. Add changes & tests
3. Open pull request