@zipify/wysiwyg 1.0.0-dev.1

package/example/ExampleApp.vue

@@ -0,0 +1,136 @@
+<template>
+    <div>
+        <select class="zw-device-switcher" v-model="device">
+            <option value="desktop">
+                Desktop
+            </option>
+            <option value="tablet">
+                Tablet
+            </option>
+            <option value="mobile">
+                Mobile
+            </option>
+        </select>
+
+        <span>Deployed at {{ updatedAt }}</span>
+
+        <Wysiwyg
+            v-model="content"
+            base-list-class="zw-list--"
+            default-preset-id="regular-1"
+            ref="wswgRef"
+            :fonts="fonts"
+            :presets="presets"
+            :make-preset-variable="$options.makePresetVariable"
+            :favorite-colors="favoriteColors"
+            :device="device"
+            @updateFavoriteColors="updateFavoriteColors"
+        />
+        <pre class="zw-content-structure" v-html="structurePreview" />
+    </div>
+</template>
+
+<script>
+import { computed, onMounted, ref } from '@vue/composition-api';
+import { Wysiwyg } from '../lib';
+import { FONTS } from './fonts';
+import { PRESETS, renderPresetVariable } from './presets';
+
+export default {
+    name: 'ExampleApp',
+
+    makePresetVariable: renderPresetVariable,
+
+    components: {
+        Wysiwyg
+    },
+
+    setup() {
+        const wswgRef = ref(null);
+        const content = ref({
+            type: 'doc',
+            content: [
+                {
+                    type: 'paragraph',
+                    content: [
+                        {
+                            type: 'text',
+                            text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate deleniti doloremque doloribus nobis praesentium repellendus soluta. Ab distinctio eos eveniet quaerat quia recusandae repellendus. Error optio perferendis qui sapiente sequi.'
+                        }
+                    ]
+                },
+                {
+                    type: 'paragraph',
+                    content: [
+                        {
+                            type: 'text',
+                            text: 'Ab et laborum molestias omnis provident soluta suscipit tenetur voluptatum! Accusamus aliquam asperiores blanditiis dolorum enim, inventore ipsa molestias, omnis optio quod rem repellendus reprehenderit saepe, suscipit tempora ullam voluptatibus?'
+                        }
+                    ]
+                }
+            ]
+        });
+        const presets = ref(PRESETS);
+        const device = ref('desktop');
+        const updatedAt = new Date(ZW_UPDATED_AT).toLocaleString('ua-UA');
+
+        const structurePreview = computed(() => {
+            const json = JSON.stringify(content.value, null, '  ');
+            const { value } = window.hljs.highlight(json, { language: 'json' });
+
+            return value;
+        });
+
+        const fonts = ref(FONTS);
+        const favoriteColors = ref(JSON.parse(localStorage.getItem('favoriteColors') || '[]'));
+
+        function updateFavoriteColors(colors) {
+            localStorage.setItem('favoriteColors', JSON.stringify(colors));
+            favoriteColors.value = colors;
+        }
+
+        onMounted(() => window.tiptap = wswgRef.value.editor);
+
+        return {
+            wswgRef,
+            content,
+            fonts,
+            structurePreview,
+            favoriteColors,
+            updateFavoriteColors,
+            device,
+            updatedAt,
+            presets
+        };
+    }
+};
+</script>
+
+<style>
+body {
+    padding: 50px 20px;
+    max-width: 1200px;
+    margin: auto;
+    font-family: "Lato";
+}
+
+.zw-device-switcher {
+    margin-bottom: 50px;
+    margin-right: 20px;
+}
+
+.zw-content-structure {
+    background-color: #F1F1F1;
+    padding: 8px;
+    margin-top: 56px;
+    border-radius: 3px;
+    overflow-x: scroll;
+}
+
+.zw-list--decimal { list-style-type: decimal }
+.zw-list--disc { list-style-type: disc }
+.zw-list--circle { list-style-type: circle }
+.zw-list--square { list-style-type: square }
+.zw-list--latin { list-style-type: upper-roman }
+.zw-list--roman { list-style-type: upper-latin }
+</style>

package/example/example.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ZipifyWysiwyg</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css" integrity="sha512-hasIneQUHlh06VNBe7f6ZcHmeRTLIaQWFd43YriJ0UND19bvYRauxthDg8E4eVNPm9bRUhr5JGeqH7FRFXQu5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js" integrity="sha512-yUUc0qWm2rhM7X0EFe82LNnv2moqArj5nro/w1bi05A09hRVeIZbN6jlMoyu0+4I/Bu4Ck/85JQIU82T82M28w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <style>body{font-synthesis:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}</style>
+</head>
+<body>
+    <div data-app></div>
+</body>
+</html>

package/example/example.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import CompositionAPI from '@vue/composition-api';
+import ExampleApp from './ExampleApp';
+import { loadFonts } from './fonts';
+import { renderPresets } from './presets';
+import { tooltipManager } from './tooltip';
+
+(async () => {
+    tooltipManager.init();
+    loadFonts();
+    renderPresets();
+
+    Vue.use(CompositionAPI);
+
+    new Vue({
+        el: '[data-app]',
+        render: (h) => h(ExampleApp)
+    });
+})();

package/example/fonts.js

