2026-01-01

【Strapi】若干イライラするEditorの仕様をカスタマイズ

テクノロジー

 本ブログはバックエンドにHeadless CMSのStrapiを使っている。そのStrapiの記事入力UIに、少し使いづらいところがあったので、軽く修正する。

改行時のインデント

 行の始まりが空白の行でEnterを押し改行すると、次の行が半角空白始まりになってしまう挙動があった。

 毎回1文字消してから入力を開始するのが面倒だったので修正する。

 原因は以下のコード。

    if (!ranges[i].empty() || (!inList && !inQuote) || !match || cursorBeforeBullet) {
      cm.execCommand('newlineAndIndent');
      return;
    }

 改行時にnewlineAndIndentを実行し、自動でインデントをしてしまっていた。個人的には不要なので

 インデントせず、ただ改行するだけの処理に修正した。

Expand状態からのクローズ

 StrapiにはMarkdown入力欄とPreviewを横に並べながら文字を入力できるExpandモードがある。このExpand画面はポップアップUIでポップアップ外をクリックするとポップアップが閉じる便利な仕様（つまりクローズボタンを押さなくてもクローズすることができる）になっているのだが、ポップアップ外でマウスアップするだけでもポップアップが閉じる。

 例えばポップアップ内でマウスダウンを維持したままドラッグし、テキストを選択、そして必要な領域を選択し終えたらマウスアップするが、マウスアップする箇所がポップアップの外にある場合、図らずもExpandが解除されてしまうのだ。これが地味に煩わしいので修正する。

 EditorLayoutを修正する。

  const overlayMouseDownOnSelf = React.useRef(false);

  const handleOverlayMouseDown = React.useCallback((event: React.MouseEvent) => {
    overlayMouseDownOnSelf.current = event.target === event.currentTarget;
  }, []);

  const handleOverlayMouseUp = React.useCallback(

    (event: React.MouseEvent) => {
      const releasedOnOverlay = event.target === event.currentTarget;

      if (overlayMouseDownOnSelf.current && releasedOnOverlay) {
        onCollapse();
      }

      overlayMouseDownOnSelf.current = false;
    },
    [onCollapse]
  );
  • overlayMouseDownOnSelf
    Expandポップアップ外でマウスダウンをしたかどうかを保持する。
  • handleOverlayMouseDown
    マウスダウンした箇所がExpandポップアップの中か外かを判定する。EventのtargetとcurrentTargetで判別が可能。currentTargetはクッリクイベントのハンドラが設定された要素なので不変。targetは実際にクリックされた要素なのでクリック箇所により変わる。詳細はhttps://developer.mozilla.org/en-US/docs/Web/API/Event を参照。
    • Expandポップアップ内でマウスダウンイベントを実行 → False
    • Expandポップアップ外でマウスダウンイベントを実行 → True
  • handleOverlayMouseUp
    同様にマウスアップをどこで実行したかを取得。「Expandポップアップ外でマウスダウン & Expandポップアップ外でマウスアップ」の時のみ、Expandポップアップを閉じる。

 「マウスダウン」「マウスアップ」と言っているが、これらの関数はまだ各マウスイベントに紐づいていないので、以下でマウスイベントと紐づける。詳細はhttps://react.dev/reference/react-dom/components/common#mouseevent-handler を参照。


 修正は以上。そんな大した修正じゃないが、地味にイライラする点を直せてスッキリ。カスタマイズ性が高いのもStrapiの魅力の一つだね。