@dxos/react-ui-editor 0.6.7 → 0.6.8-main.3be982f

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

@@ -1,57 +0,0 @@
-/// <reference types="react" />
-import '@dxosTheme';
-declare const _default: {
-    title: string;
-    component: {
-        Root: ({ children, onAction, classNames, state }: import("./Toolbar").ToolbarProps) => JSX.Element;
-        Button: ({ Icon, children, ...props }: Omit<import("@radix-ui/react-toggle-group").ToggleGroupItemProps, "className"> & import("@dxos/react-ui").ButtonProps & {
-            Icon: import("@phosphor-icons/react").Icon;
-        }) => JSX.Element;
-        Separator: () => JSX.Element;
-        View: ({ mode }: {
-            mode: "source" | "preview" | "readonly";
-        }) => JSX.Element;
-        Markdown: () => JSX.Element;
-        Custom: ({ onUpload }?: import("./Toolbar").MarkdownCustomOptions) => JSX.Element;
-        Actions: () => JSX.Element;
-    };
-    decorators: import("@storybook/react/*").Decorator[];
-    parameters: {
-        translations: {
-            'en-US': {
-                "react-ui-editor": {
-                    'strong label': string;
-                    'emphasis label': string;
-                    'strikethrough label': string;
-                    'code label': string;
-                    'link label': string;
-                    'list-bullet label': string;
-                    'list-ordered label': string;
-                    'list-task label': string;
-                    'blockquote label': string;
-                    'codeblock label': string;
-                    'comment label': string;
-                    'image label': string;
-                    'heading label': string;
-                    'table label': string;
-                    'heading level label_zero': string;
-                    'heading level label_one': string;
-                    'heading level label_other': string;
-                    'view mode label': string;
-                    'preview mode label': string;
-                    'readonly mode label': string;
-                    'source mode label': string;
-                };
-            };
-        }[];
-        layout: string;
-    };
-    render: (args: any) => JSX.Element;
-};
-export default _default;
-export declare const Default: {
-    args: {
-        content: string;
-    };
-};
-//# sourceMappingURL=Toolbar.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAiGH,GAAG;;AALpB,wBAME;AAYF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}

package/dist/types/src/extensions/markdown/linkPaste.d.ts

@@ -1,16 +0,0 @@
-import { type EditorState, Transaction } from '@codemirror/state';
-import { type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-export declare const formatUrlForDisplay: (url: string) => string;
-export declare const linkPastePlugin: ViewPlugin<{
-    view: EditorView;
-    update(update: ViewUpdate): void;
-    handleInputRead(view: EditorView, tr: Transaction): void;
-    /**
-     * Determines if a given position is within a code block.
-     * Traverses the syntax tree upwards from the position,
-     * checking for CodeBlock or FencedCode nodes.
-     */
-    isInCodeBlock(state: EditorState, pos: number): boolean;
-    createLinkTransaction(state: EditorState, from: number, to: number, url: string, text: string): Transaction;
-}>;
-//# sourceMappingURL=linkPaste.d.ts.map

package/dist/types/src/extensions/markdown/linkPaste.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"linkPaste.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/linkPaste.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,KAAK,UAAU,EAAE,UAAU,EAAE,KAAK,UAAU,EAAoB,MAAM,kBAAkB,CAAC;AAYlG,eAAO,MAAM,mBAAmB,QAAS,MAAM,KAAG,MAYjD,CAAC;AA0BF,eAAO,MAAM,eAAe;UAElB,UAAU;mBAMD,UAAU;0BASH,UAAU,MAAM,WAAW;IAgBjD;;;;OAIG;yBACkB,WAAW,OAAO,MAAM,GAAG,OAAO;iCAY1B,WAAW,QAAQ,MAAM,MAAM,MAAM,OAAO,MAAM,QAAQ,MAAM,GAAG,WAAW;EAO9G,CAAC"}

package/dist/types/src/extensions/markdown/linkPaste.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=linkPaste.test.d.ts.map

package/dist/types/src/extensions/markdown/linkPaste.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"linkPaste.test.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/linkPaste.test.ts"],"names":[],"mappings":""}

package/dist/types/src/hooks/InputMode.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputMode.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/InputMode.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AASpB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAgBzE,KAAK,UAAU,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EpF,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAanB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}

