@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/workbenchEditor/workbenchEditor.component.tsx

@@ -0,0 +1,461 @@
+// The EDITOR page of the workbench (ADR-0051 §4): a row of tabs in a browser's manner over the
+// tree and the canvas — one page under `/workbench/{kind}/{name}`, whose address names the
+// document in front and every open tab. A document coming to the front is a shallow move of the
+// client router; leaving for a list is a move to another page, and the canvases go with it —
+// they come back cold (the owner's call), the tabs do not: this browser tab remembers them.
+import { defineComponentSide, markInternalTile } from '@mosetta/react';
+import { BlueprintNodeRenderer, ProvideDiScope, useComponent, useDi, useDiOptional, useDiScope, useIsPreviewMode, useRoute } from '@mosetta/react';
+import { BlockScope, DI_CONTAINER_TOKEN } from '@mosetta/di';
+import { DockTab, DOCK_TAB_TOKEN } from '@mosetta/ui';
+import { ROUTER_TOKEN } from '@mosetta/runtime/client';
+import { ContentKind, editingSessionHubOf } from '@mosetta/content';
+import type { ITileReference } from '@mosetta/core';
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { siblingReference } from '../content/moduleSiblings';
+import { useEditingSession } from '../content/useEditingSession';
+import { TooltipHost } from '../content/tooltips';
+import '../content/workbenchScale.css';
+import './workbenchEditor.css';
+import { AddressWorkspace, IWorkspaceState, IWorkspaceTab, TREE_WIDTH_MAX, TREE_WIDTH_MIN, Workspace, WORKSPACE_TOKEN } from '../workbench/workspace';
+import { basePathOf, parseEditorAddress } from '../workbench/workbenchAddress';
+
+const PagesIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M4 2.5h5.5L12.5 5.5V13.5H4z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinejoin="round" />
+    <path d="M9.5 2.5v3h3M6 8.5h4M6 10.8h4"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.3" />
+  </svg>
+);
+
+const PrefabsIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M8 2.2l5.2 3v5.6L8 13.8l-5.2-3V5.2z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinejoin="round" />
+    <path d="M8 8l5.2-2.8M8 8L2.8 5.2M8 8v5.8"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.2" />
+  </svg>
+);
+
+const CloseIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M4.5 4.5l7 7M11.5 4.5l-7 7"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round" />
+  </svg>
+);
+
+const PlusIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M8 3.2v9.6M3.2 8h9.6"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round" />
+  </svg>
+);
+
+// ---- the tab handle --------------------------------------------------------------------------
+
+/**
+ * The CURRENT TAB as the canvas sees it — the same cooperation contract a dock hands its panels,
+ * so the canvas keys its session by the tab and wakes when the tab comes to the front. The title
+ * is not the canvas's to set here: the workspace names a tab after the document its session
+ * holds, which says the same thing without a word from the canvas.
+ */
+class WorkspaceTabHandle extends DockTab {
+  constructor(
+    private readonly workspace: Workspace,
+    readonly id: string,
+  ) {
+    super();
+  }
+
+  rename(): void {
+    // the tab's words come from its session (see workspace.tabLabelOf)
+  }
+
+  setMeta(): void {
+    // the document a tab holds is read from its session, never from a report
+  }
+
+  onDidActivate(listener: () => void): () => void {
+    return this.workspace.onDidActivate(this.id, listener);
+  }
+
+  front(): boolean {
+    return this.workspace.snapshot().front === this.id;
+  }
+}
+
+// ---- pieces ------------------------------------------------------------------------------------
+
+/** a sibling module of the editor, opened by reference — the way a dock opens a component tab */
+function Opened({ own, name, id, settings }: { own: ITileReference; name: string; id: string; settings?: Record<string, unknown> }) {
+  return (
+    <BlueprintNodeRenderer moduleTreeNode={{
+      id,
+      reference: siblingReference(own, name),
+      children: [],
+      ...(settings ? { settings } : {}),
+    }}
+                           inheritedSsr={false} />
+  );
+}
+
+/**
+ * One canvas, mounted for as long as its tab is open, shown while the tab is in front. Its own
+ * DI scope carries the tab handle; the canvas resolves it up the scope chain.
+ */
+/**
+ * One canvas, mounted for as long as its tab is open, shown while the tab is in front. Its own
+ * DI scope carries the tab handle; the canvas resolves it up the scope chain.
+ */
+function CanvasHost({ workspace, tab, own, front }: { workspace: Workspace; tab: IWorkspaceTab; own: ITileReference; front: boolean }) {
+  const di = useDi(DI_CONTAINER_TOKEN);
+  const parentScope = useDiScope();
+  const [scope] = useState(() => {
+    const tabScope = new BlockScope(parentScope);
+    di.registerScope(tabScope);
+    di.registerValueOfToken(DOCK_TAB_TOKEN, new WorkspaceTabHandle(workspace, tab.id), tabScope);
+    return tabScope;
+  });
+  useEffect(() => () => di.disposeScope(scope), [di, scope]);
+  return (
+    <ProvideDiScope scope={scope}>
+      <div className={`workbench__canvas${front ? '' : ' workbench__pane--hidden'}`}
+           data-test-id="workbench-canvas"
+           data-tab={tab.id}
+           data-front={front || undefined}>
+        <Opened own={own}
+                name="canvas"
+                id={`wb-canvas-${tab.id}`} />
+      </div>
+    </ProvideDiScope>
+  );
+}
+
+/** the open documents as tabs — a browser's tab row, the one in front standing out */
+/** the open documents as tabs — a browser's tab row, the one in front standing out */
+function TabStrip({ workspace, state }: { workspace: Workspace; state: IWorkspaceState }) {
+  return (
+    <div className="workbench__tabs"
+         role="tablist"
+         data-test-id="workbench-tabs">
+      {state.tabs.map((tab) => {
+        const front = tab.id === state.front;
+        return (
+          <div key={tab.id}
+               className={`workbench__tab${front ? ' workbench__tab--front' : ''}`}
+               role="tab"
+               tabIndex={0}
+               aria-selected={front}
+               data-test-id="workbench-tab"
+               data-tab={tab.id}
+               data-tab-kind={tab.doc.kind}
+               data-tab-page={tab.doc.page}
+               data-tooltip={tab.doc.kind === 'prefabs' ? `The prefab ${tab.label}` : tab.label}
+               onClick={() => workspace.activate(tab.id)}
+               onAuxClick={(e) => {
+                 if (e.button === 1) workspace.close(tab.id); // the middle button closes, as in a browser
+               }}
+               onKeyDown={(e) => {
+                 if (e.target === e.currentTarget && (e.key === 'Enter' || e.key === ' ')) {
+                   e.preventDefault();
+                   workspace.activate(tab.id);
+                 }
+               }}>
+            <span className="workbench__tab-kind">{tab.doc.kind === 'prefabs' ? PrefabsIcon : PagesIcon}</span>
+            <span className="workbench__tab-label">{tab.label}</span>
+            {tab.loading ? <span className="workbench__tab-loading"
+                                 aria-label="Loading" /> : null}
+            <button type="button"
+                    className="workbench__tab-close"
+                    data-test-id="workbench-tab-close"
+                    aria-label={`Close ${tab.label}`}
+                    data-tooltip="Close this tab"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      workspace.close(tab.id);
+                    }}>
+              {CloseIcon}
+            </button>
+          </div>
+        );
+      })}
+      <button type="button"
+              className={`workbench__tab-new${state.picker ? ' workbench__tab-new--on' : ''}`}
+              data-test-id="workbench-tab-new"
+              aria-label="Open a page or a prefab"
+              aria-expanded={state.picker !== null}
+              data-tooltip="Open another page or prefab — the pages, right here"
+              onClick={() => workspace.togglePicker(state.picker ?? 'pages')}>
+        {PlusIcon}
+      </button>
+    </div>
+  );
+}
+
+/**
+ * The QUICK PICKER: the compact pages (or prefabs) list in a popover under the tabs — another
+ * page is a click away without leaving the editor for the Pages view. Escape and a click
+ * outside close it; so does opening a document (the workspace closes it).
+ */
+/**
+ * The QUICK PICKER: the compact pages (or prefabs) list in a popover under the tabs — another
+ * page is a click away without leaving the editor for the Pages view. Escape and a click
+ * outside close it; so does opening a document (the workspace closes it).
+ */
+function Picker({ workspace, kind, own }: { workspace: Workspace; kind: ContentKind; own: ITileReference }) {
+  const [el, setEl] = useState<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!el) return undefined;
+    const doc = el.ownerDocument;
+    const onPointerDown = (e: PointerEvent): void => {
+      const target = e.target as Element | null;
+      // the "+" that toggles the picker handles itself; a click anywhere else outside closes
+      if (target && (el.contains(target) || target.closest('[data-test-id="workbench-tab-new"]'))) return;
+      workspace.closePicker();
+    };
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') workspace.closePicker();
+    };
+    doc.addEventListener('pointerdown', onPointerDown, true);
+    doc.addEventListener('keydown', onKeyDown);
+    return () => {
+      doc.removeEventListener('pointerdown', onPointerDown, true);
+      doc.removeEventListener('keydown', onKeyDown);
+    };
+  }, [el, workspace]);
+  return (
+    <>
+      {/* the backdrop: the desk under the picker is mostly an iframe, where a click never reaches
+          this document — so a layer of our own takes it and closes the picker */}
+      <div className="workbench__picker-backdrop"
+           data-test-id="workbench-picker-backdrop"
+           onPointerDown={() => workspace.closePicker()} />
+      <div ref={setEl}
+           className="workbench__picker"
+           role="dialog"
+           aria-label={kind === 'prefabs' ? 'Open a prefab' : 'Open a page'}
+           data-test-id="workbench-picker"
+           data-kind={kind}>
+        <div className="workbench__picker-switch"
+             role="tablist">
+          {(['pages', 'prefabs'] as const).map((choice) => (
+            <button key={choice}
+                    type="button"
+                    role="tab"
+                    className={`workbench__picker-choice${kind === choice ? ' workbench__picker-choice--on' : ''}`}
+                    aria-selected={kind === choice}
+                    data-test-id={`workbench-picker-${choice}`}
+                    onClick={() => {
+                      if (kind !== choice) workspace.togglePicker(choice);
+                    }}>
+              {choice === 'pages' ? 'Pages' : 'Prefabs'}
+            </button>
+          ))}
+        </div>
+        <div className="workbench__picker-list">
+          <Opened own={own}
+                  name="pagesPanel"
+                  id={`wb-picker-${kind}`}
+                  settings={{ kind, compact: true }} />
+        </div>
+      </div>
+    </>
+  );
+}
+
+/**
+ * The handle between the tree and the canvas: dragging it sets the tree's width for the document
+ * in front. The width is held here while the drag lasts (every move would otherwise go through
+ * the workspace and the address) and committed on release. Pointer capture keeps the drag on the
+ * handle; the canvases stop taking pointer events meanwhile — an iframe would swallow the drag.
+ */
+/**
+ * The handle between the tree and the canvas: dragging it sets the tree's width for the document
+ * in front. The width is held here while the drag lasts (every move would otherwise go through
+ * the workspace and the address) and committed on release. Pointer capture keeps the drag on the
+ * handle; the canvases stop taking pointer events meanwhile — an iframe would swallow the drag.
+ */
+function Splitter({ width, onPreview, onCommit }: { width: number; onPreview: (width: number | null) => void; onCommit: (width: number) => void }) {
+  const drag = useRef<{ startX: number; startWidth: number; width: number } | null>(null);
+  const fit = (value: number): number => Math.min(TREE_WIDTH_MAX, Math.max(TREE_WIDTH_MIN, Math.round(value)));
+  return (
+    <div className="workbench__splitter"
+         role="separator"
+         aria-orientation="vertical"
+         aria-label="Resize the tree"
+         aria-valuenow={width}
+         data-test-id="workbench-splitter"
+         data-tooltip="Drag to make the tree wider or narrower — remembered for this page"
+         onPointerDown={(e) => {
+           if (e.button !== 0) return;
+           e.preventDefault();
+           drag.current = { startX: e.clientX, startWidth: width, width };
+           e.currentTarget.setPointerCapture?.(e.pointerId);
+           onPreview(width);
+         }}
+         onPointerMove={(e) => {
+           if (!drag.current) return;
+           drag.current.width = fit(drag.current.startWidth + (e.clientX - drag.current.startX));
+           onPreview(drag.current.width);
+         }}
+         onPointerUp={(e) => {
+           if (!drag.current) return;
+           const committed = drag.current.width;
+           drag.current = null;
+           e.currentTarget.releasePointerCapture?.(e.pointerId);
+           onPreview(null);
+           onCommit(committed);
+         }}
+         onPointerCancel={() => {
+           drag.current = null;
+           onPreview(null);
+         }} />
+  );
+}
+
+/** the editor: the tabs over the desk — the tree column beside the canvas in front */
+/** the editor: the tabs over the desk — the tree column beside the canvas in front */
+function EditorArea({ workspace, state, own }: { workspace: Workspace; state: IWorkspaceState; own: ITileReference }) {
+  // the width while a drag lasts; null between drags — the workspace's word then
+  const [dragWidth, setDragWidth] = useState<number | null>(null);
+  const treeWidth = dragWidth ?? state.treeWidth;
+  // a canvas is mounted on the tab's FIRST visit and kept from then on: after a reload only the
+  // tab in front loads its preview — every restored tab loading at once would keep the one the
+  // author actually looks at waiting behind the others
+  const [visited, setVisited] = useState<ReadonlySet<string>>(() => new Set(state.front ? [state.front] : []));
+  useEffect(() => {
+    if (state.front && !visited.has(state.front)) setVisited((prev) => new Set(prev).add(state.front!));
+  }, [state.front]);
+  return (
+    <div className="workbench__editor"
+         data-test-id="workbench-editor"
+         data-tree-shown={state.treeShown || undefined}>
+      <TabStrip workspace={workspace}
+                state={state} />
+      <div className={`workbench__desk${dragWidth !== null ? ' workbench__desk--resizing' : ''}`}>
+        {state.picker ? <Picker workspace={workspace}
+                                kind={state.picker}
+                                own={own} /> : null}
+        <aside className={`workbench__tree${state.treeShown ? '' : ' workbench__pane--hidden'}`}
+               data-test-id="workbench-tree"
+               data-tree-width={treeWidth}
+               style={{ width: `${treeWidth}px` }}>
+          <Opened own={own}
+                  name="treeView"
+                  id="wb-tree" />
+        </aside>
+        {state.treeShown ? (
+          <Splitter width={treeWidth}
+                    onPreview={setDragWidth}
+                    onCommit={(width) => workspace.setTreeWidth(width)} />
+        ) : null}
+        <div className="workbench__canvases">
+          {state.tabs.length === 0 ? (
+            <div className="workbench__blank"
+                 data-test-id="workbench-blank">
+              <p>Nothing is open. Pick a page or a prefab to edit.</p>
+              <button type="button"
+                      className="workbench__button"
+                      onClick={() => workspace.go('pages')}>
+                The pages
+              </button>
+            </div>
+          ) : null}
+          {state.tabs.filter((tab) => tab.id === state.front || visited.has(tab.id)).map((tab) => (
+            <CanvasHost key={tab.id}
+                        workspace={workspace}
+                        tab={tab}
+                        own={own}
+                        front={tab.id === state.front} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---- the block ---------------------------------------------------------------------------------
+
+const noSubscription = (): (() => void) => () => undefined;
+const noState = (): IWorkspaceState | null => null;
+
+function Editor() {
+  // touching the session arms the workbench's services (autosave, conflicts, hotkeys, clipboard)
+  useEditingSession();
+  const di = useDi(DI_CONTAINER_TOKEN);
+  const own = useComponent().reference;
+  const route = useRoute();
+  const router = useDiOptional(ROUTER_TOKEN) ?? null;
+  // the workspace is born with the editor — BEFORE any canvas renders, so every restored tab's
+  // session is keyed by the time its canvas asks for it; one per container, kept across the
+  // editor's own remounts (a visit to a list and back finds the tabs where they were)
+  const [workspace] = useState<AddressWorkspace | null>(() => {
+    const hub = editingSessionHubOf(di);
+    if (!hub) return null;
+    if (di.hasByToken(WORKSPACE_TOKEN)) return di.getByToken(WORKSPACE_TOKEN) as AddressWorkspace;
+    const base = basePathOf(route?.pattern ?? null, window.location.pathname);
+    const created = new AddressWorkspace(di, hub, own, window, base, router);
+    di.registerValueOfToken(WORKSPACE_TOKEN, created);
+    return created;
+  });
+  useEffect(() => workspace?.attach(), [workspace]);
+  // the address moved under the editor (Back, a link into it): the tabs follow — the router
+  // re-reads the route, the editor reads the route
+  const located = route ? `${route.path ?? ''}?${new URLSearchParams(route.search ?? {}).toString()}` : null;
+  useEffect(() => {
+    if (!workspace || !route) return;
+    const address = parseEditorAddress(route.path ?? window.location.pathname, workspace.base, new URLSearchParams(route.search ?? {}));
+    if (address) workspace.locate(address);
+  }, [workspace, located]);
+  const state = useSyncExternalStore(workspace?.subscribe ?? noSubscription, workspace?.snapshot ?? noState, noState);
+  // every canvas claims the focus as it mounts — the one in front takes it back after them
+  useEffect(() => workspace?.focusFront(), [workspace, state?.front, state?.tabs.length]);
+  if (!workspace || !state) {
+    return <div className="workbench-editor workbench-editor--bare"
+                data-test-id="workbench-bare">The editor needs its editing session to run.</div>;
+  }
+  return (
+    <TooltipHost>
+      <EditorArea workspace={workspace}
+                  state={state}
+                  own={own} />
+    </TooltipHost>
+  );
+}
+
+function EditorBlock() {
+  // an editor inside a preview must not open canvases of its own (an iframe in an iframe,
+  // forever, when the workbench page previews itself)
+  if (useIsPreviewMode()) {
+    return <div className="workbench-editor workbench-editor--bare"
+                data-workbench-preview-stub>An editor inside a preview does not expand</div>;
+  }
+  if (typeof window === 'undefined') return null; // nothing to show a server: the editor is the browser's
+  return <Editor />;
+}
+
+export default markInternalTile(defineComponentSide({
+  Component: EditorBlock,
+  defaultSettings() {
+    return {};
+  },
+}));