wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js

   1 /**
   2  * Helper class to construct the CKEditor configuration.
   3  *
   4  * @author Alexander Ebert
   5  * @copyright 2001-2023 WoltLab GmbH
   6  * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
   7  * @since 6.0
   8  * @woltlabExcludeBundle tiny
   9  */
  10 define(["require", "exports", "../../Language"], function (require, exports, Language_1) {
  11     "use strict";
  12     Object.defineProperty(exports, "__esModule", { value: true });
  13     exports.createConfigurationFor = void 0;
  14     class ConfigurationBuilder {
  15         #features;
  16         #divider = "|";
  17         #removePlugins = [];
  18         #toolbar = [];
  19         #toolbarGroups = {};
  20         constructor(features) {
  21             this.#features = features;
  22         }
  23         #setupUndo() {
  24             if (this.#features.undo) {
  25                 this.#toolbar.push("undo", "redo");
  26             }
  27             else {
  28                 this.#removePlugins.push("Undo");
  29             }
  30         }
  31         #setupBasicFormat() {
  32             this.#toolbar.push("bold", "italic");
  33         }
  34         #setupTextFormat() {
  35             const items = [];
  36             if (this.#features.heading) {
  37                 items.push("heading");
  38             }
  39             else {
  40                 this.#removePlugins.push("Heading");
  41             }
  42             if (this.#features.underline) {
  43                 items.push("underline");
  44             }
  45             else {
  46                 this.#removePlugins.push("Underline");
  47             }
  48             if (this.#features.strikethrough) {
  49                 items.push("strikethrough");
  50             }
  51             else {
  52                 this.#removePlugins.push("Strikethrough");
  53             }
  54             items.push(this.#divider);
  55             if (this.#features.mark) {
  56                 items.push("highlight");
  57             }
  58             else {
  59                 this.#removePlugins.push("Highlight");
  60             }
  61             if (this.#features.fontColor) {
  62                 items.push("fontColor");
  63             }
  64             else {
  65                 this.#removePlugins.push("FontColor");
  66             }
  67             if (this.#features.fontFamily) {
  68                 items.push("fontFamily");
  69             }
  70             else {
  71                 this.#removePlugins.push("FontFamily");
  72             }
  73             if (this.#features.fontSize) {
  74                 items.push("fontSize");
  75             }
  76             else {
  77                 this.#removePlugins.push("FontSize");
  78             }
  79             items.push(this.#divider);
  80             if (this.#features.subscript) {
  81                 items.push("subscript");
  82             }
  83             else {
  84                 this.#removePlugins.push("Subscript");
  85             }
  86             if (this.#features.superscript) {
  87                 items.push("superscript");
  88             }
  89             else {
  90                 this.#removePlugins.push("Superscript");
  91             }
  92             if (items.length !== 0) {
  93                 items.push(this.#divider, "removeFormat");
  94             }
  95             if (items.length > 0) {
  96                 this.#toolbar.push({
  97                     label: "woltlabToolbarGroup_format",
  98                     items,
  99                 });
 100                 this.#toolbarGroups["format"] = {
 101                     icon: "ellipsis;false",
 102                     label: (0, Language_1.getPhrase)("wcf.editor.button.group.format"),
 103                 };
 104             }
 105         }
 106         #setupList() {
 107             if (this.#features.list) {
 108                 this.#toolbar.push({
 109                     label: "woltlabToolbarGroup_list",
 110                     items: ["bulletedList", "numberedList", "outdent", "indent"],
 111                 });
 112                 this.#toolbarGroups["list"] = {
 113                     icon: "list;false",
 114                     label: (0, Language_1.getPhrase)("wcf.editor.button.group.list"),
 115                 };
 116             }
 117             else {
 118                 this.#removePlugins.push("List");
 119             }
 120         }
 121         #setupAlignment() {
 122             if (this.#features.alignment) {
 123                 this.#toolbar.push("alignment");
 124             }
 125             else {
 126                 this.#removePlugins.push("Alignment");
 127             }
 128         }
 129         #setupLink() {
 130             if (this.#features.link) {
 131                 this.#toolbar.push("link");
 132             }
 133             else {
 134                 this.#removePlugins.push("Link", "LinkImage");
 135             }
 136         }
 137         #setupImage() {
 138             if (this.#features.image) {
 139                 this.#toolbar.push("insertImage");
 140                 if (!this.#features.attachment) {
 141                     this.#removePlugins.push("ImageUpload", "ImageUploadUI", "WoltlabAttachment");
 142                 }
 143             }
 144             else {
 145                 this.#removePlugins.push("ImageInsertUI");
 146                 if (this.#features.link) {
 147                     this.#removePlugins.push("LinkImage");
 148                 }
 149             }
 150         }
 151         #setupCodeFormat() {
 152             if (this.#features.codeBlock) {
 153                 this.#toolbar.push("codeBlock");
 154             }
 155             else {
 156                 this.#removePlugins.push("CodeBlock", "WoltlabCodeBlock");
 157             }
 158             if (this.#features.code) {
 159                 this.#toolbar.push("code");
 160             }
 161             else {
 162                 this.#removePlugins.push("Code", "WoltlabCode");
 163             }
 164         }
 165         #setupBlocks() {
 166             if (this.#features.table) {
 167                 this.#toolbar.push("insertTable");
 168             }
 169             else {
 170                 this.#removePlugins.push("Table", "TableToolbar");
 171             }
 172             if (this.#features.quoteBlock) {
 173                 this.#toolbar.push("blockQuote");
 174             }
 175             else {
 176                 this.#removePlugins.push("BlockQuote", "WoltlabBlockQuote");
 177             }
 178             if (this.#features.spoiler) {
 179                 this.#toolbar.push("spoiler");
 180             }
 181             else {
 182                 this.#removePlugins.push("WoltlabSpoiler");
 183             }
 184             if (this.#features.html) {
 185                 this.#toolbar.push("htmlEmbed");
 186             }
 187             else {
 188                 this.#removePlugins.push("HtmlEmbed", "WoltlabHtmlEmbed");
 189             }
 190         }
 191         #insertDivider() {
 192             this.#toolbar.push(this.#divider);
 193         }
 194         #setupMedia() {
 195             if (!this.#features.media) {
 196                 this.#removePlugins.push("WoltlabMedia");
 197             }
 198         }
 199         #setupMention() {
 200             if (!this.#features.mention) {
 201                 this.#removePlugins.push("Mention", "WoltlabMention");
 202             }
 203         }
 204         #getToolbar() {
 205             let allowDivider = false;
 206             const toolbar = this.#toolbar.filter((item) => {
 207                 if (typeof item === "string" && item === this.#divider) {
 208                     if (!allowDivider) {
 209                         return false;
 210                     }
 211                     allowDivider = false;
 212                     return true;
 213                 }
 214                 allowDivider = true;
 215                 return true;
 216             });
 217             return toolbar;
 218         }
 219         build() {
 220             if (this.#removePlugins.length > 0 || this.#toolbar.length > 0) {
 221                 throw new Error("Cannot build the configuration twice.");
 222             }
 223             this.#setupUndo();
 224             this.#insertDivider();
 225             this.#insertDivider();
 226             this.#setupBasicFormat();
 227             this.#setupLink();
 228             this.#setupTextFormat();
 229             this.#insertDivider();
 230             this.#setupList();
 231             this.#setupAlignment();
 232             this.#insertDivider();
 233             this.#setupImage();
 234             this.#setupCodeFormat();
 235             this.#setupBlocks();
 236             this.#insertDivider();
 237             this.#setupMedia();
 238             this.#setupMention();
 239         }
 240         toConfig() {
 241             const language = Object.keys(window.CKEDITOR_TRANSLATIONS).find((language) => language !== "en");
 242             const key = language ? language : "en";
 243             const { dictionary } = window.CKEDITOR_TRANSLATIONS[key];
 244             dictionary["Author"] = (0, Language_1.getPhrase)("wcf.ckeditor.quote.author");
 245             dictionary["Filename"] = (0, Language_1.getPhrase)("wcf.ckeditor.code.fileName");
 246             dictionary["Line number"] = (0, Language_1.getPhrase)("wcf.ckeditor.code.lineNumber");
 247             dictionary["Quote"] = (0, Language_1.getPhrase)("wcf.ckeditor.quote");
 248             dictionary["Quote from %0"] = (0, Language_1.getPhrase)("wcf.ckeditor.quoteFrom");
 249             dictionary["Spoiler"] = (0, Language_1.getPhrase)("wcf.editor.button.spoiler");
 250             // TODO: The typings are both incompleted and outdated.
 251             return {
 252                 alignment: {
 253                     options: [
 254                         { name: "left", className: "text-left" },
 255                         { name: "center", className: "text-center" },
 256                         { name: "right", className: "text-right" },
 257                         { name: "justify", className: "text-justify" },
 258                     ],
 259                 },
 260                 highlight: {
 261                     options: [
 262                         {
 263                             model: "markerWarning",
 264                             class: "marker-warning",
 265                             title: (0, Language_1.getPhrase)("wcf.ckeditor.marker.warning"),
 266                             color: "var(--marker-warning)",
 267                             type: "marker",
 268                         },
 269                         {
 270                             model: "markerError",
 271                             class: "marker-error",
 272                             title: (0, Language_1.getPhrase)("wcf.ckeditor.marker.error"),
 273                             color: "var(--marker-error)",
 274                             type: "marker",
 275                         },
 276                         {
 277                             model: "markerInfo",
 278                             class: "marker-info",
 279                             title: (0, Language_1.getPhrase)("wcf.ckeditor.marker.info"),
 280                             color: "var(--marker-info)",
 281                             type: "marker",
 282                         },
 283                         {
 284                             model: "markerSuccess",
 285                             class: "marker-success",
 286                             title: (0, Language_1.getPhrase)("wcf.ckeditor.marker.success"),
 287                             color: "var(--marker-success)",
 288                             type: "marker",
 289                         },
 290                     ],
 291                 },
 292                 language,
 293                 link: {
 294                     defaultProtocol: "https://",
 295                 },
 296                 removePlugins: this.#removePlugins,
 297                 fontFamily: {
 298                     options: [
 299                         "default",
 300                         "Arial, Helvetica, sans-serif",
 301                         "Comic Sans MS, Marker Felt, cursive",
 302                         "Consolas, Courier New, Courier, monospace",
 303                         "Georgia, serif",
 304                         "Lucida Sans Unicode, Lucida Grande, sans-serif",
 305                         "Tahoma, Geneva, sans-serif",
 306                         "Times New Roman, Times, serif",
 307                         'Trebuchet MS", Helvetica, sans-serif',
 308                         "Verdana, Geneva, sans-serif",
 309                     ],
 310                 },
 311                 fontSize: {
 312                     options: [12, "default", 18, 23, 28],
 313                 },
 314                 toolbar: this.#getToolbar(),
 315                 ui: {
 316                     poweredBy: {
 317                         label: null,
 318                     },
 319                     viewportOffset: {
 320                         top: 50,
 321                     },
 322                 },
 323                 woltlabToolbarGroup: this.#toolbarGroups,
 324                 extraPlugins: [],
 325             };
 326         }
 327     }
 328     function createConfigurationFor(features) {
 329         const configuration = new ConfigurationBuilder(features);
 330         configuration.build();
 331         return configuration.toConfig();
 332     }
 333     exports.createConfigurationFor = createConfigurationFor;
 334 });