@growgroup/visual-editor 0.4.1 → 0.7.0

package/src/editor/utils/text-line-break.ts

@@ -0,0 +1,121 @@
+/**
+ * テキスト編集中の Enter を「同じ要素の中の改行(<br>)」にする。
+ *
+ * [なぜ要るか]
+ * contenteditable の既定の Enter は段落を分ける。Chrome は <p> の中に <div> を差し込み
+ * (`<p>前半<div>後半</div></p>`)、HTML では p の中に div を置けないので、保存して読み直すと
+ * 段落が閉じ、後半が段落のクラス(文字の大きさ・行間)を持たない div になっていた。
+ * Shift+Enter は同じ要素の中に <br> が入るだけで正しいので、Enter もそれにそろえる。
+ * p / 見出し / li / td / ボタン / span など、テキスト編集に入るすべての要素で同じ。
+ *
+ * [なぜ execCommand('insertLineBreak') か]
+ * Shift+Enter と同じブラウザの処理なので、範囲選択の削除・行末での改行(次の行を作る 2 つ目の <br>)・
+ * 文字単位の取り消し(編集中の ⌘Z 1 回)・input イベント(共同編集の送信)がそのまま付いてくる。
+ * 自前で Range に <br> を差し込むと、ブラウザの取り消しの履歴に載らず ⌘Z で戻らない。
+ * 使えないブラウザ(insertLineBreak を持たない)でだけ自前で差し込む。
+ *
+ * [日本語入力]
+ * 変換を確定する Enter は改行ではない。ここを誤ると確定するたびに改行が入る。
+ * Chrome は確定の keydown に isComposing=true / keyCode 229 を付け、Safari は compositionend の
+ * 直後に keyCode 229 の keydown を送る。確定の直後(keyup まで)の Enter も見送る。
+ * 見送った Enter がそれでも段落を分けようとしたとき(beforeinput の insertParagraph)は、そこで改行に直す。
+ */
+
+const EDITING_HOST = '[contenteditable="true"]';
+
+function editingHostOf(target: EventTarget | null): HTMLElement | null {
+  const el = target as Element | null;
+  if (!el || typeof el.closest !== 'function') return null;
+  return el.closest<HTMLElement>(EDITING_HOST);
+}
+
+/** 改行の後ろに、次の行を作る中身(文字・画像・改行)があるか */
+function hasContentAfter(doc: Document, node: Node, host: HTMLElement): boolean {
+  const range = doc.createRange();
+  range.setStartAfter(node);
+  range.setEnd(host, host.childNodes.length);
+  const rest = range.cloneContents();
+  if ((rest.textContent ?? '').length > 0) return true;
+  return !!rest.querySelector('br, img, svg, video, iframe, input, canvas');
+}
+
+/** insertLineBreak を持たないブラウザ向け。選択を消して <br> を入れ、キャレットを次の行に置く */
+function insertLineBreakManually(doc: Document, host: HTMLElement): void {
+  const selection = doc.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  if (!host.contains(range.commonAncestorContainer)) return;
+  range.deleteContents();
+  const br = doc.createElement('br');
+  range.insertNode(br);
+  // 行末の <br> 1 つだけでは次の行ができない(キャレットが前の行に残る)ので、もう 1 つ置く
+  if (!hasContentAfter(doc, br, host)) br.after(doc.createElement('br'));
+  const caret = doc.createRange();
+  caret.setStartAfter(br);
+  caret.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(caret);
+  const InputEventCtor = doc.defaultView?.InputEvent ?? InputEvent;
+  host.dispatchEvent(new InputEventCtor('input', { bubbles: true, inputType: 'insertLineBreak' }));
+}
+
+function insertLineBreak(doc: Document, host: HTMLElement): void {
+  let done = false;
+  try {
+    done = doc.execCommand('insertLineBreak');
+  } catch {
+    done = false;
+  }
+  if (!done) insertLineBreakManually(doc, host);
+}
+
+/**
+ * iframe の紙面に「Enter = 改行」を張る。編集に入る経路(ダブルクリック・テキストツール)によらず、
+ * 編集中の要素(contenteditable="true")の中で押された Enter だけを扱う。
+ * @returns 外す関数
+ */
+export function setupLineBreakOnEnter(doc: Document): () => void {
+  // 変換の確定から keyup までの間(Safari は確定の後に Enter の keydown が来る)
+  let composingEnter = false;
+
+  const onCompositionEnd = () => {
+    composingEnter = true;
+  };
+  const onKeyUp = () => {
+    composingEnter = false;
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    // 日本語入力の変換中・確定の Enter には触らない(最初に見る)
+    if (e.isComposing || e.keyCode === 229) return;
+    if (e.key !== 'Enter') return;
+    if (composingEnter) return;
+    // Shift+Enter はブラウザの既定がすでに改行。⌘ / Ctrl との組み合わせはショートカットに譲る
+    if (e.shiftKey || e.metaKey || e.ctrlKey) return;
+    if (e.defaultPrevented) return;
+    const host = editingHostOf(e.target);
+    if (!host) return;
+    e.preventDefault();
+    insertLineBreak(doc, host);
+  };
+
+  // 上で見送った Enter や、キーを経ない段落分け(Android の IME など)も改行にする
+  const onBeforeInput = (e: InputEvent) => {
+    if (e.inputType !== 'insertParagraph' || e.isComposing) return;
+    const host = editingHostOf(e.target);
+    if (!host) return;
+    e.preventDefault();
+    insertLineBreak(doc, host);
+  };
+
+  doc.addEventListener('compositionend', onCompositionEnd, true);
+  doc.addEventListener('keyup', onKeyUp, true);
+  doc.addEventListener('keydown', onKeyDown, true);
+  doc.addEventListener('beforeinput', onBeforeInput as EventListener, true);
+  return () => {
+    doc.removeEventListener('compositionend', onCompositionEnd, true);
+    doc.removeEventListener('keyup', onKeyUp, true);
+    doc.removeEventListener('keydown', onKeyDown, true);
+    doc.removeEventListener('beforeinput', onBeforeInput as EventListener, true);
+  };
+}

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.7.0';