package/dist/types/src/hooks/TextEditor.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/TextEditor.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAmBpB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA0NzE,KAAK,UAAU,GAAG;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,YAAY,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCzD,wBAKE;AAeF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAEpB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAExB,CAAC;AASF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAIF,eAAO,MAAM,SAAS;;CAUrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAE/B,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,IAAI;;CAEhB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAIjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAYxB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAWxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAWnB,CAAC;AAmDF,eAAO,MAAM,OAAO;;CAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAsCpB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAOf,CAAC;AAEF,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAaf,CAAC;AAIF,eAAO,MAAM,QAAQ;;CAgBpB,CAAC;AAEF,eAAO,MAAM,UAAU;;CAOtB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAqBjB,CAAC"}

package/dist/types/src/styles/layout.d.ts

@@ -1,4 +0,0 @@
-export declare const editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-export declare const editorFillLayoutRoot = "bs-full relative";
-export declare const editorFillLayoutEditor = "!absolute inset-0";
-//# sourceMappingURL=layout.d.ts.map

package/dist/types/src/styles/layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/styles/layout.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB,sIACiG,CAAC;AAEtI,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,eAAO,MAAM,sBAAsB,sBAAsB,CAAC"}

package/dist/types/src/themes/default.d.ts

@@ -1,14 +0,0 @@
-import { type ThemeStyles } from '../styles';
-/**
- * Minimal styles.
- * https://codemirror.net/examples/styling
- *
- * Examples:
- * - https://github.com/codemirror/view/blob/main/src/theme.ts
- * - https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts
- *
- * NOTE: Use one of '&', '&light', and '&dark' prefix to scope instance.
- * NOTE: `light` and `dark` selectors are preprocessed by CodeMirror and can only be in the base theme.
- */
-export declare const defaultTheme: ThemeStyles;
-//# sourceMappingURL=default.d.ts.map

package/dist/types/src/themes/default.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAgR1B,CAAC"}

