@zipify/wysiwyg 1.0.0-dev.44 → 1.0.0-dev.47

package/example/ExampleApp.vue

@@ -122,6 +122,9 @@ export default {
 </script>
 
 <style>
+@import url("@zipify/colorpicker/dist/colorpicker.css");
+@import url("simplebar/dist/simplebar.css");
+
 body {
     padding: 50px 20px;
     max-width: 1200px;

package/jest.config.js

@@ -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

@@ -12,7 +12,7 @@
 
 <script>
 import { EditorContent } from '@tiptap/vue-2';
-import { provide, toRef, ref } from 'vue';
+import { provide, toRef, ref, computed } from 'vue';
 import { Toolbar } from './components';
 import { useToolbar, useEditor } from './composables';
 import { buildExtensions } from './extensions';
@@ -116,6 +116,7 @@ export default {
         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 toolbar = useToolbar({
             wrapperRef: wysiwygRef,
@@ -144,7 +145,8 @@ export default {
                 basePresetClass: props.basePresetClass,
                 baseListClass: props.baseListClass,
                 deviceRef: toRef(props, 'device'),
-                pageBlocksRef: pageBlocks
+                pageBlocksRef: pageBlocks,
+                wrapperRef
             })
         });
 

package/lib/components/base/ScrollView.vue

@@ -31,8 +31,6 @@ export default {
 </script>
 
 <style scoped>
-@import url("simplebar/dist/simplebar.css");
-
 .zw-scroll-view::v-deep .simplebar-placeholder {
     display: none;
 }

package/lib/components/base/colorPicker/ColorPicker.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { ZipifyColorPicker } from 'zipify-colorpicker';
+import { ZipifyColorPicker } from '@zipify/colorpicker';
 import { inject, ref, toRef } from 'vue';
 import { outClick } from '../../../directives';
 import { InjectionTokens } from '../../../injectionTokens';

package/lib/composables/useToolbar.js

@@ -20,7 +20,6 @@ export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
                         padding: 2
                     }
                 },
-
                 {
                     name: 'flip',
                     enabled: false

package/lib/enums/Alignments.js

@@ -2,5 +2,14 @@ export const Alignments = Object.freeze({
     LEFT: 'left',
     CENTER: 'center',
     RIGHT: 'right',
-    JUSTIFY: 'justify'
+    JUSTIFY: 'justify',
+
+    get values() {
+        return [
+            this.LEFT,
+            this.CENTER,
+            this.RIGHT,
+            this.JUSTIFY
+        ];
+    }
 });

package/lib/extensions/Alignment.js

@@ -1,6 +1,6 @@
 import { Extension } from '@tiptap/vue-2';
 import { computed } from 'vue';
-import { createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
+import { convertAlignment, createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
 import { Alignments, NodeTypes, TextSettings } from '../enums';
 
 const DEFAULTS = {
@@ -20,11 +20,13 @@ export const Alignment = Extension.create({
                     isRequired: false,
 
                     parseHTML({ style }) {
-                        if (style.textAlign) {
+                        const textAlign = convertAlignment(style.textAlign);
+
+                        if (textAlign) {
                             return {
-                                desktop: style.textAlign,
-                                tablet: style.textAlign,
-                                mobile: style.textAlign
+                                desktop: textAlign,
+                                tablet: textAlign,
+                                mobile: textAlign
                             };
                         }
 

package/lib/extensions/FontSize.js

@@ -1,6 +1,6 @@
 import { Mark } from '@tiptap/vue-2';
 import { computed } from 'vue';
-import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
+import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
 export const FontSize = Mark.create({
@@ -63,7 +63,13 @@ export const FontSize = Mark.create({
     }),
 
     parseHTML() {
-        const parseSize = (value) => value ? String(parseInt(value)) : null;
+        const parseSize = (value) => {
+            if (!value) return null;
+
+            const converted = convertFontSize(value, this.options.wrapperRef.value);
+
+            return String(converted);
+        };
 
         return [
             {

package/lib/extensions/LineHeight.js

@@ -1,8 +1,7 @@
 import { Extension } from '@tiptap/vue-2';
 import { computed } from 'vue';
-import { createCommand, renderInlineSetting } from '../utils';
+import { createCommand, renderInlineSetting, convertLineHeight } from '../utils';
 import { NodeTypes, TextSettings } from '../enums';
-import { ContextWindow } from '../services';
 
 const DEFAULTS = {
     mobile: null,
@@ -13,52 +12,46 @@ const DEFAULTS = {
 export const LineHeight = Extension.create({
     name: TextSettings.LINE_HEIGHT,
 
-    addGlobalAttributes: () => [
-        {
-            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
-            attributes: {
-                [TextSettings.LINE_HEIGHT]: {
-                    isRequired: false,
+    addGlobalAttributes() {
+        return [
+            {
+                types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+                attributes: {
+                    [TextSettings.LINE_HEIGHT]: {
+                        isRequired: false,
 
-                    parseHTML(element) {
-                        if (element.matches('[style*="--zw-line-height"]')) {
-                            const mobile = element.style.getPropertyValue('--zw-line-height-mobile') || null;
-                            const tablet = element.style.getPropertyValue('--zw-line-height-tablet') || null;
-                            const desktop = element.style.getPropertyValue('--zw-line-height-desktop') || null;
+                        parseHTML: (element) => {
+                            if (element.matches('[style*="--zw-line-height"]')) {
+                                const mobile = element.style.getPropertyValue('--zw-line-height-mobile') || null;
+                                const tablet = element.style.getPropertyValue('--zw-line-height-tablet') || null;
+                                const desktop = element.style.getPropertyValue('--zw-line-height-desktop') || null;
 
-                            return { mobile, tablet, desktop };
-                        }
-
-                        const value = element.style.lineHeight;
+                                return { mobile, tablet, desktop };
+                            }
 
-                        if (!value) return null;
+                            const value = element.style.lineHeight;
 
-                        if (!value.includes('px')) {
-                            return { desktop: value, tablet: value, mobile: value };
-                        }
+                            if (!value) return null;
 
-                        // element is not connected to window so getComputedStyle is not working on element
-                        const source = element.firstElementChild || element;
-                        const sourceSize = source.style.fontSize;
-                        const fontSize = sourceSize || ContextWindow.getComputedStyle(ContextWindow.body).fontSize;
-                        const relative = (parseFloat(value) / parseFloat(fontSize)).toFixed(2);
+                            const converted = convertLineHeight(value, element, this.options.wrapperRef.value);
 
-                        return { desktop: relative, tablet: relative, mobile: relative };
-                    },
+                            return { desktop: converted, tablet: converted, mobile: converted };
+                        },
 
-                    renderHTML(attrs) {
-                        if (!attrs.line_height) return null;
+                        renderHTML(attrs) {
+                            if (!attrs.line_height) return null;
 
-                        return renderInlineSetting({
-                            line_height_mobile: attrs.line_height.mobile,
-                            line_height_tablet: attrs.line_height.tablet,
-                            line_height_desktop: attrs.line_height.desktop
-                        });
+                            return renderInlineSetting({
+                                line_height_mobile: attrs.line_height.mobile,
+                                line_height_tablet: attrs.line_height.tablet,
+                                line_height_desktop: attrs.line_height.desktop
+                            });
+                        }
                     }
                 }
             }
-        }
-    ],
+        ];
+    },
 
     addCommands() {
         return {

package/lib/extensions/__tests__/FontSize.test.js

@@ -31,7 +31,8 @@ function createEditor({ content }) {
             }),
             FontSize.configure({
                 minSize: 5,
-                maxSize: 20
+                maxSize: 20,
+                wrapperRef: ref(document.createElement('div'))
             })
         )
     });

package/lib/extensions/__tests__/LineHeight.test.js

@@ -21,13 +21,17 @@ const MockStylePreset = Extension.create({
     }
 });
 
-function createEditor({ content }) {
+function createEditor({ content, wrapperEl }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         extensions: buildCoreExtensions().concat(
             MockStylePreset,
-            DeviceManager.configure({ device: ref('desktop') }),
-            LineHeight
+            DeviceManager.configure({
+                device: ref('desktop')
+            }),
+            LineHeight.configure({
+                wrapperRef: ref(wrapperEl ?? document.createElement('div'))
+            })
         )
     });
 }
@@ -124,14 +128,16 @@ describe('parsing html', () => {
     });
 
     test('should get value from text in px units with no font size', () => {
-        global.document.body.style.fontSize = '20px';
+        const wrapperEl = document.createElement('div');
+
+        wrapperEl.style.fontSize = '20px';
 
         const editor = createEditor({
-            content: '<p style="line-height: 24px">test</p>'
+            content: '<p style="line-height: 24px">test</p>',
+            wrapperEl
         });
 
         expect(editor.getJSON()).toMatchSnapshot();
-        global.document.body.style.removeProperty('font-size');
     });
 
     test('should get value from rendered view', () => {

package/lib/extensions/index.js

@@ -40,7 +40,8 @@ export function buildExtensions(options) {
         FontWeight,
         FontSize.configure({
             minSize: options.minFontSize,
-            maxSize: options.maxFontSize
+            maxSize: options.maxFontSize,
+            wrapperRef: options.wrapperRef
         }),
         FontColor,
         BackgroundColor,
@@ -49,7 +50,9 @@ export function buildExtensions(options) {
         CaseStyle,
         Superscript,
         Alignment,
-        LineHeight,
+        LineHeight.configure({
+            wrapperRef: options.wrapperRef
+        }),
         Link.configure({
             preset: linkPreset,
             basePresetClass: options.basePresetClass,

package/lib/utils/__tests__/convertAlignment.test.js

@@ -0,0 +1,16 @@
+import { convertAlignment } from '../convertAlignment';
+import { Alignments } from '../../enums';
+
+describe('convert alignment', () => {
+    test('should try convert non supported value', () => {
+        expect(convertAlignment('start')).toBe(Alignments.LEFT);
+    });
+
+    test('should not change supported value', () => {
+        expect(convertAlignment('center')).toBe(Alignments.CENTER);
+    });
+
+    test('should return null if cannot convert', () => {
+        expect(convertAlignment('test-test')).toBe(null);
+    });
+});

package/lib/utils/__tests__/convertFontSize.test.js

@@ -0,0 +1,21 @@
+import { convertFontSize } from '../convertFontSize';
+
+describe('convert font size', () => {
+    const createWrapper = ({ fontSize }) => {
+        const wrapperEl = document.createElement('div');
+
+        wrapperEl.style.fontSize = `${fontSize}px`;
+
+        return wrapperEl;
+    };
+
+    test('should format px values', () => {
+        expect(convertFontSize('20px')).toBe(20);
+    });
+
+    test('should parse em value', () => {
+        const wrapperEl = createWrapper({ fontSize: 24 });
+
+        expect(convertFontSize('1.5em', wrapperEl)).toBe(36);
+    });
+});

package/lib/utils/__tests__/convertLineHeight.test.js

@@ -0,0 +1,21 @@
+import { convertLineHeight } from '../convertLineHeight';
+
+describe('convert line height', () => {
+    const createWrapper = ({ fontSize }) => {
+        const wrapperEl = document.createElement('div');
+
+        wrapperEl.style.fontSize = `${fontSize}px`;
+
+        return wrapperEl;
+    };
+
+    test('should allow relative values', () => {
+        expect(convertLineHeight('1.2')).toBe('1.2');
+    });
+
+    test('should convert px to relative', () => {
+        const wrapperEl = createWrapper({ fontSize: 20 });
+
+        expect(convertLineHeight('24px', wrapperEl)).toBe('1.20');
+    });
+});

package/lib/utils/convertAlignment.js

@@ -0,0 +1,12 @@
+import { Alignments } from '../enums';
+
+const MAPPING = {
+    start: Alignments.LEFT,
+    end: Alignments.RIGHT
+};
+
+export function convertAlignment(alignment) {
+    const mapped = MAPPING[alignment] || alignment;
+
+    return Alignments.values.includes(mapped) ? mapped : null;
+}

package/lib/utils/convertColor.js

@@ -1,4 +1,4 @@
-import { ColorModel } from 'zipify-colorpicker';
+import { ColorModel } from '@zipify/colorpicker';
 
 export function convertColor(raw) {
     const model = ColorModel.create(raw);

package/lib/utils/convertFontSize.js

@@ -0,0 +1,8 @@
+export function convertFontSize(value, wrapperEl) {
+    if (!value.includes('em')) return parseInt(value);
+
+    const containerValue = window.getComputedStyle(wrapperEl).fontSize;
+    const size = parseFloat(value) * parseFloat(containerValue);
+
+    return Math.round(size);
+}

package/lib/utils/convertLineHeight.js

@@ -0,0 +1,17 @@
+import { convertFontSize } from './convertFontSize';
+
+function getFontSize(sourceEl, wrapperEl) {
+    const source = sourceEl.firstElementChild || sourceEl;
+    const fontSize = source.style.fontSize;
+
+    return fontSize || window.getComputedStyle(wrapperEl).fontSize;
+}
+
+export function convertLineHeight(value, sourceEl, wrapperEl) {
+    if (!value.includes('px')) return value;
+
+    const rawFontSize = getFontSize(sourceEl, wrapperEl);
+    const fontSize = convertFontSize(rawFontSize, wrapperEl);
+
+    return (parseInt(value) / fontSize).toFixed(2);
+}

package/lib/utils/index.js

@@ -3,4 +3,7 @@ export { renderInlineSetting, renderMark } from './renderInlineSetting';
 export { capitalize } from './capitalize';
 export { createKeyboardShortcut } from './createKeyboardShortcut';
 export { convertColor } from './convertColor';
+export { convertLineHeight } from './convertLineHeight';
+export { convertFontSize } from './convertFontSize';
+export { convertAlignment } from './convertAlignment';
 export { importIcon } from './importIcon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.44",
+  "version": "1.0.0-dev.47",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {
@@ -15,13 +15,13 @@
   },
   "scripts": {
     "lib:build": "vite build --config ./config/vite/lib.config.js",
+    "lib:release": "export $(cat ./.env | xargs) && npm run lib:build && release-it",
     "example:start": "NODE_ENV=development vite serve --config ./config/vite/example.config.js",
     "example:build": "NODE_ENV=production vite build --config ./config/vite/example.config.js",
     "test:unit": "jest .",
     "optimize-svg": "svgo --config ./config/svgo.js",
     "gzip": "gzipper compress",
-    "prepare": "husky install",
-    "release": "export $(cat ./.env | xargs) && npm run lib:build && release-it"
+    "prepare": "husky install"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",
@@ -39,8 +39,8 @@
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
-    "vue": "2.7.*",
-    "zipify-colorpicker": "*"
+    "@zipify/colorpicker": "2.*",
+    "vue": "2.7.*"
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
@@ -50,6 +50,7 @@
     "@babel/runtime": "^7.18.9",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^28.0.1",
+    "@zipify/colorpicker": "^2.0.0-dev.3",
     "babel-jest": "^28.1.3",
     "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
@@ -66,7 +67,6 @@
     "vite": "^3.0.4",
     "vite-plugin-vue2": "^2.0.2",
     "vue": "^2.7.8",
-    "vue-template-compiler": "^2.7.8",
-    "zipify-colorpicker": "^1.0.28"
+    "vue-template-compiler": "^2.7.8"
   }
 }