Wiki source code of New CKEditor Image Dialog

Last modified by Vincent Massol on 2024/02/26 17:54

Show last authors
1 This design page presents the requirements and designs decision for the new New CKEditor Image Dialog.
2
3 This includes:
4
5 * image styling
6 * improved image picker
7 * captions
8
9 {{toc start="2"/}}
10
11 == Requirements ==
12
13 {{warning}}
14 Additional interesting to consider:
15
16 * Provide a field to set the image id from the the dialog
17 * Allow to change the name of an attachment on upload
18 * Allow to drag and drop an file in the upload tab
19 {{/warning}}
20
21 * Default styles and tool tips to help the wiki keep a consistent look and feel. (i.e., the same as the macro "wizard").
22 * The following parameters should be editable in the UI if the style "Type" allows a custom setting:
23 ** Caption
24 ** Alt text
25 ** Image Style
26 ** Alignment
27 ** Wrap Tex
28 ** Border
29 ** Image Size (Width / Height)
30
31 {{info}}
32 **Image search improvements in Image UI:**
33
34 * Add thumbnail to dropdown list + reuse new attachment picker
35 * Add image browser with grid layout
36 * Move to SOLR-search based search instead of DB-search based for the attachment pick for searching through attachment metadata (including OCR-extracted ones)
37 * Ability to search in image caption when specified
38 * Don't know how to do it ATM since attachments are indexed when added and captions are defined where the image is used.
39 * Put images from the current page first
40 * (optional) Search using the OCR data, see above
41 * Already supported by our existing SOLR index
42 {{/info}}
43
44 **Image Improvements: Configuration Options (Superuser UI)**
45
46 * Styles should be selectable from a drop down list that is configurable by administrators in terms of available style configurations and a default setting. E.g. Thumbnail images should be of a set size as configured by an administrator and have a frame. We will configure this as the default behavior when an image is added. A user should not be able to override defined styles unless this is explicitly allowed, see below.
47 * A configurable option (ON or OFF) to allow users to override aspects of a predefined style. It’s unclear if we want users to have that much freedom. The wiki might look strange if some images have a frame and others don't for example. We appreciate some of the above requirements are specific to our needs so as long as they are configurable that is sufficient.
48
49 **Image Improvements: Image picker UI**
50
51 When inserting (or changing an image) we should provide a search box that displays thumbnails of matching images **across the wiki(s)**. Images from the current page should be considered more relevant. Search should also match against caption text and OCR metadata (but with less relevancy).
52
53 {{image reference="image_picker.png" width="350px"/}}
54
55 == State of the CKEditor Image Dialog ==
56
57 === Preview ===
58
59 {{image reference="1645541088254-834.png" width="350px"/}} {{image reference="1645538341499-156.png" width="350px"/}}
60
61 === Known limitations ===
62
63 * Picking an image is difficult
64 ** no preview of the images
65 ** limited search
66 * No possibility to choose the name of an attachment, or to choose its location
67
68 == Redesign ==
69
70 Components dependencies
71
72 {{plantuml}}
73 @startuml
74 ["Image Indexing"] <.. ["Image Search"]
75 ["Image Search"] <.. ["Image Gallery"]
76 ["Image Gallery"] <.. ["CKEditor Image plugin"]
77 ["Style Administration"] <.. ["CKEditor Image plugin"]
78 @enduml
79 {{/plantuml}}
80
81 === Image Gallery ===
82
83 See [[Grid Image Picker>>Proposal.GridImagePicker]].
84
85 === Image Indexing module ===
86
87 {{warning}}
88 TBD
89 {{/warning}}
90
91 === Image search module ===
92
93 * The attachment search UI will be required:
94 ** a search images API that allowing to:
95 *** search on
96 **** captions (actually a generic description that could be used as a default caption could be interesting)
97 **** filename
98 **** OCR
99 *** filter by rights? - should use the rights of the Page to search (i.e., only show attachments that can be viewed by the users that can view the page?), not the one of the editor/owner
100 *** ordering to put images from the current document on top (and other criteria)
101
102 === Style Administration UI ===
103
104 Entry point:
105
106 * Live Data listing the existing styles + remove and edit actions (according to the user's rights°.
107 * dropdown selection of the default style
108
109 Style edition form:
110
111 * Text: Free text allowing to input the css class that is attached to the images of the corresponding style. Note that the skins resources must use the same css class in their definitions. **Note:** Some flexibility could be possible by allowing several css classes to be defined (and in this case some skins CSS could impact several styles, allowing less code duplication)
112 * Adaptable position (checkbox)
113 * Position (none/start/center/end)
114 * Adaptable Text Wrap (checkbox)
115 * Text Wrap (checkbox)
116 * Adaptable Border (checkbox)
117 * Border (checkbox)
118 * Adaptable Image Size (checkbox)
119 * Image Size Setting:
120 ** Width (integer)
121 ** Height (integer)
122
123 === Description of the modal UI ===
124
125 ==== First tab: image selection ====
126
127 ===== Search =====
128
129 Single text field. The images are displayed in a grid (lazily loaded?) of images corresponding to the search input
130
131 When the text field is empty, the attachments from the current page are presented (ordered by the most recently edited?)
132
133 Clicking on an image highlights it. Pressing the next button at the bottom right pass to the Image configuration step.
134
135 Note: Search on multiple wiki.
136
137 {{image reference="image_picker.png" width="350px"/}}
138
139 ===== Document Tree =====
140
141 The same user experience as the current image plugin, allowing to either type an attachment name, or to browser the tree to select an attachment when the location is already known by the user.
142
143 {{image reference="1645614723737-404.png" width="350px"/}}
144
145 ===== Upload =====
146
147 Single file upload field (must allow drag and drop of an image from the filesystem - **Existing file upload library, with image preview?**)
148 The attachment name is auto-completed with the selected document name when the field is empty.
149 {{image reference="image_upload.png" width="350px"/}}
150
151 ==== Second tab: image configuration ====
152
153 ===== Basic configuration =====
154
155 * Choice of the image style (see Style administration)
156 * Alternative Text
157 * Width/Text/aligned are moved to the advanced configuration since impacted by the style choice
158 * Caption: Yes/No
159
160 ===== Style configuration =====
161
162 * Position*
163 * Wrap Text Yes/No*
164 * Border Yes/No*
165 * Image Size (integer values in pixels)*
166 ** Width
167 ** Height
168
169 **~*: If allowed by the style**
170
171 === Description of the serialization format ===
172
173 {{code language="xwiki"}}
174 [[Caption>>image:XWikiLogo.png||alt="AAAAA" data-xwiki-image-style='style-type' data-xwiki-image-style-border='true' data-xwiki-image-style-alignment='start|center|end' data-xwiki-image-style-text-wrap='true']]
175 {{/code}}
176
177 * ##data-xwiki-image-style## is optional when not style is selected
178 * ##data-xwiki-image-style-border## is optional when its value is false
179 * ##data-xwiki-image-style-alignment## is optional when no specific alignment is required
180 * ##data-xwiki-image-style-text-wrap## is optional when no text wrap is required

Get Connected