@dxos/react-ui-editor 0.6.4 → 0.6.5-staging.097cf0c

package/src/components/Toolbar/Toolbar.tsx

@@ -32,7 +32,9 @@ import React, { type PropsWithChildren, useEffect, useRef, useState } from 'reac
 import { useDropzone } from 'react-dropzone';
 
 import {
+  Button,
   DensityProvider,
+  DropdownMenu,
   ElevationProvider,
   Toolbar as NaturalToolbar,
   Tooltip,
@@ -40,25 +42,21 @@ import {
   type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
   type ToolbarButtonProps as NaturalToolbarButtonProps,
   useTranslation,
-  DropdownMenu,
-  Button,
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
 import { type Action, type ActionType, type Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
+const iconStyles = getSize(5);
+const buttonStyles = 'min-bs-0 p-2';
 const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
 
-const HeadingIcons: { [key: string]: Icon } = {
-  '0': Paragraph,
-  '1': TextHOne,
-  '2': TextHTwo,
-  '3': TextHThree,
-  '4': TextHFour,
-  '5': TextHFive,
-  '6': TextHSix,
-};
+const ToolbarSeparator = () => <div role='separator' className='grow' />;
+
+//
+// Root
+//
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
@@ -83,8 +81,9 @@ const ToolbarRoot = ({ children, onAction, classNames, state }: ToolbarProps) =>
   );
 };
 
-const buttonStyles = 'min-bs-0 p-2';
-const iconStyles = getSize(5);
+//
+// Button
+//
 
 type ButtonProps = {
   type: ActionType;
@@ -135,7 +134,19 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   );
 };
 
-const ToolbarSeparator = () => <div role='separator' className='grow' />;
+//
+// Heading
+//
+
+const HeadingIcons: { [key: string]: Icon } = {
+  '0': Paragraph,
+  '1': TextHOne,
+  '2': TextHTwo,
+  '3': TextHThree,
+  '4': TextHFour,
+  '5': TextHFive,
+  '6': TextHSix,
+};
 
 const MarkdownHeading = () => {
   const { t } = useTranslation(translationKey);
@@ -215,6 +226,10 @@ const MarkdownHeading = () => {
   );
 };
 
+//
+// Markdown
+//
+
 const markdownStyles: ButtonProps[] = [
   { type: 'strong', Icon: TextB, getState: (state) => state.strong },
   { type: 'emphasis', Icon: TextItalic, getState: (state) => state.emphasis },
@@ -321,6 +336,10 @@ const MarkdownStandard = () => (
   </>
 );
 
+//
+// Custom
+//
+
 // TODO(burdon): Make extensible.
 export type MarkdownCustomOptions = {
   onUpload?: (file: File) => Promise<{ url?: string } | undefined>;
@@ -366,9 +385,13 @@ const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
   );
 };
 
