Question: ページスクロールがある記事の中でPlantUMLを編集しづらい

[hanapage]

Environment

Host

item	version
OS	20.04.1 LTS
GROWI	4.2.2
node.js	14.15.1
npm	6.14.8
Using Docker	no
Using [growi-docker-compose][growi-docker-compose]	no

Client

item	version
OS	macOS 10.15.7
browser	Google Chrome 87.0.4280.88

How to reproduce? (再現手順)

• ページスクロールが発生する程度の長さを持つ記事の末尾でPlantUMLを編集する

What happens? (症状)

• PlantUMLが更新されるたびに編集画面のスクロール位置がずれてカーソルが見られなくなる

What is the expected result? (期待される動作)

• PlantUMLを更新したときに編集画面のスクロール位置が変わらない

Note

• なし

[yuki-takei]

@hanapage
お問合せありがとうございます。

PlantUML のレンダリングは現在の仕様では仕組み上 Markdown レンダリングの後に実行されるのは変えられないです。そのためご報告いただいたような事象が発生してしまい、回避はレンダリングエンジンの大幅な改修が必要です。

#2557 での抜本対策をお待ちいただければと思います。

ワークアラウンド

エディタ下部の歯車メニューから、「Mathjax Rendering」をオフにすることで当該事象は回避できます(ただし、数式のレンダリングはプレビューには反映されなくなります)。

[yuki-takei]

アップデート : #6604

こちらの実装ではこの Issue の期待される動作通りになることを確認しています。

2022年冬リリース予定の GROWI v6 をお待ちください

[yuki-takei]

@hanapage This issue was fixed by v6.0.0.
この問題は v6.0.0 で修正されました。

[hanapage]

v6.0.1ですが、編集画面側のスクロールが必要なくらいの長さのページの末尾側でPlantUMLの編集中に改行を行うと、
編集画面のスクロール位置が現在のカーソル位置から離れたところに移動しやはり編集しづらい状態が続いています。

カーソル位置は変わっていないので続きを打てば一番下の行当たりに表示されるくらいの所にスクロール位置が戻りますが、
やはり不便です。編集画面とプレビュー画面のスクロールの連動機能もしくはPlantUMLのレンダリングを
一時的にOFFにすることはできないでしょうか？

[yuki-takei]

@hanapage reopen したものの、v6.0.6 で確認しましたがやはりこの症状を再現できないです。
具体的な markdown や、改行を入れるカーソル位置など提示いただけますでしょうか。

[hanapage]

検証ありがとうございます。
下記のmarkdownを使うとv6.0.5で再現しました。（まだ最新版は入れていません）

1つ目のシーケンス図のだいたい100行目以降くらいで改行するとスクロール位置が戻されます。
2つ目のシーケンス図では改行しても位置はずれないので縦に長すぎるUMLがダメなのかもしれません。

追記：現在のホスト側の環境です。

item	version
OS	Ubuntu 20.04.5 LTS
GROWI	6.0.5
node.js	14.21.2
npm	6.14.17
yarn	1.22.19
Using Docker	no
Using [growi-docker-compose][growi-docker-compose]	no

PlantUML自体は同じネットワーク上に別サーバに立ててそちらと通信しています。
使用しているバージョンは1.2023.1です。画像は正しく送られてきますが若干遅延します。

----------------------------------------8<-----------------------------------

PlantUMLTest

スクロール位置がずれる状態を再現する

シーケンス図1

@startuml
skinparam style strictuml

actor User

box Modules #lightgreen
    participant ModuleA
    participant ModuleB
    participant ModuleC
end box

box Parts #lightyellow
    participant PartA
    participant PartB
    participant PartC
end box

== SequenceA ==
User ->> ModuleA ++
    ModuleA -> ModuleC
        activate ModuleC #yellow
    ModuleC --> ModuleA
    deactivate ModuleA
