quilljs-markdown - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

docs/demo.js

 import Quill from 'quill'
-import MarkdownActivity from '../src/app'
+import QuillMarkdown from '../src/app'
 
-
 const options = {
   theme: 'snow'
-};
+}
 
-addEventListener('DOMContentLoaded', () => {
-  const editor = new Quill('#editor', options);
-  new MarkdownActivity(editor)
+document.addEventListener('DOMContentLoaded', () => {
+  const editor = new Quill('#editor', options)
+  new QuillMarkdown(editor)
 })
-

index.js

 import QuillMarkdownActivity from './src/app'
 
 export default QuillMarkdownActivity

jest.config.js

@@ -0,0 +0,0 @@ // For a detailed explanation regarding each configuration property, visit:

package.json

 {
   "name": "quilljs-markdown",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Markdown for Quill Editor",
-  "main": "index.js",
+  "main": "dist/quilljs-markdown.js",
   "scripts": {
     "clean": "node_modules/.bin/rimraf ./dist",
-    "docs-build": "node_modules/.bin/npm-run-all clean docs-build:*",
-    "docs-build:module": "node_modules/.bin/webpack --config webpack.config.docs.js",
-    "build": "node_modules/.bin/npm-run-all clean build:*",
-    "build:module": "node_modules/.bin/webpack --config webpack.config.js",
-    "test": "node_modules/.bin/npm-run-all test:*",
-    "test:unit-test": "node_modules/.bin/jest --config jest.config.js",
-    "test:checkstyle": "node_modules/.bin/standard --verbose | node_modules/.bin/snazzy"
+    "watch": "parcel ./docs/index.html",
+    "build": "npm-run-all clean build:* docs-build:*",
+    "build:module": "webpack --config webpack.config.js",
+    "docs-build": "npm-run-all clean docs-build:*",
+    "docs-build:module": "webpack --config webpack.config.docs.js",
+    "test": "npm-run-all test:*",
+    "test:unit-test": "jest --config jest.config.js",
+    "test:checkstyle": "standard --verbose | node_modules/.bin/snazzy"
   },
@@ -40,16 +41,17 @@ "repository": {
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@babel/preset-env": "^7.1.6",
-    "@babel/register": "^7.0.0",
-    "babel-loader": "^8.0.2",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/register": "^7.11.5",
+    "babel-loader": "^8.1.0",
     "jest": "^23.6.0",
     "npm-run-all": "^4.1.5",
-    "quill": "^1.3.6",
-    "rimraf": "^2.6.2",
+    "parcel-bundler": "^1.12.4",
+    "quill": "^1.3.7",
+    "rimraf": "^2.7.1",
     "snazzy": "^8.0.0",
     "standard": "^12.0.1",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "webpack": "^4.26.1",
-    "webpack-cli": "^3.1.2"
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12"
   }
 }

README.md

@@ -12,3 +12,3 @@ # Markdown for Quill Editor
 
-## How to use
+## How to install
 ```
@@ -18,12 +18,53 @@ npm i quilljs-markdown
 
+## How to use
+```
+import Quill from 'quill'
+import QuillMakrdown from 'quilljs-markdown'
+
+const editor = new Quill('#editor', options)
+new QuillMarkdown(editor)
+
+```
+
+or 
+
+```
+
+```
+
 ### Heading
-`# MyTitle`
+```
+# MyTitle
+## MyTitle
+### MyTitle
+#### MyTitle
+##### MyTitle
+```
 
 ### Blockquote
-`> blockquote text`
+```
+> blockquote text
+```
 
 ### bold
-`**Bold Text**`
+```
+**Bold Text**
+```
 
 ### Link
-`[link text](https://link_url)`
+```
+[link text](https://link_url)
+```
+
+### inline code
+```
+`inline code block`
+```
+
+
+### Code block
+
+&#96;&#96;&#96;<br>
+code block<br>
+&#96;&#96;&#96;<br>
+

src/app.js

@@ -10,3 +10,6 @@ import TagsOperators from './tags'
       whiteSpace: ' ',
-      newLine: '\n'
+      newLine: '\n',
+      asterisk: '*',
+      rightParenthesis: ')',
+      grave: '`'
     }
@@ -19,12 +22,20 @@ this.ignoreTags = ['PRE']
   onTextChange (delta, oldContents, source) {
+    console.log('dd ', delta)
     delta.ops.filter(e => e.hasOwnProperty('insert')).forEach(e => {
       switch (e.insert) {
         case this.actionCharacters.whiteSpace:
-          this.onQuery.bind(this)()
+          this.onInlineExecute.bind(this)()
           break
+        case this.actionCharacters.asterisk:
+        case this.actionCharacters.rightParenthesis:
+        case this.actionCharacters.grave:
         case this.actionCharacters.newLine:
-          this.onExecute.bind(this)()
+          this.onFullTextExecute.bind(this)()
           break
       }
     })
+
+    delta.ops.filter(e => e.hasOwnProperty('delete')).forEach((e) => {
+      this.onRemoveElement(e)
+    })
   }
@@ -36,7 +47,7 @@
       text &&
-      this.ignoreTags.indexOf(tagName) === -1
+      !this.ignoreTags.find(e => e === tagName)
     )
   }
 
