Wiki source code of New CKEditor Image Dialog
Last modified by Vincent Massol on 2024/02/26 17:54
Show last authors
author | version | line-number | content |
---|---|---|---|
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 |