Matt Finger
-
Posts
65 -
Joined
-
Last visited
-
Days Won
3
Content Type
Downloads
Release Notes
IPS4 Guides
IPS4 Developer Documentation
Invision Community Blog
Development Blog
Deprecation Tracker
Providers Directory
Projects
Forums
Events
Store
Gallery
Posts posted by Matt Finger
-
-
6 minutes ago, Jimi Wikman said:
Hmmm...that reminds me, will the new editor have a clear formatting function? I figure that will help with those pesky cut and paste from other tools that add garbage to the text?
Yes, there is a clear formatting button, but more importantly the content is stored according to a predefined schema - this means that there will never be random styles or lines that are unexpected, even after pasting. Though you cannot have "whatever wherever however in the source", this becomes a big advantage for everyday users since the entire content state is achievable through the UI.
-
-
5 hours ago, David N. said:
Is there a way to create HTML anchor links?
Not to contradict Marc, but there will be a global Table of Contents widget for which you can apply anchors to headings and box titles (stay tuned for more page builder updates 🙂)
5 hours ago, David N. said:Will it be possible to create custom HTML buttons the way I currently can, for example like this?
Yes, in fact in a few minutes I was able to create a plugin for KBD elements
We're still getting docs together so please be patient but the development of supported buttons and content types is much more streamlined than in cke4.
-
The issue with a region above and below block nodes is everything would be very spaced out, there isn't really much room between the top of the editor's content and the toolbar. You could say "space it out more", but then you'll either end up with really spaced content or an editor that isn't a wysiwyg. The arrows on the other hand, I'll admit that new users might not immediately recognize what they're for, but when they are in a situation needing a new line it becomes obvious.
Also, you can reposition the buttons on your own site with CSS to create these invisible regions if you really want, but we just found it more clunky than arrows in most cases.
-
9 hours ago, Teddy Rogers said:
I assume there will be no issues with the new Tiptap editor quoting from existing content and tags within the forums?
You assume correctly
9 hours ago, Teddy Rogers said:Regarding "code blocks" and "inline code", what languages will be supported in IC5 and how can we add additional language support? Can we make suggestions now to include for release in IC5?
Pretty much every common modern language is supported in IC5, almost 40 of them in total, though inline code doesn't support language highlighting.
5 hours ago, PoC2 said:Will previous use of CKE spoiler code auto-update on upgrade to expandables or will previous posts remain legacy "spoiler"?
The spoilers will likely be auto-updated in the background after upgrade, however users won't know the difference as they are styled to look identical to expandable boxes. Also, the editor will recognize a spoiler and convert it to an expandable box when you open and edit content. On large sites with millions of posts, a bulk conversion during upgrade would just take way too long.
-
5 hours ago, Jimi Wikman said:
Will we be able to use official extensions, or is the solution too customized so it will not be possible?
The short answer is no, but the full answer is yes (in theory) but you'll have to manually build them and then roll into an IPS Application to make sure the content type is supported on the back end. We'll address extending the editor in depth in a future blog so stay tuned if that's your thing!
- Jimi Wikman and shahed
-
2
-
I can say supporting multiple editor frameworks is not something we're likely to consider. Editors today are not copy/paste bundles, and there is a lot of stuff we built on top of the core frameworks.
Thousands of lines of code which use the Tiptap and Prosemirror APIs would need to be translated, then all the edge cases would need to be sorted out. After migrating from CKEditor4 to CKEditor5, then from CKEditor5 to Tiptap, I can definitively say from experience that is a lot of work, and there are always differences in how features are actually implemented. And that's not even covering extensions which would be a pain to make compatible.
This is why sticking to one editor is the way to go to provide you and all our customers top notch features. We won't lose days, or potentially even weeks, going back and forth to double implement and test features as they come out, and can guarantee things will "work".
As a side note, I actually do remember Lexical from when we initially compared editors. We didn't find it to be a great option because it's very new: they are still only on version 0.15.0.
Also, not too long before Lexical came out, Facebook first created Draft.js, then abandoned it when it was only a couple years old before version 1 ever came out. In fact, I think a lot of the docs that are now available for Lexical didn't even exist 6 months back.
-
8 minutes ago, shahed said:
Is there a way to create button as well? having a button making like Invision 4 in admin panel would be nice.
Yes, we'll do a separate blog post, probably in the Developer Blog, but we created an editor plugin system with the ability to add and position new toolbar buttons.
-
2 hours ago, Dreadknux said:
1. Can we remove certain options from the post editor
We're discussing this internally still but there should be a way to restrict buttons by user and editor location in the final release
2 hours ago, Dreadknux said:2. The boxes are great, but from a design perspective the box header area ("How to write JavaScript", for example) doesn't seem to stand out from the rest of the box content (and the padding seems a bit too much for my liking). Is there a chance of having a box header bgcolor implemented that's maybe a little darker/lighter than the box content background to make it pop?
That would be managed by the theme's CSS. We ended up keeping the background color the same once because a slightly darker/lighter color tended to look off in at least a few box color and dark/light mode combinations
2 hours ago, Dreadknux said:3. Will you be publishing a full FAQ/guide on what kind of markdown code will be supported on this?
Probably not, but only because markdown code itself is not technically supported, rather we've included markdown style shortcuts. For example, if I pasted in "**some bold text**", it won't get converted to bold, it's only going to be converted after being typed out
2 hours ago, Dreadknux said:4. I like the idea that text colours change dynamically with light/dark theme - but is that only relating to the default IC5 theme, or will that also be the case for custom themes as well?
Yes! It uses color-mix and other CSS tricks to consistently adapt to the different theme colors.
-
- Popular Post
- Popular Post
Invision Community 5 has a brand new editing experience powered by a lightweight, fast React text editor built for mobile and modern browsers.
The venerable CKEditor v4 at the core of our current editor is starting to show its age, so we wanted a clean slate with Invision Community v5 with an editor that was optimized for mobile use, easily extensible and had a feature set that would take us into the next era of Invision Community and beyond.
The obvious choice was to consider the latest version of CKEditor, but it didn't fit our needs as it wasn't easily extensible, external plug-ins would no longer be possible, and its large footprint would affect page speed scores and be painful to use with a mobile connection.
After a long search, we settled on Tiptap as the base for our editor. Written in React, loaded in chunks when needed for optimal performance and with many APIs and extensibility options, it was the perfect fit.
Aside from the technical improvements, the editor offers new tools and a great base for writing our own plugins. I'll walk you through the main features throughout this blog. If you want a more technical deep dive, then please see my development blog.
The Toolbar
The toolbar has been redesigned to put the most commonly used styles first, with the least used styles and functions into an ellipses menu. The new paragraph menu contains the header styles, as well as the code block. The plus menu adds lists, boxes and quotes. The benefit of this new compact menu is that it displays just the same on mobile. Currently, there are different editor styles for desktops, tablets and mobiles with some style buttons removed to save space. With Invision Community 5, this is no longer the case. Even the smallest display gets all the functionality.
Emojis & Icons
Emojis have become a great way to embellish writing and express emotion. The new emoji picker has been modernized with larger emojis and tooltips to showcase the emoji shortcodes.
The Icons tab, new for Invision Community 5, allows you to add Font Awesome Icons directly to your content.
Lastly, both the emoji selector and the shortcode suggestion dropdown support arrow-key navigation, so you don't have to move your hands from the keyboard to the mouse.
Content Boxes
The feature I'm personally most excited about is boxes.
The concept started as an abstraction of spoilers because sometimes you just want "a box" - a section that stands out from the rest of the content, something we do manually in our documentation and guides on this site. Each box has a tile and the following options:
- Expandable - You can mark a box as "expandable" which is functionally the same as a spoiler. One improvement is that expandable boxes use native HTML details and summary elements instead of plain Javascript animated divs.
- Colors - You can optionally keep it grey on grey like spoilers, but I think that's so boring! The colors automatically adjust to the theme colors, so it will look great in dark and light mode.
- Float (left/right/none) - You can make the box align to the left or right of other content just like you can for images
- Width - When the box is floated, you can set the width to big, medium or small.
Link Expansion
Invision Community has long expanded some links, such as YouTube, offering more context or even a mini-player where appropriate.
With Invision Community 5, we've added support for embedding dynamic link previews using site metadata. This is a preview of a topic on our forum.
For those unaware, the Open Graph (OG) Protocol is essentially a way webpages can specify a title, image, and description to be dynamically embedded on another platform. This is the underlying technology when you see the link preview in Meta, X, Slack, or iMessage.
Code Blocks and Inline Code
The new editor adds inline, syntax-highlighted code blocks and inline code. Both formats can be applied via the toolbar, or optionally, you can wrap text in a single backtick (`) to convert it to an inline code block or triple backticks (```) to convert it to a code block.
The code blocks also support numerous languages for syntax highlighting, including a new custom highlighter for the Invision HTML Template Syntax (Invision Community theme creators and application developers, you're welcome!)
Semantic Headings and Relative Sizes
Invision Community 5 adds a block selector with headings 1 through 6 in the new editor. It's possibly the most common request I hear so that people can use consistent styling rather than just big bold text in a paragraph tag. Semantic headings are also ideal for SEO and accessibility.
In addition to the block selector, you can create headings with the corresponding markdown shortcut. Consecutive pound signs (#) at the start of a line followed by a space (the number of pounds corresponds to the "level" of the heading). For example ### creates a Heading 3 (<h3/>) creates the heading for you.
Using clear header tags means screen readers and search engines can better understand your content as using absolute font sizes, such as 16px, can make it unclear what type of element is actually being used. Is it a heading or just a paragraph with large bold text?
Furthermore, you may want different sizes depending on the content and device type. Mobile devices may benefit from a large base font size. So we added percent-based font sizes which change the font size based on whatever the default would be for that block.
Further UX Improvements
The new editor in Invision Community 5 has several tangible improvements, including a mobile-first design.
In the current editor, some functionality was hidden behind modals and double clicks, which are either not obvious on mobile devices or not possible at all. The new editor no longer relies on modals and instead uses buttons and dropdown menus that work perfectly with mobile and other touch-based devices.
New Line Arrows
For block content, such as boxes, images and quotes, we've added the ability to create a new line before or after the block with the click of a button. This was an issue of frustration for mobile and touch devices where it was not always clear where the cursor was and a finger is a much less accurate aiming device!
Sticky Toolbar
Anyone who has authored a long piece of content knows the pain of scrolling up and down to get the toolbar in view. To make writing longer content less stressful, we've made the toolbar sticky so that it will always be fixed at the top of the editor after scrolling down.
Markdown Style Shortcuts
One common request is to support markdown in the editor. While we opted not to include full markdown support, the new editor recognizes many markdown-style formatting shortcuts.
Colors
A common challenge with rich text editors on sites with multiple themes is colors often need to consistently look right across all themes. This is even more important with Invision Community 5, as it has a native dark mode feature. For this reason, we opted to offer a reduced set of color options that all adapt dynamically to the theme. I mentioned this about box colors above, but this is also true of the font color. The difference in shade is slight, but it's very noticeable without it. Toggling between light and dark mode will never produce unreadable text.
We can't wait for you to try the new editor; it has already been very popular with our small testing group. Which feature are you most looking forward to trying?
-
My oh my, how exciting
31 minutes ago, Matt said:@Matt Finger is working hard on it as we speak. I don't want to say too much but we did a lot of research and picked the best solution in terms of development, stability and future functionality. More news soon. It's probably one most have never heard of but it is used widely. If anyone is worried about us using Froalo or TinyMCE, don't be. 😅
-
3 hours ago, The Old Man said:
Lovely work as always! Thanks all.
Are classic animated smilies still available for members to use when posting?
If you are referring to the classic and custom emojis, yes they are still supported in the editor
We didn't include them in the Icon Creator however as those images can get quite large and it can make the SVG too large after embedding them.
- SeNioR-, The Old Man and Maxxius
-
1
-
2
-
1 hour ago, Chris59 said:
Was look around more closely . I know it's an early stage but I wonder if there will be a slider for the size of icon . especially when you want to use them as badges for ranks as example 😇
No plans for a size option because the generated icons are in fact dimensionless SVGs, meaning they are rendered at whatever size is specified in your community theme's CSS.
- Marc Stridgen, Matt, shahed and 1 other
-
4
-
Thanks for reporting this issue, we believe it should be resolved now, let us know if you are still having issues.
- David N. and I_cant_Swim_
-
1
-
1
-
On 5/29/2023 at 3:17 PM, sadams101 said:
I was wondering if this is how the events should look after setting them up? For example, here are Google's field names on the left, and on the right my input:
Custom event name = content_area
Parameter = content_area
Operator = equals
Value = Area of the content
So a few notes
- That appears to be the Google Analytics Console, but to setup custom events this would be handled via Tag Manager. Google has some pretty good support articles on the topic; These 2 may be helpful https://support.google.com/analytics/answer/12229021 https://support.google.com/analytics/answer/10075209. You actually don't even need to create the event it's implicit in the GA4 tag.
- Those are all properties, not events. The properties should be available on many different events, so you probably don't want to track them individually.
Hope this helps! We don't want to take an authoritative "right or wrong" stance as the Data Layer integration is designed to be as flexible as possible.
-
49 minutes ago, Clover13 said:
Thanks @Randy Calvert and @Matt Finger
So it sounds like the strongest differentiator is in the listing and landing page, and a large gap between page_view and content_view could indicate visitors simply refreshing/reloading the main landing page for updates but not actually diving into the content (or at least diving into content far less than 1:1). Probably an expected pattern overall, as not ever landing page load will have content every user in that moment wants to or has time to dive into right then and there. But too large of a gap could indicate your site's content isn't appealing to the larger audience enough, thereby not promoting clicking into content to view it deeper.
Hopefully I'm interpreting that correctly based on the implementation. In any event, appreciate the feedback! 👍
Happy to help, and well said! These metrics are for understanding user behavior not a good/bad indicator; like you said this one property can mean many things. While few of the provided properties are actionable on their own, looking at them together should give you a sense of the bigger picture.
-
Yes, page_view is every page while content_view only triggers when viewing a specific content item (e.g. topics, blog entries, etc). The listings and your landing page, however, do not count.
Just due to the nature of site navigation, clicking around several times before finding a piece of content is quite common, so the page_view is usually quite a bit larger than content_view.
Comparing the two can actually be a good metric to observe (especially if you can get the trend over time). It tells you, of your total traffic, who's browsing and who's just reading content.
-
Our May update brings Email Bounce Management to our Invision Community cloud platform. In this blog entry, I'll go over what it is, why it's important, and how you can use it when needed.
What is it?
For those who may not know, an email bounce occurs when an email message is sent and the recipient either doesn't exist (hard bounce) or they have blocked the sender (you!) in a spam complaint (soft bounce).
When an email message bounces we block that address at the cloud level so it cannot receive new messages from any community. This is considered good practice for email service providers, and ensures that we maintain a low bounce rate when sending emails on behalf of all the communities on our platform.
Please note this pertains to the Invision Community Cloud platform email service. If you use SMTP or SendGrid, email bounces are managed externally and may enforce different policies.
What Bounce Management Tools are we providing?
We're giving you the ability to see which members have blocked email addresses, and to unblock emails known to be safe.
Seeing which emails are blocked
In the AdminCP Members table (AdminCP > Members > Members), on cloud you will see a new filter: "Email Undeliverable". These are any member accounts that have emails blocked due to soft or hard bounces.
Additionally, on the front end, if a Member's email is blocked, they will see a warning indicator in the Nav/User Bar prompting them to change their email in their account settings.
Lifting Email Blocks
As stated earlier, when an email is blocked, it is blocked on the cloud platform level. If the block is not locked (which can happen if it's unblocked too many times), you will see a warning the Member's AdminCP Profile page.
Clicking into it you will see an option to unblock.
One final note on the Email Block Policy
If a situation occurs when an email is unblocked and gets blocked again a certain number of times, the block becomes permanent. In these cases, you will be able to see that the email is blocked but there won't be an option to unblock, and the member will have to change their email to resume receiving your Community's messages through us. This ensures that the Invision Community cloud platform retains a good email sending reputation.
Thanks for reading and as always stay tuned to for the latest and greatest upcoming features and insights!
The features discussed in this announcement are not available for Invision Community Classic. Click here to learn more about switching to our platform to get this and other benefits.
- crmarks, David N., Marc Stridgen and 1 other
-
4
-
PWAs was recently added in the last release. Has it changed you started interacting with the site? What are you thinking about next for this front?
Same. I actually read notifications now instead of pretend I didn't see emails
-
On 3/25/2023 at 2:14 AM, LIVIO said:
Hi,
Very good news, thank you.
So, only Youtube currently for live streaming, right ?Vimeo Live not possible (yet) ?
Thanks for the confirmation
Yes, that is correct for now. We're planning support for more streaming platforms (including Vimeo Live) coming up soon.
- David N., everzel and MadGorilla
-
3
-
@Randy Calvert In this first go, the non-admin UI is minimal. It's just the nag Charles showed above, and yeah behind the scenes it will catch any email from being sent to them.
The Admins will be able to filter via the ACP to view all members with blocked emails
Additionally, these block records are saved so no one can use that email in the future (new accounts or existing) while it's blocked.
-
Wow, shout out to Randy for being such an expert enthusiast before we even release! I've said this before but this was lots of work over the past months and I am so excited for everyone to use it and provide valuable feedback to prioritize next features.
-
I am excited to officially announce the first release of Live Topics coming in our April release of Invision Community for selected cloud plans!
Live Topics is a hosted live chat and question-and-answer event that is converted into a forum topic upon completion. It combines the fun and togetherness of a live event with the permanence of a forum topic allowing you to continue the conversation long after the event has ended.
Recap: The first look at Live Topics including a video showing the main features.
I know many of you on our community have already had sneak peeks and have been patiently waiting, so without further ado, let's get into it.
Who is Live Topics for?
Live Topics is a great way to bring people together for a live chat event. We have been using Live Topics for our monthly release chat webinars. In the past we have used Zoom to host the live stream and take some questions. This approach is fine, however once the Zoom finishes, the chat history isn't available on our community. We upload a video for those who missed the event, but it doesn't feel interactive.
Live Topics automatically converts the questions and answers to a regular forum topic which allows the discussion to continue. Furthermore, the questions are separated from the general chat during the event making it easier for hosts to find and answer questions raised during the event.
Live Topics is perfect for anything from product release events to monthly bookclub discussions and everything in between.
How does it work?
Live Topics are live virtual events within a community. The process to creating a live topic is simple:
- Schedule your Live Topic from the ModeratorCP.
- When it's time to start, a host starts the live session. This is the bread and butter of the system; attendees can answer your questions and post chat messages all in realtime.
- All done? End the topic. It will be converted to a regular forum topic for further discussion and reference.
Scheduling and Managing Live Topics
Live topics are managed from the ModeratorCP.
When scheduling a live topic, you can configure the following options:
- Duration - This is the scheduled duration that attendees will see before the event. This sets expectations of time for your community.
- Add To Events - This option creates a new Calendar Event in your Community. This allows the live topic to be searched, viewed, and promoted like other event within your community.
- Live Video URL - This is the url of a YouTube embed. You can also add this after starting the live session. (Support for platforms other than YouTube coming soon 🙂). We stream Zoom straight to a live Youtube video currently.
- Attendees - This option specifies who can attend the live topic. Leaving as "Recommended" allows any registered member to join.
- Staff - The staff are responsible for moderating user generated content as it comes in. The default setting will add all groups that are allowed to moderate live topics. You can adjust this default in the AdminCP.
- Additional Hosts - The hosts have the highest level of permission in the live topic. They create questions, update the video url, and guide the discussion. By scheduling the Live Topic, you are automatically a host but you can add more hands to help. All hosts get a reminder notification close to when the event is due to start.
- Require Approval for question replies/chat messages - During the live session, you will likely want to control the rate of incoming content (especially questions). Chat Message creation can be locked during the live session.
Hosting the Live Topic
To start a live topic, you need to click into it from the ModeratorCP. Alternatively, if it was added to an Event you can click into it from there. Then just click start, it's as simple as that. Your attendees will see a waiting page with a count down.
It is worth mentioning that the live topic cannot
- Run without any hosts in attendance. When hosts abandon a live session, it will automatically end within a few minutes
- Run longer than 6 hours. The aim of Live Topics is to accompany a live event and to be short term compared to regular forum topics. The live session will also end automatically in this case
Once it's started, the UI is divided into have 2 main areas: One for Main Questions and another for Chat. Any video streams you embed are show in the top right and automatically started.
Main Questions (and Replies)
- Main Questions and their replies are what will be preserved when the topic is converted into a forum topic. Only staff can create main questions in order to ensure smooth topic flow.
- For each question, you can also configure if the replies are "locked". A main question can be unlocked, locked to all members, or locked to non-staff. When a question is locked, new replies cannot be created.
Chat Channels
- For each Live Topic, there is a General Chat and a Staff Chat Channel. If a member is non-staff, instead of the Channel selector tabs, they will see only "Chat".
-
When a non-staff attendee creates a chat message, it can be marked as a "question". This lets the host know that the question was intended for others to respond to. Optionally, the host can even convert the message into a question so it's integrated into the standard topic post-conversion
Live Stream Tools
-
Hosts can select a time in the live feed a main question was answered.
- The video embed can also optionally be changed mid session. This is useful if you don't know the live stream URL before hand.
Moderation Tools
- Staff can hide or delete questions, chat messages and replies. The reply and chat feeds can also be set to automatically hide new items on creation.
-
Non-staff attendees can report content. Reports show in the staff chat channel.
- Last but not least, staff members can silence attendees. This takes away their privileges to reply and create chat messages.
The Converted Topic
When the live session completes, our Cloud platform gets to work converting all that data into a regular forum topic. Converted Live Topics feature a questions box which allows you to drill down to specific questions within the topic.
The questions can be browsed individually, or even split into separate topics!
Lastly, new replies come with the option to select an originating question.
That's a wrap (for now)
We look forward to seeing all of you use live topics on your communities. As we've hinted elsewhere there are many more features coming soon, so keep your eyes peeled!
The features discussed in this announcement are not available for Invision Community Classic. Click here to learn more about switching to our platform to get this and other benefits.
- everzel, IPCommerceFan, The Old Man and 2 others
-
5
-
Invision Community 5: The all-new editor
in Invision Community Insider
Posted
That will be possible without source mode using editor content boxes and the new page builder, stay tuned as we are wrapping that up soon; it'd take some custom CSS to get the button and heading exactly the same, but nothing crazy. There will also be custom HTML blocks still so you can use custom HTML in those areas for cases where an editor plugin is overkill.
No, but thanks to the theme magic of relative colors, you shouldn't need to. It will use the same background as the wrapping container.