aloha-vue 1.2.64 → 1.2.65-a2

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.64",
+  "version": "1.2.65-a2",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/plugins/ATinymcePlugin.js

@@ -0,0 +1,53 @@
+import {
+  ref,
+} from "vue";
+
+export const tinymcePluginOptions = ref({
+  propsDefault: {
+    branding: true,
+    contentCustomStyle: undefined,
+    contentLangs: [
+      { 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: "de",
+    maxlength: undefined,
+    menu: undefined,
+    menubar: false,
+    plugins: "advlist code emoticons link lists table help example",
+    promotion: false,
+    rows: undefined,
+    toolbar: [
+      { 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: "Sprache", items: ["language"] },
+      { name: "Link", items: ["link", "unlink"] },
+      { name: "Historie", items: ["undo", "redo"] },
+      { name: "Hilfe", items: ["help"] },
+    ],
+    toolbarMode: "wrap",
+    validElements: "@[style],a[href|target|title],strong/b[style],em/i[style],div[style],br[style],p[style],span[style],ul[style],ol[style],li[style],table[],thead[],tbody[],th[],tr[],td[]",
+    validStyles: {
+      "*": "text-align,padding-left,text-decoration",
+      ul: "list-style-type",
+      ol: "list-style-type",
+    },
+  },
+});
+
+export default {
+  install: (app, {
+    propsDefault = {},
+  } = {}) => {
+    tinymcePluginOptions.value.propsDefault = {
+      ...tinymcePluginOptions.value.propsDefault,
+      ...propsDefault,
+    };
+  },
+};

package/src/ui/ATinymce/ATinymce.js

@@ -15,6 +15,10 @@ import ATinymceAPI from "./compositionAPI/ATinymceAPI";
 import UiAPI from "../compositionApi/UiAPI";
 import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
+import {
+  tinymcePluginOptions,
+} from "../../plugins/ATinymcePlugin";
+
 export default {
   name: "ATinymce",
   mixins: [
@@ -24,71 +28,62 @@ export default {
     branding: {
       type: Boolean,
       required: false,
-      default: true,
+      default: () => tinymcePluginOptions.value.propsDefault.branding,
+    },
+    contentCustomStyle: {
+      type: String,
+      required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.contentCustomStyle,
     },
     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" },
-      ],
+      default: () => tinymcePluginOptions.value.propsDefault.contentLangs,
     },
     languageDefault: {
       type: String,
       required: false,
-      default: "de",
+      default: () => tinymcePluginOptions.value.propsDefault.languageDefault,
     },
     maxlength: {
       type: [String, Number],
       required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.maxlength,
     },
     menu: {
       type: Object,
       required: false,
-      default: undefined,
+      default: () => tinymcePluginOptions.value.propsDefault.menu,
     },
     menubar: {
       type: [String, Boolean],
       required: false,
-      default: false,
+      default: () => tinymcePluginOptions.value.propsDefault.menubar,
     },
     plugins: {
       type: String,
       required: false,
-      default: "advlist code emoticons link lists table help",
+      default: () => tinymcePluginOptions.value.propsDefault.plugins,
     },
     promotion: {
       type: Boolean,
       required: false,
-      default: false,
+      default: () => tinymcePluginOptions.value.propsDefault.promotion,
     },
     rows: {
       type: [String, Number],
       required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.rows,
     },
     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: "Sprache", items: ["language"] },
-        { name: "Link", items: ["link", "unlink"] },
-        { name: "Historie", items: ["undo", "redo"] },
-        { name: "Hilfe", items: ["help"] },
-      ]),
+      default: () => tinymcePluginOptions.value.propsDefault.toolbar,
     },
     toolbarMode: {
       type: String,
       required: false,
-      default: "wrap",
+      default: () => tinymcePluginOptions.value.propsDefault.toolbarMode,
       validator: value => ["floating", "sliding", "scrolling", "wrap"].indexOf(value) !== -1,
     },
     type: {
@@ -96,6 +91,16 @@ export default {
       required: false,
       default: "tinymce",
     },
+    validElements: {
+      type: String,
+      required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.validElements,
+    },
+    validStyles: {
+      type: Object,
+      required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.validStyles,
+    },
   },
   setup(props, context) {
     const {

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

@@ -5,8 +5,11 @@ import {
   watch,
 } from "vue";
 
+import MyPowerPaste from "../plugins/MyPowerPaste";
+
 /* Import TinyMCE */
 import tinymce from "tinymce";
+tinymce.PluginManager.add("example", MyPowerPaste);
 
 /* Default icons are required. After that, import custom icons if applicable */
 import "tinymce/icons/default";
@@ -45,20 +48,27 @@ export default function ATinymceAPI(props, context, {
   htmlIdLocal = computed(() => ""),
 }) {
   const branding = toRef(props, "branding");
+  const contentCustomStyle = toRef(props, "contentCustomStyle");
   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 modelValue = toRef(props, "modelValue");
   const plugins = toRef(props, "plugins");
   const promotion = toRef(props, "promotion");
   const toolbar = toRef(props, "toolbar");
   const toolbarMode = toRef(props, "toolbarMode");
-  const modelValue = toRef(props, "modelValue");
+  const validElements = toRef(props, "validElements");
+  const validStyles = toRef(props, "validStyles");
 
   let vueEditor = null;
   let modelValueLocal = undefined;
 
+  const contentStyle = computed(() => {
+    return `${ contentUiSkinCss.toString() }\n${ contentCss.toString() }\n${ contentCustomStyle.value ? contentCustomStyle.value : "" }`;
+  });
+
   const changeModelLocal = ({ model }) => {
     modelValueLocal = model;
     changeModel({ model });
@@ -74,7 +84,7 @@ export default function ATinymceAPI(props, context, {
       skin: false,
       content_css: false,
       entity_encoding: "raw",
-      content_style: `${ contentUiSkinCss.toString() }\n${ contentCss.toString() }`,
+      content_style: contentStyle.value,
       branding: branding.value,
       promotion: promotion.value,
       language: languageDefault.value,
@@ -82,6 +92,9 @@ export default function ATinymceAPI(props, context, {
       menu: menu.value,
       menubar: menubar.value,
       readonly: !!disabled.value,
+      valid_elements: validElements.value,
+      valid_styles: validStyles.value,
+
       setup: editor => {
         vueEditor = editor;
         editor.on("change input undo redo", () => {

package/src/ui/ATinymce/plugins/MyPowerPaste.js

@@ -0,0 +1,204 @@
+import {
+  forEach,
+} from "lodash-es";
+
+export default function(editor) {
+  // Event-Handler für Einfügevorgänge
+  editor.on("paste", function(e) {
+    const clipboardData = (e.clipboardData || window.clipboardData);
+    e.stopPropagation();
+    e.preventDefault();
+
+    const PAGE_HTML = clipboardData.getData("text/html");
+    const HTML_FRAGMENT = extractTextBetween({
+      html: PAGE_HTML,
+      start: "<!--StartFragment-->",
+      end: "<!--EndFragment-->",
+    });
+
+    if (isMsWord({ html: PAGE_HTML })) {
+      editor.insertContent(parseWord({ html: HTML_FRAGMENT }));
+    } else {
+      const cleanedHtml = HTML_FRAGMENT.replace(/\sdata-[a-z0-9-]+="[^"]*"/gi, "").replace(/\saria-[a-z0-9-]+="[^"]*"/gi, "");
+
+      editor.insertContent(cleanedHtml);
+    }
+  });
+  /* Return the metadata for the help plugin */
+  return {
+    getMetadata: () => ({
+      name: "My power paste",
+      url: "https://ilia-brykin.github.io/aloha/#/"
+    })
+  };
+}
+
+function extractTextBetween({ html, start, end }) {
+  const startIndex = html.indexOf(start);
+  const endIndex = html.indexOf(end);
+
+  if (startIndex !== -1 && endIndex !== -1) {
+    return html.substring(startIndex + start.length, endIndex).trim();
+  }
+  return html;
+}
+
+function isMsWord({ html }) {
+  const HTML_TAG = extractTextBetween({
+    html,
+    start: "<html",
+    end: ">",
+  });
+
+  return HTML_TAG.indexOf(":office:word") !== -1;
+}
+
+function parseWord({ html }) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  const allChildren = doc.body.querySelectorAll(":scope > *");
+
+  const rootElement = document.createElement("div");
+  let currentList = null;
+  let lastLevel = 0;
+  let lastIndent = 0;
+  const listStack = [];
+
+  forEach(allChildren, element => {
+    const isTagP = element.tagName === "P";
+    if (!isTagP) {
+      rootElement.appendChild(element);
+      lastLevel = 0;
+      lastIndent = 0;
+      currentList = null;
+      return;
+    }
+
+    let htmlContent = element.innerHTML.trim();
+    const IS_NORMAL_PARAGRAPH = isNormalParagraph({ element, htmlContent });
+    htmlContent = htmlContent
+      .replace(/<u>/g, "<span style=\"text-decoration: underline;\">")
+      .replace(/<\/u>/g, "</span>")
+      .replace(/<!--\[if !supportLists]-->.*?<!--\[endif]-->/gs, "")
+      .replace(/&nbsp;/g, " ")
+      .replace(/^[\s·o§1-9]+[.)]?/g, "");
+
+    if (isTagP && IS_NORMAL_PARAGRAPH) {
+      const newParagraph = document.createElement("p");
+      newParagraph.innerHTML = htmlContent;
+      rootElement.appendChild(newParagraph);
+      lastLevel = 0;
+      lastIndent = 0;
+      currentList = null;
+      return;
+    }
+
+    const MARGIN_LEFT = parseInt(element.style.marginLeft) || 0;
+    const LIST_LEVEL = getCurrentLevelForList(element);
+    const { type, style } = getListTypeAndStyleFromSpanContent(element);
+
+    if (!currentList || LIST_LEVEL > lastLevel || MARGIN_LEFT > lastIndent) {
+      const newList = document.createElement(type);
+      if (style) {
+        newList.style.listStyleType = style;
+      }
+
+      if (currentList) {
+        currentList.appendChild(newList);
+      } else {
+        rootElement.appendChild(newList);
+      }
+      currentList = newList;
+      listStack.push({ element: newList, level: LIST_LEVEL, marginLeft: MARGIN_LEFT });
+    } else if (LIST_LEVEL < lastLevel) {
+      while (listStack.length > 1 && LIST_LEVEL < listStack[listStack.length - 1].level) {
+        listStack.pop();
+        currentList = listStack[listStack.length - 1].element;
+      }
+    } else if (MARGIN_LEFT < lastIndent && listStack.length > 1) {
+      while (listStack.length > 1 && MARGIN_LEFT < listStack[listStack.length - 1].marginLeft) {
+        listStack.pop();
+        currentList = listStack[listStack.length - 1].element;
+      }
+    }
+
+    const li = document.createElement("li");
+    li.innerHTML = htmlContent;
+    currentList.appendChild(li);
+
+    lastLevel = LIST_LEVEL;
+    lastIndent = MARGIN_LEFT;
+  });
+
+  return rootElement.innerHTML;
+}
+
+function getListTypeAndStyleFromSpanContent(p) {
+  const spans = p.querySelectorAll("span");
+  let spanContent = "";
+  forEach(spans, span => {
+    const styleAttr = span.getAttribute("style");
+    if (styleAttr && styleAttr.includes("mso-list:Ignore")) {
+      spanContent = span.textContent || "";
+      return false;
+    }
+  });
+
+  spanContent = spanContent.trim();
+  if (!spanContent) {
+    return { type: "ul", style: "" };
+  }
+  // Check for ordered list with Arabic numerals or numbers within parentheses
+  if (/^\d+[.)]/.test(spanContent) || /^\(\d+\)/.test(spanContent)) {
+    return { type: "ol", style: "" }; // Default style for <ol>
+  }
+  // Check for ordered list with uppercase Roman numerals
+  if (/^[IVXLCDM]+\./.test(spanContent)) {
+    return { type: "ol", style: "upper-roman" };
+  }
+  // Check for ordered list with lowercase Roman numerals
+  if (/^[ivxlcdm]+\./.test(spanContent)) {
+    return { type: "ol", style: "lower-roman" };
+  }
+  // Check for ordered list with uppercase letters
+  if (/^[A-Z]+[.)]/.test(spanContent)) {
+    return { type: "ol", style: "upper-alpha" };
+  }
+  // Check for ordered list with lowercase letters
+  if (/^[a-z]+[.)]/.test(spanContent)) {
+    return { type: "ol", style: "lower-alpha" };
+  }
+  // Check for unordered list with various symbols
+  if (/^[·o§]/.test(spanContent)) {
+    // Determine list style based on the symbol
+    let style;
+    switch (spanContent.trim()[0]) {
+    case "·": style = "disc"; break;
+    case "o": style = "circle"; break;
+    case "§": style = "square"; break;
+    default: style = "";
+    }
+    return { type: "ul", style: style };
+  }
+
+  return { type: "ul", style: "" };
+}
+
+function getCurrentLevelForList(p) {
+  const styleAttr = p.getAttribute("style");
+  let level = 1;
+  if (styleAttr) {
+    const levelMatch = styleAttr.match(/mso-list:l\d+ level(\d+)/);
+    if (levelMatch) {
+      level = parseInt(levelMatch[1], 10);
+    }
+  }
+
+  return level;
+}
+
+function isNormalParagraph({ element, htmlContent }) {
+  return element.className.includes("MsoNormal") ||
+    (!element.className.includes("MsoListParagraph") &&
+    !/mso-list:/.test(htmlContent));
+}