feat: add titleUpdated event and split cloud editor features

Author: mu29

examples/nextjs/app/cloud/page.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import '@composify/react/style.css';
+import '@/components';
+
+import { CloudEditor } from '@composify/react/editor';
+
+export default function Page() {
+  return <CloudEditor />;
+}

examples/nextjs/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev --turbopack -p 4000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@composify/react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "homepage": "https://composify.js.org",
   "repository": {
     "type": "git",

packages/react/src/editor/CloudEditor/CloudEditor.tsx

@@ -1,89 +1,34 @@
-import { useCallback, useEffect, useRef, useState, type FC } from 'react';
-import { Parser } from '../../renderer';
-import { Bridge, getClassNameFactory, GuestEventType, HostEventType } from '../../utils';
+import { useState, type FC } from 'react';
+import { CloudEditorControl } from '../CloudEditorControl';
+import { CloudEditorEventHandler } from '../CloudEditorEventHandler';
+import { CloudEditorInitializer } from '../CloudEditorInitializer';
 import { type EditingRef } from '../EditingContext';
 import { Editor } from '../Editor';
 import { type VisualEditorProps } from '../VisualEditor';
-import styles from './CloudEditor.module.css';
-
-const getClassName = getClassNameFactory('CloudEditor', styles);
 
 type Props = VisualEditorProps;
 
 export const CloudEditor: FC<Props> = ({ viewports }) => {
-  const bridgeRef = useRef<Bridge | null>(null);
-
   const [editingRef, setEditingRef] = useState<EditingRef | null>(null);
   const [title, setTitle] = useState('Untitled');
-  const [initialized, setInitialized] = useState(false);
-
-  const handleClickSettings = useCallback(() => {
-    if (!bridgeRef.current) {
-      return;
-    }
-
-    bridgeRef.current.emit({ type: GuestEventType.SettingsClicked });
-  }, []);
-
-  const handleClickSave = useCallback(() => {
-    if (!bridgeRef.current || !editingRef) {
-      return;
-    }
-
-    bridgeRef.current.emit({
-      type: GuestEventType.SaveClicked,
-      content: editingRef.getSource(),
-    });
-  }, [editingRef]);
-
-  useEffect(() => {
-    if (!editingRef) {
-      return;
-    }
-
-    bridgeRef.current = new Bridge(window.parent);
-
-    const { replaceRoot, getSource } = editingRef;
-    const { on, emit, dispose } = bridgeRef.current;
-
-    on(HostEventType.Initialize, data => {
-      setTitle(data.title);
-      replaceRoot(Parser.parse(data.content));
-    });
-
-    on(HostEventType.ContentRequested, () => {
-      emit({
-        type: GuestEventType.ContentProvided,
-        content: getSource(),
-      });
-    });
-
-    requestAnimationFrame(() => {
-      if (!initialized) {
-        emit({ type: GuestEventType.Ready });
-        setInitialized(true);
-      }
-    });
-
-    return dispose;
-  }, [editingRef, initialized]);
 
   return (
-    <Editor
-      ref={setEditingRef}
-      title={title}
-      source="<></>"
-      viewports={viewports}
-      renderControl={() => (
-        <div className={getClassName('Controls')}>
-          <button type="button" className={getClassName('SettingsButton')} onClick={handleClickSettings}>
-            Settings
-          </button>
-          <button type="button" className={getClassName('SaveButton')} onClick={handleClickSave}>
-            Save
-          </button>
-        </div>
+    <>
+      <Editor
+        ref={setEditingRef}
+        title={title}
+        source="<></>"
+        viewports={viewports}
+        renderControl={() => (editingRef ? <CloudEditorControl getSource={editingRef.getSource} /> : null)}
+      />
+      <CloudEditorInitializer />
+      {editingRef && (
+        <CloudEditorEventHandler
+          setTitle={setTitle}
+          replaceRoot={editingRef.replaceRoot}
+          getSource={editingRef.getSource}
+        />
       )}
-    />
+    </>
   );
 };

…ditor/CloudEditor/CloudEditor.module.css …torControl/CloudEditorControl.module.csspackages/react/src/editor/CloudEditor/CloudEditor.module.css renamed to packages/react/src/editor/CloudEditorControl/CloudEditorControl.module.css packages/react/src/editor/CloudEditor/CloudEditor.module.css renamed to packages/react/src/editor/CloudEditorControl/CloudEditorControl.module.css

@@ -1,9 +1,9 @@
-.CloudEditor-Controls {
+.CloudEditorControl {
   display: flex;
   gap: 0.375rem;
 }
 
-.CloudEditor-SettingsButton {
+.CloudEditorControl-SettingsButton {
   padding: 0.4375rem 0.75rem;
   font-size: 0.75rem;
   font-weight: 500;
@@ -15,12 +15,12 @@
   border: 1px solid var(--composify-palette-outline);
 }
 
-.CloudEditor-SettingsButton:hover {
+.CloudEditorControl-SettingsButton:hover {
   background-color: var(--composify-palette-surface-container);
   transition: background-color 0.15s linear;
 }
 
-.CloudEditor-SaveButton {
+.CloudEditorControl-SaveButton {
   padding: 0.4375rem 0.75rem;
   font-size: 0.75rem;
   font-weight: 500;
@@ -32,7 +32,7 @@
   border: 1px solid var(--composify-palette-primary);
 }
 
-.CloudEditor-SaveButton:hover {
+.CloudEditorControl-SaveButton:hover {
   opacity: 0.9;
   transition: opacity 0.15s linear;
 }

packages/react/src/editor/CloudEditorControl/CloudEditorControl.tsx

@@ -0,0 +1,41 @@
+import { type FC, useCallback, useEffect, useRef } from 'react';
+import { Bridge, getClassNameFactory, GuestEventType } from '../../utils';
+import styles from './CloudEditorControl.module.css';
+
+const getClassName = getClassNameFactory('CloudEditorControl', styles);
+
+type Props = {
+  getSource: () => string;
+};
+
+export const CloudEditorControl: FC<Props> = ({ getSource }) => {
+  const bridgeRef = useRef<Bridge | null>(null);
+
+  const handleClickSettings = useCallback(() => {
+    bridgeRef.current?.emit({ type: GuestEventType.SettingsClicked });
+  }, []);
+
+  const handleClickSave = useCallback(() => {
+    bridgeRef.current?.emit({
+      type: GuestEventType.SaveClicked,
+      content: getSource(),
+    });
+  }, [getSource]);
+
+  useEffect(() => {
+    bridgeRef.current = new Bridge(window.parent);
+
+    return bridgeRef.current.dispose;
+  }, []);
+
+  return (
+    <div className={getClassName()}>
+      <button type="button" className={getClassName('SettingsButton')} onClick={handleClickSettings}>
+        Settings
+      </button>
+      <button type="button" className={getClassName('SaveButton')} onClick={handleClickSave}>
+        Save
+      </button>
+    </div>
+  );
+};

packages/react/src/editor/CloudEditorControl/index.ts

@@ -0,0 +1 @@
+export { CloudEditorControl } from './CloudEditorControl';

packages/react/src/editor/CloudEditorEventHandler/CloudEditorEventHandler.tsx

@@ -0,0 +1,35 @@
+import { type FC, useEffect } from 'react';
+import { Parser, type Node } from '../../renderer';
+import { Bridge, GuestEventType, HostEventType } from '../../utils';
+
+type Props = {
+  setTitle: (title: string) => void;
+  replaceRoot: (root: Node) => void;
+  getSource: () => string;
+};
+
+export const CloudEditorEventHandler: FC<Props> = ({ setTitle, replaceRoot, getSource }) => {
+  useEffect(() => {
+    const bridge = new Bridge(window.parent);
+
+    bridge.on(HostEventType.Initialize, data => {
+      setTitle(data.title);
+      replaceRoot(Parser.parse(data.content));
+    });
+
+    bridge.on(HostEventType.TitleUpdated, data => {
+      setTitle(data.title);
+    });
+
+    bridge.on(HostEventType.ContentRequested, () => {
+      bridge.emit({
+        type: GuestEventType.ContentProvided,
+        content: getSource(),
+      });
+    });
+
+    return bridge.dispose;
+  }, [setTitle, replaceRoot, getSource]);
+
+  return null;
+};

packages/react/src/editor/CloudEditorEventHandler/index.ts

@@ -0,0 +1 @@
+export { CloudEditorEventHandler } from './CloudEditorEventHandler';

packages/react/src/editor/CloudEditorInitializer/CloudEditorInitializer.tsx

@@ -0,0 +1,23 @@
+import { type FC, useEffect, useState } from 'react';
+import { Bridge, GuestEventType } from '../../utils';
+
+export const CloudEditorInitializer: FC = () => {
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    const bridge = new Bridge(window.parent);
+
+    requestAnimationFrame(() => {
+      if (initialized) {
+        return;
+      }
+
+      bridge.emit({ type: GuestEventType.Ready });
+      setInitialized(true);
+    });
+
+    return bridge.dispose;
+  }, [initialized]);
+
+  return null;
+};