Skip to content

Commit

Permalink
DOC-2598: TINY-11459 Improve the context form placeholder sample code
Browse files Browse the repository at this point in the history
  • Loading branch information
FarzadHayat committed Dec 12, 2024
1 parent ee66416 commit f2be201
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 8 deletions.
1 change: 1 addition & 0 deletions modules/ROOT/examples/live-demos/context-form/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ tinymce.init({
},
label: 'Link',
predicate: isAnchorElement,
placeholder: 'https://www.example.com',
initValue: () => {
const elm = getAnchorElement();
return !!elm ? elm.href : '';
Expand Down
22 changes: 14 additions & 8 deletions modules/ROOT/pages/7.6.0-release-notes.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,8 @@ tinymce.init({
});
----

For more details on the `back` function, see xref:contextform.adoc#formapi[Context Form - ContextFormApi].

=== New `QuickbarInsertImage` command that is executed by the `quickimage` button.
// #TINY-11399

Expand Down Expand Up @@ -312,26 +314,30 @@ tinymce.init({

A new `+onSetup+` API has been introduced for context forms, enabling integrators to execute a function when the form is rendered and handle cleanup when it is closed. This enhancement addresses the previous limitation of not being able to detect or trigger actions during the lifecycle of context forms. The `+onSetup+` API streamlines lifecycle management by supporting initialization at form rendering and providing a return function for cleanup, enhancing integration with plugins and applications.

For more details, refer to xref:contextform.adoc#form[Context Form].
For more details on the `+onSetup+` function, see xref:contextform.adoc#form[Context Form].

=== Added placeholder support for context form input fields
// #TINY-11459

A new `placeholder` option has been introduced to the context form API, addressing the need for inline guidance within input fields. This feature enables developers to specify placeholder text that appears inside input fields until the field is focused or a value is entered. By providing contextual hints, this enhancement improves usability and enhances the user experience.
A new `placeholder` option has been introduced to the context form API, addressing the need for inline guidance within input fields. This feature enables developers to specify placeholder text that appears inside input fields until the field has a value. By providing contextual hints, this enhancement improves usability and enhances the user experience.

.Example: Using a placeholder in a context form input field
[source,js]
----
editor.ui.registry.addContextForm('upload-url', {
launch: {
type: 'contextformtogglebutton',
icon: 'link',
tooltip: 'Upload from URL'
tinymce.init({
selector: 'textarea',
setup: (editor) => {
editor.ui.registry.addContextForm('my-form', {
predicate: () => true,
placeholder: 'Placeholder goes here...',
commands: []
});
},
placeholder: 'Enter URL here...', ....
});
----

For more details on the `placeholder` option, see xref:contextform.adoc#form[Context Form].

=== New `+disabled+` option for disabling all user interactions

A new `+disabled+` option has been introduced to {productname} in version {release-version}. This option allows integrators to disable all user interactions with the editor, including cursor placement, content modifications, and UI components. When set to `+true+`, the editor behaves similarly to the readonly mode changes introduced in {productname} 7.4.0 but ensures complete non-interactivity.
Expand Down
1 change: 1 addition & 0 deletions modules/ROOT/pages/contextform.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ This relates to the form itself. The form specifications are:
|Name |Details
|`+launch+` |This is the specification for the launching button that can appear in a context toolbar only. It will be either type: `+contextformbutton+` or `+contextformtogglebutton+`, and will be identical to those definitions below except it will *not* have an `+onAction+`.
|`+label+` |This is the label that will appear in the form.
|`+placeholder+` |This specifies placeholder text that appears inside the input field until the field has a value.
|`+initValue+` |This is the initial value the input will have in the form.
|`+predicate+` |This controls when the context toolbar will appear.
|`+position+` |This controls where the context toolbar will appear with regards to the current cursor.
Expand Down

0 comments on commit f2be201

Please sign in to comment.