ProcessMention: "Forum Mentions" style page link autocomplete for CKEditor

[BitPoet]

Since I was stuck to my flat today I took up a wish and rolled a Process module / CKEditor plugin combo that adds @-autocomplete like the mentions here in the forum to CKEditor fields. It's configurable, but only in module settings for now, the positioning of the select list is quite off and there's still some visual work to be done, so it is in early alpha state.

Nonetheless, if you want to take a look, here it is:
https://github.com/BitPoet/ProcessMention

 

After installation, you may want to look into the "Additional selector" entry in the module's settings. You will most likely want to limit results to certain templates there.

 

Edit: Updated to version 0.0.30 with fixed positioning of the dropdown.
Edit2: Settings are configurable in field context now. If pwmentions is enabled, the according settings are shown on the "Input" tab.

 

[Macrura]

very cool, this will be very useful!

[LAPS]

@BitPoet,

thank you for your effort. 

I tried your ProcessMention module, and it does not work (see below). However, ...

... I could suggest:

• In the README.md file > Installation, you can add the step "Copy ProcessMention.css and ProcessMention.module from the module folder to the site/modules/InputfieldCKEditor directory.

... I have to say:

• Rather than querying the server every time via Ajax to get mentions, you could cache the mentions client-side (in a hidden HTML element, local storage or JS config) - credit
• Of course, the output  (e.g. fix positioning of selection list in plugin.js) is important.

Regarding my issue with the ProcessMention module, when I type the e.g. @Sca text then the Ajax-HTTP request is fired but I get the following Network Headers:

Note: In the image, the gray-covered areas are the path to access the admin of my PW installation.

P.S.: I read the code and I would help someway, but I have to learn a little more about github and the languages. 

 

[BitPoet]

@LAPS: thanks for the feedback. I'm not sure how the redirect comes to be and need to ponder that and perhaps run some more tests. What PW version are you on? Do you have languages active?

The positioning issue has meanwhile been fixed.

6 hours ago, LAPS said:

In the README.md file > Installation, you can add the step "Copy ProcessMention.css and ProcessMention.module from the module folder to the site/modules/InputfieldCKEditor directory.

This isn't necessary. The .module and .css file are fine in their own module directory underneath site/modules (and keeping two copies under site/modules is like to lead to trouble). It's just the plugin.js that needs to go into the InputfieldCKEditor/plugins/pwmentions path so both the editor and PW can pick it up.

I'm not sure client side caching is much of an issue, as every keystroke will change the result list and the unfiltered list might be far too long to download. I usually only do that with decent sized lists when I perform client-side filtering.

[BitPoet]

Update: settings can now be changed on per-field basis on the fields' "Input" tab. Latest version is on github.

[fbg13]

@BitPoet The module doesn't remove the mention page on uninstall, it's not found because it's hidden.

If you create it in the getModuleInfo method it will be removed by PW on uninstall.

public static function getModuleInfo() {
	return array(
		...
		"page" => [
			"name" => "mention",
			"title" => "Mention",
			"status" => "hidden"
		]
	);
}

 

[BitPoet]

@fbg13: Good point, thanks. I have incorporated that. Makes the code a lot shorter too

[LAPS]

On 22/01/2018 at 6:28 AM, BitPoet said:

I'm not sure how the redirect comes to be and need to ponder that and perhaps run some more tests. What PW version are you on? Do you have languages active?

I am using ProcessWire 3.0.62 and I do not have languages active.

I installed the latest version of ProcessMention, but I continue to get the '301 Moved Permanently' from http://localhost:8888/ADMIN-PATH/mention.

However, if I use http://127.0.0.1:8888/ADMIN-PATH/mention, it seems to work a little more: I get a 200 OK response but the "list of mentions" is not populated because the response code is an entire HTML page (including css, js, etc.).

[BitPoet]

@LAPS: I just tested it with a stock 3.0.62 (basic profile) in different browsers and the module works there, so it's likely some leftover / failed cleanup from an older install. Can you uninstall the module in the backend and make sure that you don't have any pages named "mention" in the page tree under Admin? If yes, just delete it manually. Also, please check that you don't have an older module version lying around in the InputfieldCKEditor directory.

Then, best download the very latest version (0.0.70) from the github repo  and install that. Don't forget to copy plugins.js into the correct path, and best clear your browser cache. After installing the module, you should see a page titled "Mention Autocomplete" in the page tree under Admin.

[LAPS]

@BitPoet, now it works but only when using http://127.0.0.1:8888, not http://localhost:8888/.

[BitPoet]

Glad to hear  Then all that's left is a webserver or hostname lookup configuration issue. Probably related to IPv6. Disabling IPv6 in the web server may be enough to fix this.

[HerTha]

Installed the module and works out-of-the-box. Thank you very much for providing it!

In my application I use a custom URL field named "link". So I replaced "url" with "link" in the module settings, i.e. in "Returned fields" and "Result template" and "Link template".

Now, the url/link part is not inserted correctly, this is the resulting source:

<a data-pageid="10666" href="[object Object]">@abcde</a></p>

Could you look into this, if time permits? TIA!

[BitPoet]

On 5/3/2020 at 12:47 PM, HerTha said:

Installed the module and works out-of-the-box. Thank you very much for providing it!

In my application I use a custom URL field named "link". So I replaced "url" with "link" in the module settings, i.e. in "Returned fields" and "Result template" and "Link template".

Now, the url/link part is not inserted correctly, this is the resulting source:

<a data-pageid="10666" href="[object Object]">@abcde</a></p>

Could you look into this, if time permits? TIA!

Hi HerTha, sorry I couldn't respond sooner. This looks like the "link" field is a page field, am I right there? In that case, it doesn't work right now as you'd need something like "link->url" in the mention columns, which isn't supported yet. Only direct properties of the found pages can be used. I'm going to meditate on it, but I can't promise a quick solution.

[HerTha]

Thanks for looking into this!

"link" is a VerifiedURL (pro) field, actually.

In a template context

 echo $item->link

just outputs the URL like any other text field.

[bernhard]

If anybody else is looking for something like this: There's now a successor to this module on github:

https://github.com/BitPoet/ProcessCKInlineComplete