@dxos/react-ui-editor 0.4.8-main.eb5ae94 → 0.4.8-main.fff1521

package/src/extensions/factories.ts

@@ -0,0 +1,167 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { closeBrackets } from '@codemirror/autocomplete';
+import { history } from '@codemirror/commands';
+import { bracketMatching } from '@codemirror/language';
+import { EditorState, type Extension } from '@codemirror/state';
+import {
+  EditorView,
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  highlightActiveLine,
+  lineNumbers,
+  placeholder,
+  scrollPastEnd,
+} from '@codemirror/view';
+import defaultsDeep from 'lodash.defaultsdeep';
+
+import { generateName } from '@dxos/display-name';
+import { type DocAccessor } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+import { type Space } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { type ThemeMode } from '@dxos/react-ui';
+import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
+import { hexToHue, isNotFalsy } from '@dxos/util';
+
+import { automerge } from './automerge';
+import { awareness, SpaceAwarenessProvider } from './awareness';
+import { type ThemeStyles } from '../styles';
+import { defaultTheme } from '../themes';
+
+// TODO(burdon): Move into extensions folder.
+
+//
+// Basic
+//
+
+/**
+ * https://codemirror.net/docs/extensions
+ * https://github.com/codemirror/basic-setup
+ */
+// TODO(burdon): Reconcile with createMarkdownExtensions.
+export type BasicExtensionsOptions = {
+  allowMultipleSelections?: boolean;
+  bracketMatching?: boolean;
+  closeBrackets?: boolean;
+  crosshairCursor?: boolean;
+  dropCursor?: boolean;
+  drawSelection?: boolean;
+  editable?: boolean;
+  highlightActiveLine?: boolean;
+  history?: boolean;
+  lineNumbers?: boolean;
+  lineWrapping?: boolean;
+  placeholder?: string;
+  readonly?: boolean;
+  scrollPastEnd?: boolean;
+  tabSize?: number;
+};
+
+const defaults: BasicExtensionsOptions = {
+  bracketMatching: true,
+  closeBrackets: true,
+  drawSelection: true,
+  editable: true,
+  history: true,
+  lineWrapping: true,
+};
+
+export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extension => {
+  const props: BasicExtensionsOptions = defaultsDeep({}, _props, defaults);
+  return [
+    // TODO(burdon): Doesn't catch errors in keymap functions.
+    EditorView.exceptionSink.of((err) => {
+      log.catch(err);
+    }),
+
+    props.allowMultipleSelections && EditorState.allowMultipleSelections.of(true),
+    props.bracketMatching && bracketMatching(),
+    props.closeBrackets && closeBrackets(),
+    props.crosshairCursor && crosshairCursor(),
+    props.dropCursor && dropCursor(),
+    props.drawSelection && drawSelection(),
+    props.highlightActiveLine && highlightActiveLine(),
+    props.history && history(),
+    props.lineNumbers && lineNumbers(),
+    props.lineWrapping && EditorView.lineWrapping,
+    props.placeholder && placeholder(props.placeholder),
+    props.readonly && [EditorState.readOnly.of(true), EditorView.editable.of(false)],
+    props.scrollPastEnd && scrollPastEnd(),
+    props.tabSize && EditorState.tabSize.of(props.tabSize),
+  ].filter(isNotFalsy);
+};
+
+//
+// Theme
+//
+
+export type ThemeExtensionsOptions = {
+  theme?: ThemeStyles;
+  themeMode?: ThemeMode;
+  slots?: {
+    editor?: {
+      className?: string;
+    };
+    content?: {
+      className?: string;
+    };
+  };
+};
+
+const defaultSlots = {
+  editor: {
+    className: 'w-full bs-full',
+  },
+};
+
+export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
+  const slots = defaultsDeep({}, _slots, defaultSlots);
+  return [
+    EditorView.baseTheme(defaultTheme),
+    EditorView.darkTheme.of(themeMode === 'dark'),
+    theme && EditorView.theme(theme),
+    slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
+    slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
+  ].filter(isNotFalsy);
+};
+
+//
+// Data
+//
+
+export type DataExtensionsProps = {
+  id: string;
+  text: DocAccessor; // TODO(burdon): Rename content.
+  space?: Space;
+  identity?: Identity | null;
+};
+
+// TODO(burdon): Factor out automerge defs and extension (not hook).
+// TODO(burdon): Move out of react-ui-editor (remove echo deps).
+export const createDataExtensions = ({ id, text, space, identity }: DataExtensionsProps): Extension[] => {
+  const extensions: Extension[] = [automerge(text)];
+
+  if (space && identity) {
+    const peerId = identity?.identityKey.toHex();
+    const { cursorLightValue, cursorDarkValue } =
+      hueTokens[(identity?.profile?.data?.hue as HuePalette | undefined) ?? hexToHue(peerId ?? '0')];
+    const awarenessProvider = new SpaceAwarenessProvider({
+      space,
+      channel: `awareness.${id}`,
+      peerId: identity.identityKey.toHex(),
+      info: {
+        displayName: identity.profile?.displayName ?? generateName(identity.identityKey.toHex()),
+        color: cursorDarkValue,
+        lightColor: cursorLightValue,
+      },
+    });
+
+    extensions.push(awareness(awarenessProvider));
+  }
+
+  return extensions;
+};

