@silexlabs/silex 3.0.2 → 3.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",
@@ -133,7 +133,6 @@
     "grapesjs": "^0.21.13",
     "grapesjs-blocks-basic": "1.0.2",
     "grapesjs-custom-code": "1.0.2",
-    "grapesjs-navbar": "^1.0.2",
     "grapesjs-plugin-forms": "2.0.6",
     "grapesjs-style-bg": "^2.0.2",
     "grapesjs-style-border": "1.0.4",

package/src/ts/client/grapesjs/index.ts

@@ -32,7 +32,6 @@ import blocksBasicPlugin from 'grapesjs-blocks-basic'
 import styleFilterPlugin from 'grapesjs-style-filter'
 import formPlugin from 'grapesjs-plugin-forms'
 import codePlugin from 'grapesjs-custom-code'
-import navbarPlugin from 'grapesjs-navbar'
 import uiSuggestClasses from '@silexlabs/grapesjs-ui-suggest-classes'
 import filterStyles from '@silexlabs/grapesjs-filter-styles'
 import symbolsPlugin from '@silexlabs/grapesjs-symbols'
@@ -101,7 +100,6 @@ const plugins = [
   {name: './resize-panel', value: resizePanelPlugin},
   {name: '@silexlabs/grapesjs-notifications', value: notificationsPlugin},
   {name: '@silexlabs/grapesjs-keymaps-dialog', value: keymapsDialogPlugin},
-  {name: 'grapesjs-navbar', value:navbarPlugin}
 ]
 // Check that all plugins are loaded correctly
 plugins
@@ -360,11 +358,6 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
         longPressDuration: null,
         shortcut: 'shift+h',
       },
-      [navbarPlugin.toString()]:{
-        block:{
-          category: 'Components'
-        }
-      }
     },
   }
 }

package/src/ts/client/publication-transformers.test.ts

@@ -139,26 +139,26 @@ describe('publication-transformers', () => {
   })
 
   it('should transform a style rule with background image', () => {
-    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': 'url(test.png)' })
+    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': 'url("test.png")' })
     const transformPermalink = transformer.transformPermalink as Mock
     const transformedSrc = 'transformed.png'
     const transformedSrc2 = 'transformed2.png'
     transformPermalink.mockImplementation((url, type) => (url as string).replace('test.png', transformedSrc).replace('test2.png', transformedSrc2))
-    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': `url(${transformedSrc})` })
-    expect(transformBgImage(editor, { 'background-image': 'url("test.png")' })).toEqual({ 'background-image': `url(${transformedSrc})` })
+    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': `url("${transformedSrc}")` })
+    expect(transformBgImage(editor, { 'background-image': 'url("test.png")' })).toEqual({ 'background-image': `url("${transformedSrc}")` })
     expect(transformBgImage(editor, {
       'background-image': 'linear-gradient(to right, rgb(30 75 115 / 100%), url(test.png), linear-gradient(to left, rgb(30 75 115 / 10%), url(test2.png), rgb(255 255 255 / 0%));',
     })).toEqual({
-      'background-image': `linear-gradient(to right, rgb(30 75 115 / 100%), url(${transformedSrc}), linear-gradient(to left, rgb(30 75 115 / 10%), url(${transformedSrc2}), rgb(255 255 255 / 0%));`,
+      'background-image': `linear-gradient(to right, rgb(30 75 115 / 100%), url("${transformedSrc}"), linear-gradient(to left, rgb(30 75 115 / 10%), url("${transformedSrc2}"), rgb(255 255 255 / 0%));`,
     })
   })
 
   it('should transform permalinks of background images in inline css', () => {
     const el = document.createElement('div')
     const [comp] = editor.addComponents(el)
-    comp.setStyle({ 'background-image': 'url(test.png)' })
+    comp.setStyle({ 'background-image': 'url("test.png")' })
     //editor.addComponents(`
-    //  <div style="color: black; background-image: url(test.png);"></div>
+    //  <div style="color: black; background-image: url("test.png");"></div>
     //`)
     const transformPermalink = transformer.transformPermalink as Mock
     const transformedSrc = 'transformed.png'
@@ -168,7 +168,7 @@ describe('publication-transformers', () => {
     expect(transformPermalink).toBeCalledTimes(1)
     expect(transformPermalink.mock.calls[0][0]).toBe('test.png')
     expect(transformPermalink.mock.calls[0][1]).toBe('asset')
-    expect(css).toContain('url(test.png)')
+    expect(css).toContain('url("test.png")')
   })
   it('should transform permalinks of background images in styles', () => {
     editor.addComponents(`
@@ -176,7 +176,7 @@ describe('publication-transformers', () => {
     `)
     editor.addStyle(`
       .test {
-        background-image: url(test.png);
+        background-image: url("test.png");
       }
     `)
     const transformPermalink = transformer.transformPermalink as Mock
@@ -187,7 +187,7 @@ describe('publication-transformers', () => {
     expect(transformPermalink).toBeCalledTimes(1)
     expect(transformPermalink.mock.calls[0][0]).toBe('test.png')
     expect(transformPermalink.mock.calls[0][1]).toBe('asset')
-    expect(css).toContain(`url(${transformedSrc})`)
+    expect(css).toContain(`url("${transformedSrc}")`)
   })
   it('should transform links to pages to match permalinks ', () => {
     editor.addComponents(`

package/src/ts/client/publication-transformers.ts

@@ -188,7 +188,7 @@ function doTransformPermalink(editor: Editor, cssValue: string): string {
     // Transform URLs
     const newUrl = transformPermalink(editor, cleanUrl, ClientSideFileType.ASSET, Initiator.CSS)
     // Return the new URL with url keyword
-    return `url(${newUrl})`
+    return `url("${newUrl}")`
   })
 }