feat: 🎸 add parameter max length (#97)

Author: wrz199306

examples/svelte/src/App.svelte

@@ -24,6 +24,7 @@
   let value = '';
   let mode = 'auto';
   let localeKey = 'en';
+  let maxLength;
 
   $: currentLocale = locales[localeKey];
 
@@ -105,10 +106,16 @@
       <label> <input type="checkbox" bind:checked={enabled[p]} />{p}</label>
     {/each}
   </div>
+  <div class="line">
+    Maximum value of characters
+    <input bind:value={maxLength} type="number" />
+  </div>
+  
   <Editor
     {value}
     {mode}
     {plugins}
+    {maxLength}
     placeholder={'Start writing with ByteMD'}
     locale={currentLocale.bytemd}
     {uploadImages}

packages/bytemd/README.md

@@ -163,6 +163,7 @@ editor.$on('change', (e) => {
 | `editorConfig` | [documentation](https://codemirror.net/doc/manual.html#config) | CodeMirror editor config |
 | `locale` |  | i18n locale. Available locales could be found at `bytemd/lib/locales` |
 | `uploadImages` | `function` | Specify how to upload images |
+| `maxLength` | `number` | Maximum length (number of characters) of value |
 
 ## Style customization
 

packages/bytemd/src/editor.svelte

@@ -49,6 +49,7 @@
   export let locale: EditorProps['locale'];
   export let uploadImages: EditorProps['uploadImages'];
   export let overridePreview: EditorProps['overridePreview'];
+  export let maxLength: EditorProps['maxLength'];
 
   // do deep merge to support incomplete locales, use en as fallback
   $: mergedLocale = deepmerge(en, locale ?? {}) as BytemdLocale;
@@ -72,6 +73,7 @@
   let activeTab: false | 'write' | 'preview';
   let fullscreen = false;
   let sidebar: false | 'help' | 'toc' = false;
+  let islimited = false;
 
   $: styles = (() => {
     let edit: string;
@@ -220,7 +222,21 @@
       Tab: 'indentMore',
       'Shift-Tab': 'indentLess',
     });
-    editor.on('change', (doc, change) => {
+
+    editor.on('beforeChange', (editor, change) => {
+      if (maxLength && change.update) {
+        let str = change.text.join('\n');
+        const to = editor.indexFromPos(change.to);
+        const from = editor.indexFromPos(change.from);
+        const offset = editor.getValue().length + (str.length - (to - from)) - maxLength;
+        islimited = offset >= 0
+        if (islimited) {
+          str = str.substr(0, str.length - offset);
+          change.update(change.from, change.to, str.split('\n'));
+        }
+      }
+    })
+    editor.on('change', () => {
       dispatch('change', { value: editor.getValue() });
     });
 
@@ -462,6 +478,7 @@
     showSync={!overridePreview && split}
     value={debouncedValue}
     {syncEnabled}
+    {islimited}
     on:sync={(e) => {
       syncEnabled = e.detail;
     }}

packages/bytemd/src/locales/en.json

@@ -23,7 +23,8 @@
     "words": "Words",
     "lines": "Lines",
     "sync": "Scroll sync",
-    "top": "Scroll to top"
+    "top": "Scroll to top",
+    "limited": "The maximum character limit has been reached"
   },
   "action": {
     "h1": "Heading 1",

packages/bytemd/src/locales/zh_Hans.json

@@ -47,7 +47,8 @@
         "top": "回到顶部",
         "sync": "同步滚动",
         "lines": "行数",
-        "words": "字数"
+        "words": "字数",
+        "limited": "已达最大字符数限制"
     },
     "sidebar": {
         "shortcuts": "快捷键",

packages/bytemd/src/status.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import type { BytemdLocale } from './types';
-  import wordCount from 'word-count';
   import { createEventDispatcher } from 'svelte';
+  const wordCount = require('word-count');
 
   export let showSync: boolean;
   export let value: string;
   export let syncEnabled: boolean;
   export let locale: BytemdLocale;
+  export let islimited: boolean;
 
   const dispatch = createEventDispatcher();
 
@@ -22,6 +23,9 @@
     <span>
       {locale.status.lines}: <strong>{lines}</strong>
     </span>
+    {#if islimited}
+      <span class="danger">{locale.status.limited}</span>
+    {/if}
   </div>
 
   <div class="bytemd-status-right">

packages/bytemd/src/types.ts

@@ -157,6 +157,10 @@ export interface EditorProps extends ViewerProps {
    * If specified, the built-in viewer would not take effect.
    */
   overridePreview?(el: HTMLElement, props: ViewerProps): void;
+  /**
+   * Maximum length (number of characters) of value
+   */
+   maxLength?: number;
 }
 
 export interface ViewerProps {

packages/bytemd/styles/index.scss

@@ -264,6 +264,9 @@ $max-width: 800px;
       float: left;
       span {
         padding-left: 16px;
+        &.danger {
+          color: $red-500;
+        }
       }
       strong {
         font-weight: 600;