CoreMedia · JensDallmann · Aug 8, 2023 · Aug 8, 2023 · Aug 15, 2023 · Aug 15, 2023
diff --git a/app/package.json b/app/package.json
@@ -21,6 +21,7 @@
     "@ckeditor/ckeditor5-engine": "39.0.2",
     "@ckeditor/ckeditor5-essentials": "39.0.2",
     "@ckeditor/ckeditor5-find-and-replace": "39.0.2",
+    "@ckeditor/ckeditor5-font": "39.0.2",
     "@ckeditor/ckeditor5-heading": "39.0.2",
     "@ckeditor/ckeditor5-highlight": "39.0.2",
     "@ckeditor/ckeditor5-image": "39.0.2",
@@ -37,6 +38,7 @@
     "@ckeditor/ckeditor5-ui": "39.0.2",
     "@ckeditor/ckeditor5-utils": "39.0.2",
     "@coremedia-internal/ckeditor5-coremedia-example-data": "^1.0.0",
+    "@coremedia/ckeditor5-bbcode": "16.0.1-rc.2",
     "@coremedia/ckeditor5-coremedia-blocklist": "16.0.1-rc.2",
     "@coremedia/ckeditor5-coremedia-content-clipboard": "16.0.1-rc.2",
     "@coremedia/ckeditor5-coremedia-differencing": "16.0.1-rc.2",
@@ -45,6 +47,7 @@
     "@coremedia/ckeditor5-coremedia-richtext": "16.0.1-rc.2",
     "@coremedia/ckeditor5-coremedia-studio-essentials": "16.0.1-rc.2",
     "@coremedia/ckeditor5-coremedia-studio-integration-mock": "16.0.1-rc.2",
+    "@coremedia/ckeditor5-data-facade": "16.0.1-rc.2",
     "@coremedia/ckeditor5-dataprocessor-support": "16.0.1-rc.2",
     "@coremedia/ckeditor5-dom-converter": "16.0.1-rc.2",
     "@coremedia/ckeditor5-font-mapper": "16.0.1-rc.2",

diff --git a/app/sample/index.html b/app/sample/index.html
@@ -8,44 +8,32 @@
   <link rel="stylesheet" type="text/css" href="styles.css">
   <link rel="stylesheet" type="text/css" href="coremedia.css">
   <!--
-    Unfortunately it was not possible to simply import the CKEditorInspector in the ts file.
-    The CKEditorInspector was always undefined. This way it works, and it is fine for an example application.
+    Unfortunately, it was impossible to simply import the CKEditorInspector in
+    the ts file. The CKEditorInspector was always undefined. This way it works,
+    and it is fine for an example application.
   -->
   <script src="../node_modules/@ckeditor/ckeditor5-inspector/build/inspector.js"></script>
 </head>
 <body data-editor="ClassicEditor" data-collaboration="false">
 
-<div id="notifications"></div>
-
 <header>
+  <div id="notifications">
+    <!-- Place to render notifications like "open in tab" -->
+  </div>
   <div class="centered">
     <h1><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener noreferrer"><img
-      src="https://c.cksource.com/a/1/logos/ckeditor5.svg" alt="CKEditor 5 logo">CKEditor 5</a></h1>
+            src="https://c.cksource.com/a/1/logos/ckeditor5.svg" alt="CKEditor 5 logo">CKEditor 5</a></h1>
     <nav>
       <ul>
         <li><a href="https://ckeditor.com/docs/ckeditor5/" target="_blank" rel="noopener noreferrer">Documentation</a>
         </li>
         <li><a href="https://ckeditor.com/" target="_blank" rel="noopener noreferrer">Website</a></li>
         <li><a href=".?#ckdebug=verbose" rel="noopener noreferrer" id="debug">Debug Logging</a></li>
-        <li>Language: <a href="." rel="noopener noreferrer" id="lang" title="Switch language of editor UI."
-                         style="font-weight: initial;"></a></li>
       </ul>
     </nav>
   </div>
   <div id="examples">
