[xwiki-devs] Fwd: [Proposal] WikiMacro inline editing: 2 new dedicated macros

21 May 2019

      ---------- Forwarded message ---------
From: Marius Dumitru Florea <[email protected]>
Date: Tue, May 21, 2019 at 1:06 PM
Subject: Re: [xwiki-devs] [Proposal] WikiMacro inline editing: 2 new
dedicated macros
To: Simon Urli <[email protected]>

On Mon, May 20, 2019 at 11:57 AM Simon Urli <[email protected]> wrote:
...
Hello Marius,
On 14/05/2019 13:12, Simon Urli wrote:
...
On 14/05/2019 13:07, Marius Dumitru Florea wrote:
...
On Tue, May 14, 2019 at 2:04 PM Simon Urli <[email protected]
<mailto:[email protected]>> wrote:
On 14/05/2019 13:02, Marius Dumitru Florea wrote:
     > On Tue, May 14, 2019 at 1:55 PM Simon Urli <[email protected]
    <mailto:[email protected]>
     > <mailto:[email protected] <mailto:[email protected]>>>
wrote:
     >
     >
     >
     >     On 14/05/2019 12:43, Marius Dumitru Florea wrote:
     >      > On Fri, May 10, 2019 at 11:21 AM Simon Urli
    <[email protected] <mailto:[email protected]>
     >     <mailto:[email protected] <mailto:[email protected]>>
     >      > <mailto:[email protected] <mailto:[email protected]
...
<mailto:[email protected] <mailto:[email protected]>>>>
wrote:
...
...
>      >
     >      >     Hi Marius, all,
     >      >
     >      >     On 09/05/2019 09:29, Simon Urli wrote:
     >      >      > Hi Marius, all,
     >      >      >
     >      >      > On 08/05/2019 14:09, Marius Dumitru Florea wrote:
     >      >      >> Hi Simon,
     >      >      >>
     >      >      >> As I commented on
     >      > https://github.com/xwiki/xwiki-platform/pull/1109 I
     >      >      >> think
     >      >      >> that most of the time you will want to use a
scripting
     >     macro +
     >      >     HTML macro
     >      >      >> like this:
     >      >      >>
     >      >      >> {{velocity}}
     >      >      >> {{html clean="false"}}
     >      >      >> <div ...><!-- Some wrapping around the content
    that may
     >     depend
     >      >     on the
     >      >      >> macro
     >      >      >> parameters  -->
     >      >      >>    ...
     >      >      >>    <!-- Output the macro content here so that it
    can be
     >     edited
     >      >     in-line in
     >      >      >> the WYSIWYG editor. -->
     >      >      >>    ...
     >      >      >> </div>
     >      >      >> {{/html}}
     >      >      >> {{/velocity}}
     >      >      >>
     >      >      >> An example of such a macro could be:
     >      >      >>
     >      >      >> {{figure src="someImage.png"}}some
    description{{/figure}}
     >      >      >>
     >      >      >> The macro code would look like this:
     >      >      >>
     >      >      >> {{velocity}}
     >      >      >> {{html clean="false"}}
     >      >      >> <div class="figure">
     >      >      >>    <div class="figure-image-wrapper">
     >      >      >>      <img src="..." class="figure-image" />
     >      >      >>    </div>
     >      >      >>    <div class="figure-caption">
     >      >      >>      <!-- Output the figure caption here so that
    it can
     >     be edited
     >      >      >> in-line in
     >      >      >> the WYSIWYG editor. -->
     >      >      >>    </div>
     >      >      >> </div>
     >      >      >> {{/html}}
     >      >      >> {{/velocity}}
     >      >      >>
     >      >      >> I know you can output DIVs with wiki syntax but
that's
     >     not the
     >      >     point. The
     >      >      >> point is that we want to use HTML for the UI and
leave
     >     the wiki
     >      >     syntax
     >      >      >> for
     >      >      >> the user content. So I don't think
    ``wikimacrocontent``
     >     is that
     >      >     useful
     >      >      >> (if
     >      >      >> it's only purpose is to help you output the
     >      >     ``non-generated-content``
     >      >      >> DIV).
     >      >      >
     >      >      > so as Thomas mentioned in order to allow inline
    editing I also
     >      >     perform
     >      >      > transformation on the generated list of blocks in
     >      >      > DefaultWikiMacroRenderer to remove the macro marker
    that
     >     can cause
     >      >      > troubles for inline editing. So the
wikimacrocontent is
     >     used both to
     >      >      > insert content, and to detect where to remove the
macro
     >     markers
     >      >     during
     >      >      > the transformation.
     >      >      >
     >      >      > Now right now even with this solution it's not
    possible to
     >     inline
     >      >     edit
     >      >      > html macro because of the way it's designed: the
HTML
     >     macro only
     >      >     create
     >      >      > a raw blocks that contains all the html, so I
    cannot easily
     >      >     transform it
     >      >      > for inline editing. IMO it requires a change in the
    HTML
     >     macro.
     >      >
     >      >     so, re the subject of HTML macro and the handle of
