Embed markets using the "add markets" template

web/components/editor.tsx

@@ -24,12 +24,17 @@ 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 { CodeIcon, PhotographIcon } from '@heroicons/react/solid'
+import {
+  CodeIcon,
+  PhotographIcon,
+  PresentationChartLineIcon,
+} from '@heroicons/react/solid'
 import { Modal } from './layout/modal'
 import { Col } from './layout/col'
 import { Button } from './button'
 import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
+import { MarketModal } from './editor/market-modal'
 
 const proseClass = clsx(
   'prose prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none prose-quoteless leading-relaxed',
@@ -123,6 +128,7 @@ export function TextEditor(props: {
 }) {
   const { editor, upload } = props
   const [iframeOpen, setIframeOpen] = useState(false)
+  const [marketOpen, setMarketOpen] = useState(false)
 
   return (
     <>
@@ -157,16 +163,15 @@ export function TextEditor(props: {
         {/* Toolbar, with buttons for image and embeds */}
         <div className="absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2">
           <div className="flex items-center space-x-5">
-            <div className="flex items-center">
+            <div className="tooltip flex items-center" data-tip="Add image">
               <FileUploadButton
                 onFiles={upload.mutate}
                 className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
               >
                 <PhotographIcon className="h-5 w-5" aria-hidden="true" />
-                <span className="sr-only">Upload an image</span>
               </FileUploadButton>
             </div>
-            <div className="flex items-center">
+            <div className="tooltip flex items-center" data-tip="Add embed">
               <button
                 type="button"
                 onClick={() => setIframeOpen(true)}
@@ -178,7 +183,23 @@ export function TextEditor(props: {
                   setOpen={setIframeOpen}
                 />
                 <CodeIcon className="h-5 w-5" aria-hidden="true" />
-                <span className="sr-only">Embed an iframe</span>
+              </button>
+            </div>
+            <div className="tooltip flex items-center" data-tip="Add market">
+              <button
+                type="button"
+                onClick={() => setMarketOpen(true)}
+                className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
+              >
+                <MarketModal
+                  editor={editor}
+                  open={marketOpen}
+                  setOpen={setMarketOpen}
+                />
+                <PresentationChartLineIcon
+                  className="h-5 w-5"
+                  aria-hidden="true"
+                />
               </button>
             </div>
           </div>
@@ -269,7 +290,7 @@ const useUploadMutation = (editor: Editor | null) =>
     }
   )
 
-function RichContent(props: { content: JSONContent | string }) {
+export function RichContent(props: { content: JSONContent | string }) {
   const { content } = props
   const editor = useEditor({
     editorProps: { attributes: { class: proseClass } },

web/components/editor/market-modal.tsx

@@ -0,0 +1,93 @@
+import { Editor } from '@tiptap/react'
+import { Contract } from 'common/contract'
+import { useState } from 'react'
+import { Button } from '../button'
+import { ContractSearch } from '../contract-search'
+import { Col } from '../layout/col'
+import { Modal } from '../layout/modal'
+import { Row } from '../layout/row'
+import { LoadingIndicator } from '../loading-indicator'
+import { embedCode } from '../share-embed-button'
+
+export function MarketModal(props: {
+  editor: Editor | null
+  open: boolean
+  setOpen: (open: boolean) => void
+}) {
+  const { editor, open, setOpen } = props
+
+  const [contracts, setContracts] = useState<Contract[]>([])
+  const [loading, setLoading] = useState(false)
+
+  async function addContract(contract: Contract) {
+    if (contracts.map((c) => c.id).includes(contract.id)) {
+      setContracts(contracts.filter((c) => c.id !== contract.id))
+    } else setContracts([...contracts, contract])
+  }
+
+  async function doneAddingContracts() {
+    setLoading(true)
+    if (editor) {
+      const e = editor.chain()
+      for (const contract of contracts) {
+        console.log('embedding', embedCode(contract))
+        e.insertContent(embedCode(contract))
+      }
+      e.run()
+    }
+    setLoading(false)
+    setOpen(false)
+    setContracts([])
+  }
+
+  return (
+    <Modal open={open} setOpen={setOpen} className={'sm:p-0'} size={'lg'}>
+      <Col className={' w-full gap-4 rounded-md bg-white'}>
+        <Col className="p-8 pb-0">
+          <div className={'text-xl text-indigo-700'}>Embed a market</div>
+
+          <Col className={'w-full '}>
+            {!loading ? (
+              <Row className={'justify-end gap-4'}>
+                {contracts.length > 0 && (
+                  <Button onClick={doneAddingContracts} color={'indigo'}>
+                    Embed {contracts.length} question
+                    {contracts.length > 1 && 's'}
+                  </Button>
+                )}
+                <Button
+                  onClick={() => {
+                    setContracts([])
+                  }}
+                  color={'gray'}
+                >
+                  Cancel
+                </Button>
+              </Row>
+            ) : (
+              <Row className={'justify-center'}>
+                <LoadingIndicator />
+              </Row>
+            )}
+          </Col>
+        </Col>
+
+        <div className={'overflow-y-scroll sm:px-8'}>
+          <ContractSearch
+            hideOrderSelector={true}
+            onContractClick={addContract}
+            overrideGridClassName={
+              'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1'
+            }
+            showPlaceHolder={true}
+            cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
+            highlightOptions={{
+              contractIds: contracts.map((c) => c.id),
+              highlightClassName: '!bg-indigo-100 border-indigo-100 border-2',
+            }}
+          />
+        </div>
+      </Col>
+    </Modal>
+  )
+}

web/components/share-embed-button.tsx

@@ -9,13 +9,11 @@ import { copyToClipboard } from 'web/lib/util/copy'
 import { ToastClipboard } from 'web/components/toast-clipboard'
 import { track } from 'web/lib/service/analytics'
 
-function copyEmbedCode(contract: Contract) {
+export function embedCode(contract: Contract) {
   const title = contract.question
   const src = `https://${DOMAIN}/embed${contractPath(contract)}`
 
-  const embedCode = `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
+  return `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
-
-  copyToClipboard(embedCode)
 }
 
 export function ShareEmbedButton(props: {
@@ -29,7 +27,7 @@ export function ShareEmbedButton(props: {
       as="div"
       className="relative z-10 flex-shrink-0"
       onMouseUp={() => {
-        copyEmbedCode(contract)
+        copyToClipboard(embedCode(contract))
         track('copy embed code')
       }}
     >