detect-one-changed

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

Live Demo

Table of Contents

• Installation
• Usage
• API
• Related
• Contributing
• Authors
• License

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 🐟