Skip to content

Feature/add id prop #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Feature/add id prop #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
168009a
feat: Add unique id prop to support multiple editors
Sep 29, 2025
f29b048
chore: Update package version and dependencies, include `src` in publ…
Sep 29, 2025
087bb32
include dist
Sep 29, 2025
88b5863
include dist
Sep 29, 2025
308c342
fix: Ensure event handlers only trigger for the targeted editor element
Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ node_modules
.wrangler
/.svelte-kit
/build
/dist

# OS
.DS_Store
Expand Down
35 changes: 35 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,38 @@ This will install svelte-trix as well as the base Trix dependency.
Both of the above examples will produce a simple rich text editor with buttons on the top that looks like this:
![Screenshot of a simple text editor created with svelte-trix](https://www.dropbox.com/scl/fi/45d3c6jsvvvwp659ejs74/Screenshot-2025-06-02-at-1.56.17-PM.png?rlkey=q2gwo2tw1904xukxl5msogfj0&raw=1)

### Using Multiple Editors on the Same Page

When using multiple Trix editors on the same page, you should provide custom IDs to avoid conflicts:

```svelte
<script lang='ts'>
import { TrixEditor } from 'svelte-trix';
</script>

<div class="editors-container">
<div class="editor-wrapper">
<h2>Editor 1</h2>
<TrixEditor
value="This is the content of the first editor."
wrapperId="custom-editor-wrapper-1"
hiddenInputId="custom-hidden-input-1"
editorId="custom-editor-1"
/>
</div>

<div class="editor-wrapper">
<h2>Editor 2</h2>
<TrixEditor
value="This is the content of the second editor."
wrapperId="custom-editor-wrapper-2"
hiddenInputId="custom-hidden-input-2"
editorId="custom-editor-2"
/>
</div>
</div>
```

## Props

svelte-trix has typesafe support for all customizations and event listeners that the original Trix library supports, as well as a bindable `value` prop for svelte-ishness.
Expand All @@ -59,6 +91,9 @@ svelte-trix has typesafe support for all customizations and event listeners that
| `editor` | `Element` | Bindable prop that exposes the instance of the TrixEditor directly, should you want to perform any customizations or actions that aren't available through props. | Yes |
| `label` | `string` | Optional label for the form. | No |
| `disabled` | `boolean` | Disabled editors are not editable and cannot receive focus. | No |
| `wrapperId` | `string` | Custom ID for the main wrapper element. Defaults to 'svelte-trix-editor-wrapper'. | No |
| `hiddenInputId` | `string` | Custom ID for the hidden input element. Defaults to 'svelte-trix-hidden-input'. | No |
| `editorId` | `string` | Custom ID for the Trix editor element. Defaults to 'svelte-trix-editor'. | No |
| `config` | `ITrixConfig` | Learn more about [Config](#config) | No |

### Event Listeners
Expand Down
Loading