import React, {  } from 'react'
export default function MarkdownEdit() {
    return (
        <div className="markdownEditConainer">
            <textarea className="edit" />
            <div className="show" />
        </div>
    )
}

import React, { useState } from 'react'
// 1. 引入markdown-it庫(kù)
import markdownIt from 'markdown-it'
// 2. 生成實(shí)例對(duì)象
const md = new markdownIt()
export default function MarkdownEdit() {
    const [htmlString, setHtmlString] = useState('')  // 存儲(chǔ)解析后的html字符串
    // 3. 解析markdown語(yǔ)法
    const parse = (text: string) => setHtmlString(md.render(text));
    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                onChange={(e) => parse(e.target.value)} // 編輯區(qū)內(nèi)容每次修改就更新變量htmlString的值
            />
            <div 
                className="show" 
                dangerouslySetInnerHTML={{ __html: htmlString }} // 將html字符串解析成真正的html標(biāo)簽
            />
        </div>
    )
}

<h1 id="">大標(biāo)題</h1>
<blockquote>
  <p>本文來(lái)自公眾號(hào)：前端印象</p>
</blockquote>
<pre><code class="js language-js">let name = '零一'
</code></pre>

import React, { useState } from 'react'
import './theme/github-theme.css'  // 引入github的markdown主題樣式
import markdownIt from 'markdown-it'
const md = new markdownIt()
export default function MarkdownEdit() {
    const [htmlString, setHtmlString] = useState('')
    const parse = (text: string) => setHtmlString(md.render(text));
    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"  // 新增write的ID名 
                dangerouslySetInnerHTML={{ __html: htmlString }}
            />
        </div>
    )
}

import React, { useState, useEffect } from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'
import hljs from 'highlight.js'  // 引入highlight.js庫(kù)
import 'highlight.js/styles/github.css'  // 引入github風(fēng)格的代碼高亮樣式
const md = new markdownIt({
    // 設(shè)置代碼高亮的配置
    highlight: function (code, language) {      
        if (language && hljs.getLanguage(language)) {
          try {
            return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language  }).value +
                   '</code></pre>';
          } catch (__) {}
        }
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})
export default function MarkdownEdit() {
    const [htmlString, setHtmlString] = useState('')
    const parse = (text: string) => setHtmlString(md.render(text));
    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"
                dangerouslySetInnerHTML={{ __html: htmlString }}
            />
        </div>
    )
}

import React, { useState, useRef, useEffect } from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'  
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css' 
const md = new markdownIt({
    highlight: function (code, language) {      
        if (language && hljs.getLanguage(language)) {
          try {
            return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language  }).value +
                   '</code></pre>';
          } catch (__) {}
        }
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})
export default function MarkdownEdit() {
    const [htmlString, setHtmlString] = useState('')
    const edit = useRef(null)  // 編輯區(qū)元素
    const show = useRef(null)  // 展示區(qū)元素
    const parse = (text: string) => setHtmlString(md.render(text));
    // 處理區(qū)域的滾動(dòng)事件
    const handleScroll = (block: number, event) => {
        let { scrollHeight, scrollTop } = event.target
        let scale = scrollTop / scrollHeight  // 滾動(dòng)比例
        // 當(dāng)前滾動(dòng)的是編輯區(qū)
        if(block === 1) {
            // 改變展示區(qū)的滾動(dòng)距離
            let { scrollHeight } = show.current
            show.current.scrollTop = scrollHeight * scale
        } else if(block === 2) {  // 當(dāng)前滾動(dòng)的是展示區(qū)
            // 改變編輯區(qū)的滾動(dòng)距離
            let { scrollHeight } = edit.current
            edit.current.scrollTop = scrollHeight * scale
        }
    }
    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                ref={edit}
                onScroll={(e) => handleScroll(1, e)}
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"
                ref={show}
                onScroll={(e) => handleScroll(2, e)}
                dangerouslySetInnerHTML={{ __html: htmlString }}
            />
        </div>
    )
}

