@dxos/react-ui-editor 0.3.11-main.cb8120f → 0.3.11-main.ccc0ca3

package/src/components/Toolbar/Toolbar.tsx

@@ -5,7 +5,6 @@
 import {
   type Icon,
   At,
-  Brain,
   CaretRight,
   ChatText,
   Code,
@@ -19,15 +18,17 @@ import {
   TextB,
   TextItalic,
 } from '@phosphor-icons/react';
-import React, { type FC } from 'react';
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren } from 'react';
 
 import { Button, type ButtonProps, DensityProvider, Select } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-export type Action =
+// TODO(burdon): Revert to string to make extensible?
+export type ActionType =
   | 'blockquote'
   | 'bold'
-  | 'code'
+  | 'codeblock'
   | 'comment'
   | 'heading'
   | 'image'
@@ -41,75 +42,125 @@ export type Action =
   | 'strikethrough'
   | 'table';
 
-export type ToolbarProps = {
-  onAction?: (action: { type: Action; data?: any }) => void;
+export type Action = {
+  type: ActionType;
+  data?: any;
 };
 
-const IconButton: FC<{ Icon: Icon; title: string } & NonNullable<Pick<ButtonProps, 'onClick'>>> = ({
-  Icon,
-  title,
-  onClick,
-}) => (
-  <Button variant='ghost' classNames='p-2' onClick={onClick} title={title}>
-    <Icon className={getSize(5)} />
-  </Button>
-);
+export type ToolbarProps = PropsWithChildren<{
+  onAction?: (action: Action) => void;
+}>;
+
+const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
 
-// TODO(burdon): Update state based on current selection?
-export const Toolbar = ({ onAction }: ToolbarProps) => {
+const ToolbarRoot = ({ children, onAction }: ToolbarProps) => {
   return (
-    <DensityProvider density='fine'>
-      <div role='toolbar' className='flex w-full p-2 items-center gap-4'>
-        <div>
-          <Select.Root
-            defaultValue='0'
-            onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
-          >
-            <Select.TriggerButton classNames='w-[8rem]' />
-            <Select.Portal>
-              <Select.Content>
-                <Select.Viewport>
-                  <Select.Option value='0'>Paragraph</Select.Option>
-                  {[1, 2, 3, 4, 5, 6].map((level) => (
-                    <Select.Option key={level} value={String(level)}>
-                      Heading {level}
-                    </Select.Option>
-                  ))}
-                </Select.Viewport>
-              </Select.Content>
-            </Select.Portal>
-          </Select.Root>
-        </div>
-        <div>
-          <IconButton Icon={TextB} title='Bold' onClick={() => onAction?.({ type: 'bold' })} />
-          <IconButton Icon={TextItalic} title='Italic' onClick={() => onAction?.({ type: 'italic' })} />
-          <IconButton
-            Icon={TextStrikethrough}
-            title='Strike-through'
-            onClick={() => onAction?.({ type: 'strikethrough' })}
-          />
-        </div>
-        <div>
-          <IconButton Icon={ListBullets} title='Bullet list' onClick={() => onAction?.({ type: 'list' })} />
-          <IconButton Icon={ListNumbers} title='Numbered list' onClick={() => onAction?.({ type: 'list-ordered' })} />
-          <IconButton Icon={ListChecks} title='Task list' onClick={() => onAction?.({ type: 'list-tasks' })} />
-        </div>
-        <div>
-          <IconButton Icon={CaretRight} title='Block quite' onClick={() => onAction?.({ type: 'blockquote' })} />
-          <IconButton Icon={Code} title='Code block' onClick={() => onAction?.({ type: 'code' })} />
-          <IconButton Icon={Table} title='Table' onClick={() => onAction?.({ type: 'table' })} />
+    <ToolbarContextProvider onAction={onAction}>
+      <DensityProvider density='fine'>
+        <div role='toolbar' className='flex w-full shrink-0 p-2 gap-4 items-center whitespace-nowrap overflow-hidden'>
+          {children}
         </div>
-        <div>
-          <IconButton Icon={Link} title='Link' onClick={() => onAction?.({ type: 'link' })} />
-          <IconButton Icon={At} title='Mention' onClick={() => onAction?.({ type: 'mention' })} />
-          <IconButton Icon={Image} title='Image' onClick={() => onAction?.({ type: 'image' })} />
-        </div>
-        <div className='grow' />
-        <div>
-          <IconButton Icon={Brain} title='AI prompt' onClick={() => onAction?.({ type: 'prompt' })} />
-          <IconButton Icon={ChatText} title='Create comment' onClick={() => onAction?.({ type: 'comment' })} />
-        </div>
-      </div>
-    </DensityProvider>
+      </DensityProvider>
+    </ToolbarContextProvider>
   );
 };
+
+type ToolbarButtonProps = {
+  Icon: Icon;
+  onClick: () => Action | undefined;
+} & NonNullable<Pick<ButtonProps, 'title'>>;
+
+const ToolbarButton = ({ Icon, onClick, title }: ToolbarButtonProps) => {
+  const { onAction } = useToolbarContext('ToolbarButton');
+  const handleClick = () => {
+    const action = onClick();
+    if (action) {
+      onAction?.(action);
+    }
+  };
+
+  return (
+    <Button variant='ghost' classNames='p-2' onClick={handleClick} title={title}>
+      <Icon className={getSize(5)} />
+    </Button>
+  );
+};
+
+const ToolbarSeparator = () => <div className='grow' />;
+
+const MarkdownHeading = () => {
+  const { onAction } = useToolbarContext('MarkdownFormatting');
+  return (
+    <Select.Root defaultValue='0' onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}>
+      <Select.TriggerButton classNames='w-[8rem]' />
+      <Select.Portal>
+        <Select.Content>
+          <Select.Viewport>
+            <Select.Option value='0'>Paragraph</Select.Option>
+            {[1, 2, 3, 4, 5, 6].map((level) => (
+              <Select.Option key={level} value={String(level)}>
+                Heading {level}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
+
+const MarkdownStyles = () => (
+  <div role='none'>
+    <ToolbarButton Icon={TextB} title='Bold' onClick={() => ({ type: 'bold' })} />
+    <ToolbarButton Icon={TextItalic} title='Italic' onClick={() => ({ type: 'italic' })} />
+    <ToolbarButton Icon={TextStrikethrough} title='Strike-through' onClick={() => ({ type: 'strikethrough' })} />
+  </div>
+);
+
+const MarkdownLists = () => (
+  <div role='none'>
+    <ToolbarButton Icon={ListBullets} title='Bullet list' onClick={() => ({ type: 'list' })} />
+    <ToolbarButton Icon={ListNumbers} title='Numbered list' onClick={() => ({ type: 'list-ordered' })} />
+    <ToolbarButton Icon={ListChecks} title='Task list' onClick={() => ({ type: 'list-tasks' })} />
+  </div>
+);
+
+const MarkdownBlocks = () => (
+  <div role='none'>
+    <ToolbarButton Icon={CaretRight} title='Block quite' onClick={() => ({ type: 'blockquote' })} />
+    <ToolbarButton Icon={Code} title='Code block' onClick={() => ({ type: 'codeblock' })} />
+    <ToolbarButton Icon={Table} title='Table' onClick={() => ({ type: 'table' })} />
+  </div>
+);
+
+const MarkdownLinks = () => (
+  <div role='none'>
+    <ToolbarButton Icon={Link} title='Link' onClick={() => ({ type: 'link' })} />
+    <ToolbarButton Icon={At} title='Mention' onClick={() => ({ type: 'mention' })} />
+    <ToolbarButton Icon={Image} title='Image' onClick={() => ({ type: 'image' })} />
+  </div>
+);
+
+const MarkdownStandard = () => (
+  <>
+    <MarkdownHeading />
+    <MarkdownStyles />
+    <MarkdownLists />
+    <MarkdownBlocks />
+    <MarkdownLinks />
+  </>
+);
+
+const MarkdownExtended = () => (
+  <Toolbar.Button Icon={ChatText} title='Create comment' onClick={() => ({ type: 'comment' })} />
+);
+
+export const Toolbar = {
+  Root: ToolbarRoot,
+  Button: ToolbarButton,
+  Separator: ToolbarSeparator,
+  Markdown: MarkdownStandard,
+  Extended: MarkdownExtended,
+};
+
+export { useToolbarContext };

package/src/components/Toolbar/index.ts

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

package/src/components/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './TextEditor';
+export * from './Toolbar';

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

@@ -4,7 +4,7 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { type EditorState, type StateField, type Transaction } from '@codemirror/state';
+import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
 
 import { next as A, type Heads } from '@dxos/automerge/automerge';
 
@@ -14,7 +14,7 @@ export const updateAutomerge = (
   field: StateField<State>,
   handle: IDocHandle,
   transactions: Transaction[],
-  state: EditorState, // TODO(burdon): Just pass in the state field value.
+  state: EditorState, // TODO(burdon): Just pass in the state field value?
 ): Heads | undefined => {
   const { lastHeads, path } = state.field(field);
 
@@ -32,16 +32,16 @@ export const updateAutomerge = (
   }
 
   const newHeads = handle.changeAt(lastHeads, (doc: A.Doc<unknown>) => {
-    const t: any[] = [];
+    const invertedTransactions: { from: number; del: number; insert: Text }[] = [];
     for (const tr of transactions) {
       tr.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
-        t.push({ fromA, toA, insert });
+        invertedTransactions.push({ from: fromA, del: toA - fromA, insert });
       });
     }
 
-    // Apply in reverse order to properly apply range.
-    t.reverse().forEach(({ fromA, toA, insert }) => {
-      A.splice(doc, path.slice(), fromA, toA - fromA, insert.toString());
+    // TODO(burdon): Hack to apply in reverse order to properly apply range.
+    invertedTransactions.reverse().forEach(({ from, del, insert }) => {
+      A.splice(doc, path.slice(), from, del, insert.toString());
     });
   });
 

package/src/extensions/basic.ts

@@ -10,6 +10,7 @@ import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import { drawSelection, EditorView, highlightActiveLine, placeholder } from '@codemirror/view';
 
 import { type ThemeMode } from '@dxos/react-ui';
+import { isNotFalsy } from '@dxos/util';
 
 import { type TextEditorProps } from '../components';
 
@@ -17,21 +18,22 @@ export type BasicBundleOptions = {
   themeMode?: ThemeMode;
 } & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
 
-export const basicBundle = ({
+export const createBasicBundle = ({
   themeMode,
   placeholder: _placeholder,
   lineWrapping = true,
-}: BasicBundleOptions): Extension[] => [
-  lineWrapping ? EditorView.lineWrapping : [],
+}: BasicBundleOptions = {}): Extension[] =>
+  [
+    lineWrapping && EditorView.lineWrapping,
 
-  // https://codemirror.net/docs/ref/#codemirror.minimalSetup
-  bracketMatching(),
-  closeBrackets(),
-  drawSelection(),
-  highlightActiveLine(),
-  history(),
-  _placeholder ? placeholder(_placeholder) : [],
+    // https://codemirror.net/docs/ref/#codemirror.minimalSetup
+    bracketMatching(),
+    closeBrackets(),
+    drawSelection(),
+    highlightActiveLine(),
+    history(),
+    _placeholder && placeholder(_placeholder),
 
-  // https://github.com/codemirror/theme-one-dark
-  themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
-];
+    // https://github.com/codemirror/theme-one-dark
+    themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
+  ].filter(isNotFalsy);

package/src/extensions/comments.ts

@@ -45,7 +45,7 @@ export type CommentsState = {
   selection: SelectionState;
 };
 
-export const setFocus = (view: EditorView, id: string, center = true) => {
+export const focusComment = (view: EditorView, id: string, center = true) => {
   const comment = view.state.field(commentsState).comments.find((range) => range.comment.id === id);
   if (!comment?.comment.cursor) {
     return;
@@ -311,7 +311,7 @@ export const createComment: Command = (view) => {
       // Update range.
       view.dispatch({
         effects: setSelection.of({ current: id }),
-        selection: { anchor: from },
+        selection: { anchor: to },
       });
 
       return true;

package/src/extensions/markdown/bundle.ts

@@ -21,13 +21,14 @@ import {
 } from '@codemirror/view';
 
 import type { ThemeMode } from '@dxos/react-ui';
+import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
-} & Pick<TextEditorProps, 'placeholder'>;
+} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
 
 /**
  * Markdown bundle.
@@ -36,11 +37,15 @@ export type MarkdownBundleOptions = {
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
 // TODO(burdon): Add Composer here: https://codemirror.net/docs/community
-export const markdownBundle = ({ themeMode, placeholder: _placeholder }: MarkdownBundleOptions): Extension[] => {
+export const createMarkdownExtensions = ({
+  themeMode,
+  placeholder: _placeholder,
+  lineWrapping = true,
+}: MarkdownBundleOptions = {}): Extension[] => {
   return [
+    lineWrapping && EditorView.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
-    EditorView.lineWrapping,
 
     // https://github.com/codemirror/basic-setup
     bracketMatching(),
@@ -51,7 +56,7 @@ export const markdownBundle = ({ themeMode, placeholder: _placeholder }: Markdow
     highlightActiveLine(),
     history(),
     indentOnInput(),
-    _placeholder ? placeholder(_placeholder) : [],
+    _placeholder && placeholder(_placeholder),
 
     // Main extension.
     // https://github.com/codemirror/lang-markdown
@@ -92,5 +97,5 @@ export const markdownBundle = ({ themeMode, placeholder: _placeholder }: Markdow
       // https://codemirror.net/docs/ref/#commands.standardKeymap
       ...standardKeymap,
     ]),
-  ];
+  ].filter(isNotFalsy);
 };

package/src/extensions/markdown/formatting.ts

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { snippet } from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
 import { type Extension, RangeSetBuilder } from '@codemirror/state';
 import {
@@ -27,10 +28,10 @@ export const setHeading =
     const changes = [];
     for (const range of ranges) {
       const { number } = doc.lineAt(range.anchor);
-      const { from } = doc.line(number);
+      const { from, to } = doc.line(number);
 
       // Check heading doesn't already exist.
-      const line = doc.sliceString(from, from + 7);
+      const line = doc.sliceString(from, to);
       const [_, marks, spaces] = line.match(/(#+)(\s+)/) ?? [];
       const current = marks?.length ?? 0;
       if (level !== current) {
@@ -76,6 +77,34 @@ export const toggleStyle =
     return true;
   };
 
+// TODO(burdon): Define and trigger snippets for codeblock, table, etc.
+const snippets = {
+  codeblock: snippet(['```#{lang}', '\t#{}', '```'].join('\n')),
+  table: snippet(
+    ['| #{col1} | #{col2} |', '| ---- | ---- |', '| #{val1} | #{val2} |', '| #{val3} | #{val4} |'].join('\n'),
+  ),
+};
+
+export const insertCodeblock = (view: EditorView) => {
+  const {
+    selection: { main },
+    doc,
+  } = view.state;
+  const { number } = doc.lineAt(main.anchor);
+  const { from } = doc.line(number);
+  snippets.codeblock(view, null, from, from);
+};
+
+export const insertTable = (view: EditorView) => {
+  const {
+    selection: { main },
+    doc,
+  } = view.state;
+  const { number } = doc.lineAt(main.anchor);
+  const { from } = doc.line(number);
+  snippets.table(view, null, from, from);
+};
+
 export const toggleBold = toggleStyle('**');
 export const toggleItalic = toggleStyle('_');
 export const toggleStrikethrough = toggleStyle('~~');

package/src/hooks/index.ts

@@ -6,5 +6,6 @@ export * from './awareness-provider';
 export * from './defs';
 
 export * from './useActionHandler';
+export * from './useEditorView';
 export * from './useTextEditor';
 export * from './useTextModel';

package/src/hooks/useActionHandler.ts

@@ -4,10 +4,19 @@
 
 import type { EditorView } from '@codemirror/view';
 
-import type { ToolbarProps } from '../components/Toolbar/Toolbar';
-import { createComment, setHeading, toggleBold, toggleItalic, toggleList, toggleStrikethrough } from '../extensions';
-
-export const useActionHandler = (view: EditorView | null): ToolbarProps['onAction'] => {
+import type { ToolbarProps } from '../components';
+import {
+  createComment,
+  insertCodeblock,
+  insertTable,
+  setHeading,
+  toggleBold,
+  toggleItalic,
+  toggleList,
+  toggleStrikethrough,
+} from '../extensions';
+
+export const useActionHandler = (view?: EditorView | null): ToolbarProps['onAction'] => {
   return (action) => {
     if (!view) {
       return;
@@ -32,14 +41,22 @@ export const useActionHandler = (view: EditorView | null): ToolbarProps['onActio
         toggleList(view);
         break;
 
+      case 'codeblock':
+        insertCodeblock(view);
+        break;
+      case 'table':
+        insertTable(view);
+        break;
+
       case 'comment':
         createComment(view);
         break;
     }
 
-    // TODO(burdon): Hack since otherwise focus doesn't leave heading selector.
+    // TODO(burdon): Hack otherwise remains on heading selector.
     setTimeout(() => {
       view.focus();
+      view.dispatch({ selection: view.state.selection });
     });
   };
 };

package/src/hooks/useEditorView.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { type RefCallback, useState } from 'react';
+
+/**
+ * Hook for accessing the editor view.
+ *
+ * ```tsx
+ * const Test = () => {
+ *   const [editorRef, editorView] = useEditorView();
+ *   useEffect(() => {
+ *     editorView?.focus();
+ *   }, [editorView]);
+ *   return <TextEditor ref={editorRef} />;
+ * };
+ * ```
+ */
+export const useEditorView = (): [RefCallback<EditorView | null>, EditorView | null] => {
+  const [view, setView] = useState<EditorView | null>(null);
+  return [
+    (ref: EditorView | null) => {
+      setView(ref);
+    },
+    view,
+  ];
+};