Rejigger config so tsx is only in web/

common/package.json

@@ -12,8 +12,7 @@
     "@tiptap/extension-link": "2.0.0-beta.43",
     "@tiptap/extension-mention": "2.0.0-beta.102",
     "@tiptap/starter-kit": "2.0.0-beta.190",
-    "lodash": "4.17.21",
-    "react-twitter-embed": "4.0.4"
+    "lodash": "4.17.21"
   },
   "devDependencies": {
     "@types/lodash": "4.14.178"

common/tsconfig.json

@@ -8,8 +8,7 @@
     "outDir": "lib",
     "sourceMap": true,
     "strict": true,
-    "target": "es2017",
-    "jsx": "preserve"
+    "target": "es2017"
   },
-  "include": ["**/*.ts", "util/tweet-embed.tsx"]
+  "include": ["**/*.ts"]
 }

common/util/parse.ts

@@ -22,7 +22,7 @@ import { Image } from '@tiptap/extension-image'
 import { Link } from '@tiptap/extension-link'
 import { Mention } from '@tiptap/extension-mention'
 import Iframe from './tiptap-iframe'
-import TiptapTweet from './tiptap-tweet'
+import TiptapTweet from './tiptap-tweet-type'
 import { uniq } from 'lodash'
 
 export function parseTags(text: string) {

common/util/tiptap-tweet-type.ts

@@ -0,0 +1,37 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export interface TweetOptions {
+  tweetId: string
+}
+
+// This export excludes addNodeView, since that require tsx,
+// which common/ does not support transpilation of.
+export const TiptapTweetNode = {
+  name: 'tiptapTweet',
+  group: 'block',
+  atom: true,
+
+  addAttributes() {
+    return {
+      tweetId: {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'tiptap-tweet',
+      },
+    ]
+  },
+
+  renderHTML(props: { HTMLAttributes: Record<string, any> }) {
+    return ['tiptap-tweet', mergeAttributes(props.HTMLAttributes)]
+  },
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export default Node.create<TweetOptions>(TiptapTweetNode)

common/util/tiptap-tweet.ts

@@ -1,37 +0,0 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-import { ReactNodeViewRenderer } from '@tiptap/react'
-import WrappedTwitterTweetEmbed from './tweet-embed'
-
-export interface TweetOptions {
-  tweetId: string
-}
-
-export default Node.create<TweetOptions>({
-  name: 'tiptapTweet',
-  group: 'block',
-  atom: true,
-
-  addAttributes() {
-    return {
-      tweetId: {
-        default: null,
-      },
-    }
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'tiptap-tweet',
-      },
-    ]
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['tiptap-tweet', mergeAttributes(HTMLAttributes)]
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(WrappedTwitterTweetEmbed)
-  },
-})

web/components/editor.tsx

@@ -21,7 +21,7 @@ import { useUsers } from 'web/hooks/use-users'
 import { mentionSuggestion } from './editor/mention-suggestion'
 import { DisplayMention } from './editor/mention'
 import Iframe from 'common/util/tiptap-iframe'
-import TiptapTweet from 'common/util/tiptap-tweet'
+import TiptapTweet from './editor/tiptap-tweet'
 import { CodeIcon, PhotographIcon } from '@heroicons/react/solid'
 import { EmbedModal } from './editor/embed-modal'
 

web/components/editor/tiptap-tweet.tsx

@@ -0,0 +1,13 @@
+import { Node } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import { TiptapTweetNode } from 'common/util/tiptap-tweet-type'
+import WrappedTwitterTweetEmbed from './tweet-embed'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export default Node.create<TweetOptions>({
+  ...TiptapTweetNode,
+  addNodeView() {
+    return ReactNodeViewRenderer(WrappedTwitterTweetEmbed)
+  },
+})

web/package.json

@@ -53,6 +53,7 @@
     "react-hot-toast": "2.2.0",
     "react-instantsearch-hooks-web": "6.24.1",
     "react-query": "3.39.0",
+    "react-twitter-embed": "4.0.4",
     "string-similarity": "^4.0.4",
     "tippy.js": "6.3.7"
   },