@zipify/wysiwyg 4.9.1 → 4.10.0-1

package/eslint.config.mjs

@@ -0,0 +1,6 @@
+import { configureWithVue } from '@zipify/eslint-config/preset-vue.mjs';
+
+export default configureWithVue({
+    ignores: ['dist/**'],
+    tsconfig: new URL('./tsconfig.lint.json', import.meta.url)
+});

package/example/ExampleApp.vue

@@ -36,20 +36,20 @@
             ref="wswgRef"
             :fonts="fonts"
             :presets="presets"
-            :make-preset-variable="$options.makePresetVariable"
+            :make-preset-variable="renderPresetVariable"
             :favorite-colors="favoriteColors"
             :device="device"
             :page-blocks="pageBlocks"
             :active="isActive"
             :readonly="isReadonly"
             :ai-component="aiComponent"
-            @update-favorite-colors="updateFavoriteColors"
+            @update:favorite-colors="updateFavoriteColors"
         />
         <pre class="zw-content-structure" v-html="structurePreview" />
     </div>
 </template>
 
-<script>
+<script setup>
 import { computed, onMounted, ref, unref } from 'vue';
 import { Wysiwyg } from '@/entryLib';
 import { FONTS } from './fonts';
@@ -67,82 +67,52 @@ function getInitialContent() {
     }
 }
 
-export default {
-    name: 'ExampleApp',
-
-    makePresetVariable: renderPresetVariable,
-
-    components: {
-        Wysiwyg
-    },
-
-    setup() {
-        const aiComponent = AiComponent;
-        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, '  ');
-            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);
-
-        function loadContent() {
-            const defaultValue = sessionStorage.getItem('wswg-data');
-            const content = prompt('Insert editor content', defaultValue);
-
-            if (content) {
-                sessionStorage.setItem('wswg-data', content);
-            } else {
-                sessionStorage.removeItem('wswg-data');
-            }
-            window.location.reload();
-        }
-
-        function saveContent() {
-            sessionStorage.setItem('wswg-data', JSON.stringify(unref(content)));
-        }
-
-        document.addEventListener('click', (event) => {
-            isActive.value = wswgRef.value.$el.contains(event.target);
-        });
-
-        return {
-            wswgRef,
-            content,
-            fonts,
-            structurePreview,
-            favoriteColors,
-            updateFavoriteColors,
-            loadContent,
-            saveContent,
-            device,
-            updatedAt,
-            presets,
-            isActive,
-            pageBlocks,
-            isReadonly,
-            aiComponent
-        };
+const aiComponent = AiComponent;
+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, '  ');
+    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);
+
+function loadContent() {
+    const defaultValue = sessionStorage.getItem('wswg-data');
+    const content = prompt('Insert editor content', defaultValue);
+
+    if (content) {
+        sessionStorage.setItem('wswg-data', content);
+    } else {
+        sessionStorage.removeItem('wswg-data');
     }
-};
+    window.location.reload();
+}
+
+function saveContent() {
+    sessionStorage.setItem('wswg-data', JSON.stringify(unref(content)));
+}
+
+document.addEventListener('click', (event) => {
+    isActive.value = !!event.target.closest('.zw-wysiwyg, .zw-toolbar');
+});
 </script>
 
 <style>

package/example/presets.ts

