Re: [xwiki-devs] GSoc 2011: idea "Auto Completion in Content Editors" (updated)

Hi, followed by my previous mail for designing the auto-suggestion features for WYSIWYG rich text editor, the following is my new designation of auto-suggestion for Macros for xwiki editor: For Link and image, I will talk later in next mail, here I will focus on the designation of Macros; As Marius told me, there are some APIs for getting the list of all Macros available. and the macros in syntaxes 2.x are formatted as '{{macroName attribute1=" " attribute2=" " ... }} content {{/macroName}}', some of the attributes of specific macros may be required and some are optional. In xwiki editor, when user type "{{" to activated the auto-suggestion for macros, and the default view is a list for all available macros, user can navigate them by "up" and "down" keys, when one of the macros is focused, on the right of the suggestion box will show up a canvas for showing details of this focused macros, including a short introduction

and its attribute list(see sceenshot <http://www.flickr.com/photos/44893839@N00/5573230062/in/photostream/>),

when user keeps typing, the suggestion will be narrowed(see screenshot <http://www.flickr.com/photos/44893839@N00/5573230138/in/photostream/>). After they click "Enter" key, the focused macro will be selected, and the result will be shown in the editor with its required attributes automatically added. For example, if user select "code" macro, the result are shown(see screenshot <http://www.flickr.com/photos/44893839@N00/5572640201/in/photostream/>) Sometimes, user need to add some optional attributes for macros, and they focus cursor after one added attribute or the macro name and type space key, then it shows up a suggestion box for attributes of this

macro(see screenshot <http://www.flickr.com/photos/44893839@N00/5573230230/>), after user

selects one, the selected one will be added to the attributes list in xwiki editor, for example, if user selects "CssClass" for "code" macro, then the result are shown as(see screenshot <http://www.flickr.com/photos/44893839@N00/5573230104/in/photostream/>). Thanks if you can read all of my designation patiently, and if you can give me some advices, I will be so appreciated.

2011/3/29 许凌志(Jamesxu) &lt;lingzhixu326(a)gmail.com <mailto:lingzhixu326@gmail.com>> Dear Marius I think you are right that I misunderstood the WYSIWYG source editor and WYSIWYG rich text editor, in my previous designation, I have spent so much effort on how to auto-suggest or auto-complete for some specific xwiki syntaxes, though those features might be convienent for users, it is uneccessary, because they do care about inserting image ,link, or some macros faster, instead of autocompleting the syntaxes of them in source editor. As you said, the effective way to speed up is to insert or edit them without leaving keyboard, we can design some shortcuts for auto-suggestion based on context. And the auto-suggestion should focus on image, link and some common used macros first. For current WYSIWYG rich text editor, when users need to insert image,link or macros, they have to leave their keyboard and click on the link, image or macro icons on the toolbar of rich text editor to insert them, it must slow down the speed. For solving this problem, we can design some shortcuts to activate the auto-suggestion for links, images or macros according to user input and context. I think the autocompletion features for confluence rich text editor can be a good example for me (

And I think I should also focus on auto-suggestion for links, images first. , I have to discuss with you which macros should be considered further, or you can give me some advice for macros auto-suggestion features for WYSIWYG rich text editor. Here are my new designations: *Links:* There are 4 kinds of links: wiki page, attachment files, url and email link. (1). wiki page: Auto-suggestion functions are triggered when user types "*p:*", then it shows up a suggestion box bellow cursor to list the current wiki pages the user visited as default(see screenshot <

when user keep typing, they will get recommendations(see screenshot <

(2). Attachment files: Auto-suggestion for attachment is triggered by typing "*a:*", it also shows up a suggestion box with a list of attached files of current pages(see screenshot <http://www.flickr.com/photos/44893839@N00/5570143783/>), user can click on the link "upload new file" on the top of the list to lauch a quick attacment upload form(see screenshot <

after uploading the attachment, user can edit it as shown in this screenshot <

Another much easier way is to supply with users a quick link to the "attacment uploader" widget, and user do the following process in this widget. (3). URL and Email. Usually user will add(might paste) url or email direct into rich editor, the rich editor should make it a real url or email link to the target. There are two ways to do that: First, as gmail rich editor, there is a url icon on the toolbar(See screenshot <http://www.flickr.com/photos/44893839@N00/5570022483/>), after selecting the url text (see screenshot <

click the icon, the url text can be automatically changed to a real url or email link(see screenshot <http://www.flickr.com/photos/44893839@N00/5570029069/>). Second, as microsoft word, when you type a url or email link, it will be automatically changed to a real link. When user clicks on the url or email link, there will be a minimal url infromation box with edit link for it will show up(see screenshot <

and user can click on it to edit the url. *Images:* The images insertion are triggered by typing "*i:*", and in the suggestion box, it lists all the images in this page(see screenshot <http://www.flickr.com/photos/44893839@N00/5570183615/>), user select one and enter the editor page for editing details for the selected image(is it neccessary?)(see screenshot <

User can also upload new images by clicking on the link "upload new images" at the top of list, there will be an uploader form in the box for user to upload image, and the uploaded image will be automatically inserted into the rich editor; Another much easier way is to supply with users a quick link "open the image dialog" in the box which links to the image uploader widget(existed); For xwiki editor, it will be a bit different, because user type xwiki syntaxes in xwiki editor, so the auto-suggestion should not only for links, images, but also some attributes of these syntaxes, especially for the attributes of various macros, the design details will be sent to you later. 2011/3/28 Marius Dumitru Florea &lt;mariusdumitru.florea(a)xwiki.com <mailto:mariusdumitru.florea@xwiki.com>> Hi James, On 03/26/2011 02:58 PM, 许凌志(Jamesxu) wrote: down as a pictures, so I in the link:

document. link is clearly. I see you already put a loot of effort into writing this draft.

careful with that. You shouldn't spend time on details before you know you're going into the right direction. First, make sure you understand correctly what we expect from the project, by asking questions on this mailing list. Then you should start with small examples, for only one syntax element (link/image/macro). Regarding your draft, I think it's too syntax oriented. You have

understand that the content is king. The scope of this project is _not_ to help users learn the XWiki 2.0 syntax but to speed up content creation/editing using the WYSIWYG/wiki editor. Basic users don't care that image syntax starts with [[image: or that bold syntax is enclosed in **. They just want to insert an image quickly. Text formatting is not a problem for the WYSIWYG editor users because they already know that Ctrl+B makes text bold. They don't have to type ** or remember a shortcut key that will open a suggestion for **. So for the WYSIWYG editor (the rich text area, not the source

area!) you have to focus only on link, image and macro syntax (macro is very important!). In the end the user should be able to insert a link, an image or a macro quickly, without leaving the text area, using only the keyboard. The wiki editor should behave almost as the WYSIWYG editor. One of the differences could be that the wiki editor offers autocomplete suggestions for the link, image and macro parameters (which doesn't make sense in the WYSIWYG editor because you don't see the XWiki 2.0 syntax of a link/image/macro but their output). follow marius' came across file under me the right The WYSIWYG editor can be used outside of XWiki but its main features: link, image and macro insertion/editing are XWiki specific and thus are available only when you use the editor inside XWiki. The best approach is to download the latest XWiki Enterprise snapshot from

and update the WYSIWYG editor: * overwrite the jars from WEB-INF/lib with the ones from the

editor's war (only if you made changes to the server side) * replace the /resources/js/xwiki/wysiwyg/xwe directory with the

from the WYSIWYG editor's war (don't overwrite! remove the

directory and copy the new one) Don't forget to build xwiki-gwt-wysiwyg-war module using -Pdev profile so that it doesn't generate all the GWT permutations. Hope this helps, Marius WYSIWYG

> </filter> > > <!-- This filter is used to initialize the XWiki context

GWT services. -->

<mailto:lingzhixu326@gmail.com> <mailto:mariusdumitru.florea@xwiki.com> <mailto:mariusdumitru.florea@xwiki.com>>> wrote: <mailto:sergiu@xwiki.com <mailto:sergiu@xwiki.com>> <mailto:sergiu@xwiki.com <mailto:sergiu@xwiki.com>>>> wrote: > > > > On 03/22/2011 03:37 AM, 许凌志(Jamesxu) wrote: > > > Hi Marius Florea, > > > > > > Thanks for your reply, it is really helpful for me to go > > further. > > > > > > For xwiki syntaxes, you gave me a good suggestion that I > should not > > > autocomplete all the attributes for a tag, it could be > added when > > user > > > triggers by some inputs or by the hotkeys just like

user some mistakes, and > > it is more > > > intuitive for them to fullfill the blank attributes which

case for out a having > this new rendering engine we used Radeox for rendering wiki > pages and > the only supported syntax was xwiki/1.0. With the new

now under machanism, > I know better now, it will be very helpful in my future work; > > > Taken this into account, the main target is, as Sergiu said,

other > syntaxes in the future. So basically you should split your

> in two: > a part that is syntax independent and a part that is specific

possible > plugable. > > > +1 > > > > > > > > > I install the xwiki/3.0, but I haven't found the > autocompletion features > > for the wysiwyg editor. > > Note that the wiki syntax version is independent from the

> Enterprise version. The latest XE release is 3.0RC1 and it

might use > xwiki/2.1 as the default syntax for its wiki pages. > > As Caty told you, neither the WYSIWYG editor nor the wiki

> have > syntax autocomplete implemented. > > > you refered "xwiki/2.1 which is almsot the same thing", I > didn't catch > > the meaning for the "same thing". > > > > Do you mean some of xwiki syntaxes have been implemented for > > autocompletion features in WYSIWYG editor of xwiki/2.1? > > If so, could you give a link for introducing these features. > > > > > I have already found the only doc > > "http://platform.xwiki.org/xwiki/bin/view/Main/XWikiSyntax"

> > introduction the xwiki syntaxes 2.0, and after reading > through, I found > > the newest version of xwiki syntaxes is 2.1, so could you > give me some > > docs about syntaxes 2.1, and could you explain to me, what > kind of xwiki > > syntaxes versions used in different version of xwiki. > > xwiki/2.1 syntax is still under development, that's why it

> fully > documented. > > > > > > > > - Design the use cases with some screenshots for them,

> > > - Pick some to implement the prototype of them to get the > > feedbacks from the > > > mailing list > > > - Start to coding for all of them > > > > Good plan. The best approach is to have something working > ASAP and then > > incrementally improve/build upon it. > > > > > > > Thank you, these days I have read all the docs from "xwiki > development > > zone <http://dev.xwiki.org/xwiki/bin/view/Main/WebHome>",

> is really > > helpful for me to understand how to contribute to xwiki, I

> trying to > > download xwiki WYSIWYG editor source codes and building

xwiki-gwt-wysiwyg-client xwiki-gwt-user and build through the > web.xml file under this war file, I found the entry is > "localhost:8080/wysiwyg/gwtrpc.gwtrpc" according to the

> file, but I got nothing excpet the 404 error. > I think maybe the entry url is wrong, but what is the right

error;

> </filter> > > <!-- This filter is used to initialize the XWiki context

> </servlet> > > <servlet-mapping> > <servlet-name>gwtrpc</servlet-name> > <url-pattern>*.gwtrpc</url-pattern> > </servlet-mapping> > </web-app> > > > The wiki editor is a plain HTML text area so it doesn't have

> code. > > > > > > > >> Good knowledge of JavaScript, DOM and OOP (for the GWT > code) is the > > >> basic requirement to finish this project. > > > > > > I think javascript, DOM, OOP would not be a problem for

jquery, I > > also wrote > > > some tutorial for them, GWT is some kind javascript lib

learner a Java > > toolset which compiles a form of Java code into JavaScript. > > > > > > Yes, you are right, I am reading the docs of GWT now, it is > pretty > > different from normal javascript tools, foutunitly, I am > practiced in > > Java and javascript, though it is weild to get to know GWT

> first, and > > now, I think it is not so difficult, and I am now

right? list of > documents to choose from in order to create a link. > > The language used to implement (1) and (3) depends on the

clearly > prefers Prototype.js and I'm ok with that. > > Hope this helps, > Marius > > > > > > > It is a good idea to use some native javascript tools like > Prototype, I > > have used Prototype for more than 4 years, and also I am a > fans of dojo > > and jquery, I think the the WYSIWYG could be implemented as

> prototype > > or dojo module. > > > > However, I think the first thing we should do is to work on

> > autocompletion idea based on GWT, cause till now, the editor

<mailto:devs@xwiki.org <mailto:devs@xwiki.org>> <mailto:devs@xwiki.org <mailto:devs@xwiki.org> > <mailto:devs@xwiki.org <mailto:devs@xwiki.org>>> > > http://lists.xwiki.org/mailman/listinfo/devs > > > > > > > > > > -- > > Best wishes, > > > > 许凌志(Jame Xu) > > > > MOE KLINNS Lab and SKLMS Lab, Xi'an Jiaotong University > > > > Department of Computer Science and Technology, Xi’an

<mailto:devs@xwiki.org>> University University -- Best wishes, 许凌志(Jame Xu) MOE KLINNS Lab and SKLMS Lab, Xi'an Jiaotong University Department of Computer Science and Technology, Xi’an Jiaotong

-- Best wishes, 许凌志(Jame Xu) MOE KLINNS Lab and SKLMS Lab, Xi'an Jiaotong University Department of Computer Science and Technology, Xi’an Jiaotong University