921a26d Add markdown preview to create issue view — radicle-desktop

radicle-desktop

Radicle desktop app

Add markdown preview to create issue view

✓ CI success Rūdolfs Ošiņš committed 1 year ago

commit 921a26dca57b535ab3bc00153d76bf72f4d81ad3
parent 4d2c396b9cc0f0b029c57acbdcc70d99116f13c9

1 passed (1 total) View logs

5 files changed +219 -54

modified src/components/Icon.svelte

@@ -10,18 +10,22 @@

     | "checkmark"
     | "chevron-right"
     | "copy"
     | "cross"
     | "dashboard"
     | "delegate"
     | "diff"
     | "eye"
     | "file"
     | "inbox"
     | "issue"
     | "lock"
     | "markdown"
     | "moon"
     | "more-vertical"
     | "offline"
     | "online"
     | "patch"
     | "pen"
     | "plus"
     | "repo"
     | "revision"

@@ -105,6 +109,23 @@

     <path d="M2.5 6H3.5L3.5 13H2.5V6Z" />
     <path d="M10.5 12H11.5V13H10.5V12Z" />
     <path d="M10.5 6L11.5 6V9H10.5L10.5 6Z" />
   {:else if name === "cross"}
     <path d="M5.00003 11V12H4.00003L4.00003 11H5.00003Z" />
     <path d="M6.00003 10L6.00003 11H5.00003L5.00003 10H6.00003Z" />
     <path d="M7.00003 9V10H6.00003L6.00003 9L7.00003 9Z" />
     <path d="M8.00003 7V8H7.00003V7H8.00003Z" />
     <path d="M10 6V7H9.00003V6H10Z" />
     <path d="M11 5V6L10 6V5H11Z" />
     <path d="M12 4V5L11 5V4L12 4Z" />
     <path d="M10 10V11H11V10H10Z" />
     <path d="M11 11V12H12V11H11Z" />
     <path d="M9.00003 9V10H10V9H9.00003Z" />
     <path d="M8.00003 8L8.00003 9H9.00003V8L8.00003 8Z" />
     <path d="M8.00003 7V8L9.00003 8V7L8.00003 7Z" />
     <path d="M7.00003 7L7.00003 9H8.00003L8.00003 7H7.00003Z" />
     <path d="M6.00003 6L6.00003 7H7.00003L7.00003 6H6.00003Z" />
     <path d="M5.00003 5V6L6.00003 6V5L5.00003 5Z" />
     <path d="M4.00003 4L4.00003 5L5.00003 5L5.00003 4L4.00003 4Z" />
   {:else if name === "dashboard"}
     <path d="M2 11H14V12H2V11Z" />
     <path d="M2 9H3V11H2L2 9Z" />

@@ -144,6 +165,29 @@

     <path d="M7 4H8V9H7V4Z" />
     <path d="M5 6H10V7H5V6Z" />
     <path d="M5 10H10V11H5V10Z" />
   {:else if name === "eye"}
     <path d="M10 5L8.00002 5V4L10 4V5Z" />
     <path d="M6.00002 11L8.00002 11L8.00002 12H6.00002L6.00002 11Z" />
     <path d="M7.00002 7L9.00002 7V6L7.00002 6V7Z" />
     <path d="M9.00001 9L7.00001 9V10L9.00001 10V9Z" />
     <path d="M4.00002 6V7H3.00002L3.00002 6H4.00002Z" />
     <path d="M12 10V9H13V10H12Z" />
     <path d="M12 6L10 6V5L12 5V6Z" />
     <path d="M4.00002 10L6.00002 10V11H4.00002L4.00002 10Z" />
     <path d="M6.00002 6L4.00002 6L4.00002 5L6.00002 5V6Z" />
     <path d="M10 10H12V11L10 11L10 10Z" />
     <path d="M12 7V6H13V7H12Z" />
     <path d="M4.00002 9V10H3.00002L3.00002 9H4.00002Z" />
     <path d="M8.00002 5L6.00002 5V4L8.00002 4V5Z" />
     <path d="M8.00002 11L10 11V12H8.00002L8.00002 11Z" />
     <path d="M6.00002 8V7L7.00002 7V8L6.00002 8Z" />
     <path d="M10 8V9H9.00001L9.00002 8H10Z" />
     <path d="M9.00002 8L9.00002 7L10 7V8H9.00002Z" />
     <path d="M7.00002 8L7.00001 9L6.00002 9V8L7.00002 8Z" />
     <path d="M14 7V8H13V7L14 7Z" />
     <path d="M2.00002 9L2.00002 8H3.00002V9L2.00002 9Z" />
     <path d="M3.00002 7L3.00002 8H2.00002L2.00002 7H3.00002Z" />
     <path d="M13 9V8H14V9L13 9Z" />
   {:else if name === "file"}
     <path d="M10 4H11V5H10V4Z" />
     <path d="M11 5L12 5V6H11V5Z" />

