From 976a8c58f08e97003efdc5c43228a517cf9efb16 Mon Sep 17 00:00:00 2001 From: Morten Barklund Date: Fri, 9 Dec 2022 17:34:20 +0100 Subject: [PATCH] TypeScript: convert `fontProvider` (#12761) * WIP * First iteration * Trying to fix types in `cleanForSlug` * Addressing feedback * Fixed references to renamed functions Doh! * Fixed default value for custom fonts (before they are loaded) --- packages/element-library/tsconfig.json | 6 +- packages/elements/src/types/data.ts | 18 +++++- packages/elements/src/types/element.ts | 30 ++++++++-- packages/fonts/package.json | 2 +- packages/fonts/src/types.ts | 2 +- packages/output/tsconfig.json | 5 +- ...seLoadFontFiles.js => useLoadFontFiles.ts} | 17 ++++-- .../app/font/{constants.js => constants.ts} | 0 packages/story-editor/src/app/font/context.js | 22 ------- packages/story-editor/src/app/font/context.ts | 46 +++++++++++++++ .../{fontProvider.js => fontProvider.tsx} | 52 ++++++++--------- .../src/app/font/{index.js => index.ts} | 0 ...seLoadFontFiles.js => useLoadFontFiles.ts} | 20 +------ packages/story-editor/src/app/font/types.ts | 57 +++++++++++++++++++ .../src/app/font/{useFont.js => useFont.ts} | 9 ++- .../src/components/fontPicker/index.js | 14 ++--- .../panes/text/textSets/stories/textSet.js | 4 +- .../panes/text/textSets/test/textSet.js | 4 +- .../panes/text/textSets/test/textSetsPane.js | 4 +- .../components/library/test/text/textPane.js | 4 +- .../design/textStyle/test/fontPicker.js | 4 +- .../panels/design/textStyle/test/textBox.js | 4 +- .../panels/design/textStyle/test/textStyle.js | 4 +- .../story-editor/src/karma/fixture/fixture.js | 2 +- .../{cleanForSlug.js => cleanForSlug.ts} | 15 +++-- packages/story-editor/tsconfig.json | 18 +++--- 26 files changed, 237 insertions(+), 126 deletions(-) rename packages/story-editor/src/app/font/actions/{useLoadFontFiles.js => useLoadFontFiles.ts} (84%) rename packages/story-editor/src/app/font/{constants.js => constants.ts} (100%) delete mode 100644 packages/story-editor/src/app/font/context.js create mode 100644 packages/story-editor/src/app/font/context.ts rename packages/story-editor/src/app/font/{fontProvider.js => fontProvider.tsx} (80%) rename packages/story-editor/src/app/font/{index.js => index.ts} (100%) rename packages/story-editor/src/app/font/test/actions/{useLoadFontFiles.js => useLoadFontFiles.ts} (82%) create mode 100644 packages/story-editor/src/app/font/types.ts rename packages/story-editor/src/app/font/{useFont.js => useFont.ts} (72%) rename packages/story-editor/src/utils/{cleanForSlug.js => cleanForSlug.ts} (86%) diff --git a/packages/element-library/tsconfig.json b/packages/element-library/tsconfig.json index 35d5555d81cc..281987d616c8 100644 --- a/packages/element-library/tsconfig.json +++ b/packages/element-library/tsconfig.json @@ -18,9 +18,5 @@ { "path": "../transform" }, { "path": "../units" } ], - "include": [ - "src/constants.ts", - "src/types.ts", - "src/types" - ] + "include": ["src/constants.ts", "src/types.ts", "src/types"] } diff --git a/packages/elements/src/types/data.ts b/packages/elements/src/types/data.ts index 3221fc76cfa7..254651885bc4 100644 --- a/packages/elements/src/types/data.ts +++ b/packages/elements/src/types/data.ts @@ -53,9 +53,8 @@ export interface FontMetrics { lGap: number; } -export interface FontData { +export interface BaseFontData { family: string; - service?: string; weights?: FontWeight[]; styles?: FontStyle[]; variants?: FontVariant[]; @@ -63,6 +62,21 @@ export interface FontData { metrics?: FontMetrics; } +export interface GoogleFontData extends BaseFontData { + service: 'fonts.google.com'; +} + +export interface SystemFontData extends BaseFontData { + service: 'system'; +} + +export interface CustomFontData extends BaseFontData { + service: 'custom'; + url: string; +} + +export type FontData = GoogleFontData | SystemFontData | CustomFontData; + export interface ProductImage { alt: string; url: string; diff --git a/packages/elements/src/types/element.ts b/packages/elements/src/types/element.ts index a00ed80dcae5..4215e0e68420 100644 --- a/packages/elements/src/types/element.ts +++ b/packages/elements/src/types/element.ts @@ -114,11 +114,31 @@ export interface ProductElement extends Element { product: ProductData; } +interface BaseTextElementFont { + service: string; + family: string; + fallbacks: string[]; +} + +export interface GoogleTextElementFont extends BaseTextElementFont { + service: 'fonts.google.com'; +} + +export interface SystemTextElementFont extends BaseTextElementFont { + service: 'system'; +} + +export interface CustomTextElementFont extends BaseTextElementFont { + service: 'custom'; + url: string; +} + +export type TextElementFont = + | GoogleTextElementFont + | SystemTextElementFont + | CustomTextElementFont; + export interface TextElement extends Element { content: string; - font: { - service: string; - family: string; - fallbacks: string[]; - }; + font: TextElementFont; } diff --git a/packages/fonts/package.json b/packages/fonts/package.json index 9ca7b33ab579..90bedb44c64b 100644 --- a/packages/fonts/package.json +++ b/packages/fonts/package.json @@ -47,7 +47,7 @@ }, "main": "dist/index.js", "module": "dist-module/index.js", - "tyoes": "dist-types/index.d.ts", + "types": "dist-types/index.d.ts", "source": "src/index.ts", "publishConfig": { "access": "public" diff --git a/packages/fonts/src/types.ts b/packages/fonts/src/types.ts index d62b2589a198..9717c139dc5a 100644 --- a/packages/fonts/src/types.ts +++ b/packages/fonts/src/types.ts @@ -16,5 +16,5 @@ export interface Font { family: string; - variants: Array<[number, number]>; + variants?: Array<[number, number]>; } diff --git a/packages/output/tsconfig.json b/packages/output/tsconfig.json index 00a61e9fc059..d252310a3693 100644 --- a/packages/output/tsconfig.json +++ b/packages/output/tsconfig.json @@ -17,8 +17,5 @@ { "path": "../units" }, { "path": "../url" } ], - "include": [ - "src/types.ts", - "src/utils/*.ts" - ] + "include": ["src/types.ts", "src/utils/*.ts"] } diff --git a/packages/story-editor/src/app/font/actions/useLoadFontFiles.js b/packages/story-editor/src/app/font/actions/useLoadFontFiles.ts similarity index 84% rename from packages/story-editor/src/app/font/actions/useLoadFontFiles.js rename to packages/story-editor/src/app/font/actions/useLoadFontFiles.ts index a4c8f8ea770f..85c9f529669c 100644 --- a/packages/story-editor/src/app/font/actions/useLoadFontFiles.js +++ b/packages/story-editor/src/app/font/actions/useLoadFontFiles.ts @@ -24,15 +24,17 @@ import { ensureFontLoaded, loadInlineStylesheet, } from '@googleforcreators/dom'; +import type { FontData } from '@googleforcreators/elements'; /** * Internal dependencies */ import cleanForSlug from '../../../utils/cleanForSlug'; +import type { FontConfig } from '../types'; function useLoadFontFiles() { - const maybeLoadFont = useCallback(async (font) => { - const { family, service, variants, url } = font; + const maybeLoadFont = useCallback(async (font: FontData) => { + const { family, service, variants } = font; const handle = cleanForSlug(family); const elementId = `web-stories-${handle}-font-css`; @@ -50,9 +52,14 @@ function useLoadFontFiles() { elementId ); break; - case 'custom': - await loadInlineStylesheet(elementId, getFontCSS(family, url)); + case 'custom': { + const fontCSS = getFontCSS(family, font.url); + if (!fontCSS) { + return; + } + loadInlineStylesheet(elementId, fontCSS); break; + } default: return; } @@ -67,7 +74,7 @@ function useLoadFontFiles() { * @return {Promise} Returns fonts loaded promise */ const maybeEnqueueFontStyle = useCallback( - (fonts) => { + (fonts: FontConfig[]) => { return Promise.allSettled( fonts.map(async ({ font, fontWeight, fontStyle, content }) => { const { family, service } = font; diff --git a/packages/story-editor/src/app/font/constants.js b/packages/story-editor/src/app/font/constants.ts similarity index 100% rename from packages/story-editor/src/app/font/constants.js rename to packages/story-editor/src/app/font/constants.ts diff --git a/packages/story-editor/src/app/font/context.js b/packages/story-editor/src/app/font/context.js deleted file mode 100644 index 4afad84092f1..000000000000 --- a/packages/story-editor/src/app/font/context.js +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright 2020 Google LLC - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * External dependencies - */ -import { createContext } from '@googleforcreators/react'; - -export default createContext({ state: {}, actions: {} }); diff --git a/packages/story-editor/src/app/font/context.ts b/packages/story-editor/src/app/font/context.ts new file mode 100644 index 000000000000..3027bda72f2b --- /dev/null +++ b/packages/story-editor/src/app/font/context.ts @@ -0,0 +1,46 @@ +/* + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies + */ +import { createContext } from '@googleforcreators/react'; + +/** + * Internal dependencies + */ +import type { FontProviderState } from './types'; + +export default createContext({ + state: { + fonts: [], + curatedFonts: [], + customFonts: [], + recentFonts: [], + }, + actions: { + getFontsBySearch: () => Promise.resolve([]), + getFontByName: () => null, + maybeEnqueueFontStyle: () => Promise.resolve(), + getFontWeight: (name: string) => [{ name, value: 400 }], + getFontFallback: () => [''], + ensureMenuFontsLoaded: () => undefined, + ensureCustomFontsLoaded: () => undefined, + addRecentFont: () => undefined, + loadCustomFonts: () => Promise.resolve(), + loadCuratedFonts: () => Promise.resolve(), + }, +}); diff --git a/packages/story-editor/src/app/font/fontProvider.js b/packages/story-editor/src/app/font/fontProvider.tsx similarity index 80% rename from packages/story-editor/src/app/font/fontProvider.js rename to packages/story-editor/src/app/font/fontProvider.tsx index 9c2551f044bc..048df3a9764c 100644 --- a/packages/story-editor/src/app/font/fontProvider.js +++ b/packages/story-editor/src/app/font/fontProvider.tsx @@ -17,10 +17,11 @@ /** * External dependencies */ -import PropTypes from 'prop-types'; +import type { PropsWithChildren } from 'react'; import { useCallback, useRef, useState } from '@googleforcreators/react'; import { CURATED_FONT_NAMES } from '@googleforcreators/fonts'; import { loadStylesheet } from '@googleforcreators/dom'; +import type { FontData } from '@googleforcreators/elements'; /** * Internal dependencies @@ -30,19 +31,20 @@ import { useAPI } from '../api'; import Context from './context'; import useLoadFontFiles from './actions/useLoadFontFiles'; import { GOOGLE_MENU_FONT_URL } from './constants'; +import type { FontWeightOption } from './types'; -function FontProvider({ children }) { - const [queriedFonts, setQueriedFonts] = useState([]); - const [curatedFonts, setCuratedFonts] = useState([]); - const [recentFonts, setRecentFonts] = useState([]); - const [customFonts, setCustomFonts] = useState(null); +function FontProvider({ children }: PropsWithChildren) { + const [queriedFonts, setQueriedFonts] = useState([]); + const [curatedFonts, setCuratedFonts] = useState([]); + const [recentFonts, setRecentFonts] = useState([]); + const [customFonts, setCustomFonts] = useState(null); const { actions: { getFonts }, } = useAPI(); const fonts = queriedFonts.length > 0 ? queriedFonts : curatedFonts; - const getCustomFonts = useCallback(async () => { + const loadCustomFonts = useCallback(async () => { if (customFonts || !getFonts) { return; } @@ -66,7 +68,7 @@ function FontProvider({ children }) { setCustomFonts(formattedFonts); }, [getFonts, customFonts]); - const getCuratedFonts = useCallback(async () => { + const loadCuratedFonts = useCallback(async () => { if (curatedFonts.length || !getFonts) { return; } @@ -92,21 +94,21 @@ function FontProvider({ children }) { const { maybeEnqueueFontStyle, maybeLoadFont } = useLoadFontFiles(); const getFontByName = useCallback( - (name) => { + (name: string) => { const foundFont = fonts.find((font) => font.family === name); - return foundFont ? foundFont : {}; + return foundFont ? foundFont : null; }, [fonts] ); const getFontsBySearch = useCallback( - async (search) => { + async (search: string) => { if (search.length < 2) { setQueriedFonts([]); return []; } - const newFonts = await getFonts({ search }); + const newFonts = (await getFonts?.({ search })) || []; const formattedFonts = newFonts.map((font) => ({ ...font, @@ -122,8 +124,10 @@ function FontProvider({ children }) { ); const getFontWeight = useCallback( - (name) => { - const defaultFontWeights = [{ name: FONT_WEIGHT_NAMES[400], value: 400 }]; + (name: string) => { + const defaultFontWeights: FontWeightOption[] = [ + { name: FONT_WEIGHT_NAMES[400], value: 400 }, + ]; const currentFont = getFontByName(name); let fontWeights = defaultFontWeights; @@ -142,7 +146,7 @@ function FontProvider({ children }) { ); const getFontFallback = useCallback( - (name) => { + (name: string) => { const currentFont = getFontByName(name); return currentFont?.fallbacks ? currentFont.fallbacks : []; }, @@ -150,7 +154,7 @@ function FontProvider({ children }) { ); const addRecentFont = useCallback( - (recentFont) => { + (recentFont: FontData) => { const newRecentFonts = [recentFont]; recentFonts.forEach((font) => { if (recentFont.family === font.family) { @@ -163,8 +167,8 @@ function FontProvider({ children }) { [recentFonts] ); - const menuFonts = useRef([]); - const ensureMenuFontsLoaded = useCallback((fontsToLoad) => { + const menuFonts = useRef([]); + const ensureMenuFontsLoaded = useCallback((fontsToLoad: string[]) => { const newMenuFonts = fontsToLoad.filter( (fontName) => !menuFonts.current.includes(fontName) ); @@ -187,13 +191,13 @@ function FontProvider({ children }) { const ensureCustomFontsLoaded = useCallback( (fontsToLoad) => { for (const font of fontsToLoad) { - const fontObj = customFonts.find(({ family }) => family === font); + const fontObj = customFonts?.find(({ family }) => family === font); if (!fontObj) { continue; } - maybeLoadFont(fontObj); + void maybeLoadFont(fontObj); } }, [customFonts, maybeLoadFont] @@ -215,16 +219,12 @@ function FontProvider({ children }) { ensureMenuFontsLoaded, ensureCustomFontsLoaded, addRecentFont, - getCustomFonts, - getCuratedFonts, + loadCustomFonts, + loadCuratedFonts, }, }; return {children}; } -FontProvider.propTypes = { - children: PropTypes.node, -}; - export default FontProvider; diff --git a/packages/story-editor/src/app/font/index.js b/packages/story-editor/src/app/font/index.ts similarity index 100% rename from packages/story-editor/src/app/font/index.js rename to packages/story-editor/src/app/font/index.ts diff --git a/packages/story-editor/src/app/font/test/actions/useLoadFontFiles.js b/packages/story-editor/src/app/font/test/actions/useLoadFontFiles.ts similarity index 82% rename from packages/story-editor/src/app/font/test/actions/useLoadFontFiles.js rename to packages/story-editor/src/app/font/test/actions/useLoadFontFiles.ts index 4fa96cd1088f..cde9934aa7ea 100644 --- a/packages/story-editor/src/app/font/test/actions/useLoadFontFiles.js +++ b/packages/story-editor/src/app/font/test/actions/useLoadFontFiles.ts @@ -32,7 +32,7 @@ const DEFAULT_FONT = { fontWeight: 400, fontStyle: 'normal', content: 'Fill in some text', -}; +} as const; const CUSTOM_FONT = { font: { @@ -43,7 +43,7 @@ const CUSTOM_FONT = { fontWeight: 400, fontStyle: 'normal', content: 'Fill in some text', -}; +} as const; /* eslint-disable testing-library/no-node-access */ @@ -65,27 +65,13 @@ describe('useLoadFontFiles', () => { expect(document.getElementById('bar-regular-css')).toBeDefined(); }); - it('should skip font with unknown service', () => { - expect(document.getElementById('font-css')).toBeNull(); - - renderHook(async () => { - const { maybeEnqueueFontStyle } = useLoadFontFiles(); - - await maybeEnqueueFontStyle([ - { ...DEFAULT_FONT, font: { ...DEFAULT_FONT.font, service: 'abcd' } }, - ]); - }); - - expect(document.getElementById('font-css')).toBeNull(); - }); - it('waits for all promises to be settled', () => { expect(document.getElementById('font-css')).toBeNull(); renderHook(async () => { const { maybeEnqueueFontStyle } = useLoadFontFiles(); - await maybeEnqueueFontStyle([{}, DEFAULT_FONT]); + await maybeEnqueueFontStyle([DEFAULT_FONT]); }); expect(document.querySelectorAll('link')).toHaveLength(1); diff --git a/packages/story-editor/src/app/font/types.ts b/packages/story-editor/src/app/font/types.ts new file mode 100644 index 000000000000..263dc1eb0aaf --- /dev/null +++ b/packages/story-editor/src/app/font/types.ts @@ -0,0 +1,57 @@ +/* + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies + */ +import type { + FontData, + FontStyle, + FontWeight, +} from '@googleforcreators/elements'; + +export interface FontWeightOption { + name: string; + value: FontWeight; +} + +export interface FontProviderState { + state: { + fonts: FontData[]; + curatedFonts: FontData[]; + customFonts: FontData[] | null; + recentFonts: FontData[]; + }; + actions: { + getFontsBySearch: (name: string) => Promise; + getFontByName: (name: string) => FontData | null; + maybeEnqueueFontStyle: (fonts: FontConfig[]) => Promise; + getFontWeight: (name: string) => FontWeightOption[]; + getFontFallback: (name: string) => string[]; + ensureMenuFontsLoaded: (fonts: string[]) => void; + ensureCustomFontsLoaded: (fonts: string[]) => void; + addRecentFont: (font: FontData) => void; + loadCustomFonts: () => Promise; + loadCuratedFonts: () => Promise; + }; +} + +export interface FontConfig { + font: FontData; + fontStyle: FontStyle; + content: string; + fontWeight?: FontWeight; +} diff --git a/packages/story-editor/src/app/font/useFont.js b/packages/story-editor/src/app/font/useFont.ts similarity index 72% rename from packages/story-editor/src/app/font/useFont.js rename to packages/story-editor/src/app/font/useFont.ts index f1ee72e94996..5430ef564992 100644 --- a/packages/story-editor/src/app/font/useFont.js +++ b/packages/story-editor/src/app/font/useFont.ts @@ -22,9 +22,14 @@ import { identity, useContextSelector } from '@googleforcreators/react'; * Internal dependencies */ import Context from './context'; +import type { FontProviderState } from './types'; -function useFont(selector) { - return useContextSelector(Context, selector ?? identity); +function useFont(): FontProviderState; +function useFont(selector: (state: FontProviderState) => T): T; +function useFont( + selector: (state: FontProviderState) => T | FontProviderState = identity +) { + return useContextSelector(Context, selector); } export default useFont; diff --git a/packages/story-editor/src/components/fontPicker/index.js b/packages/story-editor/src/components/fontPicker/index.js index 71b1b9bc20e4..08d062dada23 100644 --- a/packages/story-editor/src/components/fontPicker/index.js +++ b/packages/story-editor/src/components/fontPicker/index.js @@ -55,14 +55,14 @@ const FontPicker = forwardRef(function FontPicker( ensureMenuFontsLoaded, ensureCustomFontsLoaded, getFontsBySearch, - getCustomFonts, - getCuratedFonts, + loadCustomFonts, + loadCuratedFonts, } = useFont(({ actions, state }) => ({ getFontsBySearch: actions.getFontsBySearch, ensureMenuFontsLoaded: actions.ensureMenuFontsLoaded, ensureCustomFontsLoaded: actions.ensureCustomFontsLoaded, - getCuratedFonts: actions.getCuratedFonts, - getCustomFonts: actions.getCustomFonts, + loadCuratedFonts: actions.loadCuratedFonts, + loadCustomFonts: actions.loadCustomFonts, recentFonts: state.recentFonts, curatedFonts: state.curatedFonts, fonts: state.fonts, @@ -70,9 +70,9 @@ const FontPicker = forwardRef(function FontPicker( })); useEffect(() => { - getCustomFonts(); - getCuratedFonts(); - }, [getCustomFonts, getCuratedFonts]); + loadCustomFonts(); + loadCuratedFonts(); + }, [loadCustomFonts, loadCuratedFonts]); const fontMap = useMemo(() => { const map = new Map(); diff --git a/packages/story-editor/src/components/library/panes/text/textSets/stories/textSet.js b/packages/story-editor/src/components/library/panes/text/textSets/stories/textSet.js index fa7f4509c744..7d73e7e1c0f2 100644 --- a/packages/story-editor/src/components/library/panes/text/textSets/stories/textSet.js +++ b/packages/story-editor/src/components/library/panes/text/textSets/stories/textSet.js @@ -219,8 +219,8 @@ export const _default = () => { const fontsValue = { actions: { maybeEnqueueFontStyle: () => {}, - getCustomFonts: () => {}, - getCuratedFonts: () => {}, + loadCustomFonts: () => {}, + loadCuratedFonts: () => {}, }, }; const apiValue = { diff --git a/packages/story-editor/src/components/library/panes/text/textSets/test/textSet.js b/packages/story-editor/src/components/library/panes/text/textSets/test/textSet.js index 4eb1477144c4..7f8b52f12c55 100644 --- a/packages/story-editor/src/components/library/panes/text/textSets/test/textSet.js +++ b/packages/story-editor/src/components/library/panes/text/textSets/test/textSet.js @@ -192,8 +192,8 @@ function setup(elements, id) { const fontsValue = { actions: { maybeEnqueueFontStyle: () => {}, - getCustomFonts: jest.fn(), - getCuratedFonts: jest.fn(), + loadCustomFonts: jest.fn(), + loadCuratedFonts: jest.fn(), }, }; const apiValue = { diff --git a/packages/story-editor/src/components/library/panes/text/textSets/test/textSetsPane.js b/packages/story-editor/src/components/library/panes/text/textSets/test/textSetsPane.js index d0156643557f..af9bc9b647e7 100644 --- a/packages/story-editor/src/components/library/panes/text/textSets/test/textSetsPane.js +++ b/packages/story-editor/src/components/library/panes/text/textSets/test/textSetsPane.js @@ -48,8 +48,8 @@ function setup() { const fontsValue = { actions: { maybeEnqueueFontStyle: jest.fn(), - getCustomFonts: jest.fn(), - getCuratedFonts: jest.fn(), + loadCustomFonts: jest.fn(), + loadCuratedFonts: jest.fn(), }, }; const apiValue = { diff --git a/packages/story-editor/src/components/library/test/text/textPane.js b/packages/story-editor/src/components/library/test/text/textPane.js index d7ac2eb2175f..2bd4ed069022 100644 --- a/packages/story-editor/src/components/library/test/text/textPane.js +++ b/packages/story-editor/src/components/library/test/text/textPane.js @@ -83,8 +83,8 @@ describe('TextPane', () => { actions: { ensureMenuFontsLoaded: () => {}, ensureCustomFontsLoaded: () => {}, - getCustomFonts: jest.fn(), - getCuratedFonts: jest.fn(), + loadCustomFonts: jest.fn(), + loadCuratedFonts: jest.fn(), }, }; diff --git a/packages/story-editor/src/components/panels/design/textStyle/test/fontPicker.js b/packages/story-editor/src/components/panels/design/textStyle/test/fontPicker.js index 46ecf38ffcda..4825ea89421d 100644 --- a/packages/story-editor/src/components/panels/design/textStyle/test/fontPicker.js +++ b/packages/story-editor/src/components/panels/design/textStyle/test/fontPicker.js @@ -45,8 +45,8 @@ function arrange(options) { actions: { ensureMenuFontsLoaded: () => {}, ensureCustomFontsLoaded: () => {}, - getCustomFonts: jest.fn(), - getCuratedFonts: jest.fn(), + loadCustomFonts: jest.fn(), + loadCuratedFonts: jest.fn(), }, }; const props = { diff --git a/packages/story-editor/src/components/panels/design/textStyle/test/textBox.js b/packages/story-editor/src/components/panels/design/textStyle/test/textBox.js index e5442d811bd9..7babd729bf66 100644 --- a/packages/story-editor/src/components/panels/design/textStyle/test/textBox.js +++ b/packages/story-editor/src/components/panels/design/textStyle/test/textBox.js @@ -83,8 +83,8 @@ function Wrapper({ children }) { actions: { maybeEnqueueFontStyle: () => Promise.resolve(), getFontByName: jest.fn(), - getCustomFonts: jest.fn(), - getCuratedFonts: jest.fn(), + loadCustomFonts: jest.fn(), + loadCuratedFonts: jest.fn(), }, }} > diff --git a/packages/story-editor/src/components/panels/design/textStyle/test/textStyle.js b/packages/story-editor/src/components/panels/design/textStyle/test/textStyle.js index a658610f279b..2c9f145bd32a 100644 --- a/packages/story-editor/src/components/panels/design/textStyle/test/textStyle.js +++ b/packages/story-editor/src/components/panels/design/textStyle/test/textStyle.js @@ -182,8 +182,8 @@ function Wrapper({ selectedElements, children }) { fallbacks: ['fallback1'], }), addRecentFont: jest.fn(), - getCustomFonts: jest.fn(), - getCuratedFonts: jest.fn(), + loadCustomFonts: jest.fn(), + loadCuratedFonts: jest.fn(), }, }} > diff --git a/packages/story-editor/src/karma/fixture/fixture.js b/packages/story-editor/src/karma/fixture/fixture.js index dc178dddb395..f2f9404c40a3 100644 --- a/packages/story-editor/src/karma/fixture/fixture.js +++ b/packages/story-editor/src/karma/fixture/fixture.js @@ -1124,7 +1124,7 @@ class APIProviderFixture { if ('builtin' === params.service) { return 'fonts.google.com' === params.service; } - return []; + return false; }); } diff --git a/packages/story-editor/src/utils/cleanForSlug.js b/packages/story-editor/src/utils/cleanForSlug.ts similarity index 86% rename from packages/story-editor/src/utils/cleanForSlug.js rename to packages/story-editor/src/utils/cleanForSlug.ts index c2a84d6e72be..0d91f3cbbeaa 100644 --- a/packages/story-editor/src/utils/cleanForSlug.js +++ b/packages/story-editor/src/utils/cleanForSlug.ts @@ -32,18 +32,21 @@ import removeAccents from 'remove-accents'; * for octets, HTML entities, or other encoded characters. * * @see https://github.com/WordPress/gutenberg/blob/5ff5acd2815d5260db15ab155fcaf4b3b80d7c1b/packages/url/src/clean-for-slug.js - * @param {string} string Title or slug to be processed. - * @param {boolean} isEditing Flag the user is currently editing the input + * @param string Title or slug to be processed. + * @param isEditing Flag the user is currently editing the input allowing extra hyphens (default false) - * @return {string} Processed string. + * @return Processed string. */ -export default function cleanForSlug(string, isEditing = false) { +export default function cleanForSlug(string: string, isEditing = false) { if (!string) { return ''; } + const pipe: [string] = [string]; + return ( - [removeAccents(string)] + pipe + .map((s) => removeAccents(s)) // Convert each group of whitespace, periods, and forward slashes to a hyphen. .map((s) => s.replace(/[\s./_]/g, '-')) // If not editing, remove hyphens from the beginning and ending. @@ -53,6 +56,6 @@ export default function cleanForSlug(string, isEditing = false) { .map((s) => (isEditing ? s : s.replace(/[^\p{L}\p{N}_-]+/gu, ''))) .map((s) => (isEditing ? s : s.replace(/--+/g, '-'))) .map((s) => s.toLowerCase()) - .pop() + .pop() as string ); } diff --git a/packages/story-editor/tsconfig.json b/packages/story-editor/tsconfig.json index 1e642fcafc1a..84eb8b65d6a1 100644 --- a/packages/story-editor/tsconfig.json +++ b/packages/story-editor/tsconfig.json @@ -9,6 +9,7 @@ { "path": "../design-system" }, { "path": "../elements" }, { "path": "../element-library" }, + { "path": "../fonts" }, { "path": "../i18n" }, { "path": "../masks" }, { "path": "../migration" }, @@ -19,20 +20,21 @@ { "path": "../tracking" } ], "include": [ - "src/app/api/*", - "src/app/config/*", - "src/app/currentUser/*", - "src/app/helpCenter/**/*", + "src/app/api", + "src/app/config", + "src/app/currentUser", + "src/app/helpCenter", "src/app/history", - "src/app/layout/*", + "src/app/font", + "src/app/layout", "src/app/media/*.ts", "src/app/media/media3p/*.ts", "src/app/media/media3p/*.tsx", "src/app/media/utils/*.ts", "src/app/story", - "src/constants/*", - "src/types/*", - "src/typings/*", + "src/constants", + "src/types", + "src/typings", "src/utils/*.ts" ] }