Base Editor setup

Author: jlaprise

.flowconfig

@@ -1,11 +1,13 @@
 [ignore]
 .*/scripts/.*
 .*/build/.*
+.*/.idea/.*
 .*/__tests__/.*
 .*/dist/.*
 .*/npm/.*
 .*/.tempUserDataDir/.*
 .*/node_modules/.*
+.*/.storybook/.*
 
 [include]
 ./packages/

.gitignore

@@ -12,6 +12,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

babel.config.js

@@ -2,7 +2,7 @@ module.exports = (api) => {
   api.cache(true)
 
   return {
-    presets: ['@babel/preset-env', '@babel/preset-react'],
+    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
     plugins: [
       '@babel/plugin-proposal-object-rest-spread',
       '@babel/transform-runtime',

package.json

@@ -8,7 +8,6 @@
   "description": "Atlas shared component library",
   "license": "MIT",
   "dependencies": {
-    "@excalidraw/excalidraw": "^0.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/pro-regular-svg-icons": "^6.1.1",
@@ -35,6 +34,7 @@
     "@testing-library/user-event": "^13.5.0",
     "babel-plugin-macros": "^3.1.0",
     "eslint-config-react-app": "^7.0.1",
+    "flow-bin": "^0.177.0",
     "formik": "^2.2.9",
     "katex": "^0.15.3",
     "lexical": "^0.2.5",
@@ -56,7 +56,7 @@
   ],
   "scripts": {
     "start": "react-scripts start",
-    "build": "babel src -d dist --extensions \".js,.jsx,.ts,.tsx\" --ignore \"**/*.test.js\" --ignore \"**/*.stories.js\"",
+    "build": "cross-env BABEL_ENV=production babel src -d dist",
     "test": "react-scripts test",
     "release": "auto shipit",
     "clean": "rm -rf dist",
@@ -128,6 +128,16 @@
     "react-bootstrap": "^2.0.0",
     "react-dom": "^16.0.0 || ^17.0.0"
   },
+  "babel": {
+    "presets": [
+      [
+        "react-app",
+        {
+          "absoluteRuntime": false
+        }
+      ]
+    ]
+  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

src/components/Editor/Editor.stories.js

@@ -2,7 +2,7 @@ import React from 'react'
 import {Editor} from './index'
 
 export default {
-  title: 'Editor',
+  title: 'components/Editor',
   component: Editor,
   argTypes: {},
 }

src/components/index.js

@@ -1,7 +1,3 @@
-
-import * as yup from 'yup'
-import * as formik from 'formik'
-
 export * from './Button'
 export * from './ToggleButtonGroup'
 export * from './Modal'
@@ -25,33 +21,25 @@ export * from './CheckboxGroup'
 export * from './RadioGroup'
 export * from './Select'
 export * from './Toasts'
-// export * from './Form';
-// export * from './InputGroup';
-// export * from './Image';
-// export * from './ProgressBar';
-// export * from './Spinner';
-// export * from './Alert';
+export * from './Form';
+export * from './InputGroup';
+export * from './Image';
+export * from './ProgressBar';
+export * from './Spinner';
+export * from './Alert';
 
 export {
-  Form,
   Row,
   Col,
-  InputGroup,
   FormControl,
   Dropdown,
   DropdownButton,
-  Image,
   Container,
   Navbar,
   Nav,
   NavDropdown,
   Popover,
   OverlayTrigger,
-  ProgressBar,
-  Spinner,
-  Alert,
   ButtonToolbar,
   ButtonGroup,
 } from 'react-bootstrap'
-
-export { yup, formik }

src/editor/Editor.jsx

@@ -38,12 +38,11 @@ import PollPlugin from './plugins/PollPlugin'
 import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin'
 import TableCellResizer from './plugins/TableCellResizer'
 import ToolbarPlugin from './plugins/ToolbarPlugin'
-import TwitterPlugin from './plugins/TwitterPlugin'
 import YouTubePlugin from './plugins/YouTubePlugin'
 import ContentEditable from './ui/ContentEditable'
 import Placeholder from './ui/Placeholder'
 
-export default function Editor(): React$Node {
+export default function Editor() {
   const {historyState} = useSharedHistoryContext();
 
   const text = 'Write something...';
@@ -85,7 +84,6 @@ export default function Editor(): React$Node {
             <ImagesPlugin />
             <LinkPlugin />
             <PollPlugin />
-            <TwitterPlugin />
             <YouTubePlugin />
             <ClickableLinkPlugin />
           </>

src/editor/Settings.jsx

@@ -19,14 +19,11 @@ import {HeadingNode, QuoteNode} from '@lexical/rich-text'
 import {TableCellNode, TableNode, TableRowNode} from '@lexical/table'
 
 import {EmojiNode} from './EmojiNode'
-import {EquationNode} from './EquationNode'
-import {ExcalidrawNode} from './ExcalidrawNode'
 import {ImageNode} from './ImageNode'
 import {KeywordNode} from './KeywordNode'
 import {MentionNode} from './MentionNode'
 import {PollNode} from './PollNode'
 import {StickyNode} from './StickyNode'
-import {TweetNode} from './TweetNode.jsx'
 import {TypeaheadNode} from './TypeaheadNode'
 import {YouTubeNode} from './YouTubeNode.jsx'
 
@@ -49,12 +46,9 @@ const PlaygroundNodes: Array<Class<LexicalNode>> = [
   ImageNode,
   MentionNode,
   EmojiNode,
-  ExcalidrawNode,
-  EquationNode,
   TypeaheadNode,
   KeywordNode,
   HorizontalRuleNode,
-  TweetNode,
   YouTubeNode,
 ];
 

src/editor/nodes/PlaygroundNodes.js

@@ -72,7 +72,6 @@ import LinkPreview from '../ui/LinkPreview'
 import TextInput from '../ui/TextInput'
 import {INSERT_EQUATION_COMMAND} from './EquationsPlugin'
 import {INSERT_POLL_COMMAND} from './PollPlugin'
-import {INSERT_TWEET_COMMAND} from './TwitterPlugin'
 import {INSERT_YOUTUBE_COMMAND} from './YouTubePlugin'
 
 const supportedBlockTypes = new Set([
@@ -481,42 +480,6 @@ function InsertPollDialog({
   );
 }
 
-const VALID_TWITTER_URL = /twitter.com\/[0-9a-zA-Z]{1,20}\/status\/([0-9]*)/g;
-
-function InsertTweetDialog({
-  activeEditor,
-  onClose,
-}: {
-  activeEditor: LexicalEditor,
-  onClose: () => void,
-}): React$Node {
-  const [text, setText] = useState('');
-
-  const onClick = () => {
-    const tweetID = text.split('status/')?.[1]?.split('?')?.[0];
-    activeEditor.dispatchCommand(INSERT_TWEET_COMMAND, tweetID);
-    onClose();
-  };
-
-  const isDisabled = text === '' || !text.match(VALID_TWITTER_URL);
-
-  return (
-    <>
-      <TextInput
-        label="Tweet URL"
-        placeholder="i.e. https://twitter.com/jack/status/20"
-        onChange={setText}
-        value={text}
-      />
-      <div className="ToolbarPlugin__dialogActions">
-        <Button disabled={isDisabled} onClick={onClick}>
-          Confirm
-        </Button>
-      </div>
-    </>
-  );
-}
-
 // Taken from https://stackoverflow.com/a/9102270
 const YOUTUBE_ID_PARSER =
   /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;