{`
+// Chain multiple commands
editor.chain()
.focus()
.toggleBold()
@@ -136,12 +144,131 @@ editor.chain()
// Check if a command is active
const isBold = editor.isActive('bold')
-const isHeading = editor.isActive('heading', { level: 2 })`} />
+const isHeading = editor.isActive('heading', { level: 2 })
+`}
- Note: Tipex provides full access to TipTap's command API. For a complete reference of all available commands,
- visit the
+ Note: Tipex provides full access to TipTap's command API. For a complete reference of all available
+ commands,
+ visit the
TipTap Commands API Documentation.
+
+
+
+
+
+ Customization | Tipex Editor
+
+
+
+
+
+ Back to Home
+
+
+Customization
+
+ As we have said, a software having customization is a software having soul. Tipex editor is highly customizable.
+ You can customize the editor to your heart's content.
+
+
+
+
+
+ The in-built utility buttons consist of Copy and Link buttons.
+
+
+
+ 
+
+
+ Location of utility buttons in Text Editor
+
+
+Insert a set of buttons
+
+ Here's a basic example of how you can insert in-built utility buttons.
+
+{`${codes.insertUtils}`}
+
+Append custom buttons between
+
+ To append new buttons you can use the Utility.svelte component, it has a slot for you
+ to insert your buttons.
+
+{`${codes.appendUtils}`}
+
+
+
+Using new custom controls
+
+ You can override the default controls with your own custom controls. Here's an example of how you can do it.
+
+{`${codes.overrideControl}`}
+
+
+ Or, you can use {'{#snippet controlComponent}'} to append your buttons.
+
+
+Image Upload
+
+ Tipex editor supports image upload. You can upload images by dragging and dropping them in the editor, or
+ by copy pasting them from your clipboard, which is the most common way to upload images.
+
+
+Custom Image Upload Tab
+
+ You can use utility customization for this. Apply the upper mentioned method to append your custom button.
+
+
+Advanced Customization
+
+
+ Tipex, being a highly customizable editor, allows you to customize the editor to your heart's content and
+ make it look like your own. Here's some ways you can customize the editor.
+
+
+
+ 
+
+
+ Advanced Customization of Tipex Editor, Source
+ Code
+
+
+
+Customize the controls
+
+
+ You can customize the controls of the editor by passing a controlComponent slot.
+
+
+{`${advanceCodes.addHeadFootComponent}`}
+
+
+ You can also add a header and footer with using a slot.
+
+
+Tweaking extensions
+
+
+ Tipex provides an defaultExtensions object which contains all the extensions that are used in the
+ editor. You can tweak the extensions, or add new extensions to the editor by passing a extensions
+ prop to the editor.
+
+
+{`${advanceCodes.tweakingExtensions}`}
diff --git a/src/routes/customization/+page.svelte b/src/routes/customization/+page.svelte
index 06ba9f5..a75eff5 100644
--- a/src/routes/customization/+page.svelte
+++ b/src/routes/customization/+page.svelte
@@ -1,8 +1,6 @@
-
@@ -42,14 +40,14 @@
Here's a basic example of how you can insert in-built utility buttons.
-
+{`${codes.insertUtils}`}
Append custom buttons between
To append new buttons you can use the Utility.svelte component, it has a slot for you
to insert your buttons.
-
+{`${codes.appendUtils}`}
@@ -57,7 +55,7 @@
You can override the default controls with your own custom controls. Here's an example of how you can do it.
-
+{`${codes.overrideControl}`}
Or, you can use {'{#snippet controlComponent}'} to append your buttons.
@@ -98,7 +96,7 @@
You can customize the controls of the editor by passing a controlComponent slot.
-
+{`${advanceCodes.addHeadFootComponent}`}
You can also add a header and footer with using a slot.
@@ -112,4 +110,4 @@
prop to the editor.
-
\ No newline at end of file
+{`${advanceCodes.tweakingExtensions}`}
diff --git a/vite.config.ts b/vite.config.ts
index 7a358e4..fd99e2e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,12 +1,39 @@
+import tailwindcss from '@tailwindcss/vite';
+import { svelteTesting } from '@testing-library/svelte/vite';
import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vitest/config';
+import { defineConfig } from 'vite';
export default defineConfig({
- plugins: [sveltekit()],
+ plugins: [tailwindcss(), sveltekit()],
+
test: {
- include: ['src/**/*.{test,spec}.{js,ts}']
+ workspace: [
+ {
+ extends: './vite.config.ts',
+ plugins: [svelteTesting()],
+
+ test: {
+ name: 'client',
+ environment: 'jsdom',
+ clearMocks: true,
+ include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
+ exclude: ['src/lib/server/**'],
+ setupFiles: ['./vitest-setup-client.ts']
+ }
+ },
+ {
+ extends: './vite.config.ts',
+
+ test: {
+ name: 'server',
+ environment: 'node',
+ include: ['src/**/*.{test,spec}.{js,ts}'],
+ exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
+ }
+ }
+ ]
},
define: {
- __VERSION__: JSON.stringify(process.env.npm_package_version),
- },
+ __VERSION__: JSON.stringify(process.env.npm_package_version)
+ }
});