@silexlabs/silex 3.7.0 → 3.9.0-canary.2

package/grapesjs-plugins/grapesjs-fonts/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@silexlabs/grapesjs-fonts",
+  "version": "1.2.2",
+  "description": "GrapesJS Fonts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/silexlabs/grapesjs-fonts.git"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "scripts": {
+    "start": "grapesjs-cli serve",
+    "build": "grapesjs-cli build --patch=false",
+    "lint": "eslint src"
+  },
+  "keywords": [
+    "silex",
+    "grapesjs",
+    "grapesjs-plugin",
+    "plugin",
+    "font",
+    "typography"
+  ],
+  "devDependencies": {
+    "eslint": "^10.6.0",
+    "grapesjs-cli": "^4.1.3"
+  },
+  "peerDependencies": {
+    "grapesjs": ">=0.19.0 <0.23.0",
+    "lit-html": "*"
+  },
+  "author": {
+    "name": "Alex Hoyau",
+    "url": "https://lexoyo.me/"
+  },
+  "license": "GPL-3.0"
+}

package/grapesjs-plugins/grapesjs-fonts/src/capabilities.js

@@ -0,0 +1,61 @@
+import { cmdGetHtml, cmdFontsInstalled, cmdFontsAvailable, cmdFontsInstall, cmdFontsRemove } from './commands.js'
+
+export function registerCapabilities(addCapability) {
+  addCapability({
+    id: cmdGetHtml,
+    command: cmdGetHtml,
+    description: 'Get HTML imports for installed fonts',
+    readOnly: true,
+    tags: ['fonts'],
+  })
+  addCapability({
+    id: cmdFontsInstalled,
+    command: cmdFontsInstalled,
+    description: 'List installed fonts',
+    readOnly: true,
+    tags: ['fonts'],
+  })
+  addCapability({
+    id: cmdFontsAvailable,
+    command: cmdFontsAvailable,
+    description: 'List available Google Fonts',
+    readOnly: true,
+    openWorld: true,
+    inputSchema: {
+      type: 'object',
+      properties: {
+        search: { type: 'string' },
+        category: { type: 'string', enum: ['serif', 'sans-serif', 'display', 'handwriting', 'monospace'] },
+      },
+    },
+    tags: ['fonts'],
+  })
+  addCapability({
+    id: cmdFontsInstall,
+    command: cmdFontsInstall,
+    description: 'Install a Google Font by family name',
+    openWorld: true,
+    inputSchema: {
+      type: 'object',
+      required: ['family'],
+      properties: {
+        family: { type: 'string' },
+      },
+    },
+    tags: ['fonts'],
+  })
+  addCapability({
+    id: cmdFontsRemove,
+    command: cmdFontsRemove,
+    description: 'Remove an installed font',
+    destructive: true,
+    inputSchema: {
+      type: 'object',
+      required: ['family'],
+      properties: {
+        family: { type: 'string' },
+      },
+    },
+    tags: ['fonts'],
+  })
+}

package/grapesjs-plugins/grapesjs-fonts/src/commands.js

