@dxos/react-ui-editor 0.3.9-main.7cfe653 → 0.3.9-main.88fb1d9

package/src/components/TextEditor/TextEditor.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { closeBrackets } from '@codemirror/autocomplete';
+import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorState, type Extension } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { EditorView, placeholder } from '@codemirror/view';
+import React, {
+  type KeyboardEvent,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+  useCallback,
+  type HTMLAttributes,
+} from 'react';
+import { type StyleSpec } from 'style-mod';
+import { yCollab } from 'y-codemirror.next';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { YText } from '@dxos/text-model';
+
+import { defaultStyles } from './theme';
+import { type EditorModel, type EditorSlots } from '../../model';
+
+export type CursorInfo = {
+  from: number;
+  to: number;
+  line: number;
+  lines: number;
+  after?: string;
+};
+
+export type TextEditorRef = {
+  editor: HTMLDivElement | null;
+  state?: EditorState;
+  view?: EditorView;
+};
+
+export type TextEditorProps = {
+  model?: EditorModel;
+  extensions?: Extension[];
+  theme?: {
+    [selector: string]: StyleSpec;
+  };
+  slots?: EditorSlots;
+  onKeyDown?: (event: KeyboardEvent, info: CursorInfo) => void;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'onBlur' | 'onFocus'>;
+
+/**
+ * Simple text editor.
+ */
+export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
+  ({ model, extensions = [], theme = defaultStyles, slots = {}, onKeyDown, ...props }, forwardedRef) => {
+    const { id, content } = model ?? {};
+    const { themeMode } = useThemeContext();
+
+    const [parent, setParent] = useState<HTMLDivElement | null>(null);
+    const [state, setState] = useState<EditorState>();
+    const [view, setView] = useState<EditorView>();
+
+    // TODO(burdon): The ref may be instantiated before the view is created.
+    useImperativeHandle(
+      forwardedRef,
+      () => {
+        return {
+          editor: parent,
+          state,
+          view,
+        };
+      },
+      [view],
+    );
+
+    useEffect(() => {
+      if (!parent) {
+        return;
+      }
+
+      view?.destroy();
+
+      const state = EditorState.create({
+        doc: content?.toString(),
+        extensions: [
+          bracketMatching(),
+          closeBrackets(),
+          placeholder(slots.editor?.placeholder ?? ''),
+          EditorView.lineWrapping,
+
+          // Themes.
+          EditorView.theme(theme),
+          ...(themeMode === 'dark'
+            ? [syntaxHighlighting(oneDarkHighlightStyle)]
+            : [syntaxHighlighting(defaultHighlightStyle)]),
+
+          // Replication.
+          ...(content instanceof YText ? [yCollab(content, undefined)] : []),
+
+          // Custom.
+          ...extensions,
+        ],
+      });
+
+      setState(state);
+      setView(new EditorView({ state, parent }));
+
+      return () => {
+        view?.destroy();
+        setView(undefined);
+        setState(undefined);
+      };
+    }, [parent, content, themeMode]);
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent) => {
+        if (view) {
+          const { head, from, to } = view.state.selection.ranges[0];
+          const { number } = view.state.doc.lineAt(head);
+          const after = view.state.sliceDoc(from);
+          onKeyDown?.(event, { from, to, line: number, lines: view.state.doc.lines, after });
+        }
+      },
+      [view],
+    );
+
+    return <div key={id} ref={setParent} {...slots.root} onKeyDown={handleKeyDown} {...props} />;
+  },
+);

package/src/components/TextEditor/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { type StyleSpec } from 'style-mod';
+export { tags } from '@lezer/highlight';
+
+export * from './TextEditor';
+export * from './theme';

package/src/components/TextEditor/theme.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import get from 'lodash.get';
+import { type StyleSpec } from 'style-mod';
+
+import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
+
+const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+
+/**
+ * https://codemirror.net/examples/styling
+ */
+// TODO(burdon): If given a "theme" suffix, `__docgen` properties are added to the object.
+export const defaultStyles: {
+  [selector: string]: StyleSpec;
+} = {
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+  '& .cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    overflow: 'visible',
+  },
+};

package/src/components/index.ts

@@ -5,3 +5,4 @@
 export * from './Editor';
 export * from './Markdown';
 export * from './RichText';
+export * from './TextEditor';

package/src/testing/replicator.ts

@@ -186,6 +186,5 @@ export type UseYjsModelOptions = {
 
 export const useYjsModel = ({ replicator, id, doc }: UseYjsModelOptions): EditorModel => {
   const peer = useMemo(() => replicator.createPeer(id, doc), [doc]);
-
   return peer;
 };