import React, { useState, useRef, useEffect } from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'  
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
const md = new markdownIt({
    highlight: function (code, language) {      
        if (language && hljs.getLanguage(language)) {
          try {
            return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language  }).value +
                   '</code></pre>';
          } catch (__) {}
        }
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})
let scrolling: 0 | 1 | 2 = 0  // 0: none; 1: 編輯區(qū)主動(dòng)觸發(fā)滾動(dòng); 2: 展示區(qū)主動(dòng)觸發(fā)滾動(dòng)
let scrollTimer;  // 結(jié)束滾動(dòng)的定時(shí)器
export default function MarkdownEdit() {
    const [htmlString, setHtmlString] = useState('')
    const edit = useRef(null) 
    const show = useRef(null)  
    const parse = (text: string) => setHtmlString(md.render(text));
    const handleScroll = (block: number, event) => {
        let { scrollHeight, scrollTop } = event.target
        let scale = scrollTop / scrollHeight  
        if(block === 1) {
            if(scrolling === 0) scrolling = 1;  // 記錄主動(dòng)觸發(fā)滾動(dòng)的區(qū)域
            if(scrolling === 2) return;    // 當(dāng)前是「展示區(qū)」主動(dòng)觸發(fā)的滾動(dòng)，因此不需要再驅(qū)動(dòng)展示區(qū)去滾動(dòng)
            driveScroll(scale, showRef.current)  // 驅(qū)動(dòng)「展示區(qū)」的滾動(dòng)
        } else if(block === 2) {  
            if(scrolling === 0) scrolling = 2;
            if(scrolling === 1) return;    // 當(dāng)前是「編輯區(qū)」主動(dòng)觸發(fā)的滾動(dòng)，因此不需要再驅(qū)動(dòng)編輯區(qū)去滾動(dòng)
            driveScroll(scale, editRef.current)
        }
    }
    // 驅(qū)動(dòng)一個(gè)元素進(jìn)行滾動(dòng)
    const driveScroll = (scale: number, el: HTMLElement) => {
        let { scrollHeight } = el
        el.scrollTop = scrollHeight * scale
        if(scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            scrolling = 0    // 在滾動(dòng)結(jié)束后，將scrolling設(shè)為0，表示滾動(dòng)結(jié)束
            clearTimeout(scrollTimer)
        }, 200)
    }
    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                ref={edit}
                onScroll={(e) => handleScroll(1, e)}
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"
                ref={show}
                onScroll={(e) => handleScroll(2, e)}
                dangerouslySetInnerHTML={{ __html: htmlString }}
            />
        </div>
    )
}

import React, { useState, useRef, useEffect } from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'  
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
const md = new markdownIt({
    highlight: function (code, language) {      
        if (language && hljs.getLanguage(language)) {
          try {
            return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language  }).value +
                   '</code></pre>';
          } catch (__) {}
        }
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})
let scrolling: 0 | 1 | 2 = 0  
let scrollTimer;  
export default function MarkdownEdit() {
    const [htmlString, setHtmlString] = useState('')
    const edit = useRef(null) 
    const show = useRef(null)  
    const parse = (text: string) => setHtmlString(md.render(text));
    const handleScroll = (block: number, event) => {
        let { scrollHeight, scrollTop, clientHeight } = event.target
        let scale = scrollTop / (scrollHeight - clientHeight)  // 改進(jìn)后的計(jì)算滾動(dòng)比例的方法
        if(block === 1) {
            if(scrolling === 0) scrolling = 1;  
            if(scrolling === 2) return;    
            driveScroll(scale, showRef.current)  
        } else if(block === 2) {  
            if(scrolling === 0) scrolling = 2;
            if(scrolling === 1) return;    
            driveScroll(scale, editRef.current)
        }
    }
    // 驅(qū)動(dòng)一個(gè)元素進(jìn)行滾動(dòng)
    const driveScroll = (scale: number, el: HTMLElement) => {
        let { scrollHeight, clientHeight } = el
        el.scrollTop = (scrollHeight - clientHeight) * scale  // scrollTop的同比例滾動(dòng)
        if(scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            scrolling = 0   
            clearTimeout(scrollTimer)
        }, 200)
    }
    return (
        <div className="markdownEditConainer">
            <textarea 
                className="edit" 
                ref={edit}
                onScroll={(e) => handleScroll(1, e)}
                onChange={(e) => parse(e.target.value)} 
            />
            <div 
                className="show"
                id="write"
                ref={show}
                onScroll={(e) => handleScroll(2, e)}
                dangerouslySetInnerHTML={{ __html: htmlString }}
            />
        </div>
    )
}

