 All right. Very good morning to all of you. I am really excited as this is my first time as an attendee and as a speaker at bad camp. So I'm really excited about it and a bit nervous. Let's begin with the session. So today we'll be talking about filters and the topic is titled as filters 101 where we are basically going to cover filters API and Drupal. So yeah, let's begin. First of all, let me give you a brief introduction about myself. I am Kunal Kursija. I am based out of Mumbai, India, and I am a Drupal engineer, mostly back end, but I am equipped to work with Drupal front end as well. And I currently work at Agzilarant. If you want to catch up with me, these are my social profiles where you can reach out to me. Twitter handle Drupal and LinkedIn. So yeah, let's start with the session of the day. Before we begin, I would like to say that I only have one screen, so it won't be possible for me to check the chat again. So it will make sense that we'll cover all the questions at the end of the session. So I'll follow that particular pattern. Now, let's start with the session and the very first slide that you see is it's called the filter module. Now Drupal core, it provides a module called as filter, which is enabled out of the box when you install the standard installation profile of Drupal. This module basically allows administrators to manage the text formats. Now, when we say manage the text formats, it basically means that this module will allow the site administrators to create new text formats, edit them, disable them and configure them to any extent that is as per their requirement. And it is really flexible to work with. So yeah, when we say text formats, now we mentioned that we talked about that this module allows to manage management of text formats. Now, when we say text formats, it is a broader concept and it is a whole package in itself. So let's jump into the text formats in our next slide. Text formats, so what are text formats basically? Text formats allow the content editors or the users to format their content in nodes, in comments or in any type of Drupal entities and in the formatted text fields only. And later on, once the content is created, then text formats also help in basically the display aspect of the content. So that is the job of the text formats where if you see the very first screenshot to the left of the screen, this is a formatted text field. And it has some content in it, which says bad camp is the best camp ever. Now it is a text. Just below the text, you can see we have this particular thing which says text format and it is a dropdown. Now this dropdown consists of various text formats that are created on your site. For example, basic HTML, then full HTML, plain text, etc. These are the names of the text formats that I just talked about, what they really are, what are they really composed of and what's present inside them. Those things we are going to cover in the next phase of the session. So, yeah, now this is how the content editors basically format the content. This is how in the next screenshot to the right of the slide. This is basically how the content that you created gets displayed. Now we have this is a screenshot of the node page and this is how the content gets displayed. In the definition that I have written, if you see I have highlighted two important terms over here. The one is content is form, content is created in the formatted text fields. Let's remember the term formatted and another important thing is the term that I have highlighted is hypothetically. Now text formats hypothetically control how the content gets displayed. But inside, I mean, the real story is something else controls this, but something else is actually the part of text format itself. So we'll come back to it in the later part of the session. Moving on, we saw in the previous slides that content editors can create in the formatted text fields. And now when we say formatted text fields, what we really mean in Drupal, we have various entities, entity types like node is in one, then we have comments, then we have users. And all these entities allows end users or the site administrators or site administrators to basically add various different types of fields in the entities. For example, let's say I have an entity and I want to add a date field to it. I want to add an email field, a Boolean, the text field, etc. So there are various types of fields that you can add to your entities. But the text formats that are present in the Drupal will not be available to you or will available to your users or your content editors across all the field types. All the text formats are available to users only in the three highlighted field types that I have shown in the very first screenshot. If you see text formatted, text formatted long, then text formatted long and summary. Only fields of these types will have the text format functionality available to them. For example, in the second screenshot, I have taken this screenshot from a node creation page where there is a plain text field and there is a formatted text field. If you see the difference between two, the plain text field does not have any sort of text formatting feature available to it. Whereas the text area or the formatted text field, it has the text format feature available to it. So that's what we meant in the previous slide when we said that text format functionality is available only for formatted text fields. Let's move on. Available text formats. Now, when you install Drupal with the standard installation profile, Drupal out of the box creates four text formats for you. These are the four. The first one is basic HTML, then we have restricted HTML, followed by full and plain text. These text formats are available to the formatted text fields. The important thing to know over here is this particular UI that you are able to see in the screenshot. It is provided to the end users by the core filter module that we earlier saw in the very first slide of this session. So all this functionality, the text format management, it is provided to you by the core filter module. You can see we have various links like add text format, then you have the options to configure, disable, etc. All the basically the options to play around with your text formats. Then we have ordering of the text formats as well. Now, in certain cases, there could be requirement like on a content, you might have a text format field, the text formatted text field, which will list certain text formats. And let's say the business wants you to show the text formats drop down options in a certain order. So that particular ordering is also controlled from this particular UI. Things might be getting a bit confusing with respect to the options that I just explained, but it will start making sense when we get into the demo at the later stage. So this was about the available text formats. Moving on, Anatomy of text formats. Now, what the text formats are actually made of this screenshot that I have taken it is from the UI there. When you click on add text format from the text formats management screen, you land into this screen. You can mention your text format name. Then you can select the roles which roles these roles will be basically associated with the users. So users having these particular your selected roles in this particular section will be able to access to the text format. So that's what the roles are important for. Then you have the option called as text editor. Now, this particular option or the drop down list over here, it is provided to you by the core editor module. Now, which basically allows you to integrate the third party text editors like CK editor is the one then you have tiny mce etc to integrate with your text format. So this is the option for that. Coming to the most important topic or the section of the text formats, it is called as filters, the enabled filters basically. Please give me a moment. So yeah, so these are the filters that are available in the text formats. And I think it will be I'll be able to do more justice to this in the later aspect. So let's get into the filters right away. So filters, what are filters filters are basically the hidden gems that are present inside your text formats. And they actually they really control how the field content on the sides get displayed. Now, if you remember in the second slide, when we mentioned, I asked I told you that do remember that X format does not directly control how the user. Submitted content is displayed on the site or the field content is displayed on the site. So this was the reason I had mentioned hypothetically word in that slide. So the displaying aspect is actually controlled by filters filters basically process the user submitted input or the field content. And they it applies various logic to your user submitted content. And then after processing it, it displays the content. So filters have various options available to it. Like you can enable various filters in the text format. Then, you know, you can basically control the ordering of the execution order of your filters and the text format itself. Then filters have their own settings or the own configuration on configuration form. It provides various things to it. Which we'll be seeing in the demo. So I think it's time for the demo now where I'll be showing you everything that we have covered so far right right from the text formats. The filters and we'll actually create a custom filter that we and we'll go through it the whole functionality basically. So let me come out of the presentation. I'll first of all show you the site that I have created. Now, this is a Drupal 9 instance that I have created today. Let me show you the basic architecture of it that will be important for the demo. So I have created a content type today. It is called as how to and I have added certain fields to it. So I'll click on manage fields. So in the managed fields content type, I have added three text formatted fields. Namely about field, description field and the tips field. After the content type, I have also created a custom module today which will basically create a custom filter plugin for us. The module is called as filters 101. I'll right away enable this particular module. Let's install it. All right. So our module is installed. Now let's start with by going to the configuration page. I'll click on configuration link from the stop toolbar. Now the configuration page has a important link that we saw in the presentation. It says text formats and editors. Let's click on it. Now this is the area or the UI where site administrators can basically manage the text formats that are present on your site. They can create their text formats or they can configure it to the extent till they want to. Let me now show you some content that I have created for today. There is only a single node that we'll be concentrating on throughout our demo. I have created a content of type how to cut a kiwi fruit. Sorry, I have created a content of type how to and the node is titled as how to cut a kiwi fruit. It has three fields to it. The first one is about field followed by the description field. The description field basically has an email address followed by the third field which has tips for this particular content. And we have three email addresses in this particular field also. Now I concentrated or I elaborated on the word email address. So today we'll be talking processing the email addresses that are present inside the formatted text fields throughout our demo. If you see the content right now, the email addresses are displayed as plain text. If you see admin address how to dot com, then you have fruits address how to dot com followed by this particular email address. After that in the above field also we have another email address. All these email addresses are displayed as plain text. Let's go to the configuration page again and I'll click on text formats and editors. Let's open the full HTML. Let's click on the configure link. Now in this particular text format, we have the filters available over here. Now these are the filters that we'll be talking about that we'll be going through today. I have created a custom filter. It says convert all email addresses to the mail to links. So I'll click on it. I have enabled or I have selected the checkbox. If you can see at the bottom of your screen, we have two sections which says filter processing order and we have filter settings. Pay attention to what happens when I unselect this. So I unselected this and those particular settings part specially went away. And we also got rid of another option that was present inside filter processing order. I'll click on this again. So this is basically the execution order of your filters. Now inside filter settings, we have an option which says emphasize email address. By default it is selected when we enable the filter. So we basically save it. So we have enabled our custom filter for full HTML. Now let's go to content page and let's see what happens. I'll click on the link. We are on the node page now. If you see this particular email address, it is getting displayed as the plain text as it was getting displayed earlier. So no change over here followed by the rest of the email addresses that we had earlier. Now if you see the plain text just got converted into an mail to link if you inspect this. Let me right click over here. I'll click on inspect and we have our email address. Now the text field, the text, the email text got converted into an anchor link and it points to it will basically convert it converted into a mail to link. And it is also been emphasized by your custom filter. So that is what our custom filter just did. It converted those plain text to the mail to links. Now the question is why only all these are the email addresses present inside the tip section just got converted to the mail to links. To understand that let's go to the edit page of the node. I'll first of all go to the tips section, which is at the bottom of the page. If you see the text format section over here, it says full HTML. So the tip section was formatted as full HTML. Whereas the description field, it was formatted as basic HTML. Now we only enabled our filter for the full HTML. So that is the reason your custom filter processed the field that has that had the text format full HTML in it and it converted the text, the plain text to mail to links. So that is what your custom filter just did. If you go to configuration text format configuration again, I'll open it in a new tab and I'll basically configure the just a moment before we do that. I'll just go to the node view page. And again, I'll go back to the text formats. Let's edit the basic HTML text format now. In this particular filter, we'll follow the same steps. We'll enable the filter and we'll save the configuration. We are done with saving. Now let's go back to the node page. Pay attention to the description field over here. I'll reload this. So the page is getting reloaded and you can see it that your text on the plain text just got converted into a mail to link. So yeah, that's what the text processing of your how the text processing is done in the filters. I think it was just a demo. Now let's just get into the actual code base where we basically see how we have created this particular filter. So I have another editor over here. Inside this repository, I have the web directory. Then we have modules and custom and filters one one. This is our module for the day that we have already enabled on our site. It has a info file which basically define your module. Followed by a read me file. And after that, the main thing over here is we have this particular directory structure. And we are defining a filter over here, a custom filter. Let's see how a custom filter is created to create a custom filter. The very first thing that you have to do is you will have to follow us this particular namespace or your class needs to be present in this particular namespace itself. So Drupal, the global namespace followed by filters one on one, which is our custom module, followed by the keyword plugin, which is present inside the src directory, followed by the keyword filter. Now we have a filter directory as well. And then your custom filter class will live inside this particular directory structure. We have created a class which says mail to and it is extending the filter base class. Now, if you pay attention to the doc, the doc structure for this particular class, you will see that it is an annotated class. The annotation name is at the rate filter. Again, this particular annotation is also provided by the core filter module. So yeah, our filter has the filter annotation basically has the ID of mail to then it has title as convert all email addresses to mail to links. Now this particular text was displayed on the text formats edit page when we enabled our custom filter followed by type. Now there are four types of types available. There are different. I'll basically just quickly show you what those types are. Let's open the filter base class and I'll open the filtering interface. Alright, so filter base class that we have extended in our mail to class that particular class extends the filter interface and it provides all the four types. So there are different. So these different types of these different types have different purpose associated to it. We have used the type markup language because we wanted to convert our plain text to HTML. So that is the reason we got the use this if we let's say if we had to like restrict our HTML, then we had to use like type HTML restrictor. And there are some two more types available as well, which is type transform reversible and type transform irreversible. Let's close this and let's understand what the class body consists of our class has a method called as public function settings form. Now this particular function basically provides that provided the text field the checkbox that we had available on the filters page. And it has a default value of this settings and emphasize mail to. So when when you when we save our filter on that, I mean, or when we enable our filter, the settings associated to with our filter gets saved gets saved in this particular object. So yeah, the default value comes from it. After that, we have a function called as process function. Now this is the most important and the only mostly the only function that you will have to deal with while you're creating your custom filters. This function processes the actual user submitted content or the field content and it returns the result or it returns the result and that particular result is displayed to the end users. So if you see in this particular function, I have called to the preg replace callback. Now what this function is doing is it is searching for patterns in our text. Now this particular pattern basically finds all the email addresses that are present inside your text. And once the email, once the pattern is matched, this particular function gets called the function is called as convert email addresses. And if you can see just below this function, the function is available over here, convert email addresses. And the third parameter to our preg replace callback is the actual text, the actual user submitted text. Now when the text, the email addresses are found in the text convert email addresses gets called and in our convert email addresses function we are basically converting the text to the main two links. And if we have this particular setting enabled on the text format, then we are adding the EM tag or we are basically emphasizing the text. In our case, we have emphasized the email addresses. So that's what these things are actually, this is how basically the text is processed and displayed. Followed by we have another function, it's called as tips. Now tips is basically the, you can say it's a help text that is available to your site editors just below the text formats. I'll quickly show you this. Let's go back to the browser. But before that, see the tip is called as convert email addresses to main two links. Let's see how it is displayed to the end users. I'll click on edit of this particular node. Now we enabled the custom filter for basic HTML as well as full HTML. If you can see the text format over here, it has the help text available to it. Now all these help text or all these bullet points are provided to this particular format by different filters that are available or that are enabled inside basic HTML. The help, the tip, the help text that we have created, it is called as this convert email addresses to main two links. So yeah, this is the help text. Now one thing I would like to tell you over here is if you see full HTML, it does not has any tips associated with it. The reason being, it has the toolbar enabled or it has the CQ editor enabled. So full HTML basically does not display the help text. After that, I think yeah, this is how the custom filter is created. Now, I think that's it from the demo. So we basically saw how Drupal provides the filter module which in turn provides you the text formats where your site administrators or editors can basically manage those particular text formats followed by different filters that are available inside the text formats and then we actually saw the demo or the we saw how filter plugins are, how filter plugins basically work. Now, if you have any questions, please let me know. I'll head over to the chat window. So yeah, any questions please let me know. Yes, the example. So the question is, is your example module available and will you make it available. So yeah, the example module is available. And I'll share the presentation as well as the module to everyone. I'll tweet it out or let me just quickly do it right away. I'll paste the links in the chat itself. So my next slide basically hide this info. I'll copy this. And let me paste it in the chat. So these are the slides and the code repository. I have hosted it on GitHub so you can clone it directly. Yes, I have covered all the bases so I'm glad you liked it. Any more questions, we still have like 13 or 12 more minutes to go. Or if you have, if you, if you did not, since we still have time, if you did not understood any slides or any code base, please let me know, we'll cover it again. I'll try to cover it within few minutes. Oh yeah, I see why it gives you 404. So if you see the link, the word code CODE is appended to the very first link. Let me paste it for you again. I'll copy the slides link. Let's see if this works. Let me try it. All right, it works right now. So any more questions or we are good to conclude. All right. Please don't leave right now. I have some more slides for you. The one was resources itself. We covered it. So it was like, all right. Coming up next after the session, we have four awesome sessions or lined up for you. The very first one is best practices for building multilingual sites in Drupal 8. It will be presented by Mohit followed by we have a classic website blunders by Stephen. After that we have facades in Drupal 8. Supercharged filtering of listings. And the last one in the 10 a.m. slot is new CSS tech tell your designers by Mike. So do attend all these sessions and yeah, I'll be also in there. Thank you everyone for attending this and thank you to all the bad camp organizers. It has been a very good experience speaking and attending this particular event. So thank you very much.