npm - @zipify/wysiwyg - Versions diffs - 4.1.0 → 4.2.0 - Mend

@zipify/wysiwyg 4.1.0 → 4.2.0

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 (204) hide show

package/example/ExampleApp.vue CHANGED Viewed

@@ -51,7 +51,7 @@
 <script>
 import { computed, onMounted, ref, unref } from 'vue';
-import { Wysiwyg } from '../lib/entryLib';
+import { Wysiwyg } from '@/entryLib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
 import { PAGE_BLOCKS } from './pageBlocks';

package/example/{example.js → example.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { createApp, h } from 'vue';
-import ExampleApp from './ExampleApp';
+import ExampleApp from './ExampleApp.vue';
 import { loadFonts } from './fonts';
 import { renderPresets } from './presets';
 import { tooltipManager } from './tooltip';

package/example/index.html CHANGED Viewed

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

package/jest.config.js CHANGED Viewed

@@ -1,14 +1,29 @@
+const tsconfig = require('./tsconfig.json');
+const jsTransform = ['esbuild-jest', {
+    sourcemap: 'inline'
+}];
+const formatAlias = ([name, [path]]) => [
+    `^${name.replace('/*', '/(.*)')}`,
+    `<rootDir>/${path.replace('/*', '/$1')}`
+];
+const aliases = Object.fromEntries(Object.entries(tsconfig.compilerOptions.paths).map(formatAlias));
 module.exports = {
-    testMatch: ['<rootDir>/**/*.test.js'],
-    moduleFileExtensions: ['js', 'json', 'vue', 'scss'],
+    testMatch: ['<rootDir>/**/*.test.{ts,js}'],
+    moduleFileExtensions: ['js', 'ts', 'json', 'vue', 'scss'],
     transform: {
-        '^.+\\.js$': 'babel-jest',
+        '^.+\\.js$': jsTransform,
+        '^.+\\.ts$': jsTransform,
         '^.+\\.vue$': '@vue/vue3-jest',
         'node_modules/@zipify/.+': 'babel-jest'
     },
     transformIgnorePatterns: ['node_modules/(?!@zipify)/'],
     moduleNameMapper: {
-        '^.+\\.svg$': '<rootDir>/lib/__mocks__/svgMock.js'
+        '^.+\\.svg$': '<rootDir>/lib/__mocks__/svgMock.js',
+        ...aliases
     },
     snapshotFormat: {
         printBasicPrototype: true
@@ -19,7 +34,7 @@ module.exports = {
     },
     setupFilesAfterEnv: ['<rootDir>/config/jest/setupMatchers.js'],
     setupFiles: ['<rootDir>/config/jest/setupTests.js'],
-    collectCoverageFrom: ['<rootDir>/lib/**/*.{js,vue}'],
+    collectCoverageFrom: ['<rootDir>/lib/**/*.{ts,js,vue}'],
     coverageReporters: ['html-spa'],
     coveragePathIgnorePatterns: ['/node_modules/']
 };

package/lib/Wysiwyg.vue CHANGED Viewed

@@ -13,23 +13,20 @@
     </div>
 </template>
-<script setup>
+<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 { 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 } from './models';
+import { Font, type IFontJson } from './models';
 const props = defineProps({
-    modelValue: {
-        type: [String, Object],
-        required: true
-    },
     presets: {
         type: Array,
         required: true
@@ -56,7 +53,7 @@ const props = defineProps({
     },
     fonts: {
-        type: Array,
+        type: Array as PropType<IFontJson[]>,
         required: true
     },
@@ -122,10 +119,14 @@ const props = defineProps({
 });
 const emit = defineEmits( [
-    'update:model-value',
     'update-favorite-colors'
 ]);
+const modelValue = defineModel<Content>({
+    type: [String, Object],
+    required: true
+});
 const MIN_FONT_SIZE = 5;
 const MAX_FONT_SIZE = 112;
@@ -136,12 +137,12 @@ const wysiwygRef = ref(null);
 const wrapperRef = computed(() => wysiwygRef.value || document.body);
 const isToolbarVisible = computed(() => props.active && !props.readonly);
-const onChange = (content) => emit('update:model-value', content);
+const onChange = (content: JSONContent) => modelValue.value = content;
 const pageBlocks = toRef(props, 'pageBlocks');
 const { editor, getContent } = useEditor({
-    content: toRef(props, 'modelValue'),
+    content: modelValue,
     onChange,
     isReadonlyRef: toRef(props, 'readonly'),
@@ -167,9 +168,12 @@ const fontSizes = new Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)
 const favoriteColors = new FavoriteColors({
     listRef: toRef(props, 'favoriteColors'),
-    triggerUpdate: (colors) => emit('update-favorite-colors', colors)
+    triggerUpdate: (colors: string[]) => emit('update-favorite-colors', 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();
 provide(InjectionTokens.EDITOR, editor);

package/lib/components/base/__tests__/Modal.test.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { nextTick, ref } from 'vue';
+import { nextTick, reactive, ref } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { InjectionTokens } from '../../../injectionTokens';
 import Modal from '../Modal';
@@ -9,7 +9,7 @@ jest.mock('../composables', () => ({
     useModalToggler: jest.fn()
 }));
-const createToggler = (isOpened) => ({
+const createToggler = (isOpened) => reactive({
     close: jest.fn(),
     isOpened: ref(isOpened ?? true)
 });

package/lib/composables/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { useEditor } from './useEditor';
2	+ export type { IUseEditorProps, IUseEditorReturn } from './useEditor';

package/lib/composables/{useEditor.js → useEditor.ts} RENAMED Viewed

@@ -1,12 +1,29 @@
-import { Editor } from '@tiptap/vue-3';
+import { type AnyExtension, Editor } from '@tiptap/vue-3';
+import type { Content } from '@tiptap/core';
 import { onUnmounted, watch, reactive, unref } from 'vue';
-import { ContentNormalizer } from '../services';
-import { markWysiwygContent } from '../utils';
+import type { Ref, UnwrapNestedRefs } from 'vue';
+import { ContentNormalizer } from '@/services';
+import { markWysiwygContent } from '@/utils';
+import type { WysiwygContent } from '@/utils';
-export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
-    let editor;
+export interface IUseEditorProps {
+    content: Ref<Content>;
+    onChange: (content: WysiwygContent) => void;
+    extensions: AnyExtension[];
+    isReadonlyRef: Ref<boolean>;
-    const getContent = () => markWysiwygContent(editor.getJSON());
+}
+export interface IUseEditorReturn {
+    editor: Editor;
+    getContent(): WysiwygContent;
+}
+export function useEditor({ content, onChange, extensions, isReadonlyRef }: IUseEditorProps): IUseEditorReturn {
+    // eslint-disable-next-line prefer-const
+    let editor: UnwrapNestedRefs<Editor>;
+    const getContent = (): WysiwygContent => markWysiwygContent(editor.getJSON());
     editor = reactive(new Editor({
         content: ContentNormalizer.normalize(content.value),
@@ -33,5 +50,5 @@ export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
     watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly, false));
-    return { editor, getContent };
+    return { editor: editor as Editor, getContent };
 }

package/lib/entryLib.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export { default as Wysiwyg } from './Wysiwyg.vue';
+export { NodeFactory, HtmlToJsonParser } from './services';
+export { NodeTypes, TextSettings, Alignments } from './enums';
+export { isWysiwygContent, unmarkWysiwygContent, markWysiwygContent } from './utils';
+export * from './components/base';
+export { InjectionTokens } from './injectionTokens';

package/lib/extensions/StylePreset.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { Extension } from '@tiptap/vue-3';
 import { computed, toRef, unref } from 'vue';
-import { createCommand } from '../utils';
-import { NodeTypes, TextSettings } from '../enums';
-import { ContextWindow } from '../services';
+import { createCommand } from '@/utils';
+import { NodeTypes, TextSettings } from '@/enums';
+import { ContextWindow } from '@/services';
 export const StylePreset = Extension.create({
     name: TextSettings.STYLE_PRESET,

package/lib/models/{Font.js → Font.ts} RENAMED Viewed

@@ -1,37 +1,48 @@
+export interface IFontJson {
+    name: string;
+    category: string;
+    styles: string[];
+}
 export class Font {
-    constructor({ name, category, styles }) {
+    name: string;
+    category: string;
+    styles: string[];
+    weights: string[];
+    constructor({ name, category, styles }: IFontJson) {
         this.name = name;
         this.category = category;
         this.styles = styles;
-        this.weights = this._getWeights();
+        this.weights = this.getWeights();
     }
-    _getWeights() {
+    private getWeights(): string[] {
         const weights = this.styles.map((style) => style.replace('i', ''));
         return Array.from(new Set(weights));
     }
-    isWeightSupported(weight) {
+    isWeightSupported(weight: string): boolean {
         return this.weights.includes(weight);
     }
-    isItalicSupported(weight) {
+    isItalicSupported(weight: string): boolean {
         return this.styles.includes(`${weight}i`);
     }
-    isWeightItalicOnly(weight) {
+    isWeightItalicOnly(weight: string): boolean {
         return this.isItalicSupported(weight) && !this.styles.includes(weight);
     }
-    findClosestWeight(searchedWeight) {
+    findClosestWeight(searchingWeight: string): string {
         const weights = this.weights.map((weight) => parseInt(weight));
         let closestWeight;
         let closestDifferance = null;
         for (const weight of weights) {
-            const differance = Math.abs(searchedWeight - weight);
+            const differance = Math.abs(Number(searchingWeight) - weight);
             if (closestDifferance === null || differance < closestDifferance) {
                 closestDifferance = differance;

package/lib/models/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Font } from './Font';
2	+ export type { IFontJson } from './Font';

package/lib/utils/importIcon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const modules = import.meta.glob('../assets/icons/*.svg', { as: 'raw', eager: true });
+const modules = import.meta.glob('../assets/icons/*.svg', { query: '?raw', eager: true, import: 'default' });
 export function importIcon(name) {
     return modules[`../assets/icons/${name}.svg`] || '';

package/lib/utils/index.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export { createCommand } from './createCommand';
+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';
+export { isWysiwygContent, markWysiwygContent, unmarkWysiwygContent } from './isWysiwygContent';
+export type { WysiwygContent } from './isWysiwygContent';
+export { resolveTextPosition } from './resolveTextPosition';
+export { resolvePositionOffset } from './resolvePositionOffset';
+export { isNodeFullySelected } from './isNodeFullySelected';
+export { isMarkAppliedToParent } from './isMarkAppliedToParent';
+export { findMarkByType } from './findMarkByType';
+export { copyMark } from './copyMark';

package/lib/utils/isWysiwygContent.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type { JSONContent } from '@tiptap/core';
+export interface WysiwygContent extends JSONContent{
+    __wswg__: true;
+}
+export function isWysiwygContent(content: string | object): content is JSONContent {
+    return typeof content === 'object' && (content as WysiwygContent).__wswg__;
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function unmarkWysiwygContent({ __wswg__, ...content }: WysiwygContent): JSONContent {
+    return content;
+}
+export function markWysiwygContent(content: JSONContent): WysiwygContent {
+    return { ...content, __wswg__: true };
+}

package/package.json CHANGED Viewed

@@ -1,8 +1,9 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
+  "types": "dist/wysiwyg.d.ts",
   "bin": {
     "zipify-wysiwyg": "bin/cli"
   },
@@ -17,12 +18,13 @@
     "url": "https://github.com/ZipifyApps/ZipifyWysiwyg/issues"
   },
   "scripts": {
-    "lib:build": "vite build --config config/build/lib.config.mjs",
+    "lib:build": "npm run lib:build-types && vite build --config config/build/lib.config.ts",
+    "lib:build-types": "vue-tsc -P ./tsconfig.types.json",
     "lib:release": "[ -f .env ] && export $(cat .env | xargs) && release-it",
     "cli:build": "NODE_ENV=production rollup --config config/build/cli.config.js --bundleConfigAsCjs",
     "cli:dev": "NODE_ENV=development rollup --config config/build/cli.config.js --bundleConfigAsCjs --watch",
-    "example:start": "NODE_ENV=development vite serve --config config/build/example.config.mjs",
-    "example:build": "NODE_ENV=production vite build --config config/build/example.config.mjs",
+    "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:css": "stylelint ./lib/**/*.{css,vue}",
@@ -30,7 +32,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.2",
+    "@floating-ui/vue": "^1.0.6",
     "@tiptap/core": "^2.1.13",
     "@tiptap/extension-document": "^2.1.13",
     "@tiptap/extension-heading": "^2.1.13",
@@ -41,14 +43,14 @@
     "@tiptap/extension-text": "^2.1.13",
     "@tiptap/pm": "^2.1.13",
     "@tiptap/vue-3": "^2.1.13",
-    "commander": "^11.1.0",
-    "jsdom": "^23.0.1",
+    "commander": "^12.0.0",
+    "jsdom": "^24.0.0",
     "lodash": "^4.17.21",
     "simplebar": "^6.2.5"
   },
   "peerDependencies": {
-    "@zipify/colorpicker": "^3.1",
-    "vue": "^3.2"
+    "@zipify/colorpicker": "^3.2",
+    "vue": "^3.4"
   },
   "peerDependenciesMeta": {
     "@zipify/colorpicker": {
@@ -59,42 +61,54 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.23.6",
-    "@babel/eslint-parser": "^7.23.3",
-    "@babel/plugin-transform-runtime": "^7.23.6",
-    "@babel/preset-env": "^7.23.6",
-    "@babel/runtime": "^7.23.6",
+    "@babel/core": "^7.24.0",
+    "@babel/eslint-parser": "^7.23.10",
+    "@babel/plugin-transform-runtime": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/runtime": "^7.24.0",
     "@optimize-lodash/rollup-plugin": "^4.0.4",
-    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/test-utils": "^2.4.3",
+    "@rushstack/eslint-patch": "^1.7.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
     "@vue/vue3-jest": "^29.2.6",
-    "@zipify/colorpicker": "^3.1.0",
-    "@zipify/eslint-config": "^1.4.1",
+    "@zipify/colorpicker": "^3.2.0",
+    "@zipify/eslint-config": "^1.5.0",
     "babel-jest": "^29.7.0",
-    "eslint": "^8.55.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "husky": "^8.0.3",
+    "esbuild-jest": "^0.5.0",
+    "eslint": "^8.57.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.2.0",
-    "postcss-html": "^1.5.0",
-    "release-it": "^17.0.1",
-    "rollup": "^4.8.0",
+    "lint-staged": "^15.2.2",
+    "postcss-html": "^1.6.0",
+    "release-it": "^17.1.1",
+    "rollup": "^4.13.0",
+    "rollup-plugin-esbuild": "^6.1.1",
     "stylelint": "^14.16.1",
-    "svgo": "^3.1.0",
-    "vite": "^5.0.7",
-    "vue": "3.3.11"
+    "svgo": "^3.2.0",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vue": "3.4.21",
+    "vue-tsc": "^2.0.6"
   },
   "engines": {
-    "node": ">=18.12.0"
+    "node": ">=20.10.0"
   },
   "engineStrict": true,
   "os": [

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "extends": [
+    "@vue/tsconfig/tsconfig.dom.json"
+  ],
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowJs": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "noUncheckedIndexedAccess": true,
+    "strictNullChecks": true,
+    "baseUrl": "./",
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["lib/*"]
+    },
+    "types": [
+      "jest",
+      "@types/jest",
+      "@types/node"
+    ]
+  },
+  "include": [
+    "lib/**/*",
+    "example/**/*",
+    "config/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/tsconfig.types.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "extends": ["./tsconfig.json"],
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/types",
+    "rootDir": "lib"
+  },
+  "include": [
+    "lib/**/*.ts",
+    "lib/**/*.js",
+    "lib/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules/**",
+    "dist/**",
+    "**/__tests__/**",
+    "**/__mocks__/**",
+    "lib/entryCli.ts",
+    "lib/cli/**"
+  ]
+}

package/lib/composables/index.js DELETED Viewed

	@@ -1 +0,0 @@
1	- export { useEditor } from './useEditor';

package/lib/models/index.js DELETED Viewed

	@@ -1 +0,0 @@
1	- export { Font } from './Font';

package/lib/utils/isWysiwygContent.js DELETED Viewed

@@ -1,12 +0,0 @@
-export function isWysiwygContent(content) {
-    return typeof content === 'object' && content.__wswg__;
-}
-// eslint-disable-next-line no-unused-vars
-export function unmarkWysiwygContent({ __wswg__, ...content }) {
-    return content;
-}
-export function markWysiwygContent(content) {
-    return { ...content, __wswg__: true };
-}

/package/lib/{entryCli.js → entryCli.ts} RENAMED Viewed

File without changes

/package/lib/models/__tests__/{Font.test.js → Font.test.ts} RENAMED Viewed

File without changes