feat(core): add list buttons: ul, ol and task

bytedance · Mar 26, 2020 · f172948 · f172948
1 parent 60d9e02
commit f172948
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/packages/bytemd/src/Toolbar.svelte b/packages/bytemd/src/Toolbar.svelte
@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher } from 'svelte';
   import ToolbarButton from './ToolbarButton.svelte'
-  import { handleDec, handleTag, handleBlockquote, handleLink, handleImage, handleTable, handleHeading } from './utils.js'
+  import { handleDec, handleTag, handleBlockquote, handleLink, handleImage, handleTable, handleHeading, handleOl, handleUl, handleTask } from './utils.js'
 
   import heading from 'icons/heading.svg'
   import bold from 'icons/bold.svg'
@@ -10,6 +10,9 @@
   import image from 'icons/image.svg'
   import server from 'icons/server.svg'
   import link from 'icons/link.svg'
+  import iconOl from 'icons/list-ordered.svg'
+  import iconUl from 'icons/list-unordered.svg'
+  import task from 'icons/tasklist.svg'
 
   const dispatch = createEventDispatcher();
 
@@ -59,6 +62,9 @@
   <ToolbarButton tooltip="link" on:click={() => handleLink(cm)}>{@html link}</ToolbarButton>
   <ToolbarButton tooltip="image" on:click={() => fileInput.click()}>{@html image}</ToolbarButton>
   <ToolbarButton tooltip="table" on:click={() => handleTable(cm)}>{@html server}</ToolbarButton>
+  <ToolbarButton tooltip="ordered list" on:click={() => handleOl(cm)}>{@html iconOl}</ToolbarButton>
+  <ToolbarButton tooltip="unordered list" on:click={() => handleUl(cm)}>{@html iconUl}</ToolbarButton>
+  <ToolbarButton tooltip="task list" on:click={() => handleTask(cm)}>{@html task}</ToolbarButton>
 
   {#each plugins as plugin}
     {#if plugin.toolbarItems}

diff --git a/packages/bytemd/src/utils.ts b/packages/bytemd/src/utils.ts
@@ -110,3 +110,47 @@ export function handleTable(cm: Editor) {
   cm.setCursor({ line: pos.line + 1, ch: 2 });
   cm.focus();
 }
+
+export function handleOl(cm: Editor) {
+  if (cm.somethingSelected()) {
+    const [selection] = cm.listSelections();
+    for (let i = selection.anchor.line; i <= selection.head.line; i++) {
+      cm.replaceRange(
+        `${i - selection.anchor.line + 1}. ${cm.getLine(i)}`,
+        { line: i, ch: 0 },
+        { line: i },
+      );
+    }
+  } else {
+    cm.replaceRange('\n\n1. \n\n', cm.getCursor());
+  }
+  cm.focus();
+}
+
+export function handleUl(cm: Editor) {
+  if (cm.somethingSelected()) {
+    const [selection] = cm.listSelections();
+    for (let i = selection.anchor.line; i <= selection.head.line; i++) {
+      cm.replaceRange(`- ${cm.getLine(i)}`, { line: i, ch: 0 }, { line: i });
+    }
+  } else {
+    cm.replaceRange('\n\n- \n\n', cm.getCursor());
+  }
+  cm.focus();
+}
+
+export function handleTask(cm: Editor) {
+  if (cm.somethingSelected()) {
+    const [selection] = cm.listSelections();
+    for (let i = selection.anchor.line; i <= selection.head.line; i++) {
+      cm.replaceRange(
+        `- [ ] ${cm.getLine(i)}`,
+        { line: i, ch: 0 },
+        { line: i },
+      );
+    }
+  } else {
+    cm.replaceRange('\n\n- [ ] \n\n', cm.getCursor());
+  }
+  cm.focus();
+}