Prismic のサンプルとメモ
Prismic 上で実際に RichText で入力し HTML として取得したときのサンプルと編集についてのメモ。
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
- 項目-A
- 項目-B
- 項目-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 の編集フィールドのみをブラウザー内に表示させることはできない。