URL highlighting with inline CM

src-web/components/Editor/Editor.tsx

@@ -1,22 +1,81 @@
 import './Editor.css';
-import { useEffect, useMemo, useRef } from 'react';
+import { HTMLAttributes, useEffect, useMemo, useRef } from 'react';
 import { EditorView } from 'codemirror';
-import { baseExtensions, syntaxExtension } from './extensions';
-import { EditorState } from '@codemirror/state';
+import { baseExtensions, multiLineExtensions, syntaxExtension } from './extensions';
+import { EditorState, Transaction, EditorSelection } from '@codemirror/state';
+import type { TransactionSpec } from '@codemirror/state';
+import classnames from 'classnames';
+import { autocompletion } from '@codemirror/autocomplete';
 
-interface Props {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   contentType: string;
   useTemplating?: boolean;
-  defaultValue?: string | null;
   onChange?: (value: string) => void;
+  onSubmit?: () => void;
+  singleLine?: boolean;
 }
 
-export default function Editor({ contentType, useTemplating, defaultValue, onChange }: Props) {
+export default function Editor({
+  contentType,
+  useTemplating,
+  defaultValue,
+  onChange,
+  onSubmit,
+  className,
+  singleLine,
+  ...props
+}: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const extensions = useMemo(() => {
     const ext = syntaxExtension({ contentType, useTemplating });
     return [
+      autocompletion(),
+      ...(singleLine
+        ? [
+            EditorView.domEventHandlers({
+              keydown: (e) => {
+                // TODO: Figure out how to not have this mess up autocomplete
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  onSubmit?.();
+                }
+              },
+            }),
+            EditorState.transactionFilter.of(
+              (tr: Transaction): TransactionSpec | TransactionSpec[] => {
+                if (!tr.isUserEvent('input.paste')) {
+                  return tr;
+                }
+                console.log('GOT PASTE', tr);
+
+                // let addedNewline = false;
+                const trs: TransactionSpec[] = [];
+                tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+                  // console.log('CHANGE', { fromA, toA }, { fromB, toB }, inserted);
+                  let insert = '';
+                  for (const line of inserted) {
+                    insert += line.replace('\n', '');
+                  }
+                  trs.push({
+                    ...tr,
+                    selection: undefined,
+                    changes: [{ from: fromB, to: toA, insert }],
+                  });
+                });
+
+                // selection: EditorSelection.create([EditorSelection.cursor(8)], 1),
+                // console.log('TRS', trs, tr);
+                trs.push({
+                  selection: EditorSelection.create([EditorSelection.cursor(8)], 1),
+                });
+                return trs;
+                // return addedNewline ? [] : tr;
+              },
+            ),
+          ]
+        : []),
       ...baseExtensions,
+      ...(!singleLine ? [multiLineExtensions] : []),
       ...(ext ? [ext] : []),
       EditorView.updateListener.of((update) => {
         if (typeof onChange === 'function') {
@@ -33,7 +92,7 @@ export default function Editor({ contentType, useTemplating, defaultValue, onCha
     try {
       view = new EditorView({
         state: EditorState.create({
-          doc: defaultValue ?? '',
+          doc: `${defaultValue ?? ''}`,
           extensions: extensions,
         }),
         parent: ref.current,
@@ -44,5 +103,15 @@ export default function Editor({ contentType, useTemplating, defaultValue, onCha
     return () => view?.destroy();
   }, [ref.current]);
 
-  return <div ref={ref} className="cm-wrapper" />;
+  return (
+    <div
+      ref={ref}
+      className={classnames(
+        className,
+        'cm-wrapper text-base',
+        singleLine ? 'cm-singleline' : 'cm-multiline',
+      )}
+      {...props}
+    />
+  );
 }