npm - @zipify/wysiwyg - Versions diffs - 1.0.0-dev.6 → 1.0.0-dev.62 - Mend

@zipify/wysiwyg 1.0.0-dev.6 → 1.0.0-dev.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (217) hide show

package/example/ExampleApp.vue CHANGED Viewed

@@ -16,6 +16,11 @@
             Load Content
         </button>
+        <label class="zw-readonly-switcher">
+            <input type="checkbox" v-model="isReadonly">
+            readonly
+        </label>
         <span>Deployed at {{ updatedAt }}</span>
         <Wysiwyg
@@ -23,23 +28,28 @@
             base-list-class="zpa-text__list--"
             base-preset-class="zp ts-"
             default-preset-id="regular-1"
+            link-preset-id="link"
             ref="wswgRef"
             :fonts="fonts"
             :presets="presets"
             :make-preset-variable="$options.makePresetVariable"
             :favorite-colors="favoriteColors"
             :device="device"
-            @updateFavoriteColors="updateFavoriteColors"
+            :page-blocks="pageBlocks"
+            :active="isActive"
+            :readonly="isReadonly"
+            @update-favorite-colors="updateFavoriteColors"
         />
         <pre class="zw-content-structure" v-html="structurePreview" />
     </div>
 </template>
 <script>
-import { computed, onMounted, ref } from '@vue/composition-api';
+import { computed, onMounted, ref } from 'vue';
 import { Wysiwyg } from '../lib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