inline
     >     editing I was
     >      >     actually wrong to assume that it was linked to the raw
    block.
     >     It's
     >      >     actually linked to the metadata that are currently not
     >     handled in the
     >      >     custom HTML renderer of HTML macro. I created a
dedicated
     >     issue for it
     >      >     (https://jira.xwiki.org/browse/XRENDERING-563), it's
    actually
     >     easy to
     >      >     fix since the mechanism already exist in
    AnnotatedHTMLRenderer.
     >      >     So I've been able to successfully create a very simple
    inline
     >     editing
     >      >     wiki macro like this:
     >      >
     >      >     {{html wiki="true"}}
     >      >     <div style="border: 1px solid red">
     >      >     ((({{wikimacrocontent/}})))
     >      >     </div>
     >      >     {{/html}}
     >      >
     >      >     I had to put the ((( ))) to avoid having the
    wikimacrocontent
     >     rendered
     >      >     inline, maybe there's a way to do it cleaner, but I
just
     >     wanted to
     >      >     check
     >      >     that it's working there.
     >      >     IMO it should really be the next priority in terms of
     >     usability of
     >      >     inline editing, to find a way to allow inline
editing of
     >     inline macro.
     >      >
     >      >
     >      > Would it be hard to have a scripting API equivalent for
the
...
>      > wikimacrocontent macro? I don't like mixing HTML with wiki
    syntax
     >     (you
     >      > can get into trouble easily). As a wiki macro developer I
    would
     >     prefer
     >      > to be able to write something like this:
     >      >
     >      > {{velocity}}
     >      > {{html clean="false"}}
     >      > <div class="my-macro">
     >      > $xcontext.macro.renderNonGeneratedContent()
     >      > </div>
     >      > {{/html}}
     >      > {{/velocity}}
     >      > Thanks,
     >      > Marius
     >
     >     Basically this API would need to:
     >         1. Create the div around the macro content
     >         2. Add a marker around that div to specify that
    everything's inside
     >     should be kept (since we need to remove the other macro
    markers in the
     >     WikiMacroRenderer)
     >         3. Render the div + the content in the right target
syntax
...
>
     >     What bothers me here is that I don't think we would have
    access to the
     >     rendering context, to know the syntax that should be used to
    render the
     >     metadata.
     >
     >
     > The alternative is:
     >
     > {{velocity}}
     > {{html clean="false"}}
     > <div class="my-macro">
     >    ...
     > {{html}}
     >
     > {{wikimacrocontent/}}
     >
     > {{html clean="false"}}
     >    ...
     > </div>
     > {{/html}}
     > {{/velocity}}
     > It feels like a hack, but I can leave with it.
Actually you could do:
{{html wiki="true"}}
    <div class="my-macro">
    {{wikimacrocontent/}}
    </div>
    {{/html}}
but yeah it's mixing both syntax.
I want to avoid this if possible.
Now I have to check but with
https://jira.xwiki.org/browse/XRENDERING-563 you might be able to
directly do:
{{velocity}}
{{html}}
<div class="mymacro">
   <div
data-xwiki-non-generated-content="java.util.List<org.xwiki.Block>">
     $xcontext.macro.content
   </div>
</div>
{{/html}}
{{/velocity}}
However I don't know how it would handle content containing other macros.
So I just tested how we would do that, and I managed to do it using the
following code:
{{velocity}}
{{html}}
<div style="border: 1px solid red">
   <div class="xwiki-metadata-container"
data-xwiki-non-generated-content="java.util.List<org.xwiki.Block>"
data-xwiki-wikimacrocontent="true" data-xwiki-syntax="xhtml/1.0">
     $xcontext.macro.content
   </div>
</div>
{{/html}}
{{/velocity}}
Note that the syntax metadata is mandatory here since the HTML Macro
will consider that it's content is HTML.
Now there is one remaining issue: we cannot apparently insert macro in
it. Here's the parameter request which is sent:
<!DOCTYPE+html+PUBLIC+"-//W3C//DTD+XHTML+1.0+Strict//EN"+"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html+xmlns="
http://www.w3.org/1999/xhtml
"+xml:lang="en"+lang="en"><body><!--startmacro:toto|-||-|<p>Some+content+inside+the+macro+encore+un+test?</p><p>un+autre+<strong>test</strong></p>--><div+data-xwiki-non-generated-content="java.util.List<org.xwiki.Block>"+data-xwiki-syntax="xhtml/1.0"+data-xwiki-wikimacrocontent="true"+class="xwiki-metadata-container"><p>Some+content+inside+the+macro+encore+un+test?</p><div+class="wikimodel-emptyline"></div><p><!--startmacro:box|-|__cke_selected_macro="true"|-|dfgsdg--><!--stopmacro--></p><p>un+autre+<strong>test</strong></p></div><!--stopmacro--><div+class="wikimodel-emptyline"></div></body></html>
you can see the markers for the box macro, with a new paragraph around
it and an empty line before it.
Here's the body answer of the request:
<body id="body" class="skin-flamingo viewbody main wiki-xwiki
space-TotoMacro"><!--startmacro:toto|-||-|<p>Some content inside the
macro encore un test?</p><p>un autre <strong>test</strong></p>--><div
style="border: 1px solid red">
<div class="xwiki-metadata-container"
data-xwiki-non-generated-content="java.util.List<org.xwiki.Block>"
data-xwiki-syntax="xhtml/1.0" data-xwiki-wikimacrocontent="true">
<p>Some content inside the macro encore un test?</p><p>un autre
<strong>test</strong></p>
</div>
</div><!--stopmacro--><div class="wikimodel-emptyline"></div></body>
The fact that the macro marker is missing is expected since I removed it
after transformation in WikiMacroRenderer. However, it should have been
transformed: we should get the HTML for the box. I still need to
investigate to understand why it disappeared.

...
I'm not sure if I need to document this way to allow inline editing of
macro content, or maybe just in HTML macro page? WDYT?
I think it's worth documenting it on the wiki macro documentation page or
on the tutorial about writing a wiki macro, as an advanced feature. I don't
think the HTML macro page is the right place.

Thanks for working on this,
Marius
...
Simon
...
...
Still it's working.
     >
     > Thanks,
     > Marius
     >
     >      >
     >      >
     >      >     Simon
     >      >      >
     >      >      > Simon
     >      >      >>
     >      >      >> Thanks,
     >      >      >> Marius
     >      >      >>
     >      >      >>
     >      >      >> On Tue, May 7, 2019 at 9:21 AM Simon Urli
     >     <[email protected] <mailto:[email protected]>
    <mailto:[email protected] <mailto:[email protected]>>
     >      >     <mailto:[email protected]
    <mailto:[email protected]> <mailto:[email protected]
    <mailto:[email protected]>>>>
     >     wrote:
     >      >      >>
     >      >      >>> Hi everyone,
     >      >      >>>
     >      >      >>> I'm currently working on allowing inline editing
    on new
     >     wikimacros.
     >      >      >>> My first challenge right now is to cope with the
    problem of
     >      >     inserting
     >      >      >>> the macro content and allowing to inline edit it.
     >      >      >>>
     >      >      >>> In order to do so, I propose to create two new
    dedicated
     >     macro:
     >      >      >>>     - wikimacrocontent: would allow to insert and
    inline
     >     edit a
     >      >     wiki
     >      >      >>> macro content
     >      >      >>>     - wikimacroparameter: the same for a
parameter.
     >      >      >>>
     >      >      >>> The idea would be to be able to write something
    such as:
     >      >      >>>
     >      >      >>> {{velocity}}
     >      >      >>> {{wikimacrocontent/}}
     >      >      >>> This is a content of
$xcontext.macro.content.length()
     >     characters.
     >      >      >>> {{/velocity}}
     >      >      >>>
     >      >      >>> So the purpose of those macros would be twofold:
     >      >      >>>     1. to ease the insertion of macro
    content/parameters (no
     >      >     need to
     >      >      >>> always use
    {{velocity}}$xcontext.macro.content{{/velocity}}
     >      >      >>>     2. to create the dedicated metadata around
the
...
>     content and
     >      >     to be
     >      >      >>> processed during wikimacro rendering to allow
    inline editing
     >      >      >>>
     >      >      >>> Of course those macro would be only to be used
    inside a
     >     wikimacro.
     >      >      >>> I started to develop the wikimacroccontent, so I
    have a
     >     first
     >      >     working
     >      >      >>> POC, but I'd like to know WDYT about this.
     >      >      >>>
     >      >      >>> I would also be really happy if you could give me
    some
     >     wikimacro
     >      >      >>> examples where the inline editing would make
    sense, so I
     >     could
     >      >     use it in
     >      >      >>> my tests.
     >      >      >>>
     >      >      >>> Thanks,
     >      >      >>> Simon
     >      >      >>> --
     >      >      >>> Simon Urli
     >      >      >>> Software Engineer at XWiki SAS
     >      >      >>> [email protected]
    <mailto:[email protected]> <mailto:[email protected]
    <mailto:[email protected]>>
     >     <mailto:[email protected] <mailto:[email protected]>
    <mailto:[email protected] <mailto:[email protected]>>>
     >      >      >>> More about us at http://www.xwiki.com
     >      >      >>>
     >      >      >
     >      >
     >      >     --
     >      >     Simon Urli
     >      >     Software Engineer at XWiki SAS
     >      > [email protected] <mailto:[email protected]>
    <mailto:[email protected] <mailto:[email protected]>>
     >     <mailto:[email protected] <mailto:[email protected]>
    <mailto:[email protected] <mailto:[email protected]>>>
     >      >     More about us at http://www.xwiki.com
     >      >
     >
     >     --
     >     Simon Urli
     >     Software Engineer at XWiki SAS
     > [email protected] <mailto:[email protected]>
    <mailto:[email protected] <mailto:[email protected]>>
     >     More about us at http://www.xwiki.com
     >
--     Simon Urli
    Software Engineer at XWiki SAS
    [email protected] <mailto:[email protected]>
    More about us at http://www.xwiki.com
--
Simon Urli
Software Engineer at XWiki SAS
[email protected]
More about us at http://www.xwiki.com

Marius Dumitru Florea

tags

participants (1)