@dxos/react-ui-editor 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

package/src/extensions/{command-menu → autocomplete}/placeholder.ts

@@ -11,20 +11,23 @@ import { clientRectsFor, flattenRect } from '../../util';
 type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
 
 export type PlaceholderOptions = {
-  delay?: number;
   content: Content;
+  delay?: number;
 };
 
-export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Extension => {
+/**
+ * Shows a transient placeholder at the current cursor position.
+ */
+export const placeholder = ({ content, delay = 3_000 }: PlaceholderOptions): Extension => {
   const plugin = ViewPlugin.fromClass(
     class {
-      decorations = Decoration.none;
-      timeout: ReturnType<typeof setTimeout> | undefined;
+      _timeout: ReturnType<typeof setTimeout> | undefined;
+      _decorations = Decoration.none;
 
       update(update: ViewUpdate) {
-        if (this.timeout) {
-          window.clearTimeout(this.timeout);
-          this.timeout = undefined;
+        if (this._timeout) {
+          window.clearTimeout(this._timeout);
+          this._timeout = undefined;
         }
 
         // Check if the active line (where cursor is) is empty.
@@ -33,10 +36,10 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
         if (isEmpty) {
           // Create widget decoration at the start of the current line.
           const lineStart = activeLine.from;
-          this.timeout = setTimeout(() => {
-            this.decorations = Decoration.set([
+          this._timeout = setTimeout(() => {
+            this._decorations = Decoration.set([
               Decoration.widget({
-                widget: new Placeholder(content),
+                widget: new PlaceholderWidget(content),
                 side: 1,
               }).range(lineStart),
             ]);
@@ -45,18 +48,18 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
           }, delay);
         }
 
-        this.decorations = Decoration.none;
+        this._decorations = Decoration.none;
       }
 
       destroy() {
-        if (this.timeout) {
-          clearTimeout(this.timeout);
+        if (this._timeout) {
+          clearTimeout(this._timeout);
         }
       }
     },
     {
       provide: (plugin) => {
-        return [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)];
+        return [EditorView.decorations.of((view) => view.plugin(plugin)?._decorations ?? Decoration.none)];
       },
     },
   );
@@ -66,7 +69,7 @@ export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Ext
     : plugin;
 };
 
-class Placeholder extends WidgetType {
+export class PlaceholderWidget extends WidgetType {
   constructor(readonly content: Content) {
     super();
   }
@@ -75,6 +78,7 @@ class Placeholder extends WidgetType {
     const wrap = document.createElement('span');
     wrap.className = 'cm-placeholder';
     wrap.style.pointerEvents = 'none';
+    wrap.setAttribute('aria-hidden', 'true');
     wrap.appendChild(
       typeof this.content === 'string'
         ? document.createTextNode(this.content)
@@ -82,7 +86,7 @@ class Placeholder extends WidgetType {
           ? this.content(view)
           : this.content.cloneNode(true),
     );
-    wrap.setAttribute('aria-hidden', 'true');
+
     return wrap;
   }
 
@@ -92,7 +96,7 @@ class Placeholder extends WidgetType {
       return null;
     }
 
-    const style = window.getComputedStyle(dom.parentNode as HTMLElement);
+    const style = getComputedStyle(dom.parentNode as HTMLElement);
     const rect = flattenRect(rects[0], style.direction !== 'rtl');
     const lineHeight = parseInt(style.lineHeight);
     if (rect.bottom - rect.top > lineHeight * 1.5) {

package/src/extensions/{command-dialog → autocomplete}/typeahead.ts

@@ -13,17 +13,16 @@ import {
   keymap,
 } from '@codemirror/view';
 
-import { Hint } from './hint';
+import { type CompoetionContext } from './match';
+import { PlaceholderWidget } from './placeholder';
 
-export type TypeaheadContext = { line: string };
-
-// TODO(burdon): Option to complete only at end of line?
+// TODO(burdon): Option to complete only at end of line.
 export type TypeaheadOptions = {
-  onComplete?: (context: TypeaheadContext) => string | undefined;
+  onComplete?: (context: CompoetionContext) => string | undefined;
 };
 
 /**
- * CodeMirror extension for typeahead completion.
+ * Shows a completion placeholder.
  */
 export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
   let hint: string | undefined;
@@ -57,7 +56,7 @@ export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
             const str = update.state.sliceDoc(line.from, selection.from);
             hint = onComplete?.({ line: str });
             if (hint) {
-              builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new PlaceholderWidget(hint) }));
             }
           }
 
@@ -86,44 +85,3 @@ export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
     ),
   ];
 };
-
-type CompletionOptions = {
-  default?: string;
-  minLength?: number;
-};
-
-/**
- * Util to match current line to a static list of completions.
- */
-export const staticCompletion =
-  (completions: string[], options: CompletionOptions = {}) =>
-  ({ line }: TypeaheadContext) => {
-    if (line.length === 0 && options.default) {
-      return options.default;
-    }
-
-    const parts = line.split(/\s+/).filter(Boolean);
-    if (parts.length) {
-      const str = parts.at(-1)!;
-      if (str.length >= (options.minLength ?? 0)) {
-        for (const completion of completions) {
-          const match = matchCompletion(completion, str);
-          if (match) {
-            return match;
-          }
-        }
-      }
-    }
-  };
-
-export const matchCompletion = (completion: string, str: string, minLength = 0): string | undefined => {
-  if (
-    str.length >= minLength &&
-    completion.length > str.length &&
-    completion.startsWith(str)
-    // TODO(burdon): If case insensitive, need to replace existing chars.
-    // completion.toLowerCase().startsWith(str.toLowerCase())
-  ) {
-    return completion.slice(str.length);
-  }
-};

package/src/extensions/automerge/automerge.ts

@@ -5,12 +5,13 @@
 //
 
 import { next as A } from '@automerge/automerge';
-import { type Extension, StateField } from '@codemirror/state';
+import { type Extension, StateField, Transaction } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { type DocAccessor } from '@dxos/react-client/echo';
+import { DocAccessor } from '@dxos/client/echo';
 
 import { Cursor } from '../../util';
+import { initialSync } from '../state';
 
 import { cursorConverter } from './cursor';
 import { type State, isReconcile, updateHeadsEffect } from './defs';
@@ -18,11 +19,13 @@ import { Syncer } from './sync';
 
 export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
-    create: () => ({
-      path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.doc()!),
-      unreconciledTransactions: [],
-    }),
+    create: () => {
+      return {
+        path: accessor.path.slice(),
+        lastHeads: A.getHeads(accessor.handle.doc()!),
+        unreconciledTransactions: [],
+      };
+    },
 
     update: (value, tr) => {
       const result: State = {
@@ -64,6 +67,18 @@ export const automerge = (accessor: DocAccessor): Extension => {
       class {
         constructor(private readonly _view: EditorView) {
           accessor.handle.addListener('change', this._handleChange);
+
+          requestAnimationFrame(() => {
+            const value = DocAccessor.getValue<string>(accessor);
+            const current = this._view.state.doc.toString();
+            if (value !== current) {
+              // TODO(burdon): This attempts to set the initial state, but creates problems.
+              // this._view.dispatch({
+              //   changes: { from: 0, to: this._view.state.doc.length, insert: value },
+              //   annotations: initialSync,
+              // });
+            }
+          });
         }
 
         destroy() {
@@ -77,9 +92,13 @@ export const automerge = (accessor: DocAccessor): Extension => {
     ),
 
     // Reconcile local updates.
-    EditorView.updateListener.of(({ view, changes }) => {
+    EditorView.updateListener.of(({ view, changes, transactions }) => {
       if (!changes.empty) {
-        syncer.reconcile(view, true);
+        // Only reconcile if it's not an initial sync (to avoid loops)
+        const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
+        if (!isInitialSync) {
+          syncer.reconcile(view, true);
+        }
       }
     }),
   ];

package/src/extensions/automerge/cursor.ts

@@ -2,8 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type DocAccessor, fromCursor, toCursor } from '@dxos/client/echo';
 import { log } from '@dxos/log';
-import { type DocAccessor, fromCursor, toCursor } from '@dxos/react-client/echo';
 
 import { type CursorConverter } from '../../util';
 

package/src/extensions/automerge/sync.ts

@@ -8,7 +8,8 @@ import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
-import { type IDocHandle } from '@dxos/react-client/echo';
+import { type IDocHandle } from '@dxos/client/echo';
+import { log } from '@dxos/log';
 
 import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';
 import { updateAutomerge } from './update-automerge';
@@ -27,7 +28,6 @@ export class Syncer {
   ) {}
 
   reconcile(view: EditorView, editor: boolean): void {
-    // TODO(burdon): Better way to do mutex?
     if (this._pending) {
       return;
     }
@@ -41,7 +41,9 @@ export class Syncer {
     this._pending = false;
   }
 
-  onEditorChange(view: EditorView): void {
+  private onEditorChange(view: EditorView): void {
+    log('onEditorChange');
+
     // Apply the unreconciled transactions to the document.
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
@@ -54,7 +56,9 @@ export class Syncer {
     }
   }
 
-  onAutomergeChange(view: EditorView): void {
+  private onAutomergeChange(view: EditorView): void {
+    log('onAutomergeChange');
+
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
     const newHeads = A.getHeads(this._handle.doc()!);

package/src/extensions/automerge/update-automerge.ts

@@ -7,7 +7,7 @@
 import { next as A, type Heads } from '@automerge/automerge';
 import { type EditorState, type StateField, type Text, type Transaction } from '@codemirror/state';
 
-import { type IDocHandle } from '@dxos/react-client/echo';
+import { type IDocHandle } from '@dxos/client/echo';
 
 import { type State } from './defs';
 

package/src/extensions/autoscroll.ts

@@ -12,8 +12,8 @@ const lineHeight = 24;
 export const scrollToBottomEffect = StateEffect.define<any>();
 
 export type AutoScrollOptions = {
-  overscroll: number;
-  throttle: number;
+  overscroll?: number;
+  throttle?: number;
 };
 
 /**
@@ -115,7 +115,7 @@ export const autoScroll = ({ overscroll = 4 * lineHeight, throttle = 2_000 }: Pa
               Domino.of('button')
                 .classNames('dx-button bg-accentSurface')
                 .data('density', 'fine')
-                .children(Domino.of<any>('dx-icon').attr('icon', 'ph--arrow-down--regular'))
+                .children(Domino.of<any>('dx-icon').attributes({ icon: 'ph--arrow-down--regular' }))
                 .on('click', () => {
                   scrollToBottom(view);
                 }),

package/src/extensions/awareness/awareness-provider.ts

@@ -3,11 +3,11 @@
 //
 
 import { DeferredTask, Event, sleep } from '@dxos/async';
+import { type Space } from '@dxos/client/echo';
+import { type GossipMessage } from '@dxos/client/mesh';
 import { Context } from '@dxos/context';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { type Space } from '@dxos/react-client/echo';
-import { type GossipMessage } from '@dxos/react-client/mesh';
 
 import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
 

package/src/extensions/factories.ts

@@ -4,10 +4,9 @@
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
-import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { HighlightStyle, bracketMatching, syntaxHighlighting } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
 import { type ChangeSpec, EditorState, type Extension, type TransactionSpec } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import {
   EditorView,
   type KeyBinding,
@@ -20,13 +19,14 @@ import {
   placeholder,
   scrollPastEnd,
 } from '@codemirror/view';
+import { vscodeDarkStyle, vscodeLightStyle } from '@uiw/codemirror-theme-vscode';
 import defaultsDeep from 'lodash.defaultsdeep';
 import merge from 'lodash.merge';
 
+import { type DocAccessor, type Space } from '@dxos/client/echo';
+import { type Identity } from '@dxos/client/halo';
 import { generateName } from '@dxos/display-name';
 import { log } from '@dxos/log';
-import { type DocAccessor, type Space } from '@dxos/react-client/echo';
-import { type Identity } from '@dxos/react-client/halo';
 import { type ThemeMode } from '@dxos/react-ui';
 import { type HuePalette } from '@dxos/react-ui-theme';
 import { hexToHue, isTruthy } from '@dxos/util';
@@ -87,11 +87,11 @@ export type BasicExtensionsOptions = {
   lineNumbers?: boolean;
   /** If false then do not set a max-width or side margin on the editor. */
   lineWrapping?: boolean;
-  monospace?: boolean;
   placeholder?: string;
   /** If true user cannot edit the text, but they can still select and copy it. */
   readOnly?: boolean;
   search?: boolean;
+  /** NOTE: Do not use with stack sections. */
   scrollPastEnd?: boolean;
   standardKeymap?: boolean;
   tabSize?: number;
@@ -135,7 +135,6 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.history && history(),
     props.lineNumbers && [lineNumbers(), editorGutter],
     props.lineWrapping && EditorView.lineWrapping,
-    props.monospace && editorMonospace,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),
@@ -172,6 +171,7 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
 
 export type ThemeExtensionsOptions = {
   themeMode?: ThemeMode;
+  monospace?: boolean;
   styles?: ThemeStyles;
   syntaxHighlighting?: boolean;
   slots?: {
@@ -201,20 +201,28 @@ export const fullWidth: ThemeExtensionsOptions['slots'] = {
 
 export const defaultThemeSlots = grow;
 
+export const defaultStyles = {
+  dark: vscodeDarkStyle,
+  light: vscodeLightStyle,
+};
+
 /**
  * https://codemirror.net/examples/styling
  */
 export const createThemeExtensions = ({
   themeMode,
+  monospace,
   styles,
-  syntaxHighlighting: syntaxHighlightingProps,
-  slots: _slots,
+  syntaxHighlighting: syntaxHighlightingProp,
+  slots: slotsParam,
 }: ThemeExtensionsOptions = {}): Extension => {
-  const slots = defaultsDeep({}, _slots, defaultThemeSlots);
+  const slots = defaultsDeep({}, slotsParam, defaultThemeSlots);
   return [
     EditorView.darkTheme.of(themeMode === 'dark'),
     EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
-    syntaxHighlightingProps && syntaxHighlighting(themeMode === 'dark' ? oneDarkHighlightStyle : defaultHighlightStyle),
+    monospace && editorMonospace,
+    syntaxHighlightingProp &&
+      syntaxHighlighting(HighlightStyle.define(themeMode === 'dark' ? defaultStyles.dark : defaultStyles.light)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
     slots.scroll?.className &&

package/src/extensions/hashtag.tsx

@@ -13,7 +13,7 @@ import {
   WidgetType,
 } from '@codemirror/view';
 
-import { getHashColor, mx } from '@dxos/react-ui-theme';
+import { getHashStyles, mx } from '@dxos/react-ui-theme';
 
 class TagWidget extends WidgetType {
   constructor(private _text: string) {
@@ -22,7 +22,7 @@ class TagWidget extends WidgetType {
 
   toDOM(): HTMLSpanElement {
     const span = document.createElement('span');
-    span.className = mx('cm-tag', getHashColor(this._text).tag);
+    span.className = mx('cm-tag', getHashStyles(this._text).surface);
     span.textContent = this._text;
     return span;
   }

package/src/extensions/index.ts

@@ -8,13 +8,10 @@ export * from './autoscroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
-export * from './command-dialog';
-export * from './command-menu';
 export * from './comments';
 export * from './debug';
 export * from './dnd';
 export * from './factories';
-export * from './floating-menu';
 export * from './focus';
 export * from './folding';
 export * from './hashtag';
@@ -24,7 +21,9 @@ export * from './markdown';
 export * from './mention';
 export * from './modes';
 export * from './outliner';
+export * from './popover';
 export * from './preview';
 export * from './selection';
+export * from './state';
 export * from './tags';
 export * from './typewriter';

package/src/extensions/json.ts

@@ -7,7 +7,7 @@ import { type LintSource, linter } from '@codemirror/lint';
 import { type Extension } from '@codemirror/state';
 import Ajv, { type ValidateFunction } from 'ajv';
 
-import { type JsonSchemaType } from '@dxos/echo-schema';
+import { type JsonSchemaType } from '@dxos/echo/internal';
 
 export type JsonExtensionsOptions = {
   schema?: JsonSchemaType;

package/src/extensions/listener.ts

@@ -5,34 +5,28 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
+import { isNonNullable } from '@dxos/util';
+
 import { documentId } from './selection';
 
 export type ListenerOptions = {
-  onFocus?: (focusing: boolean) => void;
-  onChange?: (text: string, id: string) => void;
+  onFocus?: (event: { id: string; focusing: boolean }) => void;
+  onChange?: (event: { id: string; text: string }) => void;
 };
 
-/**
- * Event listener.
- * @deprecated Use EditorView.updateListener and listen for specific update events.
- */
 export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
-  const extensions: Extension[] = [];
-
-  onFocus &&
-    extensions.push(
-      EditorView.focusChangeEffect.of((_, focusing) => {
-        onFocus(focusing);
+  return [
+    onFocus &&
+      EditorView.focusChangeEffect.of((state, focusing) => {
+        onFocus({ id: state.facet(documentId), focusing });
         return null;
       }),
-    );
 
-  onChange &&
-    extensions.push(
-      EditorView.updateListener.of((update) => {
-        onChange(update.state.doc.toString(), update.state.facet(documentId));
+    onChange &&
+      EditorView.updateListener.of(({ state, docChanged }) => {
+        if (docChanged) {
+          onChange({ id: state.facet(documentId), text: state.doc.toString() });
+        }
       }),
-    );
-
-  return extensions;
+  ].filter(isNonNullable);
 };

package/src/extensions/markdown/bundle.ts

@@ -4,8 +4,10 @@
 
 import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { jsonLanguage } from '@codemirror/lang-json';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { syntaxHighlighting } from '@codemirror/language';
+import { xml } from '@codemirror/lang-xml';
+import { LanguageDescription, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
@@ -43,6 +45,7 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       base: markdownLanguage,
 
       // Languages for syntax highlighting fenced code blocks.
+      defaultCodeLanguage: jsonLanguage,
       codeLanguages: languages,
 
       // Don't complete HTML tags.
@@ -66,12 +69,21 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
 
         // https://codemirror.net/docs/ref/#commands.defaultKeymap
         ...defaultKeymap,
+
+        // TODO(burdon): Remove?
         ...completionKeymap,
       ].filter(isTruthy),
     ),
   ];
 };
 
+const xmlLanguageDesc = LanguageDescription.of({
+  name: 'xml',
+  alias: ['html', 'xhtml'],
+  extensions: ['xml', 'xhtml'],
+  load: async () => xml(),
+});
+
 /**
  * Default customizations.
  * https://github.com/lezer-parser/markdown/blob/main/src/markdown.ts
@@ -89,5 +101,5 @@ const noSetExtHeading: MarkdownConfig = {
  * Remove HTML and XML parsing.
  */
 const noHtml: MarkdownConfig = {
-  remove: ['HTMLBlock', 'HTMLTag'],
+  // remove: ['HTMLBlock', 'HTMLTag'],
 };

package/src/extensions/markdown/formatting.ts

@@ -15,10 +15,8 @@ import {
 } from '@codemirror/state';
 import { EditorView, type ViewUpdate, keymap } from '@codemirror/view';
 import { type SyntaxNode, type SyntaxNodeRef } from '@lezer/common';
-import { useCallback, useMemo } from 'react';
 
 import { debounceAndThrottle } from '@dxos/async';
-import { type Live } from '@dxos/live-object';
 
 import { type EditorToolbarState } from '../../components';
 
@@ -1251,17 +1249,19 @@ export const getFormatting = (state: EditorState): Formatting => {
 /**
  * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (state: Live<EditorToolbarState>): Extension => {
-  const handleUpdate = useCallback(
+export const formattingListener = (stateProvider: () => EditorToolbarState | undefined, delay = 100): Extension => {
+  return EditorView.updateListener.of(
     debounceAndThrottle((update: ViewUpdate) => {
       if (update.docChanged || update.selectionSet) {
+        const state = stateProvider();
+        if (!state) {
+          return;
+        }
+
         Object.entries(getFormatting(update.state)).forEach(([key, active]) => {
           state[key as keyof Formatting] = active as any;
         });
       }
-    }, 100),
-    [state],
+    }, delay),
   );
-
-  return useMemo(() => EditorView.updateListener.of(handleUpdate), [handleUpdate]);
 };

package/src/extensions/modes.ts

@@ -11,7 +11,7 @@ import { singleValueFacet } from '../util';
 
 export type EditorInputConfig = {
   type?: string;
-  noTabster?: boolean;
+  ignoreEscape?: boolean;
 };
 
 export const editorInputMode = singleValueFacet<EditorInputConfig>({});
@@ -26,7 +26,7 @@ export const InputModeExtensions: { [mode: string]: Extension } = {
   vim: [
     // https://github.com/replit/codemirror-vim
     vim(),
-    editorInputMode.of({ type: 'vim', noTabster: true }),
+    editorInputMode.of({ type: 'vim', ignoreEscape: true }),
     keymap.of([
       {
         key: 'Alt-Escape',