Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

@zipify/wysiwyg

Package Overview
Dependencies
15
Maintainers
1
Versions
217
Issues
File Explorer

Advanced tools

@zipify/wysiwyg

Zipify modification of TipTap text editor

    3.3.1latest
    Github

Version published
Maintainers
1
Weekly downloads
454
decreased by-24.21%

Weekly downloads

Readme

Source

ZipifyWysiwyg

npm Downloads

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

NameRequired?Default ValueNote
valuetrue-
presetstrue-Array of Style-Presets
default-preset-idtrue-Id of any preset
base-preset-classtrue-Base class of preset
make-preset-variabletrue-Generates name of preset variable
fontstrue-Array of fonts
devicefalse'desktop'Active device type. can be 'mobile', 'tablet' or 'desktop'
favorite-colorsfalse[]List of favorite colors in color picker
toolbar-offsetsfalse[0, 8]Offset between toolbar and content
base-list-classfalse'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

FAQs

Last updated on 15 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc