@zipify/wysiwyg

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

• Install library & dependencies

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

• 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

• Clone repository

git clone [e-mail]:ZipifyApps/ZipifyWysiwyg.git

• Install dependencies

npm install

• Open example project

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

• Create new branch
• Add changes & tests
• Open pull request