@@ -198,6 +242,23 @@

     <path d="M13 7H14V13H13V7Z" />
     <path d="M3 6H13V7H3L3 6Z" />
     <path d="M7 8H9V11H7V8Z" />
   {:else if name === "markdown"}
     <path d="M2 4.00003H3V12H2V4.00003Z" />
     <path d="M3 7.00003H4V12H3V7.00003Z" />
     <path d="M9 4.00003H8V8.00003H9V4.00003Z" />
     <path d="M8 7.00003H7V9.00003H8V7.00003Z" />
     <path d="M11 11H12V12H11V11Z" />
     <path d="M9 10H13V11H9V10Z" />
     <path d="M8 9.00003H14V10H8V9.00003Z" />
     <path d="M10 4.00003H12V10H10V4.00003Z" />
     <path d="M4 5.00003H5V7.00003H4V5.00003Z" />
     <path d="M5 7.00003H6V8.00003H5V7.00003Z" />
     <path d="M5 6.00003H6V7.00003H5V6.00003Z" />
     <path d="M6 5.00003H7V7.00003H6V5.00003Z" />
     <path d="M7 4.00003H8V6.00003H7V4.00003Z" />
     <path d="M8 11H9V12H8V11Z" />
     <path d="M7 10H8V12H7V10Z" />
     <path d="M3 4.00003H4V6.00003H3V4.00003Z" />
   {:else if name === "moon"}
     <path d="M4 3H6V4H4V3Z" />
     <path d="M3 4L4 4L4 6H3V4Z" />

@@ -300,6 +361,40 @@

     <path d="M7 4H8V9H7V4Z" />
     <path d="M5 6H10V7H5V6Z" />
     <path d="M5 10H10V11H5V10Z" />
   {:else if name === "pen"}
     <path d="M13 4.99998H14V5.99999H13V4.99998Z" />
     <path d="M2 13H3V14H2V13Z" />
     <path d="M10 1.99998H11V2.99998H10V1.99998Z" />
     <path d="M11 2.99998L12 2.99998V3.99998H11V2.99998Z" />
     <path d="M12 3.99998L13 3.99998V4.99998H12V3.99998Z" />
     <path d="M6 5.99998H7V6.99998H6V5.99998Z" />
     <path d="M7 4.99998H8V5.99998H7V4.99998Z" />
     <path d="M8 3.99998H9V4.99998H8V3.99998Z" />
     <path d="M9 4.99998L10 4.99998V5.99998H9V4.99998Z" />
     <path d="M10 5.99998H11V6.99998H10V5.99998Z" />
     <path d="M9 2.99998L10 2.99998V3.99998H9V2.99998Z" />
     <path d="M12 5.99998L13 5.99999V6.99998H12V5.99998Z" />
     <path d="M5 6.99999L6 6.99998L6 7.99999H5V6.99999Z" />
     <path d="M9 8.99998H10V9.99998H9V8.99998Z" />
     <path d="M10 7.99998H11V8.99998H10V7.99998Z" />
     <path d="M11 6.99998H12V7.99998H11V6.99998Z" />
     <path d="M4 7.99998L5 7.99999V8.99998H4V7.99998Z" />
     <path d="M8 9.99998H9L9 11H8V9.99998Z" />
     <path d="M3 8.99998H4V9.99998H3V8.99998Z" />
     <path d="M7 11H8V12H7V11Z" />
     <path d="M2 9.99998H3V11H2V9.99998Z" />
     <path d="M6 12H7V13H6V12Z" />
     <path d="M4 12H5V13H4V12Z" />
     <path d="M4 11H5V12H4V11Z" />
     <path d="M3 11H4V12H3V11Z" />
     <path d="M3 9.99998H4V11H3V9.99998Z" />
     <path d="M5 12H6V13H5V12Z" />
     <path d="M4 13H5V14H4V13Z" />
     <path d="M5 13H6L6 14H5V13Z" />
     <path d="M2 12H3V13H2V12Z" />
     <path d="M2 11H3V12H2V11Z" />
     <path d="M3 12H4V13H3V12Z" />
     <path d="M3 13H4V14H3V13Z" />
   {:else if name === "plus"}
     <path d="M7.00002 2H9.00002V14H7.00002V2Z" />
     <path d="M14 7V9L2.00002 9L2.00002 7L14 7Z" />

