ncu grapesjs-data-source

11ty-test/storage/default/website.json

@@ -1 +1 @@
-{"assets":[],"styles":[{"selectors":["#ih31"],"style":{"padding":"10px"}},{"selectors":["#iubw"],"style":{"padding":"10px"}},{"selectors":["#iagj"],"style":{"padding":"10px"}}],"pages":[{"frames":[{"component":{"type":"wrapper","stylable":["background","background-color","background-image","background-repeat","background-attachment","background-position","background-size"],"attributes":{"id":"ipxq"},"components":[{"type":"text","attributes":{"id":"ih31"},"components":[{"type":"textnode","content":"Insert your text here"}],"privateStates":[],"id-plugin-data-source":"ih31-8432","publicStates":[],"remove-from-published-site":true,"remove-from-published":true,"plugin-unwrap":true},{"type":"text","attributes":{"id":"iubw"},"components":[{"type":"textnode","content":"Insert your text here aaa"},{"tagName":"br","void":true}],"privateStates":[{"id":"innerHTML","expression":[{"type":"state","storedStateId":"pages","label":"All items","componentId":"ipxq-5918","exposed":true}]}],"id-plugin-data-source":"ih31-8432","publicStates":[],"remove-from-published-site":true,"remove-from-published":true,"plugin-unwrap":true},{"type":"text","attributes":{"id":"iagj"},"components":[{"type":"textnode","content":"Insert your text here bbb"},{"tagName":"br","void":true}],"privateStates":[],"id-plugin-data-source":"ih31-8432","publicStates":[],"remove-from-published-site":false,"plugin-unwrap":true}],"nameForDataSource":"","publicStates":[{"id":"pagination","hidden":true,"label":"Pagination","expression":[{"label":"Unused pagination label","type":"property","propType":"field","fieldId":"pagination","dataSourceId":"eleventy","typeIds":["pagination"],"kind":"object"}]},{"id":"items","hidden":true,"label":"Current items","expression":[{"label":"Unused items label","type":"property","propType":"field","fieldId":"continents","dataSourceId":"countries_api","typeIds":["continents"],"kind":"list"}]},{"id":"pages","hidden":true,"label":"All items","expression":[{"label":"Unused pages label","type":"property","propType":"field","fieldId":"continents","dataSourceId":"countries_api","typeIds":["continents"],"kind":"list"}]}],"id-plugin-data-source":"ipxq-5918"},"id":"3eEl7XcKEdTRaaYa"}],"type":"main","id":"8s4b0dAtQAMMpkIX","settings":{"eleventyPageData":"countries_api.continents","eleventyPageSize":"1","head":""}},{"name":"New page","frames":[{"component":{"type":"wrapper","stylable":["background","background-color","background-image","background-repeat","background-attachment","background-position","background-size"],"nameForDataSource":"","publicStates":[{"id":"pagination","hidden":true,"label":"Pagination","expression":[{"label":"Unused pagination label","type":"property","propType":"field","fieldId":"pagination","dataSourceId":"eleventy","typeIds":["pagination"],"kind":"object"}]},{"id":"items","hidden":true,"label":"Current items","expression":[{"label":"Unused items label","type":"property","propType":"field","fieldId":"continents","dataSourceId":"countries_api","typeIds":["continents"],"kind":"list"}]},{"id":"pages","hidden":true,"label":"All items","expression":[{"label":"Unused pages label","type":"property","propType":"field","fieldId":"continents","dataSourceId":"countries_api","typeIds":["continents"],"kind":"list"}]}]},"id":"R3sB6QhSEKweusuD"}],"id":"y9X52YJcyTuYW8scL","settings":{"name":"New page","eleventyPageData":"countries_api.continents","eleventyPageSize":"1","head":""}}],"settings":{},"fonts":[],"symbols":[],"publication":{"connector":{"connectorId":"fs-hosting","type":"HOSTING","displayName":"File system hosting","icon":"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202L6%2022%2018%2022%2018%207%2012%202%206%202Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%202L12%202%2012%208%2018%208%2018%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E","disableLogout":true,"isLoggedIn":true,"oauthUrl":null,"color":"#ffffff","background":"#006400"}}}
+{"assets":[],"styles":[],"pages":[{"frames":[{"component":{"type":"wrapper","stylable":["background","background-color","background-image","background-repeat","background-attachment","background-position","background-size"],"attributes":{"id":"it1p"},"nameForDataSource":"","publicStates":[]},"id":"HKzeEXUxowMXtlNP"}],"type":"main","id":"wrkbMsP8gsunBX3M","settings":{"title":"aaaa","eleventySeoTitle":"[{\"type\":\"property\",\"propType\":\"field\",\"fieldId\":\"fixed\",\"label\":\"Fixed value\",\"kind\":\"scalar\",\"typeIds\":[\"String\"],\"options\":{\"value\":\"aaaaa\"}}]","eleventySeoDescription":"[{\"type\":\"property\",\"propType\":\"field\",\"fieldId\":\"fixed\",\"label\":\"Fixed value\",\"kind\":\"scalar\",\"typeIds\":[\"String\"],\"options\":{\"value\":\"zzzzzzzzzzzzzzzzzzzzzzz\"}}]","eleventyFavicon":"[{\"type\":\"property\",\"propType\":\"field\",\"fieldId\":\"page\",\"label\":\"Page\",\"typeIds\":[\"page\"],\"dataSourceId\":\"eleventy\",\"kind\":\"object\",\"options\":{}},{\"type\":\"property\",\"propType\":\"field\",\"fieldId\":\"lang\",\"label\":\"Lang\",\"typeIds\":[\"string\"],\"dataSourceId\":\"eleventy\",\"kind\":\"scalar\",\"options\":{}}]","eleventyOGImage":"[]","eleventyOGTitle":"[]","eleventyOGDescription":"[]","head":""}}],"dataSources":[],"settings":{},"fonts":[],"symbols":[],"publication":{}}

