2020-05-25 ,

org-modeのインライン画像をリアルタイムで更新する

(追記: https://github.com/misohena/org-inline-image-fix/blob/master/org-flyimage.el にソースコードを上げました。org-flyimage-modeというマイナーモードにしてあります)

org-modeには画像へのリンクをインライン表示する機能(org-toggle-inline-images (C-c C-x C-v))がありますが、私はたまにしか使っていませんでした。

理由は色々あるのですが、その一つが画像を瞬時に更新してくれないこと。画像のへのリンクを修正したり追加したりしても自動的に画像を更新してくれません。コメントアウトしても表示されたまま。org-redisplay-inline-images (C-c C-x C-M-v)で更新できるのですが、これはいったん全ての画像を消してから再表示するため画像が多いととても時間がかかります。それだといっそのこと画像なんて表示せずに編集して、まとまったところでhtmlにでもエクスポートして確認すれば済んでしまいます。

というわけで編集するそばから自動的に画像を更新させるのが次のコードです。

(defvar org-flyimage-in-activate-links nil)

(defun org-flyimage-activate-links (old-func limit)
  (let ((org-flyimage-in-activate-links t))
    (funcall old-func limit)))

(defun org-flyimage-remove-inline-images-in (beg end)
  ;; is faster to use (overlays-in beg end) ?
  (loop for ov in org-inline-image-overlays
        if (let ((ovbeg (overlay-start ov))
                 (ovend (overlay-end ov)))
             (and (numberp ovbeg) (numberp ovend)
                  (< ovbeg end) (> ovend beg)))
        do (org-display-inline-remove-overlay ov t nil nil)))

(defun org-flyimage-remove-flyspell-overlays-in (old-func beg end)
  (funcall old-func beg end)

  (if t ;;(not org-flyimage-in-activate-links) ;;in t, reflect #+attr_html: :width immediately. but slow
      (org-flyimage-remove-inline-images-in beg end))

  (if org-flyimage-in-activate-links
      (org-display-inline-images nil t beg end)))

(defun org-flyimage-activate ()
  (interactive)
  (advice-add #'org-activate-links :around #'org-flyimage-activate-links)
  (advice-add #'org-remove-flyspell-overlays-in :around #'org-flyimage-remove-flyspell-overlays-in))

(defun org-flyimage-deactivate ()
  (interactive)
  (advice-remove #'org-activate-links #'org-flyimage-activate-links)
  (advice-remove #'org-remove-flyspell-overlays-in #'org-flyimage-remove-flyspell-overlays-in))

org-flyimage-activate で有効化、 org-flyimage-deactivate で無効化します。adviceを使って既存の関数をフックしているのでorgのバージョンが上がると動かなくなるかもしれません(9.3.6で確認)。

仕組みとしてはfont-lockのタイミングでインライン画像用のオーバーレイを作成・削除しています。

org-modeでは、リンクのハイライトは org-activate-links で行われています。この関数の中ではリンクの種別が判定されてリンク文字列の範囲に様々なテキストプロパティが設定されます。

;; org.elより
(defun org-activate-links (limit)
  "Add link properties to links.
This includes angle, plain, and bracket links."
  (catch :exit
    (while (re-search-forward org-link-any-re limit t)
      (let* ((start (match-beginning 0))
             (end (match-end 0))
             (visible-start (or (match-beginning 3) (match-beginning 2)))
             (visible-end (or (match-end 3) (match-end 2)))
             (style (cond ((eq ?< (char-after start)) 'angle)
                          ((eq ?\[ (char-after (1+ start))) 'bracket)
                          (t 'plain))))
        (when (and (memq style org-highlight-links)
                   ;; Do not span over paragraph boundaries.
                   (not (string-match-p org-element-paragraph-separate
                                        (match-string 0)))
                   ;; Do not confuse plain links with tags.
                   (not (and (eq style 'plain)
                             (let ((face (get-text-property
                                          (max (1- start) (point-min)) 'face)))
                               (if (consp face) (memq 'org-tag face)
                                 (eq 'org-tag face))))))
          (let* ((link-object (save-excursion
                                (goto-char start)
                                (save-match-data (org-element-link-parser))))
                 (link (org-element-property :raw-link link-object))
                 (type (org-element-property :type link-object))
                 (path (org-element-property :path link-object))
                 (properties            ;for link's visible part
                  (list
                   'face (pcase (org-link-get-parameter type :face)
                           ((and (pred functionp) face) (funcall face path))
                           ((and (pred facep) face) face)
                           ((and (pred consp) face) face) ;anonymous
                           (_ 'org-link))
                   'mouse-face (or (org-link-get-parameter type :mouse-face)
                                   'highlight)
                   'keymap (or (org-link-get-parameter type :keymap)
                               org-mouse-map)
                   'help-echo (pcase (org-link-get-parameter type :help-echo)
                                ((and (pred stringp) echo) echo)
                                ((and (pred functionp) echo) echo)
                                (_ (concat "LINK: " link)))
                   'htmlize-link (pcase (org-link-get-parameter type
                                                                :htmlize-link)
                                   ((and (pred functionp) f) (funcall f))
                                   (_ `(:uri ,link)))
                   'font-lock-multiline t)))
            (org-remove-flyspell-overlays-in start end)
            (org-rear-nonsticky-at end)
            (if (not (eq 'bracket style))
                (add-text-properties start end properties)
              ;; Handle invisible parts in bracket links.
              (remove-text-properties start end '(invisible nil))
              (let ((hidden
                     (append `(invisible
                               ,(or (org-link-get-parameter type :display)
                                    'org-link))
                             properties)))
                (add-text-properties start visible-start hidden)
                (add-text-properties visible-start visible-end properties)
                (add-text-properties visible-end end hidden)
                (org-rear-nonsticky-at visible-start)
                (org-rear-nonsticky-at visible-end)))
            (let ((f (org-link-get-parameter type :activate-func)))
              (when (functionp f)
                (funcall f start end path (eq style 'bracket))))
            (throw :exit t)))))         ;signal success
    nil))

この org-activate-links を修正してテキストプロパティを設定するのと同時に画像のオーバーレイも生成しよう、と最初は思ったのですが、それだと消す方はどうするのだろうと疑問が浮かびました。現状でもリンク自体を修正すると画像は消えるようにできています。オーバーレイにmodification-hooksが設定されているので。でもリンク自体を修正せずにリンクでは無くなる場合、例えば画像へのリンクの前に# を入れてコメントアウトするとfaceはリンクの色からコメントの色に変わります。それと一緒に画像も消えて欲しいわけです。テキストプロパティは変わるわけですから、どこかでその処理があるはずです。ここで設定したテキストプロパティを消しているのはどこなんだろう……。

詳しく追うのは大変そうだな……と思ったときにふと目に入ったのが (org-remove-flyspell-overlays-in start end) の部分。これはおそらくflyspellのオーバーレイを削除するためのものでしょう。org.el内を検索するとあちこちで org-remove-flyspell-overlays-in が呼ばれていました。コメントの色づけをすると思わしき場所でも。おそらく範囲(start end)の分類が変わるときにはこの関数を呼び出して表示をリセットするのではないでしょうか。

そこで (org-remove-flyspell-overlays-in start end) をフックしてstartからendの間にあるオーバーレイを削除してみると、無事コメントアウトで画像が削除されました(笑)。

org-activate-links も内部で org-remove-flyspell-overlays-in を呼び出しますから、 org-activate-links ではなく org-remove-flyspell-overlays-in の方で指定された範囲の画像を更新してしまえば良いでしょう。 org-activate-links 経由かどうか判定できるようにして、そのときだけ処理を変えるようにしました。

org-flyimage-remove-flyspell-overlays-in 内のコメントがある部分ですが、tだとリンク更新時に必ずオーバーレイを作り直すので少しだけ遅くなります。ただ、 #+ATTR_HTML: :width で画像サイズを調整するときにリアルタイムで反映される(注意:org-image-actual-widthとimagemagickサポートによる)のでとりあえずこうしてあります。本来は org-display-inline-images の側でサイズの変更を検出して作り直すかどうか判断して欲しいところです。

今回の件とは直接関係ないですが、 org-display-inline-imagesorg-image-actual-width には画像の最大サイズを指定する機能が欲しいです。先に画像サイズを読み込んで計算してから再度画像を読み込まなければならないと思うので速度低下が心配ですが。

font-lock時に画像を読み込むのは速度低下の心配がありますが、極端に大きな画像で無ければ私の所では今のところ問題ないようです。気になるようなら遅延読み込みをした方が良いかもしれません。

大量の画像を整理して不要なものをコメントアウトしたりサイズを調整したりする作業
図1: 大量の画像を整理して不要なものをコメントアウトしたりサイズを調整したりする作業

Pingback / Trackback