feat: blockquote button

Author: pd4d10

.gitignore

@@ -3,5 +3,5 @@
 node_modules
 dist
 
-packages/plugin-*/src/index.js
-packages/plugin-*/src/index.d.ts
+packages/plugin-*/src/*.js
+packages/plugin-*/src/*.d.ts

packages/bytemd/.gitignore

@@ -2,3 +2,6 @@
 /public/build/
 
 .DS_Store
+
+src/editor.js
+src/editor.d.ts

packages/bytemd/src/Toolbar.svelte

@@ -1,28 +1,6 @@
 <script>
+  import { handleDec, handleBlockquote } from './editor.js'
   export let cm;
-
-  function handleDec(e, decorator) {
-    e.preventDefault()
-
-    if (cm.somethingSelected()) {
-      cm.replaceSelection(decorator + cm.getSelection() + decorator);
-    } else {
-      const { anchor, head } = cm.findWordAt(cm.getCursor());
-      const word = cm.getRange(anchor, head);
-      cm.replaceRange(decorator + word + decorator, anchor, head);
-    }
-    cm.focus();
-  }
-  function handleBold(e) {
-    return handleDec(e, '**');
-  }
-  function handleItalic(e) {
-    return handleDec(e, '*');
-  }
-  function handleStrikethrough(e) {
-    return handleDec(e, '~~');
-  }
-  function handleBlockquote() {}
 </script>
 
 <style>
@@ -48,8 +26,8 @@
 </style>
 
 <div>
-  <span on:click={handleBold}><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/></svg></span>
-  <span on:click={handleItalic}><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/></svg></span>
-  <span on:click={handleStrikethrough}><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"/></svg></span>
-  <span on:click={handleBlockquote}><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg></span>
+  <span on:click={() => handleDec(cm, '**')}><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/></svg></span>
+  <span on:click={() => handleDec(cm, '*')}><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/></svg></span>
+  <span on:click={() => handleDec(cm, '~~')}><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"/></svg></span>
+  <span on:click={() => handleBlockquote(cm)}><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg></span>
 </div>

packages/bytemd/src/editor.ts

@@ -0,0 +1,29 @@
+import { Editor } from 'codemirror';
+
+export function handleDec(cm: Editor, decorator: string) {
+  if (cm.somethingSelected()) {
+    cm.replaceSelection(decorator + cm.getSelection() + decorator);
+  } else {
+    const { anchor, head } = cm.findWordAt(cm.getCursor());
+    const word = cm.getRange(anchor, head);
+    cm.replaceRange(decorator + word + decorator, anchor, head);
+  }
+  cm.focus();
+}
+
+export function handleBlockquote(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 {
+    const { line } = cm.getCursor();
+    const content = cm.getLine(line);
+    if (content.startsWith('> ')) {
+      cm.replaceRange(content.slice(2), { line, ch: 0 }, { line });
+    } else {
+      cm.replaceRange('> ' + content, { line, ch: 0 }, { line });
+    }
+  }
+}

tsconfig.json

@@ -6,7 +6,8 @@
     "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
     "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
     "lib": [
-      "ESNext"
+      "ESNext",
+      "DOM"
     ] /* Specify library files to be included in the compilation. */,
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */