Shortcodes in TinyMCE

integreat_cms/api/v3/pages.py

@@ -90,6 +90,7 @@ def transform_page(
             expand_shortcodes(page_translation.combined_text, context=context)
         ),
         "content": expand_shortcodes(page_translation.combined_text, context=context),
+        "page_id": page_translation.page.id,
         "parent": parent,
         "order": order,
         "available_languages": page_translation.available_languages_dict,

integreat_cms/cms/models/utils.py

@@ -50,6 +50,8 @@ def format_object_translation(
             + object_translation.link_title.tail
         )
     return {
+        "id": object_translation.id,
+        "foreign_object_id": object_translation.foreign_object.id,
         "path": object_translation.path(),
         "title": text_title,
         "html_title": html_title,

integreat_cms/cms/templates/_tinymce_config.html

@@ -19,8 +19,11 @@
 {% comment %} Styling for text diff taken from style.scss {% endcomment %}
 {% firstof font_style|add:"del { background-color: rgb(252 165 165); } ins { background-color: rgb(134 239 172); text-decoration-line: none; }" as content_style %}
 <div id="tinymce-config-options"
+     data-base-url="{% get_base_url %}"
      data-webapp-url="{% get_webapp_url %}"
      data-language="{{ LANGUAGE_CODE|slice:'0:2' }}"
+     data-region-slug="{{ request.region.slug }}"
+     data-language-slug="{{ language_slug }}"
      data-directionality="{% if right_to_left %}rtl{% else %}ltr{% endif %}"
      data-no-translate-tooltip='{% translate "Do not translate the selected text." %}'
      data-no-translate-text='{% translate "Do not translate" %}'
@@ -74,7 +77,7 @@
      data-link-dialog-title-text='{% translate "Add Link" %}'
      data-link-dialog-url-text='{% translate "URL" %}'
      data-link-dialog-text-text='{% translate "Text to display" %}'
-     data-link-dialog-internal_link-text='{% translate "Or link to existing content" %}'
+     data-link-dialog-internal_link-text='{% translate "Search for a page" %}'
      data-link-dialog-autoupdate-text='{% translate "Automatically use the title of the linked content for the link" %}'
      data-custom-plugins="{% get_base_url %}{{ editor_content_js_files.0.url }}"
      data-content-css="{% get_base_url %}{{ editor_content_css_files.0.url }}"

integreat_cms/static/src/css/style.scss

@@ -29,6 +29,7 @@ $fp-4x3-path: "flagpack-dart-sass/flags/4x3/";
 }
 
 @import "./upload_form.css";
+@import "./tinymce_ui_overrides";
 @import "./tomselect.scss";
 
 $list-bg-color: white;

integreat_cms/static/src/css/tinymce_custom_content_styles.css