modified src/components/Markdown.svelte

@@ -321,14 +321,14 @@

   }
   .markdown :global(ol) {
     line-height: 1.625;
     line-height: 1.625rem;
     list-style-type: decimal;
     margin-bottom: 1rem;
     padding-left: 1.5rem;
   }
   .markdown :global(ul) {
     line-height: 1.625;
     line-height: 1.625rem;
     list-style-type: inherit;
     padding-left: 1.25rem;
     margin-bottom: 1rem;

modified src/components/OutlineButton.svelte

@@ -1,6 +1,7 @@

 <script lang="ts">
   export let variant: "primary" | "secondary" | "ghost";
   export let onclick: (() => void) | undefined = undefined;
   export let disabled: boolean = false;
   $: style =
     `--button-color-1: var(--color-fill-${variant});` +

@@ -107,93 +108,113 @@

     grid-area: p5-5;
   }
   .container:hover .p1-3 {
   .container:hover:not(.disabled) .p1-3 {
     background-color: var(--button-color-1);
   }
   .container:hover .p2-2 {
   .container:hover:not(.disabled) .p2-2 {
     background-color: var(--button-color-1);
   }
   .container:hover .p2-3 {
   .container:hover:not(.disabled) .p2-3 {
     background-color: var(--button-color-1);
   }
   .container:hover .p2-4 {
   .container:hover:not(.disabled) .p2-4 {
     background-color: var(--button-color-1);
   }
   .container:hover .p3-1 {
   .container:hover:not(.disabled) .p3-1 {
     background-color: var(--button-color-1);
   }
   .container:hover .p3-2 {
   .container:hover:not(.disabled) .p3-2 {
     background-color: var(--button-color-1);
   }
   .container:hover .p3-3 {
   .container:hover:not(.disabled) .p3-3 {
     background-color: var(--button-color-1);
   }
   .container:hover .p3-4 {
   .container:hover:not(.disabled) .p3-4 {
     background-color: var(--button-color-1);
   }
   .container:hover .p3-5 {
   .container:hover:not(.disabled) .p3-5 {
     background-color: var(--button-color-1);
   }
   .container:hover .p4-2 {
   .container:hover:not(.disabled) .p4-2 {
     background-color: var(--button-color-1);
   }
   .container:hover .p4-3 {
   .container:hover:not(.disabled) .p4-3 {
     background-color: var(--button-color-1);
   }
   .container:hover .p4-4 {
   .container:hover:not(.disabled) .p4-4 {
     background-color: var(--button-color-1);
   }
   .container:hover .p5-3 {
   .container:hover:not(.disabled) .p5-3 {
     background-color: var(--button-color-1);
   }
   .container:active .p1-3 {
   .container:active:not(.disabled) .p1-3 {
     background-color: var(--button-color-1);
   }
   .container:active .p2-2 {
   .container:active:not(.disabled) .p2-2 {
     background-color: var(--button-color-1);
   }
   .container:active .p2-3 {
   .container:active:not(.disabled) .p2-3 {
     background-color: var(--button-color-3);
   }
   .container:active .p2-4 {
   .container:active:not(.disabled) .p2-4 {
     background-color: var(--button-color-1);
   }
   .container:active .p3-1 {
   .container:active:not(.disabled) .p3-1 {
     background-color: var(--button-color-1);
   }
   .container:active .p3-2 {
   .container:active:not(.disabled) .p3-2 {
     background-color: var(--button-color-3);
   }
   .container:active .p3-3 {
   .container:active:not(.disabled) .p3-3 {
     background-color: var(--button-color-1);
   }
   .container:active .p3-4 {
   .container:active:not(.disabled) .p3-4 {
     background-color: var(--button-color-2);
   }
   .container:active .p3-5 {
   .container:active:not(.disabled) .p3-5 {
     background-color: var(--button-color-1);
   }
   .container:active .p4-2 {
   .container:active:not(.disabled) .p4-2 {
     background-color: var(--button-color-1);
   }
   .container:active .p4-3 {
   .container:active:not(.disabled) .p4-3 {
     background-color: var(--button-color-2);
   }
   .container:active .p4-4 {
   .container:active:not(.disabled) .p4-4 {
     background-color: var(--button-color-1);
   }
   .container:active .p5-3 {
   .container:active:not(.disabled) .p5-3 {
     background-color: var(--button-color-1);
   }
   .container.disabled {
     color: var(--color-foreground-disabled);
   }
   .disabled .p1-3,
   .disabled .p2-2,
   .disabled .p2-3,
   .disabled .p2-4,
   .disabled .p3-1,
   .disabled .p3-2,
   .disabled .p3-3,
   .disabled .p3-4,
   .disabled .p3-5,
   .disabled .p4-2,
   .disabled .p4-3,
   .disabled .p4-4,
   .disabled .p5-3 {
     background-color: var(--color-fill-ghost);
   }
   .container {
     height: 32px;
     cursor: pointer;

@@ -218,7 +239,14 @@

 </style>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="container" {onclick} role="button" tabindex="0" {style}>
 <div
   class="container"
   style:cursor={!disabled ? "pointer" : "default"}
   class:disabled
   onclick={!disabled ? onclick : undefined}
   role="button"
   tabindex="0"
   {style}>
   <div class="pixel p1-1"></div>
   <div class="pixel p1-2"></div>
   <div class="pixel p1-3"></div>

modified src/components/Textarea.svelte

@@ -6,10 +6,8 @@

   export let value: string | undefined = undefined;
   export let placeholder: string | undefined = undefined;
   export let focus: boolean = false;
   // If `false` we automatically grow the textarea height.
   // If `true` we show a resize handle on the lower right-hand side of the
   // textarea to allow resizing the textarea manually.
   export let resizable: boolean = false;
   export let size: "grow" | "resizable" | "fixed-height" = "grow";
   export let styleMinHeight: string | undefined = undefined;
   // Defaulting selectionStart and selectionEnd to 0, since no full support yet.
   export let selectionStart: number = 0;

@@ -21,7 +19,7 @@

   // We either auto-grow the textarea, or allow the user to resize it. These
   // options are mutually exclusive because a user resized textarea would
   // automatically shrink upon text input otherwise.
   $: if (textareaElement && !resizable) {
   $: if (textareaElement && size === "grow") {
     // React to changes to the textarea content.
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     value;

@@ -66,11 +64,6 @@

     outline: none;
   }
   .resizable {
     resize: vertical;
     overflow: scroll;
   }
   textarea::-webkit-scrollbar-corner {
     background-color: transparent;
   }

@@ -87,14 +80,21 @@

   }
 </style>
 <Border variant={focussed ? "secondary" : "ghost"} styleWidth="100%">
 <Border
   variant={focussed ? "secondary" : "ghost"}
   styleWidth="100%"
   {styleMinHeight}>
   <textarea
     style:min-height={styleMinHeight}
     tabindex="0"
     bind:this={textareaElement}
     bind:value
     aria-label="textarea-comment"
     class="txt-small"
     class:resizable
     style:resize={size === "resizable" ? "vertical" : undefined}
     style:overflow={size === "resizable" || size === "fixed-height"
       ? "scroll"
       : undefined}
     {placeholder}
     on:change
     on:click

modified src/views/repo/CreateIssue.svelte

@@ -19,6 +19,7 @@

   import OutlineButton from "@app/components/OutlineButton.svelte";
   import TextInput from "@app/components/TextInput.svelte";
   import Textarea from "@app/components/Textarea.svelte";
   import Markdown from "@app/components/Markdown.svelte";
   export let repo: RepoInfo;
   export let issues: Issue[];

@@ -26,6 +27,7 @@

   let title: string = "";
   let description: string = "";
   let preview: boolean = false;
   const labels: string[] = [];
   const assignees: Author[] = [];

@@ -52,8 +54,8 @@

     font-weight: var(--font-weight-medium);
     -webkit-user-select: text;
     user-select: text;
     margin-bottom: 1rem;
     margin-top: 0.35rem;
     margin-bottom: 1rem;
   }
   .issue-teaser {
     max-width: 11rem;

@@ -68,6 +70,13 @@

   }
   .content {
     padding: 0 1rem 1rem 1rem;
     height: calc(100% - 8rem);
   }
   .body {
     background-color: var(--color-background-float);
     padding: 1rem;
     min-height: calc(100% + 2px);
     clip-path: var(--2px-corner-fill);
   }
 </style>

@@ -140,27 +149,60 @@

   </svelte:fragment>
   <div class="content">
     <div class="title">
       <TextInput placeholder="Title" autofocus bind:value={title} />
     </div>
     <Textarea placeholder="Description" bind:value={description} />
     {#if preview}
       <div class="title">
         <InlineTitle content={title} fontSize="medium" />
       </div>
     {:else}
       <div style:margin-bottom="0.35rem">
         <TextInput placeholder="Title" autofocus bind:value={title} />
       </div>
     {/if}
     {#if preview}
       <div class="txt-small body">
         {#if description.trim() === ""}
           <span class="txt-missing">No description.</span>
         {:else}
           <Markdown rid={repo.rid} content={description} breaks />
         {/if}
       </div>
     {:else}
       <Textarea
         placeholder="Description"
         bind:value={description}
         size="fixed-height"
         styleMinHeight="100%" />
     {/if}
     <div
       class="global-flex"
       style:justify-content="flex-end"
       style:justify-content="space-between"
       style:padding-bottom="1.5rem"
       style:margin-top="1.5rem">
       <OutlineButton
         variant="ghost"
         onclick={() => {
           window.history.back();
         }}>
         Cancel
         <Icon name="cross" />Discard
       </OutlineButton>
       <Button
         variant="ghost"
         disabled={title.length === 0}
         onclick={createIssue}>
         Save
       </Button>
       <div class="global-flex">
         <div class="global-flex txt-small txt-missing">
           <Icon name="markdown" />
           Markdown is supported.
         </div>
         <OutlineButton
           variant="ghost"
           disabled={title.length === 0}
           onclick={() => (preview = !preview)}>
           <Icon name={preview ? "pen" : "eye"} />{preview ? "Edit" : "Preview"}
         </OutlineButton>
         <Button
           variant="ghost"
           disabled={title.length === 0}
           onclick={createIssue}>
           <Icon name="checkmark" />Save
         </Button>
       </div>
     </div>
   </div>
 </Layout>