docs: update more examples page

umaranis · Dec 29, 2024 · b538103 · b538103
1 parent ed2ae27
commit b538103
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 28 deletions.
diff --git a/packages/svelte-lexical/src/routes/examples/+page.svelte b/packages/svelte-lexical/src/routes/examples/+page.svelte
@@ -20,7 +20,13 @@
     <div>
       <div class="example-intro">
         <h1>1. Plain Text Editor</h1>
-        <div>Plain text Editor with history plugin.</div>
+        <div>
+          <p>Plain text Editor with history plugin.</p>
+          <p>
+            It also has the Action bar (bottom right corner with import/export
+            and other actions).
+          </p>
+        </div>
       </div>
       <Composer1PlainText />
     </div>
@@ -35,8 +41,20 @@
       <div class="example-intro">
         <h1>3. Rich Text Editor - Advanced</h1>
         <div>
-          Rich text Editor with following plugins: History, List, CheckList,
-          HorizontalRule, Image and MarkdownShortcutPlugin.
+          <p>Rich text Editor with the following plugins:</p>
+          <ul>
+            <li>History</li>
+            <li>List</li>
+            <li>CheckList</li>
+            <li>HorizontalRule</li>
+            <li>Image</li>
+            <li>MarkdownShortcutPlugin</li>
+          </ul>
+
+          <p>
+            It also adds toolbar color pickers for text color and text
+            background.
+          </p>
         </div>
       </div>
       <Composer3RichTextAdv />
@@ -45,10 +63,11 @@
       <div class="example-intro">
         <h1>4. Rich Text Editor with Hyperlinks</h1>
         <div>
-          Rich text Editor with links support using LinkPlugin, AutoLinkPlugin
-          and FloatingLinkEditorPlugin. It also includes all plugins from the
-          previous example i.e. History, List, CheckList, HorizontalRule, Image
-          and MarkdownShortcutPlugin.
+          <p>
+            Rich text Editor with links support using LinkPlugin, AutoLinkPlugin
+            and FloatingLinkEditorPlugin.
+          </p>
+          <p>It also includes all plugins from the previous example.</p>
         </div>
       </div>
       <Composer4RtLinks />
@@ -57,9 +76,14 @@
       <div class="example-intro">
         <h1>5. Rich Text Editor with Code Blocks</h1>
         <div>
-          Rich text Editor with support for Code Blocks. It also includes all
-          plugins from the previous example i.e. History, List, CheckList,
-          HorizontalRule, Image, Link, AutoLink and MarkdownShortcutPlugin.
+          <p>
+            Rich text Editor with support for Code Blocks. It also includes all
+            plugins from the previous example.
+          </p>
+          <p>
+            When the focus is inside a Code Block, the toolbar shows dropdown
+            for language selection and hides rich text formatting options.
+          </p>
           <p>
             The font size drop down is replaced with font size entry control.
           </p>

diff --git a/packages/svelte-lexical/src/routes/examples/Composer3RichTextAdv.svelte b/packages/svelte-lexical/src/routes/examples/Composer3RichTextAdv.svelte
@@ -80,7 +80,7 @@
       <ListPlugin />
       <CheckListPlugin />
       <HorizontalRulePlugin />
