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

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

2. 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 [email protected]:ZipifyApps/ZipifyWysiwyg.git

2. Install dependencies

npm install

3. Open example project

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

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