Note creator improvement #6

Merged
verbiricha merged 2 commits from note-creator into main 2023-01-06 13:05:11 +00:00
3 changed files with 42 additions and 16 deletions

View File

@ -29,7 +29,7 @@ export function extractLinks(fragments) {
}
}
} else {
return <a href={url}>{url.toString()}</a>
return <a key={url} href={url}>{url.toString()}</a>
}
} catch (e) {
console.warn(`Not a valid url: ${a}`);

View File

@ -1,8 +1,12 @@
.note-creator {
margin-bottom: 10px;
background-color: #333;
border-radius: 10px;
}
.note-creator textarea {
resize: none;
outline: none;
min-height: 40px;
max-height: 300px;
border-radius: 10px 10px 0 0;
@ -11,8 +15,24 @@
}
.note-creator .actions {
width: 100%;
justify-content: flex-end;
margin-bottom: 5px;
}
.note-creator .attachment {
cursor: pointer;
padding: 5px 10px;
border-radius: 0 0 10px 10px;
background-color: #222;
}
border-radius: 10px;
}
.note-creator .attachment .error {
font-weight: normal;
margin-right: 5px;
font-size: 14px;
}
.note-creator .btn {
border-radius: 20px;
font-weight: bold;
}

View File

@ -28,28 +28,34 @@ export function NoteCreator(props) {
}
async function attachFile() {
let file = await openFile();
let rsp = await VoidUpload(file);
let ext = file.name.match(FileExtensionRegex)[1];
try {
let file = await openFile();
let rsp = await VoidUpload(file);
let ext = file.name.match(FileExtensionRegex)[1];
// extension tricks note parser to embed the content
let url = rsp.metadata.url ?? `https://void.cat/d/${rsp.id}.${ext}`;
// extension tricks note parser to embed the content
let url = rsp.metadata.url ?? `https://void.cat/d/${rsp.id}.${ext}`;
setNote(n => `${n}\n${url}`);
setNote(n => `${n}\n${url}`);
} catch (error) {
setError(error?.message)
}
}
return (
<>
{replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
<div className="flex note-creator">
<div className="flex f-col mr10 f-grow">
<textarea placeholder="Say something!" value={note} onChange={(e) => setNote(e.target.value)} />
<div className="actions">
<FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()}/>
{error.length > 0 ? <b className="error">{error}</b> : null}
<div className="textarea flex f-col mr10 f-grow">
<textarea className="textarea" placeholder="Say something!" value={note} onChange={(e) => setNote(e.target.value)} />
<div className="actions flex f-row">
<div className="attachment flex f-row">
{error.length > 0 ? <b className="error">{error}</b> : null}
<FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()}/>
</div>
<div className="btn" onClick={() => sendNote()}>Send</div>
</div>
</div>
<div className="btn" onClick={() => sendNote()}>Send</div>
</div>
</>
);