Abstract quill editor to new component to reduce future replacement e…

…fforts
StevenWeathers · Apr 7, 2024 · 5780ba6 · 5780ba6
1 parent f3954cc
commit 5780ba6
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 63 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -23,7 +23,8 @@
     "test:watch": "npm run test -- --watch",
     "test:snapshot": "npm test -- -u",
     "locales": "npx typesafe-i18n --no-watch",
-    "locales:watch": "typesafe-i18n"
+    "locales:watch": "typesafe-i18n",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
     "compute-scroll-into-view": "^3.1.0",

diff --git a/ui/src/components/Editor.svelte b/ui/src/components/Editor.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { quill } from '../quill';
+
+  export let content = '';
+  export let placeholder = '';
+  export let handleTextChange = text => {};
+  export let id = '';
+
+  function onTextChange(e) {
+    handleTextChange(e.detail.html);
+  }
+</script>
+
+<div
+  class="w-full"
+  use:quill="{{
+    placeholder: `${placeholder}`,
+    content: content,
+  }}"
+  on:text-change="{onTextChange}"
+  id="{id}"
+></div>
diff --git a/ui/src/components/checkin/Checkin.svelte b/ui/src/components/checkin/Checkin.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import Modal from '../global/Modal.svelte';
   import SolidButton from '../global/SolidButton.svelte';
-  import { quill } from '../../quill';
   import LL from '../../i18n/i18n-svelte';
+  import Editor from '../Editor.svelte';
 
   export let toggleCheckin = () => {};
   export let handleCheckin = () => {};
@@ -50,15 +50,12 @@
             {$LL.yesterday()}
           </div>
           <div class="bg-white">
-            <div
-              class="w-full"
-              use:quill="{{
-                placeholder: `${$LL.yesterdayPlaceholder()}`,
-                content: yesterday,
-              }}"
-              on:text-change="{e => (yesterday = e.detail.html)}"
+            <Editor
+              content="{yesterday}"
+              placeholder="{$LL.yesterdayPlaceholder()}"
               id="yesterday"
-            ></div>
+              handleTextChange="{c => (yesterday = c)}"
+            />
           </div>
         </div>
         <div class="mb-4">
@@ -93,15 +90,12 @@
             {$LL.today()}
           </div>
           <div class="bg-white">
-            <div
-              class="w-full"
-              use:quill="{{
-                placeholder: `${$LL.todayPlaceholder()}`,
-                content: today,
-              }}"
-              on:text-change="{e => (today = e.detail.html)}"
+            <Editor
+              content="{today}"
+              placeholder="{$LL.todayPlaceholder()}"
               id="today"
-            ></div>
+              handleTextChange="{c => (today = c)}"
+            />
           </div>
         </div>
       </div>
@@ -114,15 +108,12 @@
         {$LL.blockers()}
       </div>
       <div class="bg-white">
-        <div
-          class="w-full"
-          use:quill="{{
-            placeholder: `${$LL.blockersPlaceholder()}`,
-            content: blockers,
-          }}"
-          on:text-change="{e => (blockers = e.detail.html)}"
+        <Editor
+          content="{blockers}"
+          placeholder="{$LL.blockersPlaceholder()}"
           id="blockers"
-        ></div>
+          handleTextChange="{c => (blockers = c)}"
+        />
       </div>
     </div>
 
@@ -133,15 +124,12 @@
         {$LL.discuss()}
       </div>
       <div class="bg-white">
-        <div
-          class="w-full"
-          use:quill="{{
-            placeholder: `${$LL.discussPlaceholder()}`,
-            content: discuss,
-          }}"
-          on:text-change="{e => (discuss = e.detail.html)}"
+        <Editor
+          content="{discuss}"
+          placeholder="{$LL.discussPlaceholder()}"
           id="discuss"
-        ></div>
+          handleTextChange="{c => (discuss = c)}"
+        />
       </div>
     </div>
 

diff --git a/ui/src/components/poker/AddStory.svelte b/ui/src/components/poker/AddStory.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { quill } from '../../quill';
   import SolidButton from '../global/SolidButton.svelte';
   import Modal from '../global/Modal.svelte';
   import NoSymbol from '../icons/NoSymbol.svelte';
@@ -12,6 +11,7 @@
   import { AppConfig } from '../../config';
   import TextInput from '../global/TextInput.svelte';
   import SelectInput from '../global/SelectInput.svelte';
+  import Editor from '../Editor.svelte';
 
   export let handlePlanAdd = () => {};
   export let toggleAddPlan = () => {};
@@ -186,15 +186,12 @@
       {#if descriptionExpanded}
         <div class="mb-2">
           <div class="bg-white">
-            <div
-              class="w-full bg-white"
-              use:quill="{{
-                placeholder: $LL.planDescriptionPlaceholder(),
-                content: description,
-              }}"
-              on:text-change="{e => (description = e.detail.html)}"
-              id="description"
-            ></div>
+            <Editor
+              content="{description}"
+              placeholder="{$LL.planDescriptionPlaceholder()}"
+              id="storyDescription"
+              handleTextChange="{c => (description = c)}"
+            />
           </div>
         </div>
       {/if}
@@ -218,15 +215,12 @@
       {#if acceptanceExpanded}
         <div class="mb-2">
           <div class="bg-white">
-            <div
-              class="w-full"
-              use:quill="{{
-                placeholder: $LL.planAcceptanceCriteriaPlaceholder(),
-                content: acceptanceCriteria,
-              }}"
-              on:text-change="{e => (acceptanceCriteria = e.detail.html)}"
+            <Editor
+              content="{acceptanceCriteria}"
+              placeholder="{$LL.planAcceptanceCriteriaPlaceholder()}"
               id="acceptanceCriteria"
-            ></div>
+              handleTextChange="{c => (acceptanceCriteria = c)}"
+            />
           </div>
         </div>
       {/if}

diff --git a/ui/src/components/storyboard/StoryForm.svelte b/ui/src/components/storyboard/StoryForm.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { quill } from '../../quill';
   import Modal from '../global/Modal.svelte';
   import HollowButton from '../global/HollowButton.svelte';
   import UserIcon from '../icons/UserIcon.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import TextInput from '../global/TextInput.svelte';
+  import Editor from '../Editor.svelte';
 
   export let toggleStoryForm = () => {};
   export let sendSocketEvent = () => {};
@@ -279,18 +279,15 @@
             Story Content
           </label>
           <div class="bg-white">
-            <div
-              class="w-full bg-white"
-              use:quill="{{
-                placeholder: 'Enter story content',
-                content: story.content,
-              }}"
-              on:text-change="{e => {
-                story.content = e.detail.html;
+            <Editor
+              content="{story.content}"
+              placeholder="Enter story content"
+              id="storyDescription"
+              handleTextChange="{c => {
+                story.content = c;
                 updateContent();
               }}"
-              id="storyDescription"
-            ></div>
+            />
           </div>
         </div>
         <div class="mb-4">