XImgDock 🖼️

XImgDock は、XHTML編集の体験を一新する VS Code 拡張機能です。コードを変更すると即座にライブプレビューへ反映され、デザインをリアルタイムで確認可能。さらに、画像ドックからワンクリックで画像を挿入できるため、わずらわしいウィンドウ切り替えや手動でのパス入力はもう不要です。直感的でスピーディーな制作フローを実現し、あなたのクリエイティブを加速します。

XImgDock revolutionizes XHTML editing in VS Code. Changes in code are instantly reflected in a live preview, allowing real-time design verification. Additionally, images can be inserted with a single click from the image dock, eliminating the need for cumbersome window switching or manual path input. Experience an intuitive and speedy workflow that accelerates your creativity.

🌟 主な機能 (Features)

• ライブプレビュー (Live Preview)

  • XHTML ファイルを編集すると、変更がリアルタイムでプレビューに反映されます。
  • Changes are reflected in the preview in real-time as you edit your XHTML file.

• 画像ギャラリー (Image Gallery)

  • 指定したフォルダ内の画像を一覧表示します。
  • Displays a list of images in the specified folder.

• ワンクリック画像挿入 (One-Click Image Insert)

  • 画像をクリックするだけで、カーソル位置に<img>タグを簡単に追加できます。
  • Simply click an image to insert an <img> tag at the cursor's position.

• 柔軟なカスタマイズ (Flexible Customization)

  • 挿入するタグのフォーマットや、ギャラリーの表示方法（ソート順、サムネイルサイズ）を自由に設定できます。
  • Freely configure the format of the inserted tag and the gallery's display options (sort order, thumbnail size).

🚀 使い方 (Usage)

1. HTML/XHTMLファイルを開く (Open an HTML/XHTML file)

   • エディタで .html または .xhtml ファイルを開きます。
   • Open a .html or .xhtml file in the editor.

2. プレビューを起動 (Open Preview)

   • エディタ右上の プレビューアイコン をクリックします。
   • Click the preview icon in the editor's top-right corner.
   • 現在のファイルのライブプレビューが、画面の横に新しいパネルとして表示されます。
   • A live preview of the current file will open in a new panel next to your editor.

3. 画像ギャラリーを表示 (Show Image Gallery)

   • エディタの右上（タブバー）に表示される カメラアイコン をクリックします。
   • Click the camera icon located in the top-right corner of the editor's tab bar.
   • プレビューの横に画像ギャラリーが開きます。Select Folder ボタンで画像フォルダを選択してください。
   • The image gallery opens next to the preview. Use the Select Folder button to select an image folder.

4. 画像を挿入 (Insert Image)

   • ギャラリーに表示された画像をクリックすると、アクティブなエディタのカーソル位置に画像タグが挿入され、ライブプレビューにも即座に反映されます。
   • Click an image in the gallery to insert its tag at the current cursor position, which will be instantly reflected in the live preview.

リリースノート (Release Notes)

0.0.1

• Initial release of XImgDock.
• ライブプレビューと画像ギャラリー機能を搭載。
• Features live preview and image gallery functionality.