From 3889b26d6340ceb0b87c6c7168cbe7e3a1b20539 Mon Sep 17 00:00:00 2001 From: vladimirbackendless <115621450+vladimirbackendless@users.noreply.github.com> Date: Fri, 31 Mar 2023 16:35:29 +0300 Subject: [PATCH 1/5] Update README.md --- components/bl-ace-editor-component/README.md | 48 ++++++++++++++------ 1 file changed, 34 insertions(+), 14 deletions(-) diff --git a/components/bl-ace-editor-component/README.md b/components/bl-ace-editor-component/README.md index 27a8bbd94..259a60602 100644 --- a/components/bl-ace-editor-component/README.md +++ b/components/bl-ace-editor-component/README.md @@ -1,33 +1,53 @@ # Ace Editor -Ace Editor is a component of Backendless UI-Builder designer. The Ace Editor component is the high-performance code editor for the web. This component is created using the [react-ace](https://www.npmjs.com/package/react-ace) library. +Ace is the embeddable code editor which supports the syntax highlighting for the following programming languages: Java, JavaScript, TypeScript, Python, JSON, PHP, C, C++, C#, Ruby, HTML, CSS. + +When this component is deployed it can highlight only one programming language that was set by developer in the Logic of the Backendless UI-Builder. Therefore, a user cannot switch to another programming language while using the editor. + +This component is created using the [react-ace](https://www.npmjs.com/package/react-ace) library.
+
+
-
+
p@vAaNtAGbR{Elp(=u=Wp{aG|LN8b0R;1Y;CTN`?>Zzc{
zZSFO0IYj@ZB3=BWt^Ks%L}an_Wu=p+%kz2UvP<>MlweS}wueME-`d1Mt<{*>3MTkq
zps{qoY4=rsqmLmeW@c4=@RY==4@>H~S_V=i4;xoXSCqNJy+q;n&O!B_uE@#4>>Xsq
z_TVyVc8|S^&B3zHIu?pRnfDv!`W_8tH>U~W+z}eHtDOegpR}B)e6N>yjXtD(BD?Y3a#Ymmd97DQs`@LG
zltKEozR^b}FTGrw8oxPY-s}(l02ebSCMbRe2;K2WyQ#GOZF
f_L-AS-!ud7ipFcB#S6>HCEIniNZz)^nM@OdJ*Tv=et)q(GZUr;+%hi&
z|E7dl-H@HgJl67&qv^`d35vom&bc=2$+ieD)G%hLtFF#}!@jcUn~TORYNcm&+9L`p
zrbr=wvCUXNs`)shE#++Xl#Z1`u%C~mI36y8-ni@z-e2`M55LawP6P;T$iC{KrG<7}
z^4<5vg2Lmg3#9mq(@-OvC0(W+pbtX?v#*B+uV&J*N
"Java" \| "JavaScript" \| "TypeScript" \| "Python" \| "JSON" \| "PHP" \| "C and C++" \| "C#" \| "Ruby" \| "HTML" \| "CSS" | "Java" | Mode Logic | YES | YES | This handler allows you to select the mode of the component. |
-| Theme | *Select*
"GitHub" \| "Chrome" \| "Monokai" \| "Nord Dark" \| "Twilight" \| "idle Fingers" | "GitHub" | Theme Logic | YES | YES | This handler allows you to select the theme of the component. |
-| Fold Style | *Select*
"Manual" \| "Mark begin" \| "Mark begin and end" | "Manual" | Fold Style Logic | NO | YES | This handler allows you to select the fold style. |
-| Placeholder | *Text* | "Placeholder" | Placeholder Logic | NO | YES | This handler allows you to specify the placeholder for the component. The placeholder is a default value which is displayed to the user before any text is entered in the component on the page. This can be a simple statement such as "Insert your code". |
-| Width | *Text* | "750px" | Width Logic | YES | YES | This handler allows you to specify the width of the component. |
-| Height | *Text* | "500px" | Height Logic | YES | YES | This handler allows you to specify the height of the component. |
-| Font Size | *Number* | 16 | Font Size Logic | YES | YES | This handler allows you to specify the font size which affects the size of all text entered in the component on the page. |
-| Tab Size | *Number* | 4 | Tab Size Logic | NO | YES | The Tab Size represents the number of spaces in one Tab. For instance, the default value of this property is 4, hence if you enter the Tab button while in the editor, the component will add 4 spaces. |
-| Print Margin Column | *Number* | 80 | Print Margin Column Logic | NO | YES | This handler allows you to specify the print margin column. |
-| Print Margin Visibility | *Checkbox* | `true` | Print Margin Visibility Logic | NO | YES | This handler allows you to control the visibility of the print margin. |
-| Gutter Visibility | *Checkbox* | `true` | Gutter Visibility Logic | NO | YES | This handler allows you to control the visibility of the gutter. |
-| Autocompletion | *Checkbox* | `false` | Autocompletion Logic | NO | YES | This handler allows adding auto-completion capability to the component. For example, if your code contains a few variables and functions, then while entering their names you will be prompted to select one of the options matching the name criteria in the interactive drop-down menu. This also applies to keywords. |
-| Highlight Active Line | *Checkbox* | `true` | Highlight Active Line Logic | NO | YES | When this handler is activated, then the active line will be highlighted. |
-| Highlight Selected Word | *Checkbox* | `false` | Highlight Selected Word Logic | NO | YES | When this handler is activated, then the selected word will be highlighted. |
-| Show Invisibles | *Checkbox* | `false` | Show Invisibles Logic | NO | YES | When this handler is activated, it highlights the empty spaces. |
+| Property | Type | Default Value | Logic | Data Binding | UI Setting | Description |
+|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|-------------------------------|--------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Read Only | *Checkbox* | `false` | Read Only Logic | YES | YES | This handler allows you to disable editing of the component value. |
+| Name | *Text* | "Ace Editor" | Name Logic | NO | YES | This handler allows you to specify the name of the component. |
+| Value | *Text* | "" | Value Logic | YES | YES | This handler allows you to add a default value to the component. This can be a code snippet which will be displayed to the user when the page is loaded. |
+| Mode | *Select*
"Java"\|
"JavaScript" \|
"TypeScript" \|
"Python" \|
"JSON" \|
"PHP" \|
"C and C++" \|
"C#" \|
"Ruby" \|
"HTML" \|
"CSS" | "Java" | Mode Logic | YES | YES | This handler allows you to select the mode of the component. |
+| Theme | *Select*
"GitHub" \|
"Chrome" \|
"Monokai" \|
"Nord Dark" \|
"Twilight" \|
"idle Fingers" | "GitHub" | Theme Logic | YES | YES | This handler allows you to select the theme of the component. |
+| Fold Style | *Select*
"Manual" \|
"Mark begin" \|
"Mark begin and end" | "Manual" | Fold Style Logic | NO | YES | This handler allows you to select the fold style. |
+| Placeholder | *Text* | "Placeholder" | Placeholder Logic | NO | YES | This handler allows you to specify the placeholder for the component. The placeholder is a default value which is displayed to the user before any text is entered in the component on the page. This can be a simple statement such as "Insert your code". |
+| Width | *Text* | "750px" | Width Logic | YES | YES | This handler allows you to specify the width of the component. |
+| Height | *Text* | "500px" | Height Logic | YES | YES | This handler allows you to specify the height of the component. |
+| Font Size | *Number* | 16 | Font Size Logic | YES | YES | This handler allows you to specify the font size which affects the size of all text entered in the component on the page. |
+| Tab Size | *Number* | 4 | Tab Size Logic | NO | YES | The Tab Size represents the number of spaces in one Tab. For instance, the default value of this property is 4, hence if you enter the Tab button while in the editor, the component will add 4 spaces. |
+| Print Margin Column | *Number* | 80 | Print Margin Column Logic | NO | YES | This handler allows you to specify the print margin column. |
+| Print Margin Visibility | *Checkbox* | `true` | Print Margin Visibility Logic | NO | YES | This handler allows you to control the visibility of the print margin. |
+| Gutter Visibility | *Checkbox* | `true` | Gutter Visibility Logic | NO | YES | This handler allows you to control the visibility of the gutter. |
+| Autocompletion | *Checkbox* | `false` | Autocompletion Logic | NO | YES | This handler allows adding auto-completion capability to the component. For example, if your code contains a few variables and functions, then while entering their names you will be prompted to select one of the options matching the name criteria in the interactive drop-down menu. This also applies to keywords. |
+| Highlight Active Line | *Checkbox* | `true` | Highlight Active Line Logic | NO | YES | When this handler is activated, then the active line will be highlighted. |
+| Highlight Selected Word | *Checkbox* | `false` | Highlight Selected Word Logic | NO | YES | When this handler is activated, then the selected word will be highlighted. |
+| Show Invisibles | *Checkbox* | `false` | Show Invisibles Logic | NO | YES | When this handler is activated, it highlights the empty spaces. |
## Events
From 7680339019b5ff241f1deacf7efaf52496ab82ee Mon Sep 17 00:00:00 2001
From: Dmytro Vakuliuk
"Java"\|
"JavaScript" \|
"TypeScript" \|
"Python" \|
"JSON" \|
"PHP" \|
"C and C++" \|
"C#" \|
"Ruby" \|
"HTML" \|
"CSS" | "Java" | Mode Logic | YES | YES | This handler allows you to select the mode of the component. |
-| Theme | *Select*
"GitHub" \|
"Chrome" \|
"Monokai" \|
"Nord Dark" \|
"Twilight" \|
"idle Fingers" | "GitHub" | Theme Logic | YES | YES | This handler allows you to select the theme of the component. |
-| Fold Style | *Select*
"Manual" \|
"Mark begin" \|
"Mark begin and end" | "Manual" | Fold Style Logic | NO | YES | This handler allows you to select the fold style. |
-| Placeholder | *Text* | "Placeholder" | Placeholder Logic | NO | YES | This handler allows you to specify the placeholder for the component. The placeholder is a default value which is displayed to the user before any text is entered in the component on the page. This can be a simple statement such as "Insert your code". |
-| Width | *Text* | "750px" | Width Logic | YES | YES | This handler allows you to specify the width of the component. |
-| Height | *Text* | "500px" | Height Logic | YES | YES | This handler allows you to specify the height of the component. |
-| Font Size | *Number* | 16 | Font Size Logic | YES | YES | This handler allows you to specify the font size which affects the size of all text entered in the component on the page. |
-| Tab Size | *Number* | 4 | Tab Size Logic | NO | YES | The Tab Size represents the number of spaces in one Tab. For instance, the default value of this property is 4, hence if you enter the Tab button while in the editor, the component will add 4 spaces. |
-| Print Margin Column | *Number* | 80 | Print Margin Column Logic | NO | YES | This handler allows you to specify the print margin column. |
-| Print Margin Visibility | *Checkbox* | `true` | Print Margin Visibility Logic | NO | YES | This handler allows you to control the visibility of the print margin. |
-| Gutter Visibility | *Checkbox* | `true` | Gutter Visibility Logic | NO | YES | This handler allows you to control the visibility of the gutter. |
-| Autocompletion | *Checkbox* | `false` | Autocompletion Logic | NO | YES | This handler allows adding auto-completion capability to the component. For example, if your code contains a few variables and functions, then while entering their names you will be prompted to select one of the options matching the name criteria in the interactive drop-down menu. This also applies to keywords. |
-| Highlight Active Line | *Checkbox* | `true` | Highlight Active Line Logic | NO | YES | When this handler is activated, then the active line will be highlighted. |
-| Highlight Selected Word | *Checkbox* | `false` | Highlight Selected Word Logic | NO | YES | When this handler is activated, then the selected word will be highlighted. |
-| Show Invisibles | *Checkbox* | `false` | Show Invisibles Logic | NO | YES | When this handler is activated, it highlights the empty spaces. |
+| Property | Type | Default Value | Logic | Data Binding | UI Setting | Description |
+|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|-------------------------------|--------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Read Only | *Checkbox* | `false` | Read Only Logic | YES | YES | This handler allows you to disable editing of the component value. |
+| Name | *Text* | "Ace Editor" | Name Logic | NO | YES | This handler allows you to specify the name of the component. |
+| Value | *Text* | "" | Value Logic | YES | YES | This handler allows you to add a default value to the component. This can be a code snippet which will be displayed to the user when the page is loaded. |
+| Mode | *Select*
"Java" \|
"JavaScript" \|
"TypeScript" \|
"Python" \|
"JSON" \|
"PHP" \|
"C and C++" \|
"C#" \|
"Ruby" \|
"HTML" \|
"CSS" | "Java" | Mode Logic | YES | YES | This handler allows you to select the mode of the component. |
+| Theme | *Select*
"GitHub" \|
"Chrome" \|
"Monokai" \|
"Nord Dark" \|
"Twilight" \|
"idle Fingers" | "GitHub" | Theme Logic | YES | YES | This handler allows you to select the theme of the component. |
+| Fold Style | *Select*
"Manual" \|
"Mark begin" \|
"Mark begin and end" | "Manual" | Fold Style Logic | NO | YES | This handler allows you to select the fold style. |
+| Placeholder | *Text* | "Placeholder" | Placeholder Logic | NO | YES | This handler allows you to specify the placeholder for the component. The placeholder is a default value which is displayed to the user before any text is entered in the component on the page. This can be a simple statement such as "Insert your code". |
+| Width | *Text* | "750px" | Width Logic | YES | YES | This handler allows you to specify the width of the component. |
+| Height | *Text* | "500px" | Height Logic | YES | YES | This handler allows you to specify the height of the component. |
+| Font Size | *Number* | 16 | Font Size Logic | YES | YES | This handler allows you to specify the font size which affects the size of all text entered in the component on the page. |
+| Tab Size | *Number* | 4 | Tab Size Logic | NO | YES | The Tab Size represents the number of spaces in one Tab. For instance, the default value of this property is 4, hence if you enter the Tab button while in the editor, the component will add 4 spaces. |
+| Print Margin Column | *Number* | 80 | Print Margin Column Logic | NO | YES | This handler allows you to specify the print margin column. |
+| Print Margin Visibility | *Checkbox* | `true` | Print Margin Visibility Logic | NO | YES | This handler allows you to control the visibility of the print margin. |
+| Gutter Visibility | *Checkbox* | `true` | Gutter Visibility Logic | NO | YES | This handler allows you to control the visibility of the gutter. |
+| Autocompletion | *Checkbox* | `false` | Autocompletion Logic | NO | YES | This handler allows adding auto-completion capability to the component. For example, if your code contains a few variables and functions, then while entering their names you will be prompted to select one of the options matching the name criteria in the interactive drop-down menu. This also applies to keywords. |
+| Highlight Active Line | *Checkbox* | `true` | Highlight Active Line Logic | NO | YES | When this handler is activated, then the active line will be highlighted. |
+| Highlight Selected Word | *Checkbox* | `false` | Highlight Selected Word Logic | NO | YES | When this handler is activated, then the selected word will be highlighted. |
+| Show Invisibles | *Checkbox* | `false` | Show Invisibles Logic | NO | YES | When this handler is activated, it highlights the empty spaces. |
## Events
From 815cd01429a1305b6a9cfc9751342fb2dbbabc5a Mon Sep 17 00:00:00 2001
From: Dmytro Vakuliuk
"Java" \|
"JavaScript" \|
"TypeScript" \|
"Python" \|
"JSON" \|
"PHP" \|
"C and C++" \|
"C#" \|
"Ruby" \|
"HTML" \|
"CSS" | "Java" | Mode Logic | YES | YES | This handler allows you to select the mode of the component. |
-| Theme | *Select*
"GitHub" \|
"Chrome" \|
"Monokai" \|
"Nord Dark" \|
"Twilight" \|
"idle Fingers" | "GitHub" | Theme Logic | YES | YES | This handler allows you to select the theme of the component. |
-| Fold Style | *Select*
"Manual" \|
"Mark begin" \|
"Mark begin and end" | "Manual" | Fold Style Logic | NO | YES | This handler allows you to select the fold style. |
-| Placeholder | *Text* | "Placeholder" | Placeholder Logic | NO | YES | This handler allows you to specify the placeholder for the component. The placeholder is a default value which is displayed to the user before any text is entered in the component on the page. This can be a simple statement such as "Insert your code". |
-| Width | *Text* | "750px" | Width Logic | YES | YES | This handler allows you to specify the width of the component. |
-| Height | *Text* | "500px" | Height Logic | YES | YES | This handler allows you to specify the height of the component. |
-| Font Size | *Number* | 16 | Font Size Logic | YES | YES | This handler allows you to specify the font size which affects the size of all text entered in the component on the page. |
-| Tab Size | *Number* | 4 | Tab Size Logic | NO | YES | The Tab Size represents the number of spaces in one Tab. For instance, the default value of this property is 4, hence if you enter the Tab button while in the editor, the component will add 4 spaces. |
-| Print Margin Column | *Number* | 80 | Print Margin Column Logic | NO | YES | This handler allows you to specify the print margin column. |
-| Print Margin Visibility | *Checkbox* | `true` | Print Margin Visibility Logic | NO | YES | This handler allows you to control the visibility of the print margin. |
-| Gutter Visibility | *Checkbox* | `true` | Gutter Visibility Logic | NO | YES | This handler allows you to control the visibility of the gutter. |
-| Autocompletion | *Checkbox* | `false` | Autocompletion Logic | NO | YES | This handler allows adding auto-completion capability to the component. For example, if your code contains a few variables and functions, then while entering their names you will be prompted to select one of the options matching the name criteria in the interactive drop-down menu. This also applies to keywords. |
-| Highlight Active Line | *Checkbox* | `true` | Highlight Active Line Logic | NO | YES | When this handler is activated, then the active line will be highlighted. |
-| Highlight Selected Word | *Checkbox* | `false` | Highlight Selected Word Logic | NO | YES | When this handler is activated, then the selected word will be highlighted. |
-| Show Invisibles | *Checkbox* | `false` | Show Invisibles Logic | NO | YES | When this handler is activated, it highlights the empty spaces. |
+| Property | Type | Default Value | Logic | Data Binding | UI Setting | Description |
+|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|-------------------------------|--------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Read Only | *Checkbox* | `false` | Read Only Logic | YES | YES | This handler allows you to disable editing of the component value. |
+| Name | *Text* | "Ace Editor" | Name Logic | NO | YES | This handler allows you to specify the name of the component. |
+| Value | *Text* | "" | Value Logic | YES | YES | This handler allows you to add a default value to the component. This can be a code snippet which will be displayed to the user when the page is loaded. |
+| Mode | *Select*
"Java"
"JavaScript" \|
"TypeScript" \|
"Python" \|
"JSON" \|
"PHP" \|
"C and C++" \|
"C#" \|
"Ruby" \|
"HTML" \|
"CSS" | "Java" | Mode Logic | YES | YES | This handler allows you to select the mode of the component. |
+| Theme | *Select*
"GitHub"
"Chrome" \|
"Monokai" \|
"Nord Dark" \|
"Twilight" \|
"idle Fingers" | "GitHub" | Theme Logic | YES | YES | This handler allows you to select the theme of the component. |
+| Fold Style | *Select*
"Manual" \| "Mark begin" \| "Mark begin and end" | "Manual" | Fold Style Logic | NO | YES | This handler allows you to select the fold style. |
+| Placeholder | *Text* | "Placeholder" | Placeholder Logic | NO | YES | This handler allows you to specify the placeholder for the component. The placeholder is a default value which is displayed to the user before any text is entered in the component on the page. This can be a simple statement such as "Insert your code". |
+| Width | *Text* | "750px" | Width Logic | YES | YES | This handler allows you to specify the width of the component. |
+| Height | *Text* | "500px" | Height Logic | YES | YES | This handler allows you to specify the height of the component. |
+| Font Size | *Number* | 16 | Font Size Logic | YES | YES | This handler allows you to specify the font size which affects the size of all text entered in the component on the page. |
+| Tab Size | *Number* | 4 | Tab Size Logic | NO | YES | The Tab Size represents the number of spaces in one Tab. For instance, the default value of this property is 4, hence if you enter the Tab button while in the editor, the component will add 4 spaces. |
+| Print Margin Column | *Number* | 80 | Print Margin Column Logic | NO | YES | This handler allows you to specify the print margin column. |
+| Print Margin Visibility | *Checkbox* | `true` | Print Margin Visibility Logic | NO | YES | This handler allows you to control the visibility of the print margin. |
+| Gutter Visibility | *Checkbox* | `true` | Gutter Visibility Logic | NO | YES | This handler allows you to control the visibility of the gutter. |
+| Autocompletion | *Checkbox* | `false` | Autocompletion Logic | NO | YES | This handler allows adding auto-completion capability to the component. For example, if your code contains a few variables and functions, then while entering their names you will be prompted to select one of the options matching the name criteria in the interactive drop-down menu. This also applies to keywords. |
+| Highlight Active Line | *Checkbox* | `true` | Highlight Active Line Logic | NO | YES | When this handler is activated, then the active line will be highlighted. |
+| Highlight Selected Word | *Checkbox* | `false` | Highlight Selected Word Logic | NO | YES | When this handler is activated, then the selected word will be highlighted. |
+| Show Invisibles | *Checkbox* | `false` | Show Invisibles Logic | NO | YES | When this handler is activated, it highlights the empty spaces. |
## Events