+import { PAGE_BLOCKS } from './pageBlocks';
 function getInitialContent() {
     const data = sessionStorage.getItem('wswg-data');
@@ -64,8 +74,11 @@ export default {
         const wswgRef = ref(null);
         const content = ref(getInitialContent());
         const presets = ref(PRESETS);
+        const pageBlocks = ref(PAGE_BLOCKS);
         const device = ref('desktop');
         const updatedAt = new Date(ZW_UPDATED_AT).toLocaleString('ua-UA');
+        const isActive = ref(false);
+        const isReadonly = ref(false);
         const structurePreview = computed(() => {
             const json = JSON.stringify(content.value, null, '  ');
@@ -94,6 +107,10 @@ export default {
             }
         }
+        document.addEventListener('click', (event) => {
+            isActive.value = wswgRef.value.$el.contains(event.target);
+        });
         return {
             wswgRef,
             content,
@@ -104,13 +121,19 @@ export default {
             loadContent,
             device,
             updatedAt,
-            presets
+            presets,
+            isActive,
+            pageBlocks,
+            isReadonly
         };
     }
 };
 </script>
 <style>
+@import url("@zipify/colorpicker/dist/colorpicker.css");
+@import url("simplebar/dist/simplebar.css");
 body {
     padding: 50px 20px;
     max-width: 1200px;
@@ -127,6 +150,16 @@ body {
     margin-right: 20px;
 }
+.zw-readonly-switcher {
+    margin-right: 20px;
+    display: inline-flex;
+    align-items: center;
+}
+.zw-readonly-switcher input {
+    margin-right: 5px;
+}
 .zw-content-structure {
     background-color: #F1F1F1;
     padding: 8px;
@@ -141,4 +174,9 @@ body {
 .zpa-text__list--square { list-style-type: square }
 .zpa-text__list--latin { list-style-type: upper-roman }
 .zpa-text__list--roman { list-style-type: upper-latin }
+p, h1, h2, h3, h4 {
+    margin-top: 0.3em;
+    margin-bottom: 0.3em;
+}
 </style>

package/example/example.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import CompositionAPI from '@vue/composition-api';
 import ExampleApp from './ExampleApp';
 import { loadFonts } from './fonts';
 import { renderPresets } from './presets';
@@ -10,8 +9,6 @@ import { tooltipManager } from './tooltip';
     loadFonts();
     renderPresets();
-    Vue.use(CompositionAPI);
     if (!sessionStorage.getItem('wswg-data')) {
         sessionStorage.setItem('wswg-data', JSON.stringify({
             type: 'doc',

package/example/{example.html → index.html} RENAMED Viewed

@@ -13,5 +13,6 @@
 </head>
 <body>
     <div data-app></div>
+    <script type="module" src="./example.js"></script>
 </body>
 </html>

package/example/pageBlocks.js ADDED Viewed

@@ -0,0 +1,31 @@
+export const PAGE_BLOCKS = [
+    {
+        id: 123,
+        title: 'Dynamic Buy Box'
+    },
+    {
+        id: 123456,
+        title: 'Text + Navigation'
+    },
+    {
+        id: 11123,
+        title: 'Dynamic Bundle Offer'
+    },
+    {
+        id: 4444444,
+        title: 'Dynamic Buy Box[2]'
+    },
+    {
+        id: 555555,
+        title: 'Image'
+    },
+    {
+        id: 666666,
+        title: 'Footer'
+    }
+];

package/example/presets.js CHANGED Viewed

@@ -14,7 +14,7 @@ export const PRESETS = [
         'common': {
             'font_family': 'Lato',
             'font_weight': '700',
-            'color': '#262626',
+            'color': '',
             'font_style': 'normal',
             'text_decoration': 'none'
         },
@@ -131,7 +131,7 @@ export const PRESETS = [
         'common': {
             'font_family': 'inherit',
             'font_weight': 'inherit',
-            'color': '',
+            'color': 'rgb(0, 0, 238)',
             'font_style': 'normal',
             'text_decoration': 'underline'
         },

package/example/tooltip/Tooltip.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class Tooltip {
     static get popperStyles() {
         return {
             willChange: 'transform',
-            zIndex: 10001
+            zIndex: 999999
         };
     }

package/jest.config.js CHANGED Viewed

@@ -3,8 +3,10 @@ module.exports = {
     moduleFileExtensions: ['js', 'json', 'vue', 'scss'],
     transform: {
         '^.+\\.js$': 'babel-jest',
-        '^.+\\.vue$': '@vue/vue2-jest'
+        '^.+\\.vue$': '@vue/vue2-jest',
+        'node_modules/@zipify/.+': 'babel-jest'
     },
+    transformIgnorePatterns: ['node_modules/(?!@zipify)/'],
     moduleNameMapper: {
         '^.+\\.svg$': '<rootDir>/lib/__mocks__/svgMock.js'
     },

package/lib/Wysiwyg.vue CHANGED Viewed

@@ -1,27 +1,23 @@
 <template>
-    <div
-        class="zw-wysiwyg"
-        ref="wysiwygRef"
-        v-out-click="{ onOutClick: hideToolbar, isDisabled: !toolbar.isShow.value }"
-    >
+    <div class="zw-wysiwyg" ref="wysiwygRef">
         <Toolbar
-            v-show="toolbar.isShow.value"
-            :editor="editor"
+            :toolbar="toolbar"
             :device="device"
             ref="toolbarRef"
         />
         <EditorContent :editor="editor" />
     </div>
 </template>
 <script>
 import { EditorContent } from '@tiptap/vue-2';
-import { provide, toRef, ref } from '@vue/composition-api';
+import { provide, toRef, ref, computed } from 'vue';
 import { Toolbar } from './components';
 import { useToolbar, useEditor } from './composables';
-import { getExtensions } from './extensions';
+import { buildExtensions } from './extensions';
 import { InjectionTokens } from './injectionTokens';
-import { FavoriteColors, Storage } from './services';
+import { ContextWindow, FavoriteColors, Storage } from './services';
 import { Devices } from './enums';
 import { outClick } from './directives';
 import { Font } from './models';
@@ -57,6 +53,11 @@ export default {
             required: true
         },
+        linkPresetId: {
+            type: [Number, String],
+            required: true
+        },
         basePresetClass: {
             type: String,
             required: true
@@ -72,6 +73,11 @@ export default {
             required: true
         },
+        active: {
+            type: Boolean,
+            required: true
+        },
         device: {
             type: String,
             required: false,
@@ -94,57 +100,83 @@ export default {
             type: String,
             required: false,
             default: 'zw-list--'
+        },
+        pageBlocks: {
+            type: Array,
+            required: true
+        },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        // Requires Window type but it different in iframe and outside
+        // eslint-disable-next-line vue/require-prop-types
+        window: {
+            required: false,
+            default: () => window
         }
     },
+    emits: [
+        'input',
+        'update-favorite-colors'
+    ],
     setup(props, { emit }) {
-        const fonts = props.fonts.map((font) => new Font(font));
+        ContextWindow.use(props.window);
+        const fonts = props.fonts.map((font) => new Font(font));
         const toolbarRef = ref(null);
         const wysiwygRef = ref(null);
+        const wrapperRef = computed(() => wysiwygRef.value?.$el || document.body);
+        const isToolbarActiveRef = computed(() => props.active && !props.readonly);
         const toolbar = useToolbar({
             wrapperRef: wysiwygRef,
-            popperRef: toolbarRef,
-            offsets: toRef(props, 'toolbarOffsets').value
+            isActiveRef: isToolbarActiveRef,
+            offsets: props.toolbarOffsets
         });
+        const updateToolbar = () => toolbar.update();
         function onChange(content) {
             emit('input', content);
-            toolbar.update();
+            updateToolbar();
         }
+        const pageBlocks = toRef(props, 'pageBlocks');
         const editor = useEditor({
             content: toRef(props, 'value'),
             onChange: (content) => onChange(content),
-            onFocus: () => toolbar.show(),
+            isReadonlyRef: toRef(props, 'readonly'),
-            extensions: getExtensions({
+            extensions: buildExtensions({
                 fonts,
                 minFontSize: MIN_FONT_SIZE,
                 maxFontSize: MAX_FONT_SIZE,
                 presetsRef: toRef(props, 'presets'),
                 defaultPresetId: props.defaultPresetId,
+                linkPresetId: props.linkPresetId,
                 makePresetVariable: props.makePresetVariable,
                 basePresetClass: props.basePresetClass,
                 baseListClass: props.baseListClass,
-                deviceRef: toRef(props, 'device')
+                deviceRef: toRef(props, 'device'),
+                pageBlocksRef: pageBlocks,
+                wrapperRef
             })
         });
-        function hideToolbar() {
-            if (editor.isFocused) return;
-            toolbar.hide();
-        }
         const fontSizes = new Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)
             .fill(0)
             .map((_, index) => String(index + MIN_FONT_SIZE));
         const favoriteColors = new FavoriteColors({
             listRef: toRef(props, 'favoriteColors'),
-            triggerUpdate: (colors) => emit('updateFavoriteColors', colors)
+            triggerUpdate: (colors) => emit('update-favorite-colors', colors)
         });
         provide(InjectionTokens.EDITOR, editor);
@@ -152,8 +184,15 @@ export default {
         provide(InjectionTokens.FONT_SIZES, fontSizes);
         provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
         provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
-        return { editor, toolbarRef, wysiwygRef, toolbar, hideToolbar };
+        provide(InjectionTokens.PAGE_BLOCKS, pageBlocks);
+        return {
+            editor,
+            toolbarRef,
+            wysiwygRef,
+            toolbar,
+            updateToolbar
+        };
     }
 };
 </script>

package/lib/__tests__/utils/NodeFactory.js CHANGED Viewed

@@ -64,4 +64,17 @@ export class NodeFactory {
     static mark(type, attrs) {
         return { type, attrs };
     }
+    static link(attrs) {
+        return {
+            type: 'text',
+            marks: [
+                {
+                    type: 'link',
+                    attrs: { ...attrs }
+                }
+            ],
+            text: attrs.text
+        };
+    }
 }

package/lib/__tests__/utils/withComponentContext.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h } from '@vue/composition-api';
+import { h } from 'vue';
 export function withComponentContext(exec, params = {}) {
     const wrapper = shallowMount({

package/lib/assets/icons/link.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M12 17.5h-2a3.5 3.5 0 1 1 0-7h2V9h-2a5 5 0 0 0 0 10h2v-1.5Zm6-4.5h-8v2h8v-2Zm-2-4h2a5 5 0 0 1 0 10h-2v-1.5h2a3.5 3.5 0 1 0 0-7h-2V9Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/unlink.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 20 20">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M18.96 10a5 5 0 0 0-5-5h-2v1.5h2a3.49 3.49 0 0 1 1.58 6.61L13.43 11h.53V9h-2.53l-7-7-1.47 1.47L17.49 18l1.47-1.47-2.34-2.34A4.93 4.93 0 0 0 18.96 10Zm-13 1h1.59L5.96 9.41V11ZM3.81 7.26A3.47 3.47 0 0 0 2.46 10a3.5 3.5 0 0 0 3.5 3.5h2V15h-2a5 5 0 0 1-3.21-8.8l1.06 1.06Z" clip-rule="evenodd"/>
+</svg>

package/lib/components/base/Button.vue CHANGED Viewed

@@ -11,7 +11,7 @@
 </template>
 <script>
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 export default {
     name: 'Button',
@@ -20,7 +20,7 @@ export default {
         skin: {
             type: String,
             required: false,
-            validator: (skin) => ['toolbar', 'none'].includes(skin),
+            validator: (skin) => ['toolbar', 'primary', 'secondary', 'none'].includes(skin),
             default: 'none'
         },
@@ -104,6 +104,26 @@ export default {
     will-change: background-color, color, opacity;
 }
+.zw-button--primary {
+    background-color: rgb(var(--zw-color-green));
+    color: rgb(var(--zw-color-white));
+    padding: var(--zw-offset-xxs) var(--zw-offset-sm);
+    line-height: var(--zw-line-height-md);
+}
+.zw-button--primary,
+.zw-button--secondary {
+    color: rgb(var(--zw-color-white));
+    padding: var(--zw-offset-xxs) var(--zw-offset-sm);
+    font-weight: 600;
+    font-size: var(--zw-font-size-xs);
+}
+.zw-button--primary:not(:disabled):hover,
+.zw-button--secondary:not(:disabled):hover {
+    opacity: 0.9;
+}
 .zw-button--toolbar:not(.zw-button--icon) {
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }

package/lib/components/base/Checkbox.vue ADDED Viewed

@@ -0,0 +1,89 @@
+<template>
+    <label class="zw-checkbox">
+        <input class="zw-checkbox__field" type="checkbox" :checked="value" @change="onCheckedChanged">
+        <span class="zw-checkbox__indicator zw-margin-right--xs" />
+        <span class="zw-checkbox__label">{{ label }}</span>
+    </label>
+</template>
+<script>
+export default {
+    name: 'Checkbox',
+    props: {
+        value: {
+            type: Boolean,
+            required: true
+        },
+        label: {
+            type: String,
+            required: false,
+            default: null
+        }
+    },
+    setup(_, { emit }) {
+        const onCheckedChanged = (event) => {
+            emit('input', event.target.checked);
+        };
+        return { onCheckedChanged };
+    }
+};
+</script>
+<style scoped>
+.zw-checkbox {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    padding: var(--zw-offset-xxs) var(--zw-offset-xxs) var(--zw-offset-xxs) 0;
+}
+.zw-checkbox__field + .zw-checkbox__indicator {
+    color: var(--zw-color-n200);
+    box-shadow: inset 0 0 0 2px currentColor;
+}
+.zw-checkbox:hover .zw-checkbox__indicator {
+    box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
+}
+.zw-checkbox__field:checked + .zw-checkbox__indicator {
+    color: rgb(var(--zw-color-green))
+}
+.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator {
+    background-color: rgb(var(--zw-color-green));
+}
+.zw-checkbox .zw-checkbox__indicator::after {
+    content: "";
+    display: block;
+    height: 16px;
+    transform: scale(0.6);
+    transition: transform 0.2s ease-out;
+    width: 16px;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAyNiIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0uMyAxNGMtLjItLjItLjMtLjUtLjMtLjdzLjEtLjUuMy0uN2wxLjQtMS40Yy40LS40IDEtLjQgMS40IDBsLjEuMSA1LjUgNS45Yy4yLjIuNS4yLjcgMEwyMi44IDMuM2guMWMuNC0uNCAxLS40IDEuNCAwbDEuNCAxLjRjLjQuNC40IDEgMCAxLjRsLTE2IDE2LjZjLS4yLjItLjQuMy0uNy4zLS4zIDAtLjUtLjEtLjctLjNMLjUgMTQuMy4zIDE0eiIvPgo8L3N2Zz4K");
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-position: center center;
+}
+.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator::after {
+    transform: scale(0);
+}
+.zw-checkbox__field {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+.zw-checkbox__label {
+    font-size: var(--zw-font-size-xs);
+}
+</style>

package/lib/components/base/FieldLabel.vue CHANGED Viewed

@@ -11,7 +11,8 @@ export default {
     props: {
         fieldId: {
             type: String,
-            required: true
+            required: false,
+            default: null
         }
     }
 };

package/lib/components/base/Icon.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-    <span
+    <div
         class="zw-icon"
         :class="iconClasses"
         :style="iconStyles"
@@ -8,7 +8,7 @@
 </template>
 <script>
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { importIcon } from '../../utils';
 export default {
@@ -66,7 +66,7 @@ export default {
 <style scoped>
 .zw-icon {
-    display: inline-block;
+    display: flex;
 }
 .zw-icon--auto-color {

package/lib/components/base/Modal.vue CHANGED Viewed

@@ -13,7 +13,7 @@
 </template>
 <script>
-import { computed, ref } from '@vue/composition-api';
+import { computed, ref } from 'vue';
 import { outClick } from '../../directives';
 import { useDeselectionLock, useModalToggler } from './composables';
@@ -76,7 +76,6 @@ export default {
 <style scoped>
 .zw-modal {
     border-radius: 2px;
-    overflow: hidden;
     box-shadow: 0 0 4px rgba(var(--zw-color-black), 0.3);
     background-color: rgb(var(--zw-color-n15));
     max-height: var(--zw-modal-max-height);

package/lib/components/base/NumberField.vue CHANGED Viewed

@@ -36,7 +36,7 @@
 </template>
 <script>
-import { computed, toRef } from '@vue/composition-api';
+import { computed, toRef } from 'vue';
 import Button from './Button';
 import { useNumberValue } from './composables';
@@ -126,7 +126,7 @@ export default {
 };
 </script>
-<style lang="scss" scoped>
+<style scoped>
 .zw-number-field {
     --border-color: rgb(var(--zw-color-n60));
     --text-color: rgb(var(--zw-color-n85));

package/lib/components/base/Range.vue CHANGED Viewed

@@ -13,7 +13,7 @@
 </template>
 <script>
-import { computed, toRef } from '@vue/composition-api';
+import { computed, toRef } from 'vue';
 import { useTempValue } from './composables';
 export default {

package/lib/components/base/ScrollView.vue CHANGED Viewed

@@ -6,7 +6,7 @@
 <script>
 import SimpleBar from 'simplebar';
-import { onMounted, provide, ref } from '@vue/composition-api';
+import { onMounted, provide, ref } from 'vue';
 import { SCROLL_VIEW } from './composables';
 export default {
@@ -31,8 +31,6 @@ export default {
 </script>
 <style scoped>
-@import url("~simplebar/dist/simplebar.css");
 .zw-scroll-view::v-deep .simplebar-placeholder {
     display: none;
 }