Tiptap– tag –

こんにちは、フロントエンドエンジニアの古園(@miyabin4113)です。2025年7月22日にWebサービス上で動くエディター開発の勉強会を開催しました。 https://prtimes.connpass.com/event/358977 【】 近年、Webサービス上で動くエディターを開発する企業や個人をブログやXで見かけることも増えてきたように思えます。ですが、依然として他のフロントエンド技術と比べるとニッチな分野です。 だからこそ、エディター開発を行うエンジニアが一堂に会し、各自の持っている知見を共有することで日々の開発に役立てる場を提...

こんにちは。フロントエンドエンジニアの古園です。 PR TIMESでは日々エディターの機能開発を行っています。 今回はそんな中から多くのユーザーから要望があり、開発がスタートした見出し（ハイライト）機能をTiptapのExtensionを使用して開発した件について解説します。 【Tiptapについて】 まず解説の前提となるエディターライブラリ、Tiptapについて軽く触れておきます。 Tiptapはモダンなリッチテキストエディタの基盤として使用されているヘッドレスフレームワークで Extensionという数多くの拡張機能が用意...

こんにちは。PR TIMESでフロントエンドエンジニアをしている夛田(@unachang113)です。 PR TIMESではプレスリリース配信のエディターにTiptapというヘッドレスエディターフレームワークを使用しています。 2025年2月にTiptapのバージョンをv2.0.0-betaからv2.10.5まで上げ、3月に最新版までバージョンアップを実施したことを今回は話そうと思います。 【Tiptapのバージョンアップが滞っていた要因】 弊社では月に1回リファクタリングデーを実施していて、リファクタリングデーのタイミングでrenovateを使い依存して...

こんにちは、フロントエンドエンジニアの桐澤（@kiririLee）です。Tiptapで開発したエディターをどのようにテストしているかについて書きます。 昨年末に2024年版のPR TIMESエディターテスト戦略についてまとめられたブログが投稿されました。フロントエンドチームではエディターのテストを日々模索しており、その過程で新たに書いたテストパターンを紹介します。 https://developers.prtimes.com/2024/12/25/press-release-editor-frontend-testing/ 詳細は後の章で深掘りしていきますが、はじめに今回紹介する3...

こんにちは。フロントエンドエンジニアの桐澤（@kiririLee）です。PR TIMESはプレスリリースを配信する企業様がプレスリリースを作成・編集するためのエディターを提供しています。昨年の12月にUIリニューアルプロジェクトの一環でUIの更新と新機能が追加されたエディターがリリースされました。現在（2024年9月時点）PR TIMES上には、UIリニューアル前のエディターとUIリニューアル後のエディターが存在し、それぞれ現エディターと新エディターと呼ばれますが、この記事は新エディターに関しての記事です。 現エ...

【Introduction】 This article discusses the process of choosing a new React-based editor library for PR TIMES's press release editor. 【Background】 At PR TIMES, press release publishing is one of the core services that we provide, therefore, we strive to provide the best possible editing experience to our users so that they can express their ideas better. However, our current editing page is built with legacy codes that have not been well maintained over the past several ...