Add Asset Path Resolver

Author: alexcibotari

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@localess/react",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "ReactJS JavaScript/TypeScript SDK for Localess's API.",
   "keywords": [
     "localess",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localess/react",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "ReactJS JavaScript/TypeScript SDK for Localess's API.",
   "keywords": [
     "localess",

packages/react/package.json

@@ -1,12 +1,13 @@
 import type React from 'react';
 import {loadLocalessSync, type LocalessClient, localessClient} from "@localess/js-client";
 import {FONT_BOLD, FONT_NORMAL} from "./console";
-import {type LocalessOptions} from "./models";
+import {type LocalessOptions, type ContentAsset} from "./models";
 
 let _client: LocalessClient | undefined = undefined
 let _components: Record<string, React.ElementType> = {};
 let _fallbackComponent: React.ElementType | undefined = undefined;
 let _enableSync: boolean = false;
+let _assetPathPrefix = '';
 
 /**
  * Initialize Localess Client
@@ -18,6 +19,8 @@ export function localessInit(options: LocalessOptions): LocalessClient {
   const {components, fallbackComponent, enableSync, ...restOptions} = options;
   _client = localessClient(restOptions);
 
+  _assetPathPrefix = `${options.origin}/api/v1/spaces/${options.spaceId}/assets/`;
+
   _components = components || {};
   _fallbackComponent = fallbackComponent;
   if (enableSync) {
@@ -100,6 +103,15 @@ export function isSyncEnabled(): boolean {
   return _enableSync;
 }
 
+/**
+ * Resolve Asset URL
+ * @param asset - ContentAsset
+ * @returns Asset URL
+ */
+export function resolveAsset(asset: ContentAsset) {
+  return `${_assetPathPrefix}${asset.uri}`;
+}
+
 // Client + Edit
 export {llEditable, llEditableField, localessEditable, localessEditableField, isBrowser, isServer, isIframe} from '@localess/js-client'
 export type {LocalessClient} from '@localess/js-client'

packages/react/src/index.ts

@@ -17,6 +17,11 @@ import {Code} from "@tiptap/extension-code";
 import {CodeBlockLowlight} from "@tiptap/extension-code-block-lowlight";
 import {Link} from "@tiptap/extension-link";
 
+/**
+ * Render Localess Rich Text content to React elements
+ * @param content - The Rich Text content to render
+ * @returns React.ReactNode - The rendered React elements
+ */
 export function renderRichTextToReact(content: ContentRichText): React.ReactNode {
   return renderToReactElement({
     content,