@@ -0,0 +1,250 @@
+import type { IStylePreset, StylePresetVariableFactory } from '../lib/entryLib';
+import { Device } from '@/enums';
+
+export const PRESETS: IStylePreset[] = [
+    {
+        id: 'h1',
+        name: 'Heading 1',
+        node: {
+            type: 'heading',
+            level: 1
+        },
+        desktop: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '40px'
+        },
+        common: {
+            font_family: 'Lato',
+            font_weight: '700',
+            color: '',
+            font_style: 'normal',
+            text_decoration: 'none'
+        },
+        tablet: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '40px'
+        },
+        mobile: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '28px'
+        }
+    },
+    {
+        id: 'h2',
+        name: 'Heading 2',
+        node: {
+            type: 'heading',
+            level: 2
+        },
+        desktop: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '32px'
+        },
+        common: {
+            font_family: 'Lato',
+            font_weight: '700',
+            color: '#262626',
+            font_style: 'normal',
+            text_decoration: 'none'
+        },
+        tablet: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '32px'
+        },
+        mobile: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '24px'
+        }
+    },
+    {
+        id: 'h3',
+        name: 'Sub-heading 1',
+        node: {
+            type: 'heading',
+            level: 3
+        },
+        desktop: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '28px'
+        },
+        common: {
+            font_family: 'Lato',
+            font_weight: '700',
+            color: '#262626',
+            font_style: 'normal',
+            text_decoration: 'none'
+        },
+        tablet: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '28px'
+        },
+        mobile: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '20px'
+        }
+    },
+    {
+        id: 'h4',
+        name: 'Sub-heading 2',
+        node: {
+            type: 'heading',
+            level: 4
+        },
+        desktop: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '24px'
+        },
+        common: {
+            font_family: 'Lato',
+            font_weight: '700',
+            color: '#262626',
+            font_style: 'normal',
+            text_decoration: 'none'
+        },
+        tablet: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '24px'
+        },
+        mobile: {
+            alignment: null,
+            line_height: '1.2',
+            font_size: '18px'
+        }
+    },
+    {
+        id: 'link',
+        name: 'Link',
+        hidden: true,
+        desktop: {
+            alignment: null,
+            line_height: 'inherit',
+            font_size: 'inherit'
+        },
+        common: {
+            font_family: 'inherit',
+            font_weight: 'inherit',
+            color: 'rgb(0, 0, 238)',
+            font_style: 'normal',
+            text_decoration: 'underline'
+        },
+        tablet: {
+            alignment: null,
+            line_height: 'inherit',
+            font_size: 'inherit'
+        },
+        mobile: {
+            alignment: null,
+            line_height: 'inherit',
+            font_size: 'inherit'
+        }
+    },
+    {
+        id: 'regular-1',
+        name: 'Body Copy 1',
+        desktop: {
+            alignment: null,
+            line_height: '1.43',
+            font_size: '18px'
+        },
+        common: {
+            font_family: 'Lato',
+            font_weight: '400',
+            color: '#262626',
+            font_style: 'normal',
+            text_decoration: 'none'
+        },
+        tablet: {
+            alignment: null,
+            line_height: '1.43',
+            font_size: '18px'
+        },
+        mobile: {
+            alignment: null,
+            line_height: '1.43',
+            font_size: '18px'
+        }
+    },
+    {
+        id: 'regular-2',
+        name: 'Body Copy 2',
+        fallbackClass: 'zpa-regular2',
+        desktop: {
+            alignment: null,
+            line_height: '1.43',
+            font_size: '16px'
+        },
+        common: {
+            font_family: 'Lato',
+            font_weight: '400',
+            color: '#262626',
+            font_style: 'normal',
+            text_decoration: 'none'
+        },
+        tablet: {
+            alignment: null,
+            line_height: '1.43',
+            font_size: '16px'
+        },
+        mobile: {
+            alignment: null,
+            line_height: '1.43',
+            font_size: '16px'
+        }
+    },
+    {
+        id: 'regular-3',
+        name: 'Body Copy 3',
+        fallbackClass: 'zpa-regular3',
+        desktop: {
+            alignment: null,
+            line_height: '1.43',
+            font_size: '12px'
+        },
+        common: {
+            font_family: 'Lato',
+            font_weight: '400',
+            color: '#262626',
+            font_style: 'normal',
+            text_decoration: 'none'
+        },
+        tablet: {
+            alignment: null,
+            line_height: '1.43',
+            font_size: '12px'
+        },
+        mobile: {
+            alignment: null,
+            line_height: '1.43',
+            font_size: '12px'
+        }
+    }
+];
+
+export const renderPresetVariable: StylePresetVariableFactory = ({ device, preset, property }) => {
+    const formattedProperty = property.replace(/_/i, '-');
+
+    return `--${device}-${preset.id}-${formattedProperty}`;
+};
+
+export function renderPresets() {
+    for (const preset of PRESETS) {
+        for (const device of Object.values(Device)) {
+            for (const [property, value] of Object.entries(preset[device])) {
+                const variable = renderPresetVariable({ device, preset, property });
+
+                document.body.style.setProperty(variable, value);
+            }
+        }
+    }
+}

package/lib/Wysiwyg.vue

@@ -1,138 +1,67 @@
 <template>
     <div class="zw-wysiwyg" ref="wysiwygRef">
-        <Toolbar
-            :device="device"
-            :visible="isToolbarVisible"
-            :popup-mode="popupMode"
-            :reference-ref="wysiwygRef"
-            :offsets="toolbarOffsets"
-            :ai-component="aiComponent"
-        />
-
-        <EditorContent :editor="editor" />
+        <Teleport :to="toolbarTeleportTo" v-if="toolbarTeleportTo">
+            <RenderToolbar />
+        </Teleport>
+
+        <RenderToolbar v-else />
+
+        <EditorContent :editor />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { EditorContent } from '@tiptap/vue-3';
 import type { Content, JSONContent } from '@tiptap/core';
-import { provide, toRef, ref, computed } from 'vue';
-import type { PropType } from 'vue';
+import { provide, toRef, ref, computed, type FunctionalComponent, h, type Component } from 'vue';
 import { Toolbar } from './components';
 import { useEditor } from './composables';
 import { buildExtensions } from './extensions';
 import { InjectionTokens } from './injectionTokens';
 import { ContextWindow, FavoriteColors, Storage } from './services';
