@mosetta/editor 0.0.28 → 0.0.31

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @mosetta/editor
 
+## 0.0.31
+
+- Built with the framework 0.0.11: a block of a project's own tile palette, placed on a page, loads
+  from its palette wherever the workbench asks for it — the picker, the settings, the tree.
+
+## 0.0.30
+
+- A block of a project's own tile palette is placed with its default settings, and its page and
+  preview show it: its code is loaded from the palette it comes from.
+
+## 0.0.29
+
+- Built with the framework 0.0.10: the platform's pages run the framework a new project's tile
+  palette starts on.
+
 ## 0.0.28
 
 - Built with the framework 0.0.9: a block of a project's own tile palette loads the platform's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mosetta/editor",
-  "version": "0.0.28",
+  "version": "0.0.31",
   "license": "MIT",
   "description": "mosetta visual editor tile palette: block picker, page tree, inspector, isolated draft preview and the content API behind them.",
   "repository": {
@@ -14,15 +14,15 @@
   "dependencies": {
     "react": "*",
     "react-dom": "*",
-    "@mosetta/content": "0.0.9",
-    "@mosetta/core": "0.0.9",
-    "@mosetta/di": "0.0.9",
-    "@mosetta/stores": "0.0.9",
-    "@mosetta/settings": "0.0.9",
-    "@mosetta/server-action": "0.0.9",
-    "@mosetta/runtime": "0.0.9",
-    "@mosetta/ui": "0.0.9",
-    "@mosetta/react": "0.0.9"
+    "@mosetta/di": "0.0.11",
+    "@mosetta/core": "0.0.11",
+    "@mosetta/content": "0.0.11",
+    "@mosetta/react": "0.0.11",
+    "@mosetta/runtime": "0.0.11",
+    "@mosetta/settings": "0.0.11",
+    "@mosetta/server-action": "0.0.11",
+    "@mosetta/ui": "0.0.11",
+    "@mosetta/stores": "0.0.11"
   },
   "devDependencies": {
     "@types/react": "*",

package/tiles/content/blockPage.tsx

@@ -52,8 +52,8 @@ function useBlockFacets(component: ICatalogEntry): TFacets {
     void (async () => {
       try {
         const [editor, block] = await Promise.all([
-          component.hasEditor ? loadModule(holder, editorReferenceOf(component.id)) : Promise.resolve(undefined),
-          loadModule(holder, component.id),
+          component.hasEditor ? loadModule(holder, editorReferenceOf(component.id), component.base) : Promise.resolve(undefined),
+          loadModule(holder, component.id, component.base),
         ]);
         const defaults = (block?.module as IComponentFacet | undefined)?.defaultSettings?.() ?? {};
         const facet = editor?.module as IEditorFacet | undefined;

package/tiles/content/blockPicker.tsx

@@ -343,6 +343,7 @@ export function BlockPicker({ session, point, autoFocus, onCancel, specimen }: I
     previewTimer.current = setTimeout(() => setPreview({
       reference: component.id,
       hasEditor: component.hasEditor,
+      ...(component.base ? { base: component.base } : {}),
       libraryRoot: libraryRootOf(component),
       anchor: { top, left, right },
     }), PREVIEW_DELAY_MS);
@@ -357,8 +358,9 @@ export function BlockPicker({ session, point, autoFocus, onCancel, specimen }: I
       session.insertNode(item.key, {});
       return;
     }
+    // a block of a project's tile palette loads from that palette's host
     const loaded: { module?: unknown } | undefined = holder.loadModule
-      ? await holder.loadModule(item.key)
+      ? await holder.loadModule(item.key, item.component?.base)
       : holder.getModule(item.key);
     const mod = loaded?.module as IComponentModuleShape | undefined;
     session.insertNode(item.key, mod?.defaultSettings ? mod.defaultSettings() : {});

package/tiles/content/componentPreview.tsx

@@ -49,6 +49,8 @@ export interface IPreviewTarget {
   readonly reference: string;
   /** from the catalog: no editor facet, no declaration — nothing to load and nothing to ask */
   readonly hasEditor: boolean;
+  /** where the block's tile host keeps its tiles, when it is not the site's primary */
+  readonly base?: string;
   /** a root module of the block's OWN library, when it ships one (catalog `isRoot`) */
   readonly libraryRoot?: string;
   /** the hovered row, in window coordinates */
@@ -123,8 +125,8 @@ export function usePreviewPlan(target: IPreviewTarget | null, self: { namespace:
     void (async () => {
       try {
         const [editor, component] = await Promise.all([
-          loadModule(holder, editorReferenceOf(target.reference)),
-          loadModule(holder, target.reference),
+          loadModule(holder, editorReferenceOf(target.reference), target.base),
+          loadModule(holder, target.reference, target.base),
         ]);
         const loaded = editor?.module as IEditorFacet | undefined;
         // the facet's own blocks at the facet's own version — the preview was written at some earlier one

package/tiles/content/content.server.ts

@@ -115,6 +115,12 @@ class CatalogService {
     return typeof file === 'string' && file && base ? `${base.publicBase}modules/${entity.id}/${file}` : undefined;
   }
 
+  /** the public base of an entity's tile host when it is not the primary — where a page loads it from */
+  private baseOf(entity: IModuleDescriptor): string | undefined {
+    const key = (entity as { provider?: string }).provider;
+    return key ? this.hosts.find((h) => h.key === key)?.publicBase : undefined;
+  }
+
   /** palette entries: requested types (default: components), each paired with its editor facet */
   async entries(types?: string[]): Promise<ICatalogEntry[]> {
     const all = await this.descriptors();
@@ -124,7 +130,8 @@ class CatalogService {
       .filter((d) => wanted.has(d.reference.type))
       .map((d) => {
         const iconUrl = this.fileUrl(d, (d as { icon?: unknown }).icon);
-        return { ...d, hasEditor: editors.has(facetKey(d)), ...(iconUrl ? { iconUrl } : {}) };
+        const base = this.baseOf(d);
+        return { ...d, hasEditor: editors.has(facetKey(d)), ...(iconUrl ? { iconUrl } : {}), ...(base ? { base } : {}) };
       });
   }
 

package/tiles/content/mountedTree.ts

@@ -42,8 +42,8 @@ const fallbackOf = (tree: IBlueprintNode): string | null => {
   return typeof named === 'string' ? named : null;
 };
 
-export async function loadModule(holder: ITilesHolder, reference: string) {
-  const loaded = holder.loadModule ? await holder.loadModule(reference) : holder.getModule(reference);
+export async function loadModule(holder: ITilesHolder, reference: string, base?: string) {
+  const loaded = holder.loadModule ? await holder.loadModule(reference, base) : holder.getModule(reference);
   return loaded?.error ? undefined : loaded;
 }