Small Fixes

docs/guides/component-examples/dynamic-cards.md

@@ -13,14 +13,14 @@ Here are some things you should know before you can get started with this guide.
  * Working with Dynamic Labels, Buttons, and Images
 
 !!! caution
-		This is guide covers advanced topics like dynamic components and web APIs. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here.
+    This is guide covers advanced topics like dynamic components and web APIs. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here.
 
 ## First steps
 
 We will be using the [News API](https://newsapi.org/){:target="_blank"} to fetch the trending headlines. Head over to [https://newsapi.org/](https://newsapi.org/){:target="_blank"}> to get an API key.
 
 !!! warning
-		You will not be able to monetize apps which use the [News API](https://newsapi.org/){:target="_blank"}. To place ads in apps that use this API, you will have to switch to their paid plan first. More information is available [here](https://newsapi.org/pricing){:target="_blank"}
+    You will not be able to monetize apps which use the [News API](https://newsapi.org/){:target="_blank"}. To place ads in apps that use this API, you will have to switch to their paid plan first. More information is available [here](https://newsapi.org/pricing){:target="_blank"}
 
 The API endpoint we'll be using in this guide is `https://newsapi.org/v2/top-headlines?language=en&apiKey={YOUR_API_KEY}`
 
@@ -84,7 +84,7 @@ Next, we create another procedure which takes the JSON object and the array inde
 ![](/assets/images/guides/dynamic-cards/f_create-card.png)
 
 !!! tip
-		It is recommended you place blocks in procedures so that they are more readable and can be used several times.
+    It is recommended you place blocks in procedures so that they are more readable and can be used several times.
 
 For each news article, we first create a card view that holds all the content we wish to show. Use the `Create Card View` block inside the procedure to make a dynamic card for each article. Each card will be 90% of the screen's width and will have automatic height so that it can resize according to the content inside.
 
@@ -99,7 +99,7 @@ Using the `Dynamic Label` component, we create dynamic labels for each card whic
 ![](/assets/images/guides/dynamic-cards/m_create-dynamic-label.png)
 
 !!! tip
-		It is recommended you set the `html` parameter to `False` when getting data from external sources. Unchecked HTML can be used to perform unauthorized actions in your app.
+    It is recommended you set the `html` parameter to `False` when getting data from external sources. Unchecked HTML can be used to perform unauthorized actions in your app.
 
 We use the `Dynamic Label` component one more time to create a label for the description. We set the id to a value that we are certain hasn't been used yet. If you are showing the top 200 news articles, then you might want to start your id's from 1000 (or a similarly appropriate number).
 

docs/guides/component-examples/firebase-rules.md

@@ -23,13 +23,13 @@ Testing your app is easy when you have full access to your database. To enable r
 ```
 
 !!! info
-		All your rules should be wrapped inside the `"rules"` tag. Read rules are always set using the `".read"` tag, and write with `".write"`.
-		
+    All your rules should be wrapped inside the `"rules"` tag. Read rules are always set using the `".read"` tag, and write with `".write"`.
+
 The JSON code above specifies two rules for your entire database. Each rule can be thought of as a condition that has to return `true` if the operation is to succeed. In the case above, both `.read` and `.write` always return `true`, meaning no checks are required before accessing your database.
 
 !!! warning
-		**Never** set read and write to `true` in a production environment. Your database can be hacked easily and worse, can be wiped clean by unauthorized users.
-		
+    **Never** set read and write to `true` in a production environment. Your database can be hacked easily and worse, can be wiped clean by unauthorized users.
+
 ### Authenticated-only mode
 
 You can enable only authenticated users to read and write tags in your database. Users can be authenticated using the [Firebase Authentication](https://docs.kodular.io/components/google/firebase-authentication/){:target = "_blank"} component. 
@@ -48,8 +48,8 @@ The uid of a user can be accessed from the `user ID` variable in the [Login Succ
 
 
 !!! caution
-		These rules are barely more secure than the [testing mode](#testing-mode) rules. Note that your users can still access **all** tags and values (including other users' personal data), and can still potentially clear your entire database.
-		
+    These rules are barely more secure than the [testing mode](#testing-mode) rules. Note that your users can still access **all** tags and values (including other users' personal data), and can still potentially clear your entire database.
+
 ### Uid-Tag mode
 
 You can also write rules to restrict read and write access to specific tags. With such rules, you can ensure that the user can edit only the data which they have created.
@@ -171,8 +171,8 @@ Write your rules such that your users can access only that data which they can v
 Set all rules to `false` in a development environment where you would not want anyone to edit your database. It is also suggested you lock your database if your product is shutting down.
 
 !!! note
-		You will still be able to access and edit your database either from your Firebase console or from the command-line interface (CLI).
-		
+    You will still be able to access and edit your database either from your Firebase console or from the command-line interface (CLI).
+
 ## Conclusion
 
 Firebase Rules are great for securing your database and channeling users to the right tags and values. With the right set of rules, your database will be practically unhackable!

docs/guides/component-examples/remote-config.md

@@ -23,7 +23,7 @@ Here are some things you should know before you can get started with this guide.
  * Working with the Tab Layout and Bottom Navigation components
 
 !!! caution
-		This is guide covers advanced topics like Firebase, staged rollouts, and generic blocks. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here.
+    This is guide covers advanced topics like Firebase, staged rollouts, and generic blocks. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here.
 
 ## First steps
 
@@ -47,7 +47,7 @@ Add a condition
 {: .img-caption}
 
 !!! tip
-		It is possible to chain several constraints in a single condition using the "and" button.
+    It is possible to chain several constraints in a single condition using the "and" button.
 
 Your `parameter` can now have two `value`s: one for those in the `random_testers_group`, and another for everybody else. Set the `value` to "true" for the testers, and "false" for others.
 
@@ -64,7 +64,7 @@ Publish your changes
 {: .img-caption}
 
 !!! warning
-		Publishing your changes will make them live to all your users. Make sure you check everything twice before publishing!
+    Publishing your changes will make them live to all your users. Make sure you check everything twice before publishing!
 
 That's it for the Firebase part. Now let's move to building your app.
 
@@ -77,7 +77,7 @@ Give each `Vertical Arrangement` a distinct background color, and set their heig
 Finally, set the `Visible` property of the `Bottom Navigation` component to `False`. By default, users will navigate your app using the tab layout. We change this behavior for the random testers group from the Blocks Editor.
 
 !!! warning
-		You will have to upload the `google-services.json` file to Assets to be able to export your app. This file can be obtained from your Firebase Console.
+    You will have to upload the `google-services.json` file to Assets to be able to export your app. This file can be obtained from your Firebase Console.
 
 This is what your designer should look like
 
@@ -102,7 +102,7 @@ We do the same for the `Bottom Navigation` component: first add the menu items (
 ![](/assets/images/guides/remote-config/m_add-item.png)
 
 !!! info
-		The icon assets for the navigation items are provided in the AIA in the [Downloads](#downloads) section.
+    The icon assets for the navigation items are provided in the AIA in the [Downloads](#downloads) section.
 
 We can use the same prodcedure we made for the `Tab Layout`.
 
@@ -122,7 +122,7 @@ If the value is `True`, we show the `Bottom Navigation` instead of the `Tab Layo
 ![](/assets/images/guides/remote-config/e_fetch-success.png)
 
 !!! note
-		Updates to parameters can take a few hours to update across all devices, so don't be alarmed if you don't see all changes immediately.
+    Updates to parameters can take a few hours to update across all devices, so don't be alarmed if you don't see all changes immediately.
 
 ## Conclusion
 

docs/guides/component-examples/securing-app.md

@@ -13,7 +13,7 @@ Here are some things you should know before you can get started with this guide.
  * Working with Firebase Rules
 
 !!! caution
-		This is guide covers advanced Firebase topics. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here.
+    This is guide covers advanced Firebase topics. For sake of keeping this guide at a readable length, some basic instructions will be glossed over with the assumption that you are aware of the workings of other components. If not, please take a look at more basic guides before getting started here.
 
 Take a look at our guide on [working with Firebase Rules](/guides/component-examples/firebase-rules) for an introduction to the rules system.
 
@@ -62,14 +62,14 @@ Then, add a `Notifier` component and rename it to `MessageNotifier`. We will use
 Finally, drop the `Firebase Database`, `Firebase Authentication`, and `Device Utilities` components. The `Device Utilities` component will be used to fetch the Android version of the user's device.
 
 !!! warning
-		You will have to upload the `google-services.json` file to Assets to be able to export your app. This file can be obtained from your Firebase Console.
+    You will have to upload the `google-services.json` file to Assets to be able to export your app. This file can be obtained from your Firebase Console.
 
 This is what your designer should look like
 
 ![](/assets/images/guides/firebase-rules/d_preview.png)
 
 !!! tip
-		The components shown above have been styled with colors and borders to make them look better. Download AIA from the bottom of the page to use them in your app!
+    The components shown above have been styled with colors and borders to make them look better. Download AIA from the bottom of the page to use them in your app!
 
 ## Coding the blocks
 
@@ -89,7 +89,7 @@ Next, we handle clicks on the `UpdateDetailsButton`. When the button is clicked,
 ![](/assets/images/guides/firebase-rules/e_current-user-success.png)
 
 !!! note
-		As of now, a user can fetch the list of all uids and update the details of any other user. We will be writing Firebase rules later to ensure the data a user can edit is limited to their uid.
+    As of now, a user can fetch the list of all uids and update the details of any other user. We will be writing Firebase rules later to ensure the data a user can edit is limited to their uid.
 
 Finally, we code the recursive function to get the names of all the users. Note that we cannot use the `Get Tag List` block as the rules we will be writing will block direct access to these tags.
 

docs/guides/component-examples/targeted-notifications.md

@@ -10,7 +10,7 @@ Here are some things you should know before you can get started with this guide.
  * Setting up OneSignal in your app
 
 !!! info
-		Take a look at our Community-made guide on setting up Push Notifications for your app [here](https://community.kodular.io/t/how-to-send-notifications-using-push-notification-component/180){:target = "_blank"}.
+    Take a look at our Community-made guide on setting up Push Notifications for your app [here](https://community.kodular.io/t/how-to-send-notifications-using-push-notification-component/180){:target = "_blank"}.
 
 ## First steps
 

docs/guides/extensions/create-extensions.md

@@ -76,7 +76,37 @@
 
 ## Step 5: Building an Extension
 
-<script src="https://gist.github.com/pavi2410/c58954d86e8510e7300b1253c5ecca4a.js"></script>
+```java
+package io.kodular; // package of the extension will be "com.kodular.SimpleMaths"
+
+// Only these imports are required to interact with Kodular
+import com.google.appinventor.components.annotations.*;
+import com.google.appinventor.components.runtime.*;
+import com.google.appinventor.components.common.*;
+
+@DesignerComponent(version = 1, // Update version here, You must do for each new release to upgrade your extension
+                   description = "Simple Maths extension created by you",
+                   category = ComponentCategory.EXTENSION,
+                   nonVisible = true,
+                   iconName = "images/extension.png") // Change your extension's icon from here; can be a direct url
+@SimpleObject(external = true)
+public class SimpleMaths extends AndroidNonvisibleComponent {
+
+    public SimpleMaths(ComponentContainer container) {
+        super(container.$form());
+    }
+
+    @SimpleFunction(description = "Simple addition of two numbers")
+    public int Add(int a, int b) {
+        return a + b;
+    }
+
+    @SimpleFunction(description = "Simple subtraction of two numbers")
+    public int Subtract(int a, int b) {
+        return a - b;
+    }
+}
+```
 
 * Save the above code to `appinventor-sources/appinventor/components/src/io/kodular/`as `SimpleMaths.java`
 * Go back to the `appinventor` folder.

docs/guides/extensions/kodular-methods.md

@@ -10,7 +10,33 @@ name of apps.
 
 ## Installation
 
-<script src="https://gist.github.com/barreeeiroo/4fb8e76b525952c6b4695bd8ba774170.js"></script>
+```java
+import android.view.ViewTreeObserver.OnGlobalLayoutListener;
+import com.google.appinventor.components.annotations.SimpleObject;
+
+@SimpleObject
+public class Form
+  extends AppCompatActivity
+  implements Component, ComponentContainer, HandlesEventDispatching, OnGlobalLayoutListener
+{
+
+  public String getKodularPackageName() {
+    return null;
+  }
+
+  public boolean isCustomPackage() {
+    return false;
+  }
+
+  public String getInstalledFrom() {
+    return null;
+  }
+
+  public boolean isInstalledThruStore() {
+    return false;
+  }
+}
+```
 
 Modify your standard `Form.java` and include the methods above. Even though they look like static returns, they will
 properly work in Kodular. You just need to declare them like that, so Java compiler understands that such methods

docs/guides/keyboard-shortcuts.md

@@ -2,28 +2,30 @@
 
 To make frequently used actions more accessible, we provide you with these keyboard shortcuts. The same can accessed from `Help` > `Show keyboard shortcuts` in the Creator.
 
-Action | Combination
---- | ---
-Create new project | `Alt` + `Shift` + `N`
-Import project (.aia) | `Alt` + `Shift` + `I`
-Rename project | `Alt` + `R`
-Delete project | `Alt` + `Shift` + `X`
-Add new screen | `Alt` + `N`
-Import screen (.ais) | `Alt` + `I`
-Copy screen | `Alt` + `C`
-Delete screen | `Alt` + `X`
-Switch to Designer | `Alt` + `D`
-Switch to Blocks Editor | `Alt` + `B`
-Open Assets Manager | `Alt` + `A`
-Open projects dashboard | `Alt` + `O`
-Export app as APK | `Alt` + `E`
-Export app as AAB | `Alt` + `Shift` + `E`
-Cut component | `Ctrl` + `X`
-Copy component | `Ctrl` + `C`
-Duplicate component | `Ctrl` + `D`
-Paste component | `Ctrl` + `V`
-Paste component properties | `Ctrl` + `Shift` + `V`
-Delete component | `Del` / `Backspace`
-Navigate components | `↑` / `↓`
-Toggle palette search bar | `Ctrl` + `\`
-Open this dialog | `Ctrl` + `?`
+| Action                     | Combination            |
+|----------------------------|------------------------|
+| Create new project         | `Alt` + `Shift` + `N`  |
+| Import project (.aia)      | `Alt` + `Shift` + `I`  |
+| Rename project             | `Alt` + `R`            |
+| Delete project             | `Alt` + `Shift` + `X`  |
+| Add new screen             | `Alt` + `N`            |
+| Import screen (.ais)       | `Alt` + `I`            |
+| Copy screen                | `Alt` + `C`            |
+| Delete screen              | `Alt` + `X`            |
+| Switch to Designer         | `Alt` + `D`            |
+| Switch to Blocks Editor    | `Alt` + `B`            |
+| Open Assets Manager        | `Alt` + `A`            |
+| Open projects dashboard    | `Alt` + `O`            |
+| Export app as APK          | `Alt` + `E`            |
+| Export app as AAB          | `Alt` + `Shift` + `E`  |
+| Cut component              | `Ctrl` + `X`           |
+| Copy component             | `Ctrl` + `C`           |
+| Duplicate component        | `Ctrl` + `D`           |
+| Paste component            | `Ctrl` + `V`           |
+| Paste component properties | `Ctrl` + `Shift` + `V` |
+| Delete component           | `Del` / `Backspace`    |
+| Undo last change           | `Ctrl` + `Z`           |
+| Redo last change           | `Ctrl` + `Y`           |
+| Navigate components        | `↑` / `↓`              |
+| Toggle palette search bar  | `Ctrl` + `\`           |
+| Open this dialog           | `Ctrl` + `?`           |