-  onQuery () {
+  onInlineExecute () {
     const selection = this.quillJS.getSelection()
@@ -58,10 +69,22 @@ if (!selection) return
 
-  onExecute () {
+  onFullTextExecute () {
     let selection = this.quillJS.getSelection()
     if (!selection) return
     const [line, offset] = this.quillJS.getLine(selection.index)
+    const lineStart = selection.index - offset
+    const beforeNode = this.quillJS.getLine(lineStart - 1)[0]
+    const beforeLineText = beforeNode && beforeNode.domNode.textContent
     const text = line.domNode.textContent + ' '
-    const lineStart = selection.index - offset
     selection.length = selection.index++
     if (this.isValid(text, line.domNode.tagName)) {
+
+      // remove block rule.
+      if (typeof beforeLineText === 'string' && beforeLineText.length > 0 && text === ' ') {
+        const releaseTag = this.matches.find(e => e.name === line.domNode.tagName.toLowerCase())
+        if (releaseTag && releaseTag.release) {
+          releaseTag.release(selection)
+          return
+        }
+      }
+
       for (let match of this.matches) {
@@ -76,4 +99,17 @@ const matchedText = text.match(match.pattern)
   }
+
+  onRemoveElement(range) {
+    const selection = this.quillJS.getSelection()
+    // if removed one item before, editor need to clear item.
+    if (range && range.delete === 1) {
+      const removeItem = this.quillJS.getLine(selection.index)
+      const lineItem = removeItem[0]
+      const releaseTag = this.matches.find(e => e.name === lineItem.domNode.tagName.toLowerCase())
+      if (releaseTag && releaseTag.release) {
+        releaseTag.release(selection)
+      }
+    }
+  }
 }
 
 export default MarkdownActivity

src/tags/blockquote/index.js

@@ -13,11 +13,18 @@ class Blockquote {
       pattern: this.pattern,
-      action: (text, selection, pattern, lineStart) => {
+      action: (text, selection, pattern) => {
         const match = pattern.exec(text)
-        if (!match) return
-        const size = match[0].length
+        if (!match) { return }
+        const originalText = match[0] || ''
         setTimeout(() => {
-          this.quillJS.formatLine(selection.index, 1, 'blockquote', true)
-          this.quillJS.deleteText(selection.index - 2, 2)
-          if (lineStart + 1 === this.quillJS.editor.delta.length()) {
-            this.quillJS.format('blockquote', false)
+          this.quillJS.formatText(selection.index, 1, 'blockquote', true)
+          this.quillJS.deleteText(selection.index - originalText.length, originalText.length)
+        }, 0)
+      },
+      release: () => {
+        setTimeout(() => {
+          this.quillJS.format('blockquote', false)
+          const contentIndex = this.quillJS.getSelection().index
+          const beforeLine = this.quillJS.getLine(contentIndex - 1)[0]
+          if (beforeLine.domNode.textContent === '') {
+            beforeLine.format('blockquote', false)
           }
@@ -24,0 +31,0 @@ }, 0)

src/tags/bold/index.js

@@ -19,3 +19,2 @@ class Bold {
         const startIndex = lineStart + match.index
-
         if (text.match(/^([*_ \n]+)$/g)) return
@@ -22,0 +21,0 @@

src/tags/header/index.js

@@ -0,0 +0,0 @@ class Header {

src/tags/index.js

 import Header from './header'
 import Blockquote from './blockquote'
 import Bold from './bold'
+import InlineCode from './inlinecode'
 import Link from './link'
+import Codeblock from './codeblock'
 
@@ -14,3 +16,5 @@ class TagsOperators {
       new Bold(this.quillJS).getAction(),
-      new Link(this.quillJS).getAction()
+      new Link(this.quillJS).getAction(),
+      new Codeblock(this.quillJS).getAction(),
+      new InlineCode(this.quillJS).getAction()
     ]
@@ -17,0 +21,0 @@ }

src/tags/link/index.js

@@ -0,0 +0,0 @@ class Link {

tests/app.test.js

 test('empty', () => {
   
 });

webpack.config.docs.js

@@ -0,0 +0,0 @@ const path = require('path')

webpack.config.js

@@ -0,0 +0,0 @@ const path = require('path')

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1111144

increased by4.43%

Number of package files

22

increased by15.79%

Lines of code

1530

increased by12.67%

Number of lines in readme file

69

increased by146.43%

Worsened metrics

Dev dependency count

14

increased by7.69%

No dependency changes