Feature/help plugin

src/pat/tinymce/js/help.js

@@ -0,0 +1,280 @@
+/**
+ * TinyMCE version 6.8.3 (2024-02-08)
+ * Extracted from tinymce/plugins/help/plugin.js
+ */
+
+import tinymce from "tinymce/tinymce";
+import shortcuts from "./help/shortcuts";
+import { Cell, Optional } from "./help/utils";
+
+(function () {
+    "use strict";
+
+    let unique = 0;
+    const generate = (prefix) => {
+        const date = new Date();
+        const time = date.getTime();
+        const random = Math.floor(Math.random() * 1000000000);
+        unique++;
+        return prefix + "_" + random + unique + String(time);
+    };
+
+    const get$1 = (customTabs) => {
+        const addTab = (spec) => {
+            var _a;
+            const name =
+                (_a = spec.name) !== null && _a !== void 0 ? _a : generate("tab-name");
+            const currentCustomTabs = customTabs.get();
+            currentCustomTabs[name] = spec;
+            customTabs.set(currentCustomTabs);
+        };
+        return { addTab };
+    };
+
+    const registerCommand = (editor, dialogOpener) => {
+        editor.addCommand("mceHelp", dialogOpener);
+    };
+
+    const option = (name) => (editor) => editor.options.get(name);
+    const registerOption = (editor) => {
+        editor.options.register("help_tabs", { processor: "array" });
+    };
+    const getHelpTabs = option("help_tabs");
+
+    // Menu Item and Button
+    const register = (editor, dialogOpener) => {
+        editor.ui.registry.addButton("help", {
+            icon: "help",
+            tooltip: "Help",
+            shortcut: "Alt+0",
+            onAction: dialogOpener,
+        });
+        editor.ui.registry.addMenuItem("help", {
+            text: "Help",
+            icon: "help",
+            shortcut: "Alt+0",
+            onAction: dialogOpener,
+        });
+    };
+
+    const hasProto = (v, constructor, predicate) => {
+        var _a;
+        if (predicate(v, constructor.prototype)) {
+            return true;
+        } else {
+            return (
+                ((_a = v.constructor) === null || _a === void 0 ? void 0 : _a.name) ===
+                constructor.name
+            );
+        }
+    };
+    const typeOf = (x) => {
+        const t = typeof x;
+        if (x === null) {
+            return "null";
+        } else if (t === "object" && Array.isArray(x)) {
+            return "array";
+        } else if (
+            t === "object" &&
+            hasProto(x, String, (o, proto) => proto.isPrototypeOf(o))
+        ) {
+            return "string";
+        } else {
+            return t;
+        }
+    };
+
+    const isType = (type) => (value) => typeOf(value) === type;
+    const isString = isType("string");
+
+    Optional.singletonNone = new Optional(false);
+
+    const map = (xs, f) => {
+        const len = xs.length;
+        const r = new Array(len);
+        for (let i = 0; i < len; i++) {
+            const x = xs[i];
+            r[i] = f(x, i);
+        }
+        return r;
+    };
+
+    const keys = Object.keys;
+    const hasOwnProperty = Object.hasOwnProperty;
+    const get = (obj, key) => {
+        return has(obj, key) ? Optional.from(obj[key]) : Optional.none();
+    };
+    const has = (obj, key) => hasOwnProperty.call(obj, key);
+
+    const cat = (arr) => {
+        const r = [];
+        const push = (x) => {
+            r.push(x);
+        };
+        for (let i = 0; i < arr.length; i++) {
+            arr[i].each(push);
+        }
+        return r;
+    };
+
+    // Keynav tab
+    var tinymce_resource = tinymce.util.Tools.resolve('tinymce.Resource');
+    var tinymce_i18n = tinymce.util.Tools.resolve('tinymce.util.I18n');
+    const pLoadHtmlByLangCode = (baseUrl, langCode) => {
+        Promise.resolve(import(`./help/i18n/keynav/${ langCode }.js`));
+        return tinymce_resource.load(`tinymce.html-i18n.help-keynav.${ langCode }`, `./help/i18n/keynav/${ langCode }.js`);
+    }
+    const pLoadI18nHtml = baseUrl => pLoadHtmlByLangCode(baseUrl, tinymce_i18n.getCode()).catch(() => pLoadHtmlByLangCode(baseUrl, 'en'));
+    const initI18nLoad = (editor, baseUrl) => {
+      editor.on('init', () => {
+        var lastIndex = baseUrl.lastIndexOf('/');
+        var resourcesUrl = baseUrl.substring(0, lastIndex);
+        pLoadI18nHtml(resourcesUrl);
+      });
+    };
+    const pTab = async pluginUrl => {
+
+        const body = {
+            type: "htmlpanel",
+            presets: "document",
+            html: await pLoadI18nHtml(pluginUrl)
+        };
+        return {
+            name: "keyboardnav",
+            title: "Keyboard Navigation",
+            items: [body],
+        };
+    };
+
+    const convertText = (source) => {
+        const isMac = tinymce.Env.os.isMacOS() || tinymce.Env.os.isiOS();
+        const mac = {
+            alt: "&#x2325;",
+            ctrl: "&#x2303;",
+            shift: "&#x21E7;",
+            meta: "&#x2318;",
+            access: "&#x2303;&#x2325;",
+        };
+        const other = {
+            meta: "Ctrl ",
+            access: "Shift + Alt ",
+        };
+        const replace = isMac ? mac : other;
+        const shortcut = source.split("+");
+        const updated = map(shortcut, (segment) => {
+            const search = segment.toLowerCase().trim();
+            return has(replace, search) ? replace[search] : segment;
+        });
+        return isMac ? updated.join("").replace(/\s/, "") : updated.join("+");
+    };
+
+    // Shortcuts Tab
+    const getShortcuts = () => {
+        const shortcutList = map(shortcuts, (shortcut) => {
+            const shortcutText = map(shortcut.shortcuts, convertText).join(
+                " " + tinymce.util.I18n.translate("or").toLocaleLowerCase() + " "
+            );
+            return [shortcut.action, shortcutText];
+        });
+        const tablePanel = {
+            type: "table",
+            header: ["Action", "Shortcut"],
+            cells: shortcutList,
+        };
+        return {
+            name: "shortcuts",
+            title: "Handy Shortcuts",
+            items: [tablePanel],
+        };
+    };
+
+    const parseHelpTabsSetting = (tabsFromSettings, tabs) => {
+        const newTabs = {};
+        const names = map(tabsFromSettings, (t) => {
+            var _a;
+            if (isString(t)) {
+                if (has(tabs, t)) {
+                    newTabs[t] = tabs[t];
+                }
+                return t;
+            } else {
+                const name =
+                    (_a = t.name) !== null && _a !== void 0 ? _a : generate("tab-name");
+                newTabs[name] = t;
+                return name;
+            }
+        });
+        return {
+            tabs: newTabs,
+            names,
+        };
+    };
+    const getNamesFromTabs = (tabs) => {
+        const names = keys(tabs);
+        const idx = names.indexOf("versions");
+        if (idx !== -1) {
+            names.splice(idx, 1);
+            names.push("versions");
+        }
+        return {
+            tabs,
+            names,
+        };
+    };
+    const pParseCustomTabs = async (editor, customTabs, pluginUrl) => {
+        const shortcuts = getShortcuts();
+        const nav = await pTab(pluginUrl);
+        const tabs = {
+            [shortcuts.name]: shortcuts,
+            [nav.name]: nav,
+            ...customTabs.get(),
+        };
+        return Optional.from(getHelpTabs(editor)).fold(
+            () => getNamesFromTabs(tabs),
+            (tabsFromSettings) => parseHelpTabsSetting(tabsFromSettings, tabs)
+        );
+    };
+    const init = (editor, customTabs, pluginUrl) => () => {
+        pParseCustomTabs(editor, customTabs, pluginUrl).then(({ tabs, names }) => {
+            const foundTabs = map(names, (name) => get(tabs, name));
+            const dialogTabs = cat(foundTabs);
+            const body = {
+                type: "tabpanel",
+                tabs: dialogTabs,
+            };
+            editor.windowManager.open({
+                title: "Help",
+                size: "medium",
+                body,
+                buttons: [
+                    {
+                        type: "cancel",
+                        name: "close",
+                        text: "Close",
+                        primary: true,
+                    },
+                ],
+                initialData: {},
+            });
+        });
+    };
+
+    var Plugin = () => {
+        tinymce.PluginManager.add("help", (editor, pluginUrl) => {
+            const customTabs = new Cell({});
+            const api = get$1(customTabs);
+            registerOption(editor);
+            const dialogOpener = init(editor, customTabs, pluginUrl);
+            register(editor, dialogOpener);
+            registerCommand(editor, dialogOpener);
+            editor.shortcuts.add("Alt+0", "Open help dialog", "mceHelp");
+            initI18nLoad(editor, pluginUrl);
+
+            return api;
+        });
+    };
+    tinymce.addI18n("es", {
+        "Press {0} for help": "Pulse {0} para obtener la ayuda"
+    })
+    Plugin();
+})();