-    <label for="xmp-input">
-      Example Data:
-    </label>
-    <input id="xmp-input"
-           list="xmp-data"
-           placeholder="Start typing..."
-           autocomplete="on"
-    >
-    <datalist id="xmp-data">
-      <!-- Will be filled from example-data.ts -->
-    </datalist>
-    <button id="xmp-reload" title="Reload">🔄</button>
-    <button id="xmp-clear" title="Clear">🚮</button>
+    <!-- Place to render example selection combobox to. -->
   </div>
 </header>
 
@@ -56,70 +44,32 @@ <h2>CKEditor 5: CoreMedia Plugin Showcase</h2>
     </div>
   </div>
   <div class="centered">
-    <div>
-      <button id="readOnlyMode" title="Delay Modifiers: Ctrl/Cmd: 10s, Shift: 60s, Ctrl/Cmd+Shift: 120s">Enable Read-Only-Mode</button>
-      <button id="previewButton">Show XML Preview</button>
+    <div id="applicationToolbar">
       <button id="inputExampleContentButton">Show Input Example Content</button>
     </div>
+
     <div id="inputExampleContentDiv" hidden="hidden">
       <!-- The Drag Examples will be generated here. -->
     </div>
-    <div class="row">
+
+    <div id="defaultEditorRow" class="row editor-row">
       <div class="row-editor">
         <!-- RichText Editor Starts Here. Content is initial content to display on load. -->
-        <!-- The data inside are given in data-format of CKEditor, which is CoreMedia RichText 1.0. -->
         <div id="editor"></div>
-        <div id="preview" class="preview hidden" hidden></div>
+        <div id="preview">
+          <!-- The preview displaying the "stored data" will be rendered here. -->
+        </div>
       </div>
     </div>
   </div>
 </main>
 
 <footer>
-  <p>Copyright © 2020-2022,
+  <p>Copyright © 2020-2023,
     <a href="https://www.coremedia.com/" target="_blank" rel="noopener">CoreMedia</a>
   </p>
 </footer>
-<script>
-  const loadTranslations = (locale) => {
-    if (locale === "en") {
-      console.log("Default locale. No need to load further resources.");
-    } else {
-      const scriptEl = document.createElement("script");
-      scriptEl.src = "../dist/translations/" + locale + ".js";
-      document.body.appendChild(scriptEl);
-    }
-  };
-
-  const loadCKEditor = (locale) => {
-    const scriptEl = document.createElement("script");
-    scriptEl.src = "../dist/ckeditor.js";
-    scriptEl.dataset["lang"] = locale;
-    document.body.appendChild(scriptEl);
-  };
-
-  const initLanguage = () => {
-    const queryString = window.location.search;
-    const urlParams = new URLSearchParams(queryString);
-    const languageFlag = 'lang';
-    const language = urlParams.get(languageFlag)?.toLowerCase() || 'en';
-    const languageToggle = document.getElementById(languageFlag);
-    let label, hrefLang;
-    if (language === "de") {
-      label = "EN | <strong>DE</strong>";
-      hrefLang = "en";
-    } else {
-      label = "<strong>EN</strong> | DE";
-      hrefLang = "de";
-    }
-    languageToggle.setAttribute("href", `.?lang=${hrefLang}`);
-    languageToggle.innerHTML = label;
-    return language;
-  };
-
-  const lang = initLanguage();
-  loadCKEditor(lang);
-  loadTranslations(lang);
-</script>
+<script src="../dist/translations/de.js"></script>
+<script src="../dist/ckeditor.js"></script>
 </body>
 </html>
