aloha-vue 1.0.95 → 1.0.96

package/docs/package.json

@@ -16,6 +16,7 @@
     "fecha": "^4.2.3",
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",
+    "tinymce": "6.2.0",
     "vue": "3.2.31",
     "vue-router": "4.1.5",
     "vuex": "4.0.2"

package/docs/src/components/TheMenu/TheMenu.js

@@ -81,6 +81,14 @@ export default {
           },
           parent: "ui",
         },
+        {
+          id: "tinyMce",
+          label: "TinyMce",
+          to: {
+            name: "PageTinyMce",
+          },
+          parent: "ui",
+        },
         {
           id: "accordion",
           label: "Accordion",

package/docs/src/router/index.js

@@ -119,6 +119,11 @@ const ROUTES = [
     name: "PageDatepicker",
     component: () => import(/* webpackChunkName: "PageDatepicker" */ "../views/PageDatepicker/PageDatepicker.vue"),
   },
+  {
+    path: "/tinymce",
+    name: "PageTinyMce",
+    component: () => import(/* webpackChunkName: "PageTinyMce" */ "../views/PageTinyMce/PageTinyMce.vue"),
+  },
   {
     // If the routing configuration '*' reports an error, replace it with '/: catchAll(. *)'
     // caught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

package/docs/src/views/PageForm/PageForm.js

@@ -54,6 +54,13 @@ export default {
   computed: {
     data() {
       return [
+        {
+          type: "tinymce",
+          label: "Aloha tiny",
+          id: "aloha_tiny",
+          classColumn: "a_column_8",
+          required: true,
+        },
         {
           type: "text",
           label: "Aloha 1",
@@ -259,6 +266,7 @@ export default {
     validate() {
       const TEXT_INVALID = "Example invalid text";
       this.errors = {
+        aloha_tiny: [TEXT_INVALID],
         aloha1: [TEXT_INVALID, TEXT_INVALID],
         aloha2: [TEXT_INVALID],
         aloha3: [TEXT_INVALID],

package/docs/src/views/PageTinyMce/PageTinyMce.js

@@ -0,0 +1,14 @@
+import ATinymce from "../../../../src/ui/ATinymce/ATinymce";
+
+
+export default {
+  name: "PageTinyMce",
+  components: {
+    ATinymce,
+  },
+  data() {
+    return {
+      model1: "aloha",
+    };
+  },
+};

package/docs/src/views/PageTinyMce/PageTinyMce.pug

@@ -0,0 +1,11 @@
+div
+  h1 ATinymce
+  h2 Input
+  a-tinymce(
+    id="input1"
+    v-model="model1"
+    type="text"
+    label="ATinymce 1"
+    :required="true"
+  )
+  div model1: {{ model1 }}

package/docs/src/views/PageTinyMce/PageTinyMce.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageTinyMce.pug"></template>
+<script src="./PageTinyMce.js"></script>

package/docs/webpack.config.js

@@ -78,6 +78,18 @@ function getRules(mode) {
           },
         },
       ],
+      exclude: [
+        /tinymce\/skins\/content\/default\/content\.css$/,
+        /tinymce\/skins\/ui\/oxide\/content\.css$/,
+      ],
+    },
+    {
+      test: /tinymce\/skins\/ui\/oxide\/content\.css$/i,
+      use: ["css-loader"],
+    },
+    {
+      test: /tinymce\/skins\/content\/default\/content\.css$/i,
+      use: ["css-loader"],
     },
     {
       test: /\.(png|jpg)$/,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.95",
+  "version": "1.0.96",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"
@@ -13,6 +13,7 @@
     "fecha": "^4.2.3",
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",
+    "tinymce": "6.2.0",
     "vue": "3.2.37"
   },
   "devDependencies": {

package/src/styles/components/ui/ATinymce.scss

@@ -0,0 +1,5 @@
+.a_form_control_invalid {
+  .tox-tinymce {
+    border-color: var(--a_form_element_error_color);
+  }
+}

package/src/styles/components/ui/ui.scss

@@ -147,6 +147,7 @@
 @import "AErrors";
 @import "AInputFile";
 @import "ADatepicker";
+@import "ATinymce";
 
 // fix für autofill
 input:-webkit-autofill {

package/src/ui/AErrors/AErrorsElement.js

@@ -6,6 +6,12 @@ import {
 } from "vue";
 
 import AKeysCode from "../../const/AKeysCode";
+import {
+  setFocusToTinymce
+} from "../ATinymce/compositionAPI/ATinymceAPI";
+import {
+  scrollToElement,
+} from "../../utils/utilsDOM";
 import {
   get,
   isArray,
@@ -106,10 +112,12 @@ export default {
       if (size(idStr) > 0) {
         const ELEMENT = document.getElementById(idStr);
         if (ELEMENT) {
-          // if (this.isCKEditor({ element: ELEMENT })) {
-          //   this.goToCKEditor({ id: idStr });
-          //   return;
-          // }
+          if (ELEMENT.tagName === "TEXTAREA" &&
+            ELEMENT.classList.contains("a_textarea_tinymce")) {
+            setFocusToTinymce({ id: idStr });
+            scrollToElement({ element: ELEMENT.parentNode });
+            return;
+          }
           ELEMENT.focus();
         }
       }

package/src/ui/ATinymce/ATinymce.js

@@ -0,0 +1,205 @@
+import {
+  h, onMounted,
+  ref,
+  toRef,
+} from "vue";
+
+import AErrorsText from "../AErrorsText/AErrorsText";
+import ALabel from "../ALabel/ALabel";
+
+import UiMixinProps from "../mixins/UiMixinProps";
+
+import ATinymceAPI from "./compositionAPI/ATinymceAPI";
+import UiAPI from "../compositionApi/UiAPI";
+import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
+
+export default {
+  name: "ATinymce",
+  mixins: [
+    UiMixinProps,
+  ],
+  props: {
+    branding: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    contentLangs: {
+      type: Array,
+      required: false,
+      default: () => [
+        { title: "English", code: "en" },
+        { title: "Spanish", code: "es" },
+        { title: "French", code: "fr" },
+        { title: "Deutsch", code: "de" },
+        { title: "Portuguese", code: "pt" },
+        { title: "Chinese", code: "zh" },
+      ],
+    },
+    languageDefault: {
+      type: String,
+      required: false,
+      default: "de",
+    },
+    maxlength: {
+      type: [String, Number],
+      required: false,
+    },
+    promotion: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    rows: {
+      type: [String, Number],
+      required: false,
+    },
+    toolbar: {
+      type: [String, Object, Array],
+      required: false,
+      default: () => ([
+        { name: "Formatierung", items: ["bold", "italic", "underline"] },
+        { name: "Ausrichtung", items: ["alignleft", "aligncenter", "alignright", "alignjustify"] },
+        { name: "Liste", items: ["bullist", "numlist"] },
+        { name: "Einrücken", items: ["indent", "outdent"] },
+        { name: "Historie", items: ["undo", "redo"] },
+        { name: "Sprache", items: ["language"] },
+        { name: "Link", items: ["link", "unlink"] },
+        { name: "Hilfe", items: ["help"] },
+      ]),
+    },
+    menu: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    menubar: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+    },
+    plugins: {
+      type: String,
+      required: false,
+      default: "advlist code emoticons link lists table help",
+    },
+    type: {
+      type: String,
+      required: false,
+      default: "tinymce",
+    },
+  },
+  setup(props, context) {
+    const {
+      componentStyleHide,
+    } = UiStyleHideAPI(props);
+
+    const {
+      ariaDescribedbyLocal,
+      changeModel,
+      errorsId,
+      helpTextId,
+      htmlIdLocal,
+      isErrors,
+      isModel,
+      onBlur,
+      onFocus,
+    } = UiAPI(props, context);
+
+    const {
+      clickLabel,
+      render,
+    } = ATinymceAPI(props, context, {
+      changeModel,
+      htmlIdLocal,
+    });
+
+    const textareaRef = ref(undefined);
+
+    const disabled = toRef(props, "disabled");
+    const onInput = $event => {
+      if (disabled.value) {
+        return;
+      }
+      const value = $event.target.value;
+      changeModel({
+        model: value,
+      });
+    };
+
+    onMounted(() => {
+      render();
+    });
+
+    return {
+      componentStyleHide,
+
+      ariaDescribedbyLocal,
+      changeModel,
+      errorsId,
+      helpTextId,
+      htmlIdLocal,
+      isErrors,
+      isModel,
+      onBlur,
+      onFocus,
+
+      clickLabel,
+      onInput,
+      textareaRef,
+      render,
+    };
+  },
+  render() {
+    return this.isRender && h("div", {
+      style: this.componentStyleHide,
+    }, [
+      h("div", {
+        class: ["a_form_element__parent", {
+          a_form_element__parent_not_empty: this.isModel,
+        }],
+      }, [
+        this.label && h(ALabel, {
+          id: this.htmlIdLocal,
+          label: this.label,
+          labelClass: this.labelClass,
+          required: this.required,
+          clickLabel: this.clickLabel,
+        }),
+        h("div", {
+          class: ["a_form_element", {
+            a_form_control_invalid: this.isErrors,
+          }],
+        }, [
+          h("textarea", {
+            ref: "textareaRef",
+            id: this.htmlIdLocal,
+            value: this.modelValue,
+            class: [
+              "a_form_control a_textarea a_textarea_tinymce",
+              this.inputClass,
+            ],
+            disabled: this.disabled,
+            ariaRequired: this.required,
+            ariaInvalid: this.isErrors,
+            "aria-describedby": this.ariaDescribedbyLocal,
+            maxlength: this.maxlength,
+            ...this.inputAttributes,
+            onInput: this.onInput,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+          }),
+        ]),
+        this.helpText && h("div", {
+          id: this.helpTextId,
+          class: "a_form_element__help_text",
+          innerHTML: this.helpText,
+        }),
+        this.isErrors && h(AErrorsText, {
+          id: this.errorsId,
+          errors: this.errors,
+        }),
+      ]),
+    ]);
+  },
+};

package/src/ui/ATinymce/compositionAPI/ATinymceAPI.js

@@ -0,0 +1,106 @@
+import {
+  computed,
+  onBeforeUnmount,
+  toRef,
+  watch,
+} from "vue";
+
+/* Import TinyMCE */
+import tinymce from "tinymce";
+
+/* Default icons are required. After that, import custom icons if applicable */
+import "tinymce/icons/default";
+
+/* Required TinyMCE components */
+import "tinymce/themes/silver";
+import "tinymce/models/dom";
+
+/* Import a skin (can be a custom skin instead of the default) */
+import "tinymce/skins/ui/oxide/skin.css";
+
+/* Import plugins */
+import "tinymce/plugins/advlist";
+import "tinymce/plugins/code";
+import "tinymce/plugins/emoticons";
+import "tinymce/plugins/emoticons/js/emojis";
+import "tinymce/plugins/help";
+import "tinymce/plugins/link";
+import "tinymce/plugins/lists";
+import "tinymce/plugins/table";
+
+/* content UI CSS is required */
+import contentUiSkinCss from "tinymce/skins/ui/oxide/content.css";
+
+/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
+import contentCss from "tinymce/skins/content/default/content.css";
+
+/* lang */
+import "../langs/de";
+// import "tinymce/langs/de_DE";
+
+export default function ATinymceAPI(props, context, {
+  changeModel = () => {},
+  htmlIdLocal = computed(() => ""),
+}) {
+  const branding = toRef(props, "branding");
+  const contentLangs = toRef(props, "contentLangs");
+  const disabled = toRef(props, "disabled");
+  const languageDefault = toRef(props, "languageDefault");
+  const menu = toRef(props, "menu");
+  const menubar = toRef(props, "menubar");
+  const plugins = toRef(props, "plugins");
+  const promotion = toRef(props, "promotion");
+  const toolbar = toRef(props, "toolbar");
+
+  let vueEditor = null;
+
+  const render = () => {
+    tinymce.init({
+      selector: `#${ htmlIdLocal.value }`,
+      plugins: plugins.value,
+      toolbar: toolbar.value,
+      skin: false,
+      content_css: false,
+      content_style: `${ contentUiSkinCss.toString() }\n${ contentCss.toString() }`,
+      branding: branding.value,
+      promotion: promotion.value,
+      language: languageDefault.value,
+      content_langs: contentLangs.value,
+      menu: menu.value,
+      menubar: menubar.value,
+      readonly: !!disabled.value,
+      setup: editor => {
+        vueEditor = editor;
+        editor.on("change input undo redo", () => {
+          changeModel({ model: editor.getContent({ format: "html" }) });
+        });
+      },
+    });
+  };
+
+  const clickLabel = () => {
+    setFocusToTinymce({ id: htmlIdLocal.value });
+  };
+
+  watch(disabled, newValue => {
+    if (newValue === true) {
+      tinymce.get(htmlIdLocal.value).mode.set("readonly");
+    } else {
+      tinymce.get(htmlIdLocal.value).mode.set("design");
+    }
+  });
+
+  onBeforeUnmount(() => {
+    tinymce.remove(vueEditor);
+  });
+
+  return {
+    clickLabel,
+    render,
+  };
+}
+
+
+export function setFocusToTinymce({ id }) {
+  tinymce.execCommand("mceFocus", false, id);
+}

package/src/ui/ATinymce/langs/de.js

@@ -0,0 +1,413 @@
+/* !
+ * TinyMCE Language Pack
+ *
+ * Copyright (c) 2022 Ephox Corporation DBA Tiny Technologies, Inc.
+ * Licensed under the Tiny commercial license. See https://www.tiny.cloud/legal/
+ */
+// eslint-disable-next-line no-undef
+tinymce.addI18n("de", {
+  Redo: "Wiederholen",
+  Undo: "R\xfcckg\xe4ngig machen",
+  Cut: "Ausschneiden",
+  Copy: "Kopieren",
+  Paste: "Einf\xfcgen",
+  "Select all": "Alles ausw\xe4hlen",
+  "New document": "Neues Dokument",
+  Ok: "Ok",
+  Cancel: "Abbrechen",
+  "Visual aids": "Visuelle Hilfen",
+  Bold: "Fett",
+  Italic: "Kursiv",
+  Underline: "Unterstrichen",
+  Strikethrough: "Durchgestrichen",
+  Superscript: "Hochgestellt",
+  Subscript: "Tiefgestellt",
+  "Clear formatting": "Formatierung entfernen",
+  Remove: "Entfernen",
+  "Align left": "Linksb\xfcndig ausrichten",
+  "Align center": "Zentrieren",
+  "Align right": "Rechtsb\xfcndig ausrichten",
+  "No alignment": "Keine Ausrichtung",
+  Justify: "Blocksatz",
+  "Bullet list": "Aufz\xe4hlung",
+  "Numbered list": "Nummerierte Liste",
+  "Decrease indent": "Einzug verkleinern",
+  "Increase indent": "Einzug vergr\xf6\xdfern",
+  Close: "Schlie\xdfen",
+  Formats: "Formate",
+  "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.": "Ihr Browser unterst\xfctzt leider keinen direkten Zugriff auf die Zwischenablage. Bitte benutzen Sie die Tastenkombinationen Strg+X/C/V.",
+  Headings: "\xdcberschriften",
+  "Heading 1": "\xdcberschrift 1",
+  "Heading 2": "\xdcberschrift 2",
+  "Heading 3": "\xdcberschrift 3",
+  "Heading 4": "\xdcberschrift 4",
+  "Heading 5": "\xdcberschrift 5",
+  "Heading 6": "\xdcberschrift 6",
+  Preformatted: "Vorformatiert",
+  Div: "Div",
+  Pre: "Pre",
+  Code: "Code",
+  Paragraph: "Absatz",
+  Blockquote: "Blockzitat",
+  Inline: "Zeichenformate",
+  Blocks: "Bl\xf6cke",
+  "Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "Einf\xfcgen ist nun im unformatierten Textmodus. Inhalte werden ab jetzt als unformatierter Text eingef\xfcgt, bis Sie diese Einstellung wieder deaktivieren.",
+  Fonts: "Schriftarten",
+  "Font sizes": "Schriftgr\xf6\xdfen",
+  Class: "Klasse",
+  "Browse for an image": "Bild...",
+  OR: "ODER",
+  "Drop an image here": "Bild hier ablegen",
+  Upload: "Hochladen",
+  "Uploading image": "Bild wird hochgeladen",
+  Block: "Blocksatz",
+  Align: "Ausrichtung",
+  Default: "Standard",
+  Circle: "Kreis",
+  Disc: "Scheibe",
+  Square: "Rechteck",
+  "Lower Alpha": "Lateinisches Alphabet in Kleinbuchstaben",
+  "Lower Greek": "Griechische Kleinbuchstaben",
+  "Lower Roman": "Kleiner r\xf6mischer Buchstabe",
+  "Upper Alpha": "Lateinisches Alphabet in Gro\xdfbuchstaben",
+  "Upper Roman": "Gro\xdfer r\xf6mischer Buchstabe",
+  "Anchor...": "Textmarke",
+  Anchor: "Anker",
+  Name: "Name",
+  ID: "ID",
+  "ID should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "Die ID muss mit einem Buchstaben beginnen gefolgt von Buchstaben, Zahlen, Bindestrichen, Punkten, Doppelpunkten oder Unterstrichen.",
+  "You have unsaved changes are you sure you want to navigate away?": "Die \xc4nderungen wurden noch nicht gespeichert. Sind Sie sicher, dass Sie diese Seite verlassen wollen?",
+  "Restore last draft": "Letzten Entwurf wiederherstellen",
+  "Special character...": "Sonderzeichen...",
+  "Special Character": "Sonderzeichen",
+  "Source code": "Quellcode",
+  "Insert/Edit code sample": "Codebeispiel einf\xfcgen/bearbeiten",
+  Language: "Sprache",
+  "Code sample...": "Codebeispiel...",
+  "Left to right": "Von links nach rechts",
+  "Right to left": "Von rechts nach links",
+  Title: "Titel",
+  Fullscreen: "Vollbild",
+  Action: "Aktion",
+  Shortcut: "Tastenkombination",
+  Help: "Hilfe",
+  Address: "Adresse",
+  "Focus to menubar": "Fokus auf Men\xfcleiste",
+  "Focus to toolbar": "Fokus auf Symbolleiste",
+  "Focus to element path": "Fokus auf Elementpfad",
+  "Focus to contextual toolbar": "Fokus auf kontextbezogene Symbolleiste",
+  "Insert link (if link plugin activated)": "Link einf\xfcgen (wenn Link-Plugin aktiviert ist)",
+  "Save (if save plugin activated)": "Speichern (wenn Save-Plugin aktiviert ist)",
+  "Find (if searchreplace plugin activated)": "Suchen (wenn Suchen/Ersetzen-Plugin aktiviert ist)",
+  "Plugins installed ({0}):": "Installierte Plugins ({0}):",
+  "Premium plugins:": "Premium-Plugins:",
+  "Learn more...": "Erfahren Sie mehr dazu...",
+  "You are using {0}": "Sie verwenden {0}",
+  Plugins: "Plugins",
+  "Handy Shortcuts": "Praktische Tastenkombinationen",
+  "Horizontal line": "Horizontale Linie",
+  "Insert/edit image": "Bild einf\xfcgen/bearbeiten",
+  "Alternative description": "Alternative Beschreibung",
+  Accessibility: "Barrierefreiheit",
+  "Image is decorative": "Bild ist dekorativ",
+  Source: "Quelle",
+  Dimensions: "Abmessungen",
+  "Constrain proportions": "Seitenverh\xe4ltnis beibehalten",
+  General: "Allgemein",
+  Advanced: "Erweitert",
+  Style: "Formatvorlage",
+  "Vertical space": "Vertikaler Raum",
+  "Horizontal space": "Horizontaler Raum",
+  Border: "Rahmen",
+  "Insert image": "Bild einf\xfcgen",
+  "Image...": "Bild...",
+  "Image list": "Bildliste",
+  Resize: "Skalieren",
+  "Insert date/time": "Datum/Uhrzeit einf\xfcgen",
+  "Date/time": "Datum/Uhrzeit",
+  "Insert/edit link": "Link einf\xfcgen/bearbeiten",
+  "Text to display": "Anzuzeigender Text",
+  Url: "URL",
+  "Open link in...": "Link \xf6ffnen in...",
+  "Current window": "Aktuelles Fenster",
+  None: "Keine",
+  "New window": "Neues Fenster",
+  "Open link": "Link \xf6ffnen",
+  "Remove link": "Link entfernen",
+  Anchors: "Anker",
+  "Link...": "Link...",
+  "Paste or type a link": "Link einf\xfcgen oder eingeben",
+  "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "Diese URL scheint eine E-Mail-Adresse zu sein. M\xf6chten Sie das dazu ben\xf6tigte mailto: voranstellen?",
+  "The URL you entered seems to be an external link. Do you want to add the required http:// prefix?": "Diese URL scheint ein externer Link zu sein. M\xf6chten Sie das dazu ben\xf6tigte http:// voranstellen?",
+  "The URL you entered seems to be an external link. Do you want to add the required https:// prefix?": "Die eingegebene URL scheint ein externer Link zu sein. Soll das fehlende https:// davor erg\xe4nzt werden?",
+  "Link list": "Linkliste",
+  "Insert video": "Video einf\xfcgen",
+  "Insert/edit video": "Video einf\xfcgen/bearbeiten",
+  "Insert/edit media": "Medien einf\xfcgen/bearbeiten",
+  "Alternative source": "Alternative Quelle",
+  "Alternative source URL": "URL der alternativen Quelle",
+  "Media poster (Image URL)": "Medienposter (Bild-URL)",
+  "Paste your embed code below:": "F\xfcgen Sie Ihren Einbettungscode unten ein:",
+  Embed: "Einbettung",
+  "Media...": "Medien...",
+  "Nonbreaking space": "Gesch\xfctztes Leerzeichen",
+  "Page break": "Seitenumbruch",
+  "Paste as text": "Als Text einf\xfcgen",
+  Preview: "Vorschau",
+  Print: "Drucken",
+  "Print...": "Drucken...",
+  Save: "Speichern",
+  Find: "Suchen",
+  "Replace with": "Ersetzen durch",
+  Replace: "Ersetzen",
+  "Replace all": "Alle ersetzen",
+  Previous: "Vorherige",
+  Next: "N\xe4chste",
+  "Find and Replace": "Suchen und Ersetzen",
+  "Find and replace...": "Suchen und ersetzen...",
+  "Could not find the specified string.": "Die angegebene Zeichenfolge wurde nicht gefunden.",
+  "Match case": "Gro\xdf-/Kleinschreibung beachten",
+  "Find whole words only": "Nur ganze W\xf6rter suchen",
+  "Find in selection": "In Auswahl suchen",
+  "Insert table": "Tabelle einf\xfcgen",
+  "Table properties": "Tabelleneigenschaften",
+  "Delete table": "Tabelle l\xf6schen",
+  Cell: "Zelle",
+  Row: "Zeile",
+  Column: "Spalte",
+  "Cell properties": "Zelleigenschaften",
+  "Merge cells": "Zellen verbinden",
+  "Split cell": "Zelle aufteilen",
+  "Insert row before": "Neue Zeile davor einf\xfcgen",
+  "Insert row after": "Neue Zeile danach einf\xfcgen",
+  "Delete row": "Zeile l\xf6schen",
+  "Row properties": "Zeileneigenschaften",
+  "Cut row": "Zeile ausschneiden",
+  "Cut column": "Spalte ausschneiden",
+  "Copy row": "Zeile kopieren",
+  "Copy column": "Spalte kopieren",
+  "Paste row before": "Zeile davor einf\xfcgen",
+  "Paste column before": "Spalte davor einf\xfcgen",
+  "Paste row after": "Zeile danach einf\xfcgen",
+  "Paste column after": "Spalte danach einf\xfcgen",
+  "Insert column before": "Neue Spalte davor einf\xfcgen",
+  "Insert column after": "Neue Spalte danach einf\xfcgen",
+  "Delete column": "Spalte l\xf6schen",
+  Cols: "Spalten",
+  Rows: "Zeilen",
+  Width: "Breite",
+  Height: "H\xf6he",
+  "Cell spacing": "Zellenabstand",
+  "Cell padding": "Zelleninnenabstand",
+  "Row clipboard actions": "Zeilen-Zwischenablage-Aktionen",
+  "Column clipboard actions": "Spalten-Zwischenablage-Aktionen",
+  "Table styles": "Tabellenstil",
+  "Cell styles": "Zellstil",
+  "Column header": "Spaltenkopf",
+  "Row header": "Zeilenkopf",
+  "Table caption": "Tabellenbeschriftung",
+  Caption: "Beschriftung",
+  "Show caption": "Beschriftung anzeigen",
+  Left: "Links",
+  Center: "Zentriert",
+  Right: "Rechts",
+  "Cell type": "Zelltyp",
+  Scope: "Bereich",
+  Alignment: "Ausrichtung",
+  "Horizontal align": "Horizontal ausrichten",
+  "Vertical align": "Vertikal ausrichten",
+  Top: "Oben",
+  Middle: "Mitte",
+  Bottom: "Unten",
+  "Header cell": "Kopfzelle",
+  "Row group": "Zeilengruppe",
+  "Column group": "Spaltengruppe",
+  "Row type": "Zeilentyp",
+  Header: "Kopfzeile",
+  Body: "Inhalt",
+  Footer: "Fu\xdfzeile",
+  "Border color": "Rahmenfarbe",
+  Solid: "Durchgezogen",
+  Dotted: "Gepunktet",
+  Dashed: "Gestrichelt",
+  Double: "Doppelt",
+  Groove: "Gekantet",
+  Ridge: "Eingeritzt",
+  Inset: "Eingelassen",
+  Outset: "Hervorstehend",
+  Hidden: "Unsichtbar",
+  "Insert template...": "Vorlage einf\xfcgen...",
+  Templates: "Vorlagen",
+  Template: "Vorlage",
+  "Insert Template": "Vorlage einf\xfcgen",
+  "Text color": "Textfarbe",
+  "Background color": "Hintergrundfarbe",
+  "Custom...": "Benutzerdefiniert...",
+  "Custom color": "Benutzerdefinierte Farbe",
+  "No color": "Keine Farbe",
+  "Remove color": "Farbauswahl aufheben",
+  "Show blocks": "Bl\xf6cke anzeigen",
+  "Show invisible characters": "Unsichtbare Zeichen anzeigen",
+  "Word count": "Anzahl der W\xf6rter",
+  Count: "Anzahl",
+  Document: "Dokument",
+  Selection: "Auswahl",
+  Words: "W\xf6rter",
+  "Words: {0}": "Wortzahl: {0}",
+  "{0} words": "{0} W\xf6rter",
+  File: "Datei",
+  Edit: "Bearbeiten",
+  Insert: "Einf\xfcgen",
+  View: "Ansicht",
+  Format: "Format",
+  Table: "Tabelle",
+  Tools: "Werkzeuge",
+  "Powered by {0}": "Betrieben von {0}",
+  "Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "Rich-Text-Bereich. Dr\xfccken Sie Alt+F9 f\xfcr das Men\xfc. Dr\xfccken Sie Alt+F10 f\xfcr die Symbolleiste. Dr\xfccken Sie Alt+0 f\xfcr Hilfe.",
+  "Image title": "Bildtitel",
+  "Border width": "Rahmenbreite",
+  "Border style": "Rahmenstil",
+  Error: "Fehler",
+  Warn: "Warnung",
+  Valid: "G\xfcltig",
+  "To open the popup, press Shift+Enter": "Dr\xfccken Sie Umschalt+Eingabe, um das Popup-Fenster zu \xf6ffnen.",
+  "Rich Text Area": "Rich-Text-Area",
+  "Rich Text Area. Press ALT-0 for help.": "Rich-Text-Bereich. Dr\xfccken Sie Alt+0 f\xfcr Hilfe.",
+  "System Font": "Betriebssystemschriftart",
+  "Failed to upload image: {0}": "Bild konnte nicht hochgeladen werden: {0}",
+  "Failed to load plugin: {0} from url {1}": "Plugin konnte nicht geladen werden: {0} von URL {1}",
+  "Failed to load plugin url: {0}": "Plugin-URL konnte nicht geladen werden: {0}",
+  "Failed to initialize plugin: {0}": "Plugin konnte nicht initialisiert werden: {0}",
+  example: "Beispiel",
+  Search: "Suchen",
+  All: "Alle",
+  Currency: "W\xe4hrung",
+  Text: "Text",
+  Quotations: "Anf\xfchrungszeichen",
+  Mathematical: "Mathematisch",
+  "Extended Latin": "Erweitertes Latein",
+  Symbols: "Symbole",
+  Arrows: "Pfeile",
+  "User Defined": "Benutzerdefiniert",
+  "dollar sign": "Dollarzeichen",
+  "currency sign": "W\xe4hrungssymbol",
+  "euro-currency sign": "Eurozeichen",
+  "colon sign": "Doppelpunkt",
+  "cruzeiro sign": "Cruzeirozeichen",
+  "french franc sign": "Franczeichen",
+  "lira sign": "Lirezeichen",
+  "mill sign": "Millzeichen",
+  "naira sign": "Nairazeichen",
+  "peseta sign": "Pesetazeichen",
+  "rupee sign": "Rupiezeichen",
+  "won sign": "Wonzeichen",
+  "new sheqel sign": "Schekelzeichen",
+  "dong sign": "Dongzeichen",
+  "kip sign": "Kipzeichen",
+  "tugrik sign": "Tugrikzeichen",
+  "drachma sign": "Drachmezeichen",
+  "german penny symbol": "Pfennigzeichen",
+  "peso sign": "Pesozeichen",
+  "guarani sign": "Guaranizeichen",
+  "austral sign": "Australzeichen",
+  "hryvnia sign": "Hrywnjazeichen",
+  "cedi sign": "Cedizeichen",
+  "livre tournois sign": "Livrezeichen",
+  "spesmilo sign": "Spesmilozeichen",
+  "tenge sign": "Tengezeichen",
+  "indian rupee sign": "Indisches Rupiezeichen",
+  "turkish lira sign": "T\xfcrkisches Lirazeichen",
+  "nordic mark sign": "Zeichen nordische Mark",
+  "manat sign": "Manatzeichen",
+  "ruble sign": "Rubelzeichen",
+  "yen character": "Yenzeichen",
+  "yuan character": "Yuanzeichen",
+  "yuan character, in hong kong and taiwan": "Yuanzeichen in Hongkong und Taiwan",
+  "yen/yuan character variant one": "Yen-/Yuanzeichen Variante 1",
+  Emojis: "Emojis",
+  "Emojis...": "Emojis...",
+  "Loading emojis...": "Lade Emojis...",
+  "Could not load emojis": "Emojis konnten nicht geladen werden",
+  People: "Menschen",
+  "Animals and Nature": "Tiere und Natur",
+  "Food and Drink": "Essen und Trinken",
+  Activity: "Aktivit\xe4t",
+  "Travel and Places": "Reisen und Orte",
+  Objects: "Objekte",
+  Flags: "Flaggen",
+  Characters: "Zeichen",
+  "Characters (no spaces)": "Zeichen (ohne Leerzeichen)",
+  "{0} characters": "{0}\xa0Zeichen",
+  "Error: Form submit field collision.": "Fehler: Kollision der Formularbest\xe4tigungsfelder.",
+  "Error: No form element found.": "Fehler: Kein Formularelement gefunden.",
+  "Color swatch": "Farbpalette",
+  "Color Picker": "Farbwahl",
+  "Invalid hex color code: {0}": "Ung\xfcltiger Hexadezimal-Farbwert: {0}",
+  "Invalid input": "Ung\xfcltige Eingabe",
+  R: "R",
+  "Red component": "Rotanteil",
+  G: "G",
+  "Green component": "Gr\xfcnanteil",
+  B: "B",
+  "Blue component": "Blauanteil",
+  "#": "#",
+  "Hex color code": "Hexadezimal-Farbwert",
+  "Range 0 to 255": "Spanne 0 bis 255",
+  Turquoise: "T\xfcrkis",
+  Green: "Gr\xfcn",
+  Blue: "Blau",
+  Purple: "Violett",
+  "Navy Blue": "Marineblau",
+  "Dark Turquoise": "Dunkelt\xfcrkis",
+  "Dark Green": "Dunkelgr\xfcn",
+  "Medium Blue": "Mittleres Blau",
+  "Medium Purple": "Mittelviolett",
+  "Midnight Blue": "Mitternachtsblau",
+  Yellow: "Gelb",
+  Orange: "Orange",
+  Red: "Rot",
+  "Light Gray": "Hellgrau",
+  Gray: "Grau",
+  "Dark Yellow": "Dunkelgelb",
+  "Dark Orange": "Dunkelorange",
+  "Dark Red": "Dunkelrot",
+  "Medium Gray": "Mittelgrau",
+  "Dark Gray": "Dunkelgrau",
+  "Light Green": "Hellgr\xfcn",
+  "Light Yellow": "Hellgelb",
+  "Light Red": "Hellrot",
+  "Light Purple": "Helllila",
+  "Light Blue": "Hellblau",
+  "Dark Purple": "Dunkellila",
+  "Dark Blue": "Dunkelblau",
+  Black: "Schwarz",
+  White: "Wei\xdf",
+  "Switch to or from fullscreen mode": "Vollbildmodus umschalten",
+  "Open help dialog": "Hilfe-Dialog \xf6ffnen",
+  history: "Historie",
+  styles: "Stile",
+  formatting: "Formatierung",
+  alignment: "Ausrichtung",
+  indentation: "Einr\xfcckungen",
+  Font: "Schriftart",
+  Size: "Schriftgr\xf6\xdfe",
+  "More...": "Mehr...",
+  "Select...": "Auswahl...",
+  Preferences: "Einstellungen",
+  Yes: "Ja",
+  No: "Nein",
+  "Keyboard Navigation": "Tastaturnavigation",
+  Version: "Version",
+  "Code view": "Code Ansicht",
+  "Open popup menu for split buttons": "\xd6ffne Popup Menge um Buttons zu trennen",
+  "List Properties": "Liste Eigenschaften",
+  "List properties...": "Liste Eigenschaften",
+  "Start list at number": "Beginne Liste mit Nummer",
+  "Line height": "Liniendicke",
+  "Dropped file type is not supported": "Hereingezogener Dateityp wird nicht unterst\xfctzt",
+  "Loading...": "Wird geladen...",
+  "ImageProxy HTTP error: Rejected request": "Image Proxy HTTP Fehler: Abgewiesene Anfrage",
+  "ImageProxy HTTP error: Could not find Image Proxy": "Image Proxy HTTP Fehler: Kann Image Proxy nicht finden",
+  "ImageProxy HTTP error: Incorrect Image Proxy URL": "Image Proxy HTTP Fehler: Falsche Image Proxy URL",
+  "ImageProxy HTTP error: Unknown ImageProxy error": "Image Proxy HTTP Fehler: Unbekannter Image Proxy Fehler"
+});

package/src/ui/AUiComponents.js

@@ -8,6 +8,7 @@ import ASelect from "./ASelect/ASelect";
 import ASwitch from "./ASwitch/ASwitch";
 import ATemplate from "./ATemplate/ATemplate";
 import ATextarea from "./ATextarea/ATextarea";
+import ATinymce from "./ATinymce/ATinymce";
 
 export default {
   checkbox: ACheckbox,
@@ -27,4 +28,5 @@ export default {
   template: ATemplate,
   text: AInput,
   textarea: ATextarea,
+  tinymce: ATinymce,
 };

package/src/utils/utilsDOM.js

@@ -0,0 +1,10 @@
+export function scrollToElement({ element, isMiddleOfScreen = true }) {
+  if (isMiddleOfScreen) {
+    window.scroll({
+      top: element.offsetTop - window.innerHeight / 2,
+      behavior: "smooth",
+    });
+  } else {
+    element.scrollIntoView();
+  }
+}