src/pat/tinymce/js/help/i18n/keynav/ar.js

@@ -0,0 +1,90 @@
+tinymce.Resource.add('tinymce.html-i18n.help-keynav.ar',
+'<h1>بدء التنقل بواسطة لوحة المفاتيح</h1>\n' +
+  '\n' +
+  '<dl>\n' +
+  '  <dt>التركيز على شريط القوائم</dt>\n' +
+  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F9</dd>\n' +
+  '  <dd>نظام التشغيل macOS: &#x2325;F9</dd>\n' +
+  '  <dt>التركيز على شريط الأدوات</dt>\n' +
+  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F10</dd>\n' +
+  '  <dd>نظام التشغيل macOS: &#x2325;F10</dd>\n' +
+  '  <dt>التركيز على التذييل</dt>\n' +
+  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F11</dd>\n' +
+  '  <dd>نظام التشغيل macOS: &#x2325;F11</dd>\n' +
+  '  <dt>التركيز على شريط أدوات السياق</dt>\n' +
+  '  <dd>أنظمة التشغيل Windows أو Linux أو macOS: Ctrl+F9\n' +
+  '</dl>\n' +
+  '\n' +
+  '<p>سيبدأ التنقل عند عنصر واجهة المستخدم الأول، والذي سيتم تمييزه أو تسطيره في حالة العنصر الأول في\n' +
+  '  مسار عنصر التذييل.</p>\n' +
+  '\n' +
+  '<h1>التنقل بين أقسام واجهة المستخدم</h1>\n' +
+  '\n' +
+  '<p>للانتقال من أحد أقسام واجهة المستخدم إلى القسم التالي، اضغط على <strong>Tab</strong>.</p>\n' +
+  '\n' +
+  '<p>للانتقال من أحد أقسام واجهة المستخدم إلى القسم السابق، اضغط على <strong>Shift+Tab</strong>.</p>\n' +
+  '\n' +
+  '<p>ترتيب علامات <strong>Tab</strong> لأقسام واجهة المستخدم هذه هو:</p>\n' +
+  '\n' +
+  '<ol>\n' +
+  '  <li>شريط القوائم</li>\n' +
+  '  <li>كل مجموعة شريط الأدوات</li>\n' +
+  '  <li>الشريط الجانبي</li>\n' +
+  '  <li>مسار العنصر في التذييل</li>\n' +
+  '  <li>زر تبديل عدد الكلمات في التذييل</li>\n' +
+  '  <li>رابط إدراج العلامة التجارية في التذييل</li>\n' +
+  '  <li>مؤشر تغيير حجم المحرر في التذييل</li>\n' +
+  '</ol>\n' +
+  '\n' +
+  '<p>إذا لم يكن قسم واجهة المستخدم موجودًا، فسيتم تخطيه.</p>\n' +
+  '\n' +
+  '<p>إذا كان التذييل يحتوي على التركيز على ‏‫التنقل بواسطة لوحة المفاتيح، ولا يوجد شريط جانبي مرئي، فإن الضغط على <strong>Shift+Tab</strong>\n' +
+  '  ينقل التركيز إلى مجموعة شريط الأدوات الأولى، وليس الأخيرة.</p>\n' +
+  '\n' +
+  '<h1>التنقل بين أقسام واجهة المستخدم</h1>\n' +
+  '\n' +
+  '<p>للانتقال من أحد عناصر واجهة المستخدم إلى العنصر التالي، اضغط على مفتاح <strong>السهم</strong> المناسب.</p>\n' +
+  '\n' +
+  '<p>مفتاحا السهمين <strong>اليسار‎</strong> و<strong>اليمين‎</strong></p>\n' +
+  '\n' +
+  '<ul>\n' +
+  '  <li>التنقل بين القوائم في شريط القوائم.</li>\n' +
+  '  <li>فتح قائمة فرعية في القائمة.</li>\n' +
+  '  <li>التنقل بين الأزرار في مجموعة شريط الأدوات.</li>\n' +
+  '  <li>التنقل بين العناصر في مسار عنصر التذييل.</li>\n' +
+  '</ul>\n' +
+  '\n' +
+  '<p>مفتاحا السهمين <strong>لأسفل‎</strong> و<strong>لأعلى‎</strong></p>\n' +
+  '\n' +
+  '<ul>\n' +
+  '  <li>التنقل بين عناصر القائمة في القائمة.</li>\n' +
+  '  <li>التنقل بين العناصر في قائمة شريط الأدوات المنبثقة.</li>\n' +
+  '</ul>\n' +
+  '\n' +
+  '<p>دورة مفاتيح <strong>الأسهم‎</strong> داخل قسم واجهة المستخدم التي تم التركيز عليها.</p>\n' +
+  '\n' +
+  '<p>لإغلاق قائمة مفتوحة أو قائمة فرعية مفتوحة أو قائمة منبثقة مفتوحة، اضغط على مفتاح <strong>Esc</strong>.</p>\n' +
+  '\n' +
+  '<p>إذا كان التركيز الحالي على "الجزء العلوي" من قسم معين لواجهة المستخدم، فإن الضغط على مفتاح <strong>Esc</strong> يؤدي أيضًا إلى الخروج\n' +
+  '  من التنقل بواسطة لوحة المفاتيح بالكامل.</p>\n' +
+  '\n' +
+  '<h1>تنفيذ عنصر قائمة أو زر شريط أدوات</h1>\n' +
+  '\n' +
+  '<p>عندما يتم تمييز عنصر القائمة المطلوب أو زر شريط الأدوات، اضغط على زر <strong>Return</strong>، أو <strong>Enter</strong>،\n' +
+  '  أو <strong>مفتاح المسافة</strong> لتنفيذ العنصر.</p>\n' +
+  '\n' +
+  '<h1>التنقل في مربعات الحوار غير المبوبة</h1>\n' +
+  '\n' +
+  '<p>في مربعات الحوار غير المبوبة، يتم التركيز على المكون التفاعلي الأول عند فتح مربع الحوار.</p>\n' +
+  '\n' +
+  '<p>التنقل بين مكونات الحوار التفاعلي بالضغط على زر <strong>Tab</strong> أو <strong>Shift+Tab</strong>.</p>\n' +
+  '\n' +
+  '<h1>التنقل في مربعات الحوار المبوبة</h1>\n' +
+  '\n' +
+  '<p>في مربعات الحوار المبوبة، يتم التركيز على الزر الأول في قائمة علامات التبويب عند فتح مربع الحوار.</p>\n' +
+  '\n' +
+  '<p>التنقل بين المكونات التفاعلية لعلامة التبويب لمربع الحوار هذه بالضغط على زر <strong>Tab</strong> أو\n' +
+  '  <strong>Shift+Tab</strong>.</p>\n' +
+  '\n' +
+  '<p>التبديل إلى علامة تبويب أخرى لمربع الحوار من خلال التركيز على قائمة علامة التبويب ثم الضغط على زر <strong>السهم</strong> المناسب\n' +
+  '  مفتاح للتنقل بين علامات التبويب المتاحة.</p>\n');