@dxos/plugin-markdown 0.6.12-main.5cc132e → 0.6.12-main.89e9959

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

@@ -1 +0,0 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMtD,eAAO,MAAM,UAAU,0BAA2B,iBAAiB,CAAC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,sBAUzF,CAAC;AAIF,eAAO,MAAM,cAAc,iBAAkB,iBAAiB,sBAE7D,CAAC"}

package/src/components/DocumentCard.tsx

@@ -1,107 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { forwardRef } from 'react';
-
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { DropdownMenu, Input, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-card';
-import {
-  createBasicExtensions,
-  createDataExtensions,
-  createThemeExtensions,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import type { MosaicTileComponent } from '@dxos/react-ui-mosaic';
-import { focusRing, mx } from '@dxos/react-ui-theme';
-
-import { createBaseExtensions } from '../extensions';
-import { MARKDOWN_PLUGIN } from '../meta';
-import { type DocumentType, type MarkdownSettingsProps } from '../types';
-
-export type DocumentItemProps = {
-  id: string;
-  object: DocumentType;
-  color?: string;
-};
-
-export type DocumentCardProps = {
-  settings: MarkdownSettingsProps;
-};
-
-/**
- * @deprecated
- */
-// TODO(wittjosiah): Unify with DocumentEditor.
-export const DocumentCard: MosaicTileComponent<DocumentItemProps, HTMLDivElement, DocumentCardProps> = forwardRef(
-  (
-    {
-      classNames,
-      isDragging,
-      draggableStyle,
-      draggableProps,
-      item: { id, object, color },
-      grow,
-      settings,
-      onSelect,
-      onAction,
-    },
-    forwardRef,
-  ) => {
-    const { t } = useTranslation(MARKDOWN_PLUGIN);
-    const { themeMode } = useThemeContext();
-    const { parentRef, focusAttributes } = useTextEditor(
-      () => ({
-        initialValue: object.content?.content,
-        extensions: [
-          createBasicExtensions({ placeholder: t('editor placeholder') }),
-          createThemeExtensions({ themeMode }),
-          createDataExtensions({
-            id: object.id,
-            text: object.content && createDocAccessor(object.content, ['content']),
-          }),
-          createBaseExtensions({
-            document: object,
-            debug: settings.debug,
-            experimental: settings.experimental,
-          }),
-        ],
-      }),
-      [object, object.content, themeMode],
-    );
-
-    return (
-      <div role='none' ref={forwardRef} className='flex w-full' style={draggableStyle}>
-        <Card.Root classNames={mx('w-full snap-center', color, isDragging && 'opacity-20', classNames)} grow={grow}>
-          <Card.Header onDoubleClick={() => onSelect?.()}>
-            <Card.DragHandle {...draggableProps} />
-            <Input.Root>
-              <Input.TextInput
-                variant='subdued'
-                classNames='p-0'
-                placeholder={t('document title placeholder')}
-                value={object.name}
-                onChange={(event) => (object.name = event.target.value)}
-              />
-            </Input.Root>
-            <Card.Menu>
-              {/* TODO(burdon): Handle events/intents? */}
-              <DropdownMenu.Item onClick={() => onAction?.({ id, action: 'delete' })}>
-                <span className='grow'>Delete</span>
-              </DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => onAction?.({ id, action: 'set-color' })}>
-                <span className='grow'>Change color</span>
-              </DropdownMenu.Item>
-            </Card.Menu>
-          </Card.Header>
-          <Card.Body>
-            <div {...focusAttributes} ref={parentRef} className={mx(focusRing, 'rounded-sm h-full p-1 text-sm')} />
-          </Card.Body>
-        </Card.Root>
-      </div>
-    );
-  },
-);
-
-export default DocumentCard;

package/src/components/DocumentEditor.tsx

@@ -1,137 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useEffect, useMemo } from 'react';
-
-import { useResolvePlugin, parseFileManagerPlugin, useIntentDispatcher } from '@dxos/app-framework';
-import { createDocAccessor, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import {
-  createDataExtensions,
-  listener,
-  localStorageStateStoreAdapter,
-  state,
-  type Extension,
-  type EditorSelectionState,
-} from '@dxos/react-ui-editor';
-
-import MarkdownEditor, { type MarkdownEditorProps } from './MarkdownEditor';
-import { createBaseExtensions } from '../extensions';
-import { type DocumentType, type MarkdownPluginState, type MarkdownSettingsProps } from '../types';
-import { getFallbackName, setFallbackName } from '../util';
-
-type DocumentEditorProps = {
-  document: DocumentType;
-  settings: MarkdownSettingsProps;
-} & Omit<MarkdownEditorProps, 'id' | 'inputMode' | 'toolbar' | 'extensions'> &
-  Pick<MarkdownPluginState, 'extensionProviders'>;
-
-/**
- * Editor for a `DocumentType`.
- */
-const DocumentEditor = ({
-  document: doc,
-  extensionProviders = [],
-  viewMode,
-  settings,
-  ...props
-}: DocumentEditorProps) => {
-  const space = getSpace(doc);
-  const identity = useIdentity();
-  const dispatch = useIntentDispatcher();
-
-  const baseExtensions = useMemo(() => {
-    // TODO(wittjosiah): Autocomplete is not working and this query is causing performance issues.
-    // const query = space?.db.query(Filter.schema(DocumentType));
-    // query?.subscribe();
-    return createBaseExtensions({
-      viewMode,
-      settings,
-      document: doc,
-      dispatch,
-      // query,
-    });
-  }, [doc, viewMode, dispatch, settings, settings.folding, settings.numberedHeadings]);
-
-  const providerExtensions = useMemo(
-    () =>
-      extensionProviders.reduce((acc: Extension[], provider) => {
-        const provided = typeof provider === 'function' ? provider({ document: doc }) : provider;
-        acc.push(...provided);
-        return acc;
-      }, []),
-    [extensionProviders],
-  );
-
-  const extensions = useMemo(
-    () => [
-      // NOTE: Data extensions must be first so that automerge is updated before other extensions compute their state.
-      createDataExtensions({
-        id: doc.id,
-        text: doc.content && createDocAccessor(doc.content, ['content']),
-        space,
-        identity,
-      }),
-      state(localStorageStateStoreAdapter),
-      listener({
-        onChange: (text) => {
-          setFallbackName(doc, text);
-        },
-      }),
-      providerExtensions,
-      baseExtensions,
-    ],
-    [doc, doc.content, space, baseExtensions, providerExtensions, identity],
-  );
-
-  const initialValue = useMemo(() => doc.content?.content, [doc.content]);
-
-  // Migrate gradually to `fallbackName`.
-  useEffect(() => {
-    if (!doc.fallbackName && doc.content?.content) {
-      doc.fallbackName = getFallbackName(doc.content.content);
-    }
-  }, [doc, doc.content]);
-
-  // Restore last selection and scroll point.
-  const id = fullyQualifiedId(doc);
-  const { scrollTo, selection } = useMemo<EditorSelectionState>(
-    () => localStorageStateStoreAdapter.getState(id) ?? {},
-    [doc],
-  );
-
-  const fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
-  const handleFileUpload = useMemo(() => {
-    if (space === undefined) {
-      return undefined;
-    }
-
-    if (fileManagerPlugin?.provides.file.upload === undefined) {
-      return undefined;
-    }
-
-    return async (file: File) => {
-      return fileManagerPlugin?.provides?.file?.upload?.(file, space);
-    };
-  }, [fileManagerPlugin, space]);
-
-  return (
-    <MarkdownEditor
-      id={id}
-      initialValue={initialValue}
-      extensions={extensions}
-      scrollTo={scrollTo}
-      selection={selection}
-      onFileUpload={handleFileUpload}
-      inputMode={settings.editorInputMode}
-      toolbar={settings.toolbar}
-      viewMode={viewMode}
-      {...props}
-    />
-  );
-};
-
-export default DocumentEditor;
-
-export type DocumentEditor = typeof DocumentEditor;

package/src/components/HeadingMenu.tsx

@@ -1,46 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { DotsThreeVertical } from '@phosphor-icons/react';
-import React, { type PropsWithChildren, type FC } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { Button, DropdownMenu } from '@dxos/react-ui';
-import { fineButtonDimensions, getSize } from '@dxos/react-ui-theme';
-
-import { type DocumentType, type MarkdownProperties } from '../types';
-
-// TODO(thure): This needs to be refactored into a graph node action.
-export const DocumentHeadingMenu: FC<{ document: DocumentType }> = ({ document }) => {
-  return <HeadingMenu properties={document} content={document.content?.content} />;
-};
-
-/**
- * Menu for the layout heading.
- */
-export const HeadingMenu = ({
-  content,
-  properties,
-}: PropsWithChildren<{
-  content: string | undefined;
-  properties: MarkdownProperties;
-}>) => {
-  return (
-    <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger asChild>
-        <Button variant='ghost' classNames={fineButtonDimensions}>
-          <DotsThreeVertical className={getSize(4)} />
-        </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content sideOffset={8} classNames='z-10'>
-          <DropdownMenu.Viewport>
-            <Surface data={{ content, properties }} role='menuitem' />
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
-};

package/src/components/Layout.tsx

@@ -1,27 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { Main } from '@dxos/react-ui';
-import { editorWithToolbarLayout } from '@dxos/react-ui-editor';
-import { topbarBlockPaddingStart } from '@dxos/react-ui-theme';
-
-export const MainLayout = ({ children, toolbar }: PropsWithChildren<{ toolbar?: boolean }>) => {
-  return (
-    <Main.Content
-      bounce
-      data-toolbar={toolbar ? 'enabled' : 'disabled'}
-      classNames={[topbarBlockPaddingStart, editorWithToolbarLayout]}
-    >
-      {children}
-    </Main.Content>
-  );
-};
-
-// Used when the editor is embedded in another context (e.g., iframe) and has no topbar/sidebar/etc.
-// TODO(wittjosiah): What's the difference between this and Section/Card?
-export const EmbeddedLayout = ({ children }: PropsWithChildren) => {
-  return <Main.Content classNames='min-bs-[100dvh] grid p-0.5'>{children}</Main.Content>;
-};