@dxos/plugin-markdown 0.6.8-main.046e6cf

package/src/extensions.tsx

@@ -0,0 +1,175 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ArrowSquareDown, ArrowSquareOut, type Icon } from '@phosphor-icons/react';
+import React, { type AnchorHTMLAttributes, StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { type IntentDispatcher, NavigationAction } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { fullyQualifiedId, type Query } from '@dxos/react-client/echo';
+import {
+  type AutocompleteResult,
+  type Extension,
+  type EditorViewMode,
+  autocomplete,
+  decorateMarkdown,
+  linkTooltip,
+  typewriter,
+  formattingKeymap,
+  InputModeExtensions,
+  folding,
+} from '@dxos/react-ui-editor';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { isNotFalsy, nonNullable } from '@dxos/util';
+
+import { type DocumentType, type MarkdownSettingsProps } from './types';
+
+export type ExtensionsOptions = {
+  viewMode?: EditorViewMode;
+  settings?: MarkdownSettingsProps;
+  document?: DocumentType;
+  debug?: boolean;
+  experimental?: boolean;
+  numberedHeadings?: boolean;
+  folding?: boolean;
+  query?: Query<DocumentType>;
+  dispatch?: IntentDispatcher;
+};
+
+/**
+ * Create extension instances for editor.
+ */
+export const createBaseExtensions = ({
+  viewMode,
+  settings,
+  document,
+  query,
+  dispatch,
+}: ExtensionsOptions): Extension[] => {
+  const extensions: Extension[] = [
+    //
+    // Common.
+    //
+    ...(viewMode === 'source'
+      ? []
+      : [
+          decorateMarkdown({
+            selectionChangeDelay: 100,
+            numberedHeadings: settings?.numberedHeadings ? { from: 2 } : undefined,
+            // TODO(wittjosiah): For internal links, consider ignoring the link text and rendering the label of the object being linked to.
+            renderLinkButton:
+              dispatch && document
+                ? onRenderLink((id: string) => {
+                    void dispatch({
+                      action: NavigationAction.ADD_TO_ACTIVE,
+                      data: {
+                        id,
+                        part: 'main',
+                        pivotId: fullyQualifiedId(document),
+                        scrollIntoView: true,
+                      },
+                    });
+                  })
+                : undefined,
+          }),
+          settings?.folding && folding(),
+        ].filter(isNotFalsy)),
+    formattingKeymap(),
+    linkTooltip(renderLinkTooltip),
+  ];
+
+  //
+  // Editor mode.
+  //
+  if (settings?.editorInputMode) {
+    const extension = InputModeExtensions[settings.editorInputMode];
+    if (extension) {
+      extensions.push(extension);
+    }
+  }
+
+  //
+  // Autocomplete object links.
+  //
+  if (query) {
+    extensions.push(
+      autocomplete({
+        onSearch: (text: string) => {
+          // TODO query
+          // TODO(burdon): Specify filter (e.g., stack).
+          return query.objects
+            .map<AutocompleteResult | undefined>((object) =>
+              object.name?.length && object.id !== document?.id
+                ? {
+                    label: object.name,
+                    // TODO(burdon): Factor out URL builder.
+                    apply: `[${object.name}](/${fullyQualifiedId(object)})`,
+                  }
+                : undefined,
+            )
+            .filter(nonNullable);
+        },
+      }),
+    );
+  }
+
+  if (settings?.debug) {
+    const items = settings.typewriter ?? '';
+    extensions.push(...[items ? typewriter({ items: items.split(/[,\n]/) }) : undefined].filter(nonNullable));
+  }
+
+  if (settings?.experimental) {
+    extensions.push(...[].filter(nonNullable));
+  }
+
+  return extensions;
+};
+
+// TODO(burdon): Factor out style.
+const hover = 'rounded-sm text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
+
+const onRenderLink = (onSelectObject: (id: string) => void) => (el: Element, url: string) => {
+  // TODO(burdon): Formalize/document internal link format.
+  const isInternal =
+    url.startsWith('/') ||
+    // TODO(wittjosiah): This should probably be parsed out on paste?
+    url.startsWith(window.location.origin);
+
+  const options: AnchorHTMLAttributes<any> = isInternal
+    ? {
+        onClick: () => {
+          const qualifiedId = url.split('/').at(-1);
+          invariant(qualifiedId, 'Invalid link format.');
+          onSelectObject(qualifiedId);
+        },
+      }
+    : {
+        href: url,
+        rel: 'noreferrer',
+        target: '_blank',
+      };
+
+  const LinkIcon: Icon = isInternal ? ArrowSquareDown : ArrowSquareOut;
+
+  createRoot(el).render(
+    <StrictMode>
+      <a {...options} className={hover}>
+        <LinkIcon weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 cursor-pointer')} />
+      </a>
+    </StrictMode>,
+  );
+};
+
+const renderLinkTooltip = (el: Element, url: string) => {
+  const web = new URL(url);
+  createRoot(el).render(
+    <StrictMode>
+      <a href={url} target='_blank' rel='noreferrer' className={hover}>
+        {web.origin}
+        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 cursor-pointer')} />
+      </a>
+    </StrictMode>,
+  );
+};

package/src/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { MarkdownPlugin } from './MarkdownPlugin';
+
+export default MarkdownPlugin;
+
+export * from './MarkdownPlugin';
+export * from './types';
+export * from './util';

package/src/meta.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconProps, TextAa } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const MARKDOWN_PLUGIN = 'dxos.org/plugin/markdown';
+
+export default pluginMeta({
+  id: MARKDOWN_PLUGIN,
+  name: 'Editor',
+  description: 'Markdown text editor.',
+  homePage: 'https://github.com/dxos/dxos/tree/main/packages/apps/plugins/plugin-markdown',
+  iconComponent: (props: IconProps) => <TextAa {...props} />,
+  iconSymbol: 'ph--text-aa--regular',
+});