-      <ImagePlugin />
+      <ImagePlugin captionsEnabled={false} />
       <MarkdownShortcutPlugin
         transformers={[
           ...TEXT_FORMAT_TRANSFORMERS,

diff --git a/packages/svelte-lexical/src/routes/examples/Composer3Toolbar.svelte b/packages/svelte-lexical/src/routes/examples/Composer3Toolbar.svelte
@@ -1,6 +1,8 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+  import DropDownBackColorPicker from '$lib/components/toolbar/DropDownBackColorPicker.svelte';
+  import DropDownTextColorPicker from '$lib/components/toolbar/DropDownTextColorPicker.svelte';
   import {BlockFormatDropDown} from '$lib/index.js';
   import {BoldButton} from '$lib/index.js';
   import {Divider} from '$lib/index.js';
@@ -54,10 +56,12 @@
     <UnderlineButton />
     <StrikethroughButton />
     <FormatCodeButton />
+    <DropDownTextColorPicker />
+    <DropDownBackColorPicker />
     <Divider />
     <InsertDropDown>
       <InsertHRDropDownItem />
-      <InsertImageDropDownItem onclick={() => imageDialog!.open()} />
+      <InsertImageDropDownItem onclick={() => imageDialog.open()} />
     </InsertDropDown>
     <Divider />
     <DropDownAlign />

diff --git a/packages/svelte-lexical/src/routes/examples/Composer4RTLinks.svelte b/packages/svelte-lexical/src/routes/examples/Composer4RTLinks.svelte
@@ -111,7 +111,7 @@
       <ListPlugin />
       <CheckListPlugin />
       <HorizontalRulePlugin />
-      <ImagePlugin />
+      <ImagePlugin captionsEnabled={false} />
       <AutoLinkPlugin />
       <LinkPlugin {validateUrl} />
       {#if !isSmallWidthViewport}

diff --git a/packages/svelte-lexical/src/routes/examples/Composer4Toolbar.svelte b/packages/svelte-lexical/src/routes/examples/Composer4Toolbar.svelte
@@ -1,6 +1,8 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+  import DropDownBackColorPicker from '$lib/components/toolbar/DropDownBackColorPicker.svelte';
+  import DropDownTextColorPicker from '$lib/components/toolbar/DropDownTextColorPicker.svelte';
   import {BlockFormatDropDown, InsertLink} from '$lib/index.js';
   import {BoldButton} from '$lib/index.js';
   import {Divider} from '$lib/index.js';
@@ -54,6 +56,8 @@
     <UnderlineButton />
     <StrikethroughButton />
     <FormatCodeButton />
+    <DropDownTextColorPicker />
+    <DropDownBackColorPicker />
     <InsertLink />
     <Divider />
     <InsertDropDown>

diff --git a/packages/svelte-lexical/src/routes/examples/Composer5Toolbar.svelte b/packages/svelte-lexical/src/routes/examples/Composer5Toolbar.svelte
@@ -1,6 +1,9 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+  import CodeLanguageDropDown from '$lib/components/toolbar/CodeLanguageDropDown.svelte';
+  import DropDownBackColorPicker from '$lib/components/toolbar/DropDownBackColorPicker.svelte';
+  import DropDownTextColorPicker from '$lib/components/toolbar/DropDownTextColorPicker.svelte';
   import {
     BlockFormatDropDown,
     CodeDropDrownItem,
@@ -51,21 +54,27 @@
       </BlockFormatDropDown>
       <Divider />
     {/if}
-    <FontFamilyDropDown />
-    <FontSizeEntry />
-    <Divider />
-    <BoldButton />
-    <ItalicButton />
-    <UnderlineButton />
-    <StrikethroughButton />
-    <FormatCodeButton />
-    <InsertLink />
-    <Divider />
-    <InsertDropDown>
-      <InsertHRDropDownItem />
-      <InsertImageDropDownItem onclick={() => imageDialog!.open()} />
-    </InsertDropDown>
-    <Divider />
+    {#if blockType === 'code'}
+      <CodeLanguageDropDown />
+    {:else}
+      <FontFamilyDropDown />
+      <FontSizeEntry />
+      <Divider />
+      <BoldButton />
+      <ItalicButton />
+      <UnderlineButton />
+      <StrikethroughButton />
+      <FormatCodeButton />
+      <DropDownTextColorPicker />
+      <DropDownBackColorPicker />
+      <InsertLink />
+      <Divider />
+      <InsertDropDown>
+        <InsertHRDropDownItem />
+        <InsertImageDropDownItem onclick={() => imageDialog.open()} />
+      </InsertDropDown>
+      <Divider />
+    {/if}
     <DropDownAlign />
     <!-- dialogs -->
     <InsertImageDialog bind:this={imageDialog} />