@@ -0,0 +1,100 @@
+import { getHtml, refresh, getAvailableFonts, getApiUrl, loadFontList } from './fonts'
+
+export const cmdGetCss = 'get-fonts-css'
+export const cmdGetHtml = 'get-fonts-html'
+export const cmdFontsInstalled = 'fonts:installed'
+export const cmdFontsAvailable = 'fonts:available'
+export const cmdFontsInstall = 'fonts:install'
+export const cmdFontsRemove = 'fonts:remove'
+
+export default function (editor, opts) {
+  editor.Commands.add(cmdGetCss, () => {
+    throw new Error('get-fonts-css is not implemented. Use get-fonts-html instead.')
+  })
+  editor.Commands.add(cmdGetHtml, (editor) => {
+    const fonts = editor.getModel().get('fonts') || []
+    return getHtml(fonts)
+  })
+
+  // List installed fonts
+  editor.Commands.add(cmdFontsInstalled, () => {
+    const fonts = editor.getModel().get('fonts') || []
+    return fonts.map(f => ({
+      family: f.family,
+      category: f.category,
+      variants: f.variants || [],
+    }))
+  })
+
+  // List available Google Fonts (with optional search/category filter).
+  // Loads the font list on demand from the Google Fonts API if not cached.
+  // Returns a Promise — callers must await the result.
+  editor.Commands.add(cmdFontsAvailable, async (editor, sender, options = {}) => {
+    let list = getAvailableFonts()
+    if (!list) {
+      if (!opts || !opts.api_key) {
+        throw new Error('Font list not loaded and no api_key configured. Provide api_key in plugin options to enable Google Fonts.')
+      }
+      list = await loadFontList(`${getApiUrl()}/webfonts/v1/webfonts?key=${encodeURIComponent(opts.api_key)}`)
+    }
+    if (!list) throw new Error('Could not load font list from Google Fonts API. Check api_key and network.')
+
+    const { search, category } = options
+    let filtered = list
+    if (search) {
+      const q = search.toLowerCase()
+      filtered = filtered.filter(f => f.family.toLowerCase().includes(q))
+    }
+    if (category) {
+      filtered = filtered.filter(f => f.category === category)
+    }
+    return filtered.map(f => ({
+      family: f.family,
+      category: f.category,
+      variants: f.variants,
+    }))
+  })
+
+  // Install a font by family name
+  editor.Commands.add(cmdFontsInstall, (editor, sender, options = {}) => {
+    const { family } = options
+    if (!family) throw new Error('Required: family (e.g. "Roboto", "Open Sans"). Use fonts:available to search.')
+
+    const fonts = editor.getModel().get('fonts') || []
+    if (fonts.find(f => f.family.toLowerCase() === family.toLowerCase())) {
+      throw new Error(`Font "${family}" already installed. Use fonts:installed to list installed fonts.`)
+    }
+
+    const available = getAvailableFonts() || []
+    const fontData = available.find(f => f.family.toLowerCase() === family.toLowerCase())
+    if (!fontData) {
+      throw new Error(`Font "${family}" not found in available fonts. Run fonts:available to load the font list first, then retry.`)
+    }
+
+    const newFont = {
+      family: fontData.family,
+      name: fontData.family,
+      category: fontData.category,
+      variants: fontData.variants,
+      value: `"${fontData.family}", ${fontData.category}`,
+    }
+    fonts.push(newFont)
+    editor.getModel().set('fonts', [...fonts])
+    refresh(editor, opts)
+    return { family: newFont.family, category: newFont.category, variants: newFont.variants }
+  })
+
+  // Remove an installed font
+  editor.Commands.add(cmdFontsRemove, (editor, sender, options = {}) => {
+    const { family } = options
+    if (!family) throw new Error('Required: family (e.g. "Roboto"). Use fonts:installed to list installed fonts.')
+
+    const fonts = editor.getModel().get('fonts') || []
+    const idx = fonts.findIndex(f => f.family === family)
+    if (idx === -1) throw new Error(`Font "${family}" not installed. Use fonts:installed to list installed fonts.`)
+
+    fonts.splice(idx, 1)
+    editor.getModel().set('fonts', [...fonts])
+    refresh(editor, opts)
+  })
+}

package/grapesjs-plugins/grapesjs-fonts/src/fonts.js