package/dist/types/src/themes/index.d.ts

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

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

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

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -1,119 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxosTheme';
-
-import React, { type FC, useState } from 'react';
-
-import { TextType } from '@braneframe/types';
-import { create } from '@dxos/echo-schema';
-import { PublicKey } from '@dxos/keys';
-import { faker } from '@dxos/random';
-import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
-import { Tooltip, useThemeContext } from '@dxos/react-ui';
-import { textBlockWidth } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { Toolbar } from './Toolbar';
-import {
-  type Action,
-  type Comment,
-  comments,
-  createBasicExtensions,
-  createDataExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  type EditorViewMode,
-  formattingKeymap,
-  image,
-  table,
-  useComments,
-  useFormattingState,
-} from '../../extensions';
-import { useActionHandler, useTextEditor } from '../../hooks';
-import translations from '../../translations';
-
-faker.seed(101);
-
-const Story: FC<{ content: string }> = ({ content }) => {
-  const { themeMode } = useThemeContext();
-  const [text] = useState(createEchoObject(create(TextType, { content })));
-  const [formattingState, formattingObserver] = useFormattingState();
-  const [viewMode, setViewMode] = useState<EditorViewMode>('preview');
-  const { parentRef, view } = useTextEditor(() => {
-    return {
-      id: text.id,
-      initialValue: text.content,
-      extensions: [
-        formattingObserver,
-        createBasicExtensions({ readonly: viewMode === 'readonly' }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
-        createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
-        comments({
-          onCreate: ({ cursor }) => {
-            const id = PublicKey.random().toHex();
-            setComments((comments) => [...comments, { id, cursor }]);
-            return id;
-          },
-        }),
-        formattingKeymap(),
-        image(),
-        ...(viewMode !== 'source' ? [decorateMarkdown(), table()] : []),
-      ],
-    };
-  }, [text, formattingObserver, viewMode, themeMode]);
-
-  const handleToolbarAction = useActionHandler(view);
-  const handleAction = (action: Action) => {
-    if (action.type === 'view-mode') {
-      setViewMode(action.data);
-    } else {
-      handleToolbarAction?.(action);
-    }
-  };
-
-  const [_comments, setComments] = useState<Comment[]>([]);
-  useComments(view, text.id, _comments);
-
-  return (
-    <Tooltip.Provider>
-      <div role='none' className='fixed inset-0 flex flex-col'>
-        <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
-          <Toolbar.View mode={viewMode} />
-          <Toolbar.Markdown />
-          <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
-          <Toolbar.Separator />
-          <Toolbar.Actions />
-        </Toolbar.Root>
-        <div ref={parentRef} className={textBlockWidth} />
-      </div>
-    </Tooltip.Provider>
-  );
-};
-
-export default {
-  title: 'react-ui-editor/Toolbar',
-  component: Toolbar,
-  decorators: [withTheme],
-  parameters: { translations, layout: 'fullscreen' },
-  render: (args: any) => <Story {...args} />,
-};
-
-const content = [
-  '# Demo',
-  '',
-  'The editor supports **Markdown** styles.',
-  '',
-  faker.lorem.paragraph({ min: 5, max: 8 }),
-  '',
-  '',
-].join('\n');
-
-export const Default = {
-  args: {
-    content,
-  },
-};

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

@@ -1,45 +0,0 @@
-//
-// 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

@@ -1,113 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-import { syntaxTree } from '@codemirror/language';
-import { type EditorState, Transaction } from '@codemirror/state';
-import { type EditorView, ViewPlugin, type ViewUpdate, type PluginValue } from '@codemirror/view';
-import { type SyntaxNode } from '@lezer/common';
-
-const VALID_PROTOCOLS = ['http:', 'https:', 'mailto:', 'tel:'];
-
-const createTextLink = (text: string, url: string): string => `[${text}](${url})`;
-
-const createUrlLink = (url: string): string => {
-  const displayUrl = formatUrlForDisplay(url);
-  return `[${displayUrl}](${url})`;
-};
-
-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 => {
-  const [urlBase, queryString] = url.split('?');
-  if (!queryString) {
-    return urlBase;
-  }
-  if (queryString.length > maxQueryLength) {
-    const truncatedQuery = queryString.slice(0, maxQueryLength) + '...';
-    return `${urlBase}?${truncatedQuery}`;
-  } else {
-    return `${urlBase}?${queryString}`;
-  }
-};
-
-const isValidUrl = (str: string) => {
-  try {
-    const url = new URL(str);
-    return VALID_PROTOCOLS.includes(url.protocol);
-  } catch (e) {
-    return false;
-  }
-};
-
-const onNextUpdate = (callback: () => void) => setTimeout(callback, 0);
-
-export const linkPastePlugin = ViewPlugin.fromClass(
-  class implements PluginValue {
-    view: EditorView;
-
-    constructor(view: EditorView) {
-      this.view = view;
-    }
-
-    update(update: ViewUpdate) {
-      for (const tr of update.transactions) {
-        const event = tr.annotation(Transaction.userEvent);
-        if (event === 'input.paste') {
-          this.handleInputRead(this.view, tr);
-        }
-      }
-    }
-
-    handleInputRead(view: EditorView, tr: Transaction) {
-      const changes = tr.changes;
-      if (changes.empty) {
-        return;
-      }
-      changes.iterChangedRanges((fromA, toA, fromB, toB) => {
-        const insertedText = view.state.sliceDoc(fromB, toB);
-        if (isValidUrl(insertedText) && !this.isInCodeBlock(view.state, fromB)) {
-          const replacedText = tr.startState.sliceDoc(fromA, toA);
-          onNextUpdate(() => {
-            view.dispatch(this.createLinkTransaction(view.state, fromA, toB, insertedText, replacedText));
-          });
-        }
-      });
-    }
-
-    /**
-     * Determines if a given position is within a code block.
-     * Traverses the syntax tree upwards from the position,
-     * checking for CodeBlock or FencedCode nodes.
-     */
-    isInCodeBlock(state: EditorState, pos: number): boolean {
-      const tree = syntaxTree(state);
-      let node: SyntaxNode | null = tree.resolveInner(pos, -1);
-      while (node) {
-        if (node.name.includes('Code') || node.name.includes('FencedCode')) {
-          return true;
-        }
-        node = node.parent;
-      }
-      return false;
-    }
-
-    createLinkTransaction(state: EditorState, from: number, to: number, url: string, text: string): Transaction {
-      const linkText = text.trim() ? createTextLink(text, url) : createUrlLink(url);
-      return state.update({
-        changes: { from, to, insert: linkText },
-      });
-    }
-  },
-);

package/src/styles/layout.ts

@@ -1,9 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export const editorWithToolbarLayout =
-  'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
-
-export const editorFillLayoutRoot = 'bs-full relative';
-export const editorFillLayoutEditor = '!absolute inset-0';

package/src/themes/index.ts

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