GraphCMS のサンプルとメモ
GraphCMS 上で実際に RichText で入力し HTML として取得したときのサンプルと編集についてのメモ。
HTML 出力のサンプル
基本的には RichText の機能のみ利用しているが、以下の点で環境に左右されている。
- スタイルは Docs Theme のものが適用される(Heading が 5 以降で Normal Text と同じスタイルになるのはこのため)
- Docs Theme の目次用に
rehype-slugで見出しにidを付与している
見出し
heading4
heading5
heading6
文字の装飾
ボールド
文字をボールドにする。
イタリック
文字をイタリックにする。
下線
文字に下線を付ける。
コード
文字をコードにする。
特殊な改行
以下、Shift + Enter で改行。
改行 1
改行 2
ここまで。
以下改行を連続。
ここまで。
連続した空白
ここから空白の連続 ここまで。
リンク
サイトへリンクを設定する。
リンクにはアドレス以外の属性等も指定できる。
リスト
o-list
- 項目 - A
- 項目 - B
- 項目 - B_A
- 項目 - B_B
- 項目 - C
list
- 項目 - A
- 項目 - B
- 項目 - B_A
- 項目 - B_B
- 項目 - C
コードブロック
const a = 10
console.log(a)クラス名
ここでは Docs Theme(の利用している TailwindCSS)の背景色用クラスを指定している。
画像
テーブル
列1 | 列2 | 列3 |
行1 | 100 | 200 |
行2 | 300 | 400 |
引用
引用されたテキスト 1。
引用されたテキスト 1。
RichText についてのメモ
主にコンテンツを編集するための機能について。なお、以下の内容は RichTextの出力を HTML として取得(変換)した場合で、その他の状況では異なることもある。
API レスポンスでの形式
取得するフィールドによって HTML Markdown AST などの形式で受信できる。
例: RichText の API ID が content の場合 content.html で HTML を取得。
日本語入力
- PC(試したのは Windows) での日本語の入力は通常通り行える
以下、主観での内容。
バリデーション関係からからなのか、RichText に限らずテキスト入力全般的に引っかかりがあるように感じる(PC のスペックにもよると思われるが)。その中で、RichText の日本語入力はレスポンスが良いように感じる。
モバイル対応
レイアウト的に操作はできるが、日本語入力が不自然なタイミングで確定されてしまう(試したソフトキーボードは S-Shoin だけなので他のキーボードでは違う結果になる可能性もある)。
キーボードショートカット
RichText の編集フィールドにフォーカスがあたっている場合は CTRL + s で下書き保存をできるが、その他の操作(文字の装飾を指定するなど)は不明。
コピー & ペースト
RichText 内ではテキストとともに画像や書式もコピー＆ペーストできる。
外部のソースからのペーストもできるが、対応していない書式は無視される。また、画像はリンクへ置き換わる。
ただし、No-Break Space (U+00A0)はそのままペーストされてしまうので、通常の空白と見分けがつかなくなる。
なお、外部ソースからのペーストが非推奨とされているかは不明。
改行
改行の入力は基本的にパラグラフの区切りとなる。
以下の場合は異なる挙動となる。
Shift+Enterは<br>- コードブロックの中では改行
連続した空白
空白を連続して入力した場合、単純に空白の連続となる。
クラス名
任意の領域にクラス名を指定できる。ただし、クラスを入れ子にできない。
リンク
リンクはサイト(url)用でドキュメント等は指定できないが、各種属性を指定できる。
リンク元の文字列に画像を含めても画像にリンクは設定されない。画像にリンクを設定する方法は不明。
画像
バックエンドは Filestack を利用していると思われる。
アップロードは Asset の UI か RichText のリボン(Asset のダイアログが表示される)から行う。ローカルのファイル以外にも Filestack の UI により Google Drive 等からもアップロード可能。
また、アップロード時に Crop などが行えるが、この場合は加工されたファイルがアップロードされる。
画像を再アップロード(Asset 内のファイル入れ替え)すると、RichText に埋め込まれた画像も入れ替わる。
RichText を HTML として出力すると img タグとして、Markdown として出力すると Image ノードとして扱える。
文字列のパラグラフには含まれない。
Altは RichText の編集画面で指定する。
RichText から画像を編集することも可能。
- サイズ変更などは Filestack で行われるので元ファイルはそのまま残る
- サイズ変更は
widhtとheightを自由に指定できるが以下のような挙動となる- 実際に取得される画像の縦横比は変更されない
- サイズ変更を繰り返すと URL にパラメーターが蓄積されてしまう
- 蓄積されたパラメーターは順番に実行されているので仕様？
- 画像フォーマットを指定できる
画像のサイズは width height 属性に設定される。
ファイル名が title 属性として設定される。変更方法などは不明。
Media Library(Assets) の UI 上から、画像を参照しているドキュメントを確認できない(API でもできない)。
画像にもステージングが適用される(DRAFT などが指定される)が、参照元が PUBISHED になれば画像が DRAFT でも PUBLISHED 扱いになる。
nuxt-image の provider では対応されていない(パラメーターがクエリーによる指定でないので対応は難しいように思われる)。
テーブル
テーブルを作成できる。ヘッダーや行と列数を変更することも可能。HTML での出力ではセル内のパラグラフをわけることができるが、Markdown として出力すると 1 つのパラグラフとなる。
iframe
外部サービスを埋め込むことに使うと思われるが、接続が拒否されたりで詳細は不明。
フルスクリーン
RichText の編集フィールドのみをブラウザー内に表示させることができる。