@@ -0,0 +1,396 @@
+import { html, render } from 'lit-html'
+import { map } from 'lit-html/directives/map.js'
+
+import {ref, createRef} from 'lit-html/directives/ref.js'
+
+const el = document.createElement('div')
+const styles = document.createElement('style')
+styles.textContent = `
+  .gfonts-section { padding: 8px 0 }
+  .gfonts-list { list-style: none; padding: 0; margin: 0 }
+  .gfonts-item { padding: 10px 12px; border: 1px solid var(--gjs-light-border); border-radius: 8px; margin-bottom: 10px; background: transparent; color: var(--gjs-font-color) }
+  .gfonts-item strong { display: block; font-size: 14px; margin-bottom: 4px; color: var(--gjs-font-color-active) }
+  .gfonts-item p { margin: 0 0 8px 0; color: var(--gjs-font-color); font-size: 12px }
+  .variants-toolbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 }
+  .variants-grid { display: flex; flex-wrap: wrap; gap: 6px }
+  .variants-grid label { background: var(--gjs-soft-light-color); border-radius: 4px; padding: 4px 6px; cursor: pointer; border: 1px solid transparent; color: var(--gjs-font-color) }
+  .variants-grid input { margin: 0 }
+  .gfonts-preview { padding: 6px; border: 1px solid var(--gjs-light-border); border-radius: 8px; background: var(--gjs-soft-light-color); margin: 6px 0 8px }
+  .preview-iframe { width: 100%; border: 0; height: 56px; background: transparent }
+  .silex-bar, .pagination-controls { display: flex; gap: 8px; align-items: center }
+  .silex-list { list-style: none; margin: 0; padding: 0 }
+  .silex-list > li { list-style: none }
+  fieldset.silex-group--simple { border: 0; padding: 0; margin: 0 }
+  fieldset.silex-group--simple legend { margin: 0; color: var(--gjs-font-color); font-size: 12px }
+  .gfonts-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
+  .gfonts-toolbar select, .gfonts-toolbar input { background: var(--gjs-main-light-color); color: var(--gjs-font-color); border: 1px solid var(--gjs-light-border); border-radius: 4px; padding: 4px 6px }
+  .gfonts-toolbar .silex-button { background: var(--gjs-main-light-color); color: var(--gjs-font-color); border: 1px solid var(--gjs-light-border) }
+  .gfonts-pager { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; color: var(--gjs-font-color) }
+  .gfonts-pager .page { opacity: .8 }
+  .gfonts-actions { display: flex; gap: 8px; margin-top: 6px }
+  .gfonts-btn--ghost { background: transparent; border: 1px solid var(--gjs-light-border); color: var(--gjs-font-color); padding: 2px 6px; font-size: 11px }
+  .gfonts-btn--danger { background: transparent; border: 1px solid var(--gjs-color-red); color: var(--gjs-color-red) }
+`
+document.head.appendChild(styles)
+let modal
+
+export const cmdOpenFonts = 'open-fonts'
+
+/**
+ * Constants
+ */
+const LS_FONTS = 'silex-loaded-fonts-list'
+
+/**
+ * Module variables
+ */
+let _fontsList
+let fonts = []
+let defaults = []
+
+/**
+ * Options
+ */
+let fontServer = 'https://fonts.googleapis.com'
+let fontApi = 'https://www.googleapis.com'
+
+/**
+ * Load available fonts only once per session
+ * Use local storage
+ */
+try {
+  _fontsList = JSON.parse(localStorage.getItem(LS_FONTS))
+} catch(e) {
+  console.error('Could not get fonts from local storage:', e)
+}
+
+/**
+ * Promised wait function
+ */
+async function wait(ms = 0) {
+  return new Promise(resolve => setTimeout(() => resolve(), ms))
+}
+
+/**
+ * When the dialog is opened
+ */
+async function loadFonts(editor) {
+  fonts = structuredClone(editor.getModel().get('fonts') || []).map(f => ({
+    ...f,
+    variants: f.variants || []
+  }))
+}
+
+/**
+ * When the dialog is closed
+ */
+function saveFonts(editor, opts) {
+  const model = editor.getModel()
+  model.set('fonts', fonts)
+  updateHead(editor, fonts)
+  updateUi(editor, fonts, opts)
+}
+
+/**
+ * Get the cached list of available fonts from Google
+ */
+export function getAvailableFonts() {
+  return _fontsList
+}
+
+/**
+ * Get the configured Google Fonts API base URL
+ */
+export function getApiUrl() {
+  return fontApi
+}
+
+/**
+ * Load the available fonts from google
+ */
+export async function loadFontList(url) {
+  _fontsList = _fontsList ?? (await (await fetch(url)).json())?.items
+
+  localStorage.setItem(LS_FONTS, JSON.stringify(_fontsList))
+  await wait() // let the dialog open
+  return _fontsList
+}
+
+export const fontsDialogPlugin = (editor, opts) => {
+  defaults = editor.StyleManager.getBuiltIn('font-family').options || []
+  if(opts.server_url) fontServer = opts.server_url
+  if(opts.api_url) fontApi = opts.api_url
+  if(!opts.api_key) throw new Error(editor.I18n.t('grapesjs-fonts.You must provide Google font api key'))
+
+  editor.Commands.add(cmdOpenFonts, {
+    run: () => {
+      modal = editor.Modal.open({
+        title: editor.I18n.t('grapesjs-fonts.Fonts'),
+        content: '',
+        attributes: { class: 'fonts-dialog' },
+      })
+        .onceClose(() => {
+          editor.stopCommand(cmdOpenFonts)
+        })
+      modal.setContent(el)
+      loadFonts(editor)
+      displayFontLists(editor, opts)
+      loadFontList(`${fontApi}/webfonts/v1/webfonts?key=${opts.api_key}`)
+        .then(fontsList => {
+          displayFontLists(editor, opts, fontsList)
+        })
+      return modal
+    },
+    stop: () => {
+      modal.close()
+    },
+  })
+
+  // Add fonts to the website on save
+  editor.on('storage:start:store', (data) => {
+    data.fonts = editor.getModel().get('fonts')
+  })
+
+  // Helper to register debounced font refreshes
+  let debouncedRefreshTimeout
+  const debouncedRefresh = () => {
+    clearTimeout(debouncedRefreshTimeout)
+    debouncedRefreshTimeout = setTimeout(() => refresh(editor, opts), 50)
+  }
+
+  // Add fonts to the website on load
+  editor.on('storage:end:load', (data) => {
+    const fonts = data.fonts || []
+    editor.getModel().set('fonts', fonts)
+    debouncedRefresh()
+  })
+
+  // Update the head and the ui when the frame is loaded
+  editor.on('canvas:frame:load', () => {
+    debouncedRefresh()
+  })
+
+  // When the page changes, update the dom
+  editor.on('page', () => {
+    debouncedRefresh()
+  })
+}
+
+const searchInputRef = createRef()
+
+let currentPage = 0
+let selectedCategory = ''
+
+function displayFontLists(editor, opts, originalFontsList = []) {
+  const searchInput = searchInputRef.value
+  const fontsPerPage = 10
+  let fontsList = JSON.parse(JSON.stringify(originalFontsList)) // deep copy to maintain original list
+  const activeFonts = fontsList.filter(f => {
+    const nameOk = match(f.family, searchInput?.value || '')
+    const catOk = selectedCategory ? f.category === selectedCategory : true
+    return nameOk && catOk
+  })
+
+  let pageCount = Math.ceil(activeFonts.length / fontsPerPage)
+  const cats = Array.from(new Set((originalFontsList || []).map(f => f.category).filter(Boolean))).sort()
+
+  // Adjust currentPage if it exceeds the available pages
+  if (currentPage >= pageCount) {
+    currentPage = Math.max(0, pageCount - 1)
+  }
+
+  const currentFonts = activeFonts.slice(currentPage * fontsPerPage, (currentPage + 1) * fontsPerPage)
+
+
+  render(html`
+    <div>
+      <div class="silex-form__element">
+        <h2>${editor.I18n.t('grapesjs-fonts.Installed fonts')}</h2>
+        <ul class="silex-list">
+          ${fonts && fonts.length ? map(fonts, font => html`
+            <li class="gfonts-item">
+              <strong>${font.family || 'Unknown Font'}</strong>
+              <p>${(font.category || ((_fontsList || []).find(f => f.family === font.family)?.category)) || 'No category'} - ${font.variants?.length || 0} variants</p>
+
+              <div class="gfonts-preview">
+                ${generateFontPreview(font)}
+              </div>
+              <fieldset class="silex-group--simple full-width">
+                <div class="variants-toolbar">
+                  <legend>${editor.I18n.t('grapesjs-fonts.Variants') || 'Variants'}</legend>
+                  <button class="silex-button gfonts-btn--ghost" type="button" @click=${() => {
+    const all = (((_fontsList || []).find(f => f.family === font.family)?.variants) || [])
+    const isAll = Array.isArray(font.variants) && all.length && all.every(v => font.variants.includes(v))
+    font.variants = isAll ? [] : [...all]
+    saveFonts(editor, opts)
+    displayFontLists(editor, opts, originalFontsList)
+  }}>${editor.I18n.t('grapesjs-fonts.Toggle all') || 'Toggle all'}</button>
+                </div>
+                <div class="variants-grid">
+                  ${map(((_fontsList || []).find(f => f.family === font.family)?.variants) || [], v => html`
+                    <label>
+                      <input
+                        type="checkbox"
+                        .checked=${(font.variants || []).includes(v)}
+                        @change=${e => {
+    const checked = e.target.checked
+    font.variants = Array.isArray(font.variants) ? font.variants : []
+    const has = font.variants.includes(v)
+    if (checked && !has) font.variants = [...font.variants, v]
+    if (!checked && has) font.variants = font.variants.filter(x => x !== v)
+    saveFonts(editor, opts)
+    displayFontLists(editor, opts, originalFontsList)
+  }}
+                      />
+                      ${v}
+                    </label>
+                  `)}
+                </div>
+              </fieldset>
+              <div class="gfonts-actions">
+                <button class="silex-button gfonts-btn--danger" type="button" @click=${() => { fonts = fonts.filter(x => x.family !== font.family); saveFonts(editor, opts); displayFontLists(editor, opts, originalFontsList) }}>${editor.I18n.t('grapesjs-fonts.Remove')}</button>
+              </div>
+
+            </li>
+          `) : html`<li class="gfonts-item" style="border-style:dashed; text-align:center; font-style:italic; color: var(--gjs-secondary-light-color)">${editor.I18n.t('grapesjs-fonts.No installed fonts') || 'No installed fonts yet'}</li>`}
+        </ul>
+
+      </div>
+      <div>
+        <h2>${editor.I18n.t('grapesjs-fonts.All fonts') || 'All fonts'}</h2>
+        <div class="silex-bar gfonts-toolbar">
+          <select @change=${e => { selectedCategory = e.target.value || ''; currentPage = 0; displayFontLists(editor, opts, originalFontsList) }}>
+            <option value="">All categories</option>
+            ${cats.map(c => html`<option value=${c} ?selected=${selectedCategory === c}>${c}</option>`)}
+          </select>
+          <input
+            type="text"
+            ${ref(searchInputRef)}
+            @input=${() => {
+    currentPage = 0
+    displayFontLists(editor, opts, originalFontsList)
+  }}
+            placeholder="${editor.I18n.t('grapesjs-fonts.Search')}"
+          />
+          <div class="gfonts-pager">
+            <button class="silex-button" ?disabled=${currentPage === 0} @click=${() => {
+  if (currentPage > 0) {
+    currentPage--
+    displayFontLists(editor, opts, originalFontsList)
+  }
+}}>${editor.I18n.t('grapesjs-fonts.Previous Page')}</button>
+            <span class="page">Page ${currentPage + 1} / ${pageCount}</span>
+            <button class="silex-button" ?disabled=${currentPage === pageCount - 1} @click=${() => {
+  if (currentPage < pageCount - 1) {
+    currentPage++
+    displayFontLists(editor, opts, originalFontsList)
+  }
+}}>${editor.I18n.t('grapesjs-fonts.Next Page')}</button>
+          </div>
+        </div>
+        <ul class="silex-list">
+          ${map(currentFonts, f => html`
+            <li class="gfonts-item">
+              <strong>${f.family}</strong>
+              <p>${f.category} - ${f.variants.length} variants</p>
+
+              <div class="gfonts-preview">
+                ${generateFontPreview(f)}
+              </div>
+              <button class="silex-button" @click=${() => installFont(editor, opts, f, fontsList)}>${editor.I18n.t('grapesjs-fonts.Add font')}</button>
+            </li>
+          `)}
+        </ul>
+      </div>
+    </div>
+    `, el)
+}
+
+function generateFontPreview(font) {
+  const family = font.family || font.name || ''
+  const famQ = family.replace(/ /g, '+')
+  const color = (getComputedStyle(document.documentElement).getPropertyValue('--gjs-font-color') || '').trim() || getComputedStyle(el).color || '#ddd'
+  const inList = (_fontsList || []).find(f => f.family === family)
+  const rawVariants = Array.isArray(font.variants) && font.variants.length ? font.variants : (inList?.variants || ['regular'])
+  const pairs = []
+  rawVariants.forEach(v => {
+    const italic = /italic/i.test(v) ? 1 : 0
+    const m = String(v).match(/\d+/)
+    const w = m ? parseInt(m[0], 10) : 400
+    const key = `${italic},${w}`
+    if (!pairs.includes(key)) pairs.push(key)
+  })
+  const axis = pairs.length ? `:ital,wght@${pairs.join(';')}` : ''
+  const lines = pairs.map(k => {
+    const [ital, wght] = k.split(',')
+    const fs = ital === '1' ? 'italic' : 'normal'
+    return `<p style="margin:0; line-height:1.5; font-style:${fs}; font-weight:${wght}">${family} — Sphinx of black quartz, judge my vow. 0123456789</p>`
+  }).join('')
+  return html`
+    <iframe
+      class="preview-iframe"
+      srcdoc="<html><head><link href='https://fonts.googleapis.com/css2?family=${famQ}${axis}&display=swap' rel='stylesheet'><style>body { margin: 0; color: ${color}; font-family: '${family}', sans-serif }</style></head><body>${lines}</body></html>"></iframe>
+    `
+}
+
+function installFont(editor, opts, font, fontsList) {
+  const existingFont = fonts.find(f => f.family === font.family)
+  if (!existingFont) {
+    fonts.push({
+      family: font.family,
+      name: font.family,  // Ensure the font family name is set for both 'family' and 'name'
+      category: font.category,
+      variants: font.variants,
+      value: `"${font.family}", ${font.category}`
+    })
+  }
+  saveFonts(editor, opts)
+  displayFontLists(editor, opts, fontsList)
+}
+
+
+
+function match(hay, s) {
+  return hay.toLowerCase().includes(s.toLowerCase())
+}
+
+function removeAll(doc, attr) {
+  const all = doc.head.querySelectorAll(`[${attr}]`)
+  Array.from(all).forEach((el) => el.remove())
+}
+
+function updateHead(editor, fonts) {
+  const doc = editor.Canvas.getDocument()
+  if (!doc) {
+    return
+  }
+  removeAll(doc, GOOGLE_FONTS_ATTR)
+  const html = getHtml(fonts, GOOGLE_FONTS_ATTR)
+  doc.head.insertAdjacentHTML('beforeend', html)
+}
+
+function updateUi(editor, fonts, opts) {
+  const styleManager = editor.StyleManager
+  const fontProperty = styleManager.getProperty('typography', 'font-family')
+  if (!fontProperty) return
+  let list = fonts
+  if (opts && opts.preserveDefaultFonts) {
+    list = defaults.concat(fonts || [])
+  } else if (!fonts || fonts.length === 0) {
+    list = defaults
+  }
+  fontProperty.setOptions(list)
+}
+const GOOGLE_FONTS_ATTR = 'data-silex-gstatic'
+
+export function refresh(editor, opts) {
+  const fonts = editor.getModel().get('fonts') || []
+  updateHead(editor, fonts)
+  updateUi(editor, fonts, opts)
+}
+
+export function getHtml(fonts, attr = '') {
+  const preconnect = fonts.length ? `<link href="${fontServer}" rel="preconnect" ${attr}><link href="${fontServer}/css2" rel="preconnect" crossorigin ${attr}>` : ''
+  const links = fonts.map(f => `<link href="${fontServer}/css2?family=${f.name.replace(/ /g, '+')}&display=swap" rel="stylesheet" ${attr}>`).join('')
+  return preconnect + links
+}