diff --git a/app/sample/styles.css b/app/sample/styles.css
@@ -100,7 +100,7 @@ input.error {
 
 /* --------- PREVIEW STYLES  ---------------------------------------------------------------------------------------- */
 .preview {
-  display: inline-block;
+  display: none;
   vertical-align: top;
   background-color: white;
   padding: 2px 2em;
@@ -114,8 +114,8 @@ input.error {
   min-height: calc(var(--ck-sample-editor-min-height) + 38.67px);
 }
 
-.preview.hidden {
-  display: none;
+.with-preview .preview {
+  display: inline-block;
 }
 
 #input-examples.hidden {
@@ -140,6 +140,22 @@ input.error {
   text-align: justify;
 }
 
+/* --------- CK List Styles (useAttribute: true)  ------------------------------------------------------------------- */
+
+.ck-content ol[type="1"] {
+  list-style-type: decimal;
+}
+
+/* Case-Insensitive Matching; see https://github.com/w3c/csswg-drafts/issues/2101 */
+.ck-content ol[type="i"] {
+  list-style-type: lower-roman;
+}
+
+/* Case-Insensitive Matching; see https://github.com/w3c/csswg-drafts/issues/2101 */
+.ck-content ol[type="a"] {
+  list-style-type: lower-alpha;
+}
+
 /* --------- EDITOR STYLES  ---------------------------------------------------------------------------------------- */
 
 #ckeditor {
@@ -159,7 +175,7 @@ main .ck-editor[role='application'] .ck.ck-content,
   padding: 1.5em 2em;
 }
 
-.ck.ck-editor.with-preview {
+.with-preview .ck.ck-editor {
   display: inline-block;
   vertical-align: top;
   width: calc(50% - 8px) !important;

diff --git a/app/src/ApplicationState.ts b/app/src/ApplicationState.ts
@@ -0,0 +1,106 @@
+import { setHashParam } from "./HashParams";
+
+// Keeping the following values in line with corresponding switch-buttons helps
+// to ease the integration. We may also refactor this to some more explicit
+// reusable set of types to choose from.
+
+export type InspectorState = "expanded" | "collapsed";
+export type CompatibilityMode = "v10" | "latest";
+export type DataType = "richtext" | "bbcode";
+export type UiLanguage = "en" | "de";
+export type ReadOnlyMode = "rw" | "ro";
+export type PreviewState = "hidden" | "visible";
+
+export class ApplicationState {
+  /**
+   * Language for CKEditor 5 UI.
+   */
+  readonly #uiLanguage: UiLanguage;
+  /**
+   * Signals, if to open the inspector expanded or collapsed by default.
+   */
+  readonly #inspector: InspectorState;
+  /**
+   * Plugin version compatibility mode to apply.
+   *
+   * * `v10`: Up to version 10 we provided different data-processing for
+   *   CoreMedia Rich Text.
+   * * `latest`: Just assume the latest plugin version.
+   */
+  readonly #compatibility: CompatibilityMode;
+  /**
+   * The data type to support.
+   */
+  readonly #dataType: DataType;
+  #readOnlyMode: ReadOnlyMode;
+  #previewState: PreviewState;
+
+  constructor(config?: Map<string, string | boolean>) {
+    const uiLanguage = config?.get("uiLanguage") ?? "en";
+    const inspector = config?.get("inspector") ?? "collapsed";
+    const compatibility = config?.get("compatibility") ?? "latest";
+    const dataType = config?.get("dataType") ?? "richtext";
+    const readOnly = config?.get("readOnly") ?? false;
+    const showPreview = config?.get("showPreview") ?? false;
+
+    this.#uiLanguage = typeof uiLanguage === "string" && uiLanguage.toLowerCase() === "de" ? "de" : "en";
+    this.#inspector =
+      typeof inspector === "string" && inspector.toLowerCase() === "expanded" ? "expanded" : "collapsed";
+    this.#compatibility = typeof compatibility === "string" && compatibility.toLowerCase() === "v10" ? "v10" : "latest";
+    this.#dataType = typeof dataType === "string" && dataType.toLowerCase() === "bbcode" ? "bbcode" : "richtext";
+    this.#readOnlyMode = typeof readOnly === "boolean" && readOnly ? "ro" : "rw";
+    this.#previewState = typeof showPreview === "boolean" && showPreview ? "visible" : "hidden";
+  }
+
+  get uiLanguage(): UiLanguage {
+    return this.#uiLanguage;
+  }
+
+  set uiLanguage(language: UiLanguage) {
+    if (language !== this.#uiLanguage) {
+      setHashParam("uiLanguage", language, true);
+    }
+  }
+
+  get inspector(): InspectorState {
+    return this.#inspector;
+  }
+
+  get compatibility(): CompatibilityMode {
+    return this.#compatibility;
+  }
+
+  set compatibility(mode) {
+    if (this.#compatibility !== mode) {
+      setHashParam("compatibility", mode, true);
+    }
+  }
+
+  get dataType(): DataType {
+    return this.#dataType;
+  }
+
+  set dataType(dataType) {
+    if (this.#dataType !== dataType) {
+      setHashParam("dataType", dataType, true);
+    }
+  }
+
+  get readOnlyMode(): ReadOnlyMode {
+    return this.#readOnlyMode;
+  }
+
+  set readOnlyMode(mode) {
+    this.#readOnlyMode = mode;
+    setHashParam("readOnly", mode === "ro");
+  }
+
+  get previewState(): PreviewState {
+    return this.#previewState;
+  }
+
+  set previewState(state) {
+    this.#previewState = state;
+    setHashParam("showPreview", state === "visible");
+  }
+}
diff --git a/app/src/ApplicationToolbar.ts b/app/src/ApplicationToolbar.ts
@@ -0,0 +1,20 @@
+export const defaultApplicationToolbarId = "applicationToolbar";
+
+export interface ApplicationToolbarConfig {
+  /**
+   * ID of toolbar button to add the preview button to.
+   * Defaults to: `applicationToolbar`.
+   */
+  toolbarId?: string;
+}
+
+export const requireApplicationToolbar = (config?: ApplicationToolbarConfig): HTMLElement => {
+  const { toolbarId = defaultApplicationToolbarId } = config ?? {};
+  const toolbar = document.getElementById(toolbarId);
+
+  if (!toolbar) {
+    throw new Error(`Cannot find toolbar element having ID  "${toolbarId}".`);
+  }
+
+  return toolbar;
+};
diff --git a/app/src/CKEditorInstanceFactory.ts b/app/src/CKEditorInstanceFactory.ts
@@ -0,0 +1,4 @@
+import { ApplicationState } from "./ApplicationState";
+import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
+
+export type CKEditorInstanceFactory = (sourceElement: HTMLElement, state: ApplicationState) => Promise<ClassicEditor>;
diff --git a/app/src/DataFormatter.ts b/app/src/DataFormatter.ts
@@ -0,0 +1,18 @@
+import { default as formatXml } from "xml-formatter";
+
+export type DataFormatter = (data: string, empty?: string) => string;
+
+export const dataFormatter: {
+  xml: DataFormatter;
+  text: DataFormatter;
+} = {
+  xml: (data, empty) =>
+    data
+      ? formatXml(data, {
+          indentation: "  ",
+          collapseContent: false,
+          whiteSpaceAtEndOfSelfclosingTag: true,
+        })
+      : empty ?? "",
+  text: (data, empty) => (data ? data : empty ?? ""),
+};
diff --git a/app/src/DataTypeSwitch.ts b/app/src/DataTypeSwitch.ts
@@ -0,0 +1,16 @@
+import { SwitchButton, SwitchButtonConfig } from "./SwitchButton";
+
+export const dataTypes = {
+  ["richtext" as const]: "Rich Text",
+  ["bbcode" as const]: "BBCode",
+};
+
+export const initDataTypeSwitch = (config: SwitchButtonConfig<keyof typeof dataTypes>): void => {
+  new SwitchButton({
+    id: "dataTypeSwitch",
+    default: "richtext",
+    states: dataTypes,
+    label: "Data Type",
+    ...config,
+  }).init();
+};