import React, { useState, useRef, useEffect } from 'react'
import markdownIt from 'markdown-it'
import './theme/github-theme.css'  
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
const md = new markdownIt({
    highlight: function (code, language) {      
        if (language && hljs.getLanguage(language)) {
          try {
            return `<pre><code class="hljs language-${language}">` +
                   hljs.highlight(code, { language  }).value +
                   '</code></pre>';
          } catch (__) {}
        }
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(code) + '</code></pre>';
    }
})
let scrolling: 0 | 1 | 2 = 0  
let scrollTimer;  
export default function MarkdownEdit() {
    const [htmlString, setHtmlString] = useState('')
    const [value, setValue] = useState('')   // 編輯區(qū)的文字內(nèi)容
    const edit = useRef(null) 
    const show = useRef(null)  
    const handleScroll = (block: number, event) => {
        let { scrollHeight, scrollTop, clientHeight } = event.target
        let scale = scrollTop / (scrollHeight - clientHeight)  
        if(block === 1) {
            if(scrolling === 0) scrolling = 1;  
            if(scrolling === 2) return;    
            driveScroll(scale, showRef.current)  
        } else if(block === 2) {  
            if(scrolling === 0) scrolling = 2;
            if(scrolling === 1) return;    
            driveScroll(scale, editRef.current)
        }
    }
    // 驅(qū)動(dòng)一個(gè)元素進(jìn)行滾動(dòng)
    const driveScroll = (scale: number, el: HTMLElement) => {
        let { scrollHeight, clientHeight } = el
        el.scrollTop = (scrollHeight - clientHeight) * scale  
        if(scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            scrolling = 0   
            clearTimeout(scrollTimer)
        }, 200)
    }
    // 加粗工具
    const addBlod = () => {
        // 獲取編輯區(qū)光標(biāo)的位置。未選中文字時(shí)：selectionStart === selectionEnd ；選中文字時(shí)：selectionStart < selectionEnd
        let { selectionStart, selectionEnd } = edit.current
        let newValue = selectionStart === selectionEnd
                        ? value.slice(0, start) + '**加粗文字**' + value.slice(end)
                        : value.slice(0, start) + '**' + value.slice(start, end) + '**' + value.slice(end)
        setValue(newValue)
    }
    useEffect(() => {
        // 編輯區(qū)內(nèi)容改變，更新value的值，并同步渲染
        setHtmlString(md.render(value))
    }, [value])
    return (
        <div className="markdownEditConainer">
            <button onClick={addBlod}>加粗</button>   {/* 假設(shè)一個(gè)加粗的按鈕 */}
            <textarea 
                className="edit" 
                ref={edit}
                onScroll={(e) => handleScroll(1, e)}
                onChange={(e) => setValue(e.target.value)}   // 直接修改value的值，useEffect會(huì)同步渲染展示區(qū)的內(nèi)容
                value={value}
            />
            <div 
                className="show"
                id="write"
                ref={show}
                onScroll={(e) => handleScroll(2, e)}
                dangerouslySetInnerHTML={{ __html: htmlString }}
            />
        </div>
    )
}