package/src/translations.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { MARKDOWN_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [MARKDOWN_PLUGIN]: {
+        'plugin name': 'Editor',
+        'create stack section label': 'Create document',
+        'document title placeholder': 'New document',
+        'choose markdown from space dialog title': 'Choose one or more documents to add',
+        // TODO(burdon): Style-guide for user-facing text (e.g., hints, questions, capitalization, etc.)
+        'empty choose markdown from space message': 'None available; try creating a new one instead?',
+        'chooser done label': 'Add selected',
+        'create document label': 'Create document',
+        'editor placeholder': 'New document',
+        'editor input mode label': 'Editor input mode',
+        'select editor input mode placeholder': 'Select editor input mode…',
+        'settings editor input mode default label': 'Default',
+        'settings editor input mode vim label': 'Vim',
+        'settings editor input mode vscode label': 'VS Code',
+        'settings toolbar label': 'Show toolbar',
+        'settings numbered headings label': 'Numbered headings',
+        'settings folding label': 'Folding',
+        'settings experimental label': 'Enable experimental features',
+        'settings debug label': 'Enable debugging features',
+        'settings debug placeholder': 'Typewriter script...',
+        'toggle view mode label': 'Toggle read-only',
+        'default view mode label': 'Default view mode',
+      },
+    },
+  },
+];

package/src/types/document.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { ref, S, TypedObject } from '@dxos/echo-schema';
+import { ThreadType } from '@dxos/plugin-space/types';
+
+export class TextType extends TypedObject({ typename: 'dxos.org/type/Text', version: '0.1.0' })({
+  content: S.String,
+}) {}
+
+export class DocumentType extends TypedObject({ typename: 'dxos.org/type/Document', version: '0.1.0' })({
+  name: S.optional(S.String),
+  fallbackName: S.optional(S.String),
+  content: ref(TextType),
+  threads: S.mutable(S.Array(ref(ThreadType))),
+}) {}

package/src/types/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './document';
+export * from './types';

package/src/types/types.ts

