DOC-3184: Update Svelte public documentation.

modules/ROOT/partials/integrations/svelte-quick-start.adoc

@@ -1,10 +1,11 @@
-The https://github.com/tinymce/tinymce-svelte[Official {productname} Svelte component] integrates {productname} into https://svelte.dev/[Svelte applications]. This procedure creates a basic Svelte application containing a {productname} editor.
+The https://github.com/tinymce/tinymce-svelte[Official {productname} Svelte component] integrates {productname} into https://svelte.dev/[Svelte applications].  
+Creates a basic Svelte application containing a {productname} editor.
 
-For examples of the {productname} integration, visit https://tinymce.github.io/tinymce-svelte/[the tinymce-svelte storybook].
+For examples of the {productname} integration, visit the https://tinymce.github.io/tinymce-svelte/[tinymce-svelte storybook].
 
 == Prerequisites
 
-This procedure requires https://nodejs.org/[Node.js (and npm)].
+Requires https://nodejs.org/[Node.js (and npm)].
 
 == Procedure
 
@@ -14,16 +15,22 @@ This procedure requires https://nodejs.org/[Node.js (and npm)].
 ----
 npm create vite@5 tinymce-svelte-demo -- --template svelte
 ----
-. Change to the newly created directory.
+. Change to the project directory.
 +
 [source,sh]
 ----
 cd tinymce-svelte-demo
 ----
+. Install project dependencies.
++
+[source,sh]
+----
+npm install
+----
 
 ifeval::["{productSource}" == "package-manager"]
 
-. Install the `+tinymce+` and the `+tinymce-svelte+` editor component, such as:
+. Install the `+tinymce+` and `+tinymce-svelte+` packages:
 +
 [source,sh,subs="attributes+"]
 ----
@@ -33,7 +40,7 @@ npm install tinymce@^{productmajorversion} @tinymce/tinymce-svelte
 endif::[]
 ifeval::["{productSource}" != "package-manager"]
 
-. Install the `+tinymce-svelte+` editor component, such as:
+. Install the `+tinymce-svelte+` editor component:
 +
 [source,sh]
 ----
@@ -66,24 +73,31 @@ let conf = {
 <main>
   <h1>Hello Tiny</h1>
   <Editor
-    apiKey='your-tiny-cloud-api-key'
+    apiKey='no-api-key'
     pass:a[channel='{productmajorversion}']
     value='<p>This is the initial content of the editor.</p>'
     {conf}
   />
 </main>
 ----
 
+[NOTE]
+====
+Replace `no-api-key` with a valid {cloudname} API key.
+
+include::partial$misc/get-an-api-key.adoc[]
+====
+
 endif::[]
 ifeval::["{productSource}" == "package-manager"]
 
-. Install the `+vite-plugin-static-copy+` development dependency, such as:
+. Install the `+vite-plugin-static-copy+` development dependency:
 +
 [source,sh]
 ----
 npm install -D vite-plugin-static-copy
 ----
-. Open `+vite.config.js+` and configure the `+vite-plugin-static-copy+` plugin to copy {productname} to the `+public/+` directory, such as:
+. Configure `+vite.config.js+` to copy {productname} to the `+public/+` directory:
 +
 [source,js]
 ----
@@ -133,6 +147,8 @@ let conf = {
   />
 </main>
 ----
++
+. Update the `+licenseKey+` option in the editor element and include your xref:license-key.adoc[License Key].
 
 endif::[]
 ifeval::["{productSource}" == "zip"]
@@ -167,22 +183,27 @@ let conf = {
   />
 </main>
 ----
++
+. Update the `+licenseKey+` option in the editor element and include your xref:license-key.adoc[License Key].
 
 endif::[]
 
-. Test the application using the Node.js development server.
-* To start the development server, in the project's root directory, run:
+== Run the Application
+
+Test the application using the Node.js development server.
+
+. To start the development server:
 +
 [source,sh]
 ----
 npm run dev
 ----
 +
-* To stop the development server, select on the command line or command prompt and press _Ctrl+C_.
+. To stop the development server, use `+Ctrl+C+` in the terminal or command prompt.
 
 == Next Steps
 
-* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-svelte/[the tinymce-svelte storybook].
-* For information on customizing, see:
-** xref:basic-setup.adoc[{productname} basic setup].
-** xref:svelte-ref.adoc[The {productname} Svelte integration technical reference].
+* See the following for additional information:
+** https://tinymce.github.io/tinymce-svelte/[tinymce-svelte storybook]
+** xref:basic-setup.adoc[{productname} basic setup]
+** xref:svelte-ref.adoc[{productname} Svelte integration technical reference]

modules/ROOT/partials/integrations/svelte-tech-ref.adoc

@@ -38,6 +38,8 @@ The `+tinymce-svelte+` `+Editor+` component accepts the following properties:
 
 {cloudname} API key. Required for deployments using the {cloudname} to provide the {productname} editor.
 
+include::partial$misc/get-an-api-key.adoc[]
+
 *Type:* `+String+`
 
 *Default value:* `+'no-api-key'+`
@@ -47,16 +49,16 @@ The `+tinymce-svelte+` `+Editor+` component accepts the following properties:
 [source,jsx]
 ----
 <Editor
-  apiKey="your-api-key"
+  apiKey="no-api-key"
 />
 ----
 
-[[licenseKey]]
+[[licensekey]]
 === `+licenseKey+`
 
 {cloudname} License key.
 
-Use this when self-hosting {productname} instead of loading from {cloudname}. For more information, see: xref:license-key.adoc[License Key].
+Use this option when self-hosting {productname} instead of loading from {cloudname}. For more information, see: xref:license-key.adoc[License Key].
 
 *Type:* `+String+`
 
@@ -100,7 +102,7 @@ Specified an Id for the editor. Used for retrieving the editor instance using th
 
 *Type:* `+String+`
 
-*Default value:* Automatically generated https://tools.ietf.org/html/rfc4122[UUID]
+*Default value:* Automatically generated link:https://tools.ietf.org/html/rfc4122[UUID]
 
 ==== Example using `+id+`
 
@@ -114,7 +116,7 @@ Specified an Id for the editor. Used for retrieving the editor instance using th
 [[inline]]
 === `+inline+`
 
-Set the editor to inline mode.
+Sets the editor to use inline mode.
 
 *Type:* `+Boolean+`
 
@@ -243,6 +245,7 @@ When the handler is called (*handlerFunction* in this example), it is called wit
 
 `+editor+`:: A reference to the editor.
 
+[TIP]
 Ensure event names are specified in lower-case (event names are case-sensitive).
 
 The following events are available: