Prismic のサンプルとメモ

Prismic 上で実際に RichText で入力し HTML として取得したときのサンプルと編集についてのメモ。

Prismic の RichText 編集画面

HTML 出力のサンプル

基本的には RichText の機能のみ利用しているが、以下の点では今回の環境に依存した表示となる。

  • スタイルは Docs Theme のものが適用される(Heading が 5 以降で Normal Text と同じスタイルになるのはこのため)
  • Docs Theme の目次用に rehype-slug で見出しに id を付与している
  • API レスポンスからの HTML 変換で Pre formatted 用の HTML Serializer を作成している

見出し

heading4

heading5
heading6

文字の装飾

ボールド

文字をボールドにする。

イタリック

文字をイタリックにする。

特殊な改行

以下、Shift + Enter で改行。
改行 1
改行 2
ここまで。

改行を連続して入力した場合は、空のパラグラフが挿入される。以下改行を連続。

ここまで。

連続した空白

ここから空白の連続 ここまで。

リンク

Web

サイトへリンクを設定する。

ドキュメント

ドキュメントへのリンクは標準の変換だと path が null となる。実施に利用するには Link Resolver を作成する必要がある。

メディア

メディアへリンクを設定する。

リスト

o-list

  1. 項目-A
  2. 項目-B
  3. 項目-C

list

  • 項目-A
  • 項目-B
  • 項目-C

0-list list どちらも入れ子にはできない。

画像

曇っている河川敷

埋め込み

RichText についてのメモ

主にコンテンツを編集するための機能について。なお、以下の内容は RichTextの出力を HTML として取得(変換)した場合で、その他の状況では異なることもある。

API レスポンスでの形式

RitchText は配列データとしてレスポンスに含まれる。

データは Prismic のライブラリーで HTML へ変換できる。

HTML Serializer などを記述することで変換内容をカスタマイズすることも可能(例: Preformatted を <pre><code> へ変換するなど)。

日本語入力

  • PC(試したのは Windows) での日本語の入力は通常通り行える
  • ただし、RichText 編集画面で Alt を編集する場合は日本語の入力ができない

モバイル対応

レスポンシブ対応されていない、また日本語入力が不自然なタイミングで確定される(試したソフトキーボードは S-Shoin だけなので他のキーボードでは違う結果になる可能性もある)。

キーボードショートカット

RichText の編集フィールドにフォーカスがあたっている場合は CTRL + s で下書き保存をできるが、その他の操作(文字の装飾を指定するなど)は不明。

コピー & ペースト

RichText 内ではテキストとともに書式もコピー&ペーストできる。

画像もコピーできるが、テキストと同時に範囲選択できないときがある、リンクの指定が解除されるなどの問題がある。

外部のソースからのペーストもできるが、対応していない書式は無視される。

ただし、No-Break Space 文字(U+00A0)はそのままペーストされてしまうので、通常の空白と見分けがつかなくなる。

なお、外部ソースからのペーストが非推奨とされているかは不明。

改行

改行の入力は基本的にパラグラフの区切りとなる。

以下の場合は異なる挙動となる。

  • Shift + Enter では <br />
  • Pre formatted の中では HTML Serializer の実装による

連続した空白

空白を連続して入力した場合、単純に空白の連続となる。

リンク

通常の Web(url)の他にドキュメントやメディアへのリンクも UI 上では設定できるが、ドキュメントへのリンクは PATH が null となる。対応として Link Resolver を作成する必要がある。

リンク元の文字列に画像を含めても画像にリンクは設定されない。画像は単独で設定する必要がある。

画像

バックエンドには imgix が利用されている。

アップロードは Media Library の UI か RichText のリボン(Media Library のダイアログが表示される)から行う。アップロード元はローカルファイルのみ。

再アップロードの機能はないと思われる。

RichText へ埋め込まれた画像は変換ライブラリーを利用することで img タグとして扱える。

文字列のパラグラフには含まれない。

Alt は以下のように指定する。なお、空白にしたままだと null がセットされる(GraphQL で取得しているから?)。

  • Media Library 上で指定する(画像ファイルのデフォルトの Alt になる)
  • RichText の編集画面で指定する

Picture Editor で画像のサイズを変更可能。

  • サイズ変更は imgix で行われるので元ファイルはそのまま残る
  • width と height の比率は自由に設定できる
  • 元サイズと比率が異なる場合はマウス操作で位置あわせできる
  • ズーム等で自由な位置を切り出すことはできない

画像のサイズは width height 属性に設定されない。

Media Library の UI 上から、画像を参照しているドキュメントを確認できない(API でもできない)。

画像にステージングは適用されない。PUBLISHED として扱われる。

埋め込み

YouTube などの外部サービスを埋め込むことができる。

rtl

rtl を指定できるが以下のようになる。

  • API レスポンスでは direction の指定が rtl になっている
  • HTML で変換したものにはスタイルは設定されていない

おそらく HTML Serializer で対応する必要がある。

フルスクリーン

RichText の編集フィールドのみをブラウザー内に表示させることはできない。

このページをGitHubで編集する 更新日 Tue, Dec 21, 2021