@zipify/wysiwyg 4.9.1 → 4.9.3

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/lib/Wysiwyg.vue

@@ -124,7 +124,7 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits( [
+const emit = defineEmits([
     'update-favorite-colors'
 ]);
 
@@ -179,7 +179,6 @@ const favoriteColors = new FavoriteColors({
 });
 
 // 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();
 

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
 });
 

package/lib/components/toolbar/controls/__tests__/FontColorControl.test.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { h, ref } from 'vue';
-import { InjectionTokens } from '../../../../injectionTokens';
+import { InjectionTokens } from '@/injectionTokens';
 import { ColorPicker } from '../../../base';
 import FontColorControl from '../FontColorControl';
 
@@ -11,7 +11,7 @@ const SELECTORS = {
 const createEditor = ({ fontColor, isSettingCustomized } = {}) => ({
     commands: {
         getFontColor: () => ref(fontColor),
-        isSettingCustomized: () => ref( isSettingCustomized ?? false),
+        isSettingCustomized: () => ref(isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         applyFontColor: jest.fn().mockReturnThis(),
         run: jest.fn()

package/lib/components/toolbar/controls/link/LinkControlHeader.vue

@@ -4,7 +4,12 @@
             Link
         </span>
 
-        <Button class="zw-link-modal-header__unlink-button" :disabled="!isLink" data-initial-focus="false" @click="removeLink">
+        <Button
+            class="zw-link-modal-header__unlink-button"
+            :disabled="!isLink"
+            data-initial-focus="false"
+            @click="removeLink"
+        >
             <Icon class="zw-link-modal-header__unlink-icon" name="unlink" size="14px" auto-color />
             Remove
         </Button>
@@ -14,7 +19,7 @@
 <script setup>
 import { inject } from 'vue';
 import { Icon, Button } from '../../../base';
-import { InjectionTokens } from '../../../../injectionTokens';
+import { InjectionTokens } from '@/injectionTokens';
 
 const emit = defineEmits(['remove-link']);
 

package/lib/components/toolbar/controls/link/__tests__/LinkControl.test.js

@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { ref, nextTick } from 'vue';
 import LinkControl from '../LinkControl';
-import { InjectionTokens } from '../../../../../injectionTokens';
+import { InjectionTokens } from '@/injectionTokens';
 import { Button, TextField } from '../../../../base';
 import { LinkControlDestination } from '../destination';
 
@@ -26,7 +26,7 @@ const SELECTORS = {
 
 describe('selection value', () => {
     test('should render link status', () => {
-        const editor = createEditor(true );
+        const editor = createEditor(true);
         const wrapper = createComponent({ editor });
         const buttonWrapper = wrapper.findComponent(Button);
 
@@ -36,7 +36,7 @@ describe('selection value', () => {
 
 describe('validation', () => {
     test('should show error on apply', async () => {
-        const editor = createEditor(true );
+        const editor = createEditor(true);
         const wrapper = createComponent({ editor });
         const textFieldWrapper = wrapper.findComponent(TextField);
         const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
@@ -49,7 +49,7 @@ describe('validation', () => {
     });
 
     test('should reset errors on input', async () => {
-        const editor = createEditor(true );
+        const editor = createEditor(true);
         const wrapper = createComponent({ editor });
         const textFieldWrapper = wrapper.findComponent(TextField);
         const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
@@ -64,7 +64,7 @@ describe('validation', () => {
     });
 
     test('should reset errors on change destination', async () => {
-        const editor = createEditor(true );
+        const editor = createEditor(true);
         const wrapper = createComponent({ editor });
         const textFieldWrapper = wrapper.findComponent(TextField);
         const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);

package/lib/components/toolbar/controls/link/__tests__/LinkControlHeader.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { InjectionTokens } from '../../../../../injectionTokens';
+import { InjectionTokens } from '@/injectionTokens';
 import { Button } from '../../../../base';
 import LinkControlHeader from '../LinkControlHeader';
 
@@ -17,7 +17,7 @@ function createComponent({ editor }) {
 
 describe('rendering unlink button', () => {
     test('should button be disabled when no link', () => {
-        const editor = createEditor(true );
+        const editor = createEditor(true);
         const wrapper = createComponent({ editor });
         const buttonWrapper = wrapper.findComponent(Button);
 
@@ -25,7 +25,7 @@ describe('rendering unlink button', () => {
     });
 
     test('should button be enabled when link selected', () => {
-        const editor = createEditor(false );
+        const editor = createEditor(false);
         const wrapper = createComponent({ editor });
         const buttonWrapper = wrapper.findComponent(Button);
 
@@ -33,7 +33,7 @@ describe('rendering unlink button', () => {
     });
 
     test('should send unlink event', () => {
-        const editor = createEditor(true );
+        const editor = createEditor(true);
         const wrapper = createComponent({ editor });
         const buttonWrapper = wrapper.findComponent(Button);
 

package/lib/extensions/FontStyle.js

@@ -1,7 +1,7 @@
 import { Mark } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
-import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
-import { MarkGroups, TextSettings } from '../enums';
+import { createCommand, createKeyboardShortcut, renderMark } from '@/utils';
+import { MarkGroups, TextSettings } from '@/enums';
 
 export const FontStyle = Mark.create({
     name: TextSettings.FONT_STYLE,
@@ -64,7 +64,7 @@ export const FontStyle = Mark.create({
     }),
 
     parseHTML() {
-        const getAttrs = (value) => ({ italic: value.includes('italic')  });
+        const getAttrs = (value) => ({ italic: value.includes('italic') });
 
         return [
             {

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

@@ -1,10 +1,10 @@
 import { Editor, Extension, Mark } from '@tiptap/vue-3';
-import { buildTestExtensions } from '../../__tests__/utils';
+import { buildTestExtensions } from '@/__tests__/utils';
 import { StylePreset } from '../StylePreset';
 import { List } from '../list';
-import { ListTypes, NodeTypes, TextSettings } from '../../enums';
-import { ContentNormalizer, NodeFactory } from '../../services';
-import { createCommand } from '../../utils';
+import { ListTypes, NodeTypes, TextSettings } from '@/enums';
+import { ContentNormalizer, NodeFactory } from '@/services';
+import { createCommand } from '@/utils';
 
 const MockFontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -129,7 +129,7 @@ function createEditor({ content, presets, defaultId, link }) {
                     defaultId,
 
                     styleRenderer: {
-                        makePresetHtmlClass: (preset) =>  `zw ts-${preset.id}`,
+                        makePresetHtmlClass: (preset) => `zw ts-${preset.id}`,
                         makePresetCssClass: (preset) => `.zw.ts-${preset.id}`,
                         inject: jest.fn()
                     }

package/lib/extensions/list/List.js

@@ -1,7 +1,7 @@
 import { Node, wrappingInputRule } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
-import { copyMark, createCommand } from '../../utils';
-import { ListTypes, MarkGroups, NodeTypes, TextSettings } from '../../enums';
+import { copyMark, createCommand } from '@/utils';
+import { ListTypes, MarkGroups, NodeTypes, TextSettings } from '@/enums';
 import { ListItem } from './ListItem';
 
 export const List = Node.create({
@@ -29,7 +29,7 @@ export const List = Node.create({
         const HTML_TYPES = {
             a: ListTypes.ROMAN,
             i: ListTypes.LATIN,
-            '1': ListTypes.DECIMAL
+            1: ListTypes.DECIMAL
         };
 
         const getBulletType = (element) => {

package/lib/extensions/list/__tests__/List.test.js

@@ -1,8 +1,8 @@
 import { Editor, Mark } from '@tiptap/vue-3';
-import { buildTestExtensions } from '../../../__tests__/utils';
-import { ListTypes, TextSettings } from '../../../enums';
+import { buildTestExtensions } from '@/__tests__/utils';
+import { ListTypes, TextSettings } from '@/enums';
 import { StylePreset } from '../../StylePreset';
-import { ContentNormalizer, NodeFactory } from '../../../services';
+import { ContentNormalizer, NodeFactory } from '@/services';
 import { List } from '../List';
 
 const MockFontWeight = Mark.create({
@@ -31,7 +31,7 @@ function createEditor({ content }) {
                     defaultId: 'regular-1',
 
                     styleRenderer: {
-                        makePresetHtmlClass: (preset) =>  `zw ts-${preset.id}`,
+                        makePresetHtmlClass: (preset) => `zw ts-${preset.id}`,
                         makePresetCssClass: (preset) => `.zw.ts-${preset.id}`,
                         render: () => ''
                     }

package/lib/services/JsonSerializer.js

@@ -3,7 +3,6 @@ export class JsonSerializer {
         try {
             return JSON.parse(text);
         } catch (error) {
-            // eslint-disable-next-line no-console
             console.error(error);
             return null;
         }

package/lib/services/Storage.js

@@ -31,7 +31,6 @@ export class Storage {
     }
 
     onPrivateModeEnabled(error) {
-        // eslint-disable-next-line no-console
         console.error(error);
     }
 }

package/lib/services/__tests__/Storage.test.js

@@ -38,10 +38,12 @@ describe('get item', () => {
         const storage = createStorage({ storage: nativeStorage });
         const error = new Error('private mode');
 
-        nativeStorage.getItem.mockImplementation(() => { throw error; });
+        nativeStorage.getItem.mockImplementation(() => {
+            throw error;
+        });
+
         storage.getItem('test');
 
-        // eslint-disable-next-line no-console
         expect(console.error).toHaveBeenCalledWith(error);
     });
 });
@@ -70,10 +72,13 @@ describe('set item', () => {
         const storage = createStorage({ storage: nativeStorage });
         const error = new Error('private mode');
 
-        nativeStorage.getItem.mockImplementation(() => { throw error; });
+        nativeStorage.getItem.mockImplementation(() => {
+            throw error;
+        });
+
         storage.setItem('test', 'test');
 
-        // eslint-disable-next-line no-console
+
         expect(console.error).toHaveBeenCalledWith(error);
     });
 });

package/lib/services/normalizer/__tests__/HtmlNormalizer.test.js

@@ -24,28 +24,28 @@ describe('normalize text content', () => {
 
     test('should keep order in list nodes', () => {
         const input = '<ul><li style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</li></ul>';
-        const output = '<ul>' +
-            '<li>' +
-                '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</p>' +
-            '</li>' +
-        '</ul>';
+        const output = '<ul>'
+            + '<li>'
+            + '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</p>'
+            + '</li>'
+            + '</ul>';
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
     test('should wrap non paragraph list content', () => {
-        const input = '<ul>' +
-            '<li style="line-height: 2;">' +
-                '<span style="font-weight: 700">lorem</span> impsum' +
-                '<p>paragraph text</p>' +
-            '</li>' +
-        '</ul>';
-        const output = '<ul>' +
-            '<li>' +
-            '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</p>' +
-            '<p style="line-height: 2;">paragraph text</p>' +
-            '</li>' +
-        '</ul>';
+        const input = '<ul>'
+            + '<li style="line-height: 2;">'
+            + '<span style="font-weight: 700">lorem</span> impsum'
+            + '<p>paragraph text</p>'
+            + '</li>'
+            + '</ul>';
+        const output = '<ul>'
+            + '<li>'
+            + '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</p>'
+            + '<p style="line-height: 2;">paragraph text</p>'
+            + '</li>'
+            + '</ul>';
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
@@ -114,10 +114,10 @@ describe('normalize text content', () => {
 
     test('should normalize br in list items', () => {
         const input = '<ul><li>lorem ipsum 1<br><br></li><li>lorem ipsum 2</li></ul>';
-        const output = '<ul>' +
-            '<li><p>lorem ipsum 1</p><p><br></p></li>' +
-            '<li><p>lorem ipsum 2</p></li>' +
-        '</ul>';
+        const output = '<ul>'
+            + '<li><p>lorem ipsum 1</p><p><br></p></li>'
+            + '<li><p>lorem ipsum 2</p></li>'
+            + '</ul>';
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
@@ -145,10 +145,10 @@ describe('normalize text content', () => {
 
     test('should move text decoration from block to mixed content', () => {
         const input = '<p style="text-decoration: underline;"><span style="text-decoration: line-through;">lorem</span> ipsum</p>';
-        const output = '<p>' +
-            '<span style="text-decoration: underline line-through;">lorem</span>' +
-            '<span style="text-decoration: underline;"> ipsum</span>' +
-        '</p>';
+        const output = '<p>'
+            + '<span style="text-decoration: underline line-through;">lorem</span>'
+            + '<span style="text-decoration: underline;"> ipsum</span>'
+            + '</p>';
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "4.9.1",
+  "version": "4.9.3",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "types": "dist/wysiwyg.d.ts",
@@ -27,7 +27,7 @@
     "example:start": "NODE_ENV=development vite serve --config config/build/example.config.ts",
     "example:build": "NODE_ENV=production vite build --config config/build/example.config.ts",
     "test:unit": "jest .",
-    "lint:js": "eslint ./lib",
+    "lint:js": "zipify-lint-js --oxlint-tsconfig ./tsconfig.lint.json ./lib",
     "lint:css": "stylelint ./lib/**/*.{css,vue}",
     "optimize-svg": "svgo --config ./config/svgo.js",
     "prepare": "husky"
@@ -66,7 +66,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.8",
-    "@babel/eslint-parser": "^7.25.8",
     "@babel/plugin-transform-runtime": "^7.25.7",
     "@babel/preset-env": "^7.25.8",
     "@babel/runtime": "^7.25.7",
@@ -76,26 +75,17 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "@rushstack/eslint-patch": "^1.10.4",
     "@stylistic/stylelint-plugin": "^3.1.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.9.0",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-vue": "^5.2.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "@vue/vue3-jest": "^29.2.6",
     "@zipify/colorpicker": "^4.1.1",
-    "@zipify/eslint-config": "^1.6.0",
+    "@zipify/eslint-config": "^3.0.0",
     "babel-jest": "^29.7.0",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^8.57.1",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-vue": "^9.29.0",
     "husky": "^9.1.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/tsconfig.lint.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "**/*.ts",
+    "**/*.vue"
+  ]
+}

package/.eslintignore

@@ -1,2 +0,0 @@
-dist/**
-.eslintrc.js

package/.eslintrc.js

@@ -1,95 +0,0 @@
-require('@rushstack/eslint-patch/modern-module-resolution');
-
-const appPackage = require('./package.json');
-
-const jestVersion = appPackage.devDependencies.jest.replace('^', '');
-const jestMajorVersion = Number(jestVersion.split('.')[0]);
-
-const tsParserOptions = {
-    project: './tsconfig.json',
-    extraFileExtensions: ['.vue']
-};
-
-module.exports = {
-    root: true,
-    settings: {
-        'import/resolver': {
-            alias: {
-                map: {
-                    '@': './lib'
-                }
-            },
-            node: {
-                extensions: [
-                    '.js',
-                    '.ts',
-                    '.css',
-                    '.vue',
-                    '.html'
-                ]
-            }
-        },
-        jest: {
-            version: jestMajorVersion
-        }
-    },
-    env: {
-        jest: true
-    },
-    globals: {
-        globalThis: true,
-        ZW_UPDATED_AT: true
-    },
-    overrides: [
-        {
-            files: '*.js',
-            extends: ['@zipify/eslint-config/preset-js']
-        },
-        {
-            files: '*.ts',
-            extends: ['@zipify/eslint-config/preset-ts']
-        },
-        {
-            files: '*.test.{js,ts}',
-            extends: ['@zipify/eslint-config/preset-jest']
-        },
-        {
-            files: '*.vue',
-            extends: ['@zipify/eslint-config/preset-vue3-ts'],
-            parserOptions: {
-                parser: '@typescript-eslint/parser',
-                parserOptions: tsParserOptions
-            },
-            rules: {
-                // Temporary disable rules for js to ts migration
-                '@typescript-eslint/explicit-function-return-type': 'off',
-                'import/extensions': 'off'
-            }
-        },
-        {
-            files: '*.{js,ts,vue}',
-            parserOptions: tsParserOptions,
-            rules: {
-                'import/order': [
-                    'error',
-                    {
-                        pathGroups: [
-                            {
-                                pattern: '@/**',
-                                group: 'external',
-                                position: 'after'
-                            }
-                        ],
-                        groups: [
-                            'builtin',
-                            'external',
-                            'internal',
-                            'parent',
-                            'sibling'
-                        ]
-                    }
-                ]
-            }
-        }
-    ]
-};

package/.lintstagedrc

@@ -1,12 +0,0 @@
-{
-  "*.{vue,css}": [
-    "stylelint --allow-empty-input --fix --config stylelint.config.mjs"
-  ],
-  "*.{vue,js}": [
-    "eslint --fix --fix-type layout --fix-type suggestion --config .eslintrc.js",
-    "jest --passWithNoTests --findRelatedTests"
-  ],
-  "*.svg": [
-    "svgo --config ./config/svgo.js"
-  ]
-}