@dxos/react-ui-editor 0.3.9-main.9ca5eac → 0.3.9-main.9da1d41

package/dist/types/src/components/RichText/RichText.d.ts

@@ -1,20 +0,0 @@
-import { type Editor } from '@tiptap/react';
-import React from 'react';
-import { type EditorModel, type EditorSlots } from '../../model';
-export type TipTapEditor = Editor;
-type UseEditorOptions = {
-    model?: EditorModel;
-    placeholder?: string;
-    slots?: Pick<EditorSlots, 'editor'>;
-};
-export type RichTextEditorProps = UseEditorOptions & {
-    slots?: EditorSlots;
-};
-/**
- * @deprecated
- */
-export declare const RichTextEditor: React.ForwardRefExoticComponent<UseEditorOptions & {
-    slots?: EditorSlots | undefined;
-} & React.RefAttributes<Editor | null>>;
-export {};
-//# sourceMappingURL=RichText.d.ts.map

package/dist/types/src/components/RichText/RichText.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/RichText.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,MAAM,EAAgD,MAAM,eAAe,CAAC;AAE1F,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAkBjE,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;CACrC,CAAC;AA2HF,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,GAAG;IACnD,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,cAAc;;uCASzB,CAAC"}

package/dist/types/src/components/RichText/RichText.stories.d.ts

@@ -1,27 +0,0 @@
-import '@dxosTheme';
-import React from 'react';
-import { type RichTextEditorProps } from './RichText';
-declare const _default: {
-    component: React.ForwardRefExoticComponent<{
-        model?: import("../..").EditorModel | undefined;
-        placeholder?: string | undefined;
-        slots?: Pick<import("../..").EditorSlots, "editor"> | undefined;
-    } & {
-        slots?: import("../..").EditorSlots | undefined;
-    } & React.RefAttributes<import("@tiptap/react").Editor | null>>;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default _default;
-export declare const Default: {
-    args: {
-        model: {
-            id: string;
-            content: string;
-        };
-    };
-};
-export declare const WithYjs: {
-    render: (args: Omit<RichTextEditorProps, 'model'>) => JSX.Element;
-    decorators: import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0fc72a6d").R, any>[];
-};
-//# sourceMappingURL=RichText.stories.d.ts.map

package/dist/types/src/components/RichText/RichText.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichText.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/RichText.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;AAGtE,wBAGE;AAEF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAGF,eAAO,MAAM,OAAO;mBACH,KAAK,mBAAmB,EAAE,OAAO,CAAC;;CAmClD,CAAC"}

package/dist/types/src/components/RichText/index.d.ts

@@ -1,2 +0,0 @@
-export * from './RichText';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/RichText/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAC"}

package/dist/types/src/components/TextEditor/extensions/hyperlink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hyperlink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlink.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAEL,KAAK,aAAa,EAElB,cAAc,EACd,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AA4C1B,wBAAgB,kBAAkB;wBAGR,cAAc;;mBAOnB,UAAU;GAwB9B;AAED,eAAO,MAAM,cAAc,WAYzB,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,SAAkD,CAAC"}

package/dist/types/src/components/TextEditor/extensions/hyperlinkTooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hyperlinkTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlinkTooltip.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,YAAa,gBAAgB,2DA0C5D,CAAC"}

package/dist/types/src/components/TextEditor/theme.d.ts

@@ -1,8 +0,0 @@
-import { type StyleSpec } from 'style-mod';
-/**
- * https://codemirror.net/examples/styling
- */
-export declare const defaultStyles: {
-    [selector: string]: StyleSpec;
-};
-//# sourceMappingURL=theme.d.ts.map

package/dist/types/src/components/TextEditor/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/theme.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAM3C;;GAEG;AAEH,eAAO,MAAM,aAAa,EAAE;IAC1B,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAgB/B,CAAC"}

package/dist/types/src/model.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../src/model.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAAW,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAI5D,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,aAAa,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;KACxD,CAAC;CACH,CAAC;AAEF,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAC7C,KAAK,QAAQ,GAAG;IAAE,SAAS,EAAE,SAAS,CAAA;CAAE,CAAC;AAGzC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,YAAY,CAAC;IACvC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,YAAY,8BAA+B,mBAAmB,KAAG,WAAW,GAAG,SAwB3F,CAAC"}

package/dist/types/src/yjs/cursors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursors.d.ts","sourceRoot":"","sources":["../../../../src/yjs/cursors.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW;;;CAAsD,CAAC"}

package/dist/types/src/yjs/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/yjs/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}

