Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Call link/image plugins on the correct tiny6 instance #1352

Merged
merged 2 commits into from
Oct 31, 2023
Merged

Call link/image plugins on the correct tiny6 instance #1352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9228721
fix(pat tinymce): call link/image plugins on the correct tiny instance.
petschki Oct 30, 2023
f8aad79
fix missing import
petschki Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions src/pat/tinymce/js/links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Base from "@patternslib/patternslib/src/core/base";
import events from "@patternslib/patternslib/src/core/events";
import registry from "@patternslib/patternslib/src/core/registry";

import tinymce from "tinymce/tinymce";
import LinkTemplate from "../templates/link.xml";
import ImageTemplate from "../templates/image.xml";
import RelatedItems from "../../relateditems/relateditems";
Expand Down Expand Up @@ -343,6 +344,71 @@ var AnchorLink = LinkType.extend({
},
});

const add_image = (editor) => {
var pattern_inst = document.getElementById(editor.id)["pattern-tinymce"].instance;
pattern_inst.addImageClicked();
}

const add_link = (editor) => {
var pattern_inst = document.getElementById(editor.id)["pattern-tinymce"].instance;
pattern_inst.addLinkClicked();
}

// image plugin
// eslint-disable-next-line no-unused-vars
tinymce.PluginManager.add("ploneimage", (editor, url) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like that these plugins are added globally to the imported tinymce module.
But as long as it works this code is OK to me.

Copy link
Member Author

@petschki petschki Oct 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is in fact a restore of the original plugin registration from the 5.1.x branch here: https://github.com/plone/mockup/blob/5.1.x/src/pat/tinymce/js/links.js#L347 ... due to the fact, that in Tiny6 you cannot inject custom methods on initialization anymore, I changed the onAction caller to simply fetch the instantinated tinypattern from the DOM and call its add(Link|Image)Clicked method.

There might be a more "tinyish" way to use the new EditorOptions API and register a custom callable object for this (see https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.editoroptions/) but I thought its also feasible to use patternslib API for now.

editor.ui.registry.addButton("ploneimage", {
icon: "image",
text: "Insert image",
tooltip: "Insert/edit image",
onAction: () => {
add_image(editor);
},
// stateSelector: "img:not([data-mce-object])",
});
editor.ui.registry.addMenuItem("ploneimage", {
icon: "image",
text: "Insert image",
onAction: () => {
add_image(editor);
},
// stateSelector: "img:not([data-mce-object])",
});
});

// link plugin
// eslint-disable-next-line no-unused-vars
tinymce.PluginManager.add("plonelink", function (editor, url) {
editor.ui.registry.addButton("plonelink", {
icon: "link",
tooltip: "Insert/edit link",
shortcut: "Ctrl+K",
onAction: () => {
add_link(editor);
},
stateSelector: "a[href]",
});
editor.ui.registry.addMenuItem("plonelink", {
icon: "link",
text: "Insert link",
shortcut: "Ctrl+K",
onAction: () => {
add_link(editor);
},
stateSelector: "a[href]",
});

editor.ui.registry.addButton("unlink", {
icon: "unlink",
tooltip: "Remove link",
// eslint-disable-next-line no-unused-vars
onAction: (api) => {
editor.execCommand("unlink");
},
stateSelector: "a[href]",
});
});

export default Base.extend({
name: "linkmodal",
trigger: ".pat-linkmodal",
Expand Down
59 changes: 0 additions & 59 deletions src/pat/tinymce/tinymce--implementation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,65 +198,6 @@ export default class TinyMCE {
// do not show the "upgrade" button for plugins
tinyOptions.promotion = false;

// image plugin
// eslint-disable-next-line no-unused-vars
tinymce.PluginManager.add("ploneimage", (editor, url) => {
editor.ui.registry.addButton("ploneimage", {
icon: "image",
text: "Insert image",
tooltip: "Insert/edit image",
// eslint-disable-next-line no-unused-vars
onAction: (api) => {
self.addImageClicked();
},
// stateSelector: "img:not([data-mce-object])",
});
editor.ui.registry.addMenuItem("ploneimage", {
icon: "image",
text: "Insert image",
// eslint-disable-next-line no-unused-vars
onAction: (api) => {
self.addImageClicked();
},
// stateSelector: "img:not([data-mce-object])",
});
});

// link plugin
// eslint-disable-next-line no-unused-vars
tinymce.PluginManager.add("plonelink", function (editor, url) {
editor.ui.registry.addButton("plonelink", {
icon: "link",
tooltip: "Insert/edit link",
shortcut: "Ctrl+K",
// eslint-disable-next-line no-unused-vars
onAction: (api) => {
self.addLinkClicked();
},
stateSelector: "a[href]",
});
editor.ui.registry.addMenuItem("plonelink", {
icon: "link",
text: "Insert link",
shortcut: "Ctrl+K",
// eslint-disable-next-line no-unused-vars
onAction: (api) => {
self.addLinkClicked();
},
stateSelector: "a[href]",
});

editor.ui.registry.addButton("unlink", {
icon: "unlink",
tooltip: "Remove link",
// eslint-disable-next-line no-unused-vars
onAction: (api) => {
editor.execCommand("unlink");
},
stateSelector: "a[href]",
});
});

tinyOptions.init_instance_callback = function (editor) {
if (self.tiny === undefined || self.tiny === null) {
self.tiny = editor;
Expand Down