feat: mentions & url preview
This commit is contained in:
zerosoul
@@ -0,0 +1,26 @@
|
||||
// import React from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import Tippy from "@tippyjs/react";
|
||||
import Profile from "../Profile";
|
||||
import styled from "styled-components";
|
||||
const Styled = styled.span`
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
color: #1fe1f9;
|
||||
`;
|
||||
export default function Mention({ uid }) {
|
||||
const contactsData = useSelector((store) => store.contacts.byId);
|
||||
const user = contactsData[uid];
|
||||
if (!user) return null;
|
||||
return (
|
||||
<Tippy
|
||||
duration={0}
|
||||
interactive
|
||||
placement="top"
|
||||
trigger="click"
|
||||
content={<Profile uid={uid} type="card" />}
|
||||
>
|
||||
<Styled>{`@${user.name}`}</Styled>
|
||||
</Tippy>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
const StyledCompact = styled.a`
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d4d4d4;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
padding: 12px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 380px;
|
||||
.favicon {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
img {
|
||||
/* width: 100%;
|
||||
height: 100%; */
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
.desc {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #616161;
|
||||
}
|
||||
.link {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 18px;
|
||||
color: #616161;
|
||||
}
|
||||
.dots {
|
||||
width: 288px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
`;
|
||||
const StyledDetails = styled.a`
|
||||
width: 380px;
|
||||
padding: 12px;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d4d4d4;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #06aed4;
|
||||
}
|
||||
.desc {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #616161;
|
||||
margin-bottom: 8px;
|
||||
width: 356px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function URLPreview({ url = "" }) {
|
||||
const [data, setData] = useState({
|
||||
favicon:
|
||||
"https://fanyi-cdn.cdn.bcebos.com/static/translation/img/favicon/favicon-32x32_ca689c3.png",
|
||||
title: "Preview Hunt",
|
||||
description:
|
||||
"A tool to preview and prepare your Product Hunt,A tool to preview and prepare your Product Hunt...",
|
||||
ogImage:
|
||||
"https://pbs.twimg.com/media/FProPfYaMAIm6KL?format=png&name=900x900",
|
||||
});
|
||||
useEffect(() => {
|
||||
const getMetaData = async (url) => {
|
||||
// todo
|
||||
};
|
||||
getMetaData(url);
|
||||
}, [url]);
|
||||
|
||||
if (!url || !data) return null;
|
||||
const { favicon, title, description, ogImage } = data;
|
||||
return ogImage ? (
|
||||
<StyledDetails href={url} target="_blank">
|
||||
<h3 className="title">{title}</h3>
|
||||
<p className="desc dots">{description}</p>
|
||||
<div className="image">
|
||||
<img src={ogImage} alt="og image" />
|
||||
</div>
|
||||
</StyledDetails>
|
||||
) : (
|
||||
<StyledCompact href={url} target="_blank">
|
||||
<div className="favicon">
|
||||
<img src={favicon} alt="favicon" />
|
||||
</div>
|
||||
<div className="info">
|
||||
<h3 className="title">{title}</h3>
|
||||
<p className="desc dots">{description}</p>
|
||||
<span className="link dots">{url}</span>
|
||||
</div>
|
||||
</StyledCompact>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,15 @@
|
||||
import React from "react";
|
||||
import Linkify from "react-linkify";
|
||||
|
||||
// import * as linkfy from "linkifyjs";
|
||||
import Linkit from "react-linkify";
|
||||
|
||||
import dayjs from "dayjs";
|
||||
import Mention from "./Mention";
|
||||
import MrakdownRender from "../MrakdownRender";
|
||||
import { getDefaultSize } from "../../utils";
|
||||
import FileBox from "../FileBox";
|
||||
import URLPreview from "./URLPreview";
|
||||
import reactStringReplace from "react-string-replace";
|
||||
const renderContent = ({
|
||||
from_uid,
|
||||
created_at,
|
||||
@@ -19,7 +24,7 @@ const renderContent = ({
|
||||
case "text/plain":
|
||||
ctn = (
|
||||
<>
|
||||
<Linkify
|
||||
<Linkit
|
||||
componentDecorator={(decoratedHref, decoratedText, key) => (
|
||||
<React.Fragment key={key}>
|
||||
<a
|
||||
@@ -35,8 +40,18 @@ const renderContent = ({
|
||||
</React.Fragment>
|
||||
)}
|
||||
>
|
||||
{content}
|
||||
</Linkify>
|
||||
{reactStringReplace(
|
||||
content,
|
||||
/(\s{1}\@[1-9]+\s{1})/g,
|
||||
(match, idx) => {
|
||||
console.log("match", match);
|
||||
const uid = match.trim().slice(1);
|
||||
return <Mention key={idx} uid={uid} />;
|
||||
}
|
||||
)}
|
||||
{/* {content.replace(/\s{1}\@[1-9]+\s{1}/g,)} */}
|
||||
{/* {new RegExp(/\s{1}\@[1-9]+\s{1}/g).exec(content)} */}
|
||||
</Linkit>
|
||||
{edited && (
|
||||
<span
|
||||
className="edited"
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Mention(wtf) {
|
||||
console.log("mentions", wtf);
|
||||
return <div>Mention</div>;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// import React from 'react'
|
||||
import styled from "styled-components";
|
||||
const Styled = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
export default function StyledCombobox({ store }) {
|
||||
console.log("combox wtf", store.get.state());
|
||||
return <Styled>StyledCombobox</Styled>;
|
||||
}
|
||||
@@ -27,7 +27,7 @@ import Styled from "./styled";
|
||||
import ImageElement from "./ImageElement";
|
||||
import { CONFIG } from "./config";
|
||||
import Contact from "../Contact";
|
||||
|
||||
// import Mention from "./Mention";
|
||||
export const TEXT_EDITOR_PREFIX = "rustchat_text_editor";
|
||||
export const setEditorFocus = (edtr) => {
|
||||
console.log("focus", edtr);
|
||||
@@ -104,8 +104,27 @@ const Plugins = ({
|
||||
createSoftBreakPlugin(CONFIG.softBreak),
|
||||
createTrailingBlockPlugin(CONFIG.trailingBlock),
|
||||
createExitBreakPlugin(CONFIG.exitBreak),
|
||||
createComboboxPlugin({ key: "combobox" }),
|
||||
createMentionPlugin(),
|
||||
createComboboxPlugin(),
|
||||
createMentionPlugin({
|
||||
// component: Mention,
|
||||
// handlers: {
|
||||
// onKeyDown: ({ query }) => {
|
||||
// console.log("mention", query);
|
||||
// return true;
|
||||
// },
|
||||
// },
|
||||
options: {
|
||||
createMentionNode: (item) => {
|
||||
console.log("mention", item);
|
||||
const {
|
||||
text,
|
||||
data: { uid },
|
||||
} = item;
|
||||
return { value: `@${text}`, uid };
|
||||
},
|
||||
insertSpaceAfterMention: true,
|
||||
},
|
||||
}),
|
||||
],
|
||||
{
|
||||
components,
|
||||
@@ -116,6 +135,17 @@ const Plugins = ({
|
||||
async (val) => {
|
||||
console.log("tmps changed", val);
|
||||
const tmps = [];
|
||||
const getMixedText = (children) => {
|
||||
const mentions = [];
|
||||
const arr = children.map(({ type, text, uid }) => {
|
||||
if (type == "mention") {
|
||||
mentions.push(uid);
|
||||
return ` @${uid} `;
|
||||
}
|
||||
return text;
|
||||
});
|
||||
return { value: arr.join(""), mentions };
|
||||
};
|
||||
for await (const v of val) {
|
||||
if (v.type == "img") {
|
||||
// img
|
||||
@@ -123,30 +153,36 @@ const Plugins = ({
|
||||
const value = await resp.blob();
|
||||
tmps.push({ type: "image", value });
|
||||
} else {
|
||||
// text
|
||||
// p
|
||||
const { value, mentions } = getMixedText(v.children);
|
||||
const prev = tmps[tmps.length - 1];
|
||||
if (!prev) {
|
||||
tmps.push([{ type: "text", value: v.children[0].text }]);
|
||||
tmps.push([{ type: "text", value, mentions }]);
|
||||
} else {
|
||||
if (Array.isArray(prev)) {
|
||||
tmps[tmps.length - 1].push({
|
||||
type: "text",
|
||||
value: v.children[0].text,
|
||||
value,
|
||||
mentions,
|
||||
});
|
||||
} else {
|
||||
tmps.push([{ type: "text", value: v.children[0].text }]);
|
||||
tmps.push([{ type: "text", value, mentions }]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const arr = tmps.map((tmp) => {
|
||||
return Array.isArray(tmp)
|
||||
? { type: "text", value: tmp.map((t) => t.value).join("\n") }
|
||||
? {
|
||||
type: "text",
|
||||
value: tmp.map((t) => t.value).join("\n"),
|
||||
mentions: tmp.map((t) => t.mentions).flat(),
|
||||
}
|
||||
: tmp;
|
||||
});
|
||||
const msgs = arr.filter(({ value }) => !!value);
|
||||
setMsgs(msgs);
|
||||
console.log("tmps", val, msgs);
|
||||
console.log("tmps", val, tmps, msgs);
|
||||
},
|
||||
[msgs]
|
||||
);
|
||||
|
||||
@@ -75,7 +75,7 @@ function Send({
|
||||
const handleSendMessage = async (msgs = []) => {
|
||||
if (!msgs || msgs.length == 0 || !id) return;
|
||||
for await (const msg of msgs) {
|
||||
const { type: content_type, value: content } = msg;
|
||||
const { type: content_type, value: content, mentions = [] } = msg;
|
||||
if (replying_mid) {
|
||||
console.log("replying", replying_mid);
|
||||
await replyMessage({
|
||||
@@ -93,7 +93,7 @@ function Send({
|
||||
type: content_type,
|
||||
content,
|
||||
from_uid,
|
||||
properties: { local_id: new Date().getTime() },
|
||||
properties: { local_id: new Date().getTime(), mentions },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user