yud0uhu/mditor

マークダウンエディタ

mDitor

Module

vue3-markdown-it

https://github.com/JanGuillermo/vue3-markdown-it

highlight.js

https://highlightjs.org/

• デモ

Sample

Tips

https://zenn.dev/denham/scraps/f98df08b8fdb75

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

mditor's Issues

googleカレンダーと連携したい

https://developers.google.com/calendar/api/v3/reference/events/insert

ツールバーの作成

• コンポーネント分割

大きめのテキストファイルを読み込むと固まる

• フォーマットをテキストファイルのみにする(ワードファイルなどは弾く)
• 読み込みの際にファイル容量の確認ポップアップを出す
• 文字コードのコンバート設定を見直す(現状UTF8にコンバートしている)

オートセーブできるようにする

ファイルの保存/読み込みで拡張子が選択できない

キーボードショートカットを追加する

日本語入力に対応する

textareaの入力を日本語対応させる

前準備

• WSL2上のGUI(VcXsrv)を日本語入力(Mozc)に対応させる

(dbus-x11は入れている前提)

sudo apt update
sudo apt install -y fcitx-bin fcitx-mozc language-pack-ja 
sudo update-locale LANG=ja_JP.UTF8

cat << EOS | sudo tee /etc/fonts/local.conf
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig><dir>/mnt/c/Windows/Fonts</dir></fontconfig>
EOS

cat << EOS >> ~/.profile
export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS=@im=fcitx
export DefaultIMModule=fcitx
fcitx-autostart &> /dev/null
EOS

参考
WSL2上のGUI(wslg)で日本語入力を行う際の最低限の設定
WSLでMozcで日本語入力

Viewボタンに目次機能をつける

ほぼHackMDそのままのイメージ
見出しの列の文字列を画面左側に表示する(gap1:3くらい)

エディタの表示/非表示をリアクティブに切り替え可能にする

• エディタの表示/非表示をボタンクリックで切り替え可能にする
• いずれかビューのみがアクティブなとき、ビューのサイズを拡大する

googleカレンダーに遷移してからエディタに戻れない

window.open(url, "_blank");

で対処

起動が若干もっさりしてる