+//
+// Actions
+//
+
 // TODO(burdon): Make extensible.
 const MarkdownActions = () => {
-  const { onAction, state } = useToolbarContext('MarkdownStyles');
+  const { onAction, state } = useToolbarContext('MarkdownActions');
   const { t } = useTranslation(translationKey);
   return (
     <>
@@ -389,6 +412,10 @@ const MarkdownActions = () => {
   );
 };
 
+//
+// Toolbar
+//
+
 export const Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarToggleButton,

package/src/extensions/automerge/automerge.stories.tsx

@@ -5,7 +5,7 @@
 import '@dxosTheme';
 
 import '@preact/signals-react';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { TextType } from '@braneframe/types';
 import { Repo } from '@dxos/automerge/automerge-repo';
@@ -40,7 +40,7 @@ const Editor = ({ source, autoFocus }: EditorProps) => {
       doc: DocAccessor.getValue(source),
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...' }),
-        createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2 bg-white dark:bg-black' } } }),
+        createThemeExtensions({ themeMode, slots: { editor: { className: 'w-full p-2 bg-white dark:bg-black' } } }),
         automerge(source),
       ],
       autoFocus,
@@ -48,7 +48,7 @@ const Editor = ({ source, autoFocus }: EditorProps) => {
     [source, themeMode],
   );
 
-  return <div ref={parentRef} />;
+  return <div ref={parentRef} className='flex w-full' />;
 };
 
 const Story = () => {
@@ -94,14 +94,18 @@ export default {
 };
 
 const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
-  // TODO(burdon): Test identity.
-  // const identity = useIdentity();
   const space = useSpace(spaceKey);
-  const source = useMemo<DocAccessor | undefined>(() => {
-    const { objects = [] } = space?.db.query<Expando>(Filter.from({ type: 'test' })) ?? {};
-    if (objects.length) {
-      return createDocAccessor(objects[0].content, ['content']);
-    }
+  const [source, setSource] = useState<DocAccessor>();
+  useEffect(() => {
+    setTimeout(async () => {
+      if (space) {
+        const { objects = [] } = await space.db.query<Expando>(Filter.from({ type: 'test' })).run();
+        if (objects.length) {
+          const source = createDocAccessor(objects[0].content, ['content']);
+          setSource(source);
+        }
+      }
+    });
   }, [space]);
 
   if (!source) {
@@ -113,8 +117,6 @@ const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
 
 export const Default = {};
 
-// TODO(burdon): Error:
-//  chunk-6NX3RPDS.mjs:2021 ControlPipeline#5 Error: invariant violation: Feed already added
 export const WithEcho = {
   decorators: [withTheme],
   render: () => {

package/src/extensions/factories.ts

@@ -37,6 +37,8 @@ import { defaultTheme } from '../themes';
 // Basic
 //
 
+export const preventNewline = EditorState.transactionFilter.of((tr) => (tr.newDoc.lines > 1 ? [] : tr));
+
 /**
  * https://codemirror.net/docs/extensions
  * https://github.com/codemirror/basic-setup
@@ -159,15 +161,15 @@ export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: Theme
 // Data
 //
 
-export type DataExtensionsProps = {
+export type DataExtensionsProps<T> = {
   id: string;
-  text?: DocAccessor;
+  text?: DocAccessor<T>;
   space?: Space;
   identity?: Identity | null;
 };
 
 // TODO(burdon): Move out of react-ui-editor (remove echo deps).
-export const createDataExtensions = ({ id, text, space, identity }: DataExtensionsProps): Extension[] => {
+export const createDataExtensions = <T>({ id, text, space, identity }: DataExtensionsProps<T>): Extension[] => {
   const extensions: Extension[] = text ? [automerge(text)] : [];
 
   if (space && identity) {

package/src/extensions/markdown/linkPaste.test.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+import { formatUrlForDisplay } from './linkPaste';
+
+const testCases = [
+  { input: 'https://www.example.com', expected: 'example.com' },
+  { input: 'http://example.com', expected: 'example.com' },
+  { input: 'https://example.com/', expected: 'example.com' },
+  { input: 'https://www.example.com/', expected: 'example.com' },
+  { input: 'https://example.com/test', expected: 'example.com/test' },
+  { input: 'https://www.example.com/test', expected: 'example.com/test' },
+  { input: 'http://example.com/test', expected: 'example.com/test' },
+  {
+    input: 'https://example.com/some/path?name=value&another_name=another_value',
+    expected: 'example.com/some/path?name=value&anot...',
+  },
+  {
+    input: 'https://www.example.com/some/path?name=value&another_name=another_value',
+    expected: 'example.com/some/path?name=value&anot...',
+  },
+  {
+    input: 'http://example.com/some/path?name=value&another_name=another_value',
+    expected: 'example.com/some/path?name=value&anot...',
+  },
+  {
+    input: 'https://www.example.com?name=value&another_name=another_value',
+    expected: 'example.com?name=value&anot...',
+  },
+  { input: 'http://example.com?name=value&another_name=another_value', expected: 'example.com?name=value&anot...' },
+  { input: 'https://example.com?name=value', expected: 'example.com?name=value' },
+  { input: 'http://example.com?name=value', expected: 'example.com?name=value' },
+  { input: 'https://www.example.com?name=value', expected: 'example.com?name=value' },
+  { input: 'ftp://example.com', expected: 'ftp://example.com' },
+];
+
+describe('formatUrlForDisplay', () =>
+  testCases.forEach(({ input, expected }) =>
+    test(`formats ${input} into ${expected}`, () => expect(formatUrlForDisplay(input)).equals(expected)),
+  ));

package/src/extensions/markdown/linkPaste.ts

@@ -15,9 +15,18 @@ const createUrlLink = (url: string): string => {
   return `[${displayUrl}](${url})`;
 };
 
-const formatUrlForDisplay = (url: string): string => {
-  const withoutProtocol = url.replace(/^https?:\/\//, '');
-  return truncateQueryParams(withoutProtocol);
+export const formatUrlForDisplay = (url: string): string => {
+  // Remove protocol (http:// or https://)
+  let formattedUrl = url.replace(/^https?:\/\//, '');
+
+  // NOTE(Zan): Consult: https://github.com/dxos/dxos/issues/7331 before changing this.
+  // Remove 'www.' if at the beginning of the URL
+  formattedUrl = formattedUrl.replace(/^www\./, '');
+
+  // Remove trailing slash if the URL ends with `.com/`
+  formattedUrl = formattedUrl.replace(/\.com\/$/, '.com');
+
+  return truncateQueryParams(formattedUrl);
 };
 
 const truncateQueryParams = (url: string, maxQueryLength: number = 15): string => {