Skip to content

imcuttle/detect-one-changed

Repository files navigation

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 🐟