Skip to content

Commit f3cd554

Browse files
ZNAXNORZNAXNOR
committed
Initializing: PayloadCMS Dynamic Value Richtext Plugin .
Allows user to register input fields and use them inside the payload richtext . Just Type `@` and you shoud be able to see the list of registered values.
0 parents  commit f3cd554

71 files changed

Lines changed: 13809 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.editorconfig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎.gitignore‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
/.idea/*
10+
!/.idea/runConfigurations
11+
12+
# testing
13+
/coverage
14+
15+
# next.js
16+
.next/
17+
/out/
18+
19+
# production
20+
/build
21+
/dist
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
32+
# local env files
33+
.env*.local
34+
35+
# vercel
36+
.vercel
37+
38+
# typescript
39+
*.tsbuildinfo
40+
41+
.env
42+
43+
/dev/media
44+
45+
# Playwright
46+
/test-results/
47+
/playwright-report/
48+
/blob-report/
49+
/playwright/.cache/

‎.prettierrc.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all",
4+
"printWidth": 100,
5+
"semi": false
6+
}

‎.swcrc‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"$schema": "https://json.schemastore.org/swcrc",
3+
"sourceMaps": true,
4+
"jsc": {
5+
"target": "esnext",
6+
"parser": {
7+
"syntax": "typescript",
8+
"tsx": true,
9+
"dts": true
10+
},
11+
"transform": {
12+
"react": {
13+
"runtime": "automatic",
14+
"pragmaFrag": "React.Fragment",
15+
"throwIfNamespace": true,
16+
"development": false,
17+
"useBuiltins": true
18+
}
19+
}
20+
},
21+
"module": {
22+
"type": "es6"
23+
}
24+
}

‎.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
3+
}

‎.vscode/launch.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"name": "Next.js: debug full stack",
9+
"type": "node",
10+
"request": "launch",
11+
"program": "${workspaceFolder}/node_modules/next/dist/bin/next",
12+
"runtimeArgs": ["--inspect"],
13+
"skipFiles": ["<node_internals>/**"],
14+
"serverReadyAction": {
15+
"action": "debugWithChrome",
16+
"killOnServerStop": true,
17+
"pattern": "- Local:.+(https?://.+)",
18+
"uriFormat": "%s",
19+
"webRoot": "${workspaceFolder}"
20+
},
21+
"cwd": "${workspaceFolder}"
22+
}
23+
]
24+
}

‎.vscode/settings.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"npm.packageManager": "pnpm",
3+
"editor.defaultFormatter": "esbenp.prettier-vscode",
4+
"[typescript]": {
5+
"editor.defaultFormatter": "esbenp.prettier-vscode",
6+
"editor.formatOnSave": true,
7+
"editor.codeActionsOnSave": {
8+
"source.fixAll.eslint": "explicit"
9+
}
10+
},
11+
"[typescriptreact]": {
12+
"editor.defaultFormatter": "esbenp.prettier-vscode",
13+
"editor.formatOnSave": true,
14+
"editor.codeActionsOnSave": {
15+
"source.fixAll.eslint": "explicit"
16+
}
17+
},
18+
"[javascript]": {
19+
"editor.defaultFormatter": "esbenp.prettier-vscode",
20+
"editor.formatOnSave": true,
21+
"editor.codeActionsOnSave": {
22+
"source.fixAll.eslint": "explicit"
23+
}
24+
},
25+
"[json]": {
26+
"editor.defaultFormatter": "esbenp.prettier-vscode",
27+
"editor.formatOnSave": true
28+
},
29+
"[jsonc]": {
30+
"editor.defaultFormatter": "esbenp.prettier-vscode",
31+
"editor.formatOnSave": true
32+
},
33+
"editor.formatOnSaveMode": "file",
34+
"typescript.tsdk": "node_modules/typescript/lib",
35+
"[javascript][typescript][typescriptreact]": {
36+
"editor.codeActionsOnSave": {
37+
"source.fixAll.eslint": "explicit"
38+
}
39+
}
40+
}

‎CONTRIBUTING.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Contributing to Payload Dynamic Value Rich Text Plugin
2+
3+
First off, thank you for considering contributing to this plugin! It's people like you who make the open-source community such an amazing place to learn, inspire, and create.
4+
5+
## How Can I Contribute?
6+
7+
### Reporting Bugs
8+
9+
If you find a bug, please create an issue in the repository. Include as much detail as possible, such as:
10+
11+
- Your OS and Payload version
12+
- Steps to reproduce the bug
13+
- Expected behavior vs. actual behavior
14+
- Screenshots or code snippets if applicable
15+
16+
### Suggesting Enhancements
17+
18+
Have an idea for a new feature? We'd love to hear it! Open an issue and describe:
19+
20+
- What the enhancement is
21+
- Why it would be useful
22+
- Any implementation ideas you have
23+
24+
### Pull Requests
25+
26+
1. Fork the repository
27+
2. Create a new branch (`git checkout -b feature/amazing-feature`)
28+
3. Make your changes
29+
4. Ensure tests pass and the build is successful (`pnpm build`)
30+
5. Commit your changes (`git commit -m 'Add some amazing feature'`)
31+
6. Push to the branch (`git push origin feature/amazing-feature`)
32+
7. Open a Pull Request
33+
34+
## Development Setup
35+
36+
1. Clone your fork
37+
2. Install dependencies: `pnpm install`
38+
3. Create a `.env` in the `dev` folder (see `.env.example`)
39+
4. Start development: `pnpm dev`
40+
41+
## Code of Conduct
42+
43+
Please be respectful and professional in all interactions within this project.
44+
45+
## Ownership
46+
47+
This project is owned and maintained by **OD LABS**.

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 OD LABS
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Payload Dynamic Value Rich Text Plugin
2+
3+
A powerful [Payload CMS](https://payloadcms.com) plugin for the Lexical editor that allows you to designate field values as dynamic variables. These variables can be reused throughout your rich text content and are visually represented as interactive badges.
4+
5+
## Features
6+
7+
- **Inline Autocomplete**: Trigger a searchable list of available dynamic fields using `@` (default) or a custom character (like `#`).
8+
- **Visual Badges**: Variables appear in the editor as clean, non-editable badges with a "VAR" prefix, making them distinct from regular text.
9+
- **Automatic Field Resolution**: Pull fields automatically from specified Collections and Globals, or provide manually defined fields.
10+
- **Unit Tokenization**: Variables are treated as single units—selecting or deleting them happens in a single action.
11+
- **Clipboard Support**: Copy and paste dynamic values between editors or documents while maintaining their data integrity.
12+
- **Light & Dark Mode**: Seamlessly integrates with Payload's admin UI theme.
13+
14+
## Installation
15+
16+
```bash
17+
pnpm add payloadcms-dynamic-value-richtext
18+
# or
19+
npm install payloadcms-dynamic-value-richtext
20+
```
21+
22+
## Basic Setup
23+
24+
Add the plugin to your `payload.config.ts`:
25+
26+
```typescript
27+
import { buildConfig } from 'payload'
28+
import { dynamicValuePlugin } from 'payloadcms-dynamic-value-richtext'
29+
30+
export default buildConfig({
31+
plugins: [
32+
dynamicValuePlugin({
33+
collections: ['company-settings', 'sites'],
34+
globals: ['contact-info'],
35+
trigger: '@',
36+
}),
37+
],
38+
// ... rest of config
39+
})
40+
```
41+
42+
## Configuration
43+
44+
In your Lexical editor configuration, add the `DynamicValueFeature` to your list of features:
45+
46+
```typescript
47+
import { DynamicValueFeature } from 'payloadcms-dynamic-value-richtext'
48+
49+
// In your collection/global field definition:
50+
{
51+
name: 'content',
52+
type: 'richText',
53+
editor: lexicalEditor({
54+
features: ({ defaultFeatures }) => [
55+
...defaultFeatures,
56+
DynamicValueFeature(),
57+
],
58+
}),
59+
}
60+
```
61+
62+
### Plugin Options
63+
64+
| Option | Type | Description |
65+
| :------------ | :----------------- | :---------------------------------------------------------------------- |
66+
| `collections` | `CollectionSlug[]` | Automatically extract all text-based fields from these collections. |
67+
| `globals` | `GlobalSlug[]` | Automatically extract all text-based fields from these globals. |
68+
| `fields` | `Field[]` | Manually provide a list of Payload fields to be used as dynamic values. |
69+
| `trigger` | `string` | The character that triggers the autocomplete popup. Defaults to `@`. |
70+
71+
## How it Works
72+
73+
1. **Resolution**: The plugin recursively flattens the fields of your chosen collections and globals. For example, if you have a Global `contact-info` with a field `email`, it becomes available as `contact-info.email`.
74+
2. **Injection**: When you type the trigger character in the editor, a popup appears showing all available fields.
75+
3. **Storage**: The variable is stored as a custom `DecoratorNode` in Lexical, which holds a reference to the field path (`value`) and the display label.
76+
77+
## Development
78+
79+
To run the development environment:
80+
81+
1. Clone the repository
82+
2. Install dependencies: `pnpm install`
83+
3. Create a `.env` in the `dev` folder (see `.env.example`)
84+
4. Run development: `pnpm dev`
85+
86+
## Ownership
87+
88+
Created & Owned by **OD LABS**. This plugin is open and free for use to all under the MIT License.
89+
90+
## Contributions
91+
92+
Contributions are welcome! If you have ideas for improvements or find any issues, feel free to open a Pull Request or create an Issue.
93+
94+
## License
95+
96+
MIT

0 commit comments

Comments
 (0)