@growgroup/visual-editor 0.4.1 → 0.6.0

package/src/editor/utils/restore-flow.ts

@@ -122,7 +122,7 @@ export function relaxContainerSize(container: HTMLElement): void {
 /** 並べ替え・整列の対象にしない、エディタが描いている飾り */
 const OVERLAY_SELECTOR =
   '.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,' +
-  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-crop-ui,' +
+  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui,' +
   '#gg-measure-layer,#gg-smart-guides,#gg-reorder-indicator';
 
 /** 実体のある直接の子だけを取り出す */

package/src/editor/utils/smart-guides.ts

@@ -24,7 +24,7 @@ export const SNAP_THRESHOLD_SCREEN_PX = 4;
 /** ガイドの候補にしないオーバーレイ類(エディタが描いている飾り) */
 const OVERLAY_SELECTOR =
   '.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,' +
-  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-crop-ui,' +
+  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui,' +
   '#gg-measure-layer,#gg-smart-guides,[data-drag-ghost],[data-flex-drop-indicator]';
 
 /** 整列の候補座標。x/y ともに昇順ソート済み */

package/src/editor/utils/storage.ts

@@ -0,0 +1,47 @@
+/**
+ * ブラウザの記憶(localStorage / sessionStorage)への安全な出入口。
+ *
+ * 【なぜ関数越しにするのか】
+ * 共有ドロップに置く静的なエディタは `Content-Security-Policy: sandbox`(allow-same-origin 無し)で
+ * 配られる。この文脈は **opaque origin** で、`localStorage` は読むだけで SecurityError を投げる
+ * (`typeof localStorage` でも投げる ── プロパティの getter が走るため)。
+ * 「サイトデータをブロック」設定や、srcdoc / sandbox の紙面の中でも同じことが起きる。
+ *
+ * 記憶できるかどうかで挙動を変えないこと。ここは全部「読めなければ既定値、書けなければ黙って続行」。
+ */
+
+function storage(kind: 'local' | 'session'): Storage | null {
+  try {
+    const s = kind === 'local' ? window.localStorage : window.sessionStorage;
+    return s ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** 読む。使えない・入っていなければ null */
+export function readStorage(key: string, kind: 'local' | 'session' = 'local'): string | null {
+  try {
+    return storage(kind)?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** 書く。使えない・容量が一杯なら黙って諦める(表示や編集は続ける) */
+export function writeStorage(key: string, value: string, kind: 'local' | 'session' = 'local'): void {
+  try {
+    storage(kind)?.setItem(key, value);
+  } catch {
+    /* 記憶できなくても動作は継続 */
+  }
+}
+
+/** 消す */
+export function removeStorage(key: string, kind: 'local' | 'session' = 'local'): void {
+  try {
+    storage(kind)?.removeItem(key);
+  } catch {
+    /* 消せなくても動作は継続 */
+  }
+}

package/src/index.ts

@@ -60,7 +60,22 @@ export type {
   EditorPartDef,
   EditorPartCategory,
   EditorPartsLibrary,
+  EditorCollab,
+  EditorCollabUser,
 } from "./io";
+
+/**
+ * 共同編集の居場所(io.collab を渡したときだけ中身が入る)。
+ * 利用側のページ一覧などに「誰がどのページに居るか」を出すのに使う
+ */
+export { useCollabPresence } from "./editor/collab/store";
+export type { CollabPresence, CollabPeer, CollabStatus } from "./editor/collab/store";
+/**
+ * 部屋名が中継(gg-manager の hocuspocus-server)に保存される形かの検査。
+ * 形を外れた部屋は中継はされるが保存されないので、殻・書き戻し役でも繋ぐ前にこれで確かめる
+ */
+export { checkCollabRoom } from "./editor/collab/room";
+export type { CollabRoomCheck } from "./editor/collab/room";
 export type { CSSVariableDefinition, CSSVariableCategory } from "./types/css-variables";
 
 /**

package/src/io.ts

@@ -196,6 +196,35 @@ export type EditorIO = {
   loadVariables?: () => Promise<CSSVariableDefinition[]>;
   /** CSS 変数の保存。無ければブラウザ内(localStorage)に持つ */
   saveVariables?: (variables: CSSVariableDefinition[]) => Promise<void>;
+
+  /**
+   * リアルタイム共同編集(Figma 風)。Hocuspocus の部屋に本文と居場所を載せる。
+   * 無ければ今までどおり(共同編集の UI も出さず、接続もしない)。
+   * あるページの部屋に入っている間は onSave の自動保存を呼ばない(ファイルに書くのは書き戻し役)
+   */
+  collab?: EditorCollab;
+};
+
+/** 共同編集の参加者。color が無ければ id から決める */
+export type EditorCollabUser = { id: string; name: string; color?: string };
+
+export type EditorCollab = {
+  /** Hocuspocus の URL(wss://…) */
+  url: string;
+  /** contentId → ページの部屋名。null ならそのページは共同編集しない */
+  roomFor: (contentId: string) => string | null;
+  /** 案件の部屋名(居場所・pages) */
+  projectRoom: string;
+  /** contentId → route(案件の部屋の awareness と pages のキー) */
+  routeFor: (contentId: string) => string | null;
+  user: EditorCollabUser;
+  token?: () => Promise<string | undefined>;
+  /** getCleanHtml の結果 → 共有する本文。無ければそのまま */
+  encode?: (cleanHtml: string) => string;
+  /** 共有する本文 → エディタに渡す HTML。無ければそのまま */
+  decode?: (shared: string, contentId: string) => string;
+  /** true: 書き戻し役が居ないとき「変更は保存されません」を出し続ける(静的なエディタ) */
+  requireBridge?: boolean;
 };
 
 let current: EditorIO = {};

package/src/styles/skin.css

@@ -240,6 +240,23 @@
 .gg-editor-ui .ed-save-status[data-save-status="dirty"] { color: var(--ed-warning); }
 .gg-editor-ui .ed-save-status[data-save-status="error"] { color: var(--ed-danger); }
 .gg-editor-ui .ed-save-status[data-save-status="saved"] svg { color: var(--ed-success); }
+/* 共同編集(io.collab): 参加者のアバター・書き戻し先・接続状態・ページの点 */
+.gg-editor-ui .ed-collab-presence { display: inline-flex; align-items: center; gap: 10px; }
+.gg-editor-ui .ed-collab-avatars { display: inline-flex; align-items: center; padding-left: 4px; }
+.gg-editor-ui .ed-collab-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: -4px; padding: 0; border-radius: 50%; border: 2px solid var(--ed-panel); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0; }
+.gg-editor-ui .ed-collab-avatar:hover { transform: translateY(-1px); }
+.gg-editor-ui .ed-collab-avatar-self { cursor: default; margin-left: 4px; box-shadow: 0 0 0 1px var(--ed-line-strong); }
+.gg-editor-ui .ed-collab-avatar-self:hover, .gg-editor-ui .ed-collab-avatar-more:hover { transform: none; }
+.gg-editor-ui .ed-collab-avatar-more { background: var(--ed-panel-raised); color: var(--ed-text); cursor: default; }
+.gg-editor-ui .ed-collab-bridge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; color: var(--ed-muted); }
+.gg-editor-ui .ed-collab-bridge-warn { color: var(--ed-warning); }
+.gg-editor-ui .ed-collab-bridge-alert { color: #fff; background: var(--ed-danger); padding: 3px 8px; border-radius: var(--ed-radius); font-weight: 600; }
+.gg-editor-ui .ed-save-status[data-collab-status="synced"] svg { color: var(--ed-success); }
+.gg-editor-ui .ed-save-status[data-collab-status="offline"] { color: var(--ed-danger); }
+.gg-editor-ui .ed-save-status[data-collab-status="error"] { color: var(--ed-danger); font-weight: 600; }
+.gg-editor-ui .ed-save-status[data-collab-pending] { color: var(--ed-warning); }
+.gg-editor-ui .ed-collab-dots { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
+.gg-editor-ui .ed-collab-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ed-panel); }
 .gg-editor-ui .ed-panel-heading { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--ed-line); flex-shrink: 0; font-size: 14px; font-weight: 600; }
 .gg-editor-ui .ed-toolbar { border: 1px solid var(--ed-line); border-radius: 12px; padding: 8px; background: var(--ed-panel-raised); color: var(--ed-text); box-shadow: var(--ed-shadow); }
 .gg-editor-ui .ed-footer { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-top: 1px solid var(--ed-line); background: var(--ed-panel); color: var(--ed-muted); font-size: 12px; flex-shrink: 0; }

package/src/version.ts

@@ -6,4 +6,4 @@
  * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
  * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
  */
-export const EDITOR_VERSION = '0.4.1';
+export const EDITOR_VERSION = '0.6.0';