Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ヘッドレスCMSのリッチエディタを支えるヘッドレス○○

microCMS
March 15, 2023

 ヘッドレスCMSのリッチエディタを支えるヘッドレス○○

PWA Night vol.49 ~GUI特集〜
https://pwanight.connpass.com/event/276266/

microCMSのリッチエディタ開発での技術選定などについてお話ししました。

microCMS

March 15, 2023
Tweet

More Decks by microCMS

Other Decks in Programming

Transcript

  1. 目次1 2 • microCMSのリッチエディタについて • microCMSを支える「Headless WYSIWYG Text Editor」 •

    microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
  2. 目次 4 • microCMSの(新)リッチエディタについて • microCMSを支える「Headless WYSIWYG Text Editor」 •

    microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
  3. 目次 8 • microCMSのリッチエディタについて • microCMSを支える 「Headless WYSIWYG Text Editor」

    • microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
  4. • tiptap (https://tiptap.dev/) ◦ “It’s headless and comes without any

    CSS. You are in full control over markup, styling and behaviour.” ◦ microCMSでは(新)リッチエディタで利用 Headless WYSIWYG Text EditorWYSIWYG Text EditorWYSIWYG Text Editor 11 #pwanight https://tiptap.dev/
  5. 目次 16 • microCMSの(新)リッチエディタについて • microCMSを支える「Headless WYSIWYG Text Editor」 •

    microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
  6. • Radix UI (https://www.radix-ui.com/) ◦ “Unstyled, accessible components for building

    high‑quality design systems and web apps in React.” Headless UIWYSIWYG Text EditorWYSIWYG Text Editor 17 #pwanight https://www.radix-ui.com
  7. • Radix UIのメリット ◦ ロジックの分離 ◦ Radix UIの責務は「HTML本来が備える機能の担保」といえる ◦ 以下は利用側の責務にできる

    ▪ スタイル ▪ モーダルの開閉、イベントなどのロジック ◦ UIの表示とロジックを利用側で自由に設計することができる Headless UIWYSIWYG Text EditorWYSIWYG Text Editor 19 #pwanight
  8. 目次 21 • microCMSの(新)リッチエディタについて • microCMSを支える「Headless WYSIWYG Text Editor」 •

    microCMSを支える「Headless UI」 • リッチエディタにリッチなUIを組み込む #pwanight
  9. • Floating UI(https://floating-ui.com/) ◦ “Floating UI is a small library

    that helps you create “floating” elements such as tooltips, popovers, dropdowns, and more.” ◦ Radix UI内部でも依存している リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor 27 #pwanight
  10. リッチエディタにリッチなUIをWYSIWYG Text EditorWYSIWYG Text Editor • getBoundingClientRect() ◦ https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect ◦

    ProseMirrorで取得した状態をもとにDOMRectを返す ◦ (結局ProseMirrorの知識は必要なんですね) 28 #pwanight