https://github.com/acryps/page-tagged-editor

Tagged Template Editor for @acryps/page
https://github.com/acryps/page-tagged-editor

Last synced: 5 days ago
JSON representation

Tagged Template Editor for @acryps/page

• Host: GitHub
• URL: https://github.com/acryps/page-tagged-editor
• Owner: acryps
• Created: 2023-10-27T12:47:25.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-30T13:50:39.000Z (7 months ago)
• Last Synced: 2024-04-30T15:05:50.078Z (7 months ago)
• Language: TypeScript
• Size: 10.7 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# page tagged editor

Create templates visually with ease.

## usage

Add the editor to your component.

Define your tags by passing them to the component.

```

export class BroadcastMailComposer extends Component {

	mail: MailTemplate;

	onload() {

		// load your template and prepare the component

	}

	

	render() {

		return 

			

				Broadcast Mail

			

			{new TaggedEditor(

				mail.template,

				[

					new Tag('Recipient Mail', 'address', '${recipient}'),

					new Tag('Given Name', 'name', '${name:given}'),

					new Tag('Family Name', 'name', '${name:family}'),

				],

				template => {

					mail.template = template;

					// save your template

				}

			)}

		;

	}

}

```

We do not provide default styling, but the editor requires some controlling styles to work properly, include them from `source/index.scss`.

The `type` argument of a `Tag` will be set as an attribute, which can be used to style the tag by type

```

&[ui-type="address"] {

	color: #f00;

}

&[ui-type="name"] { 

	color: #0f0; 

}

```

`renderTagList`, `renderTag` and `extractValue` may be overwritten by creating a custom subclass

```

class GroupedTaggedEditor extends TaggedEditor {

	constructor(

		private source: string,

		private groups: Map

		private save: (value: string) => void

	) {

		super(source, [...groups.values()], save);

	}

	renderTagList() {

		return 

			{this.groups.entries().map((group, tags) => 

				

					{group}

				

			

				

					{this.renderTag(tag)}

				

			)}

		

	}

}

```