@dxos/react-ui-editor 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/src/stories/EditorToolbar.stories.tsx

@@ -2,104 +2,61 @@
 // Copyright 2024 DXOS.org
 //
 
-import { RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useMemo } from 'react';
 
-import { invariant } from '@dxos/invariant';
-import { Panel, useThemeContext } from '@dxos/react-ui';
+import { useThemeContext } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import {
-  type EditorInputMode,
-  type EditorViewMode,
-  InputModeExtensions,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
   documentSlots,
   formattingKeymap,
-  formattingListener,
 } from '@dxos/ui-editor';
+import { type EditorViewMode } from '@dxos/ui-editor/types';
 
-import { EditorToolbar, type EditorToolbarState, useEditorToolbar } from '../components';
-import { type UseTextEditorProps, useTextEditor } from '../hooks';
-import { translations } from '../translations';
+import { translations } from '#translations';
 
-type DefaultStoryProps = { placeholder?: string } & UseTextEditorProps;
+import { Editor } from '../components';
+import { type UseTextEditorProps } from '../hooks';
 
-const DefaultStory = ({ autoFocus, initialValue, placeholder }: DefaultStoryProps) => {
-  const { themeMode } = useThemeContext();
-  const registry = useContext(RegistryContext);
-
-  const toolbarState = useEditorToolbar({ viewMode: 'source' });
-  const { viewMode } = useAtomValue(toolbarState);
-
-  const updateToolbarState = useCallback(
-    (formatting: EditorToolbarState) => {
-      registry.update(toolbarState, (state) => ({ ...state, ...formatting }));
-    },
-    [registry, toolbarState],
-  );
+type DefaultStoryProps = { placeholder?: string; viewMode?: EditorViewMode } & UseTextEditorProps;
 
-  // TODO(wittjosiah): Provide way to change the input mode.
-  const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
-  const { parentRef, view } = useTextEditor(
-    () => ({
-      autoFocus,
-      initialValue,
-      selectionEnd: true,
-      extensions: [
-        editorInputMode ? InputModeExtensions[editorInputMode] : [],
-        createBasicExtensions({
-          placeholder,
-          lineWrapping: true,
-          readOnly: viewMode === 'readonly',
-          search: true,
-        }),
-        createThemeExtensions({
-          themeMode,
-          syntaxHighlighting: true,
-          slots: documentSlots,
-        }),
-        createMarkdownExtensions(),
-        viewMode === 'source' ? [] : decorateMarkdown(),
-        formattingKeymap(),
-        formattingListener(updateToolbarState),
-      ],
-    }),
-    [editorInputMode, viewMode, themeMode, placeholder],
-  );
-
-  const getView = useCallback(() => {
-    invariant(view);
-    return view;
-  }, [view]);
+const DefaultStory = ({ autoFocus, initialValue, placeholder, viewMode = 'source' }: DefaultStoryProps) => {
+  const { themeMode } = useThemeContext();
 
-  const handleViewModeChange = useCallback(
-    (mode: EditorViewMode) => {
-      registry.update(toolbarState, (state) => ({ ...state, viewMode: mode }));
-    },
-    [registry, toolbarState],
+  const extensions = useMemo(
+    () => [
+      createBasicExtensions({
+        placeholder,
+        lineWrapping: true,
+        readOnly: viewMode === 'readonly',
+        search: true,
+      }),
+      createThemeExtensions({
+        themeMode,
+        syntaxHighlighting: true,
+        slots: documentSlots,
+      }),
+      createMarkdownExtensions(),
+      viewMode === 'source' ? [] : decorateMarkdown(),
+      formattingKeymap(),
+    ],
+    [viewMode, themeMode, placeholder],
   );
 
   return (
-    <Panel.Root>
-      {toolbarState && (
-        <Panel.Toolbar>
-          <EditorToolbar
-            classNames='dx-document'
-            state={toolbarState}
-            getView={getView}
-            onViewModeChange={handleViewModeChange}
-          />
-        </Panel.Toolbar>
-      )}
-      <Panel.Content>
-        <div role='none' className='dx-container dx-document bg-base-surface' ref={parentRef} />
-      </Panel.Content>
-    </Panel.Root>
+    <Editor.Root extensions={extensions} viewMode={viewMode}>
+      <Editor.Content>
+        <Editor.Toolbar classNames='dx-document' />
+        <div className='dx-container dx-document bg-base-surface'>
+          <Editor.View autoFocus={autoFocus} initialValue={initialValue} selectionEnd />
+        </div>
+      </Editor.Content>
+    </Editor.Root>
   );
 };
 

package/src/stories/Experimental.stories.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { log } from '@dxos/log';
 import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { blast, defaultOptions, dropFile, join, typewriter } from '@dxos/ui-editor';
+import { blast, defaultOptions, dropFile, join, snippets } from '@dxos/ui-editor';
 
 import { EditorStory, content } from './components';
 
@@ -27,16 +27,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 //
-// Typewriter
+// Snippets
 //
 
-const typewriterItems = localStorage.getItem('org.dxos.testing.typewriter')?.split(',');
+const snippetItems = localStorage.getItem('org.dxos.testing.snippets')?.split(',');
 
-export const Typewriter: Story = {
+export const Snippets: Story = {
   render: () => (
     <EditorStory
-      text={join('# Typewriter', '', content.paragraphs, content.footer)}
-      extensions={[typewriter({ items: typewriterItems })]}
+      text={join('# Snippets', '', content.paragraphs, content.footer)}
+      extensions={[snippets({ items: snippetItems })]}
     />
   ),
 };
@@ -50,7 +50,7 @@ export const Blast: Story = {
     <EditorStory
       text={join('# Blast', '', content.paragraphs, content.codeblocks, content.paragraphs)}
       extensions={[
-        typewriter({ items: typewriterItems }),
+        snippets({ items: snippetItems }),
         blast(
           defaultsDeep(
             {

package/src/stories/Theme.stories.tsx

@@ -34,10 +34,10 @@ const DefaultStory = () => {
   return (
     <div className='w-full grid grid-cols-2 gap-2'>
       <Editor.Root>
-        <Editor.Content classNames='p-2' extensions={ext1} initialValue={createText(false)} />
+        <Editor.View classNames='p-2' extensions={ext1} initialValue={createText(false)} />
       </Editor.Root>
       <Editor.Root>
-        <Editor.Content classNames='p-2' extensions={ext2} initialValue={createText(true)} />
+        <Editor.View classNames='p-2' extensions={ext2} initialValue={createText(true)} />
       </Editor.Root>
     </div>
   );

package/src/stories/components/EditorStory.tsx

@@ -12,7 +12,7 @@ import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { useMergeRefs, useThemeContext } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import {
   type DebugNode,
   type ThemeExtensionsOptions,
@@ -77,12 +77,14 @@ export const EditorStory = forwardRef<EditorController, EditorStoryProps>(
               </pre>
             )}
             {(debug === 'tree' || debug === 'raw+tree') && (
-              <Json.Root data={tree}>
-                <Json.Content>
-                  <Json.Filter />
-                  <Json.Data classNames='p-1 text-xs' />
-                </Json.Content>
-              </Json.Root>
+              <Syntax.Root data={tree}>
+                <Syntax.Content>
+                  <Syntax.Filter />
+                  <Syntax.Viewport>
+                    <Syntax.Code classNames='p-1 text-xs' />
+                  </Syntax.Viewport>
+                </Syntax.Content>
+              </Syntax.Root>
             )}
           </div>
         )}

package/src/stories/components/util.tsx

@@ -9,7 +9,6 @@ import { random } from '@dxos/random';
 import { Domino } from '@dxos/ui';
 import {
   type EditorSelectionState,
-  type RenderCallback,
   decorateMarkdown,
   folding,
   formattingKeymap,
@@ -17,6 +16,7 @@ import {
   linkTooltip,
   table,
 } from '@dxos/ui-editor';
+import { type RenderCallback } from '@dxos/ui-editor/types';
 import { safeUrl } from '@dxos/util';
 
 import { str } from '../../util';
@@ -206,7 +206,7 @@ export const links: Completion[] = [
 export const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
 
 const hover =
-  'rounded-xs text-base-surface-text text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
+  'rounded-xs text-base-foreground text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
 export const renderLinkTooltip: RenderCallback<{ url: string }> = (el, { url }) => {
   el.appendChild(

package/src/util/react.tsx

@@ -6,7 +6,7 @@ import React, { type FC } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { ThemeProvider, Tooltip } from '@dxos/react-ui';
-import { type RenderCallback } from '@dxos/ui-editor';
+import { type RenderCallback } from '@dxos/ui-editor/types';
 import { defaultTx } from '@dxos/ui-theme';
 
 /**

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

@@ -1 +0,0 @@
-{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorContent/EditorContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,cAAc,CAAC;AAE7E,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAC9C;IACE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,GAAG,kBAAkB,CACvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa;gBAXV,OAAO;YACX,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;0CA8DrC,CAAC"}

package/dist/types/src/components/EditorContent/controller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorContent/controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,IAAI,IAAI,UAAU,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,EAAE,gBAO5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,UAAU,GAAG,IAAI,KAAG,gBA2BhE,CAAC"}

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

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

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

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

package/dist/types/src/components/EditorToolbar/useEditorToolbar.d.ts

@@ -1,11 +0,0 @@
-import { Atom } from '@effect-atom/atom-react';
-import { type EditorViewMode, type Formatting } from '@dxos/ui-editor';
-export type EditorToolbarState = {
-    viewMode?: EditorViewMode;
-} & Formatting;
-/**
- * Creates an atom for editor toolbar state.
- * @deprecated Use Editor.Root
- */
-export declare const useEditorToolbar: (initialState?: EditorToolbarState) => Atom.Writable<EditorToolbarState>;
-//# sourceMappingURL=useEditorToolbar.d.ts.map

package/dist/types/src/components/EditorToolbar/useEditorToolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEditorToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/useEditorToolbar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGvE,MAAM,MAAM,kBAAkB,GAAG;IAAE,QAAQ,CAAC,EAAE,cAAc,CAAA;CAAE,GAAG,UAAU,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,eAAc,kBAAuB,KAAG,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAGxG,CAAC"}

package/src/components/EditorContent/EditorContent.tsx

@@ -1,82 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Transaction } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { initialSync } from '@dxos/ui-editor';
-import { mx } from '@dxos/ui-theme';
-
-import { type UseTextEditorProps, useTextEditor } from '../../hooks';
-import { type EditorController, createEditorController } from './controller';
-
-export type EditorContentProps = ThemedClassName<
-  {
-    focusable?: boolean;
-    value?: string;
-    onChange?: (value: string) => void;
-  } & UseTextEditorProps
->;
-
-/**
- * Minimal text editor.
- * NOTE: This shouold not be used with the automerge extension.
- * @deprecated Use Editor.Content
- */
-export const EditorContent = forwardRef<EditorController, EditorContentProps>(
-  ({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
-    const { parentRef, focusAttributes, view } = useTextEditor(
-      () => ({
-        id,
-        initialValue: value,
-        selectionEnd,
-        extensions: [
-          extensions ?? [],
-          EditorView.updateListener.of(({ view, docChanged, transactions }) => {
-            const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
-            if (!isInitialSync && docChanged) {
-              onChange?.(view.state.doc.toString());
-            }
-          }),
-        ],
-        ...props,
-      }),
-      [id, extensions, selectionEnd, onChange],
-    );
-
-    // External controller.
-    useImperativeHandle(forwardedRef, () => {
-      return createEditorController(view);
-    }, [id, view]);
-
-    // Set initial value and cursor position.
-    useEffect(() => {
-      requestAnimationFrame(() => {
-        view?.dispatch({
-          annotations: initialSync,
-          changes: value ? [{ from: 0, to: view?.state.doc.length ?? 0, insert: value ?? '' }] : [],
-          selection: selectionEnd ? { anchor: view?.state.doc.length ?? 0 } : undefined,
-        });
-
-        if (selectionEnd) {
-          view?.focus();
-        }
-      });
-    }, [view, value, selectionEnd]);
-
-    return (
-      <div
-        role='none'
-        className={mx(
-          'w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator',
-          classNames,
-        )}
-        ref={parentRef}
-        {...(focusable ? focusAttributes : {})}
-      />
-    );
-  },
-);

package/src/components/EditorContent/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './controller';
-export * from './EditorContent';

package/src/components/EditorToolbar/useEditorToolbar.ts

@@ -1,20 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Atom } from '@effect-atom/atom-react';
-import { useMemo } from 'react';
-
-import { type EditorViewMode, type Formatting } from '@dxos/ui-editor';
-
-// TODO(burdon): Move to extensions.
-export type EditorToolbarState = { viewMode?: EditorViewMode } & Formatting;
-
-/**
- * Creates an atom for editor toolbar state.
- * @deprecated Use Editor.Root
- */
-export const useEditorToolbar = (initialState: EditorToolbarState = {}): Atom.Writable<EditorToolbarState> => {
-  // TODO(wittjosiah): Including initialState in the deps causes reactivity issues.
-  return useMemo(() => Atom.make<EditorToolbarState>(initialState), []);
-};