diff --git a/packages/app/package.json b/packages/app/package.json index aa02e169357..cf84a62d49d 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -72,7 +72,6 @@ "@codesandbox/executors": "^0.1.0", "@codesandbox/template-icons": "^1.0.1", "@emmetio/codemirror-plugin": "^0.3.5", - "@samuelmeuli/font-manager": "^1.2.0", "@sentry/webpack-plugin": "^1.8.0", "@styled-system/css": "^5.0.23", "@svgr/core": "^2.4.1", diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/List.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/List.tsx index aa3d63e251c..5cb66f052b3 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/List.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/List.tsx @@ -1,56 +1,46 @@ import React, { FunctionComponent, useState, useMemo } from 'react'; -import { Font } from '@samuelmeuli/font-manager'; import { List, SearchFonts, FontLI, FontFamily, Arrow } from './elements'; +import { fonts } from './fonts'; type Props = { - fonts: Font[]; onSelection: (e: any) => void; activeFontFamily: string; - expanded: boolean; }; export const FontList: FunctionComponent = ({ - fonts, onSelection, activeFontFamily, - expanded, }) => { const [searchTerm, setSearchTerm] = useState(''); + const usedFonts = fonts.slice(0, 200); const updateSearch = (e: any) => setSearchTerm(e.target.value); - const getFontId = (fontFamily: string): string => - fontFamily.replace(/\s+/g, '-').toLowerCase(); - - const getFonts: Font[] = useMemo( + const getFonts: string[] = useMemo( () => - fonts.filter(f => - f.family.toLowerCase().includes(searchTerm.trim().toLowerCase()) + usedFonts.filter(f => + f.toLowerCase().includes(searchTerm.trim().toLowerCase()) ), - [fonts, searchTerm] + [searchTerm, usedFonts] ); return ( <> - + - {getFonts.map((font: Font) => ( + {getFonts.map((font: string) => ( onSelection(font)} + onKeyPress={() => onSelection(font)} > - - {font.family} + + {font} ))} diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/elements.ts index 3a8753230d3..fbfa7f0dda1 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/elements.ts @@ -1,6 +1,11 @@ -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import Color from 'color'; +const svg = props => + `data:image/svg+xml,%3Csvg width='7' height='4' viewBox='0 0 7 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.50007 4L1.27146e-07 1.35122e-07L7 -4.76837e-07L3.50007 4Z' fill='${ + props.theme.light ? 'black' : 'white' + }'/%3E%3C/svg%3E%0A`; + const makeDarker = ({ theme }) => Color(theme['input.background']) .darken(theme.light ? 0.1 : 0.3) @@ -80,13 +85,8 @@ export const List = styled.ul<{ expanded?: boolean }>` background-color: ${props => makeLighter(props)}; width: 240px; z-index: 10; - - ${props => - props.expanded && - css` - max-height: 130px; - display: block; - `} + max-height: 130px; + display: block; `; export const SelectedFont = styled.button<{ done?: boolean }>` @@ -105,23 +105,18 @@ export const SelectedFont = styled.button<{ done?: boolean }>` position: relative; box-sizing: border-box; outline: none; + cursor: pointer; - ${props => - props.done && - css` - :after { - content: ''; - background-image: url("${`data:image/svg+xml,%3Csvg width='7' height='4' viewBox='0 0 7 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.50007 4L1.27146e-07 1.35122e-07L7 -4.76837e-07L3.50007 4Z' fill='${ - props.theme.light ? 'black' : 'white' - }'/%3E%3C/svg%3E%0A`}"); - width: 7px; - height: 4px; - position: absolute; - right: 0.5rem; - top: 50%; - transform: translateY(-50%); - } - `} + :after { + content: ''; + background-image: url("${props => svg(props)}"); + width: 7px; + height: 4px; + position: absolute; + right: 0.5rem; + top: 50%; + transform: translateY(-50%); + } `; export const Arrow = styled.div` diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/fonts.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/fonts.ts new file mode 100644 index 00000000000..4b0e079b87a --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/fonts.ts @@ -0,0 +1,975 @@ +export const fonts = [ + 'Roboto', + 'Open Sans', + 'Lato', + 'Montserrat', + 'Roboto Condensed', + 'Source Sans Pro', + 'Oswald', + 'Raleway', + 'Roboto Mono', + 'Poppins', + 'Roboto Slab', + 'Merriweather', + 'Noto Sans', + 'PT Sans', + 'Ubuntu', + 'Playfair Display', + 'Open Sans Condensed', + 'Muli', + 'PT Serif', + 'Lora', + 'Nunito', + 'Slabo 27px', + 'Titillium Web', + 'Fira Sans', + 'Rubik', + 'Noto Sans JP', + 'Work Sans', + 'Noto Serif', + 'Nanum Gothic', + 'Quicksand', + 'PT Sans Narrow', + 'Arimo', + 'Noto Sans KR', + 'Inconsolata', + 'Nunito Sans', + 'Dosis', + 'Oxygen', + 'Heebo', + 'Cabin', + 'Karla', + 'Libre Baskerville', + 'Bitter', + 'Josefin Sans', + 'Crimson Text', + 'Libre Franklin', + 'Varela Round', + 'Noto Sans TC', + 'Source Code Pro', + 'Hind', + 'Anton', + 'Indie Flower', + 'Lobster', + 'Fjalla One', + 'Barlow', + 'Abel', + 'Mukta', + 'Arvo', + 'Source Serif Pro', + 'Dancing Script', + 'Pacifico', + 'Exo 2', + 'Shadows Into Light', + 'Merriweather Sans', + 'Yanone Kaffeesatz', + 'Asap', + 'Overpass', + 'Questrial', + 'Abril Fatface', + 'Bree Serif', + 'EB Garamond', + 'Archivo Narrow', + 'Acme', + 'Barlow Condensed', + 'Comfortaa', + 'IBM Plex Sans', + 'Kanit', + 'Cairo', + 'Amatic SC', + 'Teko', + 'Signika', + 'Maven Pro', + 'Exo', + 'Play', + 'Noto Sans SC', + 'Fira Sans Condensed', + 'Catamaran', + 'Hind Siliguri', + 'Righteous', + 'Ubuntu Condensed', + 'PT Sans Caption', + 'Patua One', + 'Domine', + 'Assistant', + 'Crete Round', + 'Ropa Sans', + 'Cinzel', + 'Vollkorn', + 'Cormorant Garamond', + 'Prompt', + 'Monda', + 'Permanent Marker', + 'ABeeZee', + 'Hind Madurai', + 'Rajdhani', + 'Francois One', + 'Cuprum', + 'Rokkitt', + 'Caveat', + 'Courgette', + 'Satisfy', + 'Zilla Slab', + 'Amiri', + 'Pathway Gothic One', + 'Barlow Semi Condensed', + 'News Cycle', + 'Alegreya Sans', + 'Alegreya', + 'Fredoka One', + 'Fira Sans Extra Condensed', + 'Noticia Text', + 'Alfa Slab One', + 'Martel', + 'Istok Web', + 'Kalam', + 'Cardo', + 'Old Standard TT', + 'Kaushan Script', + 'Nanum Myeongjo', + 'Bowlby One SC', + 'Great Vibes', + 'Tinos', + 'Tajawal', + 'Staatliches', + 'Archivo Black', + 'Lobster Two', + 'Baloo Bhai', + 'Quattrocento Sans', + 'Gloria Hallelujah', + 'Cantarell', + 'Sacramento', + 'Orbitron', + 'Vidaloka', + 'Advent Pro', + 'IBM Plex Serif', + 'Patrick Hand', + 'M PLUS 1p', + 'Cookie', + 'Volkhov', + 'Didact Gothic', + 'Luckiest Guy', + 'Frank Ruhl Libre', + 'Quattrocento', + 'Concert One', + 'Noto Serif JP', + 'Gothic A1', + 'Neuton', + 'Economica', + 'Poiret One', + 'Sanchez', + 'Passion One', + 'Josefin Slab', + 'BenchNine', + 'Prata', + 'Hind Vadodara', + 'Russo One', + 'Spectral', + 'Playfair Display SC', + 'Special Elite', + 'Neucha', + 'Yrsa', + 'Handlee', + 'Hind Guntur', + 'Parisienne', + 'Changa', + 'Gudea', + 'Philosopher', + 'Ruda', + 'Bangers', + 'Archivo', + 'Sawarabi Mincho', + 'Ultra', + 'Chivo', + 'Quantico', + 'Cabin Condensed', + 'Asap Condensed', + 'Montserrat Alternates', + 'Yantramanav', + 'Nanum Gothic Coding', + 'Paytone One', + 'Armata', + 'Saira Extra Condensed', + 'M PLUS Rounded 1c', + 'Arapey', + 'Monoton', + 'Khand', + 'Viga', + 'Pontano Sans', + 'Alice', + 'Lalezar', + 'Unica One', + 'Marck Script', + 'Hammersmith One', + 'Taviraj', + 'Amaranth', + 'Yellowtail', + 'Bad Script', + 'Gentium Basic', + 'Enriqueta', + 'Tangerine', + 'PT Mono', + 'Architects Daughter', + 'Saira Condensed', + 'Glegoo', + 'Sigmar One', + 'Gochi Hand', + 'Audiowide', + 'Gentium Book Basic', + 'Merienda', + 'Varela', + 'Karma', + 'Actor', + 'Adamina', + 'Saira', + 'Julius Sans One', + 'Homemade Apple', + 'Pridi', + 'Sorts Mill Goudy', + 'Fugaz One', + 'Nanum Pen Script', + 'Mitr', + 'Signika Negative', + 'Baloo', + 'Ubuntu Mono', + 'Press Start 2P', + 'Shadows Into Light Two', + 'Unna', + 'Kreon', + 'Cantata One', + 'Allura', + 'Sarala', + 'Sintony', + 'Pragati Narrow', + 'Encode Sans Condensed', + 'Cormorant', + 'Rock Salt', + 'Rasa', + 'Lusitana', + 'Yeseva One', + 'Covered By Your Grace', + 'Oleo Script', + 'Alegreya Sans SC', + 'Sarabun', + 'El Messiri', + 'Scada', + 'Jaldi', + 'Boogaloo', + 'Marvel', + 'Playball', + 'Tenor Sans', + 'IBM Plex Mono', + 'Reenie Beanie', + 'Khula', + 'Damion', + 'Carter One', + 'PT Serif Caption', + 'Abhaya Libre', + 'Arbutus Slab', + 'Jura', + 'Palanquin', + 'Pinyon Script', + 'Antic Slab', + 'Alex Brush', + 'Marcellus', + 'Forum', + 'Chewy', + 'Coda', + 'Markazi Text', + 'Nothing You Could Do', + 'Mr Dafoe', + 'Squada One', + 'Basic', + 'Fauna One', + 'Bevan', + 'Michroma', + 'Spinnaker', + 'Marmelad', + 'Lustria', + 'Electrolize', + 'Rubik Mono One', + 'Sawarabi Gothic', + 'Candal', + 'Alef', + 'Aclonica', + 'Rancho', + 'Cousine', + 'Aldrich', + 'Reem Kufi', + 'VT323', + 'Molengo', + 'Encode Sans', + 'Average', + 'Niramit', + 'Caveat Brush', + 'Sunflower', + 'Black Ops One', + 'Lilita One', + 'Rambla', + 'Nobile', + 'Allerta', + 'Fredericka the Great', + 'Encode Sans Semi Condensed', + 'Days One', + 'Rufina', + 'Scheherazade', + 'Cabin Sketch', + 'Antic', + 'Fira Mono', + 'Coming Soon', + 'Italianno', + 'Niconne', + 'Overlock', + 'Share Tech Mono', + 'Just Another Hand', + 'Space Mono', + 'Biryani', + 'Allerta Stencil', + 'Knewave', + 'Leckerli One', + 'Mukta Malar', + 'Lateef', + 'Saira Semi Condensed', + 'Radley', + 'Arima Madurai', + 'Hanuman', + 'Oranienbaum', + 'Copse', + 'Norican', + 'Telex', + 'Grand Hotel', + 'Rochester', + 'Syncopate', + 'Aladin', + 'DM Sans', + 'Arsenal', + 'Itim', + 'Noto Serif SC', + 'Mountains of Christmas', + 'Cinzel Decorative', + 'Lekton', + 'Share', + 'Martel Sans', + 'Baloo Bhaina', + 'Shrikhand', + 'Berkshire Swash', + 'DM Serif Text', + 'Miriam Libre', + 'Gruppo', + 'Londrina Solid', + 'Marcellus SC', + 'Palanquin Dark', + 'Allan', + 'Halant', + 'Lemonada', + 'Overpass Mono', + 'Anonymous Pro', + 'Magra', + 'Kameron', + 'Annie Use Your Telescope', + 'Nanum Brush Script', + 'Coda Caption', + 'Ramabhadra', + 'Racing Sans One', + 'Krub', + 'Bai Jamjuree', + 'Kosugi Maru', + 'Changa One', + 'Alegreya SC', + 'Graduate', + 'Judson', + 'Suranna', + 'Yesteryear', + 'Nixie One', + 'Bentham', + 'Coustard', + 'Pattaya', + 'Caudex', + 'Petit Formal Script', + 'Mada', + 'Belleza', + 'Slabo 13px', + 'Contrail One', + 'Poly', + 'Carrois Gothic', + 'Mali', + 'Carme', + 'Buenard', + 'Do Hyeon', + 'Cambo', + 'Aleo', + 'Capriola', + 'Sriracha', + 'Jockey One', + 'Arizonia', + 'Rosario', + 'Encode Sans Semi Expanded', + 'Noto Serif TC', + 'Trirong', + 'Eczar', + 'Voltaire', + 'Herr Von Muellerhoff', + 'Titan One', + 'Bungee Inline', + 'Sue Ellen Francisco', + 'Bungee', + 'GFS Didot', + 'Cambay', + 'Red Hat Text', + 'Calligraffitti', + 'Kelly Slab', + 'Merienda One', + 'Bubblegum Sans', + 'Maitree', + 'Gilda Display', + 'Kristi', + 'Faustina', + 'Delius', + 'DM Serif Display', + 'Oxygen Mono', + 'Love Ya Like A Sister', + 'Average Sans', + 'Goudy Bookletter 1911', + 'Anaheim', + 'Baloo Bhaijaan', + 'Trocchi', + 'ZCOOL XiaoWei', + 'Cutive', + 'Cutive Mono', + 'Chakra Petch', + 'Metrophobic', + 'Ceviche One', + 'Red Hat Display', + 'Schoolbell', + 'Encode Sans Expanded', + 'Duru Sans', + 'Shojumaru', + 'Freckle Face', + 'Mukta Vaani', + 'Rye', + 'Ovo', + 'Mr De Haviland', + 'Six Caps', + 'Andada', + 'Lexend Deca', + 'IBM Plex Sans Condensed', + 'Big Shoulders Text', + 'Amethysta', + 'Pompiere', + 'Vesper Libre', + 'Cormorant Infant', + 'Homenaje', + 'Federo', + 'McLaren', + 'Kadwa', + 'Laila', + 'Suez One', + 'Cedarville Cursive', + 'Fanwood Text', + 'Montez', + 'Black Han Sans', + 'IM Fell English', + 'IM Fell Double Pica', + 'Inder', + 'Unkempt', + 'Averia Serif Libre', + 'Emilys Candy', + 'Secular One', + 'Brawler', + 'Sansita', + 'Happy Monkey', + 'Balthazar', + 'Doppio One', + 'Rozha One', + 'Aref Ruqaa', + 'Mate', + 'Gabriela', + 'Chonburi', + 'Baumans', + 'Pangolin', + 'BioRhyme', + 'Noto Serif KR', + 'IM Fell DW Pica', + 'Amiko', + 'Megrim', + 'Corben', + 'Chelsea Market', + 'Oregano', + 'Athiti', + 'Convergence', + 'Geo', + 'Gravitas One', + 'Gurajada', + 'Short Stack', + 'Raleway Dots', + 'Battambang', + 'Kosugi', + 'Vast Shadow', + 'La Belle Aurore', + 'Lemon', + 'Fondamento', + 'Skranji', + 'Limelight', + 'Baloo Chettan', + 'UnifrakturMaguntia', + 'Proza Libre', + 'Seaweed Script', + 'Jua', + 'Denk One', + 'Qwigley', + 'Prociono', + 'Belgrano', + 'Alike', + 'Crafty Girls', + 'Wallpoet', + 'Sofia', + 'Waiting for the Sunrise', + 'Mallanna', + 'Carrois Gothic SC', + 'Spicy Rice', + 'Give You Glory', + 'Share Tech', + 'Rouge Script', + 'Cormorant SC', + 'Scope One', + 'Sniglet', + 'Kurale', + 'Patrick Hand SC', + 'Bowlby One', + 'Fjord One', + 'Cantora One', + 'Strait', + 'Quando', + 'Fresca', + 'Stardos Stencil', + 'Expletus Sans', + 'Finger Paint', + 'Zeyada', + 'Gafata', + 'Spectral SC', + 'Andika', + 'Podkova', + 'Amarante', + 'Oleo Script Swash Caps', + 'Crushed', + 'Cherry Swash', + 'Mirza', + 'Meddon', + 'Harmattan', + 'Faster One', + 'Aguafina Script', + 'Katibeh', + 'Loved by the King', + 'Amita', + 'Mouse Memoirs', + 'Nova Square', + 'Voces', + 'IM Fell English SC', + 'Tienne', + 'Esteban', + 'Delius Swash Caps', + 'Galada', + 'Libre Barcode 39', + 'Orienta', + 'Bilbo Swash Caps', + 'Clicker Script', + 'Literata', + 'Puritan', + 'Cormorant Upright', + 'Averia Sans Libre', + 'Wendy One', + 'Sedgwick Ave', + 'Baloo Da', + 'Mako', + 'Krona One', + 'Euphoria Script', + 'Bungee Shade', + 'Walter Turncoat', + 'Just Me Again Down Here', + 'Dawning of a New Day', + 'Baloo Thambi', + 'Averia Libre', + 'The Girl Next Door', + 'Alike Angular', + 'Tauri', + 'Charm', + 'Rationale', + 'Montserrat Subrayada', + 'Spirax', + 'Rammetto One', + 'Poller One', + 'Wire One', + 'Overlock SC', + 'Over the Rainbow', + 'Mrs Saint Delafield', + 'NTR', + 'Bellefair', + 'Fontdiner Swanky', + 'Imprima', + 'K2D', + 'Atma', + 'Ledger', + 'Rum Raisin', + 'Codystar', + 'Holtwood One SC', + 'Iceland', + 'Baloo Paaji', + 'Creepster', + 'Rakkas', + 'Life Savers', + 'Salsa', + 'Numans', + 'Princess Sofia', + 'Ruslan Display', + 'Pavanam', + 'Habibi', + 'Bubbler One', + 'Engagement', + 'Hanalei Fill', + 'Port Lligat Sans', + 'Dokdo', + 'Sarpanch', + 'Lily Script One', + 'Artifika', + 'Slackey', + 'Shanti', + 'Nova Mono', + 'Headland One', + 'Mandali', + 'Prosto One', + 'Song Myung', + 'Mogra', + 'Vampiro One', + 'Modak', + 'Asul', + 'Vibur', + 'Saira Stencil One', + 'David Libre', + 'Elsie', + 'Noto Sans HK', + 'Englebert', + 'Koulen', + 'Kranky', + 'B612 Mono', + 'Antic Didone', + 'Port Lligat Slab', + 'Vollkorn SC', + 'Cherry Cream Soda', + 'Frijole', + 'Manjari', + 'Sirin Stencil', + 'Zilla Slab Highlight', + 'Farsan', + 'Medula One', + 'Ranchers', + 'Eater', + 'Ruluko', + 'Livvic', + 'Padauk', + 'Kotta One', + 'Mukta Mahee', + 'Peralta', + 'Blinker', + 'Dynalight', + 'Kumar One', + 'Underdog', + 'IM Fell French Canon', + 'Metamorphous', + 'Arya', + 'Gugi', + 'Dekko', + 'Sail', + 'Buda', + 'Bilbo', + 'Coiny', + 'Nova Round', + 'Baloo Tamma', + 'Yatra One', + 'Mate SC', + 'Macondo Swash Caps', + 'Almendra', + 'Meera Inimai', + 'Sonsie One', + 'Pirata One', + 'Mystery Quest', + 'Khmer', + 'Germania One', + 'Donegal One', + 'Dorsa', + 'Sarina', + 'Inknut Antiqua', + 'Timmana', + 'Stint Ultra Condensed', + 'Flamenco', + 'Chau Philomene One', + 'Condiment', + 'Tulpen One', + 'Simonetta', + 'Milonga', + 'Chicle', + 'Manuale', + 'Thasadith', + 'Ramaraja', + 'Libre Caslon Text', + 'Fascinate Inline', + 'Rosarivo', + 'ZCOOL QingKe HuangYou', + 'Darker Grotesque', + 'Ranga', + 'Delius Unicase', + 'Junge', + 'Nova Slim', + 'Moul', + 'Kite One', + 'Gaegu', + 'Plaster', + 'Trade Winds', + 'Chathura', + 'Stalemate', + 'Paprika', + 'Fenix', + 'Ewert', + 'Italiana', + 'Miniver', + 'Almarai', + 'Ribeye Marrow', + 'Cagliostro', + 'Londrina Outline', + 'Jacques Francois Shadow', + 'Quintessential', + 'Mina', + 'Angkor', + 'Ribeye', + 'Nokora', + 'Henny Penny', + 'Galdeano', + 'Lovers Quarrel', + 'IM Fell Great Primer', + 'League Script', + 'Stoke', + 'Swanky and Moo Moo', + 'Cormorant Unicase', + 'Sura', + 'Srisakdi', + 'Diplomata', + 'IM Fell DW Pica SC', + 'Sancreek', + 'Averia Gruesa Libre', + 'Della Respira', + 'Text Me One', + 'Maiden Orange', + 'Glass Antiqua', + 'Julee', + 'Sumana', + 'Uncial Antiqua', + 'Petrona', + 'New Rocker', + 'Griffy', + 'Barriecito', + 'Linden Hill', + 'Farro', + 'Be Vietnam', + 'Nosifer', + 'Joti One', + 'Redressed', + 'Marko One', + 'Hepta Slab', + 'Vibes', + 'IM Fell French Canon SC', + 'Sree Krushnadevaraya', + 'Trochut', + 'Tillana', + 'Kavoon', + 'Big Shoulders Display', + 'Bokor', + 'Wellfleet', + 'Croissant One', + 'Chela One', + 'Grenze', + 'Eagle Lake', + 'Akronim', + 'Barrio', + 'Offside', + 'Stint Ultra Expanded', + 'Liu Jian Mao Cao', + 'Monsieur La Doulaise', + 'Margarine', + 'B612', + 'UnifrakturCook', + 'Revalia', + 'Chango', + 'Elsie Swash Caps', + 'Nova Flat', + 'Unlock', + 'Autour One', + 'Charmonman', + 'Bebas Neue', + 'Content', + 'Trykker', + 'Ruthie', + 'Inika', + 'Chilanka', + 'Monofett', + 'Notable', + 'Baloo Tammudu', + 'Kodchasan', + 'Oldenburg', + 'Irish Grover', + 'Rhodium Libre', + 'Mrs Sheppards', + 'Asar', + 'Smythe', + 'Metal Mania', + 'Montaga', + 'Hi Melody', + 'Iceberg', + 'KoHo', + 'Modern Antiqua', + 'Lakki Reddy', + 'Mansalva', + 'Bigshot One', + 'Crimson Pro', + 'Felipa', + 'Original Surfer', + 'Bahiana', + 'Smokum', + 'Fira Code', + 'Stylish', + 'Dr Sugiyama', + 'MedievalSharp', + 'Asset', + 'Meie Script', + 'Purple Purse', + 'IM Fell Great Primer SC', + 'Sahitya', + 'Libre Barcode 128', + 'Keania One', + 'Miltonian Tattoo', + 'Fahkwang', + 'Molle', + 'Devonshire', + 'Libre Barcode 39 Text', + 'Ruge Boogie', + 'Snowburst One', + 'Caesar Dressing', + 'Arbutus', + 'Poor Story', + 'Snippet', + 'Jim Nightshade', + 'Libre Barcode 39 Extended Text', + 'Bayon', + 'Ravi Prakash', + 'Odor Mean Chey', + 'Lancelot', + 'Risque', + 'Atomic Age', + 'Dangrek', + 'Londrina Shadow', + 'ZCOOL KuaiLe', + 'Freehand', + 'Libre Barcode 39 Extended', + 'IM Fell Double Pica SC', + 'Goblin One', + 'Major Mono Display', + 'Diplomata SC', + 'Kantumruy', + 'Yeon Sung', + 'Cute Font', + 'Seymour One', + 'Gorditas', + 'Gamja Flower', + 'Kavivanar', + 'Jacques Francois', + 'Kumar One Outline', + 'Jolly Lodger', + 'Kenia', + 'Sunshiney', + 'Flavors', + 'Astloch', + 'GFS Neohellenic', + 'Black And White Picture', + 'Nova Cut', + 'Butterfly Kids', + 'Almendra SC', + 'Piedra', + 'Almendra Display', + 'Romanesco', + 'Suwannaphum', + 'Miltonian', + 'Siemreap', + 'Tenali Ramakrishna', + 'Kirang Haerang', + 'Alata', + 'Bungee Outline', + 'Macondo', + 'East Sea Dokdo', + 'Fruktur', + 'Supermercado One', + 'Jomhuria', + 'Nova Script', + 'Nova Oval', + 'Galindo', + 'Bigelow Rules', + 'Metal', + 'Combo', + 'Sedgwick Ave Display', + 'Jomolhari', + 'Miss Fajardose', + 'Erica One', + 'Passero One', + 'Geostar Fill', + 'Aubrey', + 'Bonbon', + 'Emblema One', + 'Londrina Sketch', + 'Sevillana', + 'Butcherman', + 'Libre Barcode 128 Text', + 'Taprom', + 'Mr Bedfort', + 'Sofadi One', + 'Geostar', + 'Preahvihear', + 'Gidugu', + 'Kdam Thmor', + 'Hanalei', + 'Bungee Hairline', + 'Peddana', + 'Suravaram', + 'Calistoga', + 'Fascinate', + 'Public Sans', + 'Federant', + 'Libre Caslon Display', + 'Lexend Exa', + 'Chenla', + 'Stalinist One', + 'Moulpali', + 'Beth Ellen', + 'Dhurjati', + 'Alatsi', + 'Lexend Tera', + 'Fasthand', + 'Gayathri', + 'BioRhyme Expanded', + 'Tomorrow', + 'Ma Shan Zheng', + 'Warnes', + 'Turret Road', + 'Lacquer', + 'Single Day', + 'Lexend Mega', + 'Lexend Zetta', + 'Odibee Sans', + 'Zhi Mang Xing', + 'Lexend Peta', + 'Lexend Giga', + 'Kulim Park', + 'Bahianita', + 'Long Cang', + 'Ibarra Real Nova', + 'Baskervville', + 'Sulphur Point', + 'Solway', + 'Gupter', +]; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/index.tsx index 46cfc3d1a4b..57849c0b8dd 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/index.tsx @@ -1,45 +1,14 @@ -import { - FontManager, - Font, - FONT_FAMILY_DEFAULT, - OPTIONS_DEFAULTS, -} from '@samuelmeuli/font-manager'; import React, { useState, useEffect, useRef } from 'react'; import OutsideClickHandler from 'react-outside-click-handler'; import { Portal } from 'reakit'; import { SelectedFont } from './elements'; import { FontList } from './List'; -export const FontPicker = ({ - activeFontFamily = FONT_FAMILY_DEFAULT, - onChange, - apiKey, -}) => { +export const FontPicker = ({ activeFontFamily = 'Open Sans', onChange }) => { const [expanded, setExpanded] = useState(false); - const [loadingStatus, setLoadingStatus] = useState('loading'); - const [fontManager, setFontManager] = useState(); const [style, setStyle] = useState({ x: 0, y: 0 }); const ref = useRef(null); - useEffect(() => { - const manager = new FontManager( - apiKey, - activeFontFamily, - { ...OPTIONS_DEFAULTS, limit: 200 }, - onChange - ); - setFontManager(manager); - - manager - .init() - .then(() => setLoadingStatus('finished')) - .catch((err: Error) => { - setLoadingStatus('error'); - console.error(err); - }); - // eslint-disable-next-line - }, []); - useEffect(() => { if (ref && ref.current) { const styles = ref.current.getBoundingClientRect(); @@ -50,53 +19,39 @@ export const FontPicker = ({ } }, [ref]); - const onSelection = (e: any): void => { - const active = e.target.textContent; - if (!active) { - throw Error(`Missing font family in clicked font button`); - } - fontManager.setActiveFont(active); - toggleExpanded(); - }; - const toggleExpanded = () => setExpanded(exp => !exp); - - const fonts: Font[] = - fontManager && Array.from(fontManager.getFonts().values()); - return ( <> - {loadingStatus === 'loading' ? 'Loading Typefaces' : activeFontFamily} + {activeFontFamily} - {expanded && loadingStatus === 'finished' && ( - + + {expanded && (
setExpanded(false)}> { + onChange(font); + setExpanded(false); + }} activeFontFamily={activeFontFamily} - expanded={expanded} />
- - )} + )} + ); }; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/index.js index 4900de84a37..888d4754e47 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/index.js +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/index.js @@ -22,9 +22,8 @@ export const AddFont = ({ addResource, addedResource }) => { <> setActiveFontFamily(nextFont.family)} + onChange={nextFont => setActiveFontFamily(nextFont)} /> diff --git a/yarn.lock b/yarn.lock index 6cd176541e4..2f0d2d485aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3079,13 +3079,6 @@ react-lifecycles-compat "^3.0.4" warning "^3.0.0" -"@samuelmeuli/font-manager@^1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@samuelmeuli/font-manager/-/font-manager-1.2.0.tgz#ec9ec3dab4cbbd56ce2f579f332bbd7e3aa26894" - integrity sha512-ChNcTdVDL0OjXAMQYi8R9ScXvVZ3p32/4MupKbGksGtF1xPKKTM6vEo74XCBo7LEPQ+Eb+BiS9yD4B0Oo4/LQw== - dependencies: - "@babel/runtime" "^7.5.5" - "@samverschueren/stream-to-observable@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"