Skip to content

Commit abf556c

Browse files
lexoyolexoyo
committed
initial commit
1 parent 4efa626 commit abf556c

10 files changed

+14806
-16
lines changed

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
private/
3+
/locale
4+
node_modules/
5+
*.log
6+
_index.html
7+
dist/
8+
stats.json

‎.npmignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.*
2+
*.log
3+
*.html
4+
**/tsconfig.json
5+
**/webpack.config.js
6+
node_modules
7+
src

‎LICENSE

+4-16
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,9 @@
11
MIT License
22

3-
Copyright (c) 2023 Silex Labs
3+
Copyright (c) 2023-current Grapesjs Fonts
44

5-
Permission is hereby granted, free of charge, to any person obtaining a copy
6-
of this software and associated documentation files (the "Software"), to deal
7-
in the Software without restriction, including without limitation the rights
8-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9-
copies of the Software, and to permit persons to whom the Software is
10-
furnished to do so, subject to the following conditions:
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
116

12-
The above copyright notice and this permission notice shall be included in all
13-
copies or substantial portions of the Software.
7+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
148

15-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21-
SOFTWARE.
9+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

+231
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
# Grapesjs Fonts
2+
3+
Custom Fonts plugin for grapesjs
4+
5+
> This code is part of a bigger project for me (@lexoyo): [Silex v3](https://github.com/silexlabs/Silex/tree/v3)
6+
7+
## About this plugin
8+
9+
Links
10+
11+
* [DEMO on Codepen](https://codepen.io/lexoyo/pen/zYLWdxY)
12+
* [Npm package](https://www.npmjs.com/package/@silexlabs/grapesjs-fonts)
13+
* [Discussion about this plugins and Symbols, bug report etc](https://github.com/artf/grapesjs/discussions/4317)
14+
* [Discussion about ongoing developments](https://github.com/artf/grapesjs/discussions/4858#discussioncomment-4756119)
15+
16+
It looks like this:
17+
18+
![Screenshot from 2023-01-20 16-20-56](https://user-images.githubusercontent.com/715377/213734511-7e66175b-cb72-4a61-b215-2af64f5d532c.png)
19+
![Screenshot from 2023-01-20 16-19-41](https://user-images.githubusercontent.com/715377/213734520-adc1072f-ed94-4a01-b1e0-3560a6816083.png)
20+
21+
22+
The plugin currently has these features
23+
24+
* API to add / remove fonts from the site (from goole font name)
25+
* Updates the DOM and the "font family" dropdown
26+
* Save the fonts with the site data
27+
* Load the fonts when site data is loaded (add to the DOM on load)
28+
* UI to manage fonts
29+
* Integration with google API
30+
* Store google fonts list in local storage for performance and API quotas
31+
32+
Limitations:
33+
34+
For now this plugin supports only Goolge fonts and use the V2 API. It should be upgraded to V3 and take advantage of variable fonts.
35+
36+
I would love help on this:
37+
38+
* Code review and suggestions
39+
* Support Google fonts V3 API
40+
* Other providers than Google fonts
41+
42+
See the "Development" section bellow to contribute
43+
44+
### Motivations
45+
46+
I saw discussions and issues like "How can i add custom fonts in grapesjs editor? #4563"
47+
48+
What seems to work for me is
49+
50+
1. update the "font family" dropdown
51+
```
52+
const styleManager = editor.StyleManager
53+
const fontProperty = styleManager.getProperty('typography', 'font-family')
54+
fontProperty.setOptions(fonts)
55+
styleManager.render()
56+
```
57+
1. update the DOM to display the font correctly: add style elements to the editor.Canvas.getDocument()
58+
59+
This is quite easy but here are the things which took me time as I implemented google fonts
60+
61+
* use google fonts api to select fonts and get their name, variants, weights
62+
* build the URL of the fonts to load
63+
* the UI to manage and install fonts
64+
65+
## Use the plugin in your website builder
66+
67+
### HTML
68+
```html
69+
70+
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
71+
<script src="https://unpkg.com/grapesjs"></script>
72+
<script src="https://unpkg.com/grapesjs-fonts"></script>
73+
74+
<div id="gjs"></div>
75+
```
76+
77+
### JS
78+
```js
79+
const editor = grapesjs.init({
80+
container: '#gjs',
81+
height: '100%',
82+
fromElement: true,
83+
storageManager: false,
84+
plugins: ['@silexlabs/grapesjs-fonts'],
85+
});
86+
```
87+
88+
This will make sure the fonts are saved and loaded with the website data
89+
90+
Here is how to open the fonts dialog:
91+
92+
```js
93+
editor.runCommand('open-fonts')
94+
```
95+
96+
And you can use the plugin's API:
97+
98+
```js
99+
// TODO: expose the API
100+
101+
```
102+
103+
### CSS
104+
```css
105+
body, html {
106+
margin: 0;
107+
height: 100%;
108+
}
109+
```
110+
111+
Also you should style the dialog:
112+
113+
```css
114+
.silex-form select {
115+
...
116+
}
117+
```
118+
119+
120+
## Summary
121+
122+
* Plugin name: `@silexlabs/grapesjs-fonts`
123+
* Components
124+
* `component-id-1`
125+
* `component-id-2`
126+
* ...
127+
* Blocks
128+
* `block-id-1`
129+
* `block-id-2`
130+
* ...
131+
132+
133+
134+
## Options
135+
136+
| Option | Description | Default |
137+
|-|-|-
138+
| `api_key` | Google fonts API key, [see this doc to get an API key](https://developers.google.com/fonts/docs/developer_api#APIKey) | `default value` |
139+
140+
141+
142+
## Download
143+
144+
* CDN
145+
* `https://unpkg.com/@silexlabs/grapesjs-fonts`
146+
* NPM
147+
* `npm i @silexlabs/grapesjs-fonts`
148+
* GIT
149+
* `git clone https://github.com/silexlabs/grapesjs-fonts.git`
150+
151+
152+
153+
## Usage
154+
155+
Directly in the browser
156+
```html
157+
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
158+
<script src="https://unpkg.com/grapesjs"></script>
159+
<script src="path/to/grapesjs-fonts.min.js"></script>
160+
161+
<div id="gjs"></div>
162+
163+
<script type="text/javascript">
164+
var editor = grapesjs.init({
165+
container: '#gjs',
166+
// ...
167+
plugins: ['@silexlabs/grapesjs-fonts'],
168+
pluginsOpts: {
169+
'@silexlabs/grapesjs-fonts': {
170+
api_key: '...',
171+
}
172+
}
173+
});
174+
</script>
175+
```
176+
177+
Modern javascript
178+
```js
179+
import grapesjs from 'grapesjs';
180+
import plugin from '@silexlabs/grapesjs-fonts';
181+
import 'grapesjs/dist/css/grapes.min.css';
182+
183+
const editor = grapesjs.init({
184+
container : '#gjs',
185+
// ...
186+
plugins: [plugin],
187+
pluginsOpts: {
188+
[plugin]: {
189+
api_key: '...',
190+
}
191+
}
192+
// or
193+
plugins: [
194+
editor => plugin(editor, {
195+
api_key: '...',
196+
}),
197+
],
198+
});
199+
```
200+
201+
## Development
202+
203+
Clone the repository
204+
205+
```sh
206+
$ git clone https://github.com/silexlabs/grapesjs-fonts.git
207+
$ cd grapesjs-fonts
208+
```
209+
210+
Install dependencies
211+
212+
```sh
213+
$ npm i
214+
```
215+
216+
Start the dev server
217+
218+
```sh
219+
$ npm start
220+
```
221+
222+
Build the source
223+
224+
```sh
225+
$ npm run build
226+
```
227+
228+
## License
229+
230+
MIT
231+

0 commit comments

Comments
 (0)