-import { Devices } from './enums';
-import { Font, type IFontJson } from './models';
-
-const props = defineProps({
-    presets: {
-        type: Array,
-        required: true
-    },
-
-    defaultPresetId: {
-        type: [Number, String],
-        required: true
-    },
-
-    linkPresetId: {
-        type: [Number, String],
-        required: true
-    },
-
-    basePresetClass: {
-        type: String,
-        required: true
-    },
-
-    makePresetVariable: {
-        type: Function,
-        required: true
-    },
-
-    fonts: {
-        type: Array as PropType<IFontJson[]>,
-        required: true
-    },
-
-    active: {
-        type: Boolean,
-        required: true
-    },
-
-    device: {
-        type: String,
-        required: false,
-        default: Devices.DESKTOP
-    },
-
-    favoriteColors: {
-        type: Array,
-        required: false,
-        default: () => []
-    },
-
-    toolbarOffsets: {
-        type: Array,
-        required: false,
-        default: () => [0, 8]
-    },
-
-    baseListClass: {
-        type: String,
-        required: false,
-        default: 'zw-list--'
-    },
-
-    pageBlocks: {
-        type: Array,
-        required: true
-    },
-
-    readonly: {
-        type: Boolean,
-        required: false,
-        default: false
-    },
-
-    // Temporary until migrations static accordion to sidebar
-    popupMode: {
-        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
-    },
-
-    aiComponent: {
-        type: Object,
-        required: false,
-        default: null
-    },
-
-    defaultFont: {
-        type: Object as PropType<IFontJson>,
-        required: false,
-        default: null
-    }
+import { Device } from './enums';
+import { Font, type IFontJson, type IPageBlock, type IStylePreset } from './models';
+import type { StylePresetVariableFactory } from '@/types';
+
+interface IProps {
+    presets: IStylePreset[];
+    defaultPresetId: number | string;
+    linkPresetId: number | string;
+    basePresetClass: string;
+    makePresetVariable: StylePresetVariableFactory;
+    fonts: IFontJson[];
+    active: boolean;
+    pageBlocks: IPageBlock[];
+    device?: Device;
+    toolbarOffsets?: [crossAxis: number, mainAxis: number];
+    baseListClass?: string;
+    readonly?: boolean;
+    popupMode?: boolean;
+    window?: Window;
+    aiComponent?: Component | null;
+    defaultFont?: IFontJson | null;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    device: Device.DESKTOP,
+    toolbarOffsets: () => [0, 8],
+    baseListClass: 'zw-list--',
+    readonly: false,
+    popupMode: false,
+    window: () => window,
+    aiComponent: null,
+    defaultFont: null
 });
 
-const emit = defineEmits( [
-    'update-favorite-colors'
-]);
-
 const modelValue = defineModel<Content>({
     type: [String, Object],
     required: true
 });
 
+const favoriteColorsModel = defineModel<string[]>('favoriteColors', {
+    default: () => []
+});
+
 const MIN_FONT_SIZE = 5;
 const MAX_FONT_SIZE = 112;
 
@@ -174,12 +103,11 @@ const fontSizes = new Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)
     .map((_, index) => String(index + MIN_FONT_SIZE));
 
 const favoriteColors = new FavoriteColors({
-    listRef: toRef(props, 'favoriteColors'),
-    triggerUpdate: (colors: string[]) => emit('update-favorite-colors', colors)
+    listRef: favoriteColorsModel,
+    triggerUpdate: (colors: string[]) => favoriteColorsModel.value = colors
 });
 
 // Requires a lot of effort to add types right now
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 const getContentCustomization = () => editor.commands.getContentCustomization();
 
@@ -190,6 +118,23 @@ provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
 provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
 provide(InjectionTokens.PAGE_BLOCKS, pageBlocks);
 
+const toolbarTeleportTo = computed(() => {
+    if (props.popupMode) {
+        return null;
+    }
+
+    return props.window.document.body;
+});
+
+const RenderToolbar: FunctionalComponent = () => h(Toolbar, {
+    device: props.device,
+    visible: isToolbarVisible.value,
+    popupMode: props.popupMode,
+    referenceRef: wysiwygRef,
+    offsets: props.toolbarOffsets,
+    aiComponent: props.aiComponent
+});
+
 defineExpose({ getContentCustomization, getContent, editor });
 </script>
 

package/lib/cli/commands/Command.js

@@ -33,7 +33,6 @@ export class Command {
     }
 
     output(data) {
-        // eslint-disable-next-line no-console
-        console.log(data);
+
     }
 }

package/lib/components/base/Checkbox.vue

@@ -7,6 +7,9 @@
 </template>
 
 <script setup>
+// Disable max-len for css 🫠
+/* eslint-disable max-len */
+
 const props = defineProps({
     value: {
         type: Boolean,

package/lib/components/base/Modal.vue

@@ -89,7 +89,7 @@ const hostRef = ref(null);
 const hostEl = useElementRef(hostRef);
 
 useDeselectionLock({
-    isActiveRef: toRef(toggler,  'isOpened'),
+    isActiveRef: toRef(toggler, 'isOpened'),
     hostRef
 });