package/src/extensions/index.ts

@@ -11,10 +11,13 @@ export * from './command';
 export * from './comments';
 export * from './cursor';
 export * from './cursor-line-margin';
+export * from './doc';
 export * from './dnd';
+export * from './factories';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
-export * from './outliner';
+export * from './state';
+export * from './types';
 export * from './typewriter';

package/src/extensions/markdown/bundle.ts

@@ -2,51 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
-import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
+import { closeBracketsKeymap } from '@codemirror/autocomplete';
+import { historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language';
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { searchKeymap } from '@codemirror/search';
-import { EditorState, type Extension } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { EditorView, drawSelection, dropCursor, keymap, placeholder } from '@codemirror/view';
+import { keymap } from '@codemirror/view';
 
 import { type ThemeMode } from '@dxos/react-ui';
-import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
-import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
-} & Pick<TextEditorProps, 'lineWrapping' | 'placeholder'>;
+};
 
 /**
- * Markdown bundle.
+ * Creates markdown extensions.
+ * To be used in conjunction with createBasicExtensions.
+ *
  * Refs:
  * https://codemirror.net/docs/community
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
-export const createMarkdownExtensions = ({
-  themeMode,
-  placeholder: _placeholder,
-  lineWrapping = true,
-}: MarkdownBundleOptions = {}): Extension[] => {
+export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions = {}): Extension[] => {
   return [
-    // TODO(burdon): Reconcile with createBasicExtensions.
-    lineWrapping && EditorView.lineWrapping,
-    EditorState.allowMultipleSelections.of(true),
-    EditorState.tabSize.of(2),
-
-    bracketMatching(),
-    closeBrackets(),
-    dropCursor(),
-    drawSelection(),
-    history(),
-    indentOnInput(),
-    _placeholder && placeholder(_placeholder),
-
     // Main extension.
     // https://github.com/codemirror/lang-markdown
     // https://codemirror.net/5/mode/markdown/index.html (demo).
@@ -86,5 +69,5 @@ export const createMarkdownExtensions = ({
       // https://codemirror.net/docs/ref/#commands.standardKeymap
       ...standardKeymap,
     ]),
-  ].filter(isNotFalsy);
+  ];
 };

package/src/extensions/markdown/decorate.ts

@@ -48,7 +48,7 @@ class CheckboxWidget extends WidgetType {
 
   override toDOM(view: EditorView) {
     const input = document.createElement('input');
-    input.className = 'cm-task-checkbox';
+    input.className = 'cm-task-checkbox ch-checkbox ch-focus-ring -mbs-0.5';
     input.type = 'checkbox';
     input.checked = this._checked;
     if (view.state.readOnly) {
@@ -148,9 +148,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
                 marks[1].from,
                 node.to,
                 options.renderLinkButton
-                  ? Decoration.replace({
-                      widget: new LinkButton(url, options.renderLinkButton),
-                    })
+                  ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
                   : hide,
               );
             }

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

@@ -9,20 +9,20 @@ import { expect } from 'chai';
 import { describe, test } from '@dxos/test';
 
 import {
-  setHeading,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
   addStyle,
+  getFormatting,
   removeStyle,
-  addLink,
   removeLink,
-  addList,
   removeList,
-  addBlockquote,
   removeBlockquote,
-  addCodeblock,
   removeCodeblock,
+  setHeading,
   Inline,
   List,
-  getFormatting,
   type Formatting,
 } from './formatting';
 
@@ -204,22 +204,22 @@ describe('removeStyle', () => {
 });
 
 describe('addLink', () => {
-  testCommand('adds a link', '{}', addLink, '[]({})');
+  testCommand('adds a link', '{}', addLink(), '[]({})');
 
-  testCommand('adds a link around text', 'hello {world}', addLink, 'hello [world]({})');
+  testCommand('adds a link around text', 'hello {world}', addLink(), 'hello [world]({})');
 
-  testCommand('clears existing links', '[hello {world}](foo)', addLink, 'hello [world]({})');
+  testCommand('clears existing links', '[hello {world}](foo)', addLink(), 'hello [world]({})');
 
-  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink, null);
+  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink(), null);
 
-  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink, null);
+  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink(), null);
 
-  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink, '*foo* [*bar* baz]({})');
+  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink(), '*foo* [*bar* baz]({})');
 
   testCommand(
     'patches up overlapping styles after',
     'one {two ~~three} four~~',
-    addLink,
+    addLink(),
     'one [two ~~three~~]({}) ~~four~~',
   );
 });

package/src/extensions/markdown/formatting.ts

@@ -15,7 +15,9 @@ import {
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
+
+import { useStateRef } from '@dxos/react-async';
 
 // Markdown refs:
 // https://github.github.com/gfm
@@ -56,7 +58,7 @@ export type Formatting = {
   listStyle: null | 'ordered' | 'bullet' | 'task';
 };
 
-export const compareFormatting = (a: Formatting, b: Formatting) =>
+export const formattingEquals = (a: Formatting, b: Formatting) =>
   a.blockType === b.blockType &&
   a.strong === b.strong &&
   a.emphasis === b.emphasis &&
@@ -161,7 +163,7 @@ export const setStyle =
   ({ state, dispatch }) => {
     const marker = inlineMarkerText(type);
     const changes = state.changeByRange((range) => {
-      // Special case for markers directly around the cursor, which will often not be parsed as valid styling
+      // Special case for markers directly around the cursor, which will often not be parsed as valid styling.
       if (!enable && range.empty) {
         const after = state.doc.sliceString(range.head, range.head + 6);
         const found = after.indexOf(marker);
@@ -190,16 +192,16 @@ export const setStyle =
       let startCovered: boolean | { from: number; to: number } = false;
       let endCovered: boolean | { from: number; to: number } = false;
       let { from, to } = range;
-      // Iterate the selected range. For each textblock, determine a
-      // start and end position, the overlap of the selected range and
-      // the block's extent, that should be styled/unstyled.
+
+      // Iterate the selected range. For each textblock, determine a start and end position,
+      // the overlap of the selected range and the block's extent, that should be styled/unstyled.
       syntaxTree(state).iterate({
         from,
         to,
         enter: (node) => {
           const { name } = node;
           if (Object.hasOwn(Textblocks, name) && Textblocks[name] !== 'codeblock') {
-            // Set up for this textblock
+            // Set up for this textblock.
             blockStart = blockContentStart(node);
             blockEnd = blockContentEnd(node, state.doc);
             startCovered = endCovered = false;
@@ -243,8 +245,7 @@ export const setStyle =
                     : true;
               }
             }
-            // Marks of the same type in range, or any mark if we're
-            // adding code style, need to be removed.
+            // Marks of the same type in range, or any mark if we're adding code style, need to be removed.
             if (markType === type || (type === Inline.Code && enable)) {
               if (node.from >= from && openEnd <= to) {
                 changes.push({ from: node.from, to: openEnd });
@@ -271,7 +272,7 @@ export const setStyle =
         },
         leave: (node) => {
           if (Object.hasOwn(Textblocks, node.name) && Textblocks[node.name] !== 'codeblock') {
-            // Finish opening/closing the marks for this textblock
+            // Finish opening/closing the marks for this textblock.
             const rangeStart = Math.max(from, blockStart);
             const rangeEnd = Math.min(to, blockEnd);
             if (enable) {
@@ -296,12 +297,14 @@ export const setStyle =
           }
         },
       });
+
       if (blockStart < 0 && range.empty && enable && !/\S/.test(state.doc.lineAt(range.from).text)) {
         return {
           changes: { from: range.head, insert: marker + marker },
           range: EditorSelection.cursor(range.head + marker.length),
         };
       }
+
       const changeSet = state.changes(changes.concat(changesAtEnd));
       return {
         changes: changeSet,
@@ -313,8 +316,12 @@ export const setStyle =
     });
 
     dispatch(
-      state.update(changes, { userEvent: enable ? 'format.style.add' : 'format.style.remove', scrollIntoView: true }),
+      state.update(changes, {
+        userEvent: enable ? 'format.style.add' : 'format.style.remove',
+        scrollIntoView: true,
+      }),
     );
+
     return true;
   };
 
@@ -465,90 +472,94 @@ export const removeLink: StateCommand = ({ state, dispatch }) => {
 };
 
 // Add link markup around the selection
-export const addLink: StateCommand = ({ state, dispatch }) => {
-  const changes = state.changeByRange((range) => {
-    let { from, to } = range;
-    const cutStyles: SyntaxNode[] = [];
-    let okay: boolean | null = null;
-    // Check whether this range is in a position where a link makes sense
-    syntaxTree(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Object.hasOwn(Textblocks, node.name)) {
-          // If the selection spans multiple textblocks or is in a
-          // code block, abort
-          okay =
-            Textblocks[node.name] !== 'codeblock' &&
-            from >= blockContentStart(node) &&
-            to <= blockContentEnd(node, state.doc);
-        } else if (Object.hasOwn(InlineMarker, node.name)) {
-          // Look for inline styles that partially overlap the range.
-          // Expand the range over them if they start directly
-          // outside, otherwise mark them for later
-          const sNode = node.node;
-          if (node.from < from && node.to <= to) {
-            if (sNode.firstChild!.to === from) {
-              from = node.from;
-            } else {
-              cutStyles.push(sNode);
-            }
-          } else if (node.from >= from && node.to > to) {
-            if (sNode.lastChild!.from === to) {
-              to = node.to;
-            } else {
-              cutStyles.push(sNode);
+export const addLink =
+  ({ url, image }: { url?: string; image?: boolean } = {}): StateCommand =>
+  ({ state, dispatch }) => {
+    const changes = state.changeByRange((range) => {
+      let { from, to } = range;
+      const cutStyles: SyntaxNode[] = [];
+      let okay: boolean | null = null;
+      // Check whether this range is in a position where a link makes sense.
+      syntaxTree(state).iterate({
+        from,
+        to,
+        enter: (node) => {
+          if (Object.hasOwn(Textblocks, node.name)) {
+            // If the selection spans multiple textblocks or is in a code block, abort.
+            okay =
+              Textblocks[node.name] !== 'codeblock' &&
+              from >= blockContentStart(node) &&
+              to <= blockContentEnd(node, state.doc);
+          } else if (Object.hasOwn(InlineMarker, node.name)) {
+            // Look for inline styles that partially overlap the range.
+            // Expand the range over them if they start directly outside, otherwise mark them for later.
+            const sNode = node.node;
+            if (node.from < from && node.to <= to) {
+              if (sNode.firstChild!.to === from) {
+                from = node.from;
+              } else {
+                cutStyles.push(sNode);
+              }
+            } else if (node.from >= from && node.to > to) {
+              if (sNode.lastChild!.from === to) {
+                to = node.to;
+              } else {
+                cutStyles.push(sNode);
+              }
             }
           }
-        }
-      },
-    });
+        },
+      });
 
-    if (okay === null) {
-      // No textblock found around selection. Check if the rest of the line is empty.
-      const line = state.doc.lineAt(from);
-      okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
-    }
-    if (!okay) {
-      return { range };
-    }
+      if (okay === null) {
+        // No textblock found around selection. Check if the rest of the line is empty.
+        const line = state.doc.lineAt(from);
+        okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
+      }
+      if (!okay) {
+        return { range };
+      }
 
-    const changes: ChangeSpec[] = [];
-    // Some changes must be moved to end of change array so that they are applied in the right order
-    const changesAfter: ChangeSpec[] = [];
-    // Clear existing links.
-    removeLinkInner(from, to, changesAfter, state);
-    let cursorOffset = 1;
-    // Close and reopen inline styles that partially overlap the range.
-    for (const style of cutStyles) {
-      const type = InlineMarker[style.name];
-      const mark = inlineMarkerText(type);
-      if (style.from < from) {
-        // Extends before.
-        changes.push({ from: skipSpaces(from, state.doc, -1), insert: mark });
-        changesAfter.push({ from: skipSpaces(from, state.doc, 1, to), insert: mark });
-      } else {
-        changes.push({ from: skipSpaces(to, state.doc, -1, from), insert: mark });
-        const after = skipSpaces(to, state.doc, 1);
-        if (after === to) {
-          cursorOffset += mark.length;
+      const changes: ChangeSpec[] = [];
+      // Some changes must be moved to end of change array so that they are applied in the right order
+      const changesAfter: ChangeSpec[] = [];
+      // Clear existing links.
+      removeLinkInner(from, to, changesAfter, state);
+      let cursorOffset = 1;
+      // Close and reopen inline styles that partially overlap the range.
+      for (const style of cutStyles) {
+        const type = InlineMarker[style.name];
+        const mark = inlineMarkerText(type);
+        if (style.from < from) {
+          // Extends before.
+          changes.push({ from: skipSpaces(from, state.doc, -1), insert: mark });
+          changesAfter.push({ from: skipSpaces(from, state.doc, 1, to), insert: mark });
+        } else {
+          changes.push({ from: skipSpaces(to, state.doc, -1, from), insert: mark });
+          const after = skipSpaces(to, state.doc, 1);
+          if (after === to) {
+            cursorOffset += mark.length;
+          }
+          changesAfter.push({ from: after, insert: mark });
         }
-        changesAfter.push({ from: after, insert: mark });
       }
+
+      // Add the link markup.
+      changes.push({ from, insert: image ? '![' : '[' }, { from: to, insert: `](${url ?? ''})` });
+      const changeSet = state.changes(changes.concat(changesAfter));
+      // Put the cursor between the title or parenthesis.
+      return {
+        changes: changeSet,
+        range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0)),
+      };
+    });
+    if (changes.changes.empty) {
+      return false;
     }
-    // Add the link markup.
-    changes.push({ from, insert: '[' }, { from: to, insert: ']()' });
-    const changeSet = state.changes(changes.concat(changesAfter));
-    // Put the cursor between the parenthesis.
-    return { changes: changeSet, range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset) };
-  });
-  if (changes.changes.empty) {
-    return false;
-  }
 
-  dispatch(state.update(changes, { userEvent: 'format.link.add', scrollIntoView: true }));
-  return true;
-};
+    dispatch(state.update(changes, { userEvent: 'format.link.add', scrollIntoView: true }));
+    return true;
+  };
 
 //
 // Lists
@@ -987,7 +998,7 @@ export const toggleCodeblock: StateCommand = (target) => {
 
 export type FormattingOptions = {};
 
-export const formatting = (options: FormattingOptions = {}): Extension => {
+export const formattingKeymap = (options: FormattingOptions = {}): Extension => {
   return [
     keymap.of([
       {
@@ -1052,7 +1063,7 @@ export const getFormatting = (state: EditorState): Formatting => {
   const inline: (boolean | null)[] = [null, null, null, null];
   let link: boolean = false;
   let blockQuote: boolean | null = null;
-  // False indicates mixed list styles
+  // False indicates mixed list styles.
   let listStyle: Formatting['listStyle'] | null | false = null;
 
   // Track block context for list/blockquote handling.
@@ -1211,16 +1222,18 @@ export const getFormatting = (state: EditorState): Formatting => {
 };
 
 /**
- * Hook computes the current formatting state.
+ * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (): [Formatting | null, Extension] => {
-  const [state, setState] = useState<Formatting | null>(null);
+export const useFormattingState = (): [Formatting | undefined, Extension] => {
+  const [state, setState, stateRef] = useStateRef<Formatting>();
   const observer = useMemo(
     () =>
       EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
           const newState = getFormatting(update.state);
-          if (!state || !compareFormatting(state, newState)) {
+          if (!stateRef.current || !formattingEquals(stateRef.current, newState)) {
+            // TODO(burdon): Error on first click on toolbar.
+            //  Warning: React has detected a change in the order of Hooks called by ForwardRef. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks
             setState(newState);
           }
         }

package/src/extensions/markdown/image.ts

@@ -61,6 +61,7 @@ const buildDecorations = (from: number, to: number, state: EditorState) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
+          // TODO(burdon): Doesn't load if scrolling with mouse.
           preloadImage(url);
           decorations.push(
             Decoration.replace({
@@ -96,3 +97,9 @@ class ImageWidget extends WidgetType {
     return img;
   }
 }
+
+export type ImageUploadOptions = {
+  onSelect: () => { url: string };
+};
+
+export const imageUpload = (options: ImageOptions = {}) => {};