@zipify/wysiwyg NPM

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 git@github.com: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

@floating-ui/vue @tiptap/core @tiptap/extension-document @tiptap/extension-heading @tiptap/extension-history @tiptap/extension-link @tiptap/extension-list-item @tiptap/extension-paragraph @tiptap/extension-text @tiptap/pm @tiptap/vue-3 commander jsdom lodash

@everything-registry/sub-chunk-1077 @infinitebrahmanuniverse/nolb-_zi

16 hours ago

24 days ago

24 days ago

24 days ago

1 month ago

2 months ago

2 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

11 months ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.1.0-builder-modes.2

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.1.0-builder-modes.1

2 years ago

2.1.0

2 years ago

2.1.0-builder-modes.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago