@designcrowd/library.brand-page 5.10.20-ast-link-1 → 5.10.20
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/lib/src/brand-page/models/index.d.ts +0 -5
- package/lib/src/brand-page/models/index.js +0 -4
- package/lib/src/brand-page/utils/style.util.d.ts +1 -8
- package/lib/src/brand-page/utils/style.util.js +5 -58
- package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js +1 -1
- package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/content-settings-items.fixture.js +0 -1
- package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.d.ts +1 -1
- package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.js +1 -2
- package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts +0 -33
- package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.js +1 -35
- package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.d.ts +0 -1
- package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js +0 -17
- package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/MaxLength.js +3 -3
- package/lib/src/brand-page-maker/composables/rich-text-editor/font.d.ts +1 -1
- package/lib/src/brand-page-maker/composables/rich-text-editor/font.js +1 -0
- package/lib/src/brand-page-maker/composables/rich-text-editor/formatting.d.ts +1 -1
- package/lib/src/brand-page-maker/composables/rich-text-editor/formatting.js +1 -0
- package/lib/src/brand-page-maker/composables/rich-text-editor/spacing.d.ts +1 -1
- package/lib/src/brand-page-maker/composables/rich-text-editor/spacing.js +1 -0
- package/lib/src/brand-page-maker/composables/rich-text-editor/textAlign.d.ts +1 -1
- package/lib/src/brand-page-maker/composables/rich-text-editor/textAlign.js +1 -0
- package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.d.ts +3 -24
- package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js +33 -214
- package/lib/src/brand-page-maker/models/button-group.model.d.ts +0 -2
- package/lib/src/brand-page-maker/utils/rich-text-editor.util.d.ts +2 -19
- package/lib/src/brand-page-maker/utils/rich-text-editor.util.js +8 -340
- package/lib/src/{bundled-translations.de-DE-DjQFwukR.js → bundled-translations.de-DE-O4sKkzBX.js} +1 -1
- package/lib/src/{bundled-translations.es-ES--EbGRI7e.js → bundled-translations.es-ES-C4lGaf08.js} +1 -1
- package/lib/src/{bundled-translations.fr-FR-VtC2JYUC.js → bundled-translations.fr-FR-CIy8KjAV.js} +1 -1
- package/lib/src/bundled-translations.fr-FR-CTnDppmf.js +117 -0
- package/lib/src/{bundled-translations.pt-PT-l9cEldEo.js → bundled-translations.pt-PT-C8EcSdyX.js} +1 -1
- package/lib/src/bundles/bundled-translations.fr-FR.json +2 -2
- package/lib/src/css/library.brand-page-brandCrowd.min.css +70 -96
- package/lib/src/css/library.brand-page-brandPage.min.css +70 -96
- package/lib/src/css/library.brand-page-designCom.min.css +70 -96
- package/lib/src/css/library.brand-page-preview.min.css +70 -96
- package/lib/src/index.d.ts +0 -1
- package/lib/src/index.mjs +27708 -30170
- package/lib/src/lib.js +0 -1
- package/lib/src/mockServiceWorker.js +54 -91
- package/lib/src/shared/content-settings/components/color-field/ColorField.mixin.d.ts +0 -11
- package/lib/src/shared/content-settings/components/color-field/ColorField.mixin.js +0 -5
- package/lib/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.mixin.d.ts +1 -11
- package/lib/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.mixin.js +0 -4
- package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.d.ts +0 -2
- package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.js +7 -12
- package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts +0 -2
- package/package.json +3 -6
- package/src/brand-page/components/banner-section/BannerSection.vue +0 -6
- package/src/brand-page/components/text/Text.vue +0 -2
- package/src/brand-page/components/text-wrapper/TextWrapper.vue +11 -31
- package/src/brand-page/models/index.ts +0 -6
- package/src/brand-page/utils/style.util.ts +5 -105
- package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts +1 -1
- package/src/brand-page-maker/components/brand-page-maker/__fixtures__/content-settings-items.fixture.ts +0 -1
- package/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.ts +0 -2
- package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.ts +1 -44
- package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.vue +0 -1
- package/src/brand-page-maker/components/brandpage-settings/i18n/brand-page-settings.fr-FR.json +1 -1
- package/src/brand-page-maker/components/google-analytics/i18n/google-analytics.fr-FR.json +1 -1
- package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue +50 -548
- package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts +0 -22
- package/src/brand-page-maker/components/template-preview/TemplatePreview.vue +1 -1
- package/src/brand-page-maker/composables/rich-text-editor/extensions/MaxLength.test.ts +1 -1
- package/src/brand-page-maker/composables/rich-text-editor/extensions/MaxLength.ts +15 -4
- package/src/brand-page-maker/composables/rich-text-editor/font.ts +1 -1
- package/src/brand-page-maker/composables/rich-text-editor/formatting.ts +1 -1
- package/src/brand-page-maker/composables/rich-text-editor/spacing.ts +1 -1
- package/src/brand-page-maker/composables/rich-text-editor/textAlign.ts +1 -1
- package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts +41 -299
- package/src/brand-page-maker/models/button-group.model.ts +0 -2
- package/src/brand-page-maker/stores/brandpage-maker/__snapshots__/brandpage-maker-store.test.ts.snap +0 -1
- package/src/brand-page-maker/utils/rich-text-editor.util.test.ts +0 -418
- package/src/brand-page-maker/utils/rich-text-editor.util.ts +25 -470
- package/src/bundles/bundled-translations.fr-FR.json +2 -2
- package/src/lib.ts +0 -1
- package/src/shared/content-settings/components/color-field/ColorField.mixin.ts +0 -5
- package/src/shared/content-settings/components/color-field/ColorField.vue +1 -1
- package/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.mixin.ts +0 -4
- package/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.vue +2 -2
- package/src/shared/content-settings/components/text-field/TextField.vue +1 -1
- package/src/shared/content-settings/components/text-items-field/TextItemsField.vue +2 -2
- package/src/shared/content-settings/components/textarea-field/TextareaField.vue +3 -3
- package/src/shared/content-settings/components/url-field/UrlField.mixin.ts +10 -15
- package/src/shared/content-settings/components/url-field/UrlField.vue +0 -1
- package/lib/src/brand-page-maker/composables/rich-text-editor/bubbleMenu.d.ts +0 -19
- package/lib/src/brand-page-maker/composables/rich-text-editor/bubbleMenu.js +0 -31
- package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/AutoLink.d.ts +0 -2
- package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/AutoLink.js +0 -161
- package/lib/src/brand-page-maker/composables/rich-text-editor/hyperlink.d.ts +0 -19
- package/lib/src/brand-page-maker/composables/rich-text-editor/hyperlink.js +0 -87
- package/lib/src/bundled-translations.fr-FR-BS3Kia5y.js +0 -117
- package/src/brand-page-maker/composables/rich-text-editor/bubbleMenu.ts +0 -42
- package/src/brand-page-maker/composables/rich-text-editor/extensions/AutoLink.ts +0 -227
- package/src/brand-page-maker/composables/rich-text-editor/hyperlink.ts +0 -114
|
@@ -207,11 +207,6 @@ export declare const BUTTON_LINK_TYPE: {
|
|
|
207
207
|
readonly tel: "tel";
|
|
208
208
|
};
|
|
209
209
|
export type ButtonLinkType = keyof typeof BUTTON_LINK_TYPE;
|
|
210
|
-
export declare const HYPERLINK_TYPE: {
|
|
211
|
-
readonly url: "url";
|
|
212
|
-
readonly page: "page";
|
|
213
|
-
};
|
|
214
|
-
export type HyperlinkType = keyof typeof HYPERLINK_TYPE;
|
|
215
210
|
export declare const URL_TYPE: {
|
|
216
211
|
readonly url: "url";
|
|
217
212
|
readonly email: "email";
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
-
import type { BrandPageModel, LogoTheme,
|
|
1
|
+
import type { BrandPageModel, LogoTheme, FabricLogoTheme, ButtonStyles, PageModel } from '../models';
|
|
2
2
|
import { NavigationDesktop, NavigationMobile } from '../models';
|
|
3
3
|
import { PageStyles, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop } from '../models';
|
|
4
|
-
/**
|
|
5
|
-
* @function getColorValueForCorrectCssProperty
|
|
6
|
-
* @param k: string
|
|
7
|
-
* @param colorData { rgb: 'rgb(0,255,0)', gradient: 'linear-gradient(180deg, rgb(0,0,0), rgb(255,0,0), 100%)'}
|
|
8
|
-
* @returns string - rgb() or linear-gradient()
|
|
9
|
-
*/
|
|
10
|
-
export declare const getColorValueForCorrectCssProperty: (k: string, colorData: ThemeColor) => string;
|
|
11
4
|
export declare const colorMatchCssKeyValue: (cssKey: string, cssValue: string, logoTheme: LogoTheme, applyColorWithMatchingLuminance?: {
|
|
12
5
|
originalColor: string;
|
|
13
6
|
}) => {
|
|
@@ -4,7 +4,6 @@ import { STYLE_THEME_KEYS } from '../constants';
|
|
|
4
4
|
import { arrayToLinearGradient, linearGradientToArray, isColorLinearGradient, RGBAtoHex, } from '../../utils/helpers';
|
|
5
5
|
import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, getNewColorBasedOnTargetColorTheme, } from './color.util';
|
|
6
6
|
import chroma from 'chroma-js';
|
|
7
|
-
import { hasRTEContent } from '../../brand-page-maker/utils';
|
|
8
7
|
const MIN_LUM_RATIO = 0.3;
|
|
9
8
|
const parseFabricColorToCssStyle = (fabricColor) => {
|
|
10
9
|
if (fabricColor && typeof fabricColor === 'object') {
|
|
@@ -26,7 +25,7 @@ const parseFabricColorToCssStyle = (fabricColor) => {
|
|
|
26
25
|
* @param colorData { rgb: 'rgb(0,255,0)', gradient: 'linear-gradient(180deg, rgb(0,0,0), rgb(255,0,0), 100%)'}
|
|
27
26
|
* @returns string - rgb() or linear-gradient()
|
|
28
27
|
*/
|
|
29
|
-
|
|
28
|
+
const getColorValueForCorrectCssProperty = (k, colorData) => {
|
|
30
29
|
const gradientSupportedCssProperties = ['background', 'backgroundImage'];
|
|
31
30
|
return colorData.gradient && gradientSupportedCssProperties.indexOf(k) > -1
|
|
32
31
|
? colorData.gradient
|
|
@@ -50,15 +49,13 @@ export const colorMatchCssKeyValue = (cssKey, cssValue, logoTheme, applyColorWit
|
|
|
50
49
|
return { cssValue: newColor, isModified: true };
|
|
51
50
|
}
|
|
52
51
|
}
|
|
53
|
-
if (
|
|
54
|
-
cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g')))
|
|
55
|
-
!hasRTEContent(cssValue)) {
|
|
52
|
+
if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
|
|
53
|
+
cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))) {
|
|
56
54
|
cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoTextColor);
|
|
57
55
|
return { cssValue, isModified: true };
|
|
58
56
|
}
|
|
59
|
-
else if (
|
|
60
|
-
cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g')))
|
|
61
|
-
!hasRTEContent(cssValue)) {
|
|
57
|
+
else if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
|
|
58
|
+
cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'))) {
|
|
62
59
|
cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoBackgroundColor);
|
|
63
60
|
return { cssValue, isModified: true };
|
|
64
61
|
}
|
|
@@ -199,8 +196,6 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
|
|
|
199
196
|
'Color',
|
|
200
197
|
'Replacements',
|
|
201
198
|
];
|
|
202
|
-
const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section'];
|
|
203
|
-
const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
|
|
204
199
|
export const applyLogoThemeToContents = (logoTheme, pages) => {
|
|
205
200
|
let isModified = false;
|
|
206
201
|
const newPages = pages.map((page) => {
|
|
@@ -216,60 +211,12 @@ export const applyLogoThemeToContents = (logoTheme, pages) => {
|
|
|
216
211
|
newContent[styleKey] = newStyle;
|
|
217
212
|
isModified = isModified || isApplied;
|
|
218
213
|
}
|
|
219
|
-
const rteContentKeys = RTE_ALLOWED_SECTION_TYPES.includes(content.type)
|
|
220
|
-
? Object.keys(content).filter((k) => RTE_ALLOWED_FIELDS.includes(k))
|
|
221
|
-
: [];
|
|
222
|
-
for (const key of rteContentKeys) {
|
|
223
|
-
const { newRTEContent, isApplied } = applyLogoThemeToBrandPageRTEContentColorsRecursive(newContent[key], logoTheme, isModified);
|
|
224
|
-
newContent[key] = newRTEContent;
|
|
225
|
-
isModified = isModified || isApplied;
|
|
226
|
-
}
|
|
227
214
|
return newContent;
|
|
228
215
|
});
|
|
229
216
|
return { ...page, contents: newContents };
|
|
230
217
|
});
|
|
231
218
|
return { pages: newPages, isModified };
|
|
232
219
|
};
|
|
233
|
-
const applyLogoThemeToBrandPageRTEContentColorsRecursive = (content, logoTheme, isModified) => {
|
|
234
|
-
let isApplied = false;
|
|
235
|
-
let newRTEContent = {};
|
|
236
|
-
if (typeof content === 'string' && hasRTEContent(content)) {
|
|
237
|
-
newRTEContent = replaceRTEContentColors(content, logoTheme);
|
|
238
|
-
isApplied = true;
|
|
239
|
-
}
|
|
240
|
-
else if (Array.isArray(content)) {
|
|
241
|
-
newRTEContent = content.map((item) => {
|
|
242
|
-
const { newRTEContent: recursiveContent, isApplied: recursiveIsApplied } = applyLogoThemeToBrandPageRTEContentColorsRecursive(item, logoTheme, isModified);
|
|
243
|
-
isApplied = recursiveIsApplied;
|
|
244
|
-
return recursiveContent;
|
|
245
|
-
});
|
|
246
|
-
}
|
|
247
|
-
else if (typeof content === 'object') {
|
|
248
|
-
for (const [key, value] of Object.entries(content)) {
|
|
249
|
-
if (RTE_ALLOWED_FIELDS.includes(key) &&
|
|
250
|
-
typeof value === 'string' &&
|
|
251
|
-
hasRTEContent(value)) {
|
|
252
|
-
newRTEContent[key] = replaceRTEContentColors(value, logoTheme);
|
|
253
|
-
isApplied = true;
|
|
254
|
-
}
|
|
255
|
-
else {
|
|
256
|
-
newRTEContent[key] = value;
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
else {
|
|
261
|
-
newRTEContent = content;
|
|
262
|
-
isApplied = false;
|
|
263
|
-
}
|
|
264
|
-
return { isApplied, newRTEContent };
|
|
265
|
-
};
|
|
266
|
-
const replaceRTEContentColors = (content, logoTheme) => {
|
|
267
|
-
return content
|
|
268
|
-
.replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextColor}\\)`, 'g'), logoTheme.logoTextColor.rgb)
|
|
269
|
-
.replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoBackgroundColor}\\)`, 'g'), logoTheme.logoBackgroundColor.rgb)
|
|
270
|
-
.replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextMultiColor}\\)`, 'g'), logoTheme.logoTextColor.rgb)
|
|
271
|
-
.replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoBackgroundMultiColor}\\)`, 'g'), logoTheme.logoBackgroundColor.rgb);
|
|
272
|
-
};
|
|
273
220
|
export const applyLogoThemeToBrandPageStyles = (logoTheme, pageStyles) => {
|
|
274
221
|
let isModified = false;
|
|
275
222
|
const newStyle = new PageStyles();
|
package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").
|
|
1
|
+
export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").LogoContent)[];
|
|
2
2
|
export declare const brandPageContentsSampleDataStarterKit: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").LogoContent)[];
|
package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink,
|
|
1
|
+
import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, } from './content-settings-items.fixture';
|
|
2
2
|
export const brandPageContentsSampleData = [
|
|
3
3
|
logoContent,
|
|
4
4
|
profileContent,
|
|
5
|
-
textContent,
|
|
6
5
|
generalLink,
|
|
7
6
|
websiteLink,
|
|
8
7
|
emailLink,
|
package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts
CHANGED
|
@@ -37,38 +37,6 @@ declare const _default: import("vue").DefineComponent<{}, {
|
|
|
37
37
|
selectedTemplateId: import("vue").ComputedRef<string | false>;
|
|
38
38
|
canUseRichTextEditor: import("vue").ComputedRef<boolean>;
|
|
39
39
|
isAdmin: import("vue").ComputedRef<boolean>;
|
|
40
|
-
logoTheme: import("vue").ComputedRef<{
|
|
41
|
-
logoTextColor: {
|
|
42
|
-
rgb: string;
|
|
43
|
-
gradient?: string | undefined;
|
|
44
|
-
50?: string | undefined;
|
|
45
|
-
100?: string | undefined;
|
|
46
|
-
200?: string | undefined;
|
|
47
|
-
300?: string | undefined;
|
|
48
|
-
400?: string | undefined;
|
|
49
|
-
500?: string | undefined;
|
|
50
|
-
600?: string | undefined;
|
|
51
|
-
700?: string | undefined;
|
|
52
|
-
800?: string | undefined;
|
|
53
|
-
900?: string | undefined;
|
|
54
|
-
950?: string | undefined;
|
|
55
|
-
};
|
|
56
|
-
logoBackgroundColor: {
|
|
57
|
-
rgb: string;
|
|
58
|
-
gradient?: string | undefined;
|
|
59
|
-
50?: string | undefined;
|
|
60
|
-
100?: string | undefined;
|
|
61
|
-
200?: string | undefined;
|
|
62
|
-
300?: string | undefined;
|
|
63
|
-
400?: string | undefined;
|
|
64
|
-
500?: string | undefined;
|
|
65
|
-
600?: string | undefined;
|
|
66
|
-
700?: string | undefined;
|
|
67
|
-
800?: string | undefined;
|
|
68
|
-
900?: string | undefined;
|
|
69
|
-
950?: string | undefined;
|
|
70
|
-
};
|
|
71
|
-
}>;
|
|
72
40
|
contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../../shared/content-settings/store").ContentSettingsState, {
|
|
73
41
|
contentErrorCount(): number;
|
|
74
42
|
getContent(state: {
|
|
@@ -1062,7 +1030,6 @@ declare const _default: import("vue").DefineComponent<{}, {
|
|
|
1062
1030
|
};
|
|
1063
1031
|
isDraggableEnabled(): boolean;
|
|
1064
1032
|
isItemSelected(): (itemIdx: any) => boolean;
|
|
1065
|
-
styleHtml(): string;
|
|
1066
1033
|
}, {
|
|
1067
1034
|
dispatchViewPortChangeEvent(): void;
|
|
1068
1035
|
onDraggingStart(): void;
|
package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.js
CHANGED
|
@@ -14,7 +14,6 @@ import debounce from 'lodash.debounce';
|
|
|
14
14
|
import { transformToRTE } from '../../../brand-page-maker/utils';
|
|
15
15
|
import { useExternalRichTextEditor } from '../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
|
|
16
16
|
import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
|
|
17
|
-
import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
|
|
18
17
|
export default defineComponent({
|
|
19
18
|
mixins: [PageMixin],
|
|
20
19
|
setup() {
|
|
@@ -41,7 +40,6 @@ export default defineComponent({
|
|
|
41
40
|
selectedTemplateId: computed(() => brandPageMakerStore.selectedTemplateId),
|
|
42
41
|
canUseRichTextEditor: computed(() => brandPageMakerUserStore.features.canUseRichTextEditor),
|
|
43
42
|
isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
|
|
44
|
-
logoTheme: computed(() => uiStore.logoTheme),
|
|
45
43
|
contentSettingsStore,
|
|
46
44
|
brandPageMakerStore,
|
|
47
45
|
brandPageContainerStore,
|
|
@@ -99,31 +97,6 @@ export default defineComponent({
|
|
|
99
97
|
return this.isContentSelected ? item.id === this.selectedItemId : false;
|
|
100
98
|
};
|
|
101
99
|
},
|
|
102
|
-
styleHtml() {
|
|
103
|
-
if (!this.logoTheme) {
|
|
104
|
-
return '';
|
|
105
|
-
}
|
|
106
|
-
// Generate CSS variables for logo theme colors
|
|
107
|
-
const cssVariables = Object.entries(STYLE_THEME_KEYS)
|
|
108
|
-
.map(([key, value]) => {
|
|
109
|
-
const themeColor = key.includes('Background')
|
|
110
|
-
? this.logoTheme.logoBackgroundColor
|
|
111
|
-
: this.logoTheme.logoTextColor;
|
|
112
|
-
if (themeColor?.rgb) {
|
|
113
|
-
return `--${value}: ${themeColor.rgb};`;
|
|
114
|
-
}
|
|
115
|
-
return '';
|
|
116
|
-
})
|
|
117
|
-
.filter(Boolean)
|
|
118
|
-
.join('\n ');
|
|
119
|
-
return cssVariables
|
|
120
|
-
? `<style>
|
|
121
|
-
:root {
|
|
122
|
-
${cssVariables}
|
|
123
|
-
}
|
|
124
|
-
</style>`
|
|
125
|
-
: '';
|
|
126
|
-
},
|
|
127
100
|
},
|
|
128
101
|
mounted() {
|
|
129
102
|
this.dispatchViewPortChangeEvent();
|
|
@@ -207,14 +180,7 @@ export default defineComponent({
|
|
|
207
180
|
this.isContentSelected = true;
|
|
208
181
|
if ((item.type === 'banner-section' || item.type === 'text') &&
|
|
209
182
|
this.canUseRichTextEditor) {
|
|
210
|
-
|
|
211
|
-
if (this.isAdmin) {
|
|
212
|
-
const currentItem = this.items.find((i) => i.id === item.id);
|
|
213
|
-
if (currentItem) {
|
|
214
|
-
selectedItem = currentItem.settings.content;
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
transformToRTE(this.pageSettingsStore, this.externalEditor, this.styleSettingsStore, selectedItem);
|
|
183
|
+
transformToRTE(this.pageSettingsStore, this.externalEditor, this.styleSettingsStore, item);
|
|
218
184
|
}
|
|
219
185
|
if (this.selectEventDebounceHandler) {
|
|
220
186
|
this.selectEventDebounceHandler();
|
|
@@ -185,7 +185,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
185
185
|
scaledContainerStyle(): BrandPageCssStyle;
|
|
186
186
|
innerContainerStyle(): BrandPageCssStyle;
|
|
187
187
|
isPersonalisable(): boolean;
|
|
188
|
-
cssVariablesStyle(): Record<string, string>;
|
|
189
188
|
}, {
|
|
190
189
|
onOverlayClicked(): void;
|
|
191
190
|
onResize(): void;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { computed, defineComponent } from 'vue';
|
|
2
2
|
import { BRAND_PAGE_TYPES, MEDIA_SIZES, VIEWPORTS } from '../../../brand-page';
|
|
3
3
|
import { applyLogoThemeToBrandPageModel, applyUserPersonalisationToBrandPageModelAsync, getBrandPageViewModelFromBrandPageModel, } from '../../../brand-page/utils';
|
|
4
|
-
import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
|
|
5
4
|
import debounce from 'lodash.debounce';
|
|
6
5
|
import { MOBILE_HEIGHT, MOBILE_WIDTH } from '../../constants';
|
|
7
6
|
import { useBrandPageMakerStore } from '../../stores';
|
|
@@ -129,22 +128,6 @@ export default defineComponent({
|
|
|
129
128
|
isPersonalisable() {
|
|
130
129
|
return this.template.isPersonalisable || false;
|
|
131
130
|
},
|
|
132
|
-
cssVariablesStyle() {
|
|
133
|
-
if (!this.logoTheme) {
|
|
134
|
-
return {};
|
|
135
|
-
}
|
|
136
|
-
const cssVariables = {};
|
|
137
|
-
// Generate CSS variables for logo theme colors
|
|
138
|
-
Object.entries(STYLE_THEME_KEYS).forEach(([key, value]) => {
|
|
139
|
-
const themeColor = key.includes('Background')
|
|
140
|
-
? this.logoTheme.logoBackgroundColor
|
|
141
|
-
: this.logoTheme.logoTextColor;
|
|
142
|
-
if (themeColor?.rgb) {
|
|
143
|
-
cssVariables[`--${value}`] = themeColor.rgb;
|
|
144
|
-
}
|
|
145
|
-
});
|
|
146
|
-
return cssVariables;
|
|
147
|
-
},
|
|
148
131
|
},
|
|
149
132
|
watch: {
|
|
150
133
|
logoTheme: {
|
|
@@ -42,7 +42,7 @@ export const MaxLength = Extension.create({
|
|
|
42
42
|
const text = node.text ?? '';
|
|
43
43
|
const piece = text.slice(0, remaining);
|
|
44
44
|
if (piece.length > 0) {
|
|
45
|
-
nodes.push(node.type.schema.text(piece, node.marks));
|
|
45
|
+
nodes.push(node.type.create(node.attrs, node.type.schema.text(piece), node.marks));
|
|
46
46
|
remaining -= piece.length;
|
|
47
47
|
}
|
|
48
48
|
}
|
|
@@ -64,7 +64,7 @@ export const MaxLength = Extension.create({
|
|
|
64
64
|
const piece = (subNode.text ?? '').slice(0, remaining);
|
|
65
65
|
if (piece.length === 0)
|
|
66
66
|
return null;
|
|
67
|
-
const newText = subNode.type.schema.text(piece, subNode.marks);
|
|
67
|
+
const newText = subNode.type.create(subNode.attrs, subNode.type.schema.text(piece), subNode.marks);
|
|
68
68
|
remaining -= piece.length;
|
|
69
69
|
return newText;
|
|
70
70
|
}
|
|
@@ -77,7 +77,7 @@ export const MaxLength = Extension.create({
|
|
|
77
77
|
});
|
|
78
78
|
if (children.length === 0)
|
|
79
79
|
return null;
|
|
80
|
-
return subNode.
|
|
80
|
+
return subNode.type.create(subNode.attrs, Fragment.fromArray(children), subNode.marks);
|
|
81
81
|
}
|
|
82
82
|
return null;
|
|
83
83
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Editor } from '@tiptap/vue-3';
|
|
2
2
|
export declare const useSpacing: (editor: Editor) => {
|
|
3
3
|
letterSpacingValue: import("vue").WritableComputedRef<string, string>;
|
|
4
4
|
lineHeightValue: import("vue").WritableComputedRef<string, string>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ref, computed } from 'vue';
|
|
2
|
+
import { Editor } from '@tiptap/vue-3';
|
|
2
3
|
import debounce from 'lodash/debounce';
|
|
3
4
|
import { letterSpacingValueConvertor } from '../../../brand-page-maker/convertors';
|
|
4
5
|
import { skipStyleDetection } from '../../../brand-page-maker/utils';
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { type ModelRef, type ComputedRef, type Ref, type WritableComputedRef } from 'vue';
|
|
2
2
|
import { Editor } from '@tiptap/vue-3';
|
|
3
3
|
import type { StyleTextFontFamilyOption } from '../../../shared/style-settings/models';
|
|
4
|
-
import
|
|
5
|
-
import { type TextItem, type TextStyleDeclaration } from '../../../brand-page';
|
|
4
|
+
import { TextStyles, type TextItem, type TextStyleDeclaration } from '../../../brand-page';
|
|
6
5
|
import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
|
|
7
6
|
interface UseRichTextEditorReturn {
|
|
8
7
|
editor: Editor;
|
|
@@ -29,32 +28,12 @@ interface UseRichTextEditorReturn {
|
|
|
29
28
|
setInitialStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
|
|
30
29
|
copyGlobalStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
|
|
31
30
|
unsetAllMarks: () => void;
|
|
32
|
-
handleHyperlink: (action: 'toggle' | 'apply' | 'remove', data?: {
|
|
33
|
-
href?: string;
|
|
34
|
-
text?: string;
|
|
35
|
-
}) => void;
|
|
36
|
-
hyperlinkValue: ComputedRef<{
|
|
37
|
-
id: string;
|
|
38
|
-
name: string;
|
|
39
|
-
value: string;
|
|
40
|
-
}>;
|
|
41
|
-
setHyperlinkUrlValue: (url: string) => void;
|
|
42
|
-
shouldShow: ({ editor, state }: {
|
|
43
|
-
editor: any;
|
|
44
|
-
state: any;
|
|
45
|
-
}) => boolean;
|
|
46
|
-
tippyOptions: Record<string, any>;
|
|
47
|
-
handleAdminColorChange: (color: {
|
|
48
|
-
id: string;
|
|
49
|
-
name: string;
|
|
50
|
-
value: string;
|
|
51
|
-
}, type: 'textColor' | 'backgroundColor') => void;
|
|
52
31
|
}
|
|
53
32
|
interface DropdownInstance {
|
|
54
33
|
hideMenu: () => void;
|
|
55
34
|
}
|
|
56
35
|
interface EditorOptionType {
|
|
57
|
-
type: '
|
|
36
|
+
type: 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'textDecorationLine' | 'textDecorationStrike' | 'textColor' | 'backgroundColor' | 'lineHeight' | 'letterSpacing' | 'textAlign';
|
|
58
37
|
value: string | StyleTextFontFamilyOption;
|
|
59
38
|
}
|
|
60
39
|
export declare const useExternalRichTextEditor: () => {
|
|
@@ -77,5 +56,5 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
|
|
|
77
56
|
selectedFontSizePx: number;
|
|
78
57
|
selectedTextColor: string;
|
|
79
58
|
selectedBackgroundColor: string;
|
|
80
|
-
}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[]
|
|
59
|
+
}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[]) => UseRichTextEditorReturn;
|
|
81
60
|
export {};
|