@@ -0,0 +1,75 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type {
+  GraphBuilderProvides,
+  GraphSerializerProvides,
+  IntentResolverProvides,
+  MetadataRecordsProvides,
+  SettingsProvides,
+  SurfaceProvides,
+  TranslationsProvides,
+} from '@dxos/app-framework';
+import { type SchemaProvides } from '@dxos/plugin-client';
+import { type Extension, type EditorInputMode, type EditorViewMode } from '@dxos/react-ui-editor';
+
+import { type DocumentType } from './document';
+import { MARKDOWN_PLUGIN } from '../meta';
+
+const MARKDOWN_ACTION = `${MARKDOWN_PLUGIN}/action`;
+
+export enum MarkdownAction {
+  CREATE = `${MARKDOWN_ACTION}/create`,
+  SET_VIEW_MODE = `${MARKDOWN_ACTION}/set-view-mode`,
+}
+
+export type MarkdownProperties = Record<string, any>;
+
+export type ExtensionsProvider = (props: { document?: DocumentType }) => Extension[];
+
+export type OnChange = (text: string) => void;
+
+export type MarkdownExtensionProvides = {
+  markdown: {
+    extensions: ExtensionsProvider;
+  };
+};
+
+// TODO(wittjosiah): Factor out to graph plugin?
+type StackProvides = {
+  stack: {
+    creators?: Record<string, any>[];
+  };
+};
+
+export type MarkdownPluginState = {
+  // Codemirror extensions provided by other plugins.
+  extensionProviders: NonNullable<ExtensionsProvider>[];
+
+  // TODO(burdon): Extend view mode per document to include scroll position, etc.
+  // View mode per document.
+  viewMode: { [key: string]: EditorViewMode };
+};
+
+export type MarkdownSettingsProps = {
+  defaultViewMode: EditorViewMode;
+  editorInputMode?: EditorInputMode;
+  experimental?: boolean;
+  debug?: boolean;
+  toolbar?: boolean;
+  typewriter?: string;
+  // TODO(burdon): Per document settings.
+  numberedHeadings?: boolean;
+  folding?: boolean;
+};
+
+export type MarkdownPluginProvides = SurfaceProvides &
+  IntentResolverProvides &
+  GraphBuilderProvides &
+  GraphSerializerProvides &
+  MetadataRecordsProvides &
+  SettingsProvides<MarkdownSettingsProps> &
+  TranslationsProvides &
+  SchemaProvides &
+  StackProvides;

package/src/util.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Plugin } from '@dxos/app-framework';
+import { debounce } from '@dxos/async';
+import { type TypedObjectSerializer } from '@dxos/plugin-space/types';
+import { create, createEchoObject, isEchoObject, loadObjectReferences } from '@dxos/react-client/echo';
+
+import { DocumentType, type MarkdownProperties, type MarkdownExtensionProvides, TextType } from './types';
+
+export const isMarkdownProperties = (data: unknown): data is MarkdownProperties =>
+  isEchoObject(data)
+    ? true
+    : data && typeof data === 'object'
+      ? 'title' in data && typeof data.title === 'string'
+      : false;
+
+type MarkdownExtensionPlugin = Plugin<MarkdownExtensionProvides>;
+
+export const markdownExtensionPlugins = (plugins: Plugin[]): MarkdownExtensionPlugin[] => {
+  return (plugins as MarkdownExtensionPlugin[]).filter((plugin) => Boolean(plugin.provides?.markdown));
+};
+
+const nonTitleChars = /[^\w ]/g;
+
+export const getFallbackName = (content: string) => {
+  return content.substring(0, 31).split('\n')[0].replaceAll(nonTitleChars, '').trim();
+};
+
+export const setFallbackName = debounce((doc: DocumentType, content: string) => {
+  const name = getFallbackName(content);
+  if (doc.fallbackName !== name) {
+    doc.fallbackName = name;
+  }
+}, 200);
+
+export const serializer: TypedObjectSerializer<DocumentType> = {
+  serialize: async ({ object }): Promise<string> => {
+    const content = await loadObjectReferences(object, (doc) => doc.content);
+    return JSON.stringify({ name: object.name, content: content.content });
+  },
+
+  deserialize: async ({ content: serialized }) => {
+    const { name, content } = JSON.parse(serialized);
+    return createEchoObject(create(DocumentType, { name, content: create(TextType, { content }), threads: [] }));
+  },
+};