fix: refine max length prop

pd4d10 · Jul 8, 2021 · 657b4d3 · 657b4d3
1 parent 634b94e
commit 657b4d3
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 21 deletions.
diff --git a/packages/bytemd/src/editor.svelte b/packages/bytemd/src/editor.svelte
@@ -43,7 +43,7 @@
   export let locale: EditorProps['locale']
   export let uploadImages: EditorProps['uploadImages']
   export let overridePreview: EditorProps['overridePreview']
-  export let maxLength: EditorProps['maxLength']
+  export let maxLength: NonNullable<EditorProps['maxLength']> = Infinity
 
   $: mergedLocale = { ...en, ...locale }
   const dispatch = createEventDispatcher()
@@ -65,7 +65,6 @@
   let activeTab: false | 'write' | 'preview'
   let fullscreen = false
   let sidebar: false | 'help' | 'toc' = false
-  let islimited = false
 
   $: styles = (() => {
     let edit: string
@@ -215,20 +214,6 @@
       'Shift-Tab': 'indentLess',
     })
 
-    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() })
     })
@@ -471,7 +456,7 @@
     showSync={!overridePreview && split}
     value={debouncedValue}
     {syncEnabled}
-    {islimited}
+    islimited={value.length > maxLength}
     on:sync={(e) => {
       syncEnabled = e.detail
     }}

diff --git a/packages/bytemd/src/status.svelte b/packages/bytemd/src/status.svelte
@@ -24,7 +24,7 @@
       {locale.lines}: <strong>{lines}</strong>
     </span>
     {#if islimited}
-      <span class="danger">{locale.limited}</span>
+      <span class="bytemd-status-error">{locale.limited}</span>
     {/if}
   </div>
 

diff --git a/packages/bytemd/styles/index.scss b/packages/bytemd/styles/index.scss
@@ -264,9 +264,6 @@ $max-width: 800px;
       float: left;
       span {
         padding-left: 16px;
-        &.danger {
-          color: $red-500;
-        }
       }
       strong {
         font-weight: 600;
@@ -287,6 +284,9 @@ $max-width: 800px;
         margin-right: 3px; // CSS reset
       }
     }
+    &-error {
+      color: $red-500;
+    }
   }
 
   &-fullscreen {