package/grapesjs-plugins/grapesjs-fonts/src/index.js

@@ -0,0 +1,34 @@
+import { fontsDialogPlugin } from './fonts.js'
+import commands from './commands.js'
+import { registerCapabilities } from './capabilities.js'
+import en from './locale/en.js'
+import fr from './locale/fr.js'
+
+export default (editor, opts = {}) => {
+
+  const options = { ...{
+    // default options
+    i18n: {},
+    preserveDefaultFonts: true,
+  },  ...opts }
+
+
+  // Load i18n files
+  editor.I18n && editor.I18n.addMessages({
+    en,
+    fr,
+    ...options.i18n,
+  })
+
+  commands(editor, options)
+  fontsDialogPlugin(editor, options)
+
+  // Register AI capabilities if grapesjs-ai-capabilities is loaded
+  editor.on('ai-capabilities:ready', (addCapability) => {
+    registerCapabilities(addCapability)
+  })
+}
+
+// Expose commands to the app
+export * from './fonts.js'
+export * from './commands.js'

package/grapesjs-plugins/grapesjs-fonts/src/locale/en.js

@@ -0,0 +1,19 @@
+export default {
+  'grapesjs-fonts': {
+    'Fonts': 'Fonts',
+    'You must provide Google font api key': 'You must provide Google font api key, see https://developers.google.com/fonts/docs/developer_api#APIKey',
+    'Search': 'Search fonts...',
+    'Add font': 'Install font',
+    'Remove': 'Remove',
+    'Save': 'Save',
+    'Cancel': 'Cancel',
+    'Installed fonts': 'Installed fonts',
+    'All fonts': 'All fonts',
+    'Variants': 'Variants',
+    'Toggle all': 'Toggle all',
+    'No installed fonts': 'No installed fonts yet',
+    'Previous Page': 'Previous',
+    'Next Page': 'Next',
+  },
+}
+

package/grapesjs-plugins/grapesjs-fonts/src/locale/fr.js

@@ -0,0 +1,21 @@
+export default {
+  'grapesjs-fonts': {
+    'Fonts': 'Polices',
+    'You must provide Google font api key': 'Vous devez fournir une clé API Google font, voir https://developers.google.com/fonts/docs/developer_api#APIKey',
+    'Family': 'Famille',
+    'Search': 'Rechercher une police',
+    'Add font': 'Installer la police',
+    'Remove': 'Supprimer',
+    'Save': 'Enregistrer',
+    'Cancel': 'Annuler',
+    'Installed fonts': 'Polices installées',
+    'All fonts': 'Toutes les polices',
+    'Variants': 'Variantes',
+    'Toggle all': 'Tout sélectionner',
+    'No installed fonts': 'Aucune police installée',
+    'Previous Page': 'Précédent',
+    'Next Page': 'Suivant',
+  },
+}
+
+