== SequenceB ==
User ->> ModuleC
        alt patternA
            ModuleC -[#red]>> ModuleA ++
                note right ModuleA
                    a commnet
                end note
                ModuleA -> ModuleB ++
                return
            return
            ...
        else 
            ModuleC -[#red]>> ModuleA ++
                note right ModuleA
                    a commnet
                end note
                ModuleA -> ModuleB ++
                return
                note right ModuleA
                    a commnet
                end note
                ModuleA -> ModuleB ++
                return
                ModuleA --[#red]>> ModuleC
            deactivate ModuleA
        end alt
== SequenceC ==
alt patternA
    User -> ModuleC
        ModuleC -[#red]>> ModuleA++
            note right ModuleA
                a comment
            end note
            ModuleA -> ModuleB ++
            return
            ModuleA -> PartC ++
            return
            ModuleA -> PartC ++
            return
            note right ModuleA
                code
            end note
            ModuleA -> ModuleA ++
                note right ModuleA
                    code
                end note
                ModuleA -> PartB ++
                    PartB -> PartA ++
                    return
                    note right PartB
                        code
                    end note
                    PartB -> PartB ++
                        note right PartB
                            l
                            o
                            n
                            g
                            
                            c
                            o
                            d
                            e
                        end note
                    return
                    note right PartB
                        c
                        o
                        d
                        e
                    end note
                    PartB -> PartB++
                    return
                    PartB -> PartB++
                    return
                    PartB -> PartB++
                    return
                return
                note right ModuleA
                    a comment
                end note
                ModuleA -> ModuleB ++
                return
            ModuleA --> ModuleA
            deactivate ModuleA
        ModuleA --[#red]> ModuleC
        deactivate ModuleA
    ...
else patternB
    User ->> ModuleA++
        ref over ModuleA, ModuleC
            a comment
        end ref
        ModuleA --[#red]>> ModuleA ++
            note right ModuleA
                a comment
            end note
            ModuleA -> ModuleB ++
            return
            ModuleA -> PartB ++
            note right PartB
                c
                o
                d
                e
            end note
            return
        ModuleA --[#red]>> ModuleA
        deactivate ModuleA
    return
    ...
end alt
== SequenceD ==
alt patternA
    User ->> ModuleC
        ref over ModuleA, ModuleC
            a commnet
        end ref
    ...
else pattenB
    User ->> ModuleC
        ModuleC -[#red]>> ModuleA++
            note right ModuleA
                a comment
            end note
            ModuleA -> ModuleB++
            return
        ModuleA --[#red]>> ModuleC
    deactivate ModuleA
end alt
== SequenceE ==
User -> ModuleA ++
    ModuleA -> ModuleC
    ModuleC --> ModuleA
    deactivate ModuleC
deactivate ModuleA
@enduml

シーケンス図2

@startuml
skinparam style strictuml

box Modules #lightgreen
    participant ModuleA
    participant ModuleB
    participant ModuleD
end box

box Parts #lightyellow
    participant PartA
    participant PartB
    participant PartC
end box

== SequenceF ==
ModuleA -> ModuleB ++
    alt patternA
        ModuleB -> PartA ++
        return
    end alt
    ModuleB -> ModuleB ++
    return
    note right ModuleB
        code
    end note
    ModuleB -> PartA ++
    return
    ModuleB -> ModuleB ++
    return
    ModuleB -> ModuleD
        activate ModuleD #yellow
        ModuleD --> ModuleB
    ModuleB --> ModuleA
deactivate ModuleB
...
== SequenceG ==
alt patternA
    ModuleD -[#red]>> ModuleB++
        ModuleB -> PartA ++
            PartA -> PartB ++
                PartB -> PartB ++
                return
            return
        return
    return
    ...
else patternB
    ModuleD -[#red]>> ModuleB++
        ModuleB -> PartA ++
        return
    return
end alt
== SequenceH ==
ModuleA -> ModuleB ++
    ModuleB -> PartA ++
    return
    note right ModuleB
        code
    end note
    ModuleB -> ModuleB ++ 
    return
    ModuleB -> ModuleD ++
    return
    deactivate ModuleD
    ModuleB --> ModuleA
deactivate ModuleB
@enduml