x-star-editor 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) XYD Tech Team tech@xinyoudui.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+# x-star-editor
+
+[![NPM version](https://img.shields.io/npm/v/x-star-editor.svg?style=flat)](https://npmjs.org/package/x-star-editor)
+[![NPM downloads](http://img.shields.io/npm/dm/x-star-editor.svg?style=flat)](https://npmjs.org/package/x-star-editor)
+
+An editor developed by turingstar
+
+## Usage
+
+TODO
+
+## Options
+
+TODO
+
+## Development
+
+```bash
+# install dependencies
+$ yarn install
+
+# develop library by docs demo
+$ yarn start
+
+# build library source code
+$ yarn run build
+
+# build library source code in watch mode
+$ yarn run build:watch
+
+# build docs
+$ yarn run docs:build
+
+# check your project for potential problems
+$ yarn run doctor
+```
+
+## LICENSE
+
+MIT

package/dist/XStarEditor/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { XStarMdEditorProps } from '../XStarMdEditor';
+import type { XStarMdViewerProps } from '../XStarMdViewer';
+export interface XStarMDProps {
+    height?: React.CSSProperties['height'];
+    initialValue?: string;
+    editorProps?: Omit<XStarMdEditorProps, 'initialValue' | 'onChange'>;
+    viewerProps?: Omit<XStarMdViewerProps, 'value'>;
+    onChange?: (value: string) => void;
+}
+declare const XStarEditor: ({ height, initialValue, editorProps, viewerProps, onChange, }: XStarMDProps) => React.JSX.Element;
+export default XStarEditor;

package/dist/XStarEditor/index.js

@@ -0,0 +1,114 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames/bind';
+import React, { useEffect, useRef, useState } from 'react';
+import XStarMdEditor from "../XStarMdEditor";
+import XStarMdViewer from "../XStarMdViewer";
+import styles from "./index.module.css";
+var cx = classNames.bind(styles);
+var XStarEditor = function XStarEditor(_ref) {
+  var height = _ref.height,
+    initialValue = _ref.initialValue,
+    editorProps = _ref.editorProps,
+    viewerProps = _ref.viewerProps,
+    _onChange = _ref.onChange;
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var editorRef = useRef(null);
+  var viewerRef = useRef(null);
+  useEffect(function () {
+    var _editorRef$current, _viewerRef$current;
+    var editor = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getContainer();
+    var viewer = (_viewerRef$current = viewerRef.current) === null || _viewerRef$current === void 0 ? void 0 : _viewerRef$current.getContainer();
+
+    /**
+     * 获取一个父元素的子元素到父元素顶部的距离
+     *
+     * @param element 父元素
+     * @param index 是否只考虑有 `index` 属性的子元素
+     * @returns 子元素到父元素顶部的距离
+     */
+    var getOffsetTops = function getOffsetTops(element, index) {
+      var offsetTops = [0];
+      for (var i = 0; i < element.children.length; i++) {
+        var child = element.children[i];
+        if (child instanceof HTMLElement && (!index || child.hasAttribute('index'))) {
+          offsetTops.push(child.offsetTop);
+        }
+      }
+      offsetTops.push(element.scrollHeight);
+      return offsetTops;
+    };
+    var listener = function listener(e) {
+      if (!editor || !viewer) {
+        return;
+      }
+      var _ref2 = e.currentTarget === editor ? [editor, viewer] : [viewer, editor],
+        _ref3 = _slicedToArray(_ref2, 2),
+        fromElement = _ref3[0],
+        toElement = _ref3[1];
+      var fromOffsetTops = getOffsetTops(fromElement, fromElement === editor);
+      var toOffsetTops = getOffsetTops(toElement, toElement === editor);
+      for (var i = 0; i < fromOffsetTops.length - 1; i++) {
+        if (fromOffsetTops[i] <= fromElement.scrollTop && fromElement.scrollTop < fromOffsetTops[i + 1]) {
+          toElement.scrollTop = (fromElement.scrollTop - fromOffsetTops[i]) / (fromOffsetTops[i + 1] - fromOffsetTops[i]) * (toOffsetTops[i + 1] - toOffsetTops[i]) + toOffsetTops[i];
+          break;
+        }
+      }
+    };
+    editor === null || editor === void 0 ? void 0 : editor.addEventListener('scroll', listener, {
+      capture: true,
+      passive: true
+    });
+    viewer === null || viewer === void 0 ? void 0 : viewer.addEventListener('scroll', listener, {
+      capture: true,
+      passive: true
+    });
+    return function () {
+      editor === null || editor === void 0 ? void 0 : editor.removeEventListener('scroll', listener, {
+        capture: true
+      });
+      viewer === null || viewer === void 0 ? void 0 : viewer.removeEventListener('scroll', listener, {
+        capture: true
+      });
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx('container')
+  }, /*#__PURE__*/React.createElement(XStarMdEditor, _extends({
+    ref: editorRef
+  }, editorProps, {
+    className: cx('editor', editorProps === null || editorProps === void 0 ? void 0 : editorProps.className),
+    style: _objectSpread({
+      height: height
+    }, editorProps === null || editorProps === void 0 ? void 0 : editorProps.style),
+    toolbarClassName: cx('toolbar', editorProps === null || editorProps === void 0 ? void 0 : editorProps.toolbarClassName),
+    initialValue: initialValue,
+    onChange: function onChange(value) {
+      setValue(value);
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
+    }
+  })), /*#__PURE__*/React.createElement(XStarMdViewer, _extends({
+    ref: viewerRef
+  }, viewerProps, {
+    className: cx('viewer', viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.className),
+    style: _objectSpread({
+      height: height
+    }, viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.style),
+    value: value
+  })));
+};
+export default XStarEditor;

package/dist/XStarEditor/index.module.css

@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.editor {
+  flex: 1;
+  border-bottom-right-radius: 0;
+}
+
+.viewer {
+  flex: 1;
+  border-radius: 0;
+  border-bottom-right-radius: 0.2em;
+}
+
+.toolbar {
+  width: 100%;
+}

package/dist/XStarMdEditor/index.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ToolbarItem } from '../components/Toolbar';
+import '../styles/markdown.css';
+import type { Executor, KeyboardEventHandler } from '../utils/handler';
+interface EditorOptions {
+    toolbarItemMap: Partial<Record<string, ToolbarItem>>;
+    toolbarItems: (string | ToolbarItem)[][];
+    keyboardEventHandlers: KeyboardEventHandler[];
+}
+export interface XStarMdEditorPlugin {
+    (ctx: EditorOptions): void;
+}
+export interface XStarMdEditorHandle {
+    exec: Executor;
+    getContainer: () => HTMLDivElement | null;
+}
+export interface XStarMdEditorProps {
+    className?: string;
+    style?: React.CSSProperties;
+    toolbarClassName?: string;
+    toolbarStyle?: React.CSSProperties;
+    initialValue?: string;
+    plugins?: XStarMdEditorPlugin[];
+    onChange?: (value: string) => void;
+    onInsertFile?: (file: File, options: {
+        description: string;
+        image: boolean;
+    }) => void;
+}
+declare const XStarMdEditor: React.ForwardRefExoticComponent<XStarMdEditorProps & React.RefAttributes<XStarMdEditorHandle>>;
+export default XStarMdEditor;

package/dist/XStarMdEditor/index.js

@@ -0,0 +1,263 @@
+import classNames from 'classnames/bind';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import Toolbar, { getDefaultToolbarItemMap, getDefaultToolbarItems } from "../components/Toolbar";
+import "../styles/markdown.css";
+import { createSelection, getRange, useContainer } from "../utils/container";
+import { composeHandlers, getDefaultKeyboardEventHandlers } from "../utils/handler";
+import { useHistory } from "../utils/history";
+import styles from "./index.module.css";
+var cx = classNames.bind(styles);
+var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    toolbarClassName = _ref.toolbarClassName,
+    toolbarStyle = _ref.toolbarStyle,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
+    plugins = _ref.plugins,
+    onChange = _ref.onChange,
+    onInsertFile = _ref.onInsertFile;
+  var container = useContainer();
+  var _useHistory = useHistory(initialValue),
+    sourceCode = _useHistory.sourceCode,
+    selection = _useHistory.selection,
+    dispatch = _useHistory.dispatch;
+  var initialized = useRef(false);
+  var onChangeLatest = useRef(onChange);
+  onChangeLatest.current = onChange;
+  var onInsertFileLatest = useRef(onInsertFile);
+  onInsertFileLatest.current = onInsertFile;
+
+  // 将文本同步到容器
+  useEffect(function () {
+    container.setText(sourceCode);
+    if (initialized.current) {
+      var _onChangeLatest$curre;
+      (_onChangeLatest$curre = onChangeLatest.current) === null || _onChangeLatest$curre === void 0 ? void 0 : _onChangeLatest$curre.call(onChangeLatest, sourceCode);
+    }
+  }, [sourceCode]);
+
+  // 将选区同步到容器
+  useEffect(function () {
+    if (initialized.current) {
+      container.setSelection(selection);
+    }
+  }, [selection]);
+  useEffect(function () {
+    initialized.current = true;
+    return function () {
+      initialized.current = false;
+    };
+  }, []);
+  var sourceCodeLatest = useRef(sourceCode);
+  sourceCodeLatest.current = sourceCode;
+
+  /**
+   * 失焦时的选区
+   */
+  var blurSelection = useRef();
+
+  /**
+   * 获取选区，如果焦点不在容器内，则返回失焦时的选区
+   *
+   * @returns 选区
+   */
+  var getSelection = function getSelection() {
+    var _blurSelection$curren;
+    var selection = container.getSelection();
+    return selection.anchorOffset === -1 || selection.focusOffset === -1 ? (_blurSelection$curren = blurSelection.current) !== null && _blurSelection$curren !== void 0 ? _blurSelection$curren : createSelection(sourceCodeLatest.current.length) : selection;
+  };
+  var exec = useRef(function (handler) {
+    return handler({
+      sourceCode: sourceCodeLatest.current,
+      selection: getSelection(),
+      dispatch: dispatch
+    });
+  }).current;
+  useImperativeHandle(ref, function () {
+    return {
+      exec: exec,
+      getContainer: function getContainer() {
+        return container.ref.current;
+      }
+    };
+  }, []);
+  var clipboardEventHandler = function clipboardEventHandler(e) {
+    var selection = getSelection();
+    var _getRange = getRange(selection),
+      startOffset = _getRange.startOffset,
+      endOffset = _getRange.endOffset;
+    switch (e.type) {
+      case 'copy':
+      case 'cut':
+        {
+          e.preventDefault();
+          if (startOffset < endOffset) {
+            e.clipboardData.setData('text/plain', sourceCodeLatest.current.slice(startOffset, endOffset));
+            if (e.type === 'cut') {
+              dispatch({
+                type: 'delete',
+                selection: selection
+              });
+            }
+          }
+          break;
+        }
+      case 'paste':
+        {
+          e.preventDefault();
+          if (e.clipboardData.types.includes('text/plain')) {
+            dispatch({
+              type: 'insert',
+              payload: {
+                text: e.clipboardData.getData('text/plain')
+              },
+              selection: selection
+            });
+          } else if (e.clipboardData.types.includes('Files')) {
+            var _onInsertFileLatest$c;
+            var _file = e.clipboardData.files[0];
+            (_onInsertFileLatest$c = onInsertFileLatest.current) === null || _onInsertFileLatest$c === void 0 ? void 0 : _onInsertFileLatest$c.call(onInsertFileLatest, _file, {
+              description: _file.name,
+              image: _file.type.startsWith('image/')
+            });
+          }
+          break;
+        }
+    }
+  };
+
+  /**
+   * 开始组合时的选区
+   */
+  var compositionStartSelection = useRef();
+  var compositionEventHandler = function compositionEventHandler(e) {
+    switch (e.type) {
+      case 'compositionend':
+        {
+          if (compositionStartSelection.current) {
+            dispatch({
+              type: 'insert',
+              payload: {
+                text: e.data
+              },
+              selection: compositionStartSelection.current
+            });
+            setTimeout(function () {
+              return compositionStartSelection.current = undefined;
+            });
+          }
+          break;
+        }
+      case 'compositionstart':
+        {
+          compositionStartSelection.current = getSelection();
+          break;
+        }
+    }
+  };
+  var dragEventHandler = function dragEventHandler(e) {
+    switch (e.type) {
+      case 'drop':
+        {
+          var _selection = getSelection();
+          setTimeout(function () {
+            container.normalize();
+            dispatch({
+              type: 'set',
+              payload: {
+                sourceCode: container.getText(),
+                selection: getSelection()
+              },
+              selection: _selection
+            });
+          });
+          break;
+        }
+    }
+  };
+  var focusEventHandler = function focusEventHandler(e) {
+    switch (e.type) {
+      case 'blur':
+        {
+          blurSelection.current = getSelection();
+          setTimeout(function () {
+            compositionStartSelection.current = undefined;
+            container.setText(sourceCodeLatest.current);
+          });
+          break;
+        }
+    }
+  };
+  var formEventHandler = function formEventHandler(e) {
+    if (compositionStartSelection.current) {
+      return;
+    }
+    switch (e.type) {
+      case 'beforeinput':
+        {
+          e.preventDefault();
+          var _ref2 = e,
+            data = _ref2.data;
+          if (data) {
+            dispatch({
+              type: 'insert',
+              payload: {
+                text: data
+              },
+              selection: getSelection()
+            });
+          }
+          break;
+        }
+    }
+  };
+  var _composeHandlers = composeHandlers(plugins)({
+      toolbarItemMap: getDefaultToolbarItemMap(onInsertFile),
+      toolbarItems: getDefaultToolbarItems(),
+      keyboardEventHandlers: getDefaultKeyboardEventHandlers()
+    }),
+    toolbarItemMap = _composeHandlers.toolbarItemMap,
+    toolbarItems = _composeHandlers.toolbarItems,
+    keyboardEventHandlers = _composeHandlers.keyboardEventHandlers;
+  var keyboardEventHandler = function keyboardEventHandler(e) {
+    if (compositionStartSelection.current) {
+      return;
+    }
+    switch (e.type) {
+      case 'keydown':
+        {
+          composeHandlers(keyboardEventHandlers)({
+            sourceCode: sourceCodeLatest.current,
+            selection: getSelection(),
+            dispatch: dispatch,
+            e: e
+          });
+          break;
+        }
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Toolbar, {
+    className: cx(toolbarClassName),
+    style: toolbarStyle,
+    itemMap: toolbarItemMap,
+    items: toolbarItems,
+    exec: exec
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: container.ref,
+    className: cx('container', className),
+    style: style,
+    contentEditable: true,
+    onBeforeInput: formEventHandler,
+    onBlur: focusEventHandler,
+    onCompositionEnd: compositionEventHandler,
+    onCompositionStart: compositionEventHandler,
+    onCopy: clipboardEventHandler,
+    onCut: clipboardEventHandler,
+    onDrop: dragEventHandler,
+    onKeyDown: keyboardEventHandler,
+    onPaste: clipboardEventHandler
+  }));
+});
+XStarMdEditor.displayName = 'XStarMdEditor';
+export default XStarMdEditor;

package/dist/XStarMdEditor/index.module.css

@@ -0,0 +1,13 @@
+.container {
+  position: relative;
+  margin: 0 -1px;
+  line-height: 1.6em;
+  white-space: break-spaces;
+  color: #000000d9;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-bottom-right-radius: 0.2em;
+  border-bottom-left-radius: 0.2em;
+  outline: none;
+  overflow: auto;
+}

package/dist/XStarMdViewer/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import '../styles/katex.css';
+import '../styles/prism.css';
+import type { ViewerOptions } from '../utils/markdown';
+export interface XStarMdViewerPlugin {
+    (ctx: ViewerOptions): void;
+}
+export interface XStarMdViewerHandle {
+    getContainer: () => HTMLDivElement | null;
+}
+export interface XStarMdViewerProps {
+    className?: string;
+    style?: React.CSSProperties;
+    value?: string;
+    plugins?: XStarMdViewerPlugin[];
+}
+declare const XStarMdViewer: React.ForwardRefExoticComponent<XStarMdViewerProps & React.RefAttributes<XStarMdViewerHandle>>;
+export default XStarMdViewer;

package/dist/XStarMdViewer/index.js

@@ -0,0 +1,33 @@
+import classNames from 'classnames/bind';
+import React, { useImperativeHandle, useRef } from 'react';
+import "../styles/katex.css";
+import "../styles/prism.css";
+import { composeHandlers } from "../utils/handler";
+import { viewerRender } from "../utils/markdown";
+import styles from "./index.module.css";
+var cx = classNames.bind(styles);
+var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    plugins = _ref.plugins;
+  var container = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      getContainer: function getContainer() {
+        return container.current;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: container,
+    className: cx('x-star-md-viewer', 'container', className),
+    style: style
+  }, viewerRender(value, composeHandlers(plugins)({
+    customHTMLElements: {},
+    customBlocks: {}
+  })));
+});
+XStarMdViewer.displayName = 'XStarMdViewer';
+export default XStarMdViewer;

package/dist/XStarMdViewer/index.module.css

@@ -0,0 +1,10 @@
+.container {
+  position: relative;
+  margin: 0 -1px;
+  padding: 0 1em;
+  color: #000000d9;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 0.2em;
+  overflow: auto;
+}

package/dist/components/FileInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface FileInputProps {
+    onCancel: () => void;
+    onOk: (data: ({
+        type: 'file';
+        file: File;
+    } | {
+        type: 'url';
+        url: string;
+    }) & {
+        description: string;
+    }) => void;
+}
+declare const FileInput: ({ onCancel, onOk }: FileInputProps) => React.JSX.Element;
+export default FileInput;