@@ -0,0 +1,50 @@
+@import "../fonts/open-sans/open-sans.css";
+@import "../fonts/lateef/lateef.css";
+@import "../fonts/noto-sans-sc/noto-sans-sc.css";
+@import "../fonts/noto-sans-ethiopic/noto-sans-ethiopic.css";
+@import "../fonts/noto-sans-georgian/noto-sans-georgian.css";
+@import "./contact_card.css";
+
+/* Enforce expected standard link color,
+   so setting a different color on specific links to communicate changes
+   doesn't backfire in some edge case on some device where the defaults are changed */
+:link { color: #0000EE; }
+:visited { color: #551A8B; }
+:link:active, :visited:active { color: #FF0000; }
+
+
+[translate="no"]:not(.contact-card) {
+    background-color: rgb(239, 68, 68);
+    direction: ltr;
+    display: inline-block;
+    white-space: pre-wrap;
+}
+[contenteditable="false"] a {
+    pointer-events: none;
+}
+.contact-card {
+    cursor: default !important;
+    font-family: "Open Sans" !important;
+    font-size: 1rem !important;
+}
+
+/* Colored border version
+[data-shortcode="page"] {
+    border: .15em solid rgba(0,0,255, 0.5);
+    border-radius: .2em;
+}
+[data-shortcode="page"]:has(.error) {
+    border-color: rgba(255,63,0, 0.5);
+}
+*/
+
+/* Text color version */
+[data-shortcode="page"], [data-shortcode="page"] a {  /* mention the link specifically so it binds stronger than :visited on the initialization */
+    color: #008866;
+}
+[data-shortcode="page"]:has(.error) {
+    color: #CC6600;
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: #CC6600;
+}

integreat_cms/static/src/css/tinymce_ui_overrides.scss

@@ -0,0 +1,8 @@
+.tox label.tox-label {
+    /* .tox label.tox-label 
+     * is a more specific selector than
+     * .tox .tox-label
+     * and thus takes precedence over the default
+     */
+    white-space: wrap;
+}

integreat_cms/static/src/editor_content.ts

@@ -8,6 +8,7 @@ import "./js/tinymce-plugins/autolink_tel/plugin.js";
 import "./js/tinymce-plugins/custom_link_input/plugin.js";
 import "./js/tinymce-plugins/custom_contact_input/plugin.js";
 import "./js/tinymce-plugins/mediacenter/plugin.js";
+import "./js/tinymce-plugins/shortcodes/plugin.js";
 
 /* Custom tinymce content css */
-import "./css/tinymce_custom.css";
+import "./css/tinymce_custom_content_styles.css";

integreat_cms/static/src/js/forms/tinymce-init.ts

@@ -99,7 +99,7 @@ window.addEventListener("load", () => {
                 },
                 insert: {
                     title: "Insert",
-                    items: "openmediacenter add_link add_contact media | charmap hr",
+                    items: "add_shortcode_page | add_shortcode_contact | openmediacenter add_link add_contact media | charmap hr",
                 },
             },
             link_title: false,
@@ -110,6 +110,7 @@ window.addEventListener("load", () => {
                 mediacenter: tinymceConfig.getAttribute("data-custom-plugins"),
                 custom_link_input: tinymceConfig.getAttribute("data-custom-plugins"),
                 custom_contact_input: tinymceConfig.getAttribute("data-custom-plugins"),
+                shortcodes: tinymceConfig.getAttribute("data-custom-plugins"),
             },
             link_default_protocol: "https",
             link_target_list: false,

integreat_cms/static/src/js/tinymce-plugins/custom_link_input/plugin.js

@@ -1,4 +1,5 @@
 import { getCsrfToken } from "../../utils/csrf-token";
+import { stripProtocol } from "../../utils/url-tools";
 
 (() => {
     const tinymceConfig = document.getElementById("tinymce-config-options");
@@ -47,7 +48,24 @@ import { getCsrfToken } from "../../utils/csrf-token";
     };
 
     tinymce.PluginManager.add("custom_link_input", (editor, _url) => {
-        const isAnchor = (node) => node.nodeName.toLowerCase() === "a" && node.href && node.isContentEditable;
+        const internalPageURLRegex = new RegExp(String.raw`
+            ^[^:/]*://
+            ${stripProtocol(tinymceConfig.getAttribute("data-webapp-url")).replace(/\/$/, "")}
+            (
+                /
+                ([^/]+)
+                /
+                ([^/]{2,8})
+                /
+                (
+                    ([^?#]+)
+                    /
+                )?
+                ([^/?#]+)
+            )
+        `.replace(/\s+/g, ""));
+
+        const isAnchor = (node) => node.nodeName.toLowerCase() === "a" && node.href && node.isContentEditable && !internalPageURLRegex.exec(node.href);
         const getAnchor = () => {
             let node = editor.selection.getNode();
             while (node !== null) {

integreat_cms/static/src/js/tinymce-plugins/shortcodes/contact.ts

@@ -0,0 +1,74 @@
+import { ShortcodeHandle, AcceptArbitraryArguments, PargsDescriptor, KWargsDescriptor } from "./utils";
+import type { ToolbarButtonInstanceApi, ContextFormInstanceApi, ContextFormButtonInstanceApi, ContextFormToggleButtonInstanceApi, DialogInstanceApi, DialogData, MenuItemInstanceApi, DialogSpec, BodyComponentSpec } from "../tinymce.d.ts";
+import { Editor } from "tinymce";
+import TomSelect from "tom-select";
+import { getCsrfToken } from "../../utils/csrf-token";
+import { stripProtocol } from "../../utils/url-tools";
+import { evaluateOnceDecorator } from "../../utils/caching-functions";
+
+class ContactHandle extends ShortcodeHandle {
+	keyword = "contact";
+	addIcon = "contact";
+	editIcon = "contact";
+	removeIcon = "remove";
+
+	pargs: PargsDescriptor = [
+		[["Contact ID", "The ID of the Contact whose details should be displayed"]],
+		[
+			["address", "Whether the address should be shown and other, not explicitly wanted details should be hidden"],
+			["email", "Whether the email should be shown and other, not explicitly wanted details should be hidden"],
+			["phone_number", "Whether the phone number should be shown and other, not explicitly wanted details should be hidden"],
+			["mobile_phone_number", "Whether the mobile phone number should be shown and other, not explicitly wanted details should be hidden"],
+			["website", "Whether the website should be shown and other, not explicitly wanted details should be hidden"],
+		],
+	];
+	kwargs: KWargsDescriptor = [];
+
+	domainAndPrefix: () => string = evaluateOnceDecorator(() => stripProtocol(this.tinymceConfig.getAttribute("data-webapp-url")));
+	// Regular expression to check íf a link could be a page
+	// Capture groups: Path, Region slug, language slug, page infix, page slug
+	internalPageURLRegex: () => RegExp = evaluateOnceDecorator(() => new RegExp(String.raw`
+		^[^:/]*://
+		${this.domainAndPrefix().replace(/\/$/, "")}
+		(
+			/
+			([^/]+)
+			/
+			([^/]{2,8})
+			/
+			(
+				([^?#]+)
+				/
+			)?
+			([^/?#]+)
+		)
+	`.replace(/\s+/g, "")));
+
+	//contactCache: ContactCache = null;
+
+	predicate(node: Element): boolean {
+		// We also consider old contact cards as instances of the contact shortcode.
+		// This way shortcodes will work on the old contact cards and we will naturally slowly convert content from the old style directly embedded HTML.
+		if ("contactId" in (node as HTMLElement).dataset) {
+			return true;
+		}
+		return super.predicate(node);
+	}
+
+	setup(editor: Editor): boolean {
+		super.setup(editor);
+
+		this.addText = this.tinymceConfig.getAttribute("data-contact-menu-text");
+		this.editText = this.tinymceConfig.getAttribute("data-contact-change-text");
+		this.removeText = this.tinymceConfig.getAttribute("data-contact-remove-text");
+
+		const isContactsEnabled = this.tinymceConfig.getAttribute("data-contact-module-activated") !== "False";
+		if (!isContactsEnabled) {
+			return false;
+		}
+		return true;
+	}
+}
+
+
+export default ContactHandle;