package.json

@@ -46,7 +46,7 @@
     "lit-html": "^3.0.2"
   },
   "dependencies": {
-    "@silexlabs/grapesjs-data-source": "^0.0.93",
+    "@silexlabs/grapesjs-data-source": "^0.0.97",
     "dedent": "^1.5.3",
     "deepmerge": "^4.3.1"
   },

src/client/DataSource.ts

@@ -39,6 +39,7 @@ class EleventyDataSource extends Backbone.Model<EleventyPluginOptions> implement
    * Implement IDatasource
    */
   async connect(): Promise<void> {}
+  isConnected(): boolean { return true }
 
   /**
    * Implement IDatasource

src/client/settings.ts → src/client/page-settings.ts

@@ -2,7 +2,6 @@ import { DataSourceEditor, DataSourceId, Field, StateEditor } from '@silexlabs/g
 import { ClientConfig } from '@silexlabs/silex/src/ts/client/config'
 import { EleventyPluginOptions, Silex11tyPluginWebsiteSettings } from '../client'
 import { html } from 'lit'
-import { ref } from 'lit/directives/ref.js'
 
 interface FieldsByDataSource {
   dataSourceId: DataSourceId
@@ -13,14 +12,13 @@ interface FieldsByDataSource {
  * Handle the formdata event to update the settings
  * FIXME: this should be handled by the StateEditor component
  */
-function handleFormdataEvent(settingName: string) {
-  return (el) => {
-    setTimeout(() => {
-      el?.closest('form')?.addEventListener('formdata', (event: FormDataEvent) => {
-        const formData = event.formData
-        formData.set(settingName, (el as StateEditor).value)
-      })
-    })
+function handleFormdataEvent(event: FormDataEvent) {
+  const el = this
+  const settingName = el.getAttribute('name')
+  console.log('handleFormdataEvent', {el, settingName})
+  return (event: FormDataEvent) => {
+    const formData = event.formData
+    formData.set(settingName, (el as StateEditor).value)
   }
 }
 
@@ -127,7 +125,6 @@ export default function(config: ClientConfig, opts: EleventyPluginOptions): void
             name="eleventySeoTitle"
             value=${settings.eleventySeoTitle ?? ''}
             .editor=${config.getEditor()}
-            ${ref(handleFormdataEvent('eleventySeoTitle'))}
           >
             <label slot="label">Title</label>
           </state-editor>
@@ -136,7 +133,6 @@ export default function(config: ClientConfig, opts: EleventyPluginOptions): void
             name="eleventySeoDescription"
             value=${settings.eleventySeoDescription ?? ''}
             .editor=${config.getEditor()}
-            ${ref(handleFormdataEvent('eleventySeoDescription'))}
           >
             <label slot="label">Description</label>
           </state-editor>
@@ -145,7 +141,6 @@ export default function(config: ClientConfig, opts: EleventyPluginOptions): void
             name="eleventyFavicon"
             value=${settings.eleventyFavicon ?? ''}
             .editor=${config.getEditor()}
-            ${ref(handleFormdataEvent('eleventyFavicon'))}
           >
             <label slot="label">Favicon</label>
           </state-editor>
@@ -157,7 +152,6 @@ export default function(config: ClientConfig, opts: EleventyPluginOptions): void
             name="eleventyOGImage"
             value=${settings.eleventyOGImage ?? ''}
             .editor=${config.getEditor()}
-            ${ref(handleFormdataEvent('eleventyOGImage'))}
           >
             <label slot="label">OG Image</label>
           </state-editor>
@@ -166,7 +160,6 @@ export default function(config: ClientConfig, opts: EleventyPluginOptions): void
             name="eleventyOGTitle"
             value=${settings.eleventyOGTitle ?? ''}
             .editor=${config.getEditor()}
-            ${ref(handleFormdataEvent('eleventyOGTitle'))}
           >
             <label slot="label">OG Title</label>
           </state-editor>
@@ -175,7 +168,6 @@ export default function(config: ClientConfig, opts: EleventyPluginOptions): void
             name="eleventyOGDescription"
             value=${settings.eleventyOGDescription ?? ''}
             .editor=${config.getEditor()}
-            ${ref(handleFormdataEvent('eleventyOGDescription'))}
           >
             <label slot="label">OG Description</label>
           </state-editor>