@zipify/wysiwyg 3.1.0-0 → 3.1.0-2
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.
- package/config/build/cli.config.js +1 -1
- package/config/build/lib.config.js +1 -1
- package/dist/cli.js +3 -3
- package/dist/wysiwyg.css +25 -22
- package/dist/wysiwyg.mjs +1337 -1302
- package/example/ExampleApp.vue +1 -1
- package/example/presets.js +7 -7
- package/example/tooltip/Tooltip.js +3 -1
- package/example/tooltip/modifiers/TooltipCloseOnScrollModifier.js +5 -2
- package/lib/__tests__/utils/buildTestExtensions.js +24 -2
- package/lib/components/base/composables/useModalToggler.js +4 -1
- package/lib/components/base/dropdown/DropdownActivator.vue +4 -0
- package/lib/components/toolbar/controls/StylePresetControl.vue +1 -1
- package/lib/{entry-cli.js → entryCli.js} +0 -0
- package/lib/{entry-lib.js → entryLib.js} +0 -0
- package/lib/extensions/Alignment.js +6 -6
- package/lib/extensions/StylePreset.js +8 -46
- package/lib/extensions/__tests__/Alignment.test.js +1 -1
- package/lib/extensions/__tests__/StylePreset.test.js +90 -119
- package/lib/extensions/__tests__/__snapshots__/Alignment.test.js.snap +2 -2
- package/lib/extensions/__tests__/__snapshots__/StylePreset.test.js.snap +0 -2
- package/lib/extensions/core/NodeProcessor.js +6 -2
- package/lib/extensions/index.js +7 -3
- package/lib/extensions/list/__tests__/List.test.js +6 -1
- package/lib/services/ContentSerializer.js +1 -1
- package/lib/services/{ContextWidnow.js → ContextWindow.js} +0 -0
- package/lib/services/StylePresetRenderer.js +73 -0
- package/lib/services/__tests__/StylePresetRenderer.test.js +98 -0
- package/lib/services/__tests__/__snapshots__/StylePresetRenderer.test.js.snap +5 -0
- package/lib/services/index.js +2 -1
- package/lib/styles/content.css +10 -10
- package/package.json +4 -4
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { StylePresetRenderer } from '../StylePresetRenderer';
|
|
2
|
+
|
|
3
|
+
function createRenderer() {
|
|
4
|
+
return new StylePresetRenderer({
|
|
5
|
+
baseClass: 'zw ts-',
|
|
6
|
+
linkPresetId: 'link',
|
|
7
|
+
|
|
8
|
+
makeVariable({ device, preset, property }) {
|
|
9
|
+
const formattedProperty = property.replace(/_/i, '-');
|
|
10
|
+
|
|
11
|
+
return `--${device}-${preset.id}-${formattedProperty}`;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const createPreset = (attrs = {}) => ({
|
|
17
|
+
id: 'regular-1',
|
|
18
|
+
common: { font_family: 'Lato' },
|
|
19
|
+
mobile: { font_size: '14' },
|
|
20
|
+
tablet: { font_size: '16' },
|
|
21
|
+
desktop: { font_size: '18' },
|
|
22
|
+
...attrs
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
describe('inject styles', () => {
|
|
26
|
+
const createHost = () => document.createElement('div');
|
|
27
|
+
|
|
28
|
+
test('should inject stylesheet', () => {
|
|
29
|
+
const renderer = createRenderer();
|
|
30
|
+
const host = createHost();
|
|
31
|
+
|
|
32
|
+
renderer.inject(host, [
|
|
33
|
+
createPreset({ id: 'regular-1' }),
|
|
34
|
+
createPreset({ id: 'regular-2' }),
|
|
35
|
+
createPreset({ id: 'regular-3' })
|
|
36
|
+
]);
|
|
37
|
+
|
|
38
|
+
expect(host.querySelector('[data-zw-styles]')).toBeTruthy();
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
test('should not inject multiple stylesheets', () => {
|
|
42
|
+
const renderer = createRenderer();
|
|
43
|
+
const host = createHost();
|
|
44
|
+
|
|
45
|
+
const presets = [
|
|
46
|
+
createPreset({ id: 'regular-1' }),
|
|
47
|
+
createPreset({ id: 'regular-2' }),
|
|
48
|
+
createPreset({ id: 'regular-3' })
|
|
49
|
+
];
|
|
50
|
+
|
|
51
|
+
renderer.inject(host, presets);
|
|
52
|
+
renderer.inject(host, presets);
|
|
53
|
+
|
|
54
|
+
expect(host.querySelectorAll('[data-zw-styles]').length).toBe(1);
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
describe('render', () => {
|
|
59
|
+
test('should render preset styles', () => {
|
|
60
|
+
const renderer = createRenderer();
|
|
61
|
+
|
|
62
|
+
const css = renderer.render([
|
|
63
|
+
createPreset({ id: 'regular-1' }),
|
|
64
|
+
createPreset({ id: 'regular-2' }),
|
|
65
|
+
createPreset({ id: 'regular-3' })
|
|
66
|
+
]);
|
|
67
|
+
|
|
68
|
+
expect(css).toMatchSnapshot();
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
test('should encapsulate link preset', () => {
|
|
72
|
+
const renderer = createRenderer();
|
|
73
|
+
|
|
74
|
+
const css = renderer.render([
|
|
75
|
+
createPreset({ id: 'link' })
|
|
76
|
+
]);
|
|
77
|
+
|
|
78
|
+
expect(css).toMatchSnapshot();
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
describe('make html preset class', () => {
|
|
83
|
+
test('should make class name', () => {
|
|
84
|
+
const renderer = createRenderer();
|
|
85
|
+
const className = renderer.makePresetHtmlClass({ id: 'link' });
|
|
86
|
+
|
|
87
|
+
expect(className).toBe('zw ts-link');
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
describe('make css preset class', () => {
|
|
92
|
+
test('should make class name', () => {
|
|
93
|
+
const renderer = createRenderer();
|
|
94
|
+
const selector = renderer.makePresetCssClass({ id: 'link' });
|
|
95
|
+
|
|
96
|
+
expect(selector).toBe('.zw.ts-link');
|
|
97
|
+
});
|
|
98
|
+
});
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`render should encapsulate link preset 1`] = `" .zw.ts-link {--zw-preset-font-family: var(--common-link-font-family, inherit);--zw-font-family: var(--zw-preset-font-family);--zw-preset-font-size-mobile: var(--mobile-link-font-size, inherit);--zw-font-size-mobile: var(--zw-preset-font-size-mobile);--zw-preset-font-size-tablet: var(--tablet-link-font-size, inherit);--zw-font-size-tablet: var(--zw-preset-font-size-tablet);--zw-preset-font-size-desktop: var(--desktop-link-font-size, inherit);--zw-font-size-desktop: var(--zw-preset-font-size-desktop);}"`;
|
|
4
|
+
|
|
5
|
+
exports[`render should render preset styles 1`] = `" .zw.ts-regular-1 {--zw-preset-font-family: var(--common-regular-1-font-family, inherit);--zw-preset-font-size-mobile: var(--mobile-regular-1-font-size, inherit);--zw-preset-font-size-tablet: var(--tablet-regular-1-font-size, inherit);--zw-preset-font-size-desktop: var(--desktop-regular-1-font-size, inherit);} .zw.ts-regular-2 {--zw-preset-font-family: var(--common-regular-2-font-family, inherit);--zw-preset-font-size-mobile: var(--mobile-regular-2-font-size, inherit);--zw-preset-font-size-tablet: var(--tablet-regular-2-font-size, inherit);--zw-preset-font-size-desktop: var(--desktop-regular-2-font-size, inherit);} .zw.ts-regular-3 {--zw-preset-font-family: var(--common-regular-3-font-family, inherit);--zw-preset-font-size-mobile: var(--mobile-regular-3-font-size, inherit);--zw-preset-font-size-tablet: var(--tablet-regular-3-font-size, inherit);--zw-preset-font-size-desktop: var(--desktop-regular-3-font-size, inherit);}"`;
|
package/lib/services/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { ContentSerializer } from './ContentSerializer';
|
|
|
3
3
|
export { Storage } from './Storage';
|
|
4
4
|
export { FavoriteColors } from './FavoriteColors';
|
|
5
5
|
export { ContentNormalizer } from './normalizer';
|
|
6
|
-
export { ContextWindow } from './
|
|
6
|
+
export { ContextWindow } from './ContextWindow';
|
|
7
7
|
export { NodeFactory } from './NodeFactory';
|
|
8
8
|
export { HtmlToJsonParser } from './HtmlToJsonParser';
|
|
9
|
+
export { StylePresetRenderer } from './StylePresetRenderer';
|
package/lib/styles/content.css
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
.zw-style.zw-style.zw-style {
|
|
17
17
|
font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
|
|
18
18
|
font-family: var(--zw-font-family, var(--zw-preset-font-family));
|
|
19
|
-
color: var(--zw-font-color, var(--zw-preset-color));
|
|
19
|
+
color: var(--zw-font-color, var(--zw-preset-font-color));
|
|
20
20
|
font-style: var(--zw-font-style, var(--zw-preset-font-style));
|
|
21
21
|
text-decoration: var(--zw-text-decoration, var(--zw-preset-text-decoration));
|
|
22
22
|
background-color: var(--zw-background-color, var(--zw-preset-background-color));
|
|
@@ -33,27 +33,27 @@ h4.zw-style.zw-style.zw-style {
|
|
|
33
33
|
@media (min-width: 1200px) {
|
|
34
34
|
|
|
35
35
|
.zw-style.zw-style.zw-style {
|
|
36
|
-
font-size: var(--zw-font-size-desktop, var(--zw-preset-
|
|
37
|
-
text-align: var(--zw-
|
|
38
|
-
line-height: var(--zw-line-height-desktop, var(--zw-preset-
|
|
36
|
+
font-size: var(--zw-font-size-desktop, var(--zw-preset-font-size-desktop));
|
|
37
|
+
text-align: var(--zw-alignment-desktop, var(--zw-preset-alignment-desktop));
|
|
38
|
+
line-height: var(--zw-line-height-desktop, var(--zw-preset-line-height-desktop));
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
@media (min-width: 769px) and (max-width: 1199.98px) {
|
|
43
43
|
|
|
44
44
|
.zw-style.zw-style.zw-style {
|
|
45
|
-
font-size: var(--zw-font-size-tablet, var(--zw-preset-
|
|
46
|
-
text-align: var(--zw-
|
|
47
|
-
line-height: var(--zw-line-height-tablet, var(--zw-preset-
|
|
45
|
+
font-size: var(--zw-font-size-tablet, var(--zw-preset-font-size-tablet));
|
|
46
|
+
text-align: var(--zw-alignment-tablet, var(--zw-preset-alignment-tablet));
|
|
47
|
+
line-height: var(--zw-line-height-tablet, var(--zw-preset-line-height-tablet));
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
@media (max-width: 768.98px) {
|
|
52
52
|
|
|
53
53
|
.zw-style.zw-style.zw-style {
|
|
54
|
-
font-size: var(--zw-font-size-mobile, var(--zw-preset-
|
|
55
|
-
text-align: var(--zw-
|
|
56
|
-
line-height: var(--zw-line-height-mobile, var(--zw-preset-
|
|
54
|
+
font-size: var(--zw-font-size-mobile, var(--zw-preset-font-size-mobile));
|
|
55
|
+
text-align: var(--zw-alignment-mobile, var(--zw-preset-alignment-mobile));
|
|
56
|
+
line-height: var(--zw-line-height-mobile, var(--zw-preset-line-height-mobile));
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zipify/wysiwyg",
|
|
3
|
-
"version": "3.1.0-
|
|
3
|
+
"version": "3.1.0-2",
|
|
4
4
|
"description": "Zipify modification of TipTap text editor",
|
|
5
5
|
"main": "dist/wysiwyg.mjs",
|
|
6
6
|
"bin": {
|
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@floating-ui/dom": "^1.0.7",
|
|
35
|
-
"@rollup/plugin-json": "^4.1.0",
|
|
36
35
|
"@tiptap/core": "2.0.0-beta.195",
|
|
37
36
|
"@tiptap/extension-document": "2.0.0-beta.195",
|
|
38
37
|
"@tiptap/extension-heading": "2.0.0-beta.195",
|
|
@@ -48,7 +47,7 @@
|
|
|
48
47
|
"simplebar": "^5.3.8"
|
|
49
48
|
},
|
|
50
49
|
"peerDependencies": {
|
|
51
|
-
"@zipify/colorpicker": "^2.
|
|
50
|
+
"@zipify/colorpicker": "^2.3",
|
|
52
51
|
"vue": "^2.7"
|
|
53
52
|
},
|
|
54
53
|
"peerDependenciesMeta": {
|
|
@@ -68,11 +67,12 @@
|
|
|
68
67
|
"@optimize-lodash/rollup-plugin": "^3.0.0",
|
|
69
68
|
"@rollup/plugin-babel": "^5.3.1",
|
|
70
69
|
"@rollup/plugin-commonjs": "^22.0.2",
|
|
70
|
+
"@rollup/plugin-json": "^4.1.0",
|
|
71
71
|
"@rollup/plugin-node-resolve": "^14.1.0",
|
|
72
72
|
"@rollup/plugin-replace": "^4.0.0",
|
|
73
73
|
"@vue/test-utils": "^1.3.0",
|
|
74
74
|
"@vue/vue2-jest": "^29.1.0",
|
|
75
|
-
"@zipify/colorpicker": "^2.
|
|
75
|
+
"@zipify/colorpicker": "^2.3.0-0",
|
|
76
76
|
"babel-jest": "^29.0.3",
|
|
77
77
|
"eslint": "8.23.1",
|
|
78
78
|
"eslint-plugin-import": "^2.26.0",
|