package/dist/types/src/yjs/space-provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"space-provider.d.ts","sourceRoot":"","sources":["../../../../src/yjs/space-provider.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAO7C;;GAEG;AACH,qBAAa,sBAAuB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;gBAEtB,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA+BlH,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IAoCpB,OAAO,CAAC,mBAAmB;CAG5B"}

package/dist/types/stories/html/code-mirror.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-mirror.stories.d.ts","sourceRoot":"","sources":["../../../../stories/html/code-mirror.stories.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAKhD,OAAO,EAAE,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;;;;AAS5D,wBAEE;AAoEF,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAoBjF,CAAC"}

package/src/automerge/demo.ts

@@ -1,106 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Event } from '@dxos/async';
-import {
-  type Doc,
-  next as automerge,
-  type ChangeOptions,
-  type ChangeFn,
-  type Heads,
-  type SyncState,
-} from '@dxos/automerge/automerge';
-
-export class Peer {
-  changeEvent = new Event();
-
-  storage = new Map<string, Uint8Array>();
-  stats = {
-    messagesSent: 0,
-    messagesReceived: 0,
-    bytesSent: 0,
-    bytesReceived: 0,
-    snapshotBytes: 0,
-    incrementalBytes: 0,
-  };
-
-  doc!: Doc<{ text: string }>;
-
-  change(options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>) {
-    this.doc = automerge.change(this.doc, options, callback);
-    this._handleChange();
-  }
-
-  changeAt(scope: Heads, options: string | ChangeOptions<any> | ChangeFn<any>, callback?: ChangeFn<any>) {
-    const { newDoc, newHeads } = automerge.changeAt(this.doc, scope, options, callback);
-    this.doc = newDoc;
-    this._handleChange();
-    return newHeads;
-  }
-
-  replicate(): { readable: ReadableStream<Uint8Array>; writable: WritableStream<Uint8Array> } {
-    let syncState: SyncState = automerge.initSyncState();
-
-    let unsub: (() => void) | undefined;
-    const readable = new ReadableStream({
-      start: (controller) => {
-        unsub = this.changeEvent.on(() => {
-          const [newState, msg] = automerge.generateSyncMessage(this.doc, syncState);
-          syncState = newState;
-
-          if (msg) {
-            this.stats.messagesSent++;
-            this.stats.bytesSent += msg.byteLength;
-            controller.enqueue(msg);
-          }
-        });
-      },
-      pull: (controller) => {
-        const [newState, msg] = automerge.generateSyncMessage(this.doc, syncState);
-        syncState = newState;
-
-        if (msg) {
-          this.stats.messagesSent++;
-          this.stats.bytesSent += msg.byteLength;
-          controller.enqueue(msg);
-        }
-      },
-      cancel: () => {
-        unsub?.();
-      },
-    });
-
-    const writable = new WritableStream({
-      write: (chunk) => {
-        this.stats.messagesReceived++;
-        this.stats.bytesReceived += chunk.byteLength;
-
-        const [newDoc, newState] = automerge.receiveSyncMessage(this.doc, syncState, chunk);
-        this.doc = newDoc;
-        syncState = newState;
-
-        this._handleChange();
-      },
-    });
-
-    return { readable, writable };
-  }
-
-  private _handleChange() {
-    // TODO(dmaretskyi): Save since + debounce.
-
-    if (this.stats.incrementalBytes > 1024 && this.stats.incrementalBytes > this.stats.snapshotBytes) {
-      const snapshot = automerge.save(this.doc);
-      this.stats.snapshotBytes = snapshot.byteLength;
-      this.stats.incrementalBytes = 0;
-      console.log('snapshot save', snapshot.byteLength);
-    } else {
-      const chunk = automerge.saveIncremental(this.doc);
-      this.stats.incrementalBytes += chunk.length;
-      console.log('incremental save', chunk.length);
-    }
-
-    this.changeEvent.emit();
-  }
-}

