<!-- 
RSS generated by JIRA (9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b) at Mon Feb 12 05:47:43 CET 2024

It is possible to restrict the fields that are returned in this document by specifying the 'field' parameter in your request.
For example, to request only the issue key and summary append 'field=key&field=summary' to the URL of your request.
-->
<rss version="0.92" >
<channel>
    <title>Magnolia - Issue tracker</title>
    <link>https://jira.magnolia-cms.com</link>
    <description>This file is an XML representation of an issue</description>
    <language>en-uk</language>    <build-info>
        <version>9.4.2</version>
        <build-number>940002</build-number>
        <build-date>19-01-2023</build-date>
    </build-info>


<item>
            <title>[MGNLFE-466] Discovery to support for Next.js 13+ App Router</title>
                <link>https://jira.magnolia-cms.com/browse/MGNLFE-466</link>
                <project id="16792" key="MGNLFE">Magnolia Frontend Helpers</project>
                    <description>&lt;p&gt;This has been the Discovery Ticket.&lt;/p&gt;

&lt;p&gt;The feaature will be implemented with this epic: &lt;a href=&quot;https://jira.magnolia-cms.com/browse/MGNLFE-558&quot; class=&quot;external-link&quot; rel=&quot;nofollow&quot;&gt;https://jira.magnolia-cms.com/browse/MGNLFE-558&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Next.js 13 introduced new routing mechanism called: &lt;b&gt;App Router&lt;/b&gt;&lt;br/&gt;
**&lt;/p&gt;

&lt;p&gt;It is recommended way of routing for new apps, and old should migrate as per: &lt;a href=&quot;https://nextjs.org/docs/app&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://nextjs.org/docs/app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It also introduced the idea of Server and Server Components, to explicitly split between code rendered on server and on client side.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;@magnolia/react-editor&lt;/em&gt; is using React context to share data between components.&lt;br/&gt;
New approach does not allow using context in server components throwing error:&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-java&quot;&gt;
TypeError: createContext only works in Client Components. Add the &lt;span class=&quot;code-quote&quot;&gt;&quot;use client&quot;&lt;/span&gt; directive at the top of the file to use it. Read more: https:&lt;span class=&quot;code-comment&quot;&gt;//nextjs.org/docs/messages/context-in-server-component &lt;/span&gt;&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&lt;b&gt;Using `use client` makes the fetching of page data happen on client side = opposite what we want from Next.js&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;We should refactor React lib to stop using context for sharing data across components.&lt;/p&gt;

&lt;p&gt;Ideally using vanilla JS that would avoid conflicting with any changes in the future.&lt;/p&gt;</description>
                <environment></environment>
        <key id="132860">MGNLFE-466</key>
            <summary>Discovery to support for Next.js 13+ App Router</summary>
                <type id="4" iconUrl="https://jira.magnolia-cms.com/secure/viewavatar?size=xsmall&amp;avatarId=10890&amp;avatarType=issuetype">Improvement</type>
                                            <priority id="2" iconUrl="https://jira.magnolia-cms.com/images/icons/priorities/critical.svg">Critical</priority>
                        <status id="6" iconUrl="https://jira.magnolia-cms.com/images/icons/statuses/closed.png" description="The issue is considered finished, the resolution is correct. Issues which are not closed can be reopened.">Closed</status>
                    <statusCategory id="3" key="done" colorName="success"/>
                                    <resolution id="11">Done</resolution>
                                        <assignee username="oanh.thai">Oanh Thai Hoang</assignee>
                                    <reporter username="bstaryga">Bartosz Staryga</reporter>
                        <labels>
                    </labels>
                <created>Mon, 15 May 2023 14:50:32 +0200</created>
                <updated>Fri, 13 Oct 2023 14:50:41 +0200</updated>
                            <resolved>Fri, 14 Jul 2023 02:54:18 +0200</resolved>
                                                                        <due></due>
                            <votes>2</votes>
                                    <watches>10</watches>
                                                    <progress percentage="100">
                                    <originalProgress>
                                                    <row percentage="0" backgroundColor="#89afd7"/>
                                                    <row percentage="100" backgroundColor="transparent"/>
                                            </originalProgress>
                                                    <currentProgress>
                                                    <row percentage="100" backgroundColor="#51a825"/>
                                                    <row percentage="0" backgroundColor="#ec8e00"/>
                                            </currentProgress>
                            </progress>
                                    <aggregateprogress percentage="100">
                                    <originalProgress>
                                                    <row percentage="0" backgroundColor="#89afd7"/>
                                                    <row percentage="100" backgroundColor="transparent"/>
                                            </originalProgress>
                                                    <currentProgress>
                                                    <row percentage="100" backgroundColor="#51a825"/>
                                                    <row percentage="0" backgroundColor="#ec8e00"/>
                                            </currentProgress>
                            </aggregateprogress>
                                                    <timespent seconds="120600">4d 1.5h</timespent>
                                <comments>
                            <comment id="357367" author="bstaryga" created="Tue, 16 May 2023 15:17:25 +0200"  >&lt;p&gt;Now all libs, React/Vue/Angular use some sort of framework specific context approach.&lt;/p&gt;

&lt;p&gt;The vanilla solution to share config+template annotations across all the components would allow to make all the libs bit more framework agnostic and more similar in use.&lt;/p&gt;

&lt;p&gt;Re need to share template annotations might be wort to revisit the idea: &lt;a href=&quot;https://jira.magnolia-cms.com/browse/MGNLREST-625&quot; class=&quot;external-link&quot; rel=&quot;nofollow&quot;&gt;https://jira.magnolia-cms.com/browse/MGNLREST-625&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;</comment>
                            <comment id="359681" author="oanh.thai" created="Fri, 2 Jun 2023 06:12:50 +0200"  >&lt;p&gt;&lt;b&gt;Output discovery:&lt;/b&gt;&#160;&lt;/p&gt;

