detect-one-changed
Detect first changed html and markdown between old text and the new
Last updated a year ago by moyuyc .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install detect-one-changed 
SYNC missed versions from official npm registry.

detect-one-changed

Build status Test coverage NPM version NPM Downloads Prettier Conventional Commits

Detect first changed html and markdown between old text and the new

Live Demo

Table of Contents

Installation

npm install detect-one-changed
# or use yarn
yarn add detect-one-changed

Usage

Use it as an package

const { detectMarkdown } = require('detect-one-changed')

detectMarkdown('abcd\n\n# old', 'abcd\n\n# new').text
// => 'abcd\n\n<p class="detected-updated" style="">\n\n# new\n\n</p>\n'
const { detectMarkdown } = require('detect-one-changed')
const remark = require('remark')
const html = require('remark-html')

remark()
  .use(html)
  .stringify(detectMarkdown('abcd\n\n# old', 'abcd\n\n# new', { wrapType: 'ast' }).ast)
// => '<p>abcd</p>\n<h1 class="detected-updated">new</h1>\n'
const { detectHtml } = require('detect-one-changed')

detectHtml('<p>old</p>', '<p class="new-cls">new</p>').text
// => '<p class="detected-updated new-cls">new</p>'

Use it as webpack loader

More information please see loader's document and webpack example

  • Step one: (webpack.config.js)

    // ...
    devServer: {
      hot: true
    },
    module: {
      rules: [
        {
          test: /\.md$/,
          use: [
            process.env.NODE_ENV !== 'production' && {
              name: 'detect-one-changed/md-loader',
              options: { returnType: 'text' }
            }
            // { name: 'some-md-to-html-loader' },
          ].filter(Boolean)
        }
      ]
    }
    // ...
    
  • Step two (set up HMR in browser)

    function start() {
      document.querySelector('.markdown-body').innerHTML = require('./path/to/some.md')
    }
    
    if (module.hot) {
      module.hot.accept('./path/to/some.md', () => {
        // Injects highlight css text in <style/>
        require('!style-loader!css-loader!detect-one-changed/style.css')
        start()
    
        const node = document.querySelector('.markdown-body .detected-updated')
        if (node) {
          // Scroll to updated node
          node.scrollIntoView({ behavior: 'smooth' })
        }
      })
    }
    
  • Step three

    1. npm install webpack webpack-dev-server -D
    2. webpack-dev-server

Use in MDX

  • webpack.config.js
    ...
      {
        use: /\.mdx?$/,
        loaders: [
          {
            name: '@mdx-js/mdx-loader',
            options: {
              mdPlugin: [require('detect-one-changed/remark-plugin')]
            }
          }
        ]
      }
    
  • src/index.js (entry)

    import * as React from 'react'
    import { render } from 'react-dom'
    
    function start() {
      const Markdown = require('./markdown.mdx').default
      render(<Markdown />, document.querySelector('.markdown-body'))
    }
    
    start()
    
    if (module.hot && process.env.NODE_ENV !== 'production') {
      module.hot.accept(['./markdown.mdx'], () => {
        require('!style-loader!css-loader!detect-one-changed/style.css')
        start()
    
        const node = document.querySelector('.detected-updated')
        if (node) {
          node.scrollIntoView({ behavior: 'smooth' })
        }
      })
    }
    

API

See API

Related

  • live-markd - ????Github Favorite Markdown preview with live rendering & location and highlight changed block.

Contributing

  • Fork it!
  • Create your new branch:
    git checkout -b feature-new or git checkout -b fix-which-bug
  • Start your magic work now
  • Make sure npm test passes
  • Commit your changes:
    git commit -am 'feat: some description (close #123)' or git commit -am 'fix: some description (fix #123)'
  • Push to the branch: git push
  • Submit a pull request :)

Authors

This library is written and maintained by imcuttle, moyuyc95@gmail.com.

License

MIT - imcuttle ????

Current Tags

  • 2.1.2                                ...           latest (a year ago)

12 Versions

  • 2.1.2                                ...           a year ago
  • 2.1.1                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 2.0.2                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.3.1                                ...           2 years ago
  • 1.3.0                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (8)
Dependents (2)

Copyright 2014 - 2016 © taobao.org |