veryfront 0.1.29 → 0.1.31

package/esm/deno.js

@@ -1,6 +1,6 @@
 export default {
     "name": "veryfront",
-    "version": "0.1.29",
+    "version": "0.1.31",
     "license": "Apache-2.0",
     "nodeModulesDir": "auto",
     "exclude": [

package/esm/src/studio/bridge-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bridge-template.d.ts","sourceRoot":"","sources":["../../../src/src/studio/bridge-template.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CAy/H/E"}
+{"version":3,"file":"bridge-template.d.ts","sourceRoot":"","sources":["../../../src/src/studio/bridge-template.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CAyqI/E"}

package/esm/src/studio/bridge-template.js

@@ -69,6 +69,13 @@ export function generateStudioBridgeScript(options) {
   let markdownLatestPresenceUsers = [];
   let markdownLatestSelections = [];
   let markdownHasUnsavedChanges = false;
+  let markdownSaveInProgress = false;
+  let markdownYDoc = null;
+  let markdownYProvider = null;
+  let markdownYText = null;
+  let markdownYjsConnected = false;
+  let markdownYjsSetupId = 0;
+  const LEXICAL_YJS_ORIGIN = 'lexical-yjs-binding';
 
   const MARKDOWN_SLASH_COMMANDS = [
     {
@@ -1409,6 +1416,142 @@ export function generateStudioBridgeScript(options) {
     }, 120);
   }
 
+  function computeTextDiff(oldText, newText) {
+    var prefixLen = 0;
+    var minLen = Math.min(oldText.length, newText.length);
+    while (prefixLen < minLen && oldText.charCodeAt(prefixLen) === newText.charCodeAt(prefixLen)) {
+      prefixLen++;
+    }
+    var suffixLen = 0;
+    var maxSuffix = minLen - prefixLen;
+    while (suffixLen < maxSuffix &&
+           oldText.charCodeAt(oldText.length - 1 - suffixLen) === newText.charCodeAt(newText.length - 1 - suffixLen)) {
+      suffixLen++;
+    }
+    return {
+      index: prefixLen,
+      deleteCount: oldText.length - prefixLen - suffixLen,
+      insertText: newText.slice(prefixLen, suffixLen > 0 ? newText.length - suffixLen : undefined)
+    };
+  }
+
+  function syncLocalChangeToYText(fullContent) {
+    if (!markdownYText || !markdownYDoc) {
+      return;
+    }
+    var currentYContent = markdownYText.toString();
+    if (currentYContent === fullContent) {
+      return;
+    }
+    var diff = computeTextDiff(currentYContent, fullContent);
+    if (diff.deleteCount === 0 && diff.insertText === '') {
+      return;
+    }
+    markdownYDoc.transact(function() {
+      if (diff.deleteCount > 0) {
+        markdownYText.delete(diff.index, diff.deleteCount);
+      }
+      if (diff.insertText) {
+        markdownYText.insert(diff.index, diff.insertText);
+      }
+    }, LEXICAL_YJS_ORIGIN);
+  }
+
+  function setupMarkdownYjsConnection(config) {
+    if (markdownYDoc) {
+      return;
+    }
+
+    var setupId = ++markdownYjsSetupId;
+
+    Promise.all([
+      import('https://esm.sh/yjs@13.6.28?target=es2022'),
+      import('https://esm.sh/y-websocket@2.1.0?target=es2022')
+    ]).then(function(modules) {
+      // Abort if edit mode was closed while imports were loading
+      if (setupId !== markdownYjsSetupId) {
+        return;
+      }
+
+      var Y = modules[0];
+      var WebsocketProvider = modules[1].WebsocketProvider;
+
+      var doc = new Y.Doc({ guid: config.guid });
+      var provider = new WebsocketProvider(config.wsUrl, config.guid, doc, {
+        resyncInterval: -1,
+        params: { token: config.authToken }
+      });
+
+      var ytext = doc.getText(config.fileId);
+
+      markdownYDoc = doc;
+      markdownYProvider = provider;
+      markdownYText = ytext;
+
+      // Filter non-binary messages to prevent y-websocket parse errors
+      provider.on('status', function(event) {
+        console.debug('[StudioBridge] Yjs status:', event.status);
+        if (event.status === 'connected' && provider.ws) {
+          var origOnMessage = provider.ws.onmessage;
+          provider.ws.onmessage = function(wsEvent) {
+            if (typeof wsEvent.data === 'string') {
+              return;
+            }
+            if (origOnMessage) {
+              origOnMessage.call(provider.ws, wsEvent);
+            }
+          };
+        }
+      });
+
+      provider.on('sync', function(synced) {
+        if (synced && !markdownYjsConnected) {
+          markdownYjsConnected = true;
+
+          var ytextContent = ytext.toString();
+          if (markdownCurrentContent && markdownCurrentContent !== ytextContent) {
+            // User typed before sync completed — push local edits to Y.Text
+            syncLocalChangeToYText(markdownCurrentContent);
+          } else if (ytextContent) {
+            // No local edits — seed editor from Y.Text
+            applyMarkdownContent(ytextContent);
+          }
+
+          // Observe Y.Text for remote changes (from other users / Monaco)
+          ytext.observe(function(event) {
+            if (event.transaction.origin === LEXICAL_YJS_ORIGIN) {
+              return;
+            }
+            var fullContent = ytext.toString();
+            if (fullContent === markdownCurrentContent) {
+              return;
+            }
+            applyMarkdownContent(fullContent);
+          });
+
+          console.debug('[StudioBridge] Yjs synced, bound to Y.Text for fileId:', config.fileId);
+        }
+      });
+    }).catch(function(error) {
+      console.error('[StudioBridge] Failed to setup Yjs connection:', error);
+    });
+  }
+
+  function disposeMarkdownYjs() {
+    markdownYjsSetupId++;
+    if (markdownYProvider) {
+      markdownYProvider.disconnect();
+      markdownYProvider.destroy();
+      markdownYProvider = null;
+    }
+    if (markdownYDoc) {
+      markdownYDoc.destroy();
+      markdownYDoc = null;
+    }
+    markdownYText = null;
+    markdownYjsConnected = false;
+  }
+
   function getTextOffsetWithinRoot(root, targetNode, targetOffset) {
     if (!root || !targetNode) {
       return 0;
@@ -2908,7 +3051,11 @@ export function generateStudioBridgeScript(options) {
     }
     markdownCurrentContent = fullContent;
     markdownHasUnsavedChanges = true;
-    scheduleMarkdownSync(fullContent);
+    if (markdownYjsConnected) {
+      syncLocalChangeToYText(fullContent);
+    } else {
+      scheduleMarkdownSync(fullContent);
+    }
     scheduleMarkdownSelectionOverlayRender();
   }
 
@@ -2916,6 +3063,7 @@ export function generateStudioBridgeScript(options) {
     if (!markdownHasUnsavedChanges) {
       return;
     }
+    markdownSaveInProgress = true;
     setMarkdownPersistStatus('saving');
     if (markdownSyncTimer) {
       clearTimeout(markdownSyncTimer);
@@ -3068,7 +3216,8 @@ export function generateStudioBridgeScript(options) {
       return;
     }
 
-    if (markdownLexicalApi && markdownLexicalRenderedContent === content) {
+    if (markdownLexicalApi && (markdownLexicalRenderedContent === content || markdownCurrentContent === content)) {
+      console.debug('[StudioBridge] applyMarkdownContent: skipped (content unchanged)');
       markdownCurrentContent = content;
       scheduleMarkdownSelectionOverlayRender();
       scheduleMarkdownSlashMenuUpdate();
@@ -3077,6 +3226,8 @@ export function generateStudioBridgeScript(options) {
       return;
     }
 
+    console.debug('[StudioBridge] applyMarkdownContent: rebuilding Lexical DOM, content length:', content.length, 'rendered match:', markdownLexicalRenderedContent === content, 'current match:', markdownCurrentContent === content);
+
     const mdxImportMap = parseMdxImportMap(content);
     const parts = extractMarkdownParts(content);
     const extracted = extractRawBlocksForEditor(parts.body, mdxImportMap);
@@ -3706,6 +3857,7 @@ export function generateStudioBridgeScript(options) {
       markdownOverlaySelections = [];
       clearMarkdownSelectionOverlay();
       clearMarkdownSelectionSync();
+      disposeMarkdownYjs();
     }
 
     const nextUrl = new URL(window.location.href);
@@ -3936,9 +4088,30 @@ export function generateStudioBridgeScript(options) {
         if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
           return;
         }
+        if (markdownYjsConnected) {
+          return;
+        }
         applyMarkdownContent(message.content || '');
         return;
 
+      case 'initYjsConnection':
+        if (!isMarkdownPage()) {
+          return;
+        }
+        if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
+          return;
+        }
+        if (message.initialContent) {
+          applyMarkdownContent(message.initialContent);
+        }
+        setupMarkdownYjsConnection({
+          wsUrl: message.wsUrl,
+          guid: message.guid,
+          fileId: message.fileId || markdownFileId,
+          authToken: message.authToken
+        });
+        return;
+
       case 'setMarkdownPersistState':
         if (!isMarkdownPage()) {
           return;
@@ -3946,9 +4119,12 @@ export function generateStudioBridgeScript(options) {
         if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
           return;
         }
-        setMarkdownPersistStatus(message.status || 'saved');
-        if (message.status === 'saved') {
-          markdownHasUnsavedChanges = false;
+        if (markdownSaveInProgress) {
+          setMarkdownPersistStatus(message.status || 'saved');
+          if (message.status === 'saved' || message.status === 'error') {
+            markdownSaveInProgress = false;
+            markdownHasUnsavedChanges = false;
+          }
         }
         return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veryfront",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "The simplest way to build AI-powered apps",
   "keywords": [
     "react",

package/src/deno.js

@@ -1,6 +1,6 @@
 export default {
   "name": "veryfront",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "license": "Apache-2.0",
   "nodeModulesDir": "auto",
   "exclude": [

package/src/src/studio/bridge-template.ts

@@ -77,6 +77,13 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
   let markdownLatestPresenceUsers = [];
   let markdownLatestSelections = [];
   let markdownHasUnsavedChanges = false;
+  let markdownSaveInProgress = false;
+  let markdownYDoc = null;
+  let markdownYProvider = null;
+  let markdownYText = null;
+  let markdownYjsConnected = false;
+  let markdownYjsSetupId = 0;
+  const LEXICAL_YJS_ORIGIN = 'lexical-yjs-binding';
 
   const MARKDOWN_SLASH_COMMANDS = [
     {
@@ -1417,6 +1424,142 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
     }, 120);
   }
 
+  function computeTextDiff(oldText, newText) {
+    var prefixLen = 0;
+    var minLen = Math.min(oldText.length, newText.length);
+    while (prefixLen < minLen && oldText.charCodeAt(prefixLen) === newText.charCodeAt(prefixLen)) {
+      prefixLen++;
+    }
+    var suffixLen = 0;
+    var maxSuffix = minLen - prefixLen;
+    while (suffixLen < maxSuffix &&
+           oldText.charCodeAt(oldText.length - 1 - suffixLen) === newText.charCodeAt(newText.length - 1 - suffixLen)) {
+      suffixLen++;
+    }
+    return {
+      index: prefixLen,
+      deleteCount: oldText.length - prefixLen - suffixLen,
+      insertText: newText.slice(prefixLen, suffixLen > 0 ? newText.length - suffixLen : undefined)
+    };
+  }
+
+  function syncLocalChangeToYText(fullContent) {
+    if (!markdownYText || !markdownYDoc) {
+      return;
+    }
+    var currentYContent = markdownYText.toString();
+    if (currentYContent === fullContent) {
+      return;
+    }
+    var diff = computeTextDiff(currentYContent, fullContent);
+    if (diff.deleteCount === 0 && diff.insertText === '') {
+      return;
+    }
+    markdownYDoc.transact(function() {
+      if (diff.deleteCount > 0) {
+        markdownYText.delete(diff.index, diff.deleteCount);
+      }
+      if (diff.insertText) {
+        markdownYText.insert(diff.index, diff.insertText);
+      }
+    }, LEXICAL_YJS_ORIGIN);
+  }
+
+  function setupMarkdownYjsConnection(config) {
+    if (markdownYDoc) {
+      return;
+    }
+
+    var setupId = ++markdownYjsSetupId;
+
+    Promise.all([
+      import('https://esm.sh/yjs@13.6.28?target=es2022'),
+      import('https://esm.sh/y-websocket@2.1.0?target=es2022')
+    ]).then(function(modules) {
+      // Abort if edit mode was closed while imports were loading
+      if (setupId !== markdownYjsSetupId) {
+        return;
+      }
+
+      var Y = modules[0];
+      var WebsocketProvider = modules[1].WebsocketProvider;
+
+      var doc = new Y.Doc({ guid: config.guid });
+      var provider = new WebsocketProvider(config.wsUrl, config.guid, doc, {
+        resyncInterval: -1,
+        params: { token: config.authToken }
+      });
+
+      var ytext = doc.getText(config.fileId);
+
+      markdownYDoc = doc;
+      markdownYProvider = provider;
+      markdownYText = ytext;
+
+      // Filter non-binary messages to prevent y-websocket parse errors
+      provider.on('status', function(event) {
+        console.debug('[StudioBridge] Yjs status:', event.status);
+        if (event.status === 'connected' && provider.ws) {
+          var origOnMessage = provider.ws.onmessage;
+          provider.ws.onmessage = function(wsEvent) {
+            if (typeof wsEvent.data === 'string') {
+              return;
+            }
+            if (origOnMessage) {
+              origOnMessage.call(provider.ws, wsEvent);
+            }
+          };
+        }
+      });
+
+      provider.on('sync', function(synced) {
+        if (synced && !markdownYjsConnected) {
+          markdownYjsConnected = true;
+
+          var ytextContent = ytext.toString();
+          if (markdownCurrentContent && markdownCurrentContent !== ytextContent) {
+            // User typed before sync completed — push local edits to Y.Text
+            syncLocalChangeToYText(markdownCurrentContent);
+          } else if (ytextContent) {
+            // No local edits — seed editor from Y.Text
+            applyMarkdownContent(ytextContent);
+          }
+
+          // Observe Y.Text for remote changes (from other users / Monaco)
+          ytext.observe(function(event) {
+            if (event.transaction.origin === LEXICAL_YJS_ORIGIN) {
+              return;
+            }
+            var fullContent = ytext.toString();
+            if (fullContent === markdownCurrentContent) {
+              return;
+            }
+            applyMarkdownContent(fullContent);
+          });
+
+          console.debug('[StudioBridge] Yjs synced, bound to Y.Text for fileId:', config.fileId);
+        }
+      });
+    }).catch(function(error) {
+      console.error('[StudioBridge] Failed to setup Yjs connection:', error);
+    });
+  }
+
+  function disposeMarkdownYjs() {
+    markdownYjsSetupId++;
+    if (markdownYProvider) {
+      markdownYProvider.disconnect();
+      markdownYProvider.destroy();
+      markdownYProvider = null;
+    }
+    if (markdownYDoc) {
+      markdownYDoc.destroy();
+      markdownYDoc = null;
+    }
+    markdownYText = null;
+    markdownYjsConnected = false;
+  }
+
   function getTextOffsetWithinRoot(root, targetNode, targetOffset) {
     if (!root || !targetNode) {
       return 0;
@@ -2916,7 +3059,11 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
     }
     markdownCurrentContent = fullContent;
     markdownHasUnsavedChanges = true;
-    scheduleMarkdownSync(fullContent);
+    if (markdownYjsConnected) {
+      syncLocalChangeToYText(fullContent);
+    } else {
+      scheduleMarkdownSync(fullContent);
+    }
     scheduleMarkdownSelectionOverlayRender();
   }
 
@@ -2924,6 +3071,7 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
     if (!markdownHasUnsavedChanges) {
       return;
     }
+    markdownSaveInProgress = true;
     setMarkdownPersistStatus('saving');
     if (markdownSyncTimer) {
       clearTimeout(markdownSyncTimer);
@@ -3076,7 +3224,8 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
       return;
     }
 
-    if (markdownLexicalApi && markdownLexicalRenderedContent === content) {
+    if (markdownLexicalApi && (markdownLexicalRenderedContent === content || markdownCurrentContent === content)) {
+      console.debug('[StudioBridge] applyMarkdownContent: skipped (content unchanged)');
       markdownCurrentContent = content;
       scheduleMarkdownSelectionOverlayRender();
       scheduleMarkdownSlashMenuUpdate();
@@ -3085,6 +3234,8 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
       return;
     }
 
+    console.debug('[StudioBridge] applyMarkdownContent: rebuilding Lexical DOM, content length:', content.length, 'rendered match:', markdownLexicalRenderedContent === content, 'current match:', markdownCurrentContent === content);
+
     const mdxImportMap = parseMdxImportMap(content);
     const parts = extractMarkdownParts(content);
     const extracted = extractRawBlocksForEditor(parts.body, mdxImportMap);
@@ -3714,6 +3865,7 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
       markdownOverlaySelections = [];
       clearMarkdownSelectionOverlay();
       clearMarkdownSelectionSync();
+      disposeMarkdownYjs();
     }
 
     const nextUrl = new URL(window.location.href);
@@ -3944,9 +4096,30 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
         if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
           return;
         }
+        if (markdownYjsConnected) {
+          return;
+        }
         applyMarkdownContent(message.content || '');
         return;
 
+      case 'initYjsConnection':
+        if (!isMarkdownPage()) {
+          return;
+        }
+        if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
+          return;
+        }
+        if (message.initialContent) {
+          applyMarkdownContent(message.initialContent);
+        }
+        setupMarkdownYjsConnection({
+          wsUrl: message.wsUrl,
+          guid: message.guid,
+          fileId: message.fileId || markdownFileId,
+          authToken: message.authToken
+        });
+        return;
+
       case 'setMarkdownPersistState':
         if (!isMarkdownPage()) {
           return;
@@ -3954,9 +4127,12 @@ export function generateStudioBridgeScript(options: StudioBridgeOptions): string
         if (message.fileId && markdownFileId && message.fileId !== markdownFileId) {
           return;
         }
-        setMarkdownPersistStatus(message.status || 'saved');
-        if (message.status === 'saved') {
-          markdownHasUnsavedChanges = false;
+        if (markdownSaveInProgress) {
+          setMarkdownPersistStatus(message.status || 'saved');
+          if (message.status === 'saved' || message.status === 'error') {
+            markdownSaveInProgress = false;
+            markdownHasUnsavedChanges = false;
+          }
         }
         return;