@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

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months 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 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

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.1.0-builder-modes.2

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.1.0-builder-modes.1

3 years ago

2.1.0

3 years ago

2.1.0-builder-modes.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago