diff --git a/src/assets/style.css b/src/assets/style.css index 5b528a6..2aafe90 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -131,6 +131,12 @@ button, color: var(--fg); } +.edit-button { + float: right; + margin: 0; + margin-top: -1.9rem; /* This is not the best way to solve this but I couldn't think of anyother way atm, please let me know if anyone have any suggestions :) */ +} + #blob { visibility: hidden; height: 0; diff --git a/src/index.js b/src/index.js index 65a7ebf..8f1fa08 100755 --- a/src/index.js +++ b/src/index.js @@ -829,11 +829,39 @@ router const messages = [rootMessage]; const previewData = await preparePreview(ctx); + const showPreview = true; ctx.body = await previewSubtopicView({ messages, myFeedId, previewData, + showPreview, + contentWarning, + }); + } + ) + .post( + "/subtopic/edit/:message", + koaBody({ multipart: true }), + async (ctx) => { + const { message } = ctx.params; + const rootMessage = await post.get(message); + const myFeedId = await meta.myFeedId(); + + const rawContentWarning = String(ctx.request.body.contentWarning).trim(); + const contentWarning = + rawContentWarning.length > 0 ? rawContentWarning : undefined; + + const messages = [rootMessage]; + + const previewData = await preparePreview(ctx); + const showPreview = false; + + ctx.body = await previewSubtopicView({ + messages, + myFeedId, + previewData, + showPreview, contentWarning, }); } @@ -871,6 +899,7 @@ router } = await resolveCommentComponents(ctx); const previewData = await preparePreview(ctx); + const showPreview = true; ctx.body = await previewCommentView({ messages, @@ -878,9 +907,30 @@ router contentWarning, parentMessage, previewData, + showPreview, }); } ) + .post("/comment/edit/:message", koaBody({ multipart: true }), async (ctx) => { + const { + messages, + contentWarning, + myFeedId, + parentMessage, + } = await resolveCommentComponents(ctx); + + const previewData = await preparePreview(ctx); + const showPreview = false; + + ctx.body = await previewCommentView({ + messages, + myFeedId, + contentWarning, + parentMessage, + previewData, + showPreview, + }); + }) .post("/comment/:message", koaBody(), async (ctx) => { const { message } = ctx.params; const text = String(ctx.request.body.text); @@ -912,6 +962,16 @@ router const previewData = await preparePreview(ctx); ctx.body = await previewView({ previewData, contentWarning }); }) + .post("/publish/edit", koaBody(), async (ctx) => { + const rawContentWarning = String(ctx.request.body.contentWarning); + + // Only submit content warning if it's a string with non-zero length. + const contentWarning = + rawContentWarning.length > 0 ? rawContentWarning : undefined; + + const previewData = await preparePreview(ctx); + ctx.body = await publishView(previewData, previewData.text, contentWarning); + }) .post("/publish", koaBody(), async (ctx) => { const text = String(ctx.request.body.text); const rawContentWarning = String(ctx.request.body.contentWarning); diff --git a/src/views/i18n.js b/src/views/i18n.js index c64876c..d6d9f66 100644 --- a/src/views/i18n.js +++ b/src/views/i18n.js @@ -86,6 +86,7 @@ const i18n = { mentionsMatching: "Matching Mentions", preview: "Preview", publish: "Publish", + edit: "Edit", contentWarningPlaceholder: "Optional content warning for this post", publishCustomDescription: [ "Publish a custom message by entering ", diff --git a/src/views/index.js b/src/views/index.js index ea45233..3cd0fa8 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -684,21 +684,25 @@ exports.authorView = ({ exports.previewCommentView = async ({ previewData, + showPreview, messages, myFeedId, parentMessage, contentWarning, }) => { const publishAction = `/comment/${encodeURIComponent(messages[0].key)}`; + const editAction = `/comment/edit/${encodeURIComponent(messages[0].key)}`; const preview = generatePreview({ previewData, contentWarning, action: publishAction, + editAction, }); return exports.commentView( { messages, myFeedId, parentMessage }, preview, + showPreview, previewData.text, contentWarning ); @@ -707,6 +711,7 @@ exports.previewCommentView = async ({ exports.commentView = async ( { messages, myFeedId, parentMessage }, preview, + showPreview, text, contentWarning ) => { @@ -739,35 +744,39 @@ exports.commentView = async ( return template( i18n.commentTitle({ authorName }), div({ class: "thread-container" }, messageElements), - preview !== undefined ? preview : "", - p( - ...i18n.commentLabel({ publicOrPrivate, markdownUrl }), - ...maybeSubtopicText - ), - form( - { action, method, enctype: "multipart/form-data" }, - textarea( - { - autofocus: true, - required: true, - name: "text", - }, - text ? text : isPrivate ? null : markdownMention - ), - label( - i18n.contentWarningLabel, - input({ - name: "contentWarning", - type: "text", - class: "contentWarning", - value: contentWarning ? contentWarning : "", - placeholder: i18n.contentWarningPlaceholder, - }) - ), - button({ type: "submit" }, i18n.preview), - label({ class: "file-button", for: "blob" }, i18n.attachFiles), - input({ type: "file", id: "blob", name: "blob" }) - ) + showPreview && preview !== undefined ? preview : "", + showPreview + ? "" + : p( + ...i18n.commentLabel({ publicOrPrivate, markdownUrl }), + ...maybeSubtopicText + ), + showPreview + ? "" + : form( + { action, method, enctype: "multipart/form-data" }, + textarea( + { + autofocus: true, + required: true, + name: "text", + }, + text ? text : isPrivate ? null : markdownMention + ), + label( + i18n.contentWarningLabel, + input({ + name: "contentWarning", + type: "text", + class: "contentWarning", + value: contentWarning ? contentWarning : "", + placeholder: i18n.contentWarningPlaceholder, + }) + ), + button({ type: "submit" }, i18n.preview), + label({ class: "file-button", for: "blob" }, i18n.attachFiles), + input({ type: "file", id: "blob", name: "blob" }) + ) ); }; @@ -877,7 +886,12 @@ exports.publishView = (preview, text, contentWarning) => { ); }; -const generatePreview = ({ previewData, contentWarning, action }) => { +const generatePreview = ({ + previewData, + contentWarning, + action, + editAction, +}) => { const { authorMeta, text, mentions } = previewData; // craft message that looks like it came from the db @@ -989,6 +1003,20 @@ const generatePreview = ({ previewData, contentWarning, action }) => { value: text, }), button({ type: "submit" }, i18n.publish) + ), + form( + { action: editAction, method: "post" }, + input({ + name: "contentWarning", + type: "hidden", + value: contentWarning, + }), + input({ + name: "text", + type: "hidden", + value: text, + }), + button({ type: "submit", class: "edit-button" }, i18n.edit) ) ) ); @@ -996,13 +1024,15 @@ const generatePreview = ({ previewData, contentWarning, action }) => { exports.previewView = ({ previewData, contentWarning }) => { const publishAction = "/publish"; + const editAction = "/publish/edit"; const preview = generatePreview({ previewData, contentWarning, action: publishAction, + editAction, }); - return exports.publishView(preview, previewData.text, contentWarning); + return template("Preview", preview); }; /** @@ -1237,20 +1267,24 @@ exports.threadsView = ({ messages }) => { exports.previewSubtopicView = async ({ previewData, + showPreview, messages, myFeedId, contentWarning, }) => { const publishAction = `/subtopic/${encodeURIComponent(messages[0].key)}`; + const editAction = `/subtopic/edit/${encodeURIComponent(messages[0].key)}`; const preview = generatePreview({ previewData, contentWarning, action: publishAction, + editAction, }); return exports.subtopicView( { messages, myFeedId }, preview, + showPreview, previewData.text, contentWarning ); @@ -1259,6 +1293,7 @@ exports.previewSubtopicView = async ({ exports.subtopicView = async ( { messages, myFeedId }, preview, + showPreview, text, contentWarning ) => { @@ -1288,32 +1323,38 @@ exports.subtopicView = async ( return template( i18n.subtopicTitle({ authorName }), div({ class: "thread-container" }, messageElements), - preview !== undefined ? preview : "", - p(i18n.subtopicLabel({ markdownUrl })), - form( - { action: subtopicForm, method: "post", enctype: "multipart/form-data" }, - textarea( - { - autofocus: true, - required: true, - name: "text", - }, - text ? text : markdownMention - ), - label( - i18n.contentWarningLabel, - input({ - name: "contentWarning", - type: "text", - class: "contentWarning", - value: contentWarning ? contentWarning : "", - placeholder: i18n.contentWarningPlaceholder, - }) - ), - button({ type: "submit" }, i18n.preview), - label({ class: "file-button", for: "blob" }, i18n.attachFiles), - input({ type: "file", id: "blob", name: "blob" }) - ) + showPreview && preview !== undefined ? preview : "", + showPreview ? "" : p(i18n.subtopicLabel({ markdownUrl })), + showPreview + ? "" + : form( + { + action: subtopicForm, + method: "post", + enctype: "multipart/form-data", + }, + textarea( + { + autofocus: true, + required: true, + name: "text", + }, + text ? text : markdownMention + ), + label( + i18n.contentWarningLabel, + input({ + name: "contentWarning", + type: "text", + class: "contentWarning", + value: contentWarning ? contentWarning : "", + placeholder: i18n.contentWarningPlaceholder, + }) + ), + button({ type: "submit" }, i18n.preview), + label({ class: "file-button", for: "blob" }, i18n.attachFiles), + input({ type: "file", id: "blob", name: "blob" }) + ) ); };