feat: mentions & url preview
This commit is contained in:
zerosoul
+21
-13
@@ -4,7 +4,7 @@
|
||||
"private": true,
|
||||
"homepage": "http://privoce.rustchat.com",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.17.8",
|
||||
"@babel/core": "^7.17.9",
|
||||
"@metamask/onboarding": "^1.0.1",
|
||||
"@microsoft/fetch-event-source": "^2.0.1",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
|
||||
@@ -14,7 +14,7 @@
|
||||
"@toast-ui/editor": "^3.1.3",
|
||||
"@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
|
||||
"@toast-ui/react-editor": "^3.1.3",
|
||||
"@udecode/plate": "^10.5.1",
|
||||
"@udecode/plate": "^10.6.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^0.26.1",
|
||||
"babel-loader": "^8.2.4",
|
||||
@@ -35,14 +35,18 @@
|
||||
"firebase": "^9.6.10",
|
||||
"fs-extra": "^10.0.1",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"interactjs": "^1.10.11",
|
||||
"linkify-it": "^3.0.3",
|
||||
"linkify-plugin-mention": "^3.0.4",
|
||||
"linkifyjs": "^3.0.5",
|
||||
"localforage": "^1.10.0",
|
||||
"masonry-layout": "^4.2.2",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"re-resizable": "^6.9.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dev-utils": "^12.0.0",
|
||||
"react-dnd": "^15.1.2",
|
||||
"react-dnd-html5-backend": "^15.1.3",
|
||||
"react-dnd": "15.1.2",
|
||||
"react-dnd-html5-backend": "15.1.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-google-login": "^5.2.2",
|
||||
"react-helmet": "^6.1.0",
|
||||
@@ -51,27 +55,28 @@
|
||||
"react-linkify": "^1.0.0-alpha",
|
||||
"react-markdown": "^8.0.2",
|
||||
"react-pdf": "^5.7.2",
|
||||
"react-redux": "^7.2.7",
|
||||
"react-redux": "^7.2.8",
|
||||
"react-refresh": "0.11.0",
|
||||
"react-router-dom": "6",
|
||||
"react-string-replace": "^1.0.0",
|
||||
"react-textarea-autosize": "^8.3.3",
|
||||
"react-window": "^1.8.6",
|
||||
"resolve": "^1.22.0",
|
||||
"rooks": "^5.11.0",
|
||||
"semver": "^7.3.5",
|
||||
"slate": "^0.76.0",
|
||||
"semver": "^7.3.6",
|
||||
"slate": "^0.76.1",
|
||||
"slate-auto-replace": "^0.12.1",
|
||||
"slate-history": "^0.66.0",
|
||||
"slate-hyperscript": "^0.67.0",
|
||||
"slate-react": "^0.76.0",
|
||||
"slate-react": "^0.76.1",
|
||||
"source-map-loader": "^3.0.1",
|
||||
"style-loader": "^3.3.1",
|
||||
"styled-components": "^5.3.5",
|
||||
"styled-reset": "^4.3.4",
|
||||
"terser-webpack-plugin": "^5.3.1",
|
||||
"tippy.js": "^6.3.7",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack-dev-server": "^4.7.4",
|
||||
"webpack": "^5.72.0",
|
||||
"webpack-dev-server": "^4.8.1",
|
||||
"webpack-manifest-plugin": "^5.0.0",
|
||||
"workbox-webpack-plugin": "^6.5.2"
|
||||
},
|
||||
@@ -83,7 +88,8 @@
|
||||
"build": "REACT_APP_BUILD_TIME=$(date +%s) node scripts/build.js",
|
||||
"deploy": "yarn build && gh-pages -d build",
|
||||
"lint": "lint-staged",
|
||||
"prepare": "husky install"
|
||||
"prepare": "husky install",
|
||||
"postinstall": "patch-package"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
@@ -107,17 +113,19 @@
|
||||
"@commitlint/config-conventional": "^16.2.1",
|
||||
"autoprefixer": "^10.4.4",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-import": "^2.25.4",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.29.4",
|
||||
"eslint-plugin-react-hooks": "^4.4.0",
|
||||
"gh-pages": "^3.2.3",
|
||||
"husky": "^7.0.4",
|
||||
"lint-staged": "^12.3.7",
|
||||
"patch-package": "^6.4.7",
|
||||
"postcss": "^8.4.12",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-loader": "^6.2.1",
|
||||
"postcss-preset-env": "^7.4.3",
|
||||
"prettier": "^2.6.1"
|
||||
"postinstall-postinstall": "^2.1.0",
|
||||
"prettier": "^2.6.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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