Basic example for rich text in lookbook

lookbook/docs/patterns/04-rich-text.md.erb

@@ -0,0 +1,36 @@
+OpenProject uses CKEditor for rich text editing.
+See https://www.openproject.org/docs/development/concepts/wysiwyg-editor/ for more information on how the editor works
+and how it is used in frontend code.
+
+To add a rich text field to a primer form, use the `form.rich_text_area` input:
+
+```ruby
+  form do |agenda_item_form|
+    agenda_item_form.rich_text_area(
+      name: :notes,
+      label: MeetingAgendaItem.human_attribute_name(:notes),
+      disabled: @disabled,
+      rich_text_options: {
+        resource:,
+        showAttachments: false
+      }
+    )
+  end
+```
+
+Under the hood, this will render a textarea and next to it, a custom element called `opce-ckeditor-augmented-textarea`.
+This custom element will sync the markdown output from the rich text editor to the textarea, so that on submission,
+markdown is sent as if it was contained in the textarea.
+
+## Options
+
+Here are the most common options you'd pass to the rich text editor:
+
+- **resource**: An APIv3 represented resource to attach attachments to. For example, if you are editing a work package,
+  you would pass `API::V3::WorkPackages::WorkPackageRepresenter.new(work_package, current_user: User.current, embed_links: false)`
+- **showAttachments**: (false) Whether to show attachments below the editor. They will only be present if `resource` is present
+- **editorType**: (full) The type of editor to use. Currently, only `full` (all macros) and `constrained` (limited functionality) is supported.
+
+## Examples
+
+<%= embed OpenProject::Common::RichTextPreview, :default, panels: %i[source] %>

lookbook/previews/open_project/common/rich_text_preview.rb

@@ -0,0 +1,39 @@
+# -- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+# ++
+
+module OpenProject
+  module Common
+    # @logical_path OpenProject/Common
+    class RichTextPreview < Lookbook::Preview
+      # @display min_height 250px
+      def default
+        render_with_template
+      end
+    end
+  end
+end

lookbook/previews/open_project/common/rich_text_preview/default.html.erb

@@ -0,0 +1,24 @@
+<%
+  the_form = Class.new(ApplicationForm) do
+    form do |f|
+      f.rich_text_area(
+        name: :description,
+        label: WorkPackage.human_attribute_name(:description),
+        rich_text_options: {
+          editorType: "constrained"
+        }
+      )
+    end
+  end
+
+  model = WorkPackage.new
+%>
+
+
+<%= primer_form_with(
+      model:,
+      url: '/abc',
+      id: 'asdf') do |f|
+  render(the_form.new(f))
+end
+%>