&lt;p&gt;For using app router in next js 13. Developer need to change code in Next Js to detect in Editor via &lt;b&gt;url param&lt;/b&gt; instead of relying on react editor.&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Here is my &lt;a href=&quot;https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/36/overview&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;proposal&lt;/a&gt; of moving from Pages Router to App Router that using next js 13.4.4 and react 18.2&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;There are some main points I can summarize.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;Don&apos;t fetch data at client side. See server components at &lt;b&gt;spa/nextjs-hybrid-minimal/src/app/[&lt;span class=&quot;error&quot;&gt;&amp;#91;...pathname&amp;#93;&lt;/span&gt;]/page.js, spa/nextjs-hybrid-minimal/src/app/categories/&lt;span class=&quot;error&quot;&gt;&amp;#91;slug&amp;#93;&lt;/span&gt;/page.js.&lt;/b&gt;
	&lt;ul&gt;
		&lt;li&gt;That mean all necessary data json (include template annotation) has been fetched before and then send to client component. See &lt;a href=&quot;https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/36/diff#spa/nextjs-hybrid-minimal/src/app/client-side-pages.js&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/36/diff#spa/nextjs-hybrid-minimal/src/app/client-side-pages.js&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;To decide where we should render edit green bar, we can detect via url in client side component (&lt;tt&gt;mgnlPreview=false&lt;/tt&gt;&lt;tt&gt;)&lt;/tt&gt; component then set to &lt;b&gt;global.mgnlInPageEditor&lt;/b&gt;. See &lt;a href=&quot;https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/36/diff#spa/nextjs-hybrid-minimal/src/app/client-side-pages.js&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/36/diff#spa/nextjs-hybrid-minimal/src/app/client-side-pages.js&lt;/a&gt;
	&lt;ul&gt;
		&lt;li&gt;That mean don&apos;t need to import react-editor for use context in server side&lt;/li&gt;
		&lt;li&gt;Currently, &lt;b&gt;utils&lt;/b&gt; still need to use context for getting &lt;b&gt;magnoliaContext.nodePath + magnoliaContext.search&lt;/b&gt; only then I do workaround by import EditorContextHelper from template annotation instead react-editor for simple use &lt;a href=&quot;https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/36/diff#spa/nextjs-hybrid-minimal/utils.js&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/36/diff#spa/nextjs-hybrid-minimal/utils.js&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Disadvantages&lt;/b&gt;: always fetching template annotation in server component is not optimal. Because there is no way to detect url in server component as well.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;After discussing with &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=canh.nguyen&quot; class=&quot;user-hover&quot; rel=&quot;canh.nguyen&quot;&gt;canh.nguyen&lt;/a&gt; , he and I think provide a flag for spa to render greenbar should be better instead detecting &lt;tt&gt;mgnlPreview=false in&lt;/tt&gt; url&lt;/p&gt;

&lt;p&gt;Provider a flag to me it would increase user experience. In production, we don&apos;t need to fetch annotation and don&apos;t need to show greenbar so just disable a flag.&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Honestly, I&apos;m not good at front end development so I still need feedback from &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt; , or &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=rsiska&quot; class=&quot;user-hover&quot; rel=&quot;rsiska&quot;&gt;rsiska&lt;/a&gt;&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;</comment>
                            <comment id="360508" author="bstaryga" created="Wed, 7 Jun 2023 08:50:05 +0200"  >&lt;p&gt;Hey &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=oanh.thai&quot; class=&quot;user-hover&quot; rel=&quot;oanh.thai&quot;&gt;oanh.thai&lt;/a&gt;&#160;&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-java&quot;&gt;
For using app router in next js 13. Developer need to change code in Next Js to detect in Editor via&#160;url param&#160;instead of relying on react editor.&#160;&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;That is not gonna help here &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/sad.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;We place our EditablePage in server component, as we wanna render whole page on server side. Editable page is using React Context to share some data between child components: The app router will throw an error cause of this bits: &lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/react-editor/src/util/EditorContext.js#4&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/react-editor/src/util/EditorContext.js#4&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The issue is that with App router Context API only works in Client Components (components rendered in browser). Here is the Next.js error page: &lt;a href=&quot;https://nextjs.org/docs/messages/context-in-server-component&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://nextjs.org/docs/messages/context-in-server-component&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We can not render pages on client side, as it would counter the whole idea of using Next.js.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;The way forward I see is to replace context with vanilla solution to share config+template annotations across all the components (as per comment above &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/smile.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;).&lt;/p&gt;</comment>
                            <comment id="360719" author="oanh.thai" created="Thu, 8 Jun 2023 08:09:41 +0200"  >&lt;p&gt;Thanks &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt; for your feedback. I will investigate again and try your suggestion&lt;/p&gt;</comment>
                            <comment id="362010" author="oanh.thai" created="Fri, 16 Jun 2023 08:48:45 +0200"  >&lt;p&gt;&lt;b&gt;Discovery status update:&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;&#160;&lt;br/&gt;
Following suggestion from &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt; to get rid of using `React.createContext()` in this draft &lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/208/diff#packages/react-editor/src/util/EditorContext.js&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;PR&lt;/a&gt;. So from now &lt;b&gt;react-editor&lt;/b&gt; does not rely on react context for sharing configData between EditablePage, EditableArea and EditableComponent.&lt;/p&gt;

&lt;p&gt;&#160;&lt;br/&gt;
Then trying new react-editor and apply App Router in next js 13 in nextjs-ssg-minimal&apos;s &lt;a href=&quot;https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/pull-requests/38/overview&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;PR&lt;/a&gt;. I see we still need to &quot;use client&quot; directive when importing EditablePage, EditableArea.&lt;/p&gt;

&lt;p&gt;From what I got so far (with above 2 draft PRs). Our react-editor can work with new App router of next js 13. But still need to place EditablePage, EditableArea under &quot;&lt;b&gt;use client&lt;/b&gt;&quot; because they are interactivity and still use State and browser API and so on&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-and-client-components&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;Here is suggestion from next-js 13&lt;/a&gt; when to use server and client component. &lt;br/&gt;
&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;a id=&quot;112630_thumb&quot; href=&quot;https://jira.magnolia-cms.com/secure/attachment/112630/112630_server-client-comparision.png&quot; title=&quot;server-client-comparision.png&quot; file-preview-type=&quot;image&quot; file-preview-id=&quot;112630&quot; file-preview-title=&quot;server-client-comparision.png&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/thumbnail/112630/_thumb_112630.png&quot; style=&quot;border: 0px solid black&quot; role=&quot;presentation&quot;/&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;To me, get rid of using &quot;&lt;b&gt;use client&lt;/b&gt;&quot; for EditablePage in Next js 13 is impossible. Additionally, Next Js 13 propose us suggestion when to use server and client component. From &lt;a href=&quot;https://nextjs.org/docs/getting-started/react-essentials#client-components&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;next js document&lt;/a&gt; about Client component.&#160;&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-java&quot;&gt;
Client Components enable you to add client-side interactivity to your application. In Next.js, they are&#160;pre-rendered&#160;on the server and&#160;hydrated&#160;on the client. You can think of Client Components as how components in the&#160;Pages Router&#160;have always worked.&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;From what I understand, use clients is acceptable from next js 13. &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt;. WDUT?&lt;/p&gt;</comment>
                            <comment id="362040" author="bstaryga" created="Fri, 16 Jun 2023 09:54:03 +0200"  >&lt;p&gt;Heyo, we do need to get rid of client components aka &lt;b&gt;use client&lt;/b&gt; as we must render whole page on server side, we can not hydrate the page content on client &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/sad.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;&lt;br/&gt;
&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=anoblet&quot; class=&quot;user-hover&quot; rel=&quot;anoblet&quot;&gt;anoblet&lt;/a&gt; any chance you could take a look how best we could modify existing react-editor to support the app routing in new Next?&lt;/p&gt;</comment>
                            <comment id="362147" author="czimmermann" created="Fri, 16 Jun 2023 17:08:51 +0200"  >&lt;p&gt;Yeah &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=anoblet&quot; class=&quot;user-hover&quot; rel=&quot;anoblet&quot;&gt;anoblet&lt;/a&gt;&#160;, would be great if you could take a look.&lt;/p&gt;</comment>
                            <comment id="362150" author="czimmermann" created="Fri, 16 Jun 2023 17:12:39 +0200"  >&lt;p&gt;This is kind of annoying...&lt;br/&gt;
&lt;a href=&quot;https://nextjs.org/docs/getting-started/react-essentials#sharing-fetch-requests-between-server-components&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://nextjs.org/docs/getting-started/react-essentials#sharing-fetch-requests-between-server-components&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;h3&gt;&lt;a name=&quot;SharingfetchrequestsbetweenServerComponentshttps%3A%2F%2Fnextjs.org%2Fdocs%2Fgettingstarted%2Freactessentials%23sharingfetchrequestsbetweenservercomponents&quot;&gt;&lt;/a&gt;&lt;a href=&quot;https://nextjs.org/docs/getting-started/react-essentials#sharing-fetch-requests-between-server-components&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;Sharing fetch requests between Server Components&lt;/a&gt;&lt;/h3&gt;

&lt;p&gt;When fetching data, you may want to share the result of a &lt;tt&gt;fetch&lt;/tt&gt; between a &lt;tt&gt;page&lt;/tt&gt; or &lt;tt&gt;layout&lt;/tt&gt; and some of its children components. This is an unnecessary coupling between the components and can lead to passing &lt;tt&gt;props&lt;/tt&gt; back and forth between components.&lt;/p&gt;

&lt;p&gt;Instead, we recommend colocating data fetching alongside the component that consumes the data. &lt;a href=&quot;https://nextjs.org/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;&lt;tt&gt;fetch&lt;/tt&gt; requests are automatically deduped&lt;/a&gt; in Server Components, so each route segment can request exactly the data it needs without worrying about duplicate requests. Next.js will read the same value from the &lt;tt&gt;fetch&lt;/tt&gt; cache.&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;I dont think we want every component to make a REST request!&lt;br/&gt;
Or is the de-duping so smart that in the end Next/React just makes one request? I doubt it.&lt;/p&gt;</comment>
                            <comment id="362151" author="czimmermann" created="Fri, 16 Jun 2023 17:14:52 +0200"  >&lt;p&gt;Could this &quot;global singleton&quot; work?&#160;&lt;/p&gt;
&lt;blockquote&gt;
&lt;h3&gt;&lt;a name=&quot;SharingdatabetweenServerComponentshttps%3A%2F%2Fnextjs.org%2Fdocs%2Fgettingstarted%2Freactessentials%23sharingdatabetweenservercomponents&quot;&gt;&lt;/a&gt;&lt;a href=&quot;https://nextjs.org/docs/getting-started/react-essentials#sharing-data-between-server-components&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;Sharing data between Server Components&lt;/a&gt;&lt;/h3&gt;

&lt;p&gt;Since Server Components are not interactive and therefore do not read from React state, you don&apos;t need React context to share data. Instead, you can use native JavaScript patterns for common data that multiple Server Components need to access. For example, a module can be used to share a database connection across multiple components:&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;But not for a connection - for some actual downloaded data?&lt;/p&gt;</comment>
                            <comment id="362152" author="czimmermann" created="Fri, 16 Jun 2023 17:18:06 +0200"  >&lt;p&gt;Might part of the solution be two different kinds of react-editor components? One set that is used in the editor experience with &quot;use client&quot;, and another set only used for SSR/SSG rendering which are the true server components?&lt;/p&gt;</comment>
                            <comment id="362303" author="JIRAUSER25264" created="Mon, 19 Jun 2023 12:42:57 +0200"  >&lt;p&gt;tl;dr As library maintainer, we unfortunately can&apos;t ship our code with &apos;use client&apos; or force our customers to use it side-wide because 1. forces the page to render as client components (see below) and 2. negates the server components &lt;em&gt;benefits&lt;/em&gt; altogether. In order to fully support server components requires a meaningful rewrite effort (see below).&lt;/p&gt;

&lt;p&gt;&amp;#8212;&lt;/p&gt;

&lt;p&gt;I started with Oanh work, and it was incredibly helpful to get into the issue! (&lt;a href=&quot;#packages/react-editor/src/util/ComponentHelper.js]&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;here&lt;/a&gt;&#160;and &lt;a href=&quot;#spa/nextjs-ssg-minimal/app/WrapperPages.js])&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;here&lt;/a&gt;&#160;&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Why no `use client`?&lt;/b&gt;&lt;br/&gt;
Relying on `use client` does partially solve the problem in the sense that it compiles and renders the component on the server and hydrates on the client &lt;b&gt;but&lt;/b&gt;, as &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt; pointed it out&lt;b&gt;,&lt;/b&gt; since it is at the root of the page, it forces all the page to render as client components. Effectively, nullifying/not letting the user leverage the server components altogether. With server components, React is merely used as a templating language to render static HTML.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Changes required:&lt;/b&gt;&lt;/p&gt;
&lt;ol&gt;
	&lt;li&gt;Remove the usage of context: &lt;a href=&quot;https://nextjs.org/docs/getting-started/react-essentials#sharing-data-between-server-components&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://nextjs.org/docs/getting-started/react-essentials#sharing-data-between-server-components&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;Convert all class components to function components: &lt;a href=&quot;https://nextjs.org/docs/messages/class-component-in-server-component&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://nextjs.org/docs/messages/class-component-in-server-component&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;EditableComment and EditablePage need to be rewritten to not use any local state or &quot;on mount&quot; as this is not supported on the server. In that context, I believe EditableComment needs to be heavily refactored/simplified.&lt;/li&gt;
&lt;/ol&gt;
</comment>
                            <comment id="362396" author="czimmermann" created="Mon, 19 Jun 2023 17:34:03 +0200"  >&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=oanh.thai&quot; class=&quot;user-hover&quot; rel=&quot;oanh.thai&quot;&gt;oanh.thai&lt;/a&gt;&#160;Do you think you are able to proceed with the above input? Or of course continue the conversation as needed - or bring up anything that you think requires PM decision.&lt;/p&gt;</comment>
                            <comment id="362418" author="oanh.thai" created="Tue, 20 Jun 2023 08:00:19 +0200"  >&lt;p&gt;Thank &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=anoblet&quot; class=&quot;user-hover&quot; rel=&quot;anoblet&quot;&gt;anoblet&lt;/a&gt; for your changed required suggestion. It&apos;s really help me. Item 1 have been done in PR&apos;s that you have tried.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Hi &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=czimmermann&quot; class=&quot;user-hover&quot; rel=&quot;czimmermann&quot;&gt;czimmermann&lt;/a&gt;: if I apply changed required from &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=anoblet&quot; class=&quot;user-hover&quot; rel=&quot;anoblet&quot;&gt;anoblet&lt;/a&gt;, the most complex part is below one&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;EditableComment and EditablePage need to be rewritten to not use any local state or &quot;on mount&quot; as this is not supported on the server. In that context, I believe EditableComment needs to be heavily refactored/simplified&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;It will be a big refactor for react-editor for sure. I doubt that we couldn&apos;t remove `use client` completely from react-editor. We still need some place that use client code (Ex: still need &lt;b&gt;PageEditorBridge.init&lt;/b&gt; in EditablePage..).&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;And regarding your below suggestion&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;Might part of the solution be two different kinds of react-editor components? One set that is used in the editor experience with &quot;use client&quot;, and another set only used for SSR/SSG rendering which are the true server components?&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;Two different kinds of react-editor components like your idea above is also my choice. Actually, I also think about exporting a new react-editor-v2 with new react components set and only working from react 18 and above.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;</comment>
                            <comment id="362452" author="JIRAUSER25264" created="Tue, 20 Jun 2023 10:32:44 +0200"  >&lt;p&gt;You&apos;re absolutely correct about the interactivity needed inside EditableComment. I do realise that what I&apos;m suggesting is a significant effort!&lt;/p&gt;

&lt;p&gt;Couple additional thoughts:&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;If &apos;use client&apos; is needed we should only have it inside the EditableComment and not at the page level to keep as much of the rendering &lt;em&gt;server compatible;&lt;/em&gt;&lt;/li&gt;
	&lt;li&gt;We don&apos;t really &lt;em&gt;need&lt;/em&gt; React to dispatch `window.parent.postMessage` events, so we could only rely on vanilla javascript: no need for &apos;use client&apos; and/but requires changes to PageEditorBridge works too;&lt;/li&gt;
	&lt;li&gt;Hindering the page load/rendering of every page for the sake of the editor doesn&apos;t seem like the optimal solution. Updating how EditableComment works/is rendered, would simplify the codebase a lot and improve the runtime performance down the road.&lt;/li&gt;
&lt;/ul&gt;
</comment>
                            <comment id="363782" author="oanh.thai" created="Wed, 28 Jun 2023 06:00:17 +0200"  >&lt;p&gt;Hi &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=czimmermann&quot; class=&quot;user-hover&quot; rel=&quot;czimmermann&quot;&gt;czimmermann&lt;/a&gt; .&#160;&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Here are update of discovery output:&lt;/b&gt; Look at &lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/218/overview&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;proposal PR&lt;/a&gt; for detail after I apply changed suggestion from &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=anoblet&quot; class=&quot;user-hover&quot; rel=&quot;anoblet&quot;&gt;anoblet&lt;/a&gt; in above thread comments&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;For react-editor project:&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;Remove the usage of react context and convert all class components to function components This is just support for next js 13 can build successfully. (Really thanks &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=anoblet&quot; class=&quot;user-hover&quot; rel=&quot;anoblet&quot;&gt;anoblet&lt;/a&gt;&#160; for your branch here :bow)&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Create a different set of EditablePage, EditableArea, EditableComponent, EditableComment&#160;&lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/218/diff#samples/nextjs13-app-router-ssg-minimal/components/ComponentConfig.js&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;in next JS&lt;/a&gt; due to:&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;b&gt;EditableComment&lt;/b&gt; still need to use &quot;use client&quot; because it need use useRef to create Dom (greenbar div) dynamically&lt;/li&gt;
	&lt;li&gt;Create new component &lt;b&gt;RegisterEvents&lt;/b&gt; and use &quot;use client&quot; to create script tag dynamically (Add css from backend (VAADIN/themes/pages-app/page-editor.css) and gwt widget set of post message(VAADIN/widgetsets/info.magnolia.PageEditor/info.magnolia.PageEditor.nocache.js) to register event click, move, drag, drop..) after rendering DOM of page. This part is moving from EditablePage.&#160;&lt;/li&gt;
	&lt;li&gt;Vanilla lib for sharing content, annotation data (json props) between server component (ContextSingleton.js) and&#160; (ComponentConfig.js) for sharing react component config (components in spa ex: headline, basic, contact (they can both define as server or client depend on their decision))&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Unfortunately, my discovery hasn&apos;t finished yet because I still stuck in how to bundle a JS react library that can support &quot;use client&quot; (moving EditablePage, EditableArea, EditableComponent, EditableComment to a new react project) and export them to js file so next js can import component easily.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;As I explain above,I still decide to keep &lt;b&gt;EditableComment&lt;/b&gt; and &lt;b&gt;RegisterEvents&lt;/b&gt; to use &quot;use client&quot;. And Next JS does not support well to export component from shared library that include &apos;use client&apos;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;From next js &lt;a href=&quot;https://nextjs.org/docs/getting-started/react-essentials&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;document&lt;/a&gt;: &lt;b&gt;&quot;It&apos;s worth noting some bundlers might strip out&#160;&quot;use client&quot;&#160;directives&lt;/b&gt;.&#160;&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;That is true. &quot;use client&quot; is not recognized for &lt;b&gt;webpack&lt;/b&gt;&#160;(module bundler). Currently, we can not use webpack to add &quot;use client&quot; from component library because there is no built-in Webpack feature specifically designed to add the &quot;use client&quot; directive automatically to each module exported by a React component library.&#160;&lt;/li&gt;
	&lt;li&gt;NX (&lt;a href=&quot;https://nx.dev/&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://nx.dev&lt;/a&gt;) has same problem as well. Nx strips &apos;use client&apos;; from a shared React component library. Currently NX can only recognised &quot;use client&quot; from monorepo has share workspace only&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Here are &lt;b&gt;some below reference link that I have follow and try:&lt;/b&gt;&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href=&quot;https://stackoverflow.com/questions/76432728/server-components-can-we-use-webpack-to-add-use-client-in-modules-from-compp&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://stackoverflow.com/questions/76432728/server-components-can-we-use-webpack-to-add-use-client-in-modules-from-compp&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;https://github.com/nrwl/nx/issues/13194&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://github.com/nrwl/nx/issues/13194&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;&#160;&lt;/p&gt;</comment>
                            <comment id="364198" author="czimmermann" created="Thu, 29 Jun 2023 17:39:46 +0200"  >&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=oanh.thai&quot; class=&quot;user-hover&quot; rel=&quot;oanh.thai&quot;&gt;oanh.thai&lt;/a&gt;&#160;Sounds complicated. And sounds like there are some ecosystem blockers (or potential blockers), like the bundlers. Sadly I am not deep enough in the topic to understand much of the above right now. Especially that it may require changes to PageEditorBridge.&lt;/p&gt;

&lt;p&gt;Still it seems like we are making some progress - and it seem like the move where possible to vanilla JS is a good path.&#160;&lt;/p&gt;

&lt;p&gt;I can say that we can certainly consider making big changes to the library and go for a 1.5 or 2.0 version of react-editor that is not backwards compatible. I could see releasing an alpha version so that customers and partners can try it and give feedback.&lt;/p&gt;

&lt;p&gt;One question I have - would the new version support both Next page router and app router or only app router?&lt;/p&gt;

&lt;p&gt;I think it would be good to get input from you too &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt;&#160;and &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=rsiska&quot; class=&quot;user-hover&quot; rel=&quot;rsiska&quot;&gt;rsiska&lt;/a&gt;&#160;. (I guess you&apos;ve seen tha above &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=anoblet&quot; class=&quot;user-hover&quot; rel=&quot;anoblet&quot;&gt;anoblet&lt;/a&gt;&#160;)&#160;&lt;/p&gt;</comment>
                            <comment id="364410" author="oanh.thai" created="Mon, 3 Jul 2023 06:17:43 +0200"  >&lt;p&gt;Hi &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=czimmermann&quot; class=&quot;user-hover&quot; rel=&quot;czimmermann&quot;&gt;czimmermann&lt;/a&gt; .&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;One question I have - would the new version support both Next page router and app router or only app router?&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;It should support as long as Next JS 13 can work in both page and app router.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;At the end. I come up with this &lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/220/overview&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;PR.&lt;/a&gt; My problem about bundling client component has been gone after I tried to write those client components with &lt;b&gt;typescript&lt;/b&gt;. As you agree that we can introduce a new react-editor so I don&apos;t have any problem so far.&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;To summary a bit my proposal in &lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/pull-requests/220/overview&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;PR.&lt;/a&gt; We have to create a new react-editor-2 and don&apos;t need to change &lt;b&gt;template-annotations&lt;/b&gt; module. Look at my structure below&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/113186/113186_structure.png&quot; height=&quot;219&quot; width=&quot;145&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&lt;b&gt;react-wrap-client-component-typescript&lt;/b&gt; that contains 2 client component (&apos;use client&apos;)&lt;/p&gt;
&lt;ul&gt;
	&lt;li&gt;EditableComment: to create greenbar dynamically&lt;/li&gt;
	&lt;li&gt;&lt;p&gt;RegisterEvents: to call PageEditorBridge init to register events and add css, script after page has been loaded&lt;br/&gt;
&lt;b&gt;react-editor-2&lt;/b&gt; ** that ** contains all server component (EditablePage, EditableArea..)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;And last one is &lt;b&gt;nextjs13-app-router-ssg-minima&lt;/b&gt;l that import &lt;b&gt;react-editor-2&lt;/b&gt; only and use app router.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;</comment>
                            <comment id="364443" author="JIRAUSER25264" created="Mon, 3 Jul 2023 09:59:20 +0200"  >&lt;p&gt;This is a significant step forward! As far as I understand: it limits the use of `&apos;use client&apos;` to `WrapperEditableComment` (and its children), so we don&apos;t opt-out the customer from server components, only our own code that is used for the editor. Which makes sense, since the comment has interactivity (click, drag, etc).&lt;/p&gt;


&lt;ul&gt;
	&lt;li&gt;Not a deal-breaker but why is the react-wrap-client needs to be separate from the editor itself? You mentioned TS, I might not have the full context here;&lt;/li&gt;
	&lt;li&gt;`setContextProps()` will be called on every render of the EditablePage, I have the feeling we can have something a little more clever here;&lt;/li&gt;
	&lt;li&gt;`RegisterEvents` appears to be just a hook and doesn&apos;t need to render anything;&lt;/li&gt;
	&lt;li&gt;Do we actually need `WrapperPages` still? Same question for `EditorContextHelperUtil`?&lt;/li&gt;
	&lt;li&gt;Naming-wise, can we find something else than `react-editor-2`?&#160; Going for a duplicate library that is going to be used by customers means that this thing is going to stay for a looong time &#128566;, so we might as well give it a futureproof name: `-rsc`? `-ng`? `-v18`? `-server`? `-isomorphic`?&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;These are the first few broader/overarching comments but should I review the PR fully and add comments there?&lt;/p&gt;</comment>
                            <comment id="364486" author="oanh.thai" created="Mon, 3 Jul 2023 12:04:06 +0200"  >&lt;p&gt;Thanks &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=anoblet&quot; class=&quot;user-hover&quot; rel=&quot;anoblet&quot;&gt;anoblet&lt;/a&gt; for your comments. All of them are really great.&lt;/p&gt;

&lt;p&gt;You do not need to review PR carefully because it&apos;s just a way to show output of discovery process. Until ticket add to our sprint and we have a a ready-to-review-PR, then I will add you as reviewer and would love to see your comment later &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/smile.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;.&lt;/p&gt;

&lt;p&gt;Regarding your feedback above:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;Not a deal-breaker but why is the react-wrap-client needs to be separate from the editor itself? You mentioned TS, I might not have the full context here;&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&#160; &#160; &#160;--&amp;gt; It is not a breaker because RegisterEvents and WrapperEditableComment do not expose for using public. I have to separate client component to bundle with &lt;a href=&quot;https://tsup.egoist.dev/&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://tsup.egoist.dev&lt;/a&gt; and &lt;a href=&quot;https://esbuild.github.io/&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://esbuild.github.io/&lt;/a&gt;. I have no glue clearly now but since NEXT 13.4 has just introduced stable app router in 4 May this year so not much bundlers support for this right now except &lt;b&gt;tsub&lt;/b&gt; and &lt;b&gt;typescript&lt;/b&gt;. Actually I did try with tsub and js, and some another bundlers but NEXT can not recognize react component with &quot;use client&quot;&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;`setContextProps()` will be called on every render of the EditablePage, I have the feeling we can have something a little more clever here;&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&#160; &#160; &#160; --&amp;gt; Agree that It needs more clever. I just try a small change for calling in EditablePage because I don&apos;t see data is update to date after editing or saving component.&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;`RegisterEvents` appears to be just a hook and doesn&apos;t need to render anything;&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&#160; &#160; &#160;--&amp;gt; Sure, just a hook to add css and vaadin js to register msg events. Without this, green bar (editable comment) can not be green and no interactive (move, drag, drop..)&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;Do we actually need `WrapperPages` still? Same question for `EditorContextHelperUtil`?&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&#160; &#160; &#160;--&amp;gt; Just a sample demo for next js 13. `WrapperPages` does not need. It can be inside page.js in app router&lt;br/&gt;
&#160; &#160; &#160;--&amp;gt; EditorContextHelperUtil. I forget to remove this class &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/biggrin.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;Naming of all thing&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&#160; &#160; &#160;--&amp;gt; Sure, they will be changed in ready-to-review PR&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Thank you a lot with your feed back &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=anoblet&quot; class=&quot;user-hover&quot; rel=&quot;anoblet&quot;&gt;anoblet&lt;/a&gt;&lt;/p&gt;</comment>
                    </comments>
                <issuelinks>
                            <issuelinktype id="10040">
                    <name>causality</name>
                                                                <inwardlinks description="is causing">
                                        <issuelink>
            <issuekey id="135308">MGNLFE-558</issuekey>
        </issuelink>
                            </inwardlinks>
                                    </issuelinktype>
                    </issuelinks>
                <attachments>
                            <attachment id="112630" name="server-client-comparision.png" size="174388" author="oanh.thai" created="Fri, 16 Jun 2023 08:33:44 +0200"/>
                            <attachment id="113186" name="structure.png" size="200746" author="oanh.thai" created="Mon, 3 Jul 2023 05:46:35 +0200"/>
                    </attachments>
                <subtasks>
                    </subtasks>
                <customfields>
                                                                            <customfield id="customfield_14166" key="com.okapya.jira.checklist:checklist">
                        <customfieldname>Acceptance criteria</customfieldname>
                        <customfieldvalues>
                            
        <checklist>
        <![CDATA[
                            




                
                                    <div class="o-completion" style="display: flex; flex-shrink: 0;"><span  class="aui-lozenge aui-lozenge-complete" style="font-size: 12px; font-weight: normal; display: flex; flex-direction: row; align-items: center;" ><span style="padding-right: 4px; vertical-align: middle;"><svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" fill="white"><path clip-rule="evenodd" d="m10.41037,3.42544l-7.86501,0c-0.72395,0 -1.31084,0.58688 -1.31084,1.31084l0,7.86508c0,0.7239 0.58689,1.3108 1.31084,1.3108l7.86501,0c0.724,0 1.3109,-0.5869 1.3109,-1.3108l0,-7.86508c0,-0.72396 -0.5869,-1.31084 -1.3109,-1.31084zm-7.86501,-0.65542c-1.08593,0 -1.96626,0.88032 -1.96626,1.96626l0,7.86508c0,1.0859 0.88033,1.9662 1.96626,1.9662l7.86501,0c1.086,0 1.9663,-0.8803 1.9663,-1.9662l0,-7.86508c0,-1.08594 -0.8803,-1.96626 -1.9663,-1.96626l-7.86501,0z" fill-rule="evenodd"/><path d="m5.09049,10.18526l-1.82767,-1.82766l-0.78479,0.78479l2.61246,2.61246l5.38758,-5.38754l-0.78483,-0.78479l-4.60275,4.60274z"/></svg></span><span>Empty</span></span></div>
                        ]]>
    </checklist>


                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <customfield id="customfield_10111" key="com.atlassian.jira.toolkit:reporterdomain">
                        <customfieldname>Company</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>magnolia-cms.com</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                <customfield id="customfield_10031" key="com.atlassian.jira.ext.charting:firstresponsedate">
                        <customfieldname>Date of First Response</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>Fri, 2 Jun 2023 06:12:50 +0200</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_12730" key="com.atlassian.jira.plugins.jira-development-integration-plugin:devsummary">
                        <customfieldname>Development</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_14151" key="com.atlassian.jira.toolkit:message">
                        <customfieldname>Docu info</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_10246" key="com.pyxis.greenhopper.jira:gh-epic-link">
                        <customfieldname>Epic Link</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>PAGES-218</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <customfield id="customfield_10061" key="com.atlassian.jira.toolkit:lastusercommented">
                        <customfieldname>Last comm is not jira-dev</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>true</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10071" key="com.atlassian.jira.toolkit:lastupdaterorcommenter">
                        <customfieldname>Last participant</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>czimmermann</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_13136" key="com.atlassian.jira.toolkit:LastCommentDate">
                        <customfieldname>Last public comment date</customfieldname>
                        <customfieldvalues>
                            31 weeks, 6 days ago
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_10020" key="com.atlassian.jira.toolkit:attachments">
                        <customfieldname>Number of attachments</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>2.0</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10150" key="com.atlassian.jira.toolkit:comments">
                        <customfieldname>Number of comments</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>19.0</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <customfield id="customfield_10011" key="com.atlassian.jira.toolkit:participants">
                        <customfieldname>Participants</customfieldname>
                        <customfieldvalues>
                                        <customfieldvalue>anoblet</customfieldvalue>
            <customfieldvalue>bstaryga</customfieldvalue>
            <customfieldvalue>czimmermann</customfieldvalue>
            <customfieldvalue>oanh.thai</customfieldvalue>
    
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                <customfield id="customfield_10833" key="com.pyxis.greenhopper.jira:gh-lexo-rank">
                        <customfieldname>Rank</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>0|hzztvm:60o4424</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10244" key="com.pyxis.greenhopper.jira:gh-global-rank">
                        <customfieldname>Rank (Obsolete)</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>9223372036854775807</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <customfield id="customfield_14168" key="com.okapya.jira.checklist:checklist">
                        <customfieldname>Task DoD</customfieldname>
                        <customfieldvalues>
                            
        <checklist>
        <![CDATA[
                            




                
                        
        <div style="margin-bottom: 8px;">
                            <div class="o-completion" style="display: flex; flex-shrink: 0;"><span  class="aui-lozenge" style="font-size: 12px; font-weight: normal; display: flex; flex-direction: row; align-items: center;" ><span style="padding-right: 4px; vertical-align: middle;"><svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" fill="white"><path clip-rule="evenodd" d="m10.41037,3.42544l-7.86501,0c-0.72395,0 -1.31084,0.58688 -1.31084,1.31084l0,7.86508c0,0.7239 0.58689,1.3108 1.31084,1.3108l7.86501,0c0.724,0 1.3109,-0.5869 1.3109,-1.3108l0,-7.86508c0,-0.72396 -0.5869,-1.31084 -1.3109,-1.31084zm-7.86501,-0.65542c-1.08593,0 -1.96626,0.88032 -1.96626,1.96626l0,7.86508c0,1.0859 0.88033,1.9662 1.96626,1.9662l7.86501,0c1.086,0 1.9663,-0.8803 1.9663,-1.9662l0,-7.86508c0,-1.08594 -0.8803,-1.96626 -1.9663,-1.96626l-7.86501,0z" fill-rule="evenodd"/><path d="m5.09049,10.18526l-1.82767,-1.82766l-0.78479,0.78479l2.61246,2.61246l5.38758,-5.38754l-0.78483,-0.78479l-4.60275,4.60274z"/></svg></span><span>0/6</span></span></div>
                    
            <div class="checklist-progress-bar-wrapper" style="">
        <div class="checklist-progress-bar" style="position: relative; width: 100%; background-color: #cccccc; margin-bottom: 2px; margin-top: 5px;">
                        <div class="checklist-progress" style="display: block; float: none; width: 0%; height: 2px; background: #14892c;">
                            </div>
        </div>
    </div>
        </div>
    
                                    <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="unchecked"><path d="M0.441406 6.94141C0.441406 5.28455 1.78455 3.94141 3.44141 3.94141H15.4414C17.0983 3.94141 18.4414 5.28455 18.4414 6.94141V18.9414C18.4414 20.5983 17.0983 21.9414 15.4414 21.9414H3.44141C1.78455 21.9414 0.441406 20.5983 0.441406 18.9414V6.94141Z" fill="#EFF4FB" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4414 3.94141H3.44141C1.78455 3.94141 0.441406 5.28455 0.441406 6.94141V18.9414C0.441406 20.5983 1.78455 21.9414 3.44141 21.9414H15.4414C17.0983 21.9414 18.4414 20.5983 18.4414 18.9414V9.94141H17.4414V18.9414C17.4414 20.046 16.546 20.9414 15.4414 20.9414H3.44141C2.33684 20.9414 1.44141 20.046 1.44141 18.9414V6.94141C1.44141 5.83684 2.33684 4.94141 3.44141 4.94141H12.4414V3.94141Z" fill="#ADBBD0" /><path d="M21.5306 5.91574L19.3486 4.58101L21.5306 3.24628C21.5681 3.22328 21.595 3.18633 21.6053 3.14348C21.6156 3.10063 21.6084 3.05545 21.5855 3.01792L20.9444 1.96985C20.8966 1.89162 20.7942 1.86696 20.716 1.91479L18.6331 3.18898V0.747138C18.6331 0.65546 18.5587 0.581055 18.4671 0.581055H17.2386C17.1469 0.581055 17.0725 0.65546 17.0725 0.747138V3.18898L14.9896 1.91487C14.9112 1.86704 14.8091 1.89162 14.7612 1.96993L14.1201 3.018C14.0972 3.05554 14.09 3.10071 14.1003 3.14356C14.1106 3.18641 14.1375 3.22336 14.175 3.24637L16.3571 4.58101L14.175 5.91574C14.1375 5.93866 14.1106 5.9757 14.1003 6.01847C14.09 6.0614 14.0972 6.10657 14.1201 6.14411L14.7612 7.1921C14.8091 7.27032 14.9112 7.29507 14.9896 7.24724L17.0725 5.97304V8.41489C17.0725 8.50657 17.1469 8.58097 17.2386 8.58097H18.4671C18.5587 8.58097 18.6331 8.50657 18.6331 8.41489V5.97313L20.7161 7.24715C20.7943 7.29499 20.8967 7.27032 20.9444 7.19218L21.5856 6.14411C21.6085 6.10657 21.6157 6.0614 21.6054 6.01855C21.5952 5.97562 21.5682 5.93875 21.5306 5.91574Z" fill="#de350b" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span >
                                                        <span>Doc/release notes changes? Comment present?</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="unchecked"><path d="M0.441406 6.94141C0.441406 5.28455 1.78455 3.94141 3.44141 3.94141H15.4414C17.0983 3.94141 18.4414 5.28455 18.4414 6.94141V18.9414C18.4414 20.5983 17.0983 21.9414 15.4414 21.9414H3.44141C1.78455 21.9414 0.441406 20.5983 0.441406 18.9414V6.94141Z" fill="#EFF4FB" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4414 3.94141H3.44141C1.78455 3.94141 0.441406 5.28455 0.441406 6.94141V18.9414C0.441406 20.5983 1.78455 21.9414 3.44141 21.9414H15.4414C17.0983 21.9414 18.4414 20.5983 18.4414 18.9414V9.94141H17.4414V18.9414C17.4414 20.046 16.546 20.9414 15.4414 20.9414H3.44141C2.33684 20.9414 1.44141 20.046 1.44141 18.9414V6.94141C1.44141 5.83684 2.33684 4.94141 3.44141 4.94141H12.4414V3.94141Z" fill="#ADBBD0" /><path d="M21.5306 5.91574L19.3486 4.58101L21.5306 3.24628C21.5681 3.22328 21.595 3.18633 21.6053 3.14348C21.6156 3.10063 21.6084 3.05545 21.5855 3.01792L20.9444 1.96985C20.8966 1.89162 20.7942 1.86696 20.716 1.91479L18.6331 3.18898V0.747138C18.6331 0.65546 18.5587 0.581055 18.4671 0.581055H17.2386C17.1469 0.581055 17.0725 0.65546 17.0725 0.747138V3.18898L14.9896 1.91487C14.9112 1.86704 14.8091 1.89162 14.7612 1.96993L14.1201 3.018C14.0972 3.05554 14.09 3.10071 14.1003 3.14356C14.1106 3.18641 14.1375 3.22336 14.175 3.24637L16.3571 4.58101L14.175 5.91574C14.1375 5.93866 14.1106 5.9757 14.1003 6.01847C14.09 6.0614 14.0972 6.10657 14.1201 6.14411L14.7612 7.1921C14.8091 7.27032 14.9112 7.29507 14.9896 7.24724L17.0725 5.97304V8.41489C17.0725 8.50657 17.1469 8.58097 17.2386 8.58097H18.4671C18.5587 8.58097 18.6331 8.50657 18.6331 8.41489V5.97313L20.7161 7.24715C20.7943 7.29499 20.8967 7.27032 20.9444 7.19218L21.5856 6.14411C21.6085 6.10657 21.6157 6.0614 21.6054 6.01855C21.5952 5.97562 21.5682 5.93875 21.5306 5.91574Z" fill="#de350b" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span >
                                                        <span>Downstream builds green?</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="unchecked"><path d="M0.441406 6.94141C0.441406 5.28455 1.78455 3.94141 3.44141 3.94141H15.4414C17.0983 3.94141 18.4414 5.28455 18.4414 6.94141V18.9414C18.4414 20.5983 17.0983 21.9414 15.4414 21.9414H3.44141C1.78455 21.9414 0.441406 20.5983 0.441406 18.9414V6.94141Z" fill="#EFF4FB" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4414 3.94141H3.44141C1.78455 3.94141 0.441406 5.28455 0.441406 6.94141V18.9414C0.441406 20.5983 1.78455 21.9414 3.44141 21.9414H15.4414C17.0983 21.9414 18.4414 20.5983 18.4414 18.9414V9.94141H17.4414V18.9414C17.4414 20.046 16.546 20.9414 15.4414 20.9414H3.44141C2.33684 20.9414 1.44141 20.046 1.44141 18.9414V6.94141C1.44141 5.83684 2.33684 4.94141 3.44141 4.94141H12.4414V3.94141Z" fill="#ADBBD0" /><path d="M21.5306 5.91574L19.3486 4.58101L21.5306 3.24628C21.5681 3.22328 21.595 3.18633 21.6053 3.14348C21.6156 3.10063 21.6084 3.05545 21.5855 3.01792L20.9444 1.96985C20.8966 1.89162 20.7942 1.86696 20.716 1.91479L18.6331 3.18898V0.747138C18.6331 0.65546 18.5587 0.581055 18.4671 0.581055H17.2386C17.1469 0.581055 17.0725 0.65546 17.0725 0.747138V3.18898L14.9896 1.91487C14.9112 1.86704 14.8091 1.89162 14.7612 1.96993L14.1201 3.018C14.0972 3.05554 14.09 3.10071 14.1003 3.14356C14.1106 3.18641 14.1375 3.22336 14.175 3.24637L16.3571 4.58101L14.175 5.91574C14.1375 5.93866 14.1106 5.9757 14.1003 6.01847C14.09 6.0614 14.0972 6.10657 14.1201 6.14411L14.7612 7.1921C14.8091 7.27032 14.9112 7.29507 14.9896 7.24724L17.0725 5.97304V8.41489C17.0725 8.50657 17.1469 8.58097 17.2386 8.58097H18.4671C18.5587 8.58097 18.6331 8.50657 18.6331 8.41489V5.97313L20.7161 7.24715C20.7943 7.29499 20.8967 7.27032 20.9444 7.19218L21.5856 6.14411C21.6085 6.10657 21.6157 6.0614 21.6054 6.01855C21.5952 5.97562 21.5682 5.93875 21.5306 5.91574Z" fill="#de350b" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span >
                                                        <span>Solution information and context easily available?</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="unchecked"><path d="M0.441406 6.94141C0.441406 5.28455 1.78455 3.94141 3.44141 3.94141H15.4414C17.0983 3.94141 18.4414 5.28455 18.4414 6.94141V18.9414C18.4414 20.5983 17.0983 21.9414 15.4414 21.9414H3.44141C1.78455 21.9414 0.441406 20.5983 0.441406 18.9414V6.94141Z" fill="#EFF4FB" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4414 3.94141H3.44141C1.78455 3.94141 0.441406 5.28455 0.441406 6.94141V18.9414C0.441406 20.5983 1.78455 21.9414 3.44141 21.9414H15.4414C17.0983 21.9414 18.4414 20.5983 18.4414 18.9414V9.94141H17.4414V18.9414C17.4414 20.046 16.546 20.9414 15.4414 20.9414H3.44141C2.33684 20.9414 1.44141 20.046 1.44141 18.9414V6.94141C1.44141 5.83684 2.33684 4.94141 3.44141 4.94141H12.4414V3.94141Z" fill="#ADBBD0" /><path d="M21.5306 5.91574L19.3486 4.58101L21.5306 3.24628C21.5681 3.22328 21.595 3.18633 21.6053 3.14348C21.6156 3.10063 21.6084 3.05545 21.5855 3.01792L20.9444 1.96985C20.8966 1.89162 20.7942 1.86696 20.716 1.91479L18.6331 3.18898V0.747138C18.6331 0.65546 18.5587 0.581055 18.4671 0.581055H17.2386C17.1469 0.581055 17.0725 0.65546 17.0725 0.747138V3.18898L14.9896 1.91487C14.9112 1.86704 14.8091 1.89162 14.7612 1.96993L14.1201 3.018C14.0972 3.05554 14.09 3.10071 14.1003 3.14356C14.1106 3.18641 14.1375 3.22336 14.175 3.24637L16.3571 4.58101L14.175 5.91574C14.1375 5.93866 14.1106 5.9757 14.1003 6.01847C14.09 6.0614 14.0972 6.10657 14.1201 6.14411L14.7612 7.1921C14.8091 7.27032 14.9112 7.29507 14.9896 7.24724L17.0725 5.97304V8.41489C17.0725 8.50657 17.1469 8.58097 17.2386 8.58097H18.4671C18.5587 8.58097 18.6331 8.50657 18.6331 8.41489V5.97313L20.7161 7.24715C20.7943 7.29499 20.8967 7.27032 20.9444 7.19218L21.5856 6.14411C21.6085 6.10657 21.6157 6.0614 21.6054 6.01855C21.5952 5.97562 21.5682 5.93875 21.5306 5.91574Z" fill="#de350b" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span >
                                                        <span><strong>Tests</strong></span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="unchecked"><path d="M0.441406 6.94141C0.441406 5.28455 1.78455 3.94141 3.44141 3.94141H15.4414C17.0983 3.94141 18.4414 5.28455 18.4414 6.94141V18.9414C18.4414 20.5983 17.0983 21.9414 15.4414 21.9414H3.44141C1.78455 21.9414 0.441406 20.5983 0.441406 18.9414V6.94141Z" fill="#EFF4FB" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12.4414 3.94141H3.44141C1.78455 3.94141 0.441406 5.28455 0.441406 6.94141V18.9414C0.441406 20.5983 1.78455 21.9414 3.44141 21.9414H15.4414C17.0983 21.9414 18.4414 20.5983 18.4414 18.9414V9.94141H17.4414V18.9414C17.4414 20.046 16.546 20.9414 15.4414 20.9414H3.44141C2.33684 20.9414 1.44141 20.046 1.44141 18.9414V6.94141C1.44141 5.83684 2.33684 4.94141 3.44141 4.94141H12.4414V3.94141Z" fill="#ADBBD0" /><path d="M21.5306 5.91574L19.3486 4.58101L21.5306 3.24628C21.5681 3.22328 21.595 3.18633 21.6053 3.14348C21.6156 3.10063 21.6084 3.05545 21.5855 3.01792L20.9444 1.96985C20.8966 1.89162 20.7942 1.86696 20.716 1.91479L18.6331 3.18898V0.747138C18.6331 0.65546 18.5587 0.581055 18.4671 0.581055H17.2386C17.1469 0.581055 17.0725 0.65546 17.0725 0.747138V3.18898L14.9896 1.91487C14.9112 1.86704 14.8091 1.89162 14.7612 1.96993L14.1201 3.018C14.0972 3.05554 14.09 3.10071 14.1003 3.14356C14.1106 3.18641 14.1375 3.22336 14.175 3.24637L16.3571 4.58101L14.175 5.91574C14.1375 5.93866 14.1106 5.9757 14.1003 6.01847C14.09 6.0614 14.0972 6.10657 14.1201 6.14411L14.7612 7.1921C14.8091 7.27032 14.9112 7.29507 14.9896 7.24724L17.0725 5.97304V8.41489C17.0725 8.50657 17.1469 8.58097 17.2386 8.58097H18.4671C18.5587 8.58097 18.6331 8.50657 18.6331 8.41489V5.97313L20.7161 7.24715C20.7943 7.29499 20.8967 7.27032 20.9444 7.19218L21.5856 6.14411C21.6085 6.10657 21.6157 6.0614 21.6054 6.01855C21.5952 5.97562 21.5682 5.93875 21.5306 5.91574Z" fill="#de350b" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span >
                                                        <span><strong>FixVersion</strong> filled and not yet released</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="unchecked"><rect fill="#EFF4FB" height="17.5" rx="2.5" stroke="#ADBBD0" width="18" x="0.44141" y="3.94141"/></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span >
                                                        <span>Architecture Decision Record (<strong>ADR</strong>)</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                            ]]>
    </checklist>


                        </customfieldvalues>
                    </customfield>
                                                                                            <customfield id="customfield_12430" key="com.atlassian.teams:rm-teams-custom-field-team">
                        <customfieldname>Team</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue><![CDATA[26]]></customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                            <customfield id="customfield_14145" key="com.intenso.jira.issue-templates:issue-templates-customfield">
                        <customfieldname>Template</customfieldname>
                        <customfieldvalues>
                            


                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_15131" key="com.onresolve.jira.groovy.groovyrunner:scripted-field">
                        <customfieldname>Time in Discovery</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>978</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10032" key="com.atlassian.jira.ext.charting:timeinstatus">
                        <customfieldname>Time in Status</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_13933" key="com.atlassian.jira.plugin.system.customfieldtypes:select">
                        <customfieldname>Urgency (resolution)</customfieldname>
                        <customfieldvalues>
                                <customfieldvalue key="15724"><![CDATA[Normal]]></customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                <customfield id="customfield_14630" key="com.atlassian.jira.plugin.system.customfieldtypes:datetime">
                        <customfieldname>Work Started</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>Tue, 23 May 2023 09:41:14 +0200</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                    </customfields>
    </item>
</channel>
</rss>