open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Render contracts as half-size cards

Browse Source
This commit is contained in:
Austin Chen 2022-09-10 19:22:47 -07:00
parent 1b311a7198
commit 3bfbc6a6ec
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/components/editor/mention.tsx
View File

@ -14,9 +14,13 @@ const MentionComponent = (props: any) => {
const contract = useContract(props.node.attrs.id) const contract = useContract(props.node.attrs.id)
return ( return (
<NodeViewWrapper className={clsx(name, 'not-prose text-indigo-700')}> <NodeViewWrapper className={clsx(name, 'not-prose')}>
{/* <Linkify text={'@' + props.node.attrs.label} /> */} {contract && (
{contract && <ContractCard contract={contract} />} <ContractCard
contract={contract}
className="my-2 w-full border border-gray-100"
/>
)}
</NodeViewWrapper> </NodeViewWrapper>
) )
} }
@ -30,5 +34,8 @@ export const DisplayMention = Mention.extend({
parseHTML: () => [{ tag: name }], parseHTML: () => [{ tag: name }],
renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)], renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)],
addNodeView: () => addNodeView: () =>
ReactNodeViewRenderer(MentionComponent, { className: 'inline-block' }), ReactNodeViewRenderer(MentionComponent, {
// On desktop, render cards below half-width so you can stack two
className: 'inline-block sm:w-[calc(50%-1rem)] sm:mr-1',
}),
}) })