Skip to content

Markdown Editorのプレビュー画面をVIrtualDOMで組み立てる

License

Notifications You must be signed in to change notification settings

shimizukawa/vue-md-editor-vdom

Repository files navigation

vue-markdown-preview-virtualdom

Addressing a problem with the Markdown editor and its preview, where all the elements in the preview are updated each typing.

  • The display by v-html redraws all elements for each character entered.
  • By breaking up the HTML into Vue's VirtualDOM and rendering it, only the change differences on the preview are updated.
  • This eliminates problems such as reloading images and the resulting scrolling misalignment.

Explanation blog entries:

日本語

Markdown エディタとそのプレビューを作るときに、プレビューのエレメントが文字入力ごとに全て更新されてしまう問題の対処。

  • v-htmlによる表示は1文字入力毎に全てのエレメントを再描画します。
  • HTMLをVueのVirtualDOMに分解してレンダリングすることで、プレビュー上の変更差分だけが更新されます。
  • これによって、画像の再ロードや、それに伴うスクロール位置のズレなどの問題を解消できます。

licenses

v-html vs VirtualDom

20231125-demo-1.mp4

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

You should invoke proxy process to use block-link rendering feature,

npm run proxy

Type-Check, Compile and Minify for Production

npm run build