@@ -0,0 +1,474 @@
+export const FONTS = [
+    {
+        'name': 'Merriweather',
+        'styles': [
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '700',
+            '700i',
+            '900',
+            '900i'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Arvo',
+        'styles': [
+            '400',
+            '400i',
+            '700',
+            '700i'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'BioRhyme',
+        'styles': [
+            '200',
+            '300',
+            '400',
+            '700',
+            '800'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Josefin Slab',
+        'styles': [
+            '100',
+            '100i',
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '600',
+            '600i',
+            '700',
+            '700i'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Rubik',
+        'styles': [
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '500',
+            '500i',
+            '700',
+            '700i',
+            '900',
+            '900i'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Alegreya',
+        'styles': [
+            '400',
+            '400i',
+            '500',
+            '500i',
+            '700',
+            '700i',
+            '800',
+            '800i',
+            '900',
+            '900i'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Crimson Text',
+        'styles': [
+            '400',
+            '400i',
+            '600',
+            '600i',
+            '700',
+            '700i'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'PT Serif',
+        'styles': [
+            '400',
+            '400i',
+            '700',
+            '700i'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Anonymous Pro',
+        'styles': [
+            '400',
+            '400i',
+            '700',
+            '700i'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Roboto Slab',
+        'styles': [
+            '100',
+            '300',
+            '400',
+            '700'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Scope One',
+        'styles': [
+            '400'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Droid Serif',
+        'styles': [
+            '400',
+            '400i',
+            '700',
+            '700i'
+        ],
+        'category': 'Serif'
+    },
+    {
+        'name': 'Josefin Sans',
+        'styles': [
+            '100',
+            '100i',
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '600',
+            '600i',
+            '700',
+            '700i'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Work Sans',
+        'styles': [
+            '100',
+            '200',
+            '300',
+            '400',
+            '500',
+            '600',
+            '700',
+            '800',
+            '900'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Fira Sans',
+        'styles': [
+            '100',
+            '100i',
+            '200',
+            '200i',
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '500',
+            '500i',
+            '600',
+            '600i',
+            '700',
+            '700i',
+            '800',
+            '800i',
+            '900',
+            '900i'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Alegreya Sans',
+        'styles': [
+            '100',
+            '100i',
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '500',
+            '500i',
+            '700',
+            '700i',
+            '800',
+            '800i',
+            '900',
+            '900i'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Source Sans Pro',
+        'styles': [
+            '200',
+            '200i',
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '600',
+            '600i',
+            '700',
+            '700i',
+            '900',
+            '900i'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Rajdhani',
+        'styles': [
+            '300',
+            '400',
+            '500',
+            '600',
+            '700'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Ubuntu',
+        'styles': [
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '500',
+            '500i',
+            '700',
+            '700i'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Dosis',
+        'styles': [
+            '200',
+            '300',
+            '400',
+            '500',
+            '600',
+            '700',
+            '800'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'PT Sans Narrow',
+        'styles': [
+            '400',
+            '700'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Raleway',
+        'styles': [
+            '100',
+            '100i',
+            '200',
+            '200i',
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '500',
+            '500i',
+            '600',
+            '600i',
+            '700',
+            '700i',
+            '800',
+            '800i',
+            '900',
+            '900i'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Lato',
+        'styles': [
+            '100',
+            '100i',
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '700',
+            '700i',
+            '900',
+            '900i'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Open Sans',
+        'styles': [
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '600',
+            '600i',
+            '700',
+            '700i',
+            '800',
+            '800i'
+        ],
+        'category': 'Sans Serif'
+    },
+    {
+        'name': 'Bungee',
+        'styles': [
+            '400'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Abril Fatface',
+        'styles': [
+            '400'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Ultra',
+        'styles': [
+            '400'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Lobster Two',
+        'styles': [
+            '400',
+            '400i',
+            '700',
+            '700i'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Dancing Script',
+        'styles': [
+            '400',
+            '700'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Caveat',
+        'styles': [
+            '400',
+            '700'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Reenie Beanie',
+        'styles': [
+            '400'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Amatica SC',
+        'styles': [
+            '400',
+            '700'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Kaushan Script',
+        'styles': [
+            '400'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Just Another Hand',
+        'styles': [
+            '400'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Poiret One',
+        'styles': [
+            '400'
+        ],
+        'category': 'Headings / Display'
+    },
+    {
+        'name': 'Montserrat',
+        'styles': [
+            '100',
+            '100i',
+            '200',
+            '200i',
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '500',
+            '500i',
+            '600',
+            '600i',
+            '700',
+            '700i',
+            '800',
+            '800i',
+            '900',
+            '900i'
+        ],
+        'category': 'Regular'
+    },
+    {
+        'name': 'Roboto',
+        'styles': [
+            '100',
+            '100i',
+            '300',
+            '300i',
+            '400',
+            '400i',
+            '500',
+            '500i',
+            '700',
+            '700i',
+            '900',
+            '900i'
+        ],
+        'category': 'Regular'
+    }
+];
+
+export function loadFonts() {
+    const families = FONTS.map((font) => `${font.name}:${font.styles.join(',')}`);
+
+    window.WebFont.load({
+        google: { families },
+        classes: false,
+        timeout: 9000
+    });
+}