@dxos/react-ui-editor 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/src/stories/CommandDialog.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type KeyboardEvent, useState } from 'react';
 
-import { Button, Icon, Input } from '@dxos/react-ui';
+import { type Button, IconButton, Input } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -54,9 +54,14 @@ const CommandDialog = ({ onAction }: { onAction: (action?: any) => void }) => {
             onKeyDown={handleKeyDown}
           />
         </Input.Root>
-        <Button variant='ghost' classNames='pli-0' onClick={() => onAction({ type: 'cancel' })}>
-          <Icon icon='ph--x--regular' size={5} />
-        </Button>
+        <IconButton
+          icon='ph--x--regular'
+          label='Cancel'
+          iconOnly
+          variant='ghost'
+          classNames='pli-0'
+          onClick={() => onAction({ type: 'cancel' })}
+        />
       </div>
     </div>
   );

package/src/stories/Comments.stories.tsx

@@ -80,7 +80,7 @@ const Key: FC<{ char: string }> = ({ char }) => (
 
 const CommentTooltip: FC<{ shortcut: string }> = ({ shortcut }) => {
   return (
-    <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
+    <div className='flex items-center gap-2 pli-2 plb-2 bg-neutral-700 text-white text-xs rounded'>
       <div>Create comment</div>
       <div className='flex gap-1'>
         {keySymbols(parseShortcut(shortcut)).map((char) => (

package/src/stories/EditorToolbar.stories.tsx

@@ -19,7 +19,7 @@ import {
   createThemeExtensions,
   decorateMarkdown,
   formattingKeymap,
-  useFormattingState,
+  formattingListener,
 } from '../extensions';
 import { type UseTextEditorProps, useTextEditor } from '../hooks';
 import { translations } from '../translations';
@@ -31,7 +31,6 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   const { themeMode } = useThemeContext();
   const toolbarState = useEditorToolbarState({ viewMode: 'source' });
   const viewMode = toolbarState.viewMode;
-  const trackFormatting = useFormattingState(toolbarState);
   // TODO(wittjosiah): Provide way to change the input mode.
   const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
   const { parentRef, view } = useTextEditor(
@@ -46,7 +45,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         viewMode === 'source' ? [] : decorateMarkdown(),
         formattingKeymap(),
-        trackFormatting,
+        formattingListener(() => toolbarState),
       ],
     }),
     [editorInputMode, viewMode, themeMode, placeholder],
@@ -65,7 +64,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
   //  Also not sure if view is even guaranteed to exist at this point.
   return (
     <div role='none' className={mx('fixed inset-0 flex flex-col')}>
-      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} viewMode={handleViewModeChange} />}
+      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} onViewModeChange={handleViewModeChange} />}
       <div role='none' className={mx('grow overflow-hidden', attentionSurface)}>
         <div className={mx(editorWidth)} ref={parentRef} />
       </div>
@@ -91,6 +90,6 @@ export const Default: Story = {
   args: {
     autoFocus: true,
     placeholder: 'Text...',
-    initialValue: '# Demo\n\nThis is a document.\n\n',
+    initialValue: '# Demo\n\nThis is a **document**.\n\n',
   },
 };

package/src/stories/Popover.stories.tsx

@@ -42,9 +42,7 @@ const placeholder = (trigger: string[]) =>
     .children(
       Domino.of('span').text('Press'),
       ...trigger.map((trigger) =>
-        Domino.of('span')
-          .text(trigger)
-          .classNames('border border-separator rounded-sm mx-1 pis-1 pie-1 pbs-[2px] pbe-[3px]'),
+        Domino.of('span').text(trigger).classNames('border border-separator rounded-sm mx-1 pli-1 pbs-[2px] pbe-[3px]'),
       ),
       Domino.of('span').text('for commands'),
     )
@@ -78,7 +76,7 @@ const LinkStory = (args: StoryProps) => {
       }
 
       const name = text?.startsWith('@') ? text.slice(1).toLowerCase() : (text?.toLowerCase() ?? '');
-      const result = await space?.db.query(Query.type(Testing.Contact)).run();
+      const result = await space?.db.query(Query.type(Testing.Person)).run();
       const items = result.objects
         .filter((object) => object.name.toLowerCase().includes(name))
         .map(
@@ -144,11 +142,11 @@ export const Link: Story = {
     withClientProvider({
       createSpace: true,
       onInitialized: async (client) => {
-        client.addTypes([Testing.Contact]);
+        client.addTypes([Testing.Person]);
       },
       onCreateSpace: async ({ space }) => {
         const createObjects = createObjectFactory(space.db, generator);
-        await createObjects([{ type: Testing.Contact, count: 10 }]);
+        await createObjects([{ type: Testing.Person, count: 10 }]);
         await space.db.flush({ indexes: true });
       },
     }),

package/src/stories/Preview.stories.tsx

@@ -16,7 +16,14 @@ import { Card } from '@dxos/react-ui-stack';
 import { hoverableControlItem, hoverableControlItemTransition, hoverableControls } from '@dxos/react-ui-theme';
 import { trim } from '@dxos/util';
 
-import { type PreviewLinkRef, type PreviewLinkTarget, getLinkRef, image, preview } from '../extensions';
+import {
+  type PreviewBlock,
+  type PreviewLinkRef,
+  type PreviewLinkTarget,
+  getLinkRef,
+  image,
+  preview,
+} from '../extensions';
 import { PreviewPopoverProvider, usePreviewPopover } from '../testing';
 
 import { EditorStory } from './components';
@@ -70,7 +77,7 @@ type PreviewAction =
       link: PreviewLinkRef;
     };
 
-const PreviewBlock = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElement; view?: EditorView }) => {
+const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: HTMLElement; view?: EditorView }) => {
   const target = useRefTarget(link);
 
   const handleAction = useCallback(
@@ -180,16 +187,16 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => {
     const [view, setView] = useState<EditorView>();
-    const [previewBlocks, setPreviewBlocks] = useState<{ link: PreviewLinkRef; el: HTMLElement }[]>([]);
+    const [previewBlocks, setPreviewBlocks] = useState<PreviewBlock[]>([]);
     const extensions = useMemo(() => {
       return [
         image(),
         preview({
-          addBlockContainer: (link, el) => {
-            setPreviewBlocks((prev) => [...prev, { link, el }]);
+          addBlockContainer: (block) => {
+            setPreviewBlocks((prev) => [...prev, block]);
           },
-          removeBlockContainer: (link) => {
-            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== link.ref));
+          removeBlockContainer: (block) => {
+            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== block.link.ref));
           },
         }),
       ];
@@ -221,7 +228,7 @@ export const Default: Story = {
         />
         <PreviewCard />
         {previewBlocks.map(({ link, el }) => (
-          <PreviewBlock key={link.ref} link={link} el={el} view={view} />
+          <PreviewBlockComponent key={link.ref} link={link} el={el} view={view} />
         ))}
       </PreviewPopoverProvider>
     );

package/src/stories/Tags.stories.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useThemeContext } from '@dxos/react-ui';
@@ -22,10 +22,22 @@ import {
 import { useTextEditor } from '../hooks';
 
 const registry = {
-  // <test/>
+  /**
+   * Custom tag: <test/>
+   */
   ['test' as const]: {
     block: true,
-    Component: () => <div className='p-2 border border-separator rounded'>Test</div>,
+    Component: () => {
+      const [count, setCount] = useState(0);
+      useEffect(() => {
+        const interval = setInterval(() => {
+          setCount((prev) => prev + 1);
+        }, 1_000);
+        return () => clearInterval(interval);
+      }, []);
+
+      return <div className='p-2 border border-separator rounded'>Test {count}</div>;
+    },
   },
 } satisfies XmlWidgetRegistry;
 
@@ -36,7 +48,7 @@ const DefaultStory = ({ text }: { text?: string }) => {
     initialValue: text,
     extensions: [
       createThemeExtensions({ themeMode }),
-      createBasicExtensions({ lineWrapping: true, readOnly: true }),
+      createBasicExtensions({ lineWrapping: true }),
       decorateMarkdown(),
       extendedMarkdown({ registry }),
       xmlTags({ registry, setWidgets }),
@@ -56,13 +68,15 @@ const DefaultStory = ({ text }: { text?: string }) => {
 const text = trim`
   # Tags
 
+  React widget below.
+
   <test id="123" />
 
   React widget above.
 `;
 
 const meta = {
-  title: 'ui/react-ui-editor/Tags',
+  title: 'ui/react-ui-editor/XmlTags',
   render: DefaultStory,
   decorators: [withTheme],
   parameters: {

package/src/stories/TextEditor.stories.tsx

@@ -113,10 +113,10 @@ export const Listener: Story = {
       text={str('# Listener', '', content.footer)}
       extensions={[
         listener({
-          onFocus: (focusing) => {
+          onFocus: ({ focusing }) => {
             log.info('listener', { focusing });
           },
-          onChange: (text) => {
+          onChange: ({ text }) => {
             log.info('listener', { text });
           },
         }),

package/src/stories/components/EditorStory.tsx

@@ -5,11 +5,11 @@
 import { type EditorView } from '@codemirror/view';
 import React, { type ReactNode, forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 
+import { createDocAccessor, createObject } from '@dxos/client/echo';
 import { Expando } from '@dxos/echo/internal';
 import { live } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
-import { createDocAccessor, createObject } from '@dxos/react-client/echo';
 import { useForwardedRef, useThemeContext } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
@@ -59,12 +59,12 @@ export const EditorStory = forwardRef<EditorView | null, StoryProps>(
 
     const view = viewRef.current;
     return (
-      <div className={mx('w-full h-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
+      <div className={mx('is-full bs-full grid overflow-hidden', debug && 'grid-cols-2 lg:grid-cols-[1fr_600px]')}>
         <EditorComponent ref={viewRef} object={object} text={text} extensions={extensions} {...props} />
 
         {debug && (
           <div
-            className='grid h-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
+            className='grid bs-full auto-rows-fr border-l border-separator divide-y divide-separator overflow-hidden'
             {...attentionAttrs}
           >
             {view && debugCustom?.(view)}

package/src/stories/components/util.tsx

@@ -27,6 +27,7 @@ export const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString(
 export const img = '![dxos](https://dxos.network/dxos-logotype-blue.png)';
 
 export const code = str(
+  // prettier-ignore
   '// Code',
   'const Component = () => {',
   '  const x = 100;',
@@ -38,7 +39,7 @@ export const code = str(
 // Content blocks for stories
 export const content = {
   tasks: str(
-    //
+    // prettier-ignore
     '### TaskList',
     '',
     `- [x] ${faker.lorem.sentences()}`,
@@ -50,7 +51,7 @@ export const content = {
   ),
 
   bullets: str(
-    //
+    // prettier-ignore
     '### BulletList',
     '',
     `- ${faker.lorem.sentences()}`,
@@ -62,7 +63,7 @@ export const content = {
   ),
 
   numbered: str(
-    //
+    // prettier-ignore
     '### OrderedList (part 1)',
     '',
     `1. ${faker.lorem.sentences()}`,
@@ -81,11 +82,34 @@ export const content = {
 
   typescript: code,
 
-  codeblocks: str('### Code', '', '```bash', '$ ls -las', '```', '', '```tsx', code, '```', ''),
+  codeblocks: str(
+    // prettier-ignore
+    '### Code',
+    '',
+    '```bash',
+    '$ ls -las',
+    '```',
+    '',
+    '```tsx',
+    code,
+    '```',
+    '',
+  ),
 
-  comment: str('<!--', 'A comment', '-->', '', 'No comment.', 'Partial comment. <!-- comment. -->'),
+  comment: str(
+    // prettier-ignore
+    '### Comment',
+    '',
+    '<!--',
+    'A comment',
+    '-->',
+    '',
+    'Partial comment. <!-- comment. -->',
+    '',
+  ),
 
   links: str(
+    // prettier-ignore
     '### Links',
     '',
     'This is a naked link https://dxos.org within a sentence.',
@@ -97,6 +121,7 @@ export const content = {
   ),
 
   table: str(
+    // prettier-ignore
     '### Tables',
     '',
     `| ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} |`,
@@ -113,9 +138,16 @@ export const content = {
     ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
   ),
 
-  formatting: str('### Formatting', '', 'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.', ''),
+  formatting: str(
+    // prettier-ignore
+    '### Formatting',
+    '',
+    'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
+    '',
+  ),
 
   blockquotes: str(
+    // prettier-ignore
     '### Blockquotes',
     '',
     '> This is a block quote.',
@@ -154,6 +186,7 @@ export const text = str(
   '---',
   '## Misc',
   content.codeblocks,
+  content.comment,
   content.table,
   content.image,
   content.footer,

package/src/styles/markdown.ts

@@ -21,6 +21,6 @@ export const theme = {
   codeMark: 'font-mono text-primary-500',
   mark: 'opacity-50',
   heading: (level: HeadingLevel) => {
-    return mx(headings[level], 'dark:text-primary-400');
+    return mx(headings[level], 'dark:text-neutral-400');
   },
 };

package/src/styles/theme.ts

@@ -74,12 +74,12 @@ export const defaultTheme: ThemeStyles = {
    */
   '.cm-gutters': {
     borderRight: 'none',
-    // background: 'transparent',
   },
   '.cm-gutter': {},
   '.cm-gutter.cm-lineNumbers': {
     paddingRight: '4px',
     borderRight: '1px solid var(--dx-subduedSeparator)',
+    color: 'var(--dx-subduedText)',
   },
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
     minWidth: '40px',