package/src/components/Editor/Editor.stories.tsx

@@ -1,82 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxosTheme';
-
-import React, { useState } from 'react';
-
-import { type PublicKey } from '@dxos/react-client';
-import { TextObject, TextKind, useQuery, useSpace } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { ClientDecorator, setupPeersInSpace, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
-import { useId } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { Editor, type EditorProps } from './Editor';
-import { EditorDocument, types as schema } from '../../testing';
-
-export default {
-  component: Editor,
-  decorators: [withTheme],
-};
-
-const Story = ({ spaceKey, ...params }: Pick<EditorProps, 'slots'> & { spaceKey: PublicKey }) => {
-  const [generate, setGenerate] = useState(false);
-  const generateId = useId('generate');
-
-  const identity = useIdentity();
-  const space = useSpace(spaceKey);
-  const [document] = useQuery(space, EditorDocument.filter());
-
-  useDataGenerator({
-    generator: generate ? textGenerator : undefined,
-    options: { text: document?.content.content },
-  });
-
-  return (
-    <main className='flex-1 min-w-0 p-4'>
-      <div id={generateId} className='flex'>
-        <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
-        Generate Data
-      </div>
-      {document?.content.toString().length}
-      <Editor identity={identity} space={space} text={document?.content} {...params} />
-    </main>
-  );
-};
-
-const { spaceKey: markdownSpaceKey, clients: markdownClients } = await setupPeersInSpace({
-  count: 2,
-  schema,
-  onCreateSpace: async (space) => {
-    const document = new EditorDocument({ content: new TextObject('Hello, Storybook!') });
-    await space?.db.add(document);
-  },
-});
-
-export const Markdown = {
-  render: (args: { id: number }) => <Story {...args} spaceKey={markdownSpaceKey} />,
-  decorators: [ClientDecorator({ clients: markdownClients })],
-};
-
-const { spaceKey: richSpaceKey, clients: richClients } = await setupPeersInSpace({
-  count: 2,
-  schema,
-  onCreateSpace: async (space) => {
-    const document = new EditorDocument({ content: new TextObject('Hello, Storybook!', TextKind.RICH) });
-    await space?.db.add(document);
-  },
-});
-
-export const Rich = {
-  render: (args: { id: number }) => <Story {...args} spaceKey={richSpaceKey} />,
-  args: {
-    slots: {
-      editor: {
-        className: 'z-0 rounded bg-white text-neutral-900 w-full p-4 dark:bg-neutral-850 dark:text-white min-bs-[12em]',
-      },
-    },
-  },
-  decorators: [ClientDecorator({ clients: richClients })],
-};

package/src/components/Editor/Editor.tsx

@@ -1,33 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { forwardRef, memo, type Ref } from 'react';
-
-import { YXmlFragment } from '@dxos/text-model';
-
-import { type EditorSlots, useTextModel, type UseTextModelOptions } from '../../model';
-import { MarkdownEditor, type MarkdownEditorRef } from '../Markdown';
-import { RichTextEditor, type TipTapEditor } from '../RichText';
-
-export type EditorProps = UseTextModelOptions & {
-  slots?: EditorSlots;
-};
-
-/**
- * Memoized editor which depends on DXOS platform.
- *
- * Determines which editor to render based on the kind of text.
- */
-// NOTE: Without `memo`, if parent component uses `observer` the editor re-renders excessively.
-// TODO(wittjosiah): Factor out?
-export const Editor = memo(
-  forwardRef<TipTapEditor | MarkdownEditorRef, EditorProps>(({ slots, ...params }, forwardedRef) => {
-    const model = useTextModel(params);
-    if (model?.content instanceof YXmlFragment) {
-      return <RichTextEditor ref={forwardedRef as Ref<TipTapEditor>} model={model} slots={slots} />;
-    } else {
-      return <MarkdownEditor ref={forwardedRef as Ref<MarkdownEditorRef>} model={model} slots={slots} />;
-    }
-  }),
-);

package/src/components/Editor/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './Editor';

package/src/components/Markdown/Markdown.stories.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxosTheme';
-
-import React, { useState } from 'react';
-
-import { PublicKey } from '@dxos/react-client';
-import { TextKind } from '@dxos/react-client/echo';
-import { ClientDecorator, textGenerator, useDataGenerator } from '@dxos/react-client/testing';
-import { useId } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { MarkdownEditor } from './Markdown';
-import { Replicator, useYjsModel } from '../../testing';
-
-export default {
-  component: MarkdownEditor,
-  decorators: [withTheme],
-};
-
-export const Default = {
-  args: {
-    model: {
-      id: 'editor',
-      content: 'Hello, Storybook!',
-    },
-  },
-};
-
-const replicator = new Replicator(TextKind.PLAIN);
-
-export const WithYjs = {
-  render: () => {
-    const [generate, setGenerate] = useState(false);
-    const generateId = useId('generate');
-
-    const [id] = useState(PublicKey.random().toHex());
-    const model = useYjsModel({ id, replicator });
-
-    useDataGenerator({
-      generator: generate ? textGenerator : undefined,
-      options: { text: typeof model?.content !== 'string' ? model?.content : undefined },
-    });
-
-    return (
-      <main className='flex-1 min-w-0 p-4'>
-        <div id={generateId} className='flex'>
-          <input type='checkbox' onChange={(event) => setGenerate(event.target.checked)} />
-          Generate Data
-        </div>
-        <MarkdownEditor model={model} />
-      </main>
-    );
-  },
-  // TODO(wittjosiah): Decorator for doing this without clients being initialized?
-  decorators: [ClientDecorator({ count: 2 })],
-};

package/src/components/Markdown/Markdown.tsx

@@ -1,214 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import {
-  bracketMatching,
-  defaultHighlightStyle,
-  foldKeymap,
-  indentOnInput,
-  syntaxHighlighting,
-} from '@codemirror/language';
-import { languages } from '@codemirror/language-data';
-import { lintKeymap } from '@codemirror/lint';
-import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
-import { EditorState, type Extension, StateField, type Text } from '@codemirror/state';
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import {
-  keymap,
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  highlightActiveLine,
-  highlightActiveLineGutter,
-  highlightSpecialChars,
-  placeholder,
-  rectangularSelection,
-  EditorView,
-} from '@codemirror/view';
-import { useFocusableGroup } from '@fluentui/react-tabster';
-import { vim } from '@replit/codemirror-vim';
-import React, {
-  type KeyboardEvent,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useState,
-  useMemo,
-  useCallback,
-} from 'react';
-import { yCollab } from 'y-codemirror.next';
-
-import { generateName } from '@dxos/display-name';
-import { useThemeContext } from '@dxos/react-ui';
-import { getColorForValue } from '@dxos/react-ui-theme';
-import { YText } from '@dxos/text-model';
-
-import { markdownTagsExtension } from './markdownTags';
-import { markdownDarkHighlighting, markdownTheme } from './markdownTheme';
-import { type EditorModel, type EditorSlots } from '../../model';
-
-export const EditorModes = ['default', 'vim'] as const;
-export type EditorMode = (typeof EditorModes)[number];
-
-export type MarkdownEditorProps = {
-  model?: EditorModel;
-  slots?: EditorSlots;
-  editorMode?: EditorMode;
-  extensions?: Extension[];
-  onChange?: (content: string | Text) => void;
-};
-
-export type MarkdownEditorRef = {
-  editor: HTMLDivElement | null;
-  state?: EditorState;
-  view?: EditorView;
-};
-
-export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
-  ({ model, slots = {}, editorMode, extensions = [], onChange }, forwardedRef) => {
-    const { id, content, provider, peer } = model ?? {};
-    const { themeMode } = useThemeContext();
-    const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
-
-    const [parent, setParent] = useState<HTMLDivElement | null>(null);
-    const [state, setState] = useState<EditorState>();
-    const [view, setView] = useState<EditorView>();
-
-    useImperativeHandle(forwardedRef, () => ({
-      editor: parent,
-      state,
-      view,
-    }));
-
-    const listenChangesExtension = useMemo(
-      () =>
-        StateField.define({
-          create: () => null,
-          update: (_value, transaction) => {
-            if (transaction.docChanged && onChange) {
-              onChange(transaction.newDoc);
-            }
-            return null;
-          },
-        }),
-      [onChange],
-    );
-
-    useEffect(() => {
-      if (provider && peer) {
-        provider.awareness.setLocalStateField('user', {
-          name: peer.name ?? generateName(peer.id),
-          color: getColorForValue({ value: peer.id, type: 'color' }),
-          colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
-        });
-      }
-    }, [provider, peer, themeMode]);
-
-    useEffect(() => {
-      if (!parent) {
-        return;
-      }
-
-      const state = EditorState.create({
-        doc: content?.toString(),
-        extensions: [
-          // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799.
-          listenChangesExtension,
-
-          ...(editorMode === 'vim' ? [vim()] : []),
-
-          // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
-          highlightActiveLineGutter(),
-          highlightSpecialChars(),
-          history(),
-          drawSelection(),
-          dropCursor(),
-          EditorState.allowMultipleSelections.of(true),
-          indentOnInput(),
-          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-          bracketMatching(),
-          closeBrackets(),
-          autocompletion(),
-          rectangularSelection(),
-          crosshairCursor(),
-          highlightActiveLine(),
-          highlightSelectionMatches(),
-          placeholder(slots.editor?.placeholder ?? ''), // TODO(burdon): Needs consistent styling.
-          keymap.of([
-            ...closeBracketsKeymap,
-            ...defaultKeymap,
-            ...searchKeymap,
-            ...historyKeymap,
-            ...foldKeymap,
-            ...completionKeymap,
-            ...lintKeymap,
-            indentWithTab,
-          ]),
-          EditorView.lineWrapping,
-
-          // Themes.
-          markdown({ base: markdownLanguage, codeLanguages: languages, extensions: [markdownTagsExtension] }),
-          EditorView.theme({ ...markdownTheme, ...slots.editor?.markdownTheme }),
-          ...(themeMode === 'dark'
-            ? [syntaxHighlighting(oneDarkHighlightStyle)]
-            : [syntaxHighlighting(defaultHighlightStyle)]),
-          // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-          syntaxHighlighting(markdownDarkHighlighting),
-
-          // Replication and awareness (incl. remote selection).
-          ...(content instanceof YText ? [yCollab(content, provider?.awareness)] : []),
-
-          // Custom.
-          ...extensions,
-        ],
-      });
-
-      setState(state);
-
-      // NOTE: This repaints the editor.
-      // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
-      // Ideally this should not be hit except when changing between text objects.
-      view?.destroy();
-      setView(new EditorView({ state, parent }));
-
-      return () => {
-        view?.destroy();
-        setView(undefined);
-        setState(undefined);
-      };
-    }, [parent, content, provider?.awareness, themeMode, editorMode]);
-
-    const handleKeyUp = useCallback(
-      (event: KeyboardEvent) => {
-        const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
-        switch (key) {
-          case 'Enter': {
-            view?.contentDOM.focus();
-            break;
-          }
-
-          case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
-            break;
-          }
-        }
-      },
-      [view, editorMode],
-    );
-
-    return (
-      <div
-        tabIndex={0}
-        ref={setParent}
-        key={id}
-        {...slots.root}
-        {...(editorMode !== 'vim' ? tabsterDOMAttribute : {})}
-        onKeyUp={handleKeyUp}
-      />
-    );
-  },
-);

package/src/components/Markdown/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './Markdown';