Allow preview for empty body in ExtendedTextarea

Instead of disabling the preview feature when the body is empty, we show `Nothing to preview`
radicle-dev · Dec 18, 2024 · fe7a885 · fe7a885
1 parent d6d9c43
commit fe7a885
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 23 deletions.
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
@@ -29,7 +29,6 @@
     caption?: string;
     timestamp: number;
     lastEdit?: Edit;
-    disallowEmptyBody?: boolean;
     editComment?: (body: string, embeds: Embed[]) => Promise<void>;
     reactOnComment?: (authors: Author[], reaction: string) => Promise<void>;
   }
@@ -46,7 +45,6 @@
     caption = "commented",
     timestamp,
     lastEdit,
-    disallowEmptyBody = false,
     editComment,
     reactOnComment,
   }: Props = $props();
@@ -180,7 +178,6 @@
             {body}
             {rid}
             {embeds}
-            {disallowEmptyBody}
             borderVariant="ghost"
             submitInProgress={state === "submit"}
             submitCaption="Save"

diff --git a/src/components/CommentToggleInput.svelte b/src/components/CommentToggleInput.svelte
@@ -11,7 +11,6 @@
     submit: (comment: string, embeds: Embed[]) => Promise<void>;
     onclose?: () => void;
     onexpand?: () => void;
-    disallowEmptyBody?: boolean;
   }
 
   /* eslint-disable prefer-const */
@@ -22,7 +21,6 @@
     submit,
     onclose,
     onexpand,
-    disallowEmptyBody = false,
   }: Props = $props();
   /* eslint-enable prefer-const */
 
@@ -43,7 +41,6 @@
 
 {#if state !== "collapsed"}
   <ExtendedTextarea
-    {disallowEmptyBody}
     {rid}
     {placeholder}
     submitInProgress={state === "submit"}

diff --git a/src/components/ExtendedTextarea.svelte b/src/components/ExtendedTextarea.svelte
@@ -28,7 +28,6 @@
     embeds?: Map<string, Embed>;
     submitInProgress?: boolean;
     disableSubmit?: boolean;
-    disallowEmptyBody?: boolean;
     isValid?: () => boolean;
     preview?: boolean;
     stylePadding?: string;
@@ -54,7 +53,6 @@
     embeds = new Map(),
     submitInProgress = false,
     disableSubmit = false,
-    disallowEmptyBody = false,
     isValid = () => true,
     stylePadding,
     borderVariant = "float",
@@ -238,7 +236,11 @@
 <div class="comment-section" aria-label="extended-textarea" class:inline>
   {#if preview}
     <div class="preview">
-      <Markdown {rid} breaks content={body} />
+      {#if body.trim().length === 0}
+        <span class="txt-missing">Nothing to preview.</span>
+      {:else}
+        <Markdown {rid} breaks content={body} />
+      {/if}
     </div>
   {:else}
     <Textarea
@@ -282,19 +284,13 @@
         <Icon name="attachment" />
         Attach
       </OutlineButton>
-      <OutlineButton
-        variant="ghost"
-        disabled={body.trim() === ""}
-        onclick={() => (preview = !preview)}>
+      <OutlineButton variant="ghost" onclick={() => (preview = !preview)}>
         <Icon name={preview ? "pen" : "eye"} />
         {preview ? "Edit" : "Preview"}
       </OutlineButton>
       <Button
         variant="ghost"
-        disabled={!isValid() ||
-          submitInProgress ||
-          disableSubmit ||
-          (disallowEmptyBody && body.trim() === "")}
+        disabled={!isValid() || submitInProgress || disableSubmit}
         onclick={submitFn}>
         <Icon name="checkmark" />
         {#if submitInProgress}

diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
@@ -98,7 +98,6 @@
 <div class="comments" {style}>
   <div class="top-level-comment">
     <CommentComponent
-      disallowEmptyBody
       {rid}
       id={root.id}
       lastEdit={root.edits.length > 1 ? root.edits.at(-1) : undefined}
@@ -121,7 +120,6 @@
         {#if replies.length > 0}
           {#each replies as reply}
             <CommentComponent
-              disallowEmptyBody
               {rid}
               lastEdit={reply.edits.length > 1 ? reply.edits.at(-1) : undefined}
               id={reply.id}
@@ -140,7 +138,6 @@
         {#if createReply && showReplyForm}
           <div id={`reply-${root.id}`} style:padding="1rem">
             <ExtendedTextarea
-              disallowEmptyBody
               {submitInProgress}
               {rid}
               inline

diff --git a/src/views/repo/CreateIssue.svelte b/src/views/repo/CreateIssue.svelte
@@ -101,7 +101,11 @@
   <div class="content">
     {#if preview}
       <div class="title">
-        <InlineTitle content={title} fontSize="medium" />
+        {#if title.trim().length === 0}
+          <span class="txt-missing">No title</span>
+        {:else}
+          <InlineTitle content={title} fontSize="medium" />
+        {/if}
       </div>
     {:else}
       <div style:margin-bottom="0.35rem">
@@ -138,7 +142,6 @@
     <ExtendedTextarea
       textAreaSize="fixed-height"
       disableSubmit={title.trim() === ""}
-      disallowEmptyBody
       submitCaption="Save"
       close={() => window.history.back()}
       submit={async ({ comment, embeds }) => {

diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
@@ -557,7 +557,6 @@
 
     <div id={`reply-${issue.id}`}>
       <CommentToggleInput
-        disallowEmptyBody
         rid={repo.rid}
         focus={focusReply}
         onexpand={toggleReply}