diff --git a/common/package.json b/common/package.json index 47866e98..c324379f 100644 --- a/common/package.json +++ b/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" diff --git a/common/tsconfig.json b/common/tsconfig.json index a341afb8..62a5c745 100644 --- a/common/tsconfig.json +++ b/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"] } diff --git a/common/util/parse.ts b/common/util/parse.ts index dcc2c357..4fac3225 100644 --- a/common/util/parse.ts +++ b/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) { diff --git a/common/util/tiptap-tweet-type.ts b/common/util/tiptap-tweet-type.ts new file mode 100644 index 00000000..dd7a4608 --- /dev/null +++ b/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 }) { + return ['tiptap-tweet', mergeAttributes(props.HTMLAttributes)] + }, +} + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +export default Node.create(TiptapTweetNode) diff --git a/common/util/tiptap-tweet.ts b/common/util/tiptap-tweet.ts deleted file mode 100644 index 6e44fa49..00000000 --- a/common/util/tiptap-tweet.ts +++ /dev/null @@ -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({ - 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) - }, -}) diff --git a/web/components/editor.tsx b/web/components/editor.tsx index 1f4b970a..0807faf8 100644 --- a/web/components/editor.tsx +++ b/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' diff --git a/web/components/editor/tiptap-tweet.tsx b/web/components/editor/tiptap-tweet.tsx new file mode 100644 index 00000000..99106c43 --- /dev/null +++ b/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({ + ...TiptapTweetNode, + addNodeView() { + return ReactNodeViewRenderer(WrappedTwitterTweetEmbed) + }, +}) diff --git a/common/util/tweet-embed.tsx b/web/components/editor/tweet-embed.tsx similarity index 100% rename from common/util/tweet-embed.tsx rename to web/components/editor/tweet-embed.tsx diff --git a/web/package.json b/web/package.json index 4fba3359..a008